컬러 팔레트 & 타이포그래피 — 업종별 실전 레퍼런스 북

이 시리즈는 UI/UX Pro Max 스킬의 디자인 데이터베이스를 기반으로 작성되었다. 자세한 배경은 1편을 참고하자.

프론트엔드 개발자에게 디자인 시스템의 첫 번째 결정은 컬러와 타이포그래피다. "파란색이 신뢰감을 준다" 같은 막연한 이론은 많이 듣지만, 정작 SaaS 대시보드에 어떤 blue를 쓰고 CTA에 어떤 orange를 넣어야 하는지는 알기 어렵다.

이 글에서는 96개 업종별 컬러 팔레트와 57개 폰트 페어링 데이터를 바탕으로, 실제 프로젝트에서 바로 꺼내 쓸 수 있는 수준의 레퍼런스를 제공한다.

Part 1: 컬러 팔레트

컬러 이론 기초 — 개발자가 알아야 할 핵심만

디자인 학위가 필요한 건 아니다. 아래 3가지만 이해하면 된다.

보색 (Complementary)

색상환에서 정반대에 위치한 두 색. 강한 대비를 만든다. CTA 버튼에 자주 활용된다.

SaaS 제품에서 파란 배경에 주황 CTA 버튼이 눈에 띄는 이유가 바로 보색 대비다.

유사색 (Analogous)

색상환에서 인접한 3가지 색. 조화롭고 안정적이다. 배경, 표면, 보더 등에 사용한다.

Healthcare 앱에서 차분한 느낌을 내는 핵심 전략이다.

60-30-10 법칙

인테리어 디자인에서 온 법칙이지만, UI에도 정확히 적용된다.

비율	역할	UI 적용	예시
60%	기본색 (Dominant)	Background, Surface	`#F8FAFC` (Light grey)
30%	보조색 (Secondary)	Cards, Sections, Text	`#1E293B` (Dark slate)
10%	강조색 (Accent)	CTA, Links, Highlights	`#F97316` (Orange)

이 비율을 지키면 시각적 피로 없이 중요한 요소가 자연스럽게 눈에 들어온다. 대부분의 성공적인 SaaS 제품이 이 법칙을 따른다.

아래 데모에서 보색, 유사색 관계를 색상환 위에서 직접 탐색하고, 60-30-10 법칙이 실제 UI에 어떻게 적용되는지 확인해보자.

색채 이론 인터랙티브

색상환의 색상을 클릭해 관계를 탐색하세요

업종별 컬러 팔레트 Deep Dive

96개 업종 팔레트 중에서 프론트엔드 개발자가 가장 자주 마주치는 6개 업종을 깊이 있게 분석한다. 각 업종 설명 아래에서 해당 팔레트 스와치를 직접 확인하고, 클릭하면 hex 코드를 복사할 수 있다.

1. SaaS (General)

SaaS (General)

Trust blue + orange CTA contrast

왜 이 조합인가? SaaS의 핵심은 신뢰와 행동 유도다. Blue 계열은 IT/기술 분야에서 "안정감"을 전달하는 가장 검증된 색이다 (Stripe, Linear, Vercel). CTA에 보색인 Orange를 써서 "지금 시작하기" 버튼이 즉시 눈에 들어오게 만든다.

2. E-commerce

E-commerce (General)

Success green + urgency orange

왜 이 조합인가? 녹색은 "성공", "완료", "안전한 거래"를 연상시킨다. 쇼핑몰에서 가장 중요한 감정은 "이 거래는 안전하다"다. CTA의 Orange는 긴급성(Urgency)을 만들어 전환율을 높인다 — "지금 구매하면 10% 할인".

3. Healthcare

Healthcare App

Calm cyan + health green

왜 이 조합인가? 의료 앱에서 빨강은 위험 신호, 주황은 경고다 — CTA에 절대 쓰면 안 된다. Cyan 계열은 청결함과 차분함을 동시에 전달한다. CTA에 Green을 써서 "건강한 선택"이라는 긍정적 연상을 유도한다.

4. Fintech/Crypto

Fintech/Crypto

Gold trust + purple tech

왜 이 조합인가? 금융 = 돈 = Gold. 이보다 직관적인 연결은 없다. 다크 배경은 "전문 트레이더 도구" 느낌을 만든다. Purple CTA는 "프리미엄", "혁신"을 암시한다 — Stripe도 보라색이다.

5. Education

Educational App

Playful indigo + energetic orange

왜 이 조합인가? Indigo는 Blue의 신뢰감에 Purple의 창의성을 더한 색이다. 학습 플랫폼은 "믿을 수 있으면서도 영감을 주는" 느낌이 필요하다. Orange CTA는 "다음 강의 시작"을 에너지 있게 유도한다.

6. Creative Agency

Creative Agency

Bold pink + cyan accent

왜 이 조합인가? 에이전시는 "우리는 다르다"를 보여줘야 한다. Pink는 대담함과 창의성을 동시에 전달한다. CTA의 Cyan은 보색 대비로 행동을 유도하면서도, 전체 톤과 조화를 이룬다.

CTA 색상 전략

CTA(Call to Action) 버튼은 전환율에 직접적 영향을 미친다. 단순히 "눈에 띄는 색"이 아니라, 심리적 전략이 필요하다.

1. 보색 대비 원칙

Primary가 Blue 계열이면 CTA는 Orange/Yellow. Primary가 Green이면 CTA는 Red/Pink. 색상환 반대편에서 가져온다.

/* Blue 기반 → Orange CTA */
.btn-cta {
  background-color: #F97316;
  color: #FFFFFF;
}
.btn-cta:hover {
  background-color: #EA580C;
}

/* Green 기반 → Orange CTA (같은 원리) */
.btn-cta-alt {
  background-color: #F97316;
  color: #FFFFFF;
}

2. 감정 유발 전략

CTA 색상	유발 감정	적합한 문맥
Orange `#F97316`	긴급성, 에너지	"지금 시작하기", "무료 체험"
Green `#22C55E`	안전, 확인	"결제하기", "가입 완료"
Purple `#8B5CF6`	프리미엄, 혁신	"프로 플랜 업그레이드"
Red `#DC2626`	위험, 경고	"삭제", "구독 취소" (destructive)
Gold `#CA8A04`	고급, 신뢰	"Premium 멤버십"

3. CTA Hover 상태

Hover 시 밝기를 10-15% 낮추는 것이 표준이다. 단, 투명도 변경보다는 실제 색상값을 바꾸는 것이 성능에 좋다.

/* Tailwind 기준 */
.btn-cta {
  @apply bg-orange-500 hover:bg-orange-600 active:bg-orange-700;
  transition: background-color 150ms ease;
}

아래 데모에서 5가지 CTA 색상의 감정 효과를 hover/active 상태와 함께 직접 체험하고, Primary와 보색 CTA 조합도 비교해보자.

CTA 컬러 전략

버튼 위에 마우스를 올려 상태 전환을 확인하세요

오렌지

긴급함 / 에너지

가입, 무료 체험

그린

안전 / 확인

결제, 완료

퍼플

프리미엄 / 혁신

업그레이드, Pro 플랜

레드

위험 / 경고

삭제, 취소

골드

럭셔리 / 신뢰

프리미엄 멤버십

다크모드 팔레트 변환

다크모드는 "색을 뒤집는 것"이 아니다. 제대로 된 다크모드 변환에는 규칙이 있다.

핵심 변환 규칙

Background: 순수 검정(#000000)을 피하라. #0F172A 같은 깊은 중성색을 써야 눈이 편하다.
Primary: 밝기를 올리고 채도를 약간 낮춘다. #2563EB → #60A5FA.
Text: 순수 흰색(#FFFFFF)보다 #F1F5F9 같은 약간 어두운 흰색이 눈 부심을 줄인다.
CTA: 채도를 올려서 어두운 배경에서도 눈에 띄게 만든다. #F97316 → #FB923C.
Border: 배경보다 한 단계 밝은 중성색. #E2E8F0 → #334155.

/* Light Mode */
:root {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --primary: #2563EB;
  --text: #1E293B;
  --text-muted: #64748B;
  --border: #E2E8F0;
}

/* Dark Mode */
:root.dark {
  --bg: #0F172A;
  --surface: #1E293B;
  --primary: #60A5FA;       /* Lightened */
  --text: #F1F5F9;          /* Not pure white */
  --text-muted: #94A3B8;
  --border: #334155;         /* Subtle separation */
}

아래 데모에서 3가지 테마의 Light/Dark 변환을 직접 비교해보자.

다크 모드 팔레트 변환

라이트/다크 모드 팔레트 변환을 나란히 비교

Light 모드

Primary#2563EB

CTA#F97316

BG#F8FAFC

Text#1E293B

Dark 모드

Primary#60A5FA

CTA#FB923C

BG#0F172A

Text#F1F5F9

팁: 다크 모드 변환은 단순히 색상을 반전하는 것이 아니다. 주요 색상은 밝게 조정하고(채도 낮추고 명도 올리기), 배경은 깊은 중성색을 사용하며(순수 검정 X), CTA 색상은 가시성 유지를 위해 채도를 높여야 할 수 있다.

Part 2: 타이포그래피

폰트 페어링 원칙

좋은 폰트 페어링의 핵심은 대비 속의 조화다. 두 폰트가 너무 비슷하면 존재 이유가 없고, 너무 다르면 시각적 충돌이 일어난다.

원칙 1: 구조적 대비 (Structural Contrast)

Heading과 Body 폰트의 구조가 달라야 한다.

조합	대비 정도	느낌
Serif + Sans	높음	클래식 + 모던. 가장 안전한 선택
Display + Sans	매우 높음	대담 + 읽기 편함. 히어로 섹션에 적합

Display 폰트란? 큰 크기에서 쓰도록 디자인된 장식적 폰트다. 본문이 아니라 제목, 히어로, 로고에 사용한다. | Sans + Sans | 낮음 | 통일감. 같은 폰트의 weight 변화로 해결 | | Mono + Sans | 높음 | 기술적 + 친근. 개발자 도구에 적합 |

원칙 2: x-height 매칭

두 폰트의 x-height(소문자 높이)가 비슷해야 같은 font-size에서 시각적으로 균형이 맞는다.

Good: Inter (x-height: 0.78) + Playfair Display (x-height: 0.75)
Bad:  Inter (x-height: 0.78) + Didot (x-height: 0.55)

x-height 차이가 크면 같은 16px이어도 한쪽이 작아 보인다.

원칙 3: 무게감(Weight) 범위

Heading 폰트는 Bold(700)~Black(900)이 있어야 하고, Body 폰트는 Regular(400)~Medium(500)이 핵심이다.

/* Heading: bold & medium weights */
h1, h2, h3 { font-weight: 700; }

/* Body: regular & medium */
p { font-weight: 400; }
strong { font-weight: 500; }

아래 데모에서 구조적 대비, x-height 매칭, Weight 범위를 인터랙티브하게 실험해보자.

폰트 페어링 원칙

효과적인 폰트 페어링의 3가지 핵심 원칙을 탐색하세요

다람쥐 헌 쳇바퀴에 타고파

타이포그래피는 서체를 배열하여 글이 읽히고, 가독성 있으며, 시각적으로 매력적으로 보이게 하는 기술이다. 좋은 폰트 페어링은 구조적 대비를 통해 시각적 위계를 만든다.

대비:높음

클래식 + 모던

폰트 페어링 라이브 프리뷰

아래 데모에서 8가지 대표 폰트 페어링의 Heading + Body 조합을 직접 비교해보자. 각 조합의 분위기(Mood)와 적합 분야도 함께 확인할 수 있다.

폰트 페어링 라이브 프리뷰

페어링을 선택해 제목 + 본문 조합을 미리보기

The Quick Brown Fox Jumps Over

Typography is the art and technique of arranging type to make written language legible, readable, and appealing. Good design is invisible — when users naturally fall into the flow, that is proof the design is doing its job.

제목 폰트

Playfair Display

본문 폰트

Inter

분위기

우아함, 럭셔리, 세련됨

한글 폰트 페어링

영문 폰트만으로는 한국어 서비스를 커버할 수 없다. 한글 폰트 선택이 별도로 필요하다.

Pretendard — 한글 Inter

Pretendard는 한글 UI 폰트의 사실상 표준이 되고 있다. Apple의 SF Pro와 Inter의 한글 버전이라 생각하면 된다.

/* CDN에서 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue',
    'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR',
    'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', sans-serif;
}

특징: 가변 폰트 지원, 9가지 굵기, Inter와 시각적 호환성 뛰어남

Noto Sans KR — Google 표준

Google Fonts에서 바로 쓸 수 있는 한글 폰트. 프로젝트 세팅이 가장 간편하다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

한글 + 영문 페어링 추천

영문 Heading	한글 Body	분위기	적합한 분야
Playfair Display	Pretendard	클래식 + 모던	프리미엄 서비스, 패션
Space Grotesk	Pretendard	테크 + 깔끔	SaaS, 테크 스타트업
Plus Jakarta Sans	Noto Sans KR	친근 + 깔끔	일반 웹서비스
Poppins	Pretendard	모던 + 프로페셔널	비즈니스, B2B
JetBrains Mono	Pretendard	개발자 + 정돈	기술 블로그, 문서

컬러 팔레트 & 타이포그래피 — 업종별 실전 레퍼런스 북

이 시리즈는 UI/UX Pro Max 스킬의 디자인 데이터베이스를 기반으로 작성되었다. 자세한 배경은 1편을 참고하자.

이 글에서는 96개 업종별 컬러 팔레트와 57개 폰트 페어링 데이터를 바탕으로, 실제 프로젝트에서 바로 꺼내 쓸 수 있는 수준의 레퍼런스를 제공한다.

Part 1: 컬러 팔레트

컬러 이론 기초 — 개발자가 알아야 할 핵심만

디자인 학위가 필요한 건 아니다. 아래 3가지만 이해하면 된다.

보색 (Complementary)

색상환에서 정반대에 위치한 두 색. 강한 대비를 만든다. CTA 버튼에 자주 활용된다.

SaaS 제품에서 파란 배경에 주황 CTA 버튼이 눈에 띄는 이유가 바로 보색 대비다.

유사색 (Analogous)

색상환에서 인접한 3가지 색. 조화롭고 안정적이다. 배경, 표면, 보더 등에 사용한다.

Healthcare 앱에서 차분한 느낌을 내는 핵심 전략이다.

60-30-10 법칙

인테리어 디자인에서 온 법칙이지만, UI에도 정확히 적용된다.

비율	역할	UI 적용	예시
60%	기본색 (Dominant)	Background, Surface	`#F8FAFC` (Light grey)
30%	보조색 (Secondary)	Cards, Sections, Text	`#1E293B` (Dark slate)
10%	강조색 (Accent)	CTA, Links, Highlights	`#F97316` (Orange)

이 비율을 지키면 시각적 피로 없이 중요한 요소가 자연스럽게 눈에 들어온다. 대부분의 성공적인 SaaS 제품이 이 법칙을 따른다.

아래 데모에서 보색, 유사색 관계를 색상환 위에서 직접 탐색하고, 60-30-10 법칙이 실제 UI에 어떻게 적용되는지 확인해보자.

색채 이론 인터랙티브

색상환의 색상을 클릭해 관계를 탐색하세요

업종별 컬러 팔레트 Deep Dive

1. SaaS (General)

SaaS (General)

Trust blue + orange CTA contrast

2. E-commerce

E-commerce (General)

Success green + urgency orange

3. Healthcare

Healthcare App

Calm cyan + health green

4. Fintech/Crypto

Fintech/Crypto

Gold trust + purple tech

5. Education

Educational App

Playful indigo + energetic orange

6. Creative Agency

Creative Agency

Bold pink + cyan accent

CTA 색상 전략

CTA(Call to Action) 버튼은 전환율에 직접적 영향을 미친다. 단순히 "눈에 띄는 색"이 아니라, 심리적 전략이 필요하다.

1. 보색 대비 원칙

Primary가 Blue 계열이면 CTA는 Orange/Yellow. Primary가 Green이면 CTA는 Red/Pink. 색상환 반대편에서 가져온다.

/* Blue 기반 → Orange CTA */
.btn-cta {
  background-color: #F97316;
  color: #FFFFFF;
}
.btn-cta:hover {
  background-color: #EA580C;
}

/* Green 기반 → Orange CTA (같은 원리) */
.btn-cta-alt {
  background-color: #F97316;
  color: #FFFFFF;
}

2. 감정 유발 전략

CTA 색상	유발 감정	적합한 문맥
Orange `#F97316`	긴급성, 에너지	"지금 시작하기", "무료 체험"
Green `#22C55E`	안전, 확인	"결제하기", "가입 완료"
Purple `#8B5CF6`	프리미엄, 혁신	"프로 플랜 업그레이드"
Red `#DC2626`	위험, 경고	"삭제", "구독 취소" (destructive)
Gold `#CA8A04`	고급, 신뢰	"Premium 멤버십"

3. CTA Hover 상태

Hover 시 밝기를 10-15% 낮추는 것이 표준이다. 단, 투명도 변경보다는 실제 색상값을 바꾸는 것이 성능에 좋다.

/* Tailwind 기준 */
.btn-cta {
  @apply bg-orange-500 hover:bg-orange-600 active:bg-orange-700;
  transition: background-color 150ms ease;
}

아래 데모에서 5가지 CTA 색상의 감정 효과를 hover/active 상태와 함께 직접 체험하고, Primary와 보색 CTA 조합도 비교해보자.

CTA 컬러 전략

버튼 위에 마우스를 올려 상태 전환을 확인하세요

오렌지

긴급함 / 에너지

가입, 무료 체험

그린

안전 / 확인

결제, 완료

퍼플

프리미엄 / 혁신

업그레이드, Pro 플랜

레드

위험 / 경고

삭제, 취소

골드

럭셔리 / 신뢰

프리미엄 멤버십

다크모드 팔레트 변환

다크모드는 "색을 뒤집는 것"이 아니다. 제대로 된 다크모드 변환에는 규칙이 있다.

핵심 변환 규칙

Background: 순수 검정(#000000)을 피하라. #0F172A 같은 깊은 중성색을 써야 눈이 편하다.
Primary: 밝기를 올리고 채도를 약간 낮춘다. #2563EB → #60A5FA.
Text: 순수 흰색(#FFFFFF)보다 #F1F5F9 같은 약간 어두운 흰색이 눈 부심을 줄인다.
CTA: 채도를 올려서 어두운 배경에서도 눈에 띄게 만든다. #F97316 → #FB923C.
Border: 배경보다 한 단계 밝은 중성색. #E2E8F0 → #334155.

/* Light Mode */
:root {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --primary: #2563EB;
  --text: #1E293B;
  --text-muted: #64748B;
  --border: #E2E8F0;
}

/* Dark Mode */
:root.dark {
  --bg: #0F172A;
  --surface: #1E293B;
  --primary: #60A5FA;       /* Lightened */
  --text: #F1F5F9;          /* Not pure white */
  --text-muted: #94A3B8;
  --border: #334155;         /* Subtle separation */
}

아래 데모에서 3가지 테마의 Light/Dark 변환을 직접 비교해보자.

다크 모드 팔레트 변환

라이트/다크 모드 팔레트 변환을 나란히 비교

Light 모드

Primary#2563EB

CTA#F97316

BG#F8FAFC

Text#1E293B

Dark 모드

Primary#60A5FA

CTA#FB923C

BG#0F172A

Text#F1F5F9

Part 2: 타이포그래피

폰트 페어링 원칙

좋은 폰트 페어링의 핵심은 대비 속의 조화다. 두 폰트가 너무 비슷하면 존재 이유가 없고, 너무 다르면 시각적 충돌이 일어난다.

원칙 1: 구조적 대비 (Structural Contrast)

Heading과 Body 폰트의 구조가 달라야 한다.

조합	대비 정도	느낌
Serif + Sans	높음	클래식 + 모던. 가장 안전한 선택
Display + Sans	매우 높음	대담 + 읽기 편함. 히어로 섹션에 적합

Display 폰트란? 큰 크기에서 쓰도록 디자인된 장식적 폰트다. 본문이 아니라 제목, 히어로, 로고에 사용한다. | Sans + Sans | 낮음 | 통일감. 같은 폰트의 weight 변화로 해결 | | Mono + Sans | 높음 | 기술적 + 친근. 개발자 도구에 적합 |

원칙 2: x-height 매칭

두 폰트의 x-height(소문자 높이)가 비슷해야 같은 font-size에서 시각적으로 균형이 맞는다.

Good: Inter (x-height: 0.78) + Playfair Display (x-height: 0.75)
Bad:  Inter (x-height: 0.78) + Didot (x-height: 0.55)

x-height 차이가 크면 같은 16px이어도 한쪽이 작아 보인다.

원칙 3: 무게감(Weight) 범위

Heading 폰트는 Bold(700)~Black(900)이 있어야 하고, Body 폰트는 Regular(400)~Medium(500)이 핵심이다.

/* Heading: bold & medium weights */
h1, h2, h3 { font-weight: 700; }

/* Body: regular & medium */
p { font-weight: 400; }
strong { font-weight: 500; }

아래 데모에서 구조적 대비, x-height 매칭, Weight 범위를 인터랙티브하게 실험해보자.

폰트 페어링 원칙

효과적인 폰트 페어링의 3가지 핵심 원칙을 탐색하세요

다람쥐 헌 쳇바퀴에 타고파

대비:높음

클래식 + 모던

폰트 페어링 라이브 프리뷰

아래 데모에서 8가지 대표 폰트 페어링의 Heading + Body 조합을 직접 비교해보자. 각 조합의 분위기(Mood)와 적합 분야도 함께 확인할 수 있다.

폰트 페어링 라이브 프리뷰

페어링을 선택해 제목 + 본문 조합을 미리보기

The Quick Brown Fox Jumps Over

제목 폰트

Playfair Display

본문 폰트

Inter

분위기

우아함, 럭셔리, 세련됨

한글 폰트 페어링

영문 폰트만으로는 한국어 서비스를 커버할 수 없다. 한글 폰트 선택이 별도로 필요하다.

Pretendard — 한글 Inter

Pretendard는 한글 UI 폰트의 사실상 표준이 되고 있다. Apple의 SF Pro와 Inter의 한글 버전이라 생각하면 된다.

/* CDN에서 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue',
    'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR',
    'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', sans-serif;
}

특징: 가변 폰트 지원, 9가지 굵기, Inter와 시각적 호환성 뛰어남

Noto Sans KR — Google 표준

Google Fonts에서 바로 쓸 수 있는 한글 폰트. 프로젝트 세팅이 가장 간편하다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

한글 + 영문 페어링 추천

영문 Heading	한글 Body	분위기	적합한 분야
Playfair Display	Pretendard	클래식 + 모던	프리미엄 서비스, 패션
Space Grotesk	Pretendard	테크 + 깔끔	SaaS, 테크 스타트업
Plus Jakarta Sans	Noto Sans KR	친근 + 깔끔	일반 웹서비스
Poppins	Pretendard	모던 + 프로페셔널	비즈니스, B2B
JetBrains Mono	Pretendard	개발자 + 정돈	기술 블로그, 문서

컬러 팔레트 & 타이포그래피 — 업종별 실전 레퍼런스 북

Part 1: 컬러 팔레트

컬러 이론 기초 — 개발자가 알아야 할 핵심만

보색 (Complementary)

유사색 (Analogous)

60-30-10 법칙

업종별 컬러 팔레트 Deep Dive

1. SaaS (General)

2. E-commerce

3. Healthcare

4. Fintech/Crypto

5. Education

6. Creative Agency

CTA 색상 전략

1. 보색 대비 원칙

2. 감정 유발 전략

3. CTA Hover 상태

다크모드 팔레트 변환

핵심 변환 규칙

Part 2: 타이포그래피

폰트 페어링 원칙

원칙 1: 구조적 대비 (Structural Contrast)

원칙 2: x-height 매칭

원칙 3: 무게감(Weight) 범위

다람쥐 헌 쳇바퀴에 타고파

폰트 페어링 라이브 프리뷰

The Quick Brown Fox Jumps Over

한글 폰트 페어링

Pretendard — 한글 Inter

Noto Sans KR — Google 표준

한글 + 영문 페어링 추천

프론트엔드 UI/UX 마스터 가이드

관련 포스트