어포던스

밀어야 하는 문 앞에서 손잡이를 당기고 있는 사람은 그 문을 잘못 읽은 것이 아니라 문이 잘못 말한 것입니다. 손잡이가 달려 있으면 손은 저절로 당깁니다. 그런데 그 문이 실제로는 밀어야 열린다면, 만든 쪽은 "미시오" 라는 종이를 붙여 사람의 손을 고칩니다. 안내문이 붙은 문은 대부분 이 순서로 생깁니다.

화면에서도 똑같은 일이 벌어집니다. 페이지덱에서 사용성 테스트를 돌리던 날, 민서는 참가자 여덟 명에게 문서를 다른 팀원과 공유해 보라고 시켰습니다. 화면 오른쪽 위에 "공유" 라는 글자가 회색으로 놓여 있었는데, 세 명이 그 글자를 지나쳐 메뉴를 뒤지다가 결국 포기했습니다. 한 참가자는 시간이 다 된 뒤에 "그게 눌리는 건 줄 몰랐어요. 그냥 설명인 줄" 이라고 말했습니다.

어포던스는 이 상황을 사람의 실수가 아니라 물건의 성질로 옮겨 놓은 말입니다. 사람이 덜 배워서 못 쓴 것이 아니라 그 물건이 자기가 무엇을 할 수 있는지 말해 주지 않았다고 보는 쪽입니다. 시점을 옮기면 고칠 자리도 옮겨 갑니다. 안내 문구를 더 쓰는 대신 생김새를 고치는 일이 먼저가 됩니다.

어포던스는 물건 혼자 만드는 성질이 아니라 그 물건과 쓰는 사람의 몸이 만나는 자리에서 생깁니다. 손잡이가 어포던스를 갖는 이유는 사람에게 쥘 수 있는 손이 있어서이고, 평평한 판이 밀기를 불러내는 이유는 손바닥으로 밀 수 있어서입니다. 같은 손잡이도 손이 닿지 않는 높이에 있으면 그 사람에게는 어포던스가 없습니다.

화면에는 잡을 것도 밀 것도 없습니다. 유리판 위의 색과 모양뿐입니다. 그래서 화면의 어포던스는 대부분 현실에서 빌려 온 것입니다.

1. 테두리와 그림자로 요소를 바닥에서 띄웁니다. 떠 있는 것은 누를 수 있다는 감각이 종이와 실물 버튼에서 넘어온 것입니다.
2. 색을 배경과 확실히 다르게 둡니다. 주변 글자와 같은 색이면 그 요소는 읽는 것으로 읽힙니다.
3. 여백으로 손가락만 한 영역을 확보합니다. 누를 수 있는 넓이가 보이면 누를 수 있는 것으로 보입니다.
4. 포인터 모양을 손가락으로 바꾸고, 올렸을 때 색이 변하는 호버 상태를 줍니다. 다만 이 단서는 마우스에만 있고 터치 화면에는 없어서, 여기에만 기대면 휴대폰에서 단서가 통째로 사라집니다.

민서가 앞의 테스트 뒤에 한 일은 문구를 바꾸는 쪽이 아니었습니다. "공유" 에 테두리를 두르고 배경색을 넣어 버튼 모양으로 바꿨습니다. 같은 과업을 다시 시키자 여덟 명 전부 5초 안에 눌렀습니다. 글자는 한 자도 바뀌지 않았습니다.

반대 방향으로 잘못되는 일도 흔합니다. 안내용 그림이나 통계 카드가 버튼처럼 생겼는데 눌러도 아무 일이 없으면, 사람은 자기가 잘못 눌렀다고 생각하지 않고 제품이 고장 났다고 생각합니다. 이쪽은 있지도 않은 가능성을 광고한 경우입니다.

시안을 검토하는 자리에서 어포던스는 질문 한 줄로 나타납니다. "이게 눌리는 건지 설명 없이 알 수 있나요." 이 질문이 특히 자주 걸리는 자리가 넷 있습니다.

첫째는 버튼과 글자의 경계입니다. 화면 하나에 눌리는 것과 읽는 것이 섞여 있는데 생김새가 비슷하면, 사람은 하나씩 눌러 보며 확인합니다.

둘째는 아무것도 없는 화면입니다. 문서 목록이 비어 있을 때 빈칸만 보여 주면 여기서 무엇을 할 수 있는지가 화면에 없습니다. 가운데에 "새 문서 만들기" 버튼 하나를 두는 판단이 여기서 나옵니다.

셋째는 흔적이 남지 않는 조작입니다. 끌어다 놓기로 순서를 바꿀 수 있다는 사실은 화면 어디에도 적혀 있지 않습니다. 항목 왼쪽에 점 여섯 개짜리 손잡이 표시를 붙이는 관습이 그래서 생겼습니다.

넷째는 지금은 쓸 수 없는 요소입니다. 비활성 상태의 버튼을 흐리게 만드는 것은 누를 수 있다는 신호를 일부러 걷어 내는 일입니다. 다만 흐리기만 하고 왜 못 쓰는지를 알려 주지 않으면 사람은 계속 누릅니다.

접근성을 함께 보면 이 성질이 사람마다 다르게 존재한다는 점이 분명해집니다. 색 대비만으로 버튼을 표시한 화면은 색을 구분하기 어려운 사람에게는 단서가 없는 화면입니다. 화면 낭독기를 쓰는 사람에게는 그림자나 테두리가 아예 전달되지 않아서, 그 요소가 버튼이라는 사실이 코드 안에 적혀 있어야 합니다.

"이거 눌리는 건지 모르겠어요. 어포던스가 없습니다."

생김새만으로는 조작할 수 있는 요소인지 판단이 안 된다는 지적입니다.

"카드 전체가 눌리는데 단서가 호버에만 있어요. 휴대폰에서는 아무 표시가 없습니다."

마우스가 없는 환경에서 그 단서가 통째로 사라진다는 뜻입니다.

"여기는 어포던스가 거짓으로 붙었어요. 버튼처럼 생겼는데 눌러도 아무 일이 없습니다."

조작할 수 있는 것처럼 보이지만 실제로는 아니라서 사람이 고장으로 받아들인다는 말입니다.

페이지덱에서는 민서와 태오가 이 말을 주로 씁니다. 민서는 시안 리뷰에서, 태오는 구현 중에 씁니다. 지난 분기에는 한 화면에 눌리는 요소가 일곱 개인데 생김새가 네 가지로 갈려 있었습니다. 민서가 디자인 시스템에 규칙을 하나 넣어 정리했습니다. 그림자는 눌리는 요소에만 쓰고, 읽기만 하는 카드는 테두리 없이 배경색만 다르게 둔다는 규칙입니다. 이후 리뷰에서 같은 지적이 줄었습니다.

어포던스를 화면에 붙인 시각 단서와 같은 말로 쓰는 경우가 가장 흔합니다. "어포던스를 넣자" 는 말이 실제로는 테두리를 그리자는 뜻으로 오가기 때문에 자연스럽게 굳는 오해입니다. 하지만 원래 뜻은 그 요소가 무엇을 할 수 있느냐는 가능성 자체이고, 그 가능성을 알려 주려고 얹은 표시는 시그니파이어라는 다른 이름을 갖습니다. 둘을 한 단어로 뭉치면 대화가 테두리를 그릴지 말지로 좁아지고, 이 요소가 애초에 무엇을 할 수 있어야 하는지는 아무도 묻지 않게 됩니다.

많을수록 좋다고 읽는 것도 같은 뿌리의 오해입니다. 화면의 모든 것을 눌리게 생기도록 만들면 사람은 어디를 눌러야 할지 판단하지 못합니다. 버튼이 여섯 개인 화면에서는 무엇도 눈에 띄지 않습니다.