Claude로 브랜드에 맞는 색상 팔레트를 설계하고, 어울리는 폰트 조합을 선정한다. CSS 변수로 디자인 토큰을 정리하고, 실제 코드에서 재사용 가능한 색상 시스템을 구축한다.
이번 강에서 배울 것
- 색상 이론 핵심 — 색상이 전달하는 심리
- Claude로 브랜드 색상 팔레트 설계하기
- 한국어 웹에 어울리는 폰트 조합 선정
- CSS 변수(디자인 토큰)로 색상 시스템 구축
색상이 전달하는 심리
| 색상 | 심리적 연상 | 대표 브랜드 |
|---|---|---|
| 파랑(Blue) | 신뢰, 안정, 전문성 | Samsung, Kakao Pay, 토스 |
| 초록(Green) | 건강, 자연, 성장 | 네이버, 올리브영 |
| 빨강(Red) | 에너지, 긴급, 열정 | YouTube, 배달의민족 |
| 보라(Purple) | 창의성, 고급, 신비 | Figma, Twitch |
| 주황(Orange) | 활기, 친근함, 식욕 | 카카오, 당근마켓 |
| 검정(Black) | 세련됨, 권위, 럭셔리 | Apple, Nike |
색상 팔레트의 구조
좋은 색상 팔레트는 4가지 역할로 구성됩니다.
Primary (메인 색상) — 버튼, 링크, 핵심 UI 요소
Secondary (보조 색상) — 뱃지, 하이라이트, 보완 요소
Neutral (중립 색상) — 배경, 텍스트, 테두리 (회색 계열)
Semantic (의미 색상) — 성공(초록), 경고(노랑), 오류(빨강), 정보(파랑)Claude로 색상 팔레트 설계하기
실습 프롬프트 1 — 팔레트 설계
FRESH:ON 브랜드 (건강 음료, 직장인 타겟)의 색상 팔레트를 설계해줘. 브랜드 분위기: 에너제틱하지만 과학적인. 에너지 드링크처럼 강렬하지 않고, 건강 앱처럼 신선하고 믿음직한. 다음 형식으로 제안해줘: - Primary: HEX 코드 + 사용 상황 - Secondary: HEX 코드 + 사용 상황 - Accent: HEX 코드 + 사용 상황 - 배경색 2개 (라이트/다크): HEX 코드 - 텍스트색 2개 (제목/본문): HEX 코드 - 각 색상이 이 브랜드에 어울리는 이유도 설명해줘
실습 프롬프트 2 — CSS 변수로 정리
위 색상 팔레트를 CSS 변수(:root)로 정리해줘. 각 색상에 shade 9단계 (100~900)도 포함해줘. Tailwind CSS 커스텀 색상 설정 코드도 함께 작성해줘.
폰트 선정 — 한국어 웹의 특수성
영문 폰트와 달리 한국어 웹폰트는 용량이 크고 선택지가 제한적입니다. 아래 조합이 실무에서 검증된 방식입니다.
| 용도 | 추천 폰트 | 특징 |
|---|---|---|
| 제목 (고딕, 임팩트) | Noto Sans KR Black/Bold | 범용성 높음, 안전한 선택 |
| 제목 (개성 있는) | Pretendard | 모던한 느낌, 개발자/디자이너 인기 |
| 본문 | Noto Sans KR Regular | 가독성 최고, Google Fonts 제공 |
| 숫자 강조 | 영문 폰트 혼용 | Inter, DM Sans 등과 함께 사용 |
| 고급/에디토리얼 | Noto Serif KR | 명조체, 문화/예술 브랜드 |
실습 프롬프트 3 — 폰트 시스템
FRESH:ON 브랜드에 맞는 타이포그래피 시스템을 설계해줘. 요구사항: - 한국어 + 영문 혼용 (브랜드명 영문 표기) - 모바일 앱/웹 모두 사용 - 에너제틱하고 모던한 느낌 결과물: 1. 추천 폰트 조합 (제목/본문/강조 각 1개, 한국어+영문 각각) 2. Google Fonts 로드 코드 (HTML link 태그) 3. CSS 폰트 크기 변수 (xs~4xl, rem 단위) 4. 실제 사용 예시 코드 (h1~h3, p, small)
색상 + 타이포그래피 통합 미리보기
실습 프롬프트 4 — 통합 스타일 가이드
지금까지 정한 FRESH:ON의 색상 팔레트와 폰트 시스템을 사용해서 HTML + CSS로 간단한 스타일 가이드 페이지를 만들어줘. 포함 내용: - 색상 칩 (각 색상 사각형 + HEX 표시) - 폰트 샘플 (h1~h3, 본문, 캡션) - 버튼 샘플 (Primary, Secondary, Ghost) - 뱃지/태그 샘플
색상과 폰트를 CSS 변수로 먼저 정의하면 나중에 변경할 때 한 줄만 수정해도 전체 디자인이 바뀝니다. 이것이 디자인 시스템의 힘입니다.
강의 핵심 요약
- 색상 팔레트 = Primary + Secondary + Accent + Neutral + Semantic
- 한국어 웹은 Pretendard 또는 Noto Sans KR 기반이 실무 표준
- CSS 변수(:root)로 디자인 토큰 관리 — 유지보수 핵심
- 다음 강: 이 색상 시스템으로 실제 UI 컴포넌트 만들기
관련 검색어 · 색상 팔레트 만들기, CSS 변수 색상, 한국어 웹폰트, Pretendard 사용법, 디자인 토큰, 브랜드 색상 설계