
Claude Code를 활용해 그린 스크린 스크린샷만으로 Mac App Store 등록 페이지 전체를 디자인한 사례
요약
Claude Code를 활용하여 그린 스크린 방식의 스크린샷을 Mac App Store용 마케팅 프레임으로 자동 변환하는 워크플로우를 구축한 사례입니다. Python 스크립트와 Headless Chrome을 사용하여 정밀한 크롭, 모서리 처리, 해상도 렌더링을 자동화했습니다.
핵심 포인트
- 그린 스크린 스크린샷을 활용한 자동 크롭 및 정밀 편집 파이프라인 구축
- Python(PIL, numpy)과 Headless Chrome을 이용한 디자인 자동화
- Apple App Store 요구 사양(2880×1800)에 맞춘 정확한 해상도 렌더링
- 반복 가능한 워크플로우를 통해 새로운 테마 출시 시 즉시 적용 가능
저는 제 집중 타이머(focus timer) 앱의 Mac 버전을 출시할 예정이었고, App Store용 스크린샷이 필요했습니다. 디자이너에게 비용을 지불하거나 Figma와 씨름하는 대신, Claude Code를 사용해 보았습니다. Claude가 제안한 워크플로우는 저를 놀라게 했습니다. 저는 데스크톱 배경화면을 밝은 초록색으로 설정하고 그 위에서 앱 창들을 스크린샷으로 찍었습니다(크로마키 그린 스크린처럼 말이죠). Claude는 초록색 배경에서 각 창을 자동으로 감지하고 정밀하게 크롭(crop)하는 Python 스크립트(PIL + numpy)를 작성했습니다. 심지어 밀도 스캔(density scan)을 사용하여 마우스 커서를 무시하고 모서리를 둥글게 처리하기까지 했습니다. 또한 기존 등록 정보의 브랜드 스타일을 HTML/CSS로 재구축하였고(동일한 압축된 투톤 헤드라인, 동일한 색상 사용), 실제 스크린샷을 7개의 마케팅 프레임으로 합성했습니다. Headless Chrome은 각 프레임을 Mac 스크린샷에 필요한 Apple 요구 사양인 정확히 2880×1800 해상도로 렌더링합니다. 전체 파이프라인이 제 리포지토리(repo)에 저장되어 있어, 새로운 테마를 출시할 때마다 초록색 배경에서 다시 캡처하고 실행하기만 하면 됩니다. 보너스로, 대화 전체를 다리자어(Darija, 모로코 아랍어)로 진행했는데 Claude가 그냥 맞춰주더군요. 앱은 현재 심사 중이며, 관심 있는 분들을 위해 출시되면 공유하겠습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 r/ClaudeAI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기