앱 마케팅 이미지를 AI 에이전트에게 맡기는 시대가 왔어요

앱 스토어 꾸미는 일, 왜 여전히 손이 많이 갈까

앱을 출시하는 순간 가장 손이 가는 일을 꼽으라면, '스토어 등록 이미지 만들기'를 빼놓을 수 없어요. App Store에는 아이폰·아이패드 크기별로 스크린샷을 맞춰 넣어야 하고, Play 스토어도 비슷한 규격 난이도가 있어요. 스토어 심사에서 이미지 규격이 어긋나면 거절 사유가 되기도 하죠.

그래서 보통은 디자이너가 수작업으로 템플릿을 맞추거나, 외주 툴을 써서 기기에 스크린샷을 끼워넣는 식으로 처리했어요. 여기에 소셜 카드(오픈그래프 이미지, X용 카드)와 프로모 영상까지 챙기려면 작업량이 꽤 커져요. 이 수고를 코딩 에이전트에게 통째로 넘기는 프로젝트가 Hacker News의 Show HN에 올라왔어요.

Show HN에 등장한 오픈소스 '에이전트 스킬'

소개된 건 imshaikot/app-preview-craft-skill이라는 오픈소스 프로젝트예요. 이름 그대로 '앱 미리보기(프리뷰) 제작'에 특화된 에이전트 스킬이에요. 에이전트 스킬은 에이전트가 '이런 작업은 이 절차로 처리해' 하고 참고하는 지식·도구 묶음이에요. 이 스킬은 그걸 활용해, 사용자가 앱 스크린샷과 화면 녹화만 건네면 다음 결과물을 자동으로 뽑아줘요.

• App Store / Play Store 규격에 맞는 스크린샷 세트 (App Store Connect·Play 콘솔에서 요구하는 모든 크기)
• 오픈그래프·X·LinkedIn·인스타그램·스토리용 소셜 카드
• 스크린 녹화를 움직임이 있는 2D 프로모 영상으로
• 아이폰·갤럭시·맥북이 등장하는 3D 디바이스 쇼케이스 영상과 3D 히어로 목업

핵심 포인트는 모든 렌더링이 로컬에서 이뤄진다는 거예요. 헤드리스 크롬(Headless Chrome)으로 화면을 그리고, three.js로 3D 장면을 돌리고, ffmpeg로 영상을 인코딩해요. 이미지·영상을 클라우드 업로드 없이 로컬에서 처리하니, 데이터가 외부로 새 나갈 일이 적어요.

어떤 결과물을 만들 수 있나

프로젝트가 만드는 결과물은 다섯 가지로 갈라져요. README가 정리한 표를 옮겨보면 이래요.

앱 스토어 테마는 인기 앱들의 '분위기'만 빌려왔어요. 예를 들어 피트니스는 stride, 금융은 ledger, 마음챙김은 serene, 생산성은 canvas, 음식은 sizzle, 여행은 wander, 음악은 mixtape, 게임은 arcade, 사진은 snapshot, 헬스데이터는 pulse 같은 식이에요. 브랜드 에셋을 가져온 게 아니라 무드만 참고한 형태라는 설명이에요.

3D 기기에 쓰는 장치 모델은 CC-BY-4.0 라이선스이고, 모델을 쓴 렌더라면 자동으로 CREDITS.txt를 만들어줘요. 발행할 때 크레딧을 지키라는 안내도 README에 있어요. 코드 자체는 MIT 라이선스예요.

설치와 쓰임새는 간단해요

설치는 에이전트별로 조금씩 달라요. Claude Code는 플러그인 마켓플레이스에서 추가하거나 스킬 폴더로 받을 수 있고, Codex·Cursor·GitHub Copilot·Gemini CLI·OpenCode·Amp·Goose는 .agents/skills 폴더에 클론하면 돼요. 요구 사양은 Node 20 이상, WebGL이 되는 Chrome/Chromium/Edge, 영상용 ffmpeg예요. 처음 실행하면 doctor.mjs가 스킬의 npm 패키지 약 95MB를 설치하고 나머지 환경을 점검해줘요.

사용은 자연어로 하는 게 기본이에요. 에이전트에게 이런 요청을 하면 돼요.

Make App Store screenshots from ./screenshots — it's a budgeting app. Turn demo.mov into a 3D phone video for Instagram. Make an og image and an X card for the launch.

CLI로 직접 돌릴 수도 있어요. 예를 들어 아이폰 6.9인치와 아이패드 13인치 크기, ledger 테마로 앱 스토어 스크린샷을 만들 땐 이런 명령이에요.

node $SKILL/scripts/cli.mjs app-store shots/*.png --theme ledger --size iphone-6.9,ipad-13
node $SKILL/scripts/cli.mjs device-video home.png demo.mov --theme turntable
node $SKILL/scripts/cli.mjs social-card home.png --theme launch --size og,x-post
node $SKILL/scripts/cli.mjs gallery app-store     # 모든 테마 미리보기

테마 속성이 마음에 안 들면 --set path=value로 값 하나씩 덮어쓸 수 있고, 테마 파일이 내장 테마를 확장하도록 만들 수도 있어요. studio 명령은 드래그앤드롭으로 스크린을 올리고 카피를 고치고 3D를 미리보며 한 번에 내보내는 로컬 편집기를 열어줘요.

어떤 점이 눈에 띄나

이 프로젝트가 흥미로운 건 에이전트 스킬 생태계가 '코드 작성'을 넘어 마케팅 자산 생성까지 확장되고 있다는 신호예요. 스킬 폴더 하나를 받아두면 클로드 코드든 코드스든 커서든 같은 방식으로 이미지·영상을 뽑을 수 있어요. 스토어 등록 이미지처럼 규격이 정해진 반복 작업은 에이전트에게 맡기기 좋은 영역이라, 앞으로 비슷한 스킬이 더 늘어날 가능성이 커 보여요.

동시에 짚어둘 한계도 있어요. 지금 스타 수가 0이고 0.1.0 정식 버전이 막 나온 매우 초기 프로젝트예요. 안정성이나 품질은 실제 사용 전까지 검증하기 어렵고, 오픈그래프·X 카드 규격은 플랫폼이 바뀔 때마다 갱신이 필요해요. 처음 쓰는 분은 우선 예시 이미지 몇 장을 뽑아 보고, 3D 목업을 쓸 땐 CC-BY 라이선스 문구가 잘 붙는지 확인하면 돼요.

그래도 로컬에서 헤드리스 크롬과 three.js, ffmpeg로 스토어 이미지부터 프로모 영상까지 한 번에 뽑아내는 접근은, 혼자 앱을 만드는 개발자나 소규모 팀에게 매력적인 옵션으로 다가와요. 관심이 있다면 GitHub의 app-preview-craft-skill 저장소에서 README와 예시 미리보기를 살펴보세요.

참고 링크

• app-preview-craft-skill 저장소
• v0.1.0 릴리스
• 시연 예시 이미지 (gallery-app-store)