로우 파이 프로토타입

만들기 전에 보여 주자는 생각 자체는 오래됐습니다. 문제는 보여 줄 것을 만드는 데 드는 시간이었습니다. 화면을 제대로 그리려면 색을 고르고 글꼴을 정하고 아이콘을 찾아야 했고, 그렇게 사나흘을 쓰고 나면 만든 사람은 이미 그 안을 버리기 어려운 상태가 됩니다. 고생해서 만든 것을 놓고 처음부터 다시 하자는 말은 잘 나오지 않습니다.

보는 쪽에서도 같은 일이 벌어졌습니다. 완성된 것처럼 보이는 화면을 회의에 올리면 나오는 말이 정해져 있습니다. 민서가 회원가입 흐름을 검토받으려고 색까지 입힌 화면 다섯 장을 가져갔더니, 한 시간 동안 버튼 색과 문구 어투 이야기만 오갔습니다. 민서가 묻고 싶었던 것은 인증 단계를 가입 뒤로 미뤄도 되겠느냐는 것이었는데 그 질문은 꺼내지도 못했습니다.

로우 파이 프로토타입은 이 두 문제를 같은 방법으로 풉니다. 일부러 덜 만드는 겁니다. 색을 빼고 글씨를 회색 막대로 두면 만드는 데 한 시간이면 되고, 버릴 때 아깝지 않으며, 보는 사람도 꾸밈에 대해 말할 거리가 없어 구조 이야기를 합니다. 완성도가 낮은 것이 부작용이 아니라 쓰임새입니다.

들어가는 것은 다섯 가지이고, 이 다섯을 넘어가기 시작하면 이미 다른 물건이 됩니다.

1. 화면 상자 — 한 화면을 사각형 하나로 그립니다. 안에는 영역을 나누는 선과 상자만 둡니다. 보통 한 흐름에 화면 세 장에서 여덟 장이 나옵니다.
2. 자리 표시 — 글은 회색 막대로, 사진은 대각선 그은 사각형으로 둡니다. 실제 문구를 쓰지 않는 이유는 문구가 보이는 순간 사람들이 문구를 고치기 시작해서입니다. 다만 버튼의 글자와 화면 제목은 예외로 진짜 말을 씁니다. 이 둘은 무엇을 하는 화면인지를 알려 주는 최소한이라 비워 두면 흐름을 못 읽습니다.
3. 위계 — 무엇이 크고 무엇이 위에 있는지를 크기와 순서로 표시합니다. 이 단계에서 정하는 거의 유일한 디자인 결정입니다. 검색창이 목록보다 위인지 아래인지 같은 것이 여기서 갈립니다.
4. 화면 사이 연결 — 어느 상자를 누르면 어느 화면으로 가는지를 선으로 이어 둡니다. 이 연결이 있고 없고가 와이어프레임과 갈리는 지점입니다. 와이어프레임은 벽에 붙여 놓고 보는 도면이고, 이쪽은 손가락으로 눌러 다음 화면으로 넘어갑니다.
5. 확인하려는 질문 — 파일 첫머리에 한 줄로 적어 둡니다. "가입 도중에 이탈하지 않고 인증까지 가는가" 처럼 씁니다. 이 줄이 없으면 회의가 표류하고, 만드는 도중에 화면이 계속 늘어납니다.

빠지는 것도 정해져 있습니다. 색, 글꼴, 로고, 실제 사진, 오류 메시지, 빈 목록 화면 같은 예외 상태는 넣지 않습니다. 목록에 데이터가 하나도 없을 때 무엇을 보여 줄지는 중요한 결정이지만 이 물건이 답할 질문이 아닙니다. 그런 것까지 채우고 나면 만드는 데 사흘이 걸리고, 그 시점에 이미 하이 파이 프로토타입입니다.

만드는 사람은 대개 디자이너지만 이 충실도에서는 누가 만들어도 됩니다. 상자와 선만 쓰니 도구를 다루는 실력이 결과를 가르지 않습니다. 페이지덱에서는 민서가 주로 만들고, 급할 때는 지현이 피그마에서 직접 상자를 그려 올립니다. 피그마는 브라우저에서 여러 명이 같이 편집하는 디자인 도구라 링크 하나를 열면 다들 같은 화면을 봅니다.

읽는 쪽은 셋으로 나뉘고 보는 것이 각각 다릅니다.

1. 팀 안의 동료 — 지현은 빠진 단계가 없는지를 보고, 태오는 이 흐름을 만들려면 서버에서 무엇을 내려 줘야 하는지를 봅니다. 태오가 "3번 화면에 쓸 값이 지금 API 에 없다" 고 말하면 설계가 그 자리에서 바뀝니다. 화면을 다 만든 뒤에 같은 말을 들으면 사흘치를 버립니다.
2. 사용자 — 사용성 테스트에서 씁니다. 다섯 명에게 같은 과제를 주고 어디서 멈추는지를 봅니다. 꾸밈이 없다는 점이 여기서 특히 유리한데, 대충 그린 화면에는 참가자들이 거리낌 없이 이상하다고 말합니다.
3. 결정권자 — 규원 같은 자리에는 잘 올리지 않습니다. 투자자나 고객사에 보여 주는 자리도 마찬가지입니다. 이 물건은 미완성이라는 사실을 아는 사람들 사이에서만 제구실을 합니다.

"로우 파이로 먼저 흐름만 보고 갈게요. 색은 나중에요."

지금 회의에서 정할 것은 순서와 배치이지 겉모습이 아니라고 미리 선을 긋는 말입니다.

"이거 로우 파이인데 왜 이렇게 오래 걸렸어요?"

한 시간짜리로 만들었어야 할 것에 이틀을 썼다는 지적입니다.

"다섯 명한테 로우 파이로 돌려 보고 결정하죠."

사용성 테스트로 확인한 다음에 다음 단계로 넘어가자는 제안입니다.

페이지덱에서 새 기능을 잡을 때 민서가 가장 먼저 여는 것이 이 파일입니다. 지현이 유저 플로우로 정리해 둔 경로를 보고 화면 다섯 장을 상자로 그린 뒤, 첫 줄에 이번에 물을 질문 한 줄을 적습니다. 유저 플로우는 목적을 이루기까지 거치는 화면과 분기를 선으로 이은 그림이라, 여기서 화면 수가 대강 나옵니다.

다음 날 셋이 모여 링크를 열어 놓고 한 화면씩 넘겨 봅니다. 이 자리에서 나오는 말은 대개 순서에 대한 것입니다. 인증을 뒤로 미루자든가, 3번 화면과 4번 화면을 합치자든가 하는 이야기입니다. 여기서 합쳐진 화면은 다시 그리는 데 십 분이면 됩니다.

덜 만든 것이니 대충 해도 된다고 읽는 경우가 가장 흔합니다. 충실도가 낮다는 말이 성의가 낮아도 된다는 말처럼 들리니 그렇게 되기 쉽습니다. 하지만 낮춘 것은 겉모습뿐이고 구조는 오히려 더 또렷해야 합니다. 화면 순서가 엉켜 있거나 버튼 이름이 비어 있으면 보는 사람이 그 빈자리를 각자 다르게 메우고, 회의가 끝난 뒤 세 사람이 서로 다른 화면을 머릿속에 담고 돌아갑니다. 그 차이는 개발이 절반쯤 진행된 뒤에야 드러납니다.

반대로 이 단계에서 결론을 다 내려고 붙드는 것도 문제입니다. 상자만 보고 모든 것을 정하려다 보면 회의가 길어지고 화면이 계속 늘어납니다. 여기서 답할 수 있는 것은 순서와 배치와 위계뿐입니다. 문구 세 개 중 어느 쪽이 덜 헷갈리는지는 이 물건으로 답이 나오지 않고, 그 질문이 남아 있으면 다음 충실도로 올라가야 합니다.