스토리 매핑

만들 것을 한 줄짜리 목록으로만 관리하던 시절이 있었습니다. 앞으로 만들 후보를 우선순위대로 모아 둔 제품 백로그에 항목 여든 개가 세로로 쌓여 있고, 위에서부터 차례로 꺼내 만드는 방식입니다.

목록에는 순서가 있지만 흐름이 없습니다. 위에서 스무 개를 만들었을 때 사용자가 무엇을 처음부터 끝까지 할 수 있게 되는지가 목록에서는 보이지 않습니다. 그래서 각 항목은 다 중요해 보이는데 합쳐 놓으면 쓸 수 없는 상태가 나옵니다. 출시 직전 점검에서 "로그인은 되는데 비밀번호를 잊은 사람은 들어올 방법이 없네요" 같은 말이 나오는 지점이 여기입니다. 빠진 항목이 목록에서는 빈칸으로 보이지 않기 때문입니다.

스토리 매핑은 그 목록을 눕혀서 보는 방법입니다. 세로로 쌓인 것을 사용자가 일을 해내는 순서대로 가로로 펼치고, 각 단계 아래에 필요한 작업을 세로로 답니다. 그러면 흐름 한 줄이 눈에 들어오고, 비어 있는 단계가 빈칸으로 드러납니다. 같은 항목들을 다시 배치한 것뿐인데 목록이 답하지 못하던 질문에 답하게 됩니다.

한 번 그리는 데 한 시간 반쯤 걸리는 작업이고, 팀이 함께 모여 진행합니다. 순서는 여섯 단계입니다.

1. 누구의 어떤 일을 다룰지 하나로 좁힙니다. 처음 들어온 팀장이 팀 문서를 굴리기까지처럼 한 사람과 한 목적으로 적습니다. 대상을 둘 이상 섞으면 가로축이 두 갈래로 갈려 판이 읽히지 않습니다.
2. 가로축에 큰 활동을 시간순으로 놓습니다. 가입한다, 문서를 만든다, 팀원을 부른다, 나중에 다시 찾는다 정도의 크기입니다. 이 줄만 읽어도 사용자가 하는 일이 한 문장으로 이어져야 합니다.
3. 활동마다 그 아래에 세부 단계를 답니다. 팀원을 부른다 아래에는 메일로 초대한다, 권한을 정한다, 초대가 안 갔을 때 다시 보낸다가 붙습니다. 이 줄에서 빠진 단계가 드러납니다.
4. 각 단계 아래로 작업을 세로로 쌓습니다. 위쪽에 없으면 아무것도 안 되는 것을 두고, 아래로 갈수록 있으면 좋은 것을 둡니다. 세로 순서가 우선순위입니다.
5. 가로로 선을 그어 묶음을 나눕니다. 맨 윗줄만 모아도 사용자가 처음부터 끝까지 일을 끝낼 수 있어야 하고, 그 줄이 첫 릴리스가 됩니다. 가설을 확인할 최소한의 제품인 MVP의 범위를 이 선으로 정하는 팀이 많습니다.
6. 빈칸과 과한 곳을 정리합니다. 한 단계 아래에 작업이 열두 개 쌓여 있고 옆 단계는 비어 있으면, 한쪽만 깊게 파고 있다는 뜻입니다.

이 판을 그리는 자리에는 제품과 디자인과 개발이 함께 있어야 합니다. 3번에서 빠진 단계를 찾아내는 사람은 대개 개발자이고, 5번에서 이 줄로는 쓸 수 없다고 말하는 사람은 대개 디자이너입니다.

처음 만드는 흐름에 가장 잘 맞습니다. 없던 기능을 통째로 만들 때는 무엇이 필요한지 아직 목록이 없어서, 흐름을 따라가며 빈칸을 찾는 방식이 빠릅니다. 여러 스토리로 쪼개지는 큰 덩어리인 에픽을 쪼갤 때도 쓰입니다. 무엇을 이번에 빼도 되는지를 정해야 할 때, 가로로 관통하는 선을 그어 보는 것이 목록에서 항목을 지우는 것보다 판단이 쉽습니다.

여러 팀이 같은 기능을 나눠 맡을 때도 값이 큽니다. 한 판을 함께 보고 나면 각자 맡은 부분이 어느 단계에 붙는지가 분명해져서, 서로 상대가 만들 줄 알았던 단계가 비는 일이 줄어듭니다.

반대로 맞지 않는 자리도 있습니다. 버튼 문구를 고치는 변경 한 건에는 이 기법이 과합니다. 흐름이라고 할 것이 없는 개선, 예를 들어 화면이 뜨는 속도를 2초에서 0.8초로 줄이는 일도 가로축에 놓을 단계가 없습니다. 이미 지도가 있고 항목의 크기와 순서만 다듬는 상황이면 백로그 정리가 할 일입니다.

한계는 판을 그린 뒤에 나타납니다. 처음 한 번 잘 그려 놓고 갱신하지 않으면 두 달 뒤에는 실제와 다른 그림이 벽에 붙어 있게 됩니다. 가로축을 사용자가 하는 일이 아니라 화면 순서로 그리는 실수도 흔합니다. 로그인 화면, 목록 화면, 상세 화면으로 채워진 가로축은 화면 목록일 뿐입니다.

"이건 스토리 매핑부터 하죠. 목록만 봐서는 뭐가 빠졌는지 안 보여요."

항목을 흐름 위에 올려놓고 빈칸을 찾자는 제안입니다.

"첫 묶음은 이 줄까지만 가고, 아래 두 줄은 다음으로 넘깁니다."

가로로 선을 그어 이번 출시 범위를 정했다는 뜻입니다.

"가로축이 화면 순서로 되어 있어요. 사용자가 하는 일로 다시 잡죠."

축을 잘못 잡아 판이 화면 목록이 됐다는 지적입니다.

페이지덱이 문서 공유 흐름을 다시 만들 때 이 방식으로 시작했습니다. 지현이 가로축에 문서를 고른다, 받을 사람을 정한다, 권한을 정한다, 링크를 보낸다, 나중에 회수한다를 놓았고, 민서와 태오가 각 단계 아래에 작업을 붙였습니다.

붙이는 동안 드러난 것은 회수한다 아래가 비어 있다는 사실이었습니다. 목록으로 관리하던 여든 개 항목에는 링크를 나중에 막는 작업이 한 건도 없었습니다. 첫 줄만으로 관통하는 묶음을 뽑고 나머지를 다음 분기로 넘긴 것도 이 판 위에서 정했습니다. 90분이 걸렸고, 그 뒤로 빠진 단계 이야기가 다시 나오지 않았습니다.

화면 설계도로 아는 경우가 가장 많습니다. 판이 격자 모양이고 왼쪽에서 오른쪽으로 흐르니 화면 순서를 그린 것처럼 보입니다. 하지만 세로로 쌓이는 것은 화면 요소가 아니라 만들어야 하는 작업이고, 가로로 놓이는 것은 화면이 아니라 사용자가 하는 일입니다. 화면으로 그리기 시작하면 한 화면에 여러 단계가 섞여 있는 경우를 표현할 수 없고, 정작 필요한 판단인 무엇을 먼저 만들지가 판에서 사라집니다.

한 번 그리면 끝나는 산출물로 보는 것도 흔합니다. 워크숍 형태로 진행하니 그날의 결과물처럼 느껴집니다. 그런데 만들면서 알게 되는 것이 계속 판을 바꿉니다. 3번 단계에서 못 보고 지나간 단계가 개발 중에 나오면 그 자리에 항목이 하나 더 붙어야 합니다. 갱신하지 않은 판은 두 분기 뒤에 신입에게 잘못된 지형을 알려 주는 자료가 됩니다.