ckm:brand

개요

ckm:brand란?

ckm:brand는 nextlevelbuilder/ui-ux-pro-max-skill 레포지토리에 포함된 브랜드 특화 스킬입니다. 콘텐츠, UI, 마케팅 에셋 전반에 걸쳐 일관된 브랜드를 정의·유지·관리할 수 있도록 도와줍니다.

일회성 PDF로 브랜드를 관리하는 대신, ckm:brand는 살아 있는 브랜드 시스템을 지향합니다. 구조화된 가이드라인, 체크리스트, 스크립트를 통해 브랜드 결정 사항을 디자인 토큰, CSS, 실제 에셋과 연결합니다.

주요 기능

ckm:brand를 활성화하면 다음을 할 수 있습니다.

• 재사용 가능한 프레임워크로 브랜드 보이스와 톤을 정의.
• 비주얼 아이덴티티 구성: 로고 사용, 컬러, 타이포그래피, 이미지 스타일.
• 캠페인·제품을 위한 메시지 프레임워크 생성 및 정제.
• 상세 체크리스트를 이용한 브랜드 일관성 리뷰 실행.
• 디렉터리·메타데이터 규칙으로 에셋 관리 개선.
• 스크립트를 통해 브랜드 가이드라인을 디자인 토큰과 CSS에 동기화.
• 에셋 및 인터페이스 전반의 컬러 사용 및 접근성 점검.

ckm:brand를 사용할 만한 팀

이 스킬은 다음과 같은 팀에 적합합니다.

• 브랜드·마케팅 팀: 브랜드 가이드라인을 정립·업데이트하려는 팀.
• 프로덕트 디자이너 및 UI/UX 팀: 브랜드에서 프론트엔드로의 깔끔한 핸드오프가 필요한 팀.
• 브랜드 보이스·메시징을 담당하는 콘텐츠 전략가, 카피라이터.
• 반복 가능한 브랜드 워크플로를 구축하는 DesignOps / Marketing Ops 역할.

특히 에디토리얼 콘텐츠와 디지털 프로덕트(웹·앱 등) 양쪽에서 브랜드 일관성과 접근성이 중요한 팀에 유용합니다.

ckm:brand가 잘 맞는 경우와 그렇지 않은 경우

다음과 같은 상황에서는 ckm:brand 사용을 추천합니다.

• docs/brand-guidelines.md와 같은 단일 소스 브랜드 가이드라인이 필요할 때.
• 승인 전 마케팅 에셋에 대한 반복 가능한 리뷰 프로세스가 필요할 때.
• 브랜드 관련 결정 사항을 디자인 토큰과 CSS 변수로 전환할 준비가 되었을 때.
• 콘텐츠 팀을 위한 구조화된 메시징·보이스 프레임워크가 필요할 때.

다음에 해당한다면 최선의 선택이 아닐 수 있습니다.

• 지속적인 관리 없이 빠르게 로고와 컬러만 정하려는 경우.
• 레포지토리나 코드 기반 워크플로로 브랜드를 관리하지 않는 경우.
• 가이드라인·스크립트가 아닌 Figma, Sketch 같은 시각 디자인 도구를 찾는 경우.

브랜드를 Git 기반으로 관리하고 있거나 그렇게 전환하려 한다면, ckm:brand는 견고하면서도 확장 가능한 시작점을 제공합니다.

사용 방법

1. ckm:brand 스킬 설치

GitHub 레포지토리 URL과 brand 스킬 슬러그를 사용해, 에이전트나 스킬 인식 환경에 스킬을 설치합니다.

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

설치가 완료되면 ckm:brand 워크플로와 레퍼런스를 에이전트나 툴링에서 탐색할 수 있습니다. argument-hint 스타일을 사용해 호출 방식을 안내할 수 있습니다.

[update|review|create] [args]

예시:

• brand update homepage-hero – 특정 화면에 대한 가이드라인 또는 관련 결정 사항 업데이트.
• brand review campaign-email – 에셋이나 플로우의 브랜드 일관성 리뷰.
• brand create launch-messaging – 프레임워크를 기반으로 신규 런칭 메시지 생성.

참고: 위 설치 명령어는 그대로 사용하되, 각자의 환경에 맞게 경로와 연동 방식을 조정하세요.

2. 핵심 파일과 구조 이해하기

설치 후에는 먼저 다음 파일들을 열어 ckm:brand 구조를 파악하세요.

• SKILL.md – 스킬 개요, 사용 시점, 빠른 시작 명령어, Brand Sync 워크플로.
• references/ – 브랜드를 위한 상세 가이드라인, 체크리스트, 프레임워크.
• scripts/ – 가이드라인을 에셋·디자인 토큰과 연결하는 Node 스크립트.
• templates/ – 자체 브랜드 문서를 만들 때 사용할 수 있는 스타터 템플릿.

주요 레퍼런스 파일은 다음과 같습니다.

• references/brand-guideline-template.md – 전체 브랜드 가이드라인 구조.
• references/visual-identity.md – 비주얼 아이덴티티 표현 방법.
• references/logo-usage-rules.md – 각 로고 버전의 사용 시점과 규칙.
• references/color-palette-management.md – 팔레트 계층과 문서화 패턴.
• references/typography-specifications.md – 타입 스케일, 폰트 스택, 사용 규칙.
• references/voice-framework.md – 브랜드 보이스 특성, Do & Don't.
• references/messaging-framework.md – 미션, 비전, 가치 제안, 메시지 아키텍처.
• references/asset-organization.md – 에셋 폴더 구조와 메타데이터 구성 예시.
• references/approval-checklist.md – 엔드 투 엔드 에셋 승인 체크리스트.
• references/consistency-checklist.md – 채널 간 브랜드 일관성 진단.

3. 프롬프트와 워크플로에 브랜드 컨텍스트 주입하기

브랜드 컨텍스트가 항상 에이전트·툴링에 반영되도록, 제공된 스크립트를 사용해 브랜드 가이드라인을 프롬프트에 주입할 수 있습니다.

node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json

대표적인 활용 시나리오:

• 콘텐츠 생성용 프롬프트 앞부분에 브랜드 가이드라인을 자동으로 붙이기.
• 주요 브랜드 규칙을 JSON 형태로 내보내 다른 도구에서 활용.
• 긴 가이드라인을 매번 복사·붙여넣기 하지 않고도 카피라이터·디자이너가 정렬되도록 유지.

환경이 지원한다면 inject-brand-context.cjs를 프롬프트 빌딩 파이프라인에 연결해, 브랜드 관련 작업마다 최신 브랜드 규칙이 자동 포함되도록 설정하세요.

4. 마케팅 에셋의 브랜드·접근성 검증

검증 스크립트를 활용해 특정 에셋이 브랜드 시스템을 따르는지 확인할 수 있습니다.

node scripts/validate-asset.cjs <asset-path>

이 스크립트는 references/approval-checklist.md, references/consistency-checklist.md 등에서 정의한 구조·체크리스트를 기준으로 작동합니다. 실제로는 다음과 같이 사용할 수 있습니다.

• 신규 캠페인 그래픽을 런칭 전에 점검.
• CI 파이프라인에 통합해, Pull Request에서 브랜드에 맞지 않는 에셋 자동 감지.
• 디자인 리뷰 시 구조화된 체크리스트로 활용.

스크립트 결과를 승인 체크리스트와 함께 활용하면 다음을 보장할 수 있습니다.

• 올바른 로고·컬러 사용.
• 브랜드 폰트 및 타이포그래피 계층 준수.
• 이미지 스타일이 브랜드에 부합하며 품질 기준 충족.
• 대비, 대체 텍스트, 포커스 가시성 등 기본 접근성 요건 충족.

5. 컬러 시스템 관리 및 문서화

컬러는 브랜드와 UI/UX의 핵심 요소입니다. ckm:brand는 컬러 팔레트를 일관되고 잘 문서화된 상태로 유지하기 위한 가이드와 헬퍼 스크립트를 제공합니다.

다음 컬러 스크립트로 팔레트를 조회하거나 비교할 수 있습니다.

node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>

대표적인 활용 예:

• 기존 에셋에서 컬러를 추출해 공식 팔레트와 일치하는지 확인.
• 제안된 신규 팔레트를 현재 가이드라인과 비교.
• references/color-palette-management.md에서 설명한 대로 테이블과 CSS 변수를 구성·유지.

컬러 관리 레퍼런스에는 다음 내용이 포함됩니다.

• 프라이머리, 세컨더리, 뉴트럴, 세맨틱 컬러 계층 구조.
• Markdown 테이블·CSS 변수 기반 문서화 패턴.
• Tailwind 스타일 설정에서 컬러를 표현하는 방법.
• WCAG 2.1 기준 대비(contrast) 접근성 규격.

6. 템플릿으로 브랜드 가이드라인 작성·개선하기

구조화된 브랜드 가이드라인 문서를 시작하려면 다음 파일을 활용하세요.

• references/brand-guideline-template.md
• templates/brand-guidelines-starter.md

두 파일 중 하나를 복사해 레포지토리 내 docs/brand-guidelines.md 또는 유사한 이름으로 저장한 뒤, 다음 항목을 기준으로 커스터마이즈합니다.

• 빠른 참고 정보(컬러, 폰트, 보이스 특성).
• 사용 노트를 포함한 상세 컬러 팔레트.
• 타이포그래피 스택과 반응형 타입 스케일.
• 로고 버전, 여백(clear space), 최소 사이즈 규칙.
• 보이스 원칙, 컨텍스트별 톤, 예시 문구.
• 메시지 계층 구조와 오디언스별 메시지.

이 템플릿들은 디자이너·마케터가 읽기 쉽게 설계되었지만, sync-brand-to-tokens.cjs 같은 스크립트가 처리할 수 있을 만큼 구조화되어 있습니다.

7. 브랜드 가이드라인을 디자인 토큰과 CSS로 동기화

ckm:brand의 핵심 기능 중 하나는 SKILL.md에 설명된 Brand Sync Workflow입니다. 작성된 브랜드 가이드라인을 프론트엔드 구현과 연결해 줍니다.

일반적인 워크플로는 다음과 같습니다.

# 1. docs/brand-guidelines.md 수정 (또는 /brand update 사용)
# 2. 디자인 토큰으로 동기화
node scripts/sync-brand-to-tokens.cjs
# 3. 검증
node scripts/inject-brand-context.cjs --json | head -20

이 과정에서 사용되는 파일(스킬 문서에 정의된 기준)은 다음과 같습니다.

• docs/brand-guidelines.md → 브랜드 결정 사항에 대한 단일 소스.
• assets/design-tokens.json → 생성·업데이트되는 디자인 토큰 정의.
• assets/design-tokens.css → 프론트엔드에서 사용하는 CSS 변수.

실무에서의 사용 예:

• docs/brand-guidelines.md에서 컬러, 타이포그래피, 간격 등을 수정.
• sync-brand-to-tokens.cjs를 실행해 변경 사항을 전파.
• UI 코드에 assets/design-tokens.css를 import해 브랜드 업데이트가 제품 전반에 반영되도록 구성.

이를 통해 브랜드 가이드라인, 디자인 시스템, 구현 간의 정합성을 수동 이중 입력 없이 유지할 수 있습니다.

8. 체크리스트 기반 브랜드 리뷰·감사 수행

대규모 팀이나 캠페인에서는 제공된 체크리스트를 반복 가능한 리뷰 프로세스로 활용할 수 있습니다.

• references/approval-checklist.md – 단계별 에셋 승인 프로세스.
• references/consistency-checklist.md – 채널 전반의 브랜드 일관성 점검.

활용 방식 예:

• 프로젝트 관리 도구 내 리뷰 폼·체크리스트로 전환.
• 신규 페이지나 캠페인 티켓의 수용 기준(acceptance criteria)으로 사용.
• validate-asset.cjs와 결합해 반자동 검증 플로 구축.

이렇게 하면 웹, 이메일, 소셜, 인쇄물 등 다양한 채널에서 브랜드·UI/UX·접근성 기준을 일관되게 적용할 수 있습니다.

자주 묻는 질문(FAQ)

ckm:brand는 우리 팀의 일상 업무에 어떤 도움이 되나요?

ckm:brand는 다음 세 가지 실질적인 가치를 제공합니다.

1. 코드화된 브랜드 가이드라인 – 명확한 브랜드 규칙을 작성할 수 있는 구조화된 템플릿과 레퍼런스.
2. 운영 워크플로 – 브랜드 업무를 즉흥적(ad hoc) 작업이 아닌 반복 가능한 프로세스로 만드는 스크립트와 체크리스트.
3. 구현 정합성 – 디자인 토큰과 CSS로 가이드라인을 동기화해, UI가 브랜드 결정 사항을 반영하도록 지원.

단순한 일반 체크리스트가 아니라, 현대적인 UI/UX와 마케팅 워크플로에서 브랜드가 실제로 어떻게 사용되는지에 초점을 맞추고 있습니다.

GitHub에서 ckm:brand를 어떻게 설치하나요?

공개된 레포지토리와 스킬 슬러그를 사용해 skills 인스톨러를 실행합니다.

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

이 명령은 레포지토리 내 .claude/skills/brand에 있는 brand 스킬을 가져옵니다. 이후 SKILL.md와 references/ 폴더를 참고해, 본인 레포와 프로세스에 맞게 통합하세요.

우리 브랜드에 맞게 가이드라인을 커스터마이즈해도 스크립트를 계속 사용할 수 있나요?

가능합니다. ckm:brand는 처음부터 커스터마이즈를 전제로 설계되었습니다. 다음과 같이 사용하는 것을 권장합니다.

• 제공된 템플릿을 복사해 docs/ 또는 brand/ 디렉터리에 저장.
• 브랜드 컬러, 타이포그래피, 메시징, 규칙을 반영해 내용 수정.
• sync-brand-to-tokens.cjs 등 스크립트가 파싱할 수 있도록 전체 구조는 크게 유지.

파일 이름이나 구조를 크게 변경하는 경우, 새 위치·포맷에 맞게 스크립트를 조정해야 할 수 있습니다.

ckm:brand가 우리 디자인 시스템이나 CMS를 대체하나요?

아닙니다. ckm:brand는 디자인 시스템과 CMS 옆에 위치합니다.

• 디자인 시스템이 구현하는 브랜드 규칙과 토큰을 정의하고,
• CMS 콘텐츠가 따라야 할 보이스와 메시징을 문서화합니다.

컴포넌트 라이브러리 같은 디자인 시스템과 CMS는 여전히 전달(Delivery) 수단입니다. ckm:brand는 그 뒤에서 작동하는 브랜드 로직을 일관되고 기계가 읽을 수 있는 형태로 유지해 줍니다.

ckm:brand는 접근성을 어떻게 지원하나요?

접근성은 여러 레퍼런스에 통합되어 있습니다.

• references/approval-checklist.md에는 시각·콘텐츠 접근성 체크 항목이 포함되어 있습니다.
• references/color-palette-management.md에서는 대비 요구사항과 세맨틱 컬러 사용을 문서화합니다.

이 문서를 디자인 리뷰와 에셋 승인 과정에서 활용해, 컬러 대비, 포커스 가시성, 대체 텍스트, 콘텐츠 구조가 WCAG 2.1 AA와 같은 공통 기준을 충족하도록 할 수 있습니다.

비디자이너도 ckm:brand로 브랜드 일관성을 유지할 수 있나요?

가능합니다. 일부 에셋은 디자이너·프론트엔드 엔지니어를 대상으로 하지만, 많은 문서는 마케터·콘텐츠 팀·일반 이해관계자를 위해 작성되어 있습니다.

• 보이스·메시징 프레임워크는 바로 사용할 수 있는 문장 패턴을 제공합니다.
• 체크리스트는 디자인 전문 용어 없이도 이해 가능한 예/아니오 기준을 제시합니다.
• 주입된 브랜드 컨텍스트는 비디자이너가 AI 도구를 사용할 때도 브랜드를 벗어나지 않도록 도와줍니다.

이 리소스를 한 곳에 모아두면, 그때그때 말로 전달하는 브랜드 가이드가 크게 줄어듭니다.

이미 브랜드 PDF나 외부 스타일 가이드가 있는데, ckm:brand를 어떻게 활용할 수 있나요?

ckm:brand를 사용해 기존 자료를 운영 가능하게(operationalize) 만들 수 있습니다.

• PDF의 핵심 섹션을 제공된 템플릿을 사용해 docs/brand-guidelines.md로 옮깁니다.
• 로고 규칙, 컬러 팔레트, 타이포그래피를 구조화된 레퍼런스로 정리합니다.
• 동기화·검증 스크립트를 활용해, 이 규칙을 토큰과 에셋 체크에 반영합니다.

기존 브랜드 문서를 버릴 필요는 없습니다. ckm:brand를 그 문서의 레포지토리 기반·자동화 친화적 버전으로 활용하면 됩니다.

ckm:brand는 UI 제품에만 해당하나요, 일반 마케팅에도 쓸 수 있나요?

ckm:brand는 둘 다를 포괄합니다.

• UI/UX·프론트엔드를 위해 디자인 토큰 동기화, CSS 변수, 컬러·타이포그래피 스펙을 제공합니다.
• 마케팅·콘텐츠를 위해 메시징 프레임워크, 승인 체크리스트, 에셋 구성 방법을 제공합니다.

브랜드가 웹, 제품, 마케팅 캠페인 전반에 걸쳐 사용된다면, ckm:brand는 이 모든 접점을 하나의 시스템 아래에서 정렬하는 데 도움을 줍니다.

ckm:brand를 사용할 때 브랜드 가이드라인은 얼마나 자주 업데이트해야 하나요?

ckm:brand는 브랜드를 살아 있는 시스템으로 취급합니다. 실무적으로는 다음과 같은 접근을 추천합니다.

• 시각·메시징 측면에 의미 있는 변화가 있을 때마다 가이드라인을 업데이트합니다.
• 변경 직후 Brand Sync Workflow를 실행해 토큰과 CSS를 최신 상태로 유지합니다.
• 주기적으로 주요 채널을 대상으로 체크리스트를 활용한 **일관성 감사(audit)**를 수행합니다.

모든 것이 레포지토리 안에 있기 때문에, 업데이트는 일반적인 버전 관리·리뷰 프로세스를 그대로 따를 수 있습니다.