Claude의 사용량 제한에 분노하여 만든 '스크린 파괴' 미니게임 제작기

실용적 조언

AI가 생성하는 코드의 품질을 높이려면 처음부터 디커플링된 구조를 명시적으로 요구하라.
데스크톱 앱의 메모리 최적화가 필요하다면 AI에게 'idle loop 내 object creation 금지'를 프롬프트에 포함하라.
특정 모델의 웹 UI 제한에 걸린다면 OpenRouter API를 대안으로 검토하라.

섹션별 상세

Claude의 엄격한 사용량 제한 문제를 해결하기 위해 OpenRouter로 전환했다. 작성자는 단 2번의 프롬프트만으로 5시간 쿨다운이 발생하는 제약을 피하기 위해 API 기반의 OpenRouter를 백엔드로 선택하여 끊김 없는 개발 환경을 구축했다. 이를 통해 특정 모델의 인터페이스 제약에서 벗어나 자유로운 에이전트 활용이 가능해졌다.

AI 에이전트인 pi-ai를 활용하여 복잡한 구현 로직을 해결했다. 작성자는 시니어 개발자로서의 아키텍처 설계 능력을 바탕으로 에이전트에게 SOLID 원칙을 준수하는 디커플링된 구조를 지시했다. 결과적으로 코어 엔진과 UI가 분리되어 향후 무기 확장 등이 용이한 유지보수 가능한 코드베이스를 확보했다.

Electron과 PixiJS 및 GLSL 셰이더를 조합하여 실시간 화면 왜곡 효과를 구현했다. 단순한 정적 이미지가 아닌 displacement map 셰이더를 사용하여 클릭 시 실제 유리가 찌그러지는 듯한 물리적 충격을 시뮬레이션했다. Electron의 desktopCapturer를 통해 현재 커서가 위치한 모니터 화면을 캡처하여 게임 모드로의 전환을 매끄럽게 처리했다.

Screen Destroyer 게임의 실제 실행 화면 캡처 — Screenshot데스크톱 화면이 격투 게임 스타일의 타격 효과와 함께 물리적으로 파손된 것처럼 보이는 시각적 효과를 보여준다. 이는 본문에서 언급된 PixiJS와 GLSL 셰이더를 이용한 displacement map 효과가 실제로 어떻게 구현되었는지 증명하는 근거가 된다.

저사양 환경 최적화를 위해 AI에게 메모리 관리 전략을 구체적으로 지시했다. 유휴 상태에서 RAM 점유율을 30MB 이하로 유지하기 위해 루프 내 객체 생성을 방지하도록 AI를 가이드했다. 또한 macOS, Windows, Linux 간의 투명도 처리 문제를 해결하기 위해 screenshot-desktop 라이브러리를 활용한 플랫폼별 폴백 로직을 구현했다.

용어 해설

바이브 코딩(Vibe Coding): — 개발자가 세세한 구현 로직을 직접 작성하기보다 AI 에이전트에게 추상적인 의도와 '느낌(vibe)'을 전달하여 결과물을 생성하는 개발 방식이다. AI의 높은 의존도를 특징으로 하며, 빠른 프로토타이핑과 아이디어 구현에 최적화되어 있다.
에이전트 도구(Agentic Tool): — 단순한 코드 완성을 넘어 스스로 문제를 분석하고 해결 전략을 수립하여 실행하는 AI 시스템이다. 사용자의 고수준 지시를 바탕으로 파일 구조 설계, 버그 수정, 리팩터링 등을 자율적으로 수행한다.
변위 맵 셰이더(Displacement Map Shader): — 이미지의 픽셀 위치를 물리적으로 왜곡시켜 입체감이나 질감을 표현하는 그래픽 처리 기술이다. 이 프로젝트에서는 화면이 물리적으로 찌그러지는 효과를 실시간으로 렌더링하기 위해 사용됐다.

언급된 도구

OpenRouter추천링크

LLM 사용량 제한 우회 및 다양한 모델 접근

pi-ai추천

구현 로직 해결을 위한 기본 에이전트 도구

PixiJS추천

GLSL 셰이더를 활용한 2D 렌더링 및 효과 구현

언급된 리소스

DemoScreen Destroyer