개발자의 언어, 7개의 코드 단어! PWA 퍼즐 게임 개발 챌린지

안녕하세요! 10년 차 개발자이자 테크 블로거, '코딩하는 김대리'입니다. 오늘은 제가 직접 만들고 즐기고 있는 웹 퍼즐 게임, 7 CODER W🙂RDS에 대한 이야기를 풀어볼까 합니다. 이 게임은 이름 그대로 컴퓨터 과학에 관심 있는 모든 코더와 너드를 위한 단어 퍼즐이에요. 7개의 힌트가 주어지고, 섞인 단어 타일을 조합해 각 힌트에 숨겨진 정답 단어를 맞춰야 합니다. 한번 빠지면 시간 가는 줄 모를 겁니다!

개발의 영감, 오래된 휴대폰 게임에서 시작되다

사실 제 휴대폰에는 아직도 7 Little Words라는 옛날 게임이 깔려 있습니다. 이 게임을 정말 즐겨 했고, 지금도 틈틈이 플레이하죠. 문득 이런 생각이 들었습니다. '이걸 컴퓨터 과학과 프로그래밍 관련 단어들로만 채워 넣은 리메이크 버전으로 만들면 정말 멋지지 않을까?' 그 단순한 상상에서 이 게임의 개발이 시작되었습니다.

앱 스토어 없이, 오직 웹으로만 즐기는 PWA의 매력

7 CODER W🙂RDS는 웹 게임입니다. 저는 개인적으로 웹 게임의 무궁무진한 가능성을 높이 평가합니다. 이 게임은 모바일 기기에서 가장 쾌적하게 플레이할 수 있지만, 데스크톱 브라우저에서도 전혀 문제없이 잘 작동합니다. 저의 목표는 앱 스토어 설치도, 회원가입도, 어떤 번거로운 절차도 없이, 그저 URL을 열면 바로 플레이할 수 있게 하는 것이었습니다. 더 많은 앱과 게임이 이렇게 간단해져야 한다고 생각해요.

무엇보다 이 게임은 프로그레시브 웹 앱(PWA)으로 구현되어 오프라인에서도 플레이가 가능합니다. 사용자가 웹 페이지를 열면 모든 리소스가 로드되고, 서비스 워커가 필요한 모든 자원을 저장하며 서버 측 업데이트도 확인합니다. iOS와 안드로이드 모두에서 업데이트가 매끄럽게 작동하죠. 홈 화면에 추가하면 마치 네이티브 앱처럼 사용할 수도 있습니다. 제가 실무에서 여러 프로젝트를 진행하며 PWA를 도입했을 때, 사용자들의 초기 접근 장벽이 현저히 낮아지는 것을 직접 체감할 수 있었습니다. 앱 설치 없이 바로 서비스를 경험하게 하는 것이 얼마나 큰 장점인지 말이죠.

캔버스 2D로 그린 게임 세상

이 게임의 그래픽은 캔버스 2D로 구현되었습니다. DOM도, CSS도 거의 사용하지 않았죠. 물론 아주 일부는 있지만, 대부분은 선과 스트로크로 이루어져 있습니다. 화면 해상도도 동적으로 처리되기 때문에, 모든 좌표는 캔버스 크기의 비율로 표현됩니다. 덕분에 해상도에 구애받지 않고 어떤 디스플레이 크기에서도 완벽하게 작동합니다.

AI 에이전트와의 협업, 클로드 코드(Claude Code) 이야기

클루, 정답, 그리고 정답 타일을 저장하는 테스트 JSON 모델로 프로토타입을 빠르게 완성한 후, 개념 증명(PoC)을 마치자마자 저는 클로드 코드(Claude Code)의 도움을 받아 게임을 마무리하기로 결정했습니다. 요즘 AI에 대한 "좋거나 싫거나" 하는 의견이 많지만, 저는 꽤 괜찮은 결과물을 얻었다고 생각해요. 특히 자바스크립트 툴링 배경이 강하지 않은 저에게는 Vite가 어떻게 작동하는지 등 AI를 사용하면서 여러 가지를 배울 수 있었습니다.

솔직히 저도 처음에 클로드 코드(Claude Code)를 보면서 '이게 정말 될까?' 하는 의구심이 있었지만, 막상 함께 작업해보니 특정 반복 작업이나 로직 구현에서는 확실히 시간을 단축시켜주는 '똑똑한 동료' 같은 역할을 해주더군요. 물론 완벽하진 않았습니다. 클로드 코드 사용 과정이 마냥 순조롭지만은 않았죠. 큰 프로그래밍 문제는 없었지만, 때로는 과도하게 복잡하게 만들거나 잘못된 위치에 배치하는 경우가 있었고, 필드와 변수 이름도 어긋나는 경우가 있었습니다. 그래서 AI가 작업을 완료하면 제가 다시 수동으로 수정하는 작업을 여러 번 반복해야 했습니다. 그렇다면 왜 AI 에이전트를 계속 사용했을까요? 저에게는 클로드 코드를 마치 동료처럼 사용하는 것이 재미있었습니다. 제가 방향을 설정하면, AI가 생성한 코드를 함께 편집해나가는 식이었죠. 또한 클릭 처리를 위한 정확한 픽셀 위치 계산처럼 제가 직접 했다면 시간이 오래 걸렸을 지루한 작업들을 AI가 훨씬 빠르게 처리해 주었습니다.

퍼즐, AI와 개발자의 합작품

게임 퍼즐이 AI가 생성한 것이냐고요? "꼭 그렇지는 않습니다."라고 답해야겠네요. 초기에는 클로드 스킬 몇 가지를 작성해서 데이터 추출 및 퍼즐 모델 파일 구조화에 도움을 받았습니다. 하지만 결과는 완벽과는 거리가 멀었습니다. 생성된 퍼즐은 종종 단어가 너무 길거나, 너무 단순하거나, 힌트가 부정확한 경우가 많았죠. 게다가 제 클로드 프로 플랜 토큰이 너무 빨리 소모되는 문제도 있었습니다.

결국 AI 에이전트에게 JSON 모델을 생성하고, 퍼즐 인덱스를 관리하며, JSON 모델 규약을 지키는 데 도움이 되는 여러 파이썬 스크립트를 작성하게 했습니다. 이 방법이 토큰 사용량을 크게 줄이는 데 도움이 되었죠. 최종적으로 저는 수동으로 선택한 텍스트와 단어를 받아 미리 정의된 규칙 세트와 이전에 만든 도구를 기반으로 새로운 퍼즐을 생성하는 스킬을 작성했습니다. 50개의 퍼즐을 완성한 후, 모든 퍼즐을 하나씩 검토하고 수정했습니다. 단어 아이디어를 얻는 데 클로드를 활용하기도 했지만, 사실상 모든 단어는 제 컴퓨터 과학 지식과 경험을 바탕으로 직접 고심해서 만들었습니다.

번들링: 가볍고 빠르게

한 번 로드하면 끝나는 정적인 게임을 목표로 했기 때문에, 모든 것을 하나의 큰 자바스크립트 파일에 담기로 결정했습니다. 퍼즐 데이터도 마찬가지였죠. 현재 전체 게임은 45KB의 단일 JS 파일입니다. AI 스크래핑으로부터 퍼즐을 어느 정도 보호하기 위해 (아이러니하게도) ROT 암호 인코딩을 사용했습니다. 아마 큰 효과는 없겠지만, JS 파일에 의미 없는 문자열이 쏟아져 나오는 것을 보는 건 꽤 재미있었습니다.

게임에 사용된 몇 가지 사운드 또한 단일 MPEG-4 스프라이트 파일에 포함되어 있습니다. 이 부분은 LLM조차 구현하기 어려워했습니다. 스프라이트 내의 사운드 위치가 계속 잘못되었거든요. 결국 모든 사운드를 WAVE 형식 파일로 변환한 다음, FFmpeg를 사용하여 하나의 MPEG-4 스프라이트 파일로 합치는 방식으로 해결했습니다.

꼼꼼한 테스트, 버그를 잡다

AI 에이전트에게 각 퍼즐이 올바른 수의 타일을 가지고 있는지, 힌트의 크기가 올바른지, 제대로 인덱싱되었는지 확인하는 테스트 코드를 작성하게 했습니다. 하지만 이것만으로는 충분하지 않다고 생각했고, 게임 전체를 플레이하는 테스트를 만드는 것이 가장 좋겠다는 결론에 도달했습니다. 이를 위해 Playwright를 사용하기로 했습니다.

하지만 이 역시 클로드 코드의 첫 구현에서는 제대로 작동하지 않았습니다. AI가 제가 버튼을 실제로 클릭하고 게임 전체를 플레이해야 한다는 점을 이해하지 못했거나, 제가 설명을 명확하게 하지 못했던 것 같습니다. 몇 번의 수정을 거친 후에야 비로소 제대로 작동했습니다. 이 테스트 덕분에 긴 힌트와 정답에서 텍스트가 화면에서 겹치는 문제를 발견하고 해결할 수 있었습니다. 버그는 언제나 예상치 못한 곳에서 터지죠. 특히나 텍스트 길이에 따라 UI가 깨지는 문제는 개발 초기 단계에서 종종 간과하기 쉬운데, 플레이라이트(Playwright)로 자동화된 테스트를 돌려보니 이런 미묘한 레이아웃 이슈들을 잡아내는 데 큰 도움이 됐습니다. 제가 실제 프로젝트에서도 UI/UX 테스트에 Playwright를 적극 활용하는 이유이기도 하고요.

치팅, 그러나 게임의 본질은...

물론 이 게임은 쉽게 '치팅'할 수 있습니다. 인터넷이나 LLM으로 힌트를 찾아보는 것은 아주 쉬운 일이죠. 하지만 이 게임의 핵심은 치팅이 아닙니다. 이 게임은 타인과의 경쟁이 아닌, 자기 자신과의 싸움입니다. 풀 수 없을 것 같은 힌트도 타일만으로 해결되는 경우가 많으니, 끈기를 가지고 도전해 보세요!

마치며: PWA의 미래를 꿈꾸며

이 작은 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-06 01:26:48