Ch.4 색채 이론
배색 유형과 조합
색 하나는 단어, 배색은 문장이다
맥도날드의 빨강+노랑, 스타벅스의 초록+흰색, 카카오의 노랑+갈색 — 모두 우연이 아니라 배색 이론에 기반한 전략적 선택입니다.
이렇게 많은 색 조합 중에서 어떤 기준으로 골라야 할까?
색상환의 기하학적 관계만 알면 됩니다. 4가지 배색 유형으로 정리해봅시다.
핵심 내용
색상환 위의 위치 관계가 배색의 모든 것을 결정합니다
보색 (Complementary)
색상환에서 정반대(180°)에 있는 두 색의 조합입니다. 빨강-초록, 파랑-주황, 노랑-보라가 대표적입니다. 특징: 강렬한 대비, 활기, 긴장감. 한 색을 주색으로 쓰고 반대색을 강조(Accent)로 소량 사용하면 효과적입니다.
유사색 (Analogous)
색상환에서 인접한 2~3색의 조합입니다. 파랑-청록-초록, 빨강-주황-노랑이 대표적입니다. 특징: 조화로움, 편안함, 자연스러움. 대비가 약해서 강조색을 별도로 추가해야 할 수 있습니다.
삼각배색 (Triadic)
색상환에서 120° 간격으로 떨어진 세 색의 조합입니다. 빨-노-파(1차색), 주-초-보(2차색)가 정삼각형을 이룹니다. 특징: 다채로움, 생동감, 균형잡힌 대비. 3색 모두 강하게 쓰면 산만해지므로, 1색을 주색으로 하고 나머지 2색은 보조로 씁니다.
분할보색 (Split-Complementary)
보색 대신 보색의 양옆 인접색 2개를 사용합니다. 예: 파랑의 보색은 주황 → 분할보색은 파랑 + 빨간주황 + 노란주황. 특징: 보색의 강렬함을 유지하면서 약간 부드럽게. 초보자에게 가장 추천하는 배색 유형입니다.
같은 정보, 다른 배색 — 느낌이 완전히 달라집니다
60-30-10 법칙 어떤 배색 유형이든 비율 관리가 핵심입니다. • 60% — 주색 (배경, 큰 영역) • 30% — 보조색 (카드, 섹션 구분) • 10% — 강조색 (CTA 버튼, 아이콘, 링크) 이 비율을 지키면 어떤 배색이든 안정적으로 보입니다.
가장 헷갈리는 두 배색, 차이를 명확히 합시다
색상환에서 120° 간격으로 떨어진 세 색을 조합하는 배색 유형은?
60-30-10 법칙에서 CTA 버튼 같은 강조 요소는 전체의 30%를 차지해야 한다
핵심 용어
보색
강렬·활기·긴장감 → 세일 배너, 스포츠 브랜드, 경고 UI. 맥도날드(빨+노), 파이어폭스(주+파)
유사색
조화·편안·자연스러움 → 명상 앱, 자연 브랜드, 독서 앱. Instagram 그라데이션(주~보라)
삼각배색
다채로움·생동감·균형 → 어린이 앱, 교육 플랫폼, 이벤트 페이지. 구글 로고(빨·노·파·초)
분할보색
대비+유연성 → 가장 범용적. 기업 사이트, SaaS 대시보드, 앱 UI. 보색보다 부드럽지만 유사색보다 명확
비교 정리
| 항목 | 보색 | 분할보색 |
|---|---|---|
| 색 수 | 2색 (정반대) | 3색 (보색의 양옆 인접색 2개) |
| 대비 강도 | 매우 강렬 — 눈이 피로할 수 있음 | 강하지만 약간 부드러움 |
| 난이도 | 대비가 너무 강해 배분이 어려움 | 3색이라 역할 분배가 자연스러움 |
| 추천 상황 | 한 요소를 극적으로 부각시킬 때 | 전체적으로 균형잡힌 컬러 시스템 구축 시 |
보색 = 강렬한 한 방 / 분할보색 = 안정적인 시스템 — 초보자에게는 분할보색 추천
핵심 정리
- 1보색: 180° 반대, 강렬한 대비
- 2유사색: 인접 2~3색, 조화로움
- 3삼각배색: 120° 간격 3색, 다채로움
- 4분할보색: 보색 양옆 활용, 부드러운 대비
- 560-30-10 법칙: 주색60% + 보조30% + 강조10%
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작