대비

대비(Contrast)는 서로 다른 시각적 속성을 나란히 놓아 차이를 부각시키는 조형 원리다. 현대 조형을 이해하는 기본 틀이자, UI에서 무엇이 먼저 보여야 하는지를 결정하는 가장 강력한 도구다.

대비의 종류

종류설명
크기 대비큰 것과 작은 것의 차이로 위계를 만든다
축방향 대비수직-수평, 사선 등 방향의 차이
밀도 대비여백과 요소의 밀집도 차이
색상 대비보색·유사색 간 차이
명도 대비밝고 어두움의 차이 (가장 가독성에 직결)
채도 대비선명함과 탁함의 차이
질감 대비매끄러움과 거침의 차이

대비가 해내는 일

  • 시각적 위계: “어디를 먼저 봐야 하는가”
  • 주의 환기: 주변과 다른 것이 눈에 들어온다
  • 의미 구별: 강조·경고·상태를 시각적으로 분리
  • 가독성: 배경과 텍스트의 명도 대비는 읽기의 기본 조건

대비를 쓸 때의 주의점

  • 모든 것을 강조하면 아무것도 강조되지 않는다무주의 맹시 참고
  • 접근성 기준 준수: 텍스트-배경 명도 대비비는 최소 4.5:1 (WCAG AA)
  • 맥락에 따른 의미: 같은 색이라도 브랜드·문화에 따라 달리 읽힘
  • 일관성: 대비 규칙이 화면마다 바뀌면 사용자가 학습하지 못한다

UX에서의 활용

  • 주요 CTA는 명도·색상 대비로 우선 노출
  • 보조 버튼은 대비를 낮춰 주의 자원 낭비 방지
  • 오류·경고는 채도 대비로 즉시 인지
  • 카드·섹션 구분은 밀도·질감 대비로 부드럽게

관련 노트