와이어프레임

배치를 정하는 회의가 배치를 정하지 못하고 끝나는 일이 반복됐습니다. 원인은 보여 주는 물건에 있었습니다.

민서가 색과 서체까지 입힌 화면을 들고 갔던 날이 그랬습니다. 첫 발언은 파란색이 너무 진하다는 말이었고 그다음은 아이콘이 낡아 보인다는 말이었습니다. 한 시간 동안 문서 목록을 왼쪽에 둘지 위에 둘지는 아무도 꺼내지 않았습니다. 꾸밈이 들어간 화면은 눈에 먼저 들어오는 것부터 이야기하게 만들고, 배치는 눈에 먼저 들어오지 않습니다.

그래서 꾸밈을 일부러 뺀 도면을 따로 만듭니다. 회색 상자와 선만 남으면 할 말이 배치밖에 없어집니다. 페이지덱의 문서 공유 화면은 이 단계에서 세 번 뒤집혔습니다. 공유 버튼을 문서 안에 둘지 목록에 둘지가 여기서 정해졌고, 색까지 입힌 뒤에 같은 결정을 뒤집었다면 사흘이 더 들었을 것입니다.

한 장에 들어가는 것은 일곱 가지이고, 무엇을 넣지 않는지가 그중 하나입니다.

1. 화면 이름과 목적 한 줄입니다. 이 화면에서 사용자가 무엇을 하는지를 적습니다. 문서를 동료에게 공유하는 화면이라고 적어 두면 뒤의 논의가 그 문장에 걸립니다.
2. 영역 구획입니다. 머리말, 왼쪽 목록, 본문, 오른쪽 패널을 상자로 나눕니다. 이 단계에서 정하는 것은 상자의 개수와 위치이고 크기는 대략만 맞춥니다. 상자 하나가 화면의 절반을 넘는지 4분의 1인지 정도만 구분되면 충분합니다.
3. 요소의 종류와 위계입니다. 제목과 본문과 버튼과 입력칸이 서로 구분되기만 하면 됩니다. 글자 크기를 두세 단계로만 쓰고 색으로 구분하지 않습니다.
4. 실제로 들어갈 문장입니다. 뜻 없는 임시 문구를 채워 넣으면 길이를 알 수 없습니다. 문서 3개 선택됨이라는 문구와 선택된 문서가 3개 있습니다라는 문구는 차지하는 폭이 다르고, 그 차이가 버튼 위치를 바꿉니다.
5. 예외 상태입니다. 목록이 비어 있을 때, 200건일 때, 불러오다 실패했을 때를 각각 그립니다. 이걸 빼 두면 개발 단계에서 각자 상상해 만들고 화면 셋이 서로 다른 모양이 됩니다.
6. 화면 사이의 이동입니다. 어느 버튼을 누르면 어느 화면으로 가는지를 화살표나 주석으로 적습니다.
7. 넣지 않는 것은 색, 이미지, 서체, 그림자, 정확한 간격 값입니다. 이 다섯은 다음 단계인 목업의 몫이고, 여기서 미리 정하면 배치 논의가 다시 꾸밈 논의로 끌려갑니다.

쓰는 사람은 대개 디자이너이고, 아직 디자이너가 없는 팀에서는 프로덕트 매니저가 손으로 그려 시작합니다. 손으로 그린 종이 한 장도 이 산출물로 셉니다. 중요한 것은 도구가 아니라 꾸밈을 뺐다는 조건입니다.

읽는 사람은 셋입니다.

1. 배치를 함께 정하는 사람들입니다. 프로덕트 매니저와 개발자, 때로는 고객을 아는 세일즈가 함께 봅니다. 이 도면은 결과를 알리는 문서가 아니라 회의 자리에 놓는 물건입니다.
2. 개발자입니다. 구현하려고 보는 것이 아니라 일의 범위를 가늠하려고 봅니다. 오른쪽 패널이 하나 붙었다는 사실만으로 이틀이 더 드는지 여기서 판단합니다.
3. 자기 자신입니다. 그리다 보면 한 화면에 담으려던 것이 두 화면 몫이라는 사실이 드러나는 일이 흔합니다. 머릿속에서는 들어가던 것이 상자로 옮기면 들어가지 않습니다.

반대로 읽히지 않아야 하는 자리도 있습니다. 고객이나 투자자에게 이것을 보여 주면 왜 이렇게 못생겼느냐는 질문부터 돌아옵니다. 그 자리에는 인상을 보여 주는 무드보드나 완성에 가까운 목업을 씁니다.

수명은 짧습니다. 목업이 나오면 이 도면은 버립니다. 같은 화면을 설명하는 문서를 둘 유지하면 반드시 어긋나고, 어긋난 뒤에는 어느 쪽이 맞는지 아무도 모릅니다. 다만 5번의 예외 상태 목록은 목업으로 옮겨 적어 둡니다. 그 목록은 배치가 아니라 요구사항이라서 다음 단계에서도 필요합니다.

"색은 아직 보지 마세요. 와이어프레임이라 배치만 봐 주시면 됩니다."

논의의 범위를 배치로 묶어 두려는 말입니다.

"빈 상태 화면이 없는데 이것도 그려 주시겠어요?"

예외 상태가 빠져 있어 개발 단계에서 각자 다르게 만들 위험을 짚는 요청입니다.

"이건 와이어프레임 건너뛰고 바로 목업으로 갑시다. 기존 화면에 버튼 하나 붙이는 거라서요."

배치 결정이 이미 끝난 작업이라 구조 단계를 생략하자는 제안입니다.

민서가 문서 공유 화면을 그릴 때 첫 장은 15분 만에 나왔고 그 뒤로 사흘이 걸렸습니다. 사흘이 든 것은 예외 상태 때문이었습니다. 공유 대상이 외부 사용자일 때, 이미 공유된 사람을 다시 고를 때, 권한이 없는 사람이 링크를 열었을 때가 각각 다른 화면이었습니다. 태오가 그 목록을 보고 잡은 예상 일정은 처음 말했던 3일에서 8일로 바뀌었고, 그 변경이 배치 단계에서 나온 것이 개발 중간에 나오는 것보다 훨씬 쌌습니다.

대충 그린 목업이라고 읽는 경우가 가장 많습니다. 회색이고 거칠어 보이니 덜 만든 상태처럼 보입니다. 하지만 이 도면은 완성도가 낮은 시안이 아니라 다른 질문에 답하는 물건입니다. 무엇을 어디에 둘 것인가에 답하고, 실제로 어떻게 보일 것인가에는 답하지 않습니다. 덜 만든 것으로 읽으면 색을 입히는 것이 개선이라고 여기게 되고, 배치가 확정되기 전에 꾸밈이 먼저 붙습니다.

도구가 좋아졌으니 처음부터 목업을 그려도 된다고 보는 것도 흔합니다. 색과 서체를 입히는 데 예전만큼 시간이 들지 않으니 맞는 말처럼 들립니다. 실제로 달라진 것은 만드는 비용이고, 받는 의견의 종류는 그대로입니다. 색이 들어간 화면을 회의에 올리면 배치에 대한 의견은 거의 오지 않습니다. 그 상태로 배치를 확정하면 목업 열두 장을 다 고쳐야 하는 일이 뒤에 옵니다. 만드는 시간이 줄어든 만큼 뒤집는 비용도 줄었다고 착각하기 쉽지만, 뒤집는 비용은 장 수에 비례해서 늡니다.