완전 클라이언트사이드 앱스토어 스크린샷 스튜디오를 만든 이유
저는 9개 언어로 현지화한 인디 iOS 앱들을 출시합니다. 릴리스의 끝은 늘 똑같았습니다: 프레임, 헤드라인, 번역, 픽셀 단위 규격이 전부 필요한 스크린샷의 벽. 이건 그 일을 다시는 손으로 하지 않으려고 만든 도구의 이야기이고, 도구의 모양을 결정한 두 가지 고집에 대한 이야기입니다.
사람을 무너뜨리는 산수
앱 하나. 스크린샷 여섯 장. iPhone과 iPad. 9개 언어. 그러면 PNG 108장 입니다. 전부 App Store Connect의 정확한 해상도여야 하고, 전부 박스를 넘치면 안 되는 번역된 헤드라인을 달고 있어야 합니다. 레이아웃 디테일 하나를 바꾸면 108장을 다시 만들어야 합니다. 디자인 툴은 그 하나하나를 별개의 아트보드로 취급합니다 — 제 릴리스는 코드가 아니라 마케팅 이미지에서 멈춰 서고 있었습니다.
기존 답들은 안 맞았습니다. 스크린샷 SaaS는 산수를 풀어주지만, 제 스크린샷 원본을 자기 서버에 올리라고 하고, 1년에 네 번 쓰는 물건에 구독료를 요구합니다. Figma 템플릿은 디자인을 풀어주지만 곱셈은 풀어주지 못합니다.
첫 번째 고집: 아무것도 브라우저를 떠나지 않는다
그래서 첫 번째 제약은 거의 감정적인 것이었습니다: 내 스크린샷은 내 컴퓨터에 남는다. 계정 없음, 업로드 없음, 백엔드 없음 — 그런데 이게 아키텍처 전체를 밀어붙이는 강제 함수가 됐습니다:
- 프로젝트는
localStorage에, 이미지는 IndexedDB에 저장됩니다. 탭을 닫아도 아무것도 잃지 않고, 사이트 데이터를 지우면 전부 사라집니다. 정직한 저장소입니다. - 캔버스는 Fabric.js입니다; 내보내기는 슬라이드마다 오프스크린 캔버스를 Apple 풀 해상도로 렌더링해 ZIP으로 묶습니다 — 전부 프로세스 안에서.
- 백엔드가 없으니 정적 호스팅이 영원히 무료이고, 수익화할 것도, 지킬 것도, 사과할 것도 없습니다. 프로젝트는 MIT 라이선스 오픈소스입니다.
"클라이언트사이드 전용"은 제약처럼 들리지만, 이 문제에 서버가 필요한 부분이 없다는 걸 깨닫는 순간 달라집니다. 렌더링? 브라우저에 GPU가 있습니다. 번역? 캡션 표를 CSV/JSON으로 내보내 스프레드시트에서 번역하거나 아무 AI 챗에나 붙여넣고 다시 가져오면 됩니다. 백엔드가 있어야 가능했을 단 하나의 기능(서버사이드 API 번역)은 결국 통째로 들어냈습니다 — 복사-붙여넣기 프롬프트가 키 없이 같은 일을 합니다.
두 번째 고집: 파일이 인터페이스다
두 번째 결정은 제가 요즘 실제로 일하는 방식을 보다가 나왔습니다: 개발의 절반이 AI 코딩 에이전트를 통해 일어납니다. 에이전트가 도구를 못 움직이면 그 도구가 병목입니다. 그렇다고 MCP 서버나 플러그인 API를 만들고 싶지는 않았습니다 — 그런 건 썩습니다. 썩지 않는 건 파일입니다:
- 문서화된 가져오기 매니페스트(JSON)가 프로젝트 전체를 기술합니다 — 슬라이드, 레이아웃, 텍스트 블록 수.
- 캡션은 슬라이드 × 언어의 CSV/JSON 표로 오갑니다.
- 스크린샷은 파일명 규칙으로 라우팅됩니다:
01-home.ko.png→ 슬라이드 1, 한국어. - 헤들리스 파이프라인이 브라우저를 한 번도 열지 않고 폴더를 최종 PNG로 렌더링합니다.
그래서 AI 에이전트가 스크린샷 프로젝트 전체 — 카피, 레이아웃 선택, 파일 구성 — 를 평범한 파일로 작성하고, 렌더링하고, PNG를 들여다보고, 고치기를 반복할 수 있습니다. 사람은 가져오기 다이얼로그에서 폴더를 한 번 고르거나, 아예 고르지 않아도 됩니다. 어느 릴리스의 스크린샷 세트가 브리프에서 렌더링까지, 제가 에디터를 열지 않은 채로 완성되는 걸 본 날, 에이전트 루프가 닫혔습니다.
만들면서 배운 것
- 80%를 해결하는 기능 셋은 작습니다. 프레임, 헤드라인, 데이터로서의 캡션, 정확한 규격의 내보내기. 나머지 전부 — 돋보기 루페, 2페이지 파노라마, 스팬 그룹, 로케일별 스크린샷 오버라이드 — 는 실제 릴리스가 필요로 해서 자기 자리를 얻어냈습니다.
- 현지화는 디자인 옷을 입은 데이터 문제입니다. 캡션이 아트보드에 박힌 텍스트가 아니라 표가 되는 순간, 9개 언어는 더 이상 9배의 일이 아니게 됐습니다.
- 제약은 기분 좋게 복리로 쌓입니다. 백엔드 없음이 파일 기반 워크플로를 강제했고, 파일 기반 워크플로가 공짜로 에이전트 구동성을 줬고, 에이전트 구동성은 이제 가장 포기하고 싶지 않은 기능입니다.
소스 코드, 가져오기 매니페스트 명세, 헤들리스 파이프라인은 모두 GitHub 저장소에 있습니다. 현지화된 iOS 앱을 출시하고 있고 이 가려움이 당신의 것이기도 하다면, 이슈나 스타가 가장 좋은 인사입니다.