- Published on
brand-guidelines.md: 모든 AI 도구가 귀하의 브랜드를 이해하는 데 필요한 단 하나의 파일
브랜드 가이드라인에 많은 돈을 지불했습니다. 그 가이드라인은 디자인 에이전시가 18개월 전에 전달한 47페이지짜리 PDF 파일로, 구글 드라이브 어딘가에 있습니다. 개발자들은 한 번도 열어본 적이 없고, AI 도구도 열 수 없습니다. 그리고 누군가가 Cursor에서 랜딩 페이지를 만들거나, Claude로 마케팅 이메일을 작성하거나, v0에서 컴포넌트를 스캐폴딩할 때마다, 그들은 처음부터 다시 시작합니다. "우리 기본 색상이 뭐였지? Inter야 아니면 Plus Jakarta Sans야? 모서리는 둥글게 할까, 아니면 각지게 할까?"
브랜드를 설명하고, 그것이 잘 유지되기를 바라며, 그렇지 않은 부분을 수정하는 이런 반복적인 작업은 매주 몇 시간씩 소요됩니다. 팀 전체로 보면, 재작업 비용만으로 매달 수천 달러가 듭니다.
구글의 Stitch design-md 형식은 이러한 반복을 제거합니다. 그리고 Branding5는 완전한 brand-guidelines.md 파일을 자동으로 생성합니다. 클릭 한 번으로 다운로드하여 저장소에 넣으면, 팀이 사용하는 모든 AI 도구가 즉시 귀하의 브랜드를 알게 됩니다.
design-md란 무엇인가? (그리고 왜 사람들이 DESIGN.md라고 부르는가?)
Design-md는 브랜드 및 디자인 가이드라인을 위한 일반 텍스트, 마크다운 기반 사양입니다. 사람이 (이론적으로) 읽을 수 있는 PDF 대신, 사람과 AI 시스템 모두가 구문 분석하고 이해하며 구축할 수 있는 구조화된 .md 파일입니다.
구글은 AI 기반 UI 생성 플랫폼인 Stich의 일부로 이 형식을 만들었으며, 간단한 전제를 가지고 있었습니다. AI에게 브랜드 시스템에 대한 잘 구조화된 설명을 제공하면, AI는 이미 브랜드에 맞는 UI를 생성하고, 카피를 작성하며, 디자인 결정을 내릴 수 있습니다. 더 이상 매 세션마다 같은 내용을 반복할 필요가 없습니다.
두 가지 이름, 하나의 아이디어
이 형식으로 작성된 파일은 두 가지 이름으로 불립니다.
DESIGN.md— 개발자 커뮤니티의 약어입니다.README.md및CONTRIBUTING.md와 함께 프로젝트 루트에 있으며, Cursor, Windsurf 및 기타 AI 코딩 도구는 자동으로 이를 찾습니다.brand-guidelines.md— Branding5에서 사용하는 이름으로, 파일에 시각적 사양 이상의 내용이 포함되어 있기 때문입니다. 이는 포지셔닝, 아키타입, ICP, 목소리, 전략 등 전체 브랜드 시스템을 담고 있으며, 단지 색상과 글꼴만을 담고 있지 않습니다.
어떤 이름을 사용하든 상관없습니다. 형식과 기능은 동일합니다.
brand-guidelines.md 안에는 무엇이 들어갈까?
완벽한 파일은 전략부터 픽셀 수준의 사양까지 브랜드의 모든 계층을 다룹니다. Branding5에서 생성된 brand-guidelines.md가 실제로는 어떤 모습인지 살펴보겠습니다.
# Acme Analytics
## Brand Foundation
- **Positioning:** The only analytics platform built for non-technical marketing teams
who need enterprise-grade insights without the learning curve.
- **Archetype:** The Sage — wise, trustworthy, data-driven
- **Mission:** Make data literacy accessible to every marketer.
- **Values:** Clarity over complexity. Accuracy over speed. Empowerment over dependency.
## Ideal Customer Profiles
### ICP 1: Growth Marketing Manager
- 28–38, mid-market SaaS (50–500 employees)
- Frustrated by complex BI tools; needs dashboards they can build alone
- Language patterns: "actionable insights", "self-serve", "time-to-value"
- Key objection: "Will this replace our existing BI stack?"
### ICP 2: VP of Marketing
- 35–50, reports to CMO or CEO
- Cares about cross-channel attribution and board-ready reporting
- Buys on ROI proof and integration breadth
## Visual Identity
### Colors
| Role | Hex | Usage |
| ----------- | --------- | ------------------------------------ |
| Primary | `#2563eb` | CTAs, active states, key UI elements |
| Secondary | `#f8fafc` | Backgrounds, cards, containers |
| Accent | `#16a34a` | Success states, positive metrics |
| Neutral 900 | `#0f172a` | Body text, headings |
| Neutral 400 | `#94a3b8` | Placeholder text, disabled states |
| Error | `#dc2626` | Error states, destructive actions |
| Warning | `#f59e0b` | Warning states, attention alerts |
### Typography
| Role | Family | Weight | Size | Line Height | Tracking |
| ------- | ----------------- | ------ | ---- | ----------- | -------- |
| H1 | Plus Jakarta Sans | 800 | 48px | 1.1 | -0.02em |
| H2 | Plus Jakarta Sans | 700 | 36px | 1.2 | -0.01em |
| H3 | Plus Jakarta Sans | 700 | 24px | 1.3 | 0 |
| Body | Inter | 400 | 16px | 1.6 | 0 |
| Caption | Inter | 500 | 13px | 1.4 | 0.01em |
| Code | JetBrains Mono | 400 | 14px | 1.5 | 0 |
### Spacing & Layout
- Base unit: 8px
- Component padding: 16px (compact), 24px (default), 32px (spacious)
- Section spacing: 64px (desktop), 48px (mobile)
- Max content width: 1200px
- Border radius: 8px (cards), 12px (modals), 9999px (pills/buttons)
### Shadows & Elevation
- Card: `0 1px 3px rgba(0,0,0,0.08)`
- Dropdown: `0 4px 12px rgba(0,0,0,0.12)`
- Modal: `0 8px 32px rgba(0,0,0,0.16)`
## Brand Voice & Tone
- **Voice:** Direct, confident, jargon-free. We explain, we don't lecture.
- **Tone shifts:** Warmer in onboarding, more assertive in sales copy,
precise and neutral in documentation.
- **Sentence style:** Short sentences. Active voice. Lead with the benefit.
- **Avoid:** Passive constructions, "leverage", "synergy", filler phrases,
exclamation marks in product UI.
### Examples
- ✅ "See which campaigns drive revenue — in one click."
- ❌ "Our innovative platform leverages cutting-edge technology to empower
your marketing team with best-in-class analytics solutions."
## Component Guidelines
### Buttons
- Primary: filled, `#2563eb`, white text, rounded-full, min-height 44px
- Secondary: outlined, 1px border `#2563eb`, transparent background
- Ghost: no border, text-only, used in nav and tertiary actions
- All buttons: 16px horizontal padding, font-weight 600, no uppercase
### Cards
- Background: white, border-radius 8px, subtle shadow
- Padding: 24px
- Header: H3 weight, 8px margin-bottom
- Always include a clear CTA or next action
### Forms
- Label above input, font-weight 500
- Input height: 44px, border-radius 8px, 1px border neutral-300
- Error message below input in red, 13px
- Required fields marked with \* (not colour alone)
## Do's and Don'ts
- ✅ Always include a single, clear CTA per section
- ✅ Use real data in examples and screenshots, never "Lorem ipsum"
- ✅ Test contrast ratios — minimum WCAG AA (4.5:1 for text)
- ❌ Never use more than 3 colours in a single component
- ❌ Don't use stock photos of people pointing at screens
- ❌ Avoid centre-aligning body text longer than 2 lines
이것은 일반 텍스트입니다. 독점적인 형식도 아니고, 특별한 도구도 필요 없습니다. Cursor, Claude, Stitch, v0, Bolt, Copilot 등 모든 AI 도구에 이 파일을 전달하면, 여러분의 브랜드는 자동으로 모든 결과물을 형성하는 제약 레이어가 됩니다.
지금 이것이 중요한 이유
세 가지 요인이 수렴하여 기계가 읽을 수 있는 브랜드 가이드라인이 선택 사항이 아닌 필수가 되었습니다.
1. AI 도구가 이제 대부분의 코드와 카피를 작성합니다
Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — 개발자와 마케터들은 AI의 도움으로 그 어느 때보다 빠르게 결과물을 내고 있습니다. 하지만 이러한 도구들은 여러분이 알려주지 않는 한 브랜드에 대한 지식이 전혀 없습니다. 매 세션, 매 프롬프트마다 색상 팔레트를 다시 설명하고 있습니다. 이것은 워크플로우가 아니라 속도에 대한 세금입니다.
저장소에 있는 단일 brand-guidelines.md 파일은 이 세금을 영구적으로 없애줍니다.
2. 구글이 design-md를 표준으로 추진하고 있습니다
구글이 Stitch와 같은 제품을 통해 형식 사양을 출시하면, 생태계는 주목합니다. Figma 플러그인, VS Code 확장 프로그램, AI 컴포넌트 생성기들은 이미 프로젝트 루트에서 DESIGN.md를 찾기 시작했습니다. 오늘 파일을 제대로 만들어 놓으면, 내일의 도구들이 마이그레이션이나 재작업 없이 바로 작동할 것입니다.
3. AI 속도에 맞는 브랜드 일관성을 위해서는 기계가 읽을 수 있는 규칙이 필요합니다
팀이 한 달에 50개의 블로그 게시물, 일주일에 20개의 광고 변형, 매 스프린트마다 새로운 랜딩 페이지를 생성한다면, 구글 드라이브에 있는 PDF는 쓸모가 없습니다. 브랜드 규칙은 생성이 이루어지는 곳, 즉 저장소, 프롬프트 컨텍스트, 도구의 메모리에 있어야 합니다.
PDF vs. brand-guidelines.md: 비교 분석
| 차원 | 브랜드 PDF | brand-guidelines.md |
|---|---|---|
| AI가 읽을 수 있는지 | ❌ OCR 필요; 구조 손실 | ✅ 모든 LLM이 기본적으로 구문 분석 |
| 저장소에 존재 여부 | ❌ Drive/Notion/Dropbox에 보관 | ✅ 코드와 함께 버전 관리됨 |
| 항상 최신 상태 | ❌ 수동 업데이트, 버전 혼란 | ✅ git diff로 변경 사항 정확히 확인 가능 |
| 온보딩 속도 | ⏱ 읽고 흡수하는 데 30분 이상 | ⏱ 훑어보는 데 5분; AI가 즉시 사용 |
| 자동으로 적용 | ❌ 사람의 검토에 의존 | ✅ AI가 모든 생성에 규칙 적용 |
| 사람이 읽을 수 있는지 | ✅ 예쁘지만 내용이 밀집됨 | ✅ 명확한 마크다운, 훑어보기 쉬움 |
| 업데이트 비용 | 💸 에이전시 유지비 또는 디자인 시간 | ✍️ 어떤 에디터에서든 텍스트 파일 편집 |
이해관계자 발표를 위한 PDF가 죽은 것은 아닙니다. 하지만 AI 도구가 생성을 수행하는 일상적인 실행에서는 일반 텍스트가 압도적으로 승리합니다.
Google Stitch에서 brand-guidelines.md를 사용하는 방법
Google Stitch는 brand-guidelines.md를 읽고 이를 사용하여 UI 생성을 제한합니다. 일반적인 Material 컴포넌트를 생성하는 대신, 색상 시스템, 타이포그래피, 간격 및 컴포넌트 규칙에 맞는 UI를 출력합니다.
워크플로우는 세 단계입니다.
- 파일 업로드 또는 배치.
brand-guidelines.md를 프로젝트 루트에 놓거나 Stitch 인터페이스에 직접 업로드합니다. - 자연스럽게 프롬프트. 필요한 것을 요청합니다: "세 단계와 강조된 인기 플랜이 있는 가격 책정 섹션을 생성해 주세요."
- 브랜드에 맞는 결과물 얻기. Stitch는 색상, 유형 계층 구조, 버튼 스타일 및 간격을 자동으로 적용합니다. 기본적인 사항에 대한 디자인 검토는 필요 없습니다.
결과물은 브랜드에 더 가까울 뿐만 아니라, 일반적으로 하루 종일 걸리는 수정 작업을 건너뛰기 때문에 배포가 더 빨라집니다.
Cursor, Copilot 및 AI 코딩 도구와 함께 사용하는 방법
DESIGN.md (또는 brand-guidelines.md)를 저장소 루트에 넣고 프롬프트에서 참조합니다.
Cursor:
@DESIGN.md Generate a hero section for the homepage.
Use the primary CTA style, heading typography, and colour system from the file.
GitHub Copilot (워크스페이스 모드):
#file:DESIGN.md Build a testimonial card grid component
using the card guidelines and spacing system defined here.
Claude / ChatGPT (파일 붙여넣기 또는 첨부):
Here are my brand guidelines [attached: brand-guidelines.md].
Write three homepage headline options that match the brand voice
and speak to ICP 1 (Growth Marketing Manager).
v0 / Bolt / Lovable: brand-guidelines.md를 프로젝트 파일로 업로드하거나 관련 섹션을 프롬프트에 붙여넣습니다. 이러한 도구는 모든 생성에 여러분의 색상, 유형 및 컴포넌트 사양을 적용할 것입니다.
그 결과: 브랜드 가이드라인을 한 번도 읽어본 적 없는 개발자들도 첫 번째 프롬프트부터 브랜드에 맞는 코드를 생성할 수 있습니다. 제약 사항은 검토 주기와 Slack 메시지를 통해 강요되는 것이 아니라 워크플로우에 내장됩니다.
시각적인 것을 넘어: 파일의 전략이 모든 것을 바꾸는 이유
대부분의 디자인 시스템 파일은 색상과 글꼴에서 멈춥니다. Branding5에서 생성된 brand-guidelines.md는 더 깊이 들어가며, 그 깊이가 AI 결과물을 "보기 좋다"에서 "느낌이 좋다"로 변화시키는 요소입니다.
**브랜드 기초(Brand foundation)**는 AI에게 브랜드가 왜 그런 선택을 하는지 알려줍니다. AI가 당신의 브랜드가 비기술적 마케터를 대상으로 하는 현자(Sage) 아키타입임을 알게 되면, 단순히 올바른 버튼 색상을 선택하는 것을 넘어, 과장되고 숨 가쁜 문구 대신 명확하고 자신감 있는 문구를 작성합니다.
**이상적인 고객 프로필(Ideal Customer Profiles)**은 AI에게 관련 메시지를 생성하기 위한 대상 고객 컨텍스트를 제공합니다. 마케팅 VP를 위한 헤드라인은 성장 마케팅 관리자를 대상으로 하는 것과 매우 다릅니다. 파일에 ICP가 없으면 AI는 추측합니다. ICP가 있으면, AI는 대상을 지정합니다.
**음성과 톤 가이드라인(Voice and tone guidelines)**은 구체적인 예시(좋은 예와 나쁜 예)를 통해 카피 품질을 향상시키는 가장 효과적인 섹션입니다. 잘 작성된 "해야 할 것 / 하지 말아야 할 것" 예시 하나가 추상적인 음성 설명 백 단어보다 AI에게 더 많은 것을 가르칩니다.
**해야 할 것과 하지 말아야 할 것(Do's and don'ts)**은 엄격한 제약 역할을 합니다. "단일 컴포넌트에 3가지 이상의 색상을 사용하지 마십시오"와 "모든 섹션에 항상 명확한 CTA를 포함하십시오"는 AI가 글자 그대로, 매번 따를 수 있는 규칙입니다. 모호함도, 이탈도 없습니다.
Branding5가 어떻게 여러분의 파일을 생성하는가
Branding5에서 브랜드 분석을 완료하면, brand-guidelines.md를 대시보드에서 다운로드할 준비가 됩니다. 백그라운드에서는 다음과 같은 일이 일어납니다.
- 브랜드 전략이 파일에 반영됩니다. 포지셔닝, 아키타입, ICP, 경쟁사 분석, 톤 오브 보이스 등 Branding5에서 구축한 모든 것이 구조화된 마크다운 출력물에 직접 반영됩니다.
- 시각적 사양은 포지셔닝에서 파생됩니다. 색상, 타이포그래피, 컴포넌트 규칙은 일반적인 템플릿에서 가져오는 것이 아니라 브랜드 개성에 맞게 생성됩니다.
- 출력은 design-md 사양을 따릅니다. Stitch 및 호환 도구는 이를 기본적으로 구문 분석합니다. 변환이나 재포맷이 필요 없습니다.
- 즉시 사용할 준비가 됩니다. 저장소에 넣거나, AI 도구에 첨부하거나, 팀과 공유하세요. 하나의 파일로, 모든 도구에서, 첫날부터 사용할 수 있습니다.
Branding5에서 30분을 투자하면 다음을 얻을 수 있습니다.
- 이해관계자와 투자자를 위한 전략 PDF
- 마케팅 팀을 위한 메시징 프레임워크
- 엔지니어링 및 디자인 팀이 사용할 모든 AI 도구를 위한 brand-guidelines.md
카피라이팅도, 수동 형식 지정도, 마크다운 전문 지식도 필요 없습니다.
시작하기: 5분 체크리스트
이미 브랜드 전략이 있으신가요? 5분 만에 AI 준비가 된 브랜드 시스템을 만드는 방법은 다음과 같습니다.
- 파일을 생성하세요. Branding5에서 브랜드 분석을 실행하고 대시보드에서
brand-guidelines.md를 다운로드하세요. - 저장소 루트에 배치하세요. 팀이 개발자 규칙을 선호한다면
DESIGN.md로 이름을 지정하거나, 명확성을 위해brand-guidelines.md로 유지하세요. - 팀에 알리세요. *"우리 브랜드 가이드라인은 이제 프로젝트 루트의
DESIGN.md에 있습니다. 모든 AI 프롬프트에서 참조하세요."*라는 한 줄 메시지를 공유하세요. - 모든 AI 세션에서 참조하세요. Cursor에서는
@DESIGN.md를 사용하고, Claude 또는 ChatGPT에서는 첨부하고, v0 또는 Bolt에서는 업로드하세요. - 최신 상태로 유지하세요. 브랜드가 발전하면 파일을 업데이트하고 커밋하세요. Git이 변경 사항을 추적합니다. 모든 도구가 즉시 이를 반영합니다.
그게 전부입니다. 온보딩 자료도, 디자인 검토 병목 현상도, Slack에서 더 이상 "우리 브랜드 색상이 뭐지?"라는 질문도 없습니다.
결론
AI 도구는 여러분의 코드를 작성하고, 카피를 생성하며, 컴포넌트를 스캐폴딩합니다. 유일한 질문은 그것들이 브랜드에 맞게 작업을 수행하는지, 아니면 임의로 작업을 수행하는지입니다.
brand-guidelines.md는 그 질문에 한 번 답하고, 그 다음부터는 모든 생성마다, 모든 도구에서, 팀의 모든 사람을 위해 자동으로 답합니다.
구글의 Stitch 형식은 기계가 읽을 수 있는 브랜드 가이드라인을 표준으로 만들고 있습니다. DESIGN.md는 개발자들이 프로젝트 루트에서 찾을 것으로 기대하는 파일이 되고 있습니다. 지금 이 형식을 채택하는 브랜드는 더 빠르게 결과물을 내고, 더 일관성을 유지하며, 목표를 벗어난 AI 결과물을 수정하는 데 드는 시간을 덜 낭비할 것입니다.
여러분의 브랜드 전략은 이미 Branding5에 있습니다. brand-guidelines.md는 클릭 한 번이면 얻을 수 있습니다.
자주 묻는 질문
DESIGN.md와 brand-guidelines.md의 차이점은 무엇인가요?
둘은 같은 형식입니다. DESIGN.md는 개발자 커뮤니티에서 인기 있는 약어입니다. README.md 명명 규칙을 따릅니다. brand-guidelines.md는 파일에 브랜드 전략(포지셔닝, 목소리, ICP)이 포함되어 있음을 나타내는 더 설명적인 이름이며, 단지 시각적 사양만을 포함하지 않습니다. 팀이 선호하는 이름을 사용하면 됩니다. AI 도구는 둘 다 동일하게 구문 분석합니다.
파일을 만들거나 편집하려면 마크다운을 알아야 하나요?
아니요. Branding5가 브랜드 분석을 기반으로 파일을 자동으로 생성합니다. 나중에 수동으로 편집하고 싶다면, 마크다운은 간단한 형식 지정( #은 헤딩, -은 목록, **는 굵게)이 있는 일반 텍스트에 불과합니다. 누구나 2분 안에 기본 사항을 배울 수 있습니다.
어떤 AI 도구가 design-md / DESIGN.md를 지원하나요?
Google Stitch는 기본적으로 이를 읽습니다. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt, Lovable은 모두 파일을 참조하거나 첨부할 때 작동합니다. 일반 마크다운이기 때문에 모든 LLM 기반 도구가 플러그인이나 통합 없이도 이를 구문 분석하고 따를 수 있습니다.
brand-guidelines.md는 얼마나 상세해야 하나요?
모호함을 없앨 만큼 충분히 상세해야 합니다. 최소한 사용 규칙이 포함된 색상 팔레트, 타이포그래피 사양, 버튼/카드/폼 규칙, 그리고 예시가 포함된 음성 가이드라인을 포함하세요. 해야 할 것과 하지 말아야 할 것이 더 구체적일수록 AI 결과물은 더 일관성이 있습니다. Branding5는 기본적으로 포괄적인 파일을 생성합니다. 필요 없는 섹션은 항상 잘라낼 수 있습니다.
브랜드가 발전함에 따라 파일을 어떻게 동기화 상태로 유지하나요?
다른 소스 파일과 마찬가지로 취급하세요: 편집, 커밋, 푸시. Git에 존재하기 때문에 팀은 무엇이 언제 변경되었는지 정확히 볼 수 있습니다. Branding5에서 브랜드 분석을 다시 실행하면 업데이트된 버전을 다운로드하여 이전 파일을 교체할 수 있습니다. 에이전시 유지비나 몇 달간의 수정 주기가 필요 없습니다.
brand-guidelines.md를 블로그 게시물 작성이나 광고 카피와 같은 비코딩 작업에도 사용할 수 있나요?
물론입니다. Claude, ChatGPT 또는 모든 글쓰기 도우미에게 프롬프트를 보낼 때 파일을 첨부하거나(또는 브랜드 보이스 및 ICP 섹션을 붙여넣기) 사용하세요. 보이스 가이드라인, 톤 예시, 그리고 청중 세부 정보는 코드뿐만 아니라 AI 생성 카피를 개선하도록 특별히 고안되었습니다.
여러분의 brand-guidelines.md를 얻으세요
Branding5에서 브랜드 분석을 실행하고, Google Stitch, Cursor, Copilot 및 전체 AI 도구 스택에 사용할 수 있는 design-md 호환 brand-guidelines.md (DESIGN.md)를 다운로드하세요.