개발자의, 개발자를 위한 코드어 퍼즐! PWA 게임 개발기 🎮

안녕하세요! 10년 차 IT 개발자이자 테크 블로거, 케나믹입니다. 오늘은 제가 최근에 만든 워드 퍼즐 게임, "7 CODER W🙂RDS"에 대한 이야기를 풀어볼까 해요. 이 게임은 일반적인 컴퓨터 과학에 관심 있는 분들을 위한 워드 퍼즐인데요. 총 7개의 단서가 주어지면, 뒤섞인 타일들을 조합해서 각 단서에 해당하는 단어를 맞춰야 하는 방식입니다.

개발 계기

사실 저는 지금도 제 휴대폰에 예전 버전의 7 Little Words 게임을 깔아두고 틈틈이 즐겨 해요. 정말 재미있죠. 그러다 문득 컴퓨터 과학과 프로그래밍 영역의 단어들로만 이루어진 리메이크 버전을 만들어보면 어떨까 하는 생각이 들었습니다. 개발자의 감성을 자극하는 퍼즐이라니, 상상만으로도 즐거웠죠.

어떤 플랫폼으로 만들었을까?

이 게임은 웹 기반으로 만들었어요. 저는 웹 게임이 정말 멋지다고 생각하거든요. 물론 모바일 기기에서 플레이할 때 가장 최적화된 경험을 제공하지만, 데스크톱 브라우저에서도 전혀 문제없이 잘 작동합니다. 앱 스토어 설치, 회원가입, 그 어떤 번거로운 절차도 없이 그저 URL에 접속해서 바로 게임을 즐길 수 있도록 하는 게 목표였어요. 요즘은 이런 방식의 앱이나 게임이 더 많아져야 한다고 믿습니다.

특히 이 게임은 PWA(Progressive Web App)로 구현했기 때문에 오프라인에서도 플레이가 가능해요. 사용자가 웹페이지를 열면 필요한 모든 리소스가 로드되고, 서비스 워커가 이 모든 것을 저장합니다. 서버 측의 업데이트도 주기적으로 확인하죠. iOS와 Android 모두에서 업데이트가 아주 매끄럽게 이루어집니다. 심지어 홈 화면에 추가하면 거의 네이티브 앱 같은 경험을 할 수도 있어요. 제가 실무에서 여러 프로젝트를 진행하며 느낀 건, 사용자 접근성을 높이는 데 PWA만큼 효과적인 방법도 드물다는 겁니다.

그래픽 이야기

그래픽은 Canvas2D를 활용했어요. 즉, DOM이나 CSS를 거의 사용하지 않았다는 말이죠. 물론 아주 조금은 썼지만, 대부분은 선과 도형으로 이루어져 있습니다. 화면 해상도도 동적으로 처리되는데, 이는 모든 좌표를 캔버스 크기의 비율로 표현한다는 뜻이에요. 덕분에 이 게임은 해상도 독립적이어서 어떤 화면 크기에서도 문제없이 작동합니다.

에이전트(AI)와 나

처음에는 단서, 정답, 그리고 정답 타일을 저장하는 테스트 JSON 모델로 프로토타입을 만들었어요. PoC(Proof of Concept)를 마친 후, 게임을 완성하기 위해 클로드 코드(Claude Code)를 사용하기로 결정했습니다. 최근 AI에 대한 "좋아하거나 싫어하거나" 식의 의견이 많지만, 개인적으로는 꽤 괜찮은 결과물을 얻었다고 생각해요. 특히 제가 자바스크립트 툴링 배경이 강하지 않은 편인데, Vite가 어떻게 작동하는지에 대해 AI를 사용하면서 많이 배울 수 있었습니다.

물론 클로드 코드 사용이 마냥 순조롭지는 않았어요. 큰 프로그래밍 이슈는 없었지만, 종종 과도하게 설계를 복잡하게 하거나 코드를 엉뚱한 곳에 배치하기도 했습니다. 필드나 변수 이름도 어색한 경우가 많았죠. AI가 작업을 완료하면 제가 직접 수동으로 코드를 오가며 수정하는 과정이 반복되었습니다. 그렇다면 "대체 왜 에이전트 AI를 사용하는가?"라는 질문이 나올 수 있겠죠. 저에게는 클로드 코드가 일종의 동료처럼 느껴져서 함께 작업하는 것이 재미있었어요. 제가 방향을 제시하고, AI가 생성한 코드를 함께 수정해 나가는 방식이었죠. 또한, 클릭 처리를 위한 정확한 픽셀 위치 계산 같은 지루하고 반복적인 작업들을 저보다 훨씬 빠르게 처리해주기도 했습니다. 제가 실무에서 이 부분을 테스트해 봤을 때, AI가 특정 작업을 빠르게 처리하는 건 분명 장점이지만, 결국 최종적인 코드의 품질과 구조는 개발자의 손을 거쳐야 한다는 걸 다시금 깨달았습니다.

퍼즐 제작 과정

그렇다면 게임 퍼즐은 AI가 전부 생성했을까요? "정확히는 아닙니다." 데이터 추출 및 구조화를 돕기 위해 클로드 스킬 몇 가지를 만들긴 했어요. 그런데 완벽과는 거리가 멀었습니다. 생성된 퍼즐에는 너무 긴 단어가 포함되거나, 너무 단순하거나, 단서가 정확하지 않은 경우가 많았죠. 게다가 클로드 Pro-플랜 토큰이 너무 빨리 소모되는 문제도 있었습니다. 그래서 결국 에이전트에게 JSON 모델을 생성하고, 퍼즐 인덱스를 관리하며, JSON 모델 규격을 준수하는 파이썬 스크립트를 작성하게 했습니다. 이렇게 하니 토큰 사용량이 크게 줄어들더군요. 마지막에는 제가 수동으로 선택한 텍스트와 단어들을 기반으로, 미리 정의된 규칙과 앞서 만든 도구들을 활용하여 새로운 퍼즐을 생성하는 스킬을 직접 작성했습니다. 총 50개의 퍼즐을 만들었을 때, 하나하나 모든 퍼즐을 검토하고 수정했어요. 단어 아이디어를 얻는 데 클로드를 활용하긴 했지만, 사실 제 일반적인 컴퓨터 과학 지식과 경험을 바탕으로 거의 모든 단어를 직접 넣었다고 할 수 있습니다.

번들링 전략

이 게임은 한 번 로드되면 모든 것이 작동하는 정적인 게임을 목표로 했기에, 모든 것을 하나의 큰 자바스크립트 파일에 담아버리기로 했습니다. 퍼즐 데이터까지도요. 현재 전체 게임은 45KB짜리 자바스크립트 파일 하나로 이루어져 있습니다. 혹시 모를 AI 스크래핑으로부터 퍼즐을 조금이나마 보호하기 위해(아이러니하죠?) ROT 암호 인코딩을 적용했어요. 큰 효과는 없겠지만, 자바스크립트 파일에 암호화된 의미 없는 문자들이 뿌려지는 걸 보는 건 꽤 재미있었습니다.

게임에 사용된 몇 가지 사운드도 하나의 MPEG-4 스프라이트 파일에 담겨 있습니다. 이 작업은 LLM에게도 조금 어려웠어요. 스프라이트 내의 사운드 위치가 계속 제대로 맞지 않았죠. 결국, 모든 사운드를 WAVE 형식 파일로 변환한 다음, FFmpeg를 사용해서 하나의 MPEG-4 스프라이트 파일로 합치는 방식으로 해결했습니다.

테스트는 어떻게?

에이전트에게 각 퍼즐의 타일 개수가 올바른지, 단서의 크기가 적절한지, 그리고 색인이 제대로 되어 있는지 확인하는 테스트 코드를 작성하게 했습니다. 하지만 이것만으로는 충분하지 않다고 생각했어요. 그래서 게임 전체를 플레이하는 테스트를 만드는 것이 가장 좋겠다고 판단했죠. 이를 위해 Playwright를 사용하기로 했습니다. 역시나 클로드 코드의 첫 번째 구현은 제대로 작동하지 않았어요. 제가 충분히 명확하게 설명하지 못했거나, AI가 버튼을 실제로 클릭하고 게임 전체를 플레이해야 한다는 것을 이해하지 못한 것 같았습니다. 여러 차례 수정을 거쳐 마침내 제대로 작동했습니다. 이 테스트 덕분에 긴 단서와 정답이 화면에서 겹치는 문제를 찾아낼 수 있었고, 해결할 수 있었습니다.

혹시 치트?

물론 이 게임은 쉽게 치트를 쓸 수 있습니다. 인터넷이나 다른 LLM을 사용해서 단서를 찾아보는 건 식은 죽 먹기죠. 하지만 이 게임의 본질은 그런 데 있지 않아요. 이건 다른 사람과의 경쟁이 아니라, 스스로와의 싸움입니다. 아무리 풀기 어려운 단서라도 타일만 보고도 풀 수 있는 경우가 많으니까요.

마치며

이 작은 PWA 게임을 만드는 과정은 정말 즐거웠습니다. 저는 웹 앱의 강력한 지지자이며, 대부분의 모바일 앱이 사실 웹 앱으로도 충분히 구현될 수 있다고 생각합니다. 애플이 PWA를 전적으로 지원하지 않는다는 점은 조금 아쉽지만, 조만간 생각이 바뀌기를 바랍니다. 이 게임을 직접 플레이해보고 싶으시다면 7coderwords.kenamick.com으로 접속해 보세요! 그리고 혹시 의견이 있으시다면 @7coderwords@mastodon.social로 언제든 피드백 부탁드립니다.

7 Coder Words 게임 내 워드 퍼즐 이미지

원문: https://dev.to/petarov/7-coder-words-i-built-a-pwa-word-puzzle-for-coders-and-nerds-3oh5 수집일: 2026-05-07 01:45:19