시그니파이어

시안 검토 자리에서 가장 자주 나오는 말은 이게 눌리는 건지 모르겠다는 말입니다. 한동안 이 문제를 어포던스가 없다는 한마디로 불렀습니다. 어포던스는 생김새만 보고 무엇을 할 수 있는지 짐작하게 만드는 성질입니다. 그런데 그 한마디에는 전혀 다른 두 사정이 섞여 있습니다. 정말로 누를 수 없는 경우와, 누를 수 있는데 그 사실이 화면에 드러나지 않은 경우입니다. 앞쪽은 기능을 만들어야 하고 뒤쪽은 표시만 붙이면 되는데, 같은 말로 부르면 논의가 어디로 가야 하는지부터 갈립니다.

밀어야 열리는 문에 붙은 미시오 종이가 이 차이를 보여 줍니다. 그 문은 원래 밀 수 있었고, 성질은 처음부터 있었는데 사람에게 전달되지 않았을 뿐입니다. 종이가 하는 일은 없던 기능을 만드는 것이 아니라 이미 있던 기능을 알리는 것이고, 시그니파이어가 그 종이에 해당합니다.

화면에서는 이 구분이 문보다 더 중요합니다. 문에는 손잡이와 판판한 면이라는 몸이 있지만 화면에는 유리판 위의 색과 모양밖에 없습니다. 코드에 눌리게 적어 두는 일과 사람이 그것을 알아채는 일이 갈라져 있어서, 단서를 하나하나 일부러 얹어야 합니다.

단서는 붙는 방식에 따라 셋으로 나뉩니다. 앞의 둘은 조작하기 전부터 보이고, 마지막 하나는 조작을 시작한 뒤에만 나타납니다.

1. 생김새로 붙이는 단서입니다. 테두리, 배경색, 그림자, 밑줄이 여기 들어갑니다. 링크에 밑줄을 긋는 관습이 가장 오래된 예이고, 버튼을 배경색으로 칠해 바닥에서 띄우는 것도 같은 종류입니다. 훑기만 해도 전달되기 때문에 첫 단서로 가장 힘이 셉니다.
2. 글자와 기호로 붙이는 단서입니다. 미시오 종이에 해당하는 쪽입니다. 버튼 안에 넣는 동사, 펼칠 수 있다는 뜻의 아래쪽 화살표, 끌어서 옮길 수 있다는 뜻으로 항목 왼쪽에 붙이는 점 여섯 개짜리 손잡이 표시가 그렇습니다.
3. 조작하는 동안에만 나타나는 단서입니다. 포인터가 손가락 모양으로 바뀌는 것과 올렸을 때 색이 변하는 호버 상태가 여기 듭니다. 이미 손을 댄 사람에게만 보이므로 처음 알리는 일에는 쓸 수 없습니다.

세 종류를 어디에 얼마나 쓸지는 규칙 셋으로 정합니다. 첫째, 같은 종류에는 같은 단서를 붙입니다. 한 화면에서 파란 글씨가 링크였다면 다른 화면에서도 링크여야 합니다. 화면마다 다르면 사람은 하나씩 눌러 보며 확인합니다.

둘째, 없는 가능성을 광고하지 않습니다. 안내용 그림이나 숫자 카드가 버튼처럼 생기면 사람은 눌러 보고, 아무 일도 없으면 제품이 고장 났다고 생각합니다.

셋째, 단서 하나에만 기대지 않습니다. 색만으로 표시한 버튼은 색을 구분하기 어려운 사람에게는 없는 것과 같고, 호버에만 기대면 터치 화면에서 단서가 사라집니다. 색과 테두리와 글자를 겹쳐 두면 하나가 빠져도 남은 것이 일합니다.

이 말이 실제로 쓰이는 자리는 넷입니다.

첫째는 시안 검토입니다. 화면 한 장을 놓고 눌리는 것과 읽는 것을 설명 없이 구분할 수 있는지 봅니다. 페이지덱에서는 오른쪽 위에 회색 글자로 놓여 있던 공유를 참가자 여덟 명 중 셋이 지나쳤습니다. 민서가 문구 대신 테두리와 배경색을 넣어 버튼 모양으로 바꾸자 여덟 명 전부 5초 안에 눌렀습니다. 글자는 한 자도 바뀌지 않았습니다.

둘째는 디자인 시스템을 정리하는 자리입니다. 재사용할 규칙과 부품을 한 기준으로 묶는 일이고, 단서를 부품에 박아 두는 자리입니다. 버튼이 어떤 테두리와 배경을 갖는지, 비활성 상태에서 무엇을 걷어 내는지를 한 번 정해 두면 화면마다 다시 판단하지 않습니다.

셋째는 흔적이 남지 않는 조작을 도입할 때입니다. 끌어다 놓아 순서를 바꿀 수 있다는 사실은 화면 어디에도 적혀 있지 않고, 길게 누르기와 좌우로 밀기도 그렇습니다. 단서를 따로 얹지 않으면 기능이 있어도 발견되지 않습니다.

넷째는 접근성을 확인하는 자리입니다. 화면 낭독기를 쓰는 사람에게는 그림자와 테두리가 전달되지 않아서, 그 요소가 버튼이라는 사실이 코드 안에 적혀 있어야 소리로 옮겨집니다.

피드백과는 시간 순서로 나뉩니다. 피드백은 조작에 대한 반응을 그 자리에서 알려 주는 것이라 손을 댄 뒤에 옵니다. 앞이 없으면 시작하지 못하고, 뒤가 없으면 통했는지 몰라 같은 버튼을 두 번 누릅니다.

"기능은 있는데 시그니파이어가 없어요. 아무도 여기를 누를 생각을 못 합니다."

만들 것이 아니라 알릴 것이 빠졌다는 뜻입니다.

"카드가 버튼처럼 생겼는데 안 눌려요. 단서를 걷어 내죠."

없는 가능성을 광고하고 있으니 생김새를 낮추자는 제안입니다.

"이 단서가 호버에만 있으면 휴대폰에서는 없는 거나 같습니다."

마우스가 없는 환경에서 단서가 사라진다는 지적입니다.

페이지덱에서는 시안 검토를 시작할 때 화면을 흑백으로 한 번 바꿔 봅니다. 색이 빠져도 눌리는 것이 구분되면 단서가 색 하나에만 얹혀 있지 않다는 뜻입니다. 지난번에는 문서 목록의 상태 표시가 흑백에서 똑같아져서, 민서가 글자 앞에 작은 표시를 붙였습니다.

단서를 많이 붙일수록 좋다고 여기는 경우가 많습니다. 못 찾는 문제가 단서로 풀렸으니 더 넣으면 더 나아질 것 같습니다. 하지만 모든 요소가 테두리와 그림자를 가지면 어느 것이 중요한 조작인지가 다시 사라집니다. 강조된 버튼이 한 화면에 다섯 개면 무엇을 먼저 누를지 판단해야 하고, 그 부담은 아무 단서도 없을 때와 크게 다르지 않습니다. 가장 강한 단서는 하나만 두고 나머지는 한 단계씩 낮춥니다.

단서를 걷어 내는 것이 세련된 선택이라고 보는 것도 흔합니다. 테두리와 그림자를 지운 화면은 시안으로 볼 때 정돈되어 보입니다. 문제는 시안을 보는 사람이 어디가 눌리는지 이미 안다는 데 있습니다. 처음 온 사람에게 그 화면은 글자만 놓인 판입니다. 걷어 낼 때는 덜 쓰는 것을 한 단계 뒤로 미루는 점진적 노출과 묶어 쓰고, 자주 쓰는 조작의 단서는 남깁니다.