UI 디자인 가이드 : 디자이너가 쓰는 블랙

#000000을 쓰지 않아요.

블랙&화이트

어쩌면 모든 디자인의 기본이 되는 색이죠.

정확하게는 '색'은 아니지만요.

검은색은 무채색이며, 가장 어두운 색입니다. RGB(0,0,0) 또는 #000000으로 표현됩니다.

지금 제가 쓰고 있는 브런치글의 경우도 흰 바탕에 검은 글씨를 쓰고 있네요.

하지만 막상 팔레트를 찍어보면 #000000은 아니라는 걸 알 수 있어요.

브런치 본문 컬러코드

UI 디자이너는 화면에 순수한 검은색을 쓰지 않아요.

배경이나 타이포 그래피를 사용할때 #000000을 사용하면, 눈의 피로도가 높아지기 때문인데요.

1. 강한 대비에서 오는 눈의 피로도

블랙과 화이트의 대비는 꽤 극단적인데요. 자연물에서 우리가 검은색이라고 생각하는 것들도 사실은 완전한 검은색이 아닌 경우가 많습니다. 블랙앤화이트의 대비가 높은만큼 가독성이 좋다고 생각하지만 눈의 피로도도 그만큼 높아집니다.

2. 빛번짐(Halation)

쨍한 색상이 대비가 되면 텍스트 주변이 뿌옇게 보이는 빛번짐현상이 나타나게 됩니다.

이런 현상은 검은 배경에 흰색 텍스트일수록 두드러지게 나타나는 현상이기도 합니다.

3. 실제와의 이질감

일상적으로 주변에서 만나는 검은 물건들 역시 약간의 빛 반사를 가지고 있어, 검은색이라기보다 어두운 회색에 가깝고, 약간의 틴트를 포함하기때문에 사실 어두운 회색보다는 약간의 색이 섞인 경우가 많습니다.

Pure Black이야 말로 자연에서 찾기 어려운 색이기 때문입니다.

아래 예시 이미지를 보세요. 두 개의 같은 동상에 반타블랙을 칠했을 뿐인데, 오른쪽은 너무 검어서 입체감이나 깊이감을 전혀 알 수 없죠. 마치 평면인 것처럼요.

반타블랙을 칠한 동상

반타블랙(Vantablack)은 세계에서 2번로 어두운 색이라는 물질이에요. 빛의 흡수율이 99.965%로 그림자가 생기지 않는 순수한 블랙이라고 불리기도 하는데요. 이처럼 아주 어두운 검정, 입체감이 없는 검정색은 자연에 존재하지 않아 이질감을 느껴지게 하는거죠.

4. 디자인적 깊이의 표현

웹이 아닌 인쇄디자이너들도 K100을 사용하기보다 K100+C20+M20과 같이 특정 비율로 조합한 리치블랙이라는 컬러를 사용해 더 고급스러운 블랙을 표현하는데요.

웹이나 모바일 상에서도 #000000을 사용하지 않고 다양한 명도의 검은 계열을 사용한다면, 디자인에 깊이와 텍스처를 더할 수 있습니다.

실제 서비스들은 어떨까요?

실제 다양한 서비스들에서도 #000000보다는 고유의 블랙을 사용하고 있습니다.

지금 글을 올리고 있는 브런치 텍스트 블랙의 코드값은 #333333입니다.

Naver 검색결과의 본문 텍스트는 #424242

Apple Store 제품명 컬러는 #1D1D1F

Youtube 다크모드의 배경컬러는 #0F0F0F

디자인에 적용할 수 있는다양한 블랙 색상 코드가이드

다양한 블랙이라는 말이 꽤 흥미롭죠.

하시만 실제 UI디자인을 하시는 분들이라면, 공감하실겁니다.

순수한 Black보다는 포인트 컬러와 조화로운 아주 어두운 컬러의 타이포를 쓰고 있다는 점을요.

블랙에 레드 한 방울, 또는 퍼플 한방울을 담아 은은하게 디자이너의 미감을 표현할 수 있어요.

사용자가 보기에 더 편안한 건 물론이지요.

다양한 블랙으로 디자이너의 디테일을 표현해봐요. :)