topic★★★★★난이도
배색 유형과 조합
보색, 유사색, 삼원색, 분할보색 — 색상환 기반 4대 배색 전략과 실제 앱 적용법.
#보색#유사색#삼원색#분할보색#배색
왜 배우는가
아무리 예쁜 색이라도 조합이 잘못되면 눈이 피로하거나 정보 전달이 안 된다. 색상환의 기하학적 관계를 이용하면 실패 확률을 크게 줄일 수 있다.
배색(Color Scheme)은 색상환 위에서 색들의 위치 관계로 결정된다. 대표적인 4가지 배색 유형은 보색(Complementary), 유사색(Analogous), 삼원색(Triadic), 분할보색(Split-Complementary)이다. 각 유형은 시각적 효과와 적합한 사용처가 다르다.
| 배색 유형 | 색상환 관계 | 시각적 특성 | 앱 적용 예시 |
|---|---|---|---|
| 보색 | 180° 반대 | 강한 대비, 시선 집중 | CTA 버튼 강조 (파랑 배경 + 주황 버튼) |
| 유사색 | 30°~60° 이웃 | 조화롭고 안정적 | 자연 테마 앱 (초록 그라데이션) |
| 삼원색 | 120° 간격 3색 | 생동감, 균형 | 어린이 교육 앱 (빨·노·파) |
| 분할보색 | 보색의 양옆 2색 | 대비 + 안정 | 대시보드 (파랑 + 황록 + 적주) |
실전에서 가장 안전한 출발점은 유사색 배색이다. 색상환에서 이웃한 2~3색을 고르면 자연스러운 조화를 얻는다. 여기에 보색 하나를 강조색으로 추가하면 시선을 유도할 포인트가 생긴다. 이것이 분할보색의 원리이기도 하다.
보색 배색은 강렬하지만 위험하다. 빨강과 초록을 동일 면적으로 나란히 놓으면 눈이 진동하는 색채 진동(Vibration) 현상이 발생한다. 보색을 쓸 때는 반드시 면적 비율을 차등으로 — 한 색을 주색, 다른 색을 소량 강조로 쓴다.
도구 추천 — Adobe Color(color.adobe.com)나 Coolors(coolors.co)에서 색상환 기반 배색을 자동 생성할 수 있다. 원하는 배색 유형을 선택하고 기준 색상을 정하면, 수학적으로 조화로운 팔레트를 즉시 얻는다.