브랜딩과 디자인 톤 입히기

04-real-backend.md 까지 Supabase 가 잡혔다면, 이 단계에서는 base 의 placeholder 화면을 본인 SaaS 의 이름과 톤으로 갈아끼웁니다. 이 작업이 끝나면 dev 서버에 떠 있는 화면이 base 의 회색 톤 placeholder 가 아니라 본인 SaaS 의 첫인상이 됩니다.

가는 길은 슬래시 명령 한 줄로 시작합니다. AI 가 묻는 자리에 답을 채워 가는 호흡이고, 한 번에 끝내려고 욕심내지 않아도 됩니다. 디자인 톤이 아직 안 정해졌으면 이 페이지를 건너뛰고 base 기본 톤으로 계속 가도 됩니다.

언제 이 페이지를 보나

상황	어디로
컨셉도 톤도 아직 모르겠다	base 기본 그대로 두기. 정해지면 나중에 다시
컨셉은 있는데 디자인은 아직	컨셉 결정 phase (/3-analyze-saas) 부터
컨셉도 톤도 머리에 있다	아래 흐름 그대로
Tailwind 토큰을 직접 손보고 싶다	아래 “tokens.css 직접 손보기”

트리거

Claude Code 프롬프트에 다음을 입력합니다.

/5-customize-saas

또는 자연어로 브랜딩 갈아끼우기. 어느 쪽이든 5-customize-saas 스킬을 호출합니다. 이 스킬이 한 호흡 안에 다음 자리를 차례로 묻습니다.

이미 한 번 실행한 자리라면 AI 가 먼저 묻습니다.

이미 브랜딩이 박혀 있어요. 다시 잡을까요? — 5-a 브랜딩 / 5-b 테마 / 5-c 라우트 트리 / 5-d 가격 페이지

처음이라면 전체를 한 번에 돌리는 길이 가장 빠릅니다. 두 번째부터는 손볼 자리만 골라서 돌립니다.

5-a) 브랜딩 — 이름, 로고, 한 줄 설명

첫 질문이 옵니다.

SaaS 이름은 무엇인가요? 한 단어 또는 두 단어 (예: Linear, Notion, MyApp)

이름을 적으면 다음 질문이 따라옵니다.

한 줄 설명을 적어 주세요. (예: “팀의 비동기 의사결정을 빠르게 잡는 도구”)

이름과 한 줄 설명은 package.json, index.html 의 <title> 과 <meta>, README.md 의 첫 단락, site-header 위젯, 랜딩 페이지 hero 자리에 같이 박힙니다. 한 자리만 손대도 다섯 자리가 따라 흘러가게 잡혀 있습니다.

로고는 SVG 한 장이 있으면 public/logo.svg 에 넣어 둡니다. AI 가 그 파일을 헤더와 favicon 자리에 자동으로 박습니다. 로고가 아직 없으면 이름의 첫 글자를 텍스트 로고로 띄우고 넘어갑니다. 나중에 만들어지면 같은 자리에 덮어 씁니다.

5-b) 테마 — Tailwind v4 색상 토큰

다음 질문이 옵니다.

색상 톤을 어떻게 잡을까요?

• 한 단어로 톤 알려주기 (예: “professional blue”, “warm beige”)
• Figma 파일에서 자동 추출 (Figma MCP 필요)
• 직접 hex 값 박기

처음이라면 한 단어 가 가장 빠릅니다. AI 가 그 톤에 맞는 primary, secondary, 배경, 글자 색을 한 셋 짜서 src/shared/ui/tokens.css 의 @theme 블록에 박습니다.

@theme {
  --color-primary: oklch(0.62 0.18 250);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-secondary: oklch(0.75 0.04 250);
  /* ... */
}

Tailwind v4 는 토큰을 CSS 변수로 박는 자리가 표준입니다. 컴포넌트의 bg-primary, text-primary-foreground 같은 utility 가 위 변수를 읽습니다. 한 자리만 손대면 사이트 전체 색이 따라 바뀝니다.

추천 결과가 마음에 안 들면 같은 phase 를 다시 호출하면서 톤 단어를 다르게 줍니다 (darker blue, more saturated, softer beige 식). 매번 새로 추천이 떨어집니다.

Figma 흐름은 Figma MCP 가 01-prerequisites.md 자리에 등록된 경우만 뜹니다. 이 자리는 옵션이라 등록 안 하셨으면 두 갈래 중 다른 한 쪽으로 곧장 갑니다.

5-c) 라우트 트리 자동 생성

phase 4 (/4-design-saas) 에서 결정한 라우팅 모드 (marketing-app / app-only / multi-tenant / docs-heavy) 에 따라 src/pages/ 디렉토리 안에 라우트 진입점이 자동으로 박힙니다.

marketing-app 모드 기준 자동 생성되는 자리:

• src/pages/landing/ — 공개 랜딩
• src/pages/pricing/ — 가격 페이지
• src/pages/auth/login/, src/pages/auth/signup/ — 인증
• src/pages/app/ — 로그인 후 메인 (RequireAuth 가드 적용)
• src/pages/app/settings/, src/pages/app/billing/ — 보호 영역의 세부 페이지
• src/pages/checkout-result/ — 결제 완료와 취소

각 페이지 안에는 ui/<PageName>.tsx 와 index.ts (public API) 가 박힙니다. base 가 placeholder 본문을 채워 두니, 디자인이 잡히기 전이라도 라우트는 모두 도는 상태가 됩니다.

라우트 경로는 src/shared/lib/routing/routes.ts 의 ROUTES const 한 자리에서 정의됩니다. 페이지를 추가하거나 경로를 바꿀 때 이 파일 한 자리만 고치면 라우터, <Link to=...>, navigate(...) 가 모두 따라옵니다.

5-d) 가격 페이지 골격 자동 생성

phase 4 에서 결정한 가격 모델 (pricing-config.json) 에 따라 가격 카드 그리드가 자동으로 박힙니다. 무료 / Pro / Enterprise 셋이 기본 골격이고, 본인 SaaS 의 가격 자리는 phase 4 에서 결정한 값으로 채워집니다.

src/widgets/pricing-grid/
├── ui/PricingGrid.tsx
├── model/plans.ts        ← 가격 데이터 (Stripe Price ID 와 동기화)
└── index.ts

Stripe Price ID 는 본인 Stripe 대시보드의 Products 에서 가격을 등록해야 박힙니다. test mode 에서 먼저 Pro 와 Enterprise 가격을 등록한 다음 그 ID 를 model/plans.ts 에 박습니다. 이 자리는 fork 시 채워집니다. base 시점에는 placeholder Price ID 가 들어가 있어 가격 버튼을 누르면 Stripe Checkout 이 dummy 상태로 도는 자리에서 멈춥니다.

tokens.css 직접 손보기

src/shared/ui/tokens.css 의 @theme 블록을 직접 손봐도 됩니다. AI 가 추천한 secondary 가 마음에 안 들 때 한 단계 어둡게 바꾸는 식의 손질은 이 파일 한 자리에서 끝납니다.

@theme {
  --color-primary: oklch(0.55 0.20 250);   /* 한 단계 어둡게 */
  --color-secondary: oklch(0.72 0.06 250); /* 채도 살짝 올림 */
}

이 자리는 phase 5 가 다시 호출돼도 보존됩니다. base 가 추천한 값과 본인이 손본 값이 다른 자리는 brand.json 의 manual_overrides 에 표시되고, 다음 호출에서 그 자리는 건너뜁니다.

적용 확인

작업이 끝나면 dev 서버는 자동 새로고침으로 이미 새 톤이 떠 있을 가능성이 높습니다. 떠 있지 않으면 한 번 강제로 새로고침합니다.

# 새 터미널에서, 또는 dev 서버를 끄고 다시
pnpm dev

브라우저에서 http://localhost:5173 을 새로고침하면 랜딩 hero 와 가격 카드, 헤더 로고가 본인 SaaS 정보로 바뀌어 있어야 합니다.

색상이 그대로면 보통 둘 중 하나입니다.

• 브라우저 캐시 — 강제 새로고침 (Cmd+Shift+R 또는 Ctrl+Shift+R)
• dev 서버가 옛 빌드를 들고 있는 상태 — Ctrl+C 로 끄고 pnpm dev 다시

두 번째 갱신 — 컨셉이 바뀐 다음

phase 3 (/3-analyze-saas) 에서 컨셉을 다시 잡으면 phase 5 가 자동으로 따라옵니다. 이름과 한 줄 설명은 새 컨셉으로 갱신되고, 색상 토큰은 본인이 손본 자리는 보존됩니다.

수동 손본 값까지 컨셉 기준으로 덮어쓰고 싶으면 한 번 더 물어보고 명시적으로 결정합니다.

manual_overrides 에 primary, secondary 두 개가 박혀 있어요. 새 컨셉 추천 값으로 덮어쓸까요?

다음

브랜딩과 톤이 박혔다면 06-when-ai-gets-stuck.md 으로 가서 AI 워크플로가 막힌 자리를 푸는 두 슬래시 명령을 봅니다. 본격적인 배포는 08-distribution.md 입니다. 무언가 깨졌다면 09-troubleshooting.md 의 빌드와 캐시 항목을 먼저 봅니다.