brunch

You can make anything
by writing

C.S.Lewis

by 사부작 인생 Nov 21. 2023

디바이스 가독성, 흰색 바탕에 검정글씨가 최선일까?

'하얀 바탕에 검정 글씨가 제일 잘 보인다' 란 얘기를 들어보았는가?
'모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실'이란 책에서는 "흰색 바탕 위에 검은색 글씨가 가장 읽기 쉽다"라고 나온다. 과연 흰색 바탕에 검정 글씨가 제일 잘 보일까?


결론부터 말하자면 흰 바탕에 다크그레이가 가독성이 높다.

사실 가독성을 높이기 위해선 폰트 사이즈를 고려하는 측면이 낫다고 한다.

너무 작은 사이즈의 폰트는 피해야 한다는 얘기다.


끝. 이제 이 아티클에서 나가셔도 좋습니다.

농담이고, 흰바탕에 검정글씨는 눈을 피로하게 만드는데, 빛 파장이 어떻고 휘도가 어떻고를 쓰려고 하다가 너무 귀찮아서 짧게 쓰기로 했다. 


흰 바탕에 검은색 글씨는 명도 대비가 극명하기 때문에 눈을 피로하게 만들고 가독성을 떨어뜨린다.

#FFFFFF와 #000000은 명도가 100% 이기 때문이다. 그래서 회색 텍스트는 가독성을 58% 향상 시킨다고 한다.


디자인 QA나 케이스 스터디를 하다 보면 텍스트 UI 컬러에서 피로감이 느껴질 때가 있다.  내 시안을 보다가도 아무 생각 없이 컬러 지정 안 한 검정 폰트가 내 눈을 공격하곤 한다. 엇, 좀 피로한데? 하면 어김없다. 웹에서도 개발자 도구를 켜서 확인해 보면 역시나 텍스트 컬러가 #000000으로 나온다. 


퓨어블랙 혹은 순수한 검정이라고 하는 이 컬러는 웹상에서만 존재한다. 자연에서는 순수 블랙이 나올 수가 없다. 그래서인지 온라인에서도 순수 블랙은 웬만하면 사용하지 말라고들 한다. 우리가 또 되게 인공적이면서 최대한 자연스러우려고 하는 아이러니한 경향들이 있다. 그래서 이번엔 블랙에 대한 이야기를 해보려고 한다.


순수한 검정(퓨어블랙)을 쓰면 안되는 이유


1. 피도로가 높다. 

흰색과 명도 차이가 100% 때문이다. 

어떤 게 가독성이 제일 좋은가?


2. 인간은 자연스러운 것을 선호한다.

"순수한 검정"은 자연에서는 발견할 수 없는 색상이다. 오직 웹상에서만 존재한다. 자연스러움을 추구하는 본성 때문에 인공적인 부분에 있어서 불편함이 생긴다.


3. "순수한 검정" 바탕에 흰 글씨에서는 빛 번짐이 발생하다.

전문용어로 'Halation'이라고 하는데 난시가 있는 사람에게 빛 번짐 현상이 더 두드러진다고 한다.

빛 번짐 예시. 저시력자들을 위해 과도한 명도차이는 피해야 한다.


4. 인쇄물에서 색조가 변할 수 있다.

"순수한 검정"은 모든 잉크를 사용하지 않고 단일 잉크로 만들어지기 때문에 인쇄물이나 디지털 화면에서 문제가 발생할 수 있다. 인쇄 공정에서는 정확한 색상 표현을 위해 여러 가지 잉크를 혼합해야 한다. "순수한 검정"을 사용하면 출력물에서 페이드 되거나 색조가 변할 수 있다. 


5. 배터리 수명에 영향을 줄 수 있다.

더 많은 에너지를 소비하므로 배터리 수명에도 영향을 줄 수 있다.  


6. 접근성에 문제가 생길 수도 있다.

3번과 이어질 수도 있는데 "순수한 검정"은 시각 장애인이나 저시력을 가진 사람들에게 콘텐츠를 제공하는 데 어려움을 줄 수 있다. 저시력자는 빛 반사와 빛 흡수의 부담을 줄이기 위해 낮과 밤에도 어두운 환경을 선호한다고 한다. 다크모드를 만들 때 이런 점까지 고려해서 제작해야 한다.


그렇다면 어떨 때 퓨어블랙을 써야 할까?

1. 강조하고 싶은 콘텐츠가 있을 때

2. 브랜드(서비스)의 성격을 표현하고 싶을 때

3. 하드웨어와의 조화를 이루어야 할 때


저 2번의 대표주자가 바로 애플이다. 애플이 힙스럽고 쨍한 느낌을 받는 이유 중에 하나는 순수한 검정을 사용하기 때문이다. 하지만 개인적으론 애플의 퓨어블랙을 좋아하지는 않는다. 물론 애플워치의 베젤 때문에 그렇다고는 하지만 워치 이외의 디바이스에서 꼭 퓨어블랙을 사용해야 할까 하는 의문이 든다. 구글 머티리얼 디자인 가이드는 #121212의 검은색을 권장하고 있다.


웬만하면 콘텐츠에서는 순수한 검정을 쓰지 말자.




참고자료


매거진의 이전글 예측할 수 있는 디자인

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari