클릭 더미

화면을 다 그려 놓고도 실제로 써 보기 전에는 모르는 것이 있습니다. 순서가 말이 되는지, 중간에 사람이 어디서 멈추는지입니다. 그림만으로는 이 둘이 잡히지 않습니다.

페이지덱에서 공유 설정 화면을 고칠 때가 그랬습니다. 민서가 화면 열두 장을 회의실 화면에 띄워 놓고 "여기서 이 버튼을 누르면 이쪽으로 갑니다" 하고 넘겨 가며 설명했고, 다들 괜찮다고 했습니다. 태오가 이 주 뒤에 만들고 보니 권한을 잘못 고른 사람이 되돌아올 경로가 어디에도 없었습니다. 설명할 때는 민서가 말로 이어 붙였기 때문에 아무도 그 구멍을 보지 못했습니다.

사용자에게 보여 줄 때는 문제가 더 큽니다. 정지한 그림을 놓고 "이 버튼을 누르면 다음 화면이 뜬다고 치고" 라고 말로 채우면, 참가자는 안내를 들으면서 화면을 봅니다. 혼자 쓸 때 어디서 헤매는지를 보려고 부른 자리인데 옆에서 계속 길을 알려 주는 셈입니다.

클릭 더미는 그 말을 빼기 위해 만드는 것입니다. 누르면 넘어가는 동작만 붙여 두면 설명하는 사람이 필요 없어지고, 흐름의 구멍은 따라가다 막히는 자리에서 저절로 드러납니다. 와이어프레임처럼 배치만 그린 정지 도면과 갈리는 지점이 여기입니다.

시나리오 하나를 끝까지 따라갈 수 있을 만큼의 화면과, 그 화면들을 잇는 연결이 최소 구성입니다. 실제로 챙기는 것은 여섯 가지입니다.

1. 화면. 확인하려는 과제 하나에 필요한 것만 만듭니다. 공유 설정을 고치는 흐름이라면 목록 화면, 설정 화면, 권한 선택, 확인, 완료까지 여덟에서 열다섯 장 사이입니다. 여기서 화면 수가 계속 늘면 질문이 정해지지 않았다는 신호입니다.
2. 연결. 어느 영역을 누르면 어느 화면으로 가는지를 지정합니다. 화면 한 장에 누를 수 있는 곳을 서너 개만 두고, 나머지는 눌러도 반응하지 않게 둡니다.
3. 시작점과 과제 문장. 어느 화면에서 시작해 무엇을 해 달라고 할지를 한 문장으로 적어 둡니다. "외부 사람에게 이 문서를 읽기 전용으로 공유해 보세요" 처럼 목적만 주고 방법은 주지 않습니다.
4. 더미 데이터. 화면에 들어갈 이름과 숫자를 고정해 둡니다. 실제로 있을 법한 값을 씁니다. 문서 제목이 전부 "제목 없음" 이면 참가자가 무엇을 고르는 화면인지 헷갈립니다.
5. 막다른 길 처리. 정해 둔 경로 밖을 누르면 아무 일도 일어나지 않으니, 참가자가 고장 난 줄 알고 멈춥니다. 그 자리에 "이 화면은 여기까지 만들어져 있습니다" 같은 안내를 두거나, 진행자가 넘어갈 신호를 정해 둡니다.
6. 안 되는 것 목록. 입력한 글자는 저장되지 않고, 검색은 동작하지 않으며, 목록의 숫자는 언제나 같다는 사실을 보는 사람에게 미리 알려 둡니다.

충실도는 따로 정합니다. 상자와 선만 있는 로우 파이 프로토타입에 연결만 붙여도 클릭 더미이고, 색과 문구까지 다 넣은 하이 파이 프로토타입에 붙여도 클릭 더미입니다. 잘 만들었느냐를 가르는 말이 아니라 눌러서 넘어가느냐를 가르는 말입니다.

주로 프로덕트 디자이너가 만듭니다. 화면을 그린 사람이 그대로 연결을 붙이는 편이 빠르기 때문입니다. 요즘 쓰는 디자인 도구에는 화면 사이를 잇는 기능이 들어 있어서, 이미 그려 둔 화면이 있다면 연결을 거는 데 한두 시간이면 됩니다. 화면이 몇 장 안 되면 프로덕트 매니저가 직접 만들기도 합니다.

읽는 쪽은 셋이고, 누가 보느냐에 따라 만들 범위가 달라집니다.

1. 사용자 테스트 참가자. 실제 과업을 시켜 보며 막히는 지점을 찾는 사용성 테스트에서 씁니다. 다섯 명쯤에게 같은 과제를 주고 설명 없이 쓰게 두면 큰 문제는 대개 드러납니다. 이 경우에는 과제와 상관없는 화면까지 눌리게 만들 필요가 없습니다.
2. 같이 만드는 팀. PRD에 클릭 더미 링크를 붙여 두면 개발자가 문장을 읽고 화면을 상상하지 않아도 됩니다. 다만 이쪽 독자에게는 예외 상황이 더 중요해서, 값이 없을 때나 권한이 없을 때 같은 화면을 추가로 요구받습니다.
3. 밖에 보여 주는 자리. 투자 미팅이나 고객사 시연에서 쓰는 경우입니다. 보는 사람이 다 만들어진 제품으로 받아들이기 쉬우므로 시작할 때 아직 동작하지 않는 시안이라는 말을 먼저 합니다.

"화면 캡처 말고 클릭 더미로 주세요. 눌러 보면서 보고 싶어요."

정지한 그림이 아니라 따라가 볼 수 있는 형태를 달라는 요청입니다.

"이번 클릭 더미는 초대 흐름만 열어 뒀어요. 나머지는 안 눌립니다."

확인하려는 경로 하나만 만들었으니 다른 곳을 눌러 보고 고장으로 여기지 말라는 안내입니다.

"클릭 더미에서 세 명이 같은 자리에서 멈췄어요."

다섯 명 중 세 명이 같은 화면에서 다음 행동을 못 찾았다는 뜻이고, 그 자리를 고쳐야 한다는 근거가 됩니다.

페이지덱에서는 민서가 만들고 지현이 과제 문장을 씁니다. 공유 설정을 고칠 때는 열한 장짜리를 만들어 사용자 다섯 명에게 보여 줬고, 세 명이 권한 선택 화면에서 멈췄습니다. 세 명 모두 읽기 전용과 댓글 가능의 차이를 몰라 화면을 한참 들여다봤습니다.

고친 것은 화면 구조가 아니라 문구 두 줄이었습니다. 개발은 아직 시작하지 않은 상태였고, 태오가 받은 것은 고친 뒤의 클릭 더미와 그 안에 들어간 문구였습니다. 닷새 안에 검증까지 끝내는 디자인 스프린트에서도 나흘째에 이것을 만들고 닷새째에 보여 주는 순서가 일정에 그대로 박혀 있습니다.

잘 만든 프로토타입을 가리키는 말로 읽는 경우가 많습니다. 눌러서 넘어가는 모습이 완성품에 가까워 보이기 때문입니다. 그러나 이 말이 가르는 것은 겉모습이 아니라 동작이고, 종이에 그린 수준의 화면으로도 만들 수 있습니다. 클릭 더미부터 만들어야 제대로 된 검증이라고 여기면, 종이 몇 장으로 30분이면 끝날 확인에 이틀을 쓰게 됩니다.

개발 시간을 줄여 준다고 읽는 것도 흔합니다. 만드는 품이 실제 구현보다 훨씬 적으니 그렇게 들립니다. 하지만 이것은 만들 것을 미리 만들어 두는 물건이 아니라 무엇을 만들지 정하는 물건입니다. 여기서 나온 화면 연결은 코드로 한 줄도 옮겨지지 않습니다. 줄어드는 것은 만드는 시간이 아니라 잘못 만들어 두 주 뒤에 다시 만드는 일입니다.