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

브랜드 아이덴티티는 모든 곳에서 일관되게 유지되는 작은 결정들의 집합입니다: 하나의 아이디어, 그 아이디어를 담은 마크, 그에 어울리는 색상과 서체, 그리고 일관성을 유지하기 위한 규칙. 흔한 실패는 아이디어 없이 장식만 하는 것입니다: 그라데이션 블롭, 평범한 산세리프, 분위기로 고른 팔레트, 그리고 파비콘 크기나 단색에서는 죽어버리는 로고. 이 스킬은 이러한 결정들을 파일로 만들고 실제 렌더러에서 검증합니다.

아이덴티티가 인터페이스와 만나는 모든 곳에서 interface-guidelines의 계층적 원칙(모두가 사용할 수 있는 것 > 진실을 말하는 것 > 의미를 전달하는 것 > 답이 먼저 오는 것 > 실수가 치명적이지 않은 것 > 안정적인 것 > 가능한 것이 보이는 것 > 관습 > 다듬기)을 적용하세요. 해당 스킬이 설치되어 있다면, 그 감사 스크립트가 이 스킬이 생성하는 가이드라인 페이지를 검사합니다.

브리프

무엇이든 그리기 전에 다음 질문에 답하세요. 사용자가 자리를 비웠다면, brand.json에 가정을 명시하고 계속 진행하세요.

무엇이며, 누구를 위한 것이고, 누구와 경쟁하는가? 카테고리, 대상 고객, 두세 개의 경쟁사. 아이덴티티는 일반적인 브랜드와가 아니라 그들과 구별되어야 합니다.
하나의 아이디어. 브랜드가 무엇인지 한 문장으로 표현하며, 심볼이 담을 수 있어야 합니다("가마는 부드러운 진흙을 영구적인 것으로 만든다"). 스타일이 아닌, 대상 자체, 그 재료, 과정, 장소, 또는 약속에서 가져오세요. references/strategy.md를 참고하세요.
성격: 세 가지 특성, 각각이 실제로 의미하는 바와 배제하는 것을 함께. "따뜻함: 흙빛 톤과 간결한 단어, 결코 번지르르하지 않음."
반드시 작동해야 하는 곳: 파비콘과 앱 아이콘, 휴대폰 화면, 간판, 인쇄물, 자수, 소셜 아바타, 다크 모드, 이메일. 가장 까다로운 컨텍스트가 복잡성의 상한선을 결정합니다.
제약사항: 유지해야 할 기존 자산(고객이 아는 색상, 이름), 라이선스 폰트 예산, 문화적 시장(색상과 심볼의 의미가 다를 수 있음).
마크의 복잡성 등급(references/logo.md 섹션 2): 워드마크만, 단순 기하학적 마크, 또는 계층적 상징 마크. 야망이 아니라 컨텍스트와 아이디어에 따라 선택하세요. 복잡한 마크는 작은 크기를 위한 단순화된 버전이 필요합니다.

워크플로우

1. 방향, 그다음 하나의 결정

색상뿐만 아니라 아이디어가 다른 세 가지 방향을 개발하세요. 각각에 대해: 한 문장의 아이디어, 로고 컨셉 방법(references/logo.md 섹션 3), 팔레트 스케치(두세 가지 시드), 서체 페어링, 그리고 느낌에 대한 한 문장. 사용자가 있으면 적어서 보여주고, 없으면 하나를 골라 이유를 설명하세요. 방향을 섞지 마세요; 섞으면 각각을 작동하게 만든 아이디어가 대개 사라집니다.

2. `brand.json` 작성

모든 스크립트가 읽는 단일 진실 공급원입니다. 최소 형태:

{
  "name": "Kiln", "tagline": "Small-batch ceramics, fired in Leeds.", "url": "https://kiln.example",
  "idea": "One sentence the mark carries.",
  "personality": [{ "trait": "Warm", "means": "Earth tones and plain words, never slick." }],
  "voice": { "is": ["Plain", "Specific"], "isnt": ["Twee", "Salesy"], "examples": [{ "say": "Fired at 1,260°C.", "not": "Lovingly handcrafted!" }] },
  "colors": { "primary": "#d9480f", "accent": "#0b7285", "neutral": { "chroma": 0.01 } },
  "type": { "display": { "family": "Fraunces", "weights": [400, 700] }, "text": { "family": "Inter", "weights": [400, 600] }, "scale": { "base": 16, "ratio": 1.25 } },
  "logo": { "primary": "logo/lockup.svg", "mark": "logo/mark.svg", "story": "Why the mark looks like this.", "minSizePx": 16 }
}

3. 색상

의미를 가진 두세 가지 시드를 고르고(references/color.md), 다음을 실행하세요:

node <skill-dir>/scripts/palette.mjs brand.json

이것은 지각적 OKLCH 램프를 구축하고, 각 시드를 가장 가까운 단계에서 정확하게 유지하며, 중립색을 브랜드 쪽으로 물들이고, 상태 색상(성공, 경고, 위험, 정보)을 브랜드와 분리하여 위험이 항상 위험으로 읽히도록 하며, 라이트/다크에 대한 의미적 역할을 매핑하고, 모든 보이는 쌍을 WCAG 2.2에 대해 검사합니다. 실패는 무시하지 말고 시드나 역할을 변경하여 수정하세요. tokens/palette.html을 열고 라이트/다크 데모를 확인하세요.

4. 타이포그래피

디스플레이용 서체와 텍스트용 서체를 선택하세요(종종 한 패밀리면 충분함), 아이디어와 읽기 컨텍스트에 연결된 이유와 함께(references/typography.md). 라이선스, 언어 지원, 굵기, 숫자가 중요할 경우 표준 숫자, 14~16px에서의 렌더링을 확인하세요. 사용자가 라이선스를 가지고 있지 않는 한 오픈 라이선스 패밀리(SIL OFL)를 선호하세요.

5. 로고

손으로 SVG 마크를 그리세요: 그리드 위에서 지오메트리를 계획하고, 의도적으로 패스를 작성하고, 컷아웃은 실제 구멍(fill-rule="evenodd" 또는 결합된 패스)으로 만드세요, 절대 위에 흰색 도형을 칠하지 마세요. 워드마크는 아웃라인으로 변환하여 설치된 폰트에 의존하지 않도록 하세요:

node <skill-dir>/scripts/logo.mjs outline --text "Kiln" --google "Fraunces:700" --tracking -0.01 --out logo/wordmark.svg
node <skill-dir>/scripts/logo.mjs check logo/*.svg
node <skill-dir>/scripts/logo.mjs sheet logo/lockup.svg --mark logo/mark.svg --colors tokens/tokens.json --out logo/sheet.png

시트를 확인하세요. 16px와 24px에서 마크는 여전히 그 자체로 읽혀야 합니다; 단색 검정, 반전, 복잡한 이미지 위에서 모든 부분이 살아남아야 합니다. 디테일이 사라지면 단순화하거나 별도의 소형 마크를 그리세요. 반복하세요: 대부분의 좋은 마크는 여러 번의 축소 과정을 거칩니다. 수학적 정렬이 아닌 광학적 정렬로 록업(마크 + 워드마크)을 구축하고, 여백과 최소 크기를 명확히 정의하세요. 세부 사항과 SVG 제작법: references/logo.md.

6. 에셋 및 시스템

node <skill-dir>/scripts/assets.mjs brand.json    # 파비콘, ICO, Apple touch, PWA 및 maskable 아이콘, Open Graph 카드, manifest, head 태그
node <skill-dir>/scripts/book.mjs brand.json      # 브랜드 가이드라인 페이지 + type.css

그런 다음 브리프에 필요한 다른 요소들을 추가하세요: 소셜 아바타, 이메일 헤더, 마크에서 파생된 패턴이나 텍스처, 아이콘 스타일, 일러스트레이션 또는 사진 방향(references/system.md). 모든 에셋은 하드코딩된 헥스 값이 아닌 토큰을 사용합니다.

7. 검증 및 인계

interface-guidelines 감사가 설치되어 있으면 가이드라인 페이지에 대해 실행하세요: node <interface-guidelines>/scripts/audit.mjs brand-book.
직접 로고 시트, 팔레트 페이지, Open Graph 카드, 아이콘을 확인하세요. 잘못된 것을 수정하세요.
컨텍스트에서 아이덴티티를 테스트하세요: 로고와 토큰을 제품의 실제 화면 하나(최소 헤더와 버튼)에 넣고 라이트/다크 모드를 확인하세요.
인계: 아이디어, 각 파일이 무엇인지, 검증한 내용, 검증하지 않은 내용(상표 검색, 대상 시장의 문화적 검토, 인쇄 교정), 그리고 수용된 대비 예외 사항과 그 이유.

함정

아이디어 없이 스타일만. "모던하고, 깔끔하고, 대담한"은 아이디어가 아닙니다. 마크가 의미하는 바를 한 문장으로 말할 수 없다면, 아직 아무 의미도 없는 것입니다.
진부한 마크: 번개, 스우시, 불꽃, 육각형, 그라데이션 오브, 아무런 변형 없는 동그라미 속 이니셜. 아이디어가 요구하고 그 안에 소유할 만한 무언가가 있을 때만 사용하세요.
칠해진 컷아웃. 색상 마크 위의 흰색 도형은 단색, 사진 위, 반전 시에 단단한 블록이 됩니다. logo.mjs check가 이를 플래그합니다.
작아지면 죽는 디테일. 가는 획과 내부 디테일은 16px에서 사라집니다. 시트가 보여줍니다; 소형 마크를 제공하세요.
로고 SVG의 <text>. 폰트가 없는 곳에서는 대체 폰트로 렌더링됩니다. 아웃라인 처리하세요.
브랜드 색상을 위험 색상으로, 또는 위험 색상을 브랜드 색상으로 사용. 빨간 브랜드라도 구별 가능하고 알아볼 수 있는 위험 색상이 필요하며, 오류 텍스트는 대비를 통과해야 합니다.
색상 의미를 사실로 착각. "파란색은 신뢰를 의미한다"는 약하고 문화에 국한된 연관성일 뿐, 법칙이 아닙니다(references/color.md 섹션 1). 카테고리 내 차별성과 아이디어를 위해 선택하세요.
모방. 기존 브랜드의 마크, 이름, 또는 트레이드 드레스를 재현하거나 밀접하게 모방하지 마세요. 실제 상표 검색은 사용자가 출시 전에 수행해야 할 단계임을 명심하세요.
실제 조직을 모방하는 것 사용자가 그 조직이 아닌 경우 브랜딩이 아닙니다; 거절하세요.

참고 자료

파일	읽어야 할 때
`references/strategy.md`	아이디어 찾기, 성격, 분위기 이름 짓기, 방향 쓰기
`references/logo.md`	모든 로고 작업: 유형, 복잡성 등급, 컨셉 방법, 구성, SVG 제작법, 록업, 테스트
`references/color.md`	시드 선택, 색상 의미 증거, OKLCH, 역할, 다크 모드, 접근성
`references/typography.md`	서체 선택 및 페어링, 라이선스, 스케일, 숫자, 웹 로딩
`references/system.md`	아이콘, 패턴, 이미지, 모션, 보이스, 에셋, 토큰, 가이드라인

브랜드 아이덴티티