브랜딩과 디자인 톤 입히기

04-real-backend.md 까지 Supabase 연결을 끝냈다면, 이 단계에서는 base 의 자리 표시 값 화면을 본인 SaaS 의 이름과 톤으로 교체합니다. 이 작업이 끝나면 dev 서버에 떠 있는 화면이 base 의 회색 톤 기본 화면이 아니라 본인 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 가 자리 표시 값으로 본문을 채워 두니, 디자인이 정해지기 전이라도 라우트는 모두 동작하는 상태가 됩니다.

라우트 경로는 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 시점에는 자리 표시 값 Price ID 가 들어가 있어서, 가격 버튼을 누르면 Stripe Checkout 이 임시 상태로 동작하는 데서 멈춥니다.

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 가 자동으로 따라옵니다. 이름과 한 줄 설명은 새 컨셉으로 갱신되고, 색상 토큰 중 본인이 고친 값은 보존됩니다.

직접 고친 값까지 컨셉 기준으로 덮어쓰고 싶으면 AI 가 한 번 더 물어보고 명시적으로 결정합니다.

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

브랜딩과 톤이 정해졌다면 06-when-ai-gets-stuck.md 으로 가서 AI 워크플로가 막혔을 때 푸는 두 슬래시 명령을 봅니다. 본격적인 배포는 08-distribution.md 에서 다룹니다. 무언가 동작하지 않는다면 09-troubleshooting.md 의 빌드와 캐시 항목을 먼저 봅니다.