분명히 같은 색이었는데...?
디자인과 심리학 : 20. 대비
대비(Contrast) : 물체를 배경과 구별할 수 있게 만들어 주는 시각적 특성의 차이
디자인에서 대비는 다양하게 활용된다. 이전 글(시각적 위계)을 통해 간단한 예시들을 소개해드린 적이 있으니, 오늘은 검은색과 흰색의 대비에 초점을 맞춰 이야기를 풀어나가볼까 한다.
나는 대부분 서비스에서 다크 모드를 사용한다. 눈이 덜 피로하고 배터리 사용량도 줄어들어서(OLED기준) 일석이조이기 때문이다.
다크 모드에서는 기본적으로 배경색이 어두워지고 폰트색이 밝아진다. 보통은 아래와 같이 배경이 검은색, 폰트가 흰색으로 전환되곤 한다.
아이폰의 디스플레이 설정 화면대부분의 색상이 바뀐 것 같아 보인다. 토글 버튼이나, 해 모양 아이콘의 색상은 확실히 조금 더 밝아진 것 같다. 근데 정말 밝아진 걸까? 아니다. 색상은 전혀 변하지 않았다. 배경색만 변했을 뿐인데, 나는 해당 색상들이 실제로 더 밝아진 것 같다고 '느꼈다'. 믿기지 않는다면 RGB 값을 비교해보셔도 좋다.
이렇듯 대비는 같은 색도 서로 다르게 인식하게 만들 수 있다. 의류 같은 경우는 정확한 색상 표현이 중요하다. 배경색에 따라, 고객은 해당 옷을 실제와는 다른 색상으로 인식할 수도 있다.
Photo by Dom Hill on Unsplash 대비를 잘 사용하면 특정 대상을 강조하거나 가시성을 높일 수 있다. 하지만 의도치 않은 강조는 오히려 역효과를 일으킬 수 있다. 지금처럼 글을 읽을 때를 생각해보자. 글이 길수록, 또한 그 글 안에 담긴 정보와 맥락이 더 중요할수록, 가시성보다는 가독성에 초점을 맞춰야 한다.
이럴 땐 대비를 낮추는 것이 좋은 방법이 될 수 있다. 특히 다크 모드에서는 더더욱 말이다. 검은 배경에 흰색 폰트를 사용하면, 흰색 폰트의 가시성이 매우 높아진다. 아까 보았던 토글 버튼처럼 말이다.
모든 빛을 흡수하는 검은색관 달리, 흰색은 모든 빛을 반사한다. 그렇게 흰색 폰트에서 뿜어져 나오는 빛 때문에, 가독성이 떨어질 확률이 높아진다.
물론 걱정하지 않아도 된다. 이미 각 서비스 내에서 검은색과 흰색 간 대비를 많이 낮춰놓았기 때문이다. 아래 사진을 보자.
각 서비스의 라이트 모드와 다크 모드얼핏 보면 모두 검은색 배경에 흰색 폰트를 사용한 것 같지만, 저 흰색들은 사실 모두 완벽한 흰색(#FFFFFF)이 아니다. 흰색처럼 보였던 폰트색은 아래와 같다.
심지어 아이폰 메모장의 폰트색은 흰색에 가깝지도 않다. 거의 회색에 가깝다. 이렇게 콘텐츠 플랫폼 및 가독성이 중요한 서비스에선, 의도적으로 검은색과 흰색 간 대비를 낮추어 가독성을 높이고 있다.
이런 사소한 디테일을 평소에 인지하긴 어렵다. 우리는 그저 어디선가 불편함을 느낄 뿐이다. 그런 느낌은 해당 제품 또는 서비스의 전체적인 경험에 영향을 미친다.
디자이너가 이러한 점을 고려하지 않거나, 하지 못 한다면 어떻게 될까? 정작 핵심 문제는 발견하지도 못 한 채, '우리 제품의 방향성 자체를 바꿔야 하나...' 란 생각에서 머물 수 밖에 없지 않을까.
