Claude.ai 웹 인터페이스만으로 6,000라인 규모의 퍼즐 게임 'Kings vs Queens' 개발기

실용적 조언

UI 관련 버그를 수정할 때는 장황한 설명 대신 스크린샷을 찍어 Claude에게 직접 보여줄 것.
프로토타이핑 시에는 빌드 도구 없이 실행 가능한 단일 HTML 파일 구조를 우선 고려하여 반복 속도를 높일 것.
매 세션마다 프로젝트의 현재 상태, 아키텍처, 남은 과제를 정리한 Markdown 파일을 업로드하여 Claude의 기억을 동기화할 것.

섹션별 상세

작성-다운로드-플레이-스크린샷-붙여넣기로 이어지는 워크플로가 기존 로컬 개발 서버의 Hot-reload보다 빠른 피드백을 제공했다. 특히 UI 버그나 힌트 시스템의 시각적 오류를 텍스트로 설명하는 대신 스크린샷을 활용함으로써 Claude가 즉각적으로 문제를 파악하고 수정 코드를 생성하는 효율성을 확인했다.

6,000라인이 넘는 단일 HTML 파일 구조가 프로토타이핑 단계에서 의존성 관리나 빌드 설정 오류를 원천 차단하는 이점으로 작용했다. Claude는 대규모 파일 내에서도 특정 함수를 찾아 정확하게 수정(Surgical edits)하는 능력을 보였으며, 이는 복잡한 프로젝트에서도 단일 파일 아키텍처가 유효할 수 있음을 시사했다.

힌트 시스템 구현을 위해 Hidden singles, Naked sets, Pigeonhole, Line pair elimination 등 15단계 이상의 복잡한 제약 충족 최적화(Constraint Propagation) 솔버를 구축했다. 실제 플레이 테스트를 통해 'Medium' 난이도 퍼즐이 너무 쉽게 느껴지는 문제를 발견하고, 킹 제약 조건이 논리적으로 필수적인지 판단하는 분류기(Classifier)를 Claude와 함께 미세 조정했다.

Claude.ai의 컨텍스트 제한을 극복하기 위해 세션 5-6단계부터 별도의 마크다운 요약 문서(Memory/Summary doc)를 관리했다. 이 문서에는 솔버 아키텍처, 단계별 계층 구조, 알려진 버그, 파일 간 동기화 절차를 기록하여 새로운 채팅 세션이 시작될 때마다 Claude에게 프로젝트의 전체 맥락을 빠르게 주입하는 '프로젝트 바이블' 역할을 수행했다.

Claude Code와 같은 CLI 도구 대신 웹 UI를 선택한 이유는 시각적 상호작용의 편의성 때문이다. 패키지 관리나 테스트 실행이 필요한 프로젝트는 Claude Code가 적합하지만, 게임처럼 '직접 플레이하고 시각적으로 느끼는' 피드백이 핵심인 프로토타이핑에는 브라우저 기반의 워크플로가 더 강력한 효율을 보였다.

용어 해설

제약 조건 전파(Constraint Propagation): — 변수들 사이의 제약 조건을 활용하여 검색 공간을 줄여나가는 알고리즘 기법이다. 이 프로젝트에서는 힌트 시스템이 논리적으로 다음 수를 유추하기 위해 Hidden singles, Pigeonhole 등의 로직을 처리하는 핵심 메커니즘으로 사용됐다.
N-퀸 문제(N-Queens Problem): — N×N 체스판에 N개의 퀸을 서로 공격할 수 없도록 배치하는 전형적인 조합 최적화 문제이다. 게임 'Kings vs Queens'의 기본 규칙인 '행/열당 퀸 1개 배치 및 인접 금지'의 기술적 토대가 된다.
핫 리로드(Hot Reload): — 앱을 실행 중인 상태에서 코드를 수정하면 즉시 반영되는 개발 기능이다. 작성자는 Claude.ai를 통한 '스크린샷-수정' 루프가 기존 로컬 개발 환경의 핫 리로드보다 시각적 피드백 측면에서 더 효율적이었다고 평가했다.
컨텍스트 윈도우(Context Window): — LLM이 한 번의 대화에서 기억하고 처리할 수 있는 정보의 총량이다. 6,000라인이 넘는 대규모 단일 파일 개발 시 모델이 이전 맥락을 잊지 않도록 별도의 요약 문서를 관리하는 전략이 필요했다.

언급된 도구

Claude.ai추천

대화형 코드 생성 및 시각적 피드백 기반 개발

Claude Code중립

CLI 기반의 복잡한 프로젝트 및 패키지 관리

GitHub Pages추천

완성된 HTML 게임의 호스팅 및 배포

언급된 리소스

DemoKings vs Queens 게임 플레이 링크