컬러·타이포 잡는 법 — 업종별·브랜드별 결정 가이드

사이트 색과 폰트는 첫 3초 인상을 결정합니다. 좋은 콘텐츠라도 어울리지 않는 색·읽기 어려운 폰트면 방문자 이탈. 업종별 추천부터 접근성·한글 폰트까지 정리.

색 — 3색 원칙

비율

예시

60% 흰색 + 회색 (배경·본문)
30% 진회색·네이비 (헤더·푸터·강조 영역)
10% 파랑 (버튼·링크)

이런 비율 안 깨면 어떤 색 조합이든 일관성 유지.

업종별 색 가이드

의료·헬스케어

청결감·신뢰:
– 파랑 (#2563eb·#0EA5E9)
– 민트 (#10b981)
– 흰색 + 회색

보완 (따뜻함):
– 주황 (포인트, 작게)
– 연분홍 (병원 인테리어용)

피해야 할 색: 빨강 (위급·피)·검정 (어두움).

기업·법무·금융

신뢰·전문성:
– 네이비 (#1e293b·#0f172a)
– 진회색 (#374151)
– 흰색
– 골드·연한 베이지 (포인트)

활기 있는 색 자제. 보수적·차분.

F&B·식품

식욕 자극·따뜻함:
– 빨강 (#dc2626) — 식욕
– 주황 (#f97316) — 활기
– 갈색 (#92400e) — 자연·로스팅
– 녹색 (#16a34a) — 신선·유기농

밝고 따뜻한 톤.

교육·아동

활기·신뢰:
– 파랑 (#3b82f6) — 신뢰
– 노랑·주황 (#fbbf24·#f97316) — 활기
– 녹색 (#22c55e) — 성장

다채롭되 과하지 않게.

패션·뷰티

고급·세련:
– 검정·흰색
– 핑크 톤
– 골드·로즈골드 (포인트)
– 파스텔 톤

업종 정체성에 따라 강함 vs 부드러움.

테크·IT

모던·미니멀:
– 파랑 (#2563eb·#0ea5e9)
– 보라 (#7c3aed)
– 진녹색 (#10b981)
– 검정·진회색

선명한 액센트 + 모던 배경.

색 도구

팔레트 생성

• Coolors (coolors.co) — 자동 생성·복사
• Adobe Color — 휠로 조합 (Triad·Complementary)
• Tailwind Color Palette — 500·700 명도 단계

영감

• Color Hunt — 사람들이 만든 팔레트
• Dribbble·Behance — 실제 사이트 색 분석

접근성 검증

• WebAIM Contrast Checker — 텍스트·배경 대비 (WCAG AA 4.5:1 이상)
• Stark (Figma·Chrome 확장) — 색맹 시뮬레이션

색 결정 워크플로우

1. 브랜드 컬러 (있다면)

회사 로고·CI가 있으면 그 색을 Primary로.

2. 보조색 도출

Primary와 조화로운 1~2개:
– 같은 계열 (모노톤·Analogous)
– 보색 (대비·Complementary)
– 삼각 (Triad)

3. 회색 계열

• 진한 회색 (텍스트)
• 보통 회색 (보조 텍스트)
• 연한 회색 (배경·테두리)

4. 의미 색

• 성공 (녹색)
• 경고 (노랑)
• 오류 (빨강)

위 4단계 → 디자인 시스템 토큰으로.

타이포그래피 — 폰트 선택

한글 폰트 추천

본문용

Pretendard 1순위. CJK 모든 환경에서 안정.

디스플레이용 (헤딩·로고)

영문 폰트 추천

본문용

• Inter — 모던·웹 표준
• Roboto — 구글·안드로이드
• Open Sans — 가장 무난

디스플레이용

• Playfair Display — 고급·세리프
• Montserrat — 모던·산세리프
• Lora — 부드러운 세리프

한·영 혼합

영문은 시스템 폰트 사용 권장 (속도 ↑):

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
}

폰트 크기 시스템

8단계 표준

--text-xs: 12px;     /* 캡션·메타 정보 */
--text-sm: 14px;     /* 보조 텍스트·표 */
--text-base: 16px;   /* 본문 */
--text-lg: 18px;     /* 강조 본문·서브헤딩 */
--text-xl: 24px;     /* H3 */
--text-2xl: 32px;    /* H2 */
--text-3xl: 48px;    /* H1·Hero */
--text-4xl: 64px;    /* Display */

모듈러 스케일

비율 (1.25·1.333·1.5) 곱하기 방식:

16 × 1.25 = 20
20 × 1.25 = 25
25 × 1.25 = 31

자동 비율 → 시각적 조화.

한글 타이포 특수 사항

자간 (Letter Spacing)

한글은 영문보다 자간을 좁게:

body {
  letter-spacing: -0.02em;
}

h1, h2 {
  letter-spacing: -0.04em;
}

음수 자간 (-0.02em ~ -0.04em)이 한글 가독성 ↑.

줄간격 (Line Height)

한글은 영문보다 약간 넓게:

body {
  line-height: 1.75;
}

1.5 이하면 답답.

단어 사이 (Word Spacing)

한글 띄어쓰기는 영문 word break보다 자연스러움. 기본값 유지.

한자·일본어 혼합

모든 글자에서 일관성 — Pretendard·Noto Sans 같은 다국어 지원 폰트.

가독성 — 필수 점검

본문 폭

한 줄에 45~75자가 표준. 너무 길면 다음 줄로 시선 이동 어려움.

.entry-content {
  max-width: 720px;
}

색 대비

• 본문 텍스트 vs 배경: 4.5:1 이상 (WCAG AA)
• 큰 헤딩: 3:1 이상
• 버튼: 4.5:1 이상

WebAIM Contrast Checker로 점검.

모바일

@media (max-width: 768px) {
  body {
    font-size: 16px;  /* 모바일 가독성 최소선. iOS는 입력란이 16px 미만이면 포커스 시 자동 확대 */
  }
  h1 {
    font-size: 28px;  /* 데스크탑 48px → 모바일 28px */
  }
}

폰트 로딩 최적화

1. 필요한 weight만

Pretendard에 100·200·300·400·500·600·700·800·900 전부 로드는 금물 .

400 Regular·700 Bold 두 개면 충분.

2. WOFF2 형식

가장 압축 ↑. 모든 모던 브라우저 지원.

3. font-display: swap

@font-face {
  font-family: 'Pretendard';
  src: url('Pretendard.woff2') format('woff2');
  font-display: swap;
}

폰트 로딩 중 시스템 폰트로 먼저 → 사용자 못 기다림 줄임.

4. Self-hosted

Google Fonts 대신 본인 서버에 호스팅. 외부 도메인 요청 ↓.

WordPress 플러그인 OMGF.

자주 하는 실수

• 5개 이상 색 사용: 일관성 깨짐. 3~5색이 정답
• 너무 많은 폰트: 본문·헤딩 합쳐 2~3개 이내
• 색만 보고 결정: 접근성 (색 대비) 무시
• 본문 폰트 크기 14px: 모바일에서 너무 작음. 16px 이상
• 자간·줄간격 기본값: 한글 특수 조정 필요

FAQ

Q. 본인 회사 컬러가 없습니다. 어떻게?
A. 업종 추천 색에서 1~2개 선택 → 1년 정도 사용 → 변경 검토. 처음부터 완벽한 컬러 X.

Q. Pretendard 외 다른 한글 폰트?
A. Noto Sans KR (구글)이 차선. 디자인 강조 시 G마켓 산스·수트.

Q. 폰트가 깨져 보입니다.
A. 폰트 로딩 실패. CDN URL 확인·font-display: swap 적용.

Q. 다크 모드도 색 토큰 만들어야?
A. 모든 색에 다크 버전. :root[data-theme="dark"]에서 정의. 다크 모드 안 만들면 라이트만.

Q. 색·폰트 결정에 얼마나 시간을?
A. 본인 사이트: 30분~2시간. 클라이언트: 시안 2~3안 + 검수 = 1~2주.

관련 가이드

• 디자인 시스템·토큰
• 공통 디자인·폰트 (WP)
• 공통 디자인·폰트 (아임웹)
• 웹 접근성 기초
• 기업 홈페이지 제작 가이드 — 페이지 구성과 콘텐츠 설계 기준