Community이미지github.com

ashuwhy/브랜드 아이덴티티

로고, 앱 아이콘 및 스토어 아트 제작 과정 - 브리프, 이미지 모델 라운드, 실제 크기에서 최종 후보를 테스트하는 대조 시트, 그리고 하나의 코드 드로잉을 모든 런처, 적응형, 알림, 스플래시, 파비콘, 폰트 및 스토어 에셋으로 렌더링합니다. 로고 선택, 앱 아이콘 제작, 스토어 스크린샷 및 포스터 제작 시 사용하세요.

브랜드 아이덴티티란 무엇인가요?

이 스킬은 브랜드 아이덴티티 제작의 전체 과정을 다루며, 브리프 작성부터 이미지 모델 라운드, 대조 시트, 최종 에셋 렌더링 및 스토어 아트 제작까지 포함합니다. 특히 로고 디자인과 앱 아이콘 제작에 중점을 두며, 실제 사용 환경(런처 아이콘, 알림, 스플래시, 파비콘, 폰트, 스토어 에셋)에서 최종 결과물이 어떻게 보일지 검증하는 과정을 강조합니다. 이 스킬은 Claude Code, Cursor, Codex 등의 AI 에이전트와 함께 사용하도록 설계되었으며, SVG 기반 코드 렌더링을 통해 모든 에셋을 일관된 디자인으로 생성합니다. 주요 스크립트는 `~/claude-skills/tools/brand/` 디렉토리에 위치하며, make_versus.py와 make_fonts.py는 재사용 가능하고 나머지 스크립트는 특정 앱에 맞게 커스터마이즈됩니다. 이 스킬은 현재 플랫폼 사양을 항상 확인하도록 권장하며, 이미지 모델, 아이콘 사양, 스토어 크기는 변경될 수 있음을 명시합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ashuwhy/claude-skills/tree/HEAD/skills/brand-identity

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

브랜드 아이덴티티은(는) 무엇을 하나요?

아래 과정은 지속 가능한 부분입니다. 이미지 모델, 아이콘 사양 및 스토어 크기는 변경됩니다. 렌더링하기 전에 현재 플랫폼 사양을 확인하세요. (checked 2026-10) 표시는 변경 가능성이 가장 높은 크기입니다.

스크립트는 ~/claude-skills/tools/brand/에 있습니다. make_versus.py (3단계 시트)와 make_fonts.py (5단계)는 어떤 앱에서든 그대로 실행됩니다. 나머지 (프롬프트, 후보 드로잉, 에셋 렌더러, 스토어 프레임, 포스터)는 하나의 앱을 위해 작성되었으며 해당 앱의 마크를 그리므로, 방법을 참고하여 적응하세요. 이 스크립트들은 rsvg-convert, Pillow, fontTools 및 headless Chrome이 필요합니다.

1. 브리프

모든 컨셉 앞에 붙이는 하나의 공유 브리프 (tools/brand/logo-prompts.md에 실제 예시가 있습니다):

  • 사용 위치 (런처 아이콘, 스토어 목록)를 명시해야 하므로 48px에서도 읽히고 단색 실루엣으로도 살아남아야 합니다.
  • 플랫 벡터, 단색 형태, 그라데이션, 그림자, 3D, 텍스처 또는 텍스트 없음
  • 정확한 팔레트를 16진수로 명시하고, "그 외에는 없음"
  • 둥근 사각형 타일 위에 중앙 정렬된 마크 하나
  • 한 번 실행에 여러 변형을 그리드로 표시하여, 하나의 렌더에 베팅하는 대신 컨셉을 탐색합니다.
  • 해당 카테고리의 클리셰 금지 목록

완료 조건: 브리프가 한 문단에 들어가고 각 컨셉이 한 줄로 추가됩니다.

2. 라운드

  • 라운드 1: 6~7개의 컨셉과 하나의 자유 브리프. 하나를 선택합니다.
  • 라운드 2: 승자를 유지하고 프롬프트당 하나의 축을 변경합니다 (기하학적 vs 둥근, 악센트의 의미, 카운터, 작은 단색 스트레스 테스트). 문자 해부학을 단어로 설명하세요. 모델은 스크립트 간 유사한 글리프를 혼동합니다.
  • 더 진행하기 전에 외부인에게 보여주세요. 스크립트, 기호 또는 색상이 대상 독자에게 어떻게 읽히는지는 어떤 프롬프트도 잡아낼 수 없는 마크를 망칠 수 있습니다. 외부 의견 하나가 라운드 하나와 맞먹습니다.
  • 라운드 3 테스트: 아이가 한 번 보고 기억해서 그릴 수 있습니까? 스케치가 있다면 그린 사람의 크레딧을 남깁니다.

3. 대조 시트

최종 후보 두세 개를 코드(SVG 문자열)로 다시 그리고, 런처 아이콘이 실제로 마주하는 환경에 넣습니다 (make_versus.py가 SVG로부터 이 모든 작업을 수행합니다):

  • 원형 및 스쿼클 마스크
  • 흐릿한 "한눈에" 보기
  • 밝은 시스템 및 어두운 시스템 톤의 테마(단색) 아이콘
  • 48, 32, 24 및 16px, 확대 표시
  • 잉크 점유율 및 후보당 한 줄 평결

선호도보다 시트를 신뢰하세요. 설명이 필요한 마크는 그 자체로 읽히는 마크에게 집니다.

완료 조건: 하나의 후보가 시트에서 승리하고 그 이유를 한 문장으로 말할 수 있을 때.

4. 하나의 드로잉, 모든 에셋

승자는 매개변수(색상, 특정 크기 이하에서 세부 정보 켜기/끄기)가 있는 함수가 됩니다. 하나의 스크립트가 모든 에셋을 렌더링합니다. icon-assets.md에는 매트릭스와 각 크기 뒤의 규칙이 있습니다. 앱에서는 PNG를 제공하는 대신 동일한 숫자의 컴포넌트로 마크를 그리므로 모든 크기에서 선명하고 다크 모드에서 색상을 전환할 수 있습니다.

그런 다음 리포지토리의 문서에 로고 키트(락업 및 단독 마크, 밝음 및 어두움, SVG 및 PNG)를 제공하여 아무도 로고를 위해 앱을 스크린샷하지 않도록 합니다.

5. 타입

셀프 호스팅 폰트, fontTools로 woff2로 서브셋 (제품에 필요한 스크립트와 통화 및 기호), 가변 축 유지. 폰트를 다운로드하는 빌드는 배포를 실패시킬 수 있는 네트워크 의존성을 가집니다. (checked 2026-10: next/font/google이 Vercel 빌드를 이렇게 실패시켰습니다.)

6. 스토어 아트 및 포스터

  • 스토어 프레임을 headless Chrome을 통해 HTML로 스토어의 현재 크기로 렌더링합니다 (checked 2026-10: Play 폰 샷 1080x1920, 피처 그래픽 1024x500, 목록 아이콘 512px RGB 알파 없음). 실제 폰의 실제 캡처를 그려진 프레임 안에 사용합니다. Chrome이 작성 후 0이 아닌 종료 코드를 반환할 수 있으므로 출력 파일을 성공 신호로 처리합니다.
  • 어떤 화면에도 실제 사용자 이름이나 데이터가 없으며, 복사본의 모든 주장은 검토 중인 빌드에 대해 사실이어야 합니다.
  • play.py icon 및 play.py art로 업로드합니다 (expo-release 참조). 목록 아이콘은 자체 에셋이며 빌드가 변경하지 않습니다.
  • 포스터 및 썸네일: 앱이 만드는 모든 크롭에 맞게 디자인하고 각 렌더를 새 경로에 업로드합니다 (mobile-performance, Images 참조).

관련 스킬