대비 효과(Contrast Effect)

정의

비교 상황에서 하나의 대상이 다른 대상에 대해 상대적으로 더 뚜렷하게 인식되는 현상

설명

이는 주로 비교대상이 서로 다른 경우에 발생하며, 하나의 대상이 다른 것과 비교했을 때 더 강조되거나 부각되는 효과가 있다

디자인에서는 아래와 같은 다양한 대비효과를 활용한다

색 대비 : 서로 다른 색상 사용으로 요소들 간의 시각적 대비 형성
밝은 배경과 진한 텍스트를 조합하면 텍스트가 더 강조된다

크기 대비 : 크기 차이를 이용하여 요소들 간의 대비를 형성
특정 요소를 강조하기 위해 크기를 더 크게 키울 수 있다

질감 대비 : 서로 다른 질감을 사용하여 요소들 간의 시각적 대비를 형성
특정 요소에 다른 질감을 사용하면 더 강조될 수 있다

형태 대비 : 서로 다른 형태나 모양을 사용하여 요소들 간의 대비를 형성
특정 요소만 다른 형태를 사용함으로서 더 강조할 수 있다

밝기 대비 : 밝기 차이를 이용하여 요소들 간의 대비를 형성
어두운 배경에 밝은 요소, 밝은 배경에 어두운 요소를 사용함으로써 강조할 수 있다

이외에도 폰트나 공간 등 시각적인 요소를 대비되게 사용하면 우리는 그것을 비교하며 하나에 더 주목하게 된다

대비 효과는 다양한 디자인 요소를 복합적으로 대비시킬 수 있다

예시

채용과정에서 면접자들을 비교할 때

먼저 만난 면접자보다 후에 만난 면접자의 특성이 더 강조될 수 있다

여러 명의 면접자를 연속해서 평가할 때 두드러지게 발생할 수 있다

결론

대비 효과를 활용한 UI/UX 디자인을 통해 사용자가 웹 및 앱을 더 쉽게 이해하고 사용하도록 한다

디자인의 각 요소 간의 대비를 고려해 사용자 경험을 향상시키고 콘텐츠 가시성과 접근성을 향상시켜보자

색상 선택시 웹 접근성 가이드라인을 준수하여 사용자 시각적 편의성을 고려한다

중요한 컨텐츠는 크게, 보조적인 컨텐츠는 작게 표현함으로써 정보의 중요도를 직관적으로 느끼게 한다

폰트는 가독성과 시각적 측면을 고려하여 선정하고, 폰트 대비를 통해 중요도를 구분할 수 있게 한다

컨텐츠 영역을 다르게 디자인 함으로써 정보끼리 구분을 명확하게 하고 시각적 조직성을 부여한다

더 중요하게 강조해야하는 컨텐츠는 아이콘이나 이미지를 사용해 컨텐츠를 시각적으로 풍부하게 만든다