소개
Ladder Game은 웹사이트에서 간단하게 사다리 게임을 하기 위해 만든 토이 프로젝트입니다. 아직 완성되지는 않았지만 1차적으로 구현하려고 했던 기능들이 완료되어 소스를 공개합니다.
Demo 이 링크를 클릭하여 지금 바로 사다리 게임을 할 수 있습니다. 데스크탑 웹과 모바일 웹을 모두 지원하지만, Internet Explorer(이하 IE)는 버전 11이상만 호환됩니다. IE 버전 10이하는 사용하는데 문제가 있을 수 있으니 최신 브라우저를 사용해주세요.
목표
1차 완성의 목표는 사다리게임이라고 말하면 누구나 알만한 기능 구현을 목표로 하였습니다.
- 사다리 개수 입력
- 플레이어 이름 입력
- 보상 입력
- 사다리 그리기
- 사다리 결과
구현해야 할 기능을 정리해보면 이렇게 5개 정도로 아주 심플합니다.
사다리 입력
첫 페이지에서는 사다리를 그리기 위해 필요한 사다리 개수, 플레이어 이름, 보상을 입력받습니다. 사다리 개수는 최소 2개부터 입력할 수 있게 하였고 뇌피셜로 20개가 넘을 필요 없을 것이라 판단해서 20까지 입력할 수 있게 조건을 걸었습니다. 이름과 보상은 선택적으로 입력하게 하였는데, 자동으로 입력되면 편할 것 같다는 얘기가 많아서 다음에는 터치나 클릭으로만 입력되게 해야겠다고 생각 중 입니다.
문제점 발견
사다리 개수, 플레이어 이름, 보상을 입력하고 마지막에 Next 버튼을 누르면 사다리가 나타나게 하였습니다. 학교에서 칠판에 사람 수만큼 수직으로 막대기를 그리고 돌아가면서 무작위로 막대기를 이으며 사다리를 만들어가던 모습을 상상하며 만들었는데, 너무 제 생각만 했던 것 같습니다. 많은 분들이 막대기밖에 없어서 어떻게 해야될지 모르겠다는 의견을 주셨습니다. 😭
이 부분도 사다리가 처음 만들어질 때 미리 몇개 이어져 있다던지 튜토리얼을 넣는다던지 개선점이 필요해보입니다.
사다리 잇기
막대기에 조금 튀어나온 부분이 연결지점인데, 연결지점을 클릭해서 막대기를 이을 수 있습니다. (이렇게 설명해주지 않으면 아무도 모를 듯)
중간 막대기를 잇는 로직은 계산이 많아서 꽤 무거워 보입니다. 처음에는 중간 막대기 데이터에 계산된 좌표를 저장하여 재계산을 피하려고했는데, 생각해보니까 화면의 크기가 바뀌지 않으면 재계산할 일이 없었습니다. 그래서 좌표의 계산은 렌더링이 시작되는 순간 실행되고 저장하지 않습니다.
결과화면
막대기를 이어서 사다리를 만든 뒤 준비 완료 버튼을 클릭하면 드디어 사다리게임을 시작할 수 있습니다.
결과를 보여주는 선은 Canvas를 사용했습니다. 사다리 데이터는 수많은 노드로 연결되어있는데, 중간 막대기를 이을 때마다 서로 연결되어 이름부터 보상까지 탐색할 수 있는 리스트가 만들어집니다. 플레이어 이름을 클릭하면 이 리스트를 순회하며 선을 그리기 위한 좌표를 계산하고 State에 저장합니다. 캔바스를 처음 그릴 때는 애니메이션이 있고 재렌더링시에는 한번에 그리는데, 화면이 리사이징될 때마다 재렌더링이 발생하면 성능저하가 발생할 수 있어서 100ms마다 실행되도록 쓰로틀링 처리를 해주었습니다. 100ms라는 제한시간은 제 컴퓨터랑 핸드폰에서 테스트하면서 이 정도면 자연스럽다고 느낀 시간이라 추후 변경될 수도 있습니다. 그리고 100ms 후에도 캔바스를 그리고 있을 수 있으니 애니메이션을 취소시키는 기능까지 추가해서 사다리게임의 1차 목표를 완성하였습니다.
기술 스택
메인 프레임워크
NextJs
사실 NextJs는 이 프로젝트와는 어울리는 프레임워크가 아닙니다. 토이 프로젝트는 자신이 달성하고 싶은 목표를 정하고 그것을 해보는게 중요하다고 생각하는데 이번에 React Hook API 사용, SSR 구현, 빌드와 배포의 자동화, 안정적인 서버 운영등의 목표를 달성하는데 가장 적합하다고 판단하여 선택하였습니다.
UI 관련
Material-UI
디자인적인 부분은 배제하고 기능 구현에 집중하기 위해 사용했습니다.
개발 관련
TypeScript
사다리게임은 구지 만들어보지 않아도 데이터 구조가 복잡할 것으로 예상됩니다. 타입스크립트를 사용하면 타입의 힌트를 얻을 수 있기때문에 사용하지 않을 이유가 없습니다.
Eslint
Eslint를 사용하면 오타를 제외한 잘못된 코드를 미리 발견할 수 있습니다. 에디터에 있는 플로그인으로도 사용할 수 있지만 에디터 플러그인은 에디터에 종속되기때문에 좋은 방법이 아니라고 생각합니다. Webpack loader에 추가해놓으면 빌드할 때마다 검사하기 때문에 대부분의 오류를 미리 방지할 수 있습니다.
Prettier
일관적인 코드 스타일을 유지하기위해 사용합니다. Prettier도 에디터 플러그인으로 사용할 수 있지만 Eslint와 같은 이유로 Eslint 플로그인으로 추가하여 강제로 지키도록 하였습니다.
PM2
PM2는 NodeJs로 만들어진 daemon process manager입니다. PM2를 사용하면 NodeJs 서버를 데몬으로 실행하고 관리할 수 있습니다. 플러그인을 추가하면 원격기능과 배포기능도 있어서 매우 유용합니다.
Cypress
Cypress는 E2E 테스트를 위한 도구입니다. E2E 테스트는 코드가 아닌 사용자의 행동에 따른 시나리오대로 프로그램이 동작하는지 확인하는 테스트입니다.
Storybook
Storybook은 UI Component를 독립적으로 개발하고 테스트하기 편리한 개발환경을 만들어주는 도구입니다. 컴포넌트 기반 개발(component-based development, CBD)을 할때 유용합니다.
Wiki
더 자세한 설명은 Wiki를 참고해주세요.
끝
이것저것 사다리게임과는 상관없는 작업들도 많이하며 기간이 길어졌지만 만족스럽게 마무리된 것 같습니다. 이번 목표는 기능구현에 집중했는데, 다음 목표는 사용성 개선에 집중하려고 합니다.
이상으로 리뷰를 마칩니다. 감사합니다. 😆