페이퍼 프로토타입

화면 순서가 잘못됐다는 사실을 다 만든 뒤에 알게 되는 일이 잦았습니다. 색과 문구까지 넣어 사흘을 들여 시안을 만들고, 개발이 2주를 써서 화면을 붙인 다음에야 "이 단계가 왜 필요한가" 라는 말이 나왔습니다. 그 시점에는 고치는 비용이 처음 그릴 때의 열 배로 불어 있었습니다.

더 까다로운 문제는 사람 쪽에 있었습니다. 공들여 만든 결과물에는 아무도 이상하다는 말을 잘 하지 않습니다. 완성도 높은 시안을 회의실 화면에 띄우면 나오는 말이 정해져 있었습니다. "이 파란색이 좀 세 보이는데요" 같은 말은 나오는데, "이 화면 자체를 빼도 되지 않나요" 라는 말은 나오지 않았습니다. 만든 사람이 얼마나 오래 붙잡고 있었는지를 보는 사람도 알기 때문입니다.

그래서 아예 초라하게 만들자는 쪽으로 방향을 틀었습니다. A4 한 장에 볼펜으로 30분 안에 그린 화면에는 사람들이 거리낌 없이 이상하다고 말합니다. 프로토타입을 얼마나 진짜에 가깝게 만드느냐를 충실도라고 부르는데, 페이퍼 프로토타입은 그 가장 낮은 자리에 일부러 머무는 선택입니다. 확인하려는 질문이 순서와 단계 수라면 색과 글꼴은 답을 흐리는 잡음입니다.

종이 한 장이 화면 한 장입니다. A4나 인덱스카드에 화면 하나씩 그려 책상에 늘어놓은 묶음이 프로토타입 한 벌입니다. 들어가는 것은 다섯 가지입니다.

1. 화면 낱장. 보통 다섯에서 여덟 장입니다. 열 장을 넘기면 한 번에 물어보려는 질문이 너무 크다는 신호라, 경로를 둘로 쪼개는 편이 낫습니다.
2. 누를 수 있는 것의 표시. 버튼과 링크는 테두리를 둘러 구분해 둡니다. 종이에서는 무엇이 눌리는지가 안 보이므로 이 표시가 없으면 사용자가 아무 데나 짚습니다.
3. 화면 사이의 이동 규칙. 어느 버튼을 누르면 몇 번 장으로 넘어가는지 종이 뒷면에 써 둡니다.
4. 바뀌는 조각. 드롭다운이 펼쳐진 모습, 오류 문구, 불러오는 중 표시는 포스트잇이나 작게 자른 종이로 따로 만들어 그때그때 덧붙입니다. 한 화면의 여러 상태를 낱장으로 다 그리면 장수가 금방 스무 장을 넘습니다.
5. 사용자에게 줄 과제 한 줄. "팀원 두 명을 이 문서에 초대해 보세요" 처럼 목적만 적고 방법은 적지 않습니다. 방법을 적으면 그대로 따라가므로 어디서 헤매는지가 드러나지 않습니다.

들어가지 않는 것도 목록으로 정해 두는 편이 낫습니다. 색, 글꼴, 이미지, 실제 데이터, 다듬은 문구는 뺍니다. 하이 파이 프로토타입이 그것까지 넣는 형태인데, 종이 단계에서 따라가면 만드는 시간이 하루를 넘으면서 애초의 이점이 사라집니다.

쓰는 사람은 대개 프로덕트 디자이너입니다. 페이지덱에서는 민서가 그립니다. 다만 그림 솜씨가 필요한 일이 아니라서 지현처럼 프로덕트 매니저가 직접 그리는 경우도 많습니다.

읽는 사람은 셋입니다.

1. 사용자. 사용성 테스트에서 과제를 받아 종이 위를 짚습니다. 실제 과업을 시켜 보며 막히는 지점을 찾는 평가인데, 종이로도 큰 문제는 드러납니다.
2. 개발자. 태오는 붙일 화면의 순서와 분기를 미리 보고, 지금 스키마로 안 되는 흐름이 있으면 그 자리에서 말합니다.
3. 만든 사람 자신. 머릿속 흐름을 낱장으로 늘어놓으면 빠진 화면이 눈에 보입니다. 로그인하지 않은 사람이 초대 링크를 눌렀을 때 갈 곳 같은 것이 그렇게 발견됩니다.

읽는 방식이 다른 문서와 다릅니다. 독자가 혼자 받아 읽지 않고, 만든 사람이 옆에 앉아 장을 넘겨 줍니다. 사람이 컴퓨터 역할을 맡는 셈입니다. 그래서 자리에는 종이를 넘기는 진행자, 사용자, 어디서 멈췄는지 적는 기록자 셋이 필요합니다. 페이지덱에서는 민서가 넘기고 지현이 기록합니다. 진행자가 설명을 덧붙이면 테스트가 망가집니다. 사용자가 "이거 어떻게 하는 거예요" 라고 물어도 "화면에 보이는 대로 해 보세요" 라고만 답합니다.

남기는 산출물도 아닙니다. 테스트가 끝나면 사진 몇 장을 찍어 두고 종이는 버립니다. PRD에 첨부할 것은 여기서 얻은 결론이지 종이 그 자체가 아닙니다.

"이거 피그마까지 갈 것 없이 종이로 다섯 장 그려서 오후에 세 명한테 보여 보죠."

시안 만드는 며칠을 아끼고 오늘 안에 흐름 문제를 찾자는 제안입니다.

"종이로 해 봤더니 세 명이 다 세 번째 장에서 멈췄어요. 단계를 합치는 게 맞을 것 같습니다."

낮은 충실도로도 문제가 재현됐으니 구조를 바꾸자는 근거를 댄 말입니다.

"아직 종이 단계라 문구는 보지 마시고 순서만 봐 주세요."

충실도를 미리 알려 지적의 초점을 색과 글자에서 흐름으로 돌리는 말입니다.

페이지덱이 문서 공유 방식을 바꾸던 주에 민서가 새 흐름을 여섯 장으로 그려 왔고, 옆 팀 세 사람을 불러 "이 문서를 팀원 두 명에게 보이게 만들어 보세요" 라는 과제를 줬습니다. 세 사람 모두 권한 고르는 장에서 멈췄습니다. 권한을 고르는 화면이 초대할 사람을 적는 화면보다 앞에 있었는데, 누구를 초대할지 정하기 전에 권한을 먼저 묻는 순서가 아무에게도 자연스럽지 않았던 것입니다.

그날 오후에 순서를 뒤집어 다시 그렸고, 두 번째 테스트에서는 세 사람이 다 끝까지 갔습니다. 종이로 발견하지 못했다면 같은 문제를 구현 뒤에 만났을 테고, 그때는 순서를 바꾸는 일이 화면 두 개를 다시 짜는 일이 됩니다.

시간이나 예산이 없을 때 어쩔 수 없이 쓰는 임시방편으로 읽는 경우가 많습니다. 도구가 볼펜과 종이뿐이니 그렇게 보이기 쉽습니다. 하지만 종이를 고르는 이유는 형편이 아니라 질문입니다. 흐름이 말이 되는지 묻는 자리에서는 종이가 나은 선택이고, 예산이 넉넉한 팀도 그 질문에는 종이를 씁니다. 임시방편으로 취급해 건너뛰면 순서 문제를 구현 직전에 만나고, 그 단계에서는 화면을 다시 그리는 데 그치지 않고 잡아 둔 일정까지 밀립니다.

그림을 잘 그려야 한다는 오해도 흔합니다. 남에게 보여 주는 것이라 반듯해야 할 듯한데, 반듯하게 그리는 순간 앞서 말한 이점이 사라집니다. 자를 대고 그린 화면에는 사람들이 다시 색과 정렬을 말하기 시작합니다. 손떨림이 보이는 선이 오히려 "이건 아직 정해진 게 아니다" 라는 신호를 줍니다.