깃헙주소 : https://github.com/nanhimang/carpaltunnel.git
게임접속 : https://nanhimang.github.io/carpaltunnel/CPS_%EA%B2%8C%EC%9E%84_v1.7.html
1. 개발기간
- 4.19 ~ 5.15
2. 개발목적
- 사용자들을 끌어들일 수 있는 게임 개발
- 다양한 모션 디자인 경험
사실상 이것이 내 첫 토이프로젝트였다. 당시에 무엇을 개발해야할지 아이디어가 잘 떠오르지 않아 일단 게임을 도전했다. 간단한 게임을 만들되, 게임 재접속률을 높일 수 있는 아이디어와 모션을 추가하기로 했다.
3. 주요기능
- CPS 계산
- 게임플레이 화면 GIF 다운로드
10초 동안 터치패드를 최대한 많이 타격하여 CPS(click per second)를 카운트하는 게임.
게임 플레이 화면이 자동으로 녹화되며, GIF로 다운로드할 수 있다.
4-1. 문제해결 사례
gif.js로 생성한 GIF 파일을 다음 페이지에서 다운로드하는데 용량이 초과했다.
게임이 시작되면 HTMLcanvas API가 로드되어 canvas.getImageData로 10초간 게임플레이 화면을 10fps로 캡쳐하고, 녹화가 끝나면 gif.js를 이용하여 GIF로 압축한다. 게임종료 모션이 끝나고 결과페이지가 로드되면, 플레이어가 버튼을 눌러 다운로드 받을 수 있게 하려고 했었다. 이를 브라우저 cookie에 DataURL을 저장하는 방식으로 구현하려 했으나, 용량이 2MB여서 쿠키로는 감당이 안되었다. 텍스트를 압축하는 모듈을 사용하려 했으나 너무 복잡하게 느껴졌다. 그래서 기존에 알고있던 firebase의 Realtime Database를 활용하려 했으나, 기본세팅 및 보안설정 등 구현하려는 기능에 비해서 부가적인 작업들이 많아, 다른 방법을 물색해보기로 했다. 현재 문제가 근본적으로 Reload 후 데이터를 불러오는 과정에 있는 것이기에, 2개의 페이지를 하나로 merge하려 해봤다. 허나 당시 React를 활용할 생각을 못하고 display:none을 기반으로 여러 HTML 코드를 중첩하여 화면을 전환하는 기법을 사용했기에 코드가 지나치게 복잡해지는 문제가 있었다. 마지막이다라는 심정으로외부 API를 사용하지 않고 데이터를 Local에 저장할 수 있는 다른 방법을 찾아보니 local storage라는 것이 있었다. 처음엔 단순히 local space, 개인 PC 저장소를 뜻하는 것인줄 알았는데 알고보니 브라우저 기반 저장소였다. 허무하게도 이를 이용하니 문제가 간단히 해결되었다.
4-2. 회고
이 문제를 해결하는데 왜이리 오랜 시간이 걸렸을까 생각해보니, GPT에 의존한 탓이 큰 것 같다. 초반 cookie를 이용하고자 했던 것도 GPT가 추천했던 방법이기 때문이었는데, 브라우저 내 저장소와 관련해 조금이라도 구글링을 해봤다면 이렇게 굳이 삽질을 하지 않았을까 하는 생각이 들었다.
5. 얻어간 것들
- 다양한 CSS 기능학습 : transition-3d preservation, opacity, text-shadow
- 배치/정렬 규칙 습득 : display, position
- 코드 가독성의 중요성
내가 게임을 직접 플레이해보고 뭔가 임팩트가 부족한 모션을 개선해나가면서 다양한 CSS 기능들을 학습할 수 있었다. 뒤집기 모션을 구현한다던지 타임어택 모션, 클릭 모션, 페이드 아웃 애니메이션 등등을 구현하면서 CSS로 수많은 애니메이션이 구현가능함을 알 수 있었다.
이번 토이프로젝트에서는 굳이 반응형 디자인 + 중앙정렬을 고집했는데, 덕분에 배치와 정렬과 관련한 CSS적인 규칙을 알아갈 수 있었다.position:absolute인 상태에서preserve-3d을 적용한다는 것이 얼마나 짜증나는 일인지,display:flex인 상태에서:after선택자를 이용한 정비례 개체 생성을 시도한다는 것이 얼마나 까다로운지 등등..
이전내용과도 연관이 있는데, 코드를 짤 때 개연성이 있는 단어를 사용하고 주석을 덧붙이는 습관의 중요성을 깨달았다. 덧붙여 코드를 잘 정리해야 가독성을 높이고 쉽게 암기할 수 있고, 그리해야 오류를 최소화할 수 있다.
6. 아쉬웠던 점, 보완필요 부분
- 코드 가독성 개선필요
- DB 연동 필요
display:none으로 여러개의div를 겹치는 식으로 HTML을 구성했기에 코드의 가독성이 떨어지고 복잡해진 면이 있다. 이번 유데미 프로젝트 캠프에서 React를 학습하여 코드개선을 시도해봐야겠다. 추가로 Firebase 연동으로 랭킹 DB를 구축해야겠다. 플레이어 간의 경쟁을 부추기기 위한 용도이다.
