시각적 위계

화면에 놓인 것들이 다 같은 크기와 같은 굵기면 사용자는 어디서 시작해야 할지 모릅니다. 읽을 순서가 없으니 왼쪽 위부터 차례로 훑게 되고, 그 과정에서 지금 해야 할 일과 상관없는 것들을 다 지나칩니다. 반대로 전부 크고 진하게 만들면 강조가 서로를 지웁니다. 다섯 개가 다 굵으면 굵다는 사실이 아무 정보도 주지 않습니다.

페이지덱의 문서 공유 화면이 앞쪽 경우였습니다. 민서가 만든 초안에는 공유하기, 링크 복사, 권한 변경, 취소 네 개가 같은 크기와 같은 회색으로 나란히 있었습니다. 여덟 명에게 문서를 동료에게 공유해 보라고 시키자 다섯 명이 링크 복사를 먼저 눌렀고, 그중 셋은 화면을 위아래로 두 번 훑고 나서야 공유하기를 찾았습니다. 네 개가 다 같은 무게였으니 사용자로서는 순서대로 하나씩 확인하는 수밖에 없었습니다.

시각적 위계는 그 순서를 화면이 먼저 말하게 만드는 일입니다. 만드는 쪽이 이 화면에서 무엇을 먼저 보게 할지 정하고, 그 순서를 크기와 색과 자리의 차이로 옮깁니다. 사용자가 읽는 순서를 우연에 맡기지 않고 설계의 대상으로 삼는 것입니다.

볼 순서를 먼저 정하고 그 순서를 눈에 보이는 차이로 옮기는 방식입니다. 순서가 정해지지 않은 채 크기부터 만지면 그때그때 눈에 띄는 것을 키우게 되고, 결과적으로 화면마다 기준이 달라집니다.

1. 순서를 문장으로 적습니다. 이 화면에서 1순위는 무엇이고 2순위는 무엇인지 말로 적어 둡니다. 공유 화면이라면 1순위는 공유 대상 입력, 2순위는 공유하기 버튼, 3순위는 권한 설정입니다. 적어 두면 리뷰에서 무엇을 두고 다투는지가 분명해집니다.
2. 차이를 만드는 수단을 고릅니다. 다섯 가지가 흔히 쓰입니다. 크기는 가장 직접적이고, 굵기는 같은 크기 안에서 차이를 만들고, 대비는 밝기 차이로 눈을 끌고, 자리는 위쪽과 왼쪽이 먼저 읽히는 성질을 씁니다. 여백은 주변을 비워 하나를 도드라지게 만드는 수단입니다.
3. 단계를 셋이나 넷으로 맞춥니다. 위계를 여섯 단계로 나누면 3단계와 4단계의 차이를 사용자가 구분하지 못합니다. 구분되지 않는 단계는 위계가 아니라 그냥 다른 크기입니다.
4. 한 단계에 수단을 겹칩니다. 글자만 2픽셀 키운 제목은 옆에 두고 봐야 알아챌 수 있습니다. 같은 제목을 키우고 굵게 하고 위에 여백을 더 주면 셋이 함께 작동해 한눈에 구분됩니다.
5. 확인합니다. 화면을 흐리게 만들어 보면 형태만 남는데, 그 상태에서 가장 먼저 눈에 들어오는 것이 1순위와 같아야 합니다. 색을 흑백으로 바꿔 보는 것도 같은 용도입니다. 색만으로 만든 위계는 흑백에서 사라지고, 색을 구분하기 어려운 사용자에게도 같은 일이 일어납니다.

정렬은 위계를 만드는 수단은 아니지만 위계가 보이게 하는 바탕입니다. 요소들의 기준선이 어긋나 있으면 크기 차이가 위계가 아니라 실수처럼 읽힙니다.

가장 자주 쓰이는 자리는 화면 초안을 검토할 때입니다. 리뷰에서 묻는 질문이 취향 문제가 아니라 순서 문제가 됩니다. 이 화면의 1순위가 무엇인지 묻고, 화면을 흐리게 보았을 때 그것이 먼저 보이는지 확인하면 논의가 5분에 끝납니다.

나머지 세 자리는 이렇습니다.

1. 처음 들어온 화면 — 아무 데이터도 없는 빈 화면에서는 다음에 할 일 하나만 도드라져야 합니다. 여기서 선택지를 셋 이상 같은 무게로 두면 새로 온 사람은 아무것도 고르지 않고 나갑니다.
2. 오류와 알림 — 읽고 나서 무언가 해야 하는 문구는 주변보다 위계가 높아야 합니다. 다만 색 하나로만 올리면 안 됩니다. 빨간 글씨는 흑백 화면과 색약 사용자에게서 사라집니다.
3. 숫자를 보여 주는 화면 — 데이터 시각화에서도 같은 원리가 걸립니다. 숫자를 그림으로 바꿔 이해를 돕는 일인데, 차트 하나에 선이 여덟 개면 모두가 같은 무게로 보여 아무 메시지도 남지 않습니다. 말하려는 선 하나만 진하게 두고 나머지를 옅게 깔면 같은 데이터가 문장이 됩니다.

주의할 자리도 있습니다. 한 화면에서 1순위를 셋 이상 두면 위계가 없어집니다. 여러 팀이 각자 자기 기능을 강조해 달라고 요청한 화면이 대개 이렇게 됩니다.

"이 화면 1순위가 뭐죠? 셋이 다 같은 크기로 보여요."

무엇을 먼저 보게 할지 정하지 않았다는 지적입니다.

"흐리게 놓고 보면 취소 버튼이 제일 먼저 보이는데요."

강조가 의도와 반대로 걸려 있다는 뜻입니다.

"색만 빨갛게 하지 말고 크기도 같이 올려 주세요."

한 수단만으로는 위계가 약하고 색은 일부 사용자에게 전달되지 않는다는 요청입니다.

민서가 공유 화면을 다시 만들었습니다. 공유하기만 진한 배경의 버튼으로 두고, 링크 복사는 테두리만 있는 버튼으로 낮추고, 권한 변경은 글자 링크로 더 낮췄습니다. 취소는 오른쪽 아래 회색 글자로 옮겼습니다. 네 개의 크기를 올린 것이 아니라 셋을 내린 것입니다.

같은 과업을 다시 여덟 명에게 시켰더니 여덟 명 모두 공유하기를 먼저 눌렀습니다. 화면을 훑는 횟수도 줄었습니다. 민서가 리뷰에 가져간 것은 새 화면 그림이 아니라 흐리게 처리한 이미지 두 장이었습니다.

중요한 것을 크게 만들면 된다고 보는 경우가 가장 많습니다. 위계를 만들라는 말이 강조하라는 말로 들리니 자연스럽습니다. 그런데 위계는 절대 크기가 아니라 차이로 생깁니다. 1순위를 키우는 것과 나머지를 낮추는 것이 같은 결과를 내고, 화면이 좁을 때는 뒤쪽이 대개 낫습니다. 키우는 쪽만 반복하면 화면의 모든 요소가 조금씩 커지다가 처음 상태로 돌아갑니다. 공유 화면에서 실제로 한 일도 하나를 키운 것이 아니라 셋을 내린 것이었습니다.

위계를 취향의 문제로 다루는 것도 흔합니다. 어느 쪽이 보기 좋냐는 질문으로 리뷰가 흘러가기 때문입니다. 하지만 이 원리는 판정할 수 있습니다. 사용자가 의도한 것을 먼저 눌렀는지, 화면을 몇 번 훑었는지로 확인됩니다. 취향으로 다루면 목소리 큰 사람의 의견이 이기고, 다음 화면에서 같은 논쟁이 처음부터 다시 시작됩니다.