대비

시안을 놓고 말이 엇갈릴 때 가장 자주 나오는 문장은 "뭔가 안 보여요" 입니다. 버튼이 있긴 한데 눈에 안 들어오고, 제목이 있긴 한데 본문처럼 읽힙니다. 만든 사람은 다 넣었다고 하고 보는 사람은 못 찾겠다고 하는데, 양쪽 다 화면을 정확히 보고 있습니다.

이 대화가 풀리지 않는 이유는 지적이 취향의 말로 나오기 때문입니다. "좀 더 예쁘게" 나 "심심해요" 같은 말에는 고칠 자리가 없습니다. 디자이너가 색을 바꿔 다시 가져가면 이번에는 다른 사람이 다른 말을 하고, 세 번쯤 오가면 처음보다 나빠진 시안이 남습니다.

대비는 이 문제를 눈의 문제로 옮겨 놓은 말입니다. 사람은 화면을 왼쪽 위부터 차례로 읽지 않고 주변과 다른 것을 먼저 봅니다. 그러면 "안 보인다" 는 말은 취향이 아니라 차이가 부족하다는 뜻이 되고, 고칠 자리도 정해집니다. 제목을 키울지, 버튼 색을 배경에서 떼어낼지, 나머지를 흐리게 만들지 중에서 고르면 됩니다.

주변과 다르게 만들면 눈에 띄고, 얼마나 다른지가 얼마나 띄는지를 정합니다. 차이를 만드는 축은 화면에서 주로 넷입니다.

1. 크기입니다. 같은 검은 글자라도 14픽셀과 24픽셀은 다른 무게로 읽힙니다. 위계를 만드는 가장 정직한 방법이고, 화면이 좁아져도 차이가 유지됩니다.
2. 굵기입니다. 크기를 그대로 두고 굵기만 올리면 자리를 더 차지하지 않고 강조가 됩니다. 표의 합계 행처럼 줄 수가 정해진 자리에서 씁니다.
3. 밝기입니다. 글자색과 배경색이 얼마나 떨어져 있는지입니다. 흰 배경의 진한 회색과 연한 회색은 같은 크기여도 하나는 본문으로, 하나는 보조 설명으로 읽힙니다.
4. 색상입니다. 회색조 화면에서 한 곳만 파란색이면 그 자리가 먼저 보입니다. 다만 색상만으로 만든 차이는 흑백으로 출력하거나 색각 이상이 있는 사람이 보면 사라지므로 크기나 굵기와 함께 씁니다.

어느 축을 쓰든 규칙은 하나입니다. 차이는 크게 벌리거나 아예 없애야 뜻이 생깁니다. 본문이 14픽셀인데 제목이 16픽셀이면 둘 다 본문처럼 읽히고, 제목을 24픽셀로 올리면 그때부터 제목으로 읽힙니다. 2픽셀 차이는 사용자에게 아무 신호도 주지 못하면서 화면만 어수선하게 만듭니다. 애매하게 둘 바에는 똑같이 맞추는 편이 낫습니다.

또 하나는 강조가 상대적이라는 점입니다. 한 화면에서 모든 것을 강조하면 아무것도 강조되지 않습니다. 버튼 다섯 개를 전부 파란색으로 채우면 사용자는 어디를 눌러야 할지 고민하게 되고, 그중 하나만 채우고 나머지를 테두리만 남기면 눌러야 할 자리가 바로 보입니다. 강조는 올리는 일이기도 하지만 주변을 내리는 일이기도 합니다. 여백을 늘려 주변을 비우는 것도 같은 효과를 냅니다.

화면에서 다음 행동을 고르게 만드는 자리, 상태를 알려 주는 자리, 읽을 수 있는지를 확인하는 자리에서 주로 다룹니다.

첫째, 버튼과 링크입니다. 한 화면에 주요 행동 하나만 강조색으로 채웁니다. 회원가입 화면이라면 가입 버튼만 채우고 로그인 안내는 글자 링크로 둡니다. 둘 다 채우면 화면이 두 갈래로 갈라집니다.

둘째, 정보의 층을 나누는 자리입니다. 목록 한 줄에 제목, 작성자, 수정 시각이 함께 들어가면 셋을 같은 크기와 같은 색으로 두지 않습니다. 제목은 진하게, 나머지는 한 단계 흐린 회색으로 내려 두면 훑는 사람은 제목만 따라 읽고 필요할 때만 아래를 봅니다. 타이포그래피에서 정한 크기와 굵기 단계가 실제로 하는 일이 이것입니다.

셋째, 읽을 수 있느냐를 확인하는 자리입니다. 연한 회색 글자는 디자이너의 넓고 밝은 화면에서는 멀끔해 보이지만, 밖에서 휴대폰으로 보면 사라집니다. 여기서는 눈으로 고르지 않고 명도 대비를 수치로 재서 기준을 넘는지 확인합니다. 취향으로 정할 수 없는 영역이 따로 있다는 뜻입니다.

넷째, 다크 모드를 만들 때입니다. 밝은 화면에서 잘 보이던 색이 어두운 배경에서는 묻히거나 너무 튑니다. 두 테마를 함께 가져가려면 색을 하나씩 고르는 대신 배경과의 차이를 기준으로 짝을 만들어 디자인 토큰에 넣어 둡니다.

"여기 대비가 부족해서 이 버튼이 안 보여요. 나머지를 테두리만 남기죠."

강조를 올리는 대신 주변을 내려 차이를 만들자는 제안입니다.

"제목이랑 본문 크기가 두 단계는 벌어져야 해요."

지금 차이가 어중간해서 위계가 안 생긴다는 지적입니다.

"이 회색은 대비가 기준 미달이에요. 한 단계 진한 값으로 갈게요."

눈으로 판단하지 않고 수치로 확인한 결과를 반영하겠다는 말입니다.

페이지덱의 설정 화면 시안을 두고 민서와 태오가 나눈 대화가 전형적입니다. 민서가 만든 화면에는 저장 버튼과 취소 버튼이 나란히 있는데 둘 다 회색이었습니다. 태오가 어느 쪽이 저장인지 매번 글자를 읽게 된다고 말했고, 민서는 저장만 강조색으로 채우고 취소는 글자만 남겼습니다. 버튼 두 개의 위치도 크기도 그대로지만 화면을 열었을 때 눈이 먼저 가는 자리가 달라졌습니다.

같은 화면을 지현이 볼 때 묻는 것은 색이 예쁜지가 아니라 순서입니다. 사용자가 첫 번째로 해야 하는 일이 정해져 있으면 대비를 어디에 줄지는 따라 나옵니다. 순서 없이 색부터 고르면 회의는 다시 취향 이야기로 돌아갑니다.

대비를 색을 진하게 만드는 일로만 읽는 경우가 많습니다. 강조라는 말이 색과 가장 먼저 붙고, 색은 손대기도 쉬워서 그렇습니다. 그런데 색만 올리면 강조할 것이 늘어날 때마다 색이 하나씩 늘어나고, 화면에 빨강 파랑 초록이 동시에 뜨면 어느 것도 먼저 읽히지 않습니다. 크기와 굵기와 여백은 색을 더하지 않고도 차이를 만들고, 흑백으로 출력해도 살아남습니다. 색은 이미 구분된 것에 의미를 얹는 쪽에 가깝습니다.

반대쪽 오해는 대비를 높이면 촌스러워진다는 생각입니다. 연한 회색으로 정리된 화면이 세련돼 보이는 것은 사실이라 값을 낮추고 싶어집니다. 하지만 그렇게 만든 화면은 대개 밝은 실내 모니터에서만 세련됩니다. 화면 밝기를 절반으로 낮추거나 햇빛 아래에서 열면 버튼의 글자부터 사라집니다. 정돈된 인상은 대비를 낮춰서가 아니라 강조하는 자리를 줄여서 만듭니다. 차이를 줄 자리를 하나로 정하고 나머지를 가지런히 맞추면 값을 낮추지 않고도 같은 인상이 나옵니다.