실시간 뉴스 기반 미니 크로스워드 'Crosswording The Situation' 개발기

실용적 조언

콘텐츠 생성 시 구조(그리드)를 먼저 확정한 뒤 내용을 채우는 방식이 LLM의 논리적 오류를 방지하는 데 효과적이다.
iOS 웹 환경에서 키보드 입력 이슈가 발생할 경우 투명한 input 오버레이를 사용하여 이벤트를 캡처할 수 있다.
LLM에게 최근 생성 이력을 컨텍스트로 제공하여 중복된 주제 선정을 방지할 수 있다.

섹션별 상세

크로스워드 생성 파이프라인은 Python 스크립트와 Claude API의 협업으로 자동화됐다. 매일 새벽 2시 Python이 5x5 회전 대칭 그리드를 생성하고 Google News와 Bluesky에서 약 400개의 헤드라인을 수집한다. 수집된 데이터는 Claude Sonnet 4.6으로 전달되어 각 단어에 맞는 뉴스 기반 힌트로 변환되며, 두 번째 LLM 호출을 통해 중복된 뉴스 소재를 필터링한다. 최종 결과물은 JSON 형태로 저장되어 GitHub Actions를 통해 GitHub Pages에 자동으로 배포되는 구조이다.

LLM을 활용한 퍼즐 생성 시 '그리드 우선' 설계가 신뢰성을 높이는 핵심 요소임이 확인됐다. 뉴스 단어를 그리드에 억지로 끼워 맞추는 대신, 이미 완성된 유효 단어 그리드에 맞춰 Claude가 뉴스 힌트를 작성하게 함으로써 생성 오류를 최소화했다. 또한 Claude에게 지난 7일간의 힌트 이력을 제공하여 동일한 대형 사건이 반복적으로 노출되는 현상을 방지했다. 이러한 컨텍스트 주입 방식은 매일 새로운 사용자 경험을 제공하는 데 필수적인 장치이다.

프론트엔드 구현 과정에서 iOS Safari의 가상 키보드 입력 문제를 기술적으로 해결했다. iOS Safari는 div 요소에서 keydown 이벤트를 정상적으로 발생시키지 않으므로, 화면에 보이지 않는 투명한 input 레이어를 덮어 사용자 입력을 캡처하는 방식을 사용했다. 프레임워크 없이 순수 JS/CSS/HTML만으로 모바일 우선 반응형 디자인을 구축하여 의존성을 줄이고 성능을 최적화했다. 스트릭 추적과 해결 시간 통계 기능을 통해 게임으로서의 완성도를 높인 것이 특징이다.

전체 시스템 운영 비용은 퍼즐당 약 $0.01에서 $0.02 수준으로 극히 저렴하다. Claude Sonnet 4.6의 효율적인 토큰 처리와 GitHub Actions의 무료 티어를 활용하여 서버 유지비 없이 서비스를 운영 중이다. 이는 고성능 LLM을 단순한 챗봇을 넘어 특정 도메인의 콘텐츠 생성 엔진으로 활용할 때의 경제적 타당성을 뒷받침한다. 1인 개발자가 복잡한 인프라 없이도 AI 기반의 지속 가능한 마이크로 서비스를 구축할 수 있는 사례이다.

용어 해설

클로드 코드(Claude Code): — Anthropic에서 제공하는 코딩 보조 도구로, 터미널 환경에서 에이전트처럼 작동하며 코드 작성 및 수정을 돕는다. 개발자가 자연어로 명령하면 파일 시스템에 직접 접근해 코드를 수정하고 테스트를 실행하는 등 자율적인 코딩 작업을 수행하여 생산성을 높인다.
AT 프로토콜(AT Protocol): — Bluesky에서 사용하는 탈중앙화 소셜 네트워크 프로토콜로, 인증 없이도 공개 데이터를 수집할 수 있는 API를 제공한다. 여러 서버에 분산된 데이터를 통합적으로 관리하며, 뉴스 헤드라인 수집과 같은 데이터 크롤링 작업에서 높은 개방성과 접근성을 보장하는 것이 특징이다.
깃허브 액션(GitHub Actions): — GitHub에서 제공하는 CI/CD 도구로, 특정 시간(새벽 2시)에 스크립트를 실행하고 결과를 자동 배포하는 워크플로를 구축하는 데 사용된다. 코드 변경 사항을 자동으로 빌드, 테스트, 배포할 수 있게 해주며, 이 프로젝트에서는 매일 퍼즐을 생성하고 웹에 게시하는 자동화 엔진 역할을 한다.
회전 대칭(Rotational Symmetry): — 크로스워드 퍼즐 설계에서 그리드를 180도 돌려도 검은 칸의 배치가 동일하게 유지되는 전통적인 디자인 규칙이다. 퍼즐의 시각적 균형을 맞추고 난이도를 조절하는 데 중요한 역할을 하며, 자동 생성 알고리즘 구현 시 그리드의 유효성을 판단하는 주요 기준으로 활용된다.
바닐라 자바스크립트(Vanilla JS): — 외부 라이브러리나 프레임워크(React, Vue 등)를 사용하지 않고 순수 자바스크립트만으로 웹 애플리케이션을 개발하는 방식이다. 추가적인 종속성 없이 브라우저 표준 기능을 최대한 활용하므로 초기 로딩 속도가 빠르고 유지보수가 간결하며, 모바일 환경에서 가벼운 실행 환경을 제공한다.

언급된 도구

Claude Code추천

터미널 기반 AI 코딩 에이전트

Claude Sonnet 4.6추천

뉴스 기반 크로스워드 힌트 생성 엔진

GitHub Actions추천

매일 새벽 자동화 워크플로 실행 및 배포

AT Protocol API중립

Bluesky 소셜 네트워크 뉴스 데이터 수집

언급된 리소스

DemoCrosswording The Situation