디자인 시스템 적용 + 참고 사이트

왜 디자인 시스템을 쓰나?

Ch.3-5(디자인 시스템)에서 본인 서비스의 색·폰트·여백 토큰이 자동 생성됐어요. 그게 단지 문서로만 있으면 무용지물. 실제 화면에 입혀야 의미가 있어요. 디자인 시스템이 적용되면:

• 모든 페이지가 같은 톤 (브랜드 일관성)
• 색·폰트 변경 시 한 곳만 수정 (유지보수 편함)
• 새 화면 만들 때 색·폰트 매번 고민 안 해도 됨
• 본인 서비스가 "프로페셔널"하게 보임

단계 1 — /v4-design 호출

/v4-design

스킬이 본인에게 묻는 것 + 추천 답:

• "PLAN의 design_system을 적용할까요?" → 네
• "적용 범위는?" → 전체 (또는 특정 화면만)
• "다크 모드 같이 만들까요?" → 일단 X. 추가 작업이라 출시 후 고려.
• "기존 인라인 스타일이 있는데 덮어쓸까요?" → 네 (본인이 직접 적은 게 없으면 안전)

스킬이 자동으로 해 주는 일:

• tailwind.config.js에 본인 색·폰트 토큰 등록
• app/assets/stylesheets/application.css에 base 스타일
• 주요 컴포넌트(버튼, 카드, 입력란)에 토큰 적용
• 레이아웃(application.html.erb)에 본인 폰트 import

단계 2 — 화면 확인 + 미세 조정

bin/dev로 서버 켜고 localhost:3000 둘러보세요. 한 화면 한 화면 보면서:

• 색이 본인 브랜드와 맞는가
• 글자가 너무 작지 않은가 (모바일에서)
• 버튼이 클릭하기 좋은 크기인가
• 여백이 충분한가 (답답하지 않은가)

마음에 안 드는 부분은 Claude Code에 한 줄.

메인 페이지의 CTA 버튼이 너무 작아. 더 크고 눈에 띄게 바꿔줘.

참고 사이트 6곳 — 디자인 톤 한눈에

디자인이 막막하면 이미 잘 만든 사이트의 톤을 따라가는 게 가장 빠른 길이에요. 본 코스가 권장하는 6곳을 한 번씩 둘러보세요. 각각 다른 느낌이에요.

참고 사이트 부분 차용 — 안전한 방법

참고 사이트 디자인을 그대로 베끼는 건 X (저작권). 하지만 "패턴"은 자유롭게 가져올 수 있어요. 추천 차용:

• 여백 비율 (예: "Stripe처럼 섹션 사이 큰 여백")
• 색 조합 (예: "Linear처럼 어두운 배경 + 보라 1포인트")
• 타이포그래피 위계 (예: "Vercel처럼 큰 헤드라인 + 작은 서브")
• 마이크로 인터랙션 (예: "shadcn처럼 hover 시 부드럽게")

Claude Code에 부탁할 때:

랜딩 페이지의 hero 섹션을 Linear.app 스타일로 다시 만들어줘.
어두운 배경 + 보라 1포인트 + 큰 헤드라인 + 부드러운 그라데이션.
색은 본인 디자인 시스템의 brand 색을 우선.

디자인 시스템 변수 — 4-13까지 알아두기

본 코스 빌드킷은 다음 변수 패턴을 권장 (Tailwind 기준):

금지: bg-gray-*, text-gray-* 같은 하드코딩 색. 항상 디자인 시스템 변수만.

자주 발생하는 문제 + 해결

자가 진단 — 통과 기준

• ☐ /v4-design으로 디자인 시스템이 적용되어 있다 (localhost에서 확인)
• ☐ 본인 브랜드 색·폰트가 화면 전반에 일관성 있게 보인다
• ☐ 참고 사이트 6곳 중 본인 톤에 가까운 1~2곳을 골랐다
• ☐ 디자인 시스템 변수(bg-canvas, text-brand 등) 7가지를 안다
• ☐ git commit 한 줄 ("디자인 시스템 적용")