Claude AI로 앱 아이콘 디자인: 개발자 가이드

개발자가 Claude AI를 사용해 앱 아이콘을 디자인한 방법

한 개발자가 PIDKill이라는 macOS 프로세스 관리자를 만들어 스캔 루프에서 프로세스를 자동으로 종료합니다. 만족스러운 로고 없이 제품을 출시한 후, 그들은 Figma, Midjourney를 사용하거나 디자이너를 고용하는 대신 Claude AI를 사용했습니다.

두 Claude 버전을 활용한 디자인 과정

개발자는 경쟁적인 디자인 과정에서 Claude Code와 Claude 웹(별명 "牛仔" 또는 "카우보이")을 모두 사용했습니다:

Claude Code의 초기 컨셉: 야행성 감시자가 프로세스를 모니터링하는 것을 나타내는 "나이트 아울" 방향으로, 5가지 하위 방향에 걸쳐 20가지 변형을 제시했습니다.
Claude 웹의 접근법: 12가지 정교한 올빼미 디자인을 생성한 후, 무기(전투 도끼, 낫, 수리검), 터미널(kill -9 타이포그래피), 정밀 타격 시리즈(조준경, 스코프)로 전환했습니다.
디자인 폭발: Claude 웹은 하룻밤 사이에 세 차례에 걸쳐 60개 이상의 컨셉을 생성했습니다: 기본 컨셉 × 20개(해골, 번개, 방패 X), 방패 심층 탐구 × 20개, 파격적 컨셉 × 20개(파리지옥, 단두대, 사마귀).

우승 디자인: 단순하고 직접적

이전 시도들은 은유를 사용했지만, Claude Code는 "PID"(프로세스 ID)를 사용한 직접적인 표현을 만들어냈습니다:

<!-- 빨간색 오프셋 -->
<text x="96" fill="#FF0000" opacity="0.25">PID</text>
<!-- 청록색 오프셋 -->
<text x="104" fill="#00FFFF" opacity="0.25">PID</text>
<!-- 흰색 메인 -->
<text x="100" fill="#E0E0E0">PID</text>
<!-- 빨간색 선 하나 -->
<line x1="36" y1="100" x2="164" y2="100" stroke="#FF4444"/>

이 디자인은 SF Mono(macOS 시스템 기본 폰트)를 사용하며, 빨간색과 청록색 오프셋이 글리치/색수차 효과를 만듭니다. 빨간색 취소선은 종료되는 프로세스를 나타냅니다.

핵심 통찰: 시스템 언어 대 디자인 언어

Claude 웹은 Claude Code의 디자인이 우승한 이유를 분석했습니다: "저는 디자인을 수행하고 있었습니다. Claude Code는 아이디어를 표현하고 있었습니다." Claude 웹이 다양한 폰트(Space Grotesk, IBM Plex Mono, Syne), 스캔라인, 그라데이션을 실험하는 동안, Claude Code는 단순히 개발자들이 터미널에서 매일 보는 기본 SF Mono 폰트를 사용했습니다.

최종 아이콘과 애니메이션

개발자는 컨셉들을 결합해 최종 아이콘을 만들었습니다: 그리드 배경, 스코프 링, 노치 눈금이 있는 십자선 안에 PID를 배치했습니다. 또한 브랜드 애니메이션 GIF를 만들어 실제 프로세스(Chrome Helper, photoanalysisd, CoreSimulatorService)를 사냥하는 십자선이 그들을 잠그고, 종료하며, 메모리 카운터를 표시하는 모습을 보여줍니다.

📖 Read the full source: r/ClaudeAI