통합 요약노트
Ch.4 색채 이론
색의 3속성, 색상환, 배색 유형, 색채 심리학
이 챕터의 내용
색의 3속성과 색상환
색을 정확하게 소통하려면 속성을 분리해서 이해해야 합니다. 디자이너의 언어를 배워봅시다.
모든 색은 세 가지 속성의 조합으로 설명됩니다
색상 (Hue)
색상환에서의 위치입니다. 빨강, 주황, 노랑, 초록, 파랑, 보라 — 우리가 '색 이름'이라고 부르는 것이 바로 Hue입니다. 0°~360°의 각도로 표현합니다.
- 색의 3속성: 색상(Hue) + 채도(Saturation) + 명도(Brightness)
- HSB → 디자인 도구에서 직관적 조정용
- RGB/HEX → 코드 구현용, RGBA는 투명도 포함
- 12색상환: 1차색(3) + 2차색(3) + 3차색(6)
- 디지털 = RGB 기반 색상환, 미술 = RYB 기반
배색 유형과 조합
색상환의 기하학적 관계만 알면 됩니다. 4가지 배색 유형으로 정리해봅시다.
색상환 위의 위치 관계가 배색의 모든 것을 결정합니다
보색 (Complementary)
색상환에서 정반대(180°)에 있는 두 색의 조합입니다. 빨강-초록, 파랑-주황, 노랑-보라가 대표적입니다. 특징: 강렬한 대비, 활기, 긴장감. 한 색을 주색으로 쓰고 반대색을 강조(Accent)로 소량 사용하면 효과적입니다.
- 보색: 180° 반대, 강렬한 대비
- 유사색: 인접 2~3색, 조화로움
- 삼각배색: 120° 간격 3색, 다채로움
- 분할보색: 보색 양옆 활용, 부드러운 대비
- 60-30-10 법칙: 주색60% + 보조30% + 강조10%
색채 심리학과 브랜드
보편적 반응과 문화적 차이 모두 존재합니다. 둘 다 알아야 글로벌 디자인이 가능합니다.
색은 논리보다 먼저 감정에 도달합니다
색채 심리학 연구에 따르면, 사람은 제품을 처음 볼 때 90초 이내에 무의식적 판단을 내리며, 이 판단의 62~90%가 색상에 의해 결정됩니다.
CTA 버튼 색상 — 주황과 초록이 전환율이 높다는 연구가 많지만, 핵심은 '주변과의 대비'
- 빨강=에너지, 파랑=신뢰, 초록=자연, 노랑=주목, 보라=고급, 주황=친근
- 색의 심리 효과: 일부는 생물학적, 상당수는 문화적 학습
- 글로벌 서비스: 흰색(서양=순수, 동아시아=애도) 등 문화 차이 필수 확인
- 브랜드 색상 3기준: 적합성 + 차별성 + 일관성
- 카카오뱅크 노랑, Spotify 초록 = 차별성 전략의 성공 사례
핵심 용어 모음
HSB (HSV)
Hue(0-360°) + Saturation(0-100%) + Brightness(0-100%). 디자이너가 색을 '직관적으로' 조작할 때 사용. Figma의 컬러피커가 HSB 기반.
RGB
Red(0-255) + Green(0-255) + Blue(0-255). 빛의 삼원색 혼합. 모니터가 실제로 색을 표현하는 방식. CSS에서 rgb(255, 87, 51) 형태로 사용.
HEX
RGB를 16진수로 압축 표현. #FF5733 = R:FF(255) G:57(87) B:33(51). 웹 개발에서 가장 널리 쓰이는 표기법.
보색
강렬·활기·긴장감 → 세일 배너, 스포츠 브랜드, 경고 UI. 맥도날드(빨+노), 파이어폭스(주+파)
유사색
조화·편안·자연스러움 → 명상 앱, 자연 브랜드, 독서 앱. Instagram 그라데이션(주~보라)
삼각배색
다채로움·생동감·균형 → 어린이 앱, 교육 플랫폼, 이벤트 페이지. 구글 로고(빨·노·파·초)
분할보색
대비+유연성 → 가장 범용적. 기업 사이트, SaaS 대시보드, 앱 UI. 보색보다 부드럽지만 유사색보다 명확
빨강 (Red)
에너지, 긴급함, 열정, 식욕 자극. 심박수를 높이는 효과. 세일 배너, 음식 앱, 긴급 알림에 활용
파랑 (Blue)
신뢰, 안정, 전문성, 차분함. 가장 보편적으로 '좋아하는 색'. 금융, 의료, 기업 브랜드에 압도적
초록 (Green)
자연, 성장, 건강, 안전. 눈의 피로가 가장 적은 색. 친환경 브랜드, 건강식품, '성공' 상태 표시
노랑 (Yellow)
낙관, 주의, 따뜻함, 에너지. 가장 먼저 눈에 띄는 색. 경고 표지판, 주목 유도, 어린이 제품
보라 (Purple)
고급감, 창의성, 신비. 역사적으로 왕족의 색(염료가 비쌌음). 뷰티, 럭셔리, 크리에이티브 분야
비교 정리
| 항목 | 보색 | 분할보색 |
|---|---|---|
| 색 수 | 2색 (정반대) | 3색 (보색의 양옆 인접색 2개) |
| 대비 강도 | 매우 강렬 — 눈이 피로할 수 있음 | 강하지만 약간 부드러움 |
| 난이도 | 대비가 너무 강해 배분이 어려움 | 3색이라 역할 분배가 자연스러움 |
| 추천 상황 | 한 요소를 극적으로 부각시킬 때 | 전체적으로 균형잡힌 컬러 시스템 구축 시 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기