스케치와 프로토타입
서윤의 노트북에는 맡아 두기 서비스의 결과 화면이 거의 완성된 모습으로 들어 있다. 책방 초록 버튼, 둥근 모서리, 책 표지 그림자까지 있다. 하린이 묻는다. "이걸 손님한테 보여 주면 무슨 말을 들을 것 같아요?" 서윤은 잠깐 생각하다가 답한다. "초록이 예쁘다거나, 글자가 작다거나요." 하린이 다시 묻는다. "그럼 정말 알고 싶은 건 뭐예요?" 서윤이 알고 싶은 것은 색이 아니었다. 손님이 책방 네 곳의 재고를 보고 한 곳을 고를 수 있는지였다. 이 장은 프로토타입을 "미리 만든 완성품"이 아니라 질문 하나에 답하려고 만드는 물건으로 다시 본다.
- 프로토타입이 무엇을 시험하려는 물건인지(역할, 모양과 느낌, 구현)를 구분한다.
- 충실도를 하나의 높낮이가 아니라 모양·내용·상호작용의 세 축으로 나누어 고른다.
- 크레이지 에이트로 짧은 시간에 여러 안을 그리고, 스티커 투표로 좁히는 법을 안다.
- 가로형·세로형 프로토타입의 차이와, 종이 프로토타입과 오즈의 마법사 방식으로 시험하는 법을 안다.
- 확인하려는 질문에서 출발해 필요한 만큼만 만드는 프로토타입을 고른다.
프로토타입은 질문이다
6장까지 서윤은 누구의 어떤 문제인지 정하고(3장), 정보를 나누고(4장), 맡아 두기 흐름을 다섯 단계로 줄이고(5장), 버튼을 누른 뒤의 피드백과 상태 표시를 정했다. 이제 이것들이 실제 사람 손에서 되는지 확인할 차례다. 그런데 확인하려고 서비스를 다 만들면 너무 늦고 비싸다. 고칠 것이 나와도 이미 들인 시간이 아까워 고치지 못한다. 그래서 만들기 전에 프로토타입(Prototype)을 만든다. 프로토타입은 완성되기 전의 제품을 흉내 내어, 아직 모르는 것 하나를 확인하게 해 주는 물건이다.
핵심은 "아직 모르는 것 하나"다. 같은 결과 화면이라도 무엇을 모르느냐에 따라 만들어야 할 프로토타입이 전혀 다르다. 하우드와 힐은 「프로토타입은 무엇을 시험하는가(What do prototypes prototype?)」(Houde & Hill 1997)에서 이 차이를 세 가지로 나누었다. 제품이 사용자의 생활에서 어떤 쓸모를 갖는지 보는 역할, 보고 만지는 느낌을 보는 모양과 느낌, 기술적으로 만들 수 있는지 보는 구현이다. 하나의 프로토타입이 셋을 다 보여 줄 수도 있지만, 대부분은 한쪽에 치우친다. 치우친 것이 잘못이 아니라, 무엇에 치우쳤는지 모르고 만드는 것이 문제다.
스케치와 프로토타입도 구분해 두면 좋다. 빌 벅스턴은 『사용자 경험 스케치하기(Sketching User Experiences)』(Buxton 2007)에서 스케치를 "빠르고, 싸고, 버릴 수 있고, 많이 그리며, 확정하기보다 제안하는 것"으로 설명했다. 스케치는 여러 방향을 열어 보는 도구이고, 프로토타입은 고른 방향이 되는지 확인하는 도구다. 앞의 것은 1장의 더블 다이아몬드에서 넓히는 쪽, 뒤의 것은 좁히는 쪽에 가깝다. 이 장은 넓히는 스케치에서 시작해 좁히는 프로토타입으로 간다.
충실도의 세 축
프로토타입이 완성품을 얼마나 닮았는지를 충실도(Fidelity)라고 한다. 흔히 "저충실도(로파이)"와 "고충실도(하이파이)"의 두 가지로 말하지만, 실제로는 닮는 방향이 여러 개다. 맥커디와 동료들은 「충실도의 벽 넘기(Breaking the fidelity barrier)」(McCurdy 외 2006)에서 충실도를 여러 차원으로 나누고, 차원마다 높낮이를 섞는 혼합 충실도가 쓸모 있다고 보였다. 이 책은 그것을 세 축으로 줄여 쓴다.
| 축 | 낮음 | 중간 | 높음 |
|---|---|---|---|
| 모양(visual) | 연필 손그림 | 회색 상자의 와이어프레임 | 실제 색·글꼴·간격의 시안 |
| 내용(content) | 물결선, "로렘 입숨" | "책 제목", "책방 이름" 같은 자리표시 글 | 실제 책 제목, 재고 수, 거리 |
| 상호작용(interaction) | 정지 그림(사람이 종이를 바꿔 준다) | 정해진 곳을 누르면 다음 화면 | 실제 입력, 오류, 기다림까지 |
세 축은 서로 따로 움직인다. 연필로 그렸지만 실제 책 제목과 재고 수가 적힌 종이 화면은 모양은 낮고 내용은 높다. 색과 글꼴이 완성된 시안에 "제목 제목 제목"이 들어 있으면 모양은 높고 내용은 낮다. 아래 시뮬레이터에서 세 축을 하나씩 올리고 내려 같은 결과 화면이 어떻게 바뀌는지, 그리고 그 화면을 손님에게 보여 주면 어떤 말을 듣기 쉬운지 본다.
세 축으로 바꾸는 결과 화면
모양을 높이면 참가자는 화면을 "다 된 것"으로 받아들이기 쉽다. 다 된 것에는 구조를 바꾸자는 말보다 색과 글자에 대한 말이 나온다. 반대로 손그림은 "아직 바꿀 수 있다"는 신호를 주어, 참가자가 순서나 구조에 대해 더 편하게 말한다는 것이 실무에서 오래 이어진 이야기다. 다만 이 이야기를 뒷받침하는 연구의 결과는 엇갈린다. 종이와 화면 프로토타입이 찾아낸 문제의 수가 비슷했다는 연구(Walker, Takayama & Landay 2002 등)도 있다. 그러니 "손그림이 언제나 낫다"가 아니라 "확인하려는 것에 필요 없는 충실도는 비용만 늘리고 대화를 엉뚱한 곳으로 끌 수 있다"로 기억한다.
내용 축은 자주 잊힌다. 맡아 두기의 결과 화면에서 손님이 하는 일은 "책방 네 곳 중 어디로 갈지 고르기"이고, 그 결정은 재고 수와 거리, 헌책인지 새 책인지 같은 실제 내용에 달려 있다. 내용이 물결선이면 아무리 예쁜 화면이라도 이 결정을 시험할 수 없다. 서윤이 연필로 그리되 책 제목과 재고는 네 책방의 실제 장부(가상)에서 옮겨 적은 이유다.
많이 그리고 버리기: 크레이지 에이트
첫 아이디어는 대개 가장 흔한 아이디어다. 서윤이 결과 화면을 떠올리면 먼저 "책 아래 책방 목록"이 나온다. 나쁘지 않지만, 그것만 그리면 다른 가능성을 보지 못한 채 좁히기 시작하게 된다. 그래서 좁히기 전에 일부러 넓힌다. 가장 단순한 방법이 크레이지 에이트(Crazy 8s)다. 종이 한 장을 세 번 접어 여덟 칸을 만들고, 한 칸에 1분씩, 8분 동안 같은 화면의 다른 안을 여덟 개 그린다. 구글 벤처스의 디자인 스프린트 방법을 정리한 『스프린트(Sprint)』(Knapp, Zeratsky & Kowitz 2016)에 실려 널리 퍼졌다.
1분은 잘 그리기에는 너무 짧다. 그것이 핵심이다. 시간이 짧으니 선을 다듬지 못하고, 다듬지 못하니 아깝지 않게 다음 안으로 넘어간다. 서너 번째 칸쯤에서 흔한 안이 바닥나고, 그다음 칸에서 엉뚱하지만 쓸 만한 안이 나오는 일이 많다. 아래 시뮬레이터에서 8분을 빠르게 돌려 보고, 다 그린 뒤 마음에 드는 안에 스티커 세 장을 붙인다.
8분, 여덟 칸
여덟 안 가운데 무엇이 "정답"인지는 그림만으로 알 수 없다. 크레이지 에이트의 목적은 고르는 것이 아니라 고를 거리를 만드는 것이다. 지도 위 핀 안은 책방 네 곳이 걸어서 15분 안에 모여 있는 동네에서는 쓸모가 적고, 표 안은 휴대폰 폭에서 글자가 너무 작아진다. 그래도 그려 보았기 때문에 "왜 아닌지"를 말할 수 있다. 버린 안의 좋은 조각은 남긴다. 예를 들어 "한 문장" 안의 "걸어서 6분"이라는 표현은 목록 안의 거리 표시로 옮길 수 있다.
가로로 넓게, 세로로 깊게
충실도와 함께 정해야 할 것이 범위다. 서비스의 모든 화면을 얕게 흉내 낸 것을 가로형 프로토타입(Horizontal prototype), 기능 하나를 끝까지 깊게 만든 것을 세로형 프로토타입(Vertical prototype)이라고 한다(Nielsen 1993, 『사용성 공학(Usability Engineering)』). 가로형은 "서비스 전체의 순서가 이해되는가"를, 세로형은 "이 기능이 실제 입력과 예외까지 견디는가"를 확인한다. 둘을 섞어 전체를 얕게 깔고 중요한 한 줄기만 깊게 판 모양을 T자형이라고 부르기도 한다.
아래 격자의 가로는 맡아 두기 서비스의 화면, 세로는 깊이다. 칸을 눌러 끌면서 만들 범위를 칠한다. 아래쪽 칸을 칠하면 그 위 칸도 함께 칠해진다(눌러 이동하지 않는 화면에 실제 입력을 넣을 수는 없다).
범위 칠하기
범위를 칠해 보면 "다 만들면 다 알 수 있다"는 생각이 얼마나 비싼지 보인다. 격자 전체를 칠하면 66시간이 넘는다. 실제로 답해야 할 질문 다섯 개는 그 절반쯤의 시간으로 답할 수 있다. 질문을 먼저 적고 칸을 칠하면 범위가 줄고, 칸을 먼저 칠하고 질문을 찾으면 범위가 는다.
종이 프로토타입과 오즈의 마법사
종이 프로토타입(Paper prototype)은 화면을 종이에 그려, 사람이 컴퓨터 역할을 하며 시험하는 방법이다. 참가자가 종이 위의 버튼을 손가락으로 누르면, 컴퓨터 역할을 맡은 사람이 다음 화면의 종이를 그 위에 놓는다. 입력 칸에는 연필로 쓰거나 포스트잇을 붙인다. 캐럴린 스나이더의 『종이 프로토타이핑(Paper Prototyping)』(Snyder 2003)이 이 방법의 준비물, 역할, 진행 요령을 자세히 정리했다.
종이 위에서 컴퓨터를 흉내 내는 생각을 한 걸음 더 밀면 오즈의 마법사(Wizard of Oz) 방식이 된다. 참가자는 시스템이 스스로 움직인다고 느끼지만, 실제로는 보이지 않는 곳에서 사람이 응답을 만든다. 1980년대 초 자연어로 명령을 알아듣는 사무용 프로그램을 연구하면서 이 이름이 붙었다(Kelley 1984). 맡아 두기에서 아직 만들 수 없는 것, 예를 들어 인증 문자나 "주인이 요청을 확인했다"는 상태 변화를 사람이 대신하면, 그 기능을 만들기 전에 손님이 그것을 어떻게 겪는지 볼 수 있다.
아래는 서윤과 하린이 책방 E에서 실제로 한 종이 시험의 흐름이다. "다음"을 눌러 한 단계씩 진행하며, 참가자가 보는 종이와 무대 뒤에서 마법사가 하는 일을 함께 본다.
종이 위의 맡아 두기, 무대 뒤의 마법사
마법사 방식에서 가장 어려운 것은 일관성이다. 같은 입력에는 같은 응답을 해야 한다. 참가자가 조금 다르게 눌렀는데 마법사가 "알아서" 맞는 화면을 내밀면, 실제 서비스에서는 일어나지 않을 성공을 관찰하게 된다. 그래서 마법사는 미리 "이 칸을 누르면 이 종이"라는 규칙표를 만들어 두고, 규칙표에 없는 곳을 누르면 아무것도 하지 않는다. 아무것도 일어나지 않는 것도 실제 서비스의 응답이다.
와이어프레임: 회색 상자가 정하는 것
와이어프레임(Wireframe)은 화면의 요소와 배치, 우선순위를 회색 상자와 선으로 정한 그림이다. 색과 그림을 빼는 것은 게을러서가 아니라, 그 단계에서 정할 것에 집중하기 위해서다. 와이어프레임이 정하는 것은 "무엇이 화면에 있고, 무엇이 먼저 보이고, 무엇을 누르면 어디로 가는가"다. 색과 글꼴이 들어가면 대화가 곧장 그쪽으로 흐른다.
좋은 와이어프레임에는 그림 옆에 주석이 붙는다. 그림만으로는 "왜 이 순서인지", "재고가 없으면 어떻게 보이는지", "글이 길면 어떻게 줄이는지"를 알 수 없다. 주석은 디자이너가 결정한 것과 아직 결정하지 않은 것을 개발자와 함께 보는 문서다. 지후가 서윤의 와이어프레임에서 가장 먼저 읽는 것도 그림이 아니라 주석이다.
와이어프레임은 모양 축에서 "중간"에 해당하지만, 내용 축과 상호작용 축은 따로 정할 수 있다. 서윤의 와이어프레임은 회색이지만 책 제목과 재고는 실제 자료(가상)를 썼다. 지후는 이 그림을 이어 붙여 누르면 넘어가는 클릭 목업으로 만들었다. 같은 와이어프레임이 종이 위에서는 정지 그림이고, 디자인 도구 안에서는 상호작용 "중간"의 프로토타입이 된다.
이 장의 와이어프레임은 TypeBook의 글자 위계와 WebBook의 컴포넌트 규칙을 아직 입히지 않은 상태다. 회색 상자의 크기 차이만으로도 위계는 정해진다. 책 제목 상자가 가장 넓고 진하며, 책방 이름이 그다음, 거리와 재고는 가장 작다. 이 순서가 맞는지 확인한 뒤에 글자 크기와 색을 입히면, 색을 바꿔도 위계가 흔들리지 않는다(TypeBook의 위계, WebBook의 컴포넌트).
질문에 맞는 프로토타입 고르기
이제 앞의 것들을 하나로 묶는다. 프로토타입을 고르는 순서는 거꾸로다. 먼저 확인할 질문을 한 문장으로 쓰고, 그 질문에 답하려면 세 축이 각각 얼마나 높아야 하는지 정한 뒤, 그 높이를 가장 싸게 만족하는 형태를 고른다. 질문이 "손님이 책방을 비교해 고르나"라면 내용은 높아야 하지만 모양은 낮아도 된다. 질문이 "네 책방이 함께 쓰는 서비스로 보이나"라면 모양이 높아야 하고 상호작용은 없어도 된다.
질문 하나, 프로토타입 하나
판정에서 "넘침"은 실패가 아니라 비용이다. 완성 시안 목업으로 책방 비교를 시험해도 답은 얻는다. 다만 그 시안을 만드는 동안 종이로 세 번 시험할 수 있었고, 참가자는 버튼 색에 대해 말하느라 비교에 쓸 말을 줄였을 수 있다. "모자람"은 더 위험하다. 모자란 프로토타입으로 얻은 "문제없음"은 아무것도 확인하지 않은 것이다.
| 확인할 것 | 모양 | 내용 | 상호작용 | 흔한 형태 |
|---|---|---|---|---|
| 순서와 구조가 이해되는가 | 낮음 | 중간 | 낮음~중간 | 종이, 가로형 |
| 정보로 결정할 수 있는가 | 낮음 | 높음 | 낮음 | 실제 자료를 옮겨 적은 종이 |
| 입력과 기다림을 견디는가 | 낮음~중간 | 중간 | 높음 | 세로형, 마법사, 코드 |
| 첫인상과 신뢰 | 높음 | 중간~높음 | 낮음 | 완성 시안 그림 |
| 만들 수 있는가 | 상관없음 | 높음 | 높음 | 구현 시험 코드 |
빨리, 여러 번
프로토타입의 가치는 한 번의 시험이 아니라 고치고 다시 시험하는 횟수에서 나온다. 한 판을 만드는 데 하루가 걸리면 두 주 동안 몇 번 못 고친다. 한 시간이 걸리면 하루에도 여러 번 고칠 수 있다. 그렇다고 끝까지 종이만 쓸 수는 없다. 종이로는 영영 보이지 않는 문제(글자 크기, 응답 시간, 실제 입력)가 있기 때문이다. 아래 모형에서 한 판을 만드는 시간을 바꾸며 두 주(80시간) 동안 남는 문제를 본다.
두 주 동안 몇 번 고칠 수 있나
이 모형은 거칠다. 실제로는 고치면서 새 문제가 생기고, 문제마다 보이는 정도도 다르다(8장에서 이 차이를 자세히 본다). 그래도 결론의 방향은 실무의 경험과 같다. 처음에는 싸고 빠른 것으로 구조를 잡고, 구조가 안정되면 그 위에 충실도를 쌓는다. 순서를 거꾸로 하면 비싼 프로토타입으로 구조 문제를 찾게 되고, 그때는 고치기가 아깝다.
서윤의 봄 서비스 노트
여덟 칸에서 종이 두 벌로, 질문 세 개로
5월 첫 주 화요일 아침, 책방 E가 문을 열기 전에 서윤은 A4 종이를 세 번 접었다. 하린이 휴대폰 타이머를 1분에 맞췄다. 주제는 맡아 두기의 결과 화면 하나. 처음 두 칸은 금방 찼다. 책 아래 책방 목록, 가장 가까운 책방 하나만 크게. 세 번째 칸에서 지도를 그리고 나자 손이 멈췄다. 남은 다섯 칸에서 표, 가로로 넘기는 책방 카드, "책방 E에 2권, 걸어서 6분" 같은 한 문장, 책방 사진, 찾으러 갈 날짜를 먼저 고르는 달력이 나왔다. 8분이 끝나자 서윤은 "달력은 말도 안 되네요" 하며 웃었지만, 하린은 그 칸에 스티커를 붙였다. "날짜 이야기는 손님 인터뷰에서 여러 번 나왔어요."
하린과 지후, 책방 E 주인이 스티커를 세 장씩 붙였다. 표가 많이 모인 것은 "책방 목록"과 "가까운 한 곳", 그리고 "한 문장"의 표현이었다. 서윤은 두 안을 종이 프로토타입 두 벌로 만들었다. A안은 책 카드 아래에 재고가 있는 책방을 가까운 순서로 모두 보여 주고, 줄마다 "맡아 두기" 버튼을 둔다. B안은 가장 가까운 책방 하나만 크게 보여 주고 "다른 책방 2곳 더 보기"를 둔다. 두 안 모두 거리는 "걸어서 6분"처럼 한 문장 안의 표현을 빌렸고, 책 카드 오른쪽 위에는 나중에 볼 책을 모아 두는 "찜하기"를 넣었다. 작은 숲 주인이 바라던 기능이다. 연필로 그렸지만 책 제목, 재고 수, 거리는 네 책방이 보내 준 재고 목록(가상)에서 옮겨 적었다. 두 벌을 만드는 데 세 시간이 걸렸다.
그날 오후 책방 E를 찾은 손님 네 명에게 양해를 구하고 계산대 옆 탁자에서 시험했다. 서윤이 진행하고, 하린이 컴퓨터 역할을 하며 종이를 바꾸고, 지후가 메모했다. 인증 문자는 하린의 휴대폰에서 실제로 보냈다. 가상 기록으로, A안에서는 네 명 모두 책방 줄을 훑어 본 뒤 한 곳을 골랐다. B안에서는 세 명이 "다른 책방 2곳 더 보기"를 열지 않고 가장 가까운 책방을 골랐고, 그중 한 명은 시험이 끝난 뒤 "헌책방 나무에도 있었어요? 거긴 싸잖아요"라고 했다. 넷은 숫자를 말하기에 너무 적다. 하지만 B안이 다른 선택지를 가린다는 것은 행동으로 보였다. 서윤은 A안 쪽으로 가기로 했다.
시험을 정리하며 하린이 물었다. "오늘 확인한 게 정확히 뭐였어요?" 서윤은 대답하다가, 같은 종이로 서로 다른 질문 세 개를 섞어 확인하고 있었다는 것을 알았다. 그래서 다음 시험 전에 질문을 먼저 적고, 질문마다 충실도를 따로 정하기로 했다. 주인 쪽 화면이 종이로는 안 된다고 말한 것은 지후였다. "주인은 계산하면서 곁눈으로 볼 거예요. 종이를 내밀어 주는 사람이 옆에 있으면 그 상황이 안 생겨요." 지후는 서윤의 회색 와이어프레임을 이어 붙여, 주인이 휴대폰에서 직접 누를 수 있는 클릭 목업을 하루 만에 만들기로 했다.
핵심 정리
- 프로토타입은 완성품의 축소판이 아니라 아직 모르는 것 하나를 확인하려고 만드는 물건이다. 역할, 모양과 느낌, 구현 가운데 무엇을 시험하는지 먼저 정한다(Houde & Hill 1997).
- 충실도는 높낮이 하나가 아니다. 모양, 내용, 상호작용의 세 축을 따로 정할 수 있고, 섞는 것이 쓸모 있다.
- 모양을 높이면 색과 글꼴에 대한 말을 듣기 쉽고, 내용을 낮추면 정보로 결정하는지를 시험할 수 없다. 필요 없는 충실도는 비용이고, 모자란 충실도는 아무것도 확인하지 않은 것이다.
- 크레이지 에이트(8분에 여덟 안)는 첫 아이디어 너머를 그리게 한다. 고르는 것이 아니라 고를 거리를 만드는 방법이고, 스티커 투표는 설명보다 먼저 한다.
- 가로형은 전체를 얕게, 세로형은 기능 하나를 깊게 만든다. 질문을 먼저 적고 범위를 칠하면 범위가 준다.
- 종이 프로토타입은 사람이 컴퓨터 역할을 하고, 오즈의 마법사 방식은 아직 만들 수 없는 기능을 사람이 몰래 대신한다. 마법사는 규칙표대로만 응답한다.
- 와이어프레임은 요소, 배치, 우선순위를 정하고, 주석으로 이유와 미정 사항을 남긴다.
- 싸고 빠른 프로토타입으로 구조를 먼저 잡고, 구조가 안정되면 충실도를 높인다. 가치는 고쳐서 다시 시험하는 횟수에서 나온다.
확인 퀴즈
1. "손님이 결과 화면에서 책방들의 재고와 거리를 비교해 한 곳을 고르는가"를 확인하려 한다. 가장 알맞은 프로토타입은?
2. 크레이지 에이트에 대한 설명으로 옳은 것은?
3. 종이 프로토타입 시험에서 참가자가 규칙표에 없는 곳(버튼이 아닌 책 표지)을 눌렀다. 컴퓨터 역할을 맡은 사람은 어떻게 해야 하는가?
4. 두 주 동안 프로토타입으로 시험할 계획이다. 이 장의 내용에 가장 맞는 순서는?