제작 기간/시간

• 2025-05-24 ~
• 프로토타입까지 약 4시간
• MVP 까지 약 2주

아이디어

인터랙티브 코딩 아이디어를 떠올리던 중 원주율이 원으로 돌아가는 이미지가 떠올랐습니다. 구현 전 디벨롭을 하면서 '좀 더 인터랙티브하게 사용자가 직접 원주율을 입력하면 좋겠는데?' 싶었고 '틀리면 어떻게 하지?', '여기서 알림만 주면 게임이잖아?' 하는 생각으로 접근했습니다.

개발 과정

요즘 유행하는 Vibe Coding을 활용했습니다. 게임 엔진을 안 쓰고 Canvas에 GSAP을 사용하는 것을 골조로 입력 -> 숫자가 원으로 생성 애니메이션을 구현하고 살을 붙여나갔습니다. 이후 개인적인 우선순위를 바탕으로 타이머 기능을 붙이고, 점수 방식을 붙였다가 뗐다가, 모바일 대응을 위해 키보드 입력 붙이고 그에 대한 UI 대응, 랭킹 시스템을 위한 Redis 설정 등을 해나갔습니다.

사용 기술

• Canvas : 웹 브라우저에서 그림을 그리게 해줌. 숫자와 각종 애니메이션을 그리기 위해 사용
• GSAP : 애니메이션 표현을 위해 사용. requestAnimationFrame() 을 사용한 부분도 있지만, 높은 추상화로 Easing등 고급 기능이 간편하고 브라우저 별 귀찮은 처리도 해줘서 채택했습니다.
• DOM : 웹 게임엔진을 써서 개발한 게임은 이런게 어렵겠지만, 쌩으로 개발한 장점을 살리고자 SEO에 조금이라도 좋은 점수를 위하여 DOM구조를 미리 만들어놓고 hide, show 하는 방식으로 랭킹창, 알림 메세지 창, 키보드 창 등을 구현했습니다.
• Redis : 현재 초기 버전으로 DB 없이 가볍게 랭킹을 기록하고자, 한편으로는 NoSQL 이론만 알고 프로젝트에 써본적은 없는 상황을 탈피하기 위하여 채택해 사용했습니다.

후기

• 간단히 1~2일이면 완성할거라고 생각했는데, 이것저것 욕심을 부리다보니 2주 정도 (평일은 저녁 시간만 활용)가 소요됐습니다. 기획과 개발 계획이 좀더 잘 잡혔다면 좀 짧았을까? 싶습니다.
• Vibe Coding 덕분에 제작에 1달 정도 걸리거나 중간에 포기했을 게임을 완성할 수 있었습니다. Vibe Coding의 장점 중 하나는 내가 생각한 아이디어를 조악하게나마 '돌아가게' 해서 이후 아이디어 디벨롭이 더 쉬워진다는 점인 것 같습니다.

향후 계획

• Web View로 감싼 앱을 만들어 안드로이드 마켓에 낼 계획이 있습니다.
• Web View를 하는김에 PWA(Prograssive Web App)로 제작 계획입니다.
• 리듬 게임도 접목하고 싶은데, 암기와 함께 숫자 암기까지 해야하는게 오히려 답답하게 느껴진다.