{3줄 요약}

대비는 요소 사이 차이를 만들어 무엇이 중요한지 드러내는 시각 원리예요.
대비가 약하면 정보가 한 덩어리처럼 보여 사용자가 우선순위를 놓치게 돼요.
대비를 잘 쓰면 말 없이도 시선과 행동을 원하는 방향으로 이끌 수 있어요.

대비가 없으면 어떻게 되나요

모든 텍스트가 같은 크기, 같은 굵기, 같은 색이라고 상상해보세요.

제목인지 본문인지 구분이 안 돼요. 버튼인지 텍스트인지 알 수 없어요.
중요한 경고 메시지도 일반 안내문과 똑같이 보여요.

사용자는 어디를 먼저 봐야 할지 모르게 되고, 정보를 이해하는 데 훨씬 더 많은 에너지를 써요.
대비가 없는 화면이 주는 경험이에요.

대비는 정보를 분리하고, 우선순위를 만들고, 사용자의 시선을 안내해요.
단순한 시각 효과가 아니에요.

대비를 만드는 방법들

색 대비 - 가장 직관적인 방법이에요.
배경과 텍스트 사이에 충분한 명도 차이가 있어야 읽기 쉬워요.

WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 지침)는 일반 텍스트의 색 대비 비율을 최소 4.5:1로 권장해요.
이 기준을 지키면 시력이 약한 사용자도 읽을 수 있어요.

크기 대비 - 제목과 본문의 크기 차이예요.
이 차이가 클수록 정보의 위계가 명확해져요.

두께 대비 - 같은 크기라도 Bold와 Regular는 달라 보여요.
굵기로 강조를 만들 수 있어요.

형태 대비 - 동그란 요소와 각진 요소, 채워진 버튼과 테두리만 있는 버튼처럼 형태의 차이도 대비예요.

쿠팡에서 보이는 대비 전략

쿠팡 상품 페이지를 보면 대비가 잘 설계된 구조가 보여요.

가장 크고 진하게 표시된 건 가격이에요.
정가는 회색으로 작게, 할인율은 빨간색으로, "지금 구매" 버튼은 오렌지색으로 배경 대비가 높게 만들어졌어요.

사용자의 시선이 가는 순서 - 가격 → 할인율 → 구매 버튼.
대비가 그 순서를 만든 거예요.
텍스트를 읽지 않아도 중요한 정보가 눈에 들어와요.

대비를 과하게 쓰면

모든 걸 강조하면 아무것도 강조되지 않아요.

화면에 빨간색 텍스트, 노란색 배경, 굵은 폰트가 동시에 여러 곳에 있으면 시선이 어디로 가야 할지 모르게 돼요.

대비의 효과는 "주변 대비 얼마나 다른가"에서 나와요.
화면당 강한 대비 포인트를 1~2개로 제한하고, 나머지는 보조적인 수준으로 쓰는 게 실무 기준이에요.

가독성과 대비의 관계

회색 텍스트를 흰 배경 위에 쓰면 깔끔해 보여요.
하지만 야외에서 스마트폰으로 보면 안 보일 수 있어요.
밝은 환경에서 색 대비가 낮으면 텍스트가 사라져 버려요.

모바일 인터페이스에서는 특히 색 대비를 넉넉하게 잡는 게 중요해요.
사용자가 어떤 환경에서 볼지 모르니까요.

타이포그래피에서 대비가 어떻게 작동하는지는 가독성의 원리에서 더 깊이 다뤄요.

관련 아티클

참고 문헌

  • William Lidwell, 《Universal Principles of Design》(2003) - 대비 원리의 인지적 근거를 설명해요.
  • Philip B. Meggs, 《Meggs' History of Graphic Design》(1983) - 그래픽 디자인 역사에서 대비 활용의 맥락을 다뤄요.