유저 플로우

화면을 한 장씩 그리면 장과 장 사이가 빕니다. 시안 열두 장이 각각 훌륭해도 이어 붙여 보면 아무 데서도 닿을 수 없는 화면이 하나 나오고, 반대로 두 곳에서 같은 화면으로 들어오는데 돌아갈 자리가 한 곳뿐인 경우가 나옵니다. 화면 한 장을 보고 있을 때는 이런 것이 보이지 않습니다.

그래서 구현이 시작된 뒤에 질문이 옵니다. 여기서 결제 정보가 없는 사람은 어디로 보내는지, 초대받았지만 계정이 없는 사람은 어느 화면부터 보는지 같은 것입니다. 시안에 없으니 답은 그 자리에서 만들어지고, 같은 종류의 상황인데 화면마다 다르게 처리됩니다. 한 곳에서는 안내를 띄우고 다른 곳에서는 첫 화면으로 되돌려 보내는 식입니다.

유저 플로우는 화면이 아니라 화면 사이를 그리는 일입니다. 어느 화면에서 어느 화면으로 갈 수 있고 그 사이에 무슨 조건이 걸려 있는지를 한 장에 펼쳐 놓으면, 구현 중에 나올 질문이 그리는 동안 먼저 나옵니다.

시작점 하나와 목적 하나를 정하고 그 사이를 선으로 잇습니다. 한 장에 담는 것은 목적 하나입니다.

그림에 들어가는 것은 넷입니다.

1. 시작점. 사용자가 어디서 들어오는지 적습니다. 초대 메일의 링크를 누른 사람과 검색으로 들어온 사람은 다른 화면에서 시작하고, 시작점을 하나로 뭉개면 앞쪽 절반이 사라집니다.
2. 화면. 사용자가 보는 각 화면을 상자로 둡니다. 상자 안에는 화면 이름과 그 화면에서 할 수 있는 동작만 적습니다.
3. 갈림길. 조건에 따라 길이 나뉘는 자리를 다른 모양으로 둡니다. 로그인했는가, 결제 정보가 있는가, 이 문서를 볼 권한이 있는가 같은 질문이 여기 들어갑니다.
4. 끝점. 목적을 이룬 상태이고 하나가 아닐 수 있습니다. 공유를 끝낸 상태와 중간에 그만둔 상태와 막혀서 더 못 간 상태를 따로 두면 어디를 고칠지가 보입니다.

그리는 순서가 있습니다. 문제 없이 흘러가는 기본 경로인 해피 패스를 먼저 한 줄로 긋고, 그다음에 갈림길을 붙입니다. 갈림길부터 그리기 시작하면 한 장에 스물네 갈래가 생겨서 아무도 읽지 않는 그림이 됩니다.

빠뜨리기 쉬운 갈림길은 넷입니다. 로그인하지 않은 상태, 권한이 없는 상태, 보여 줄 것이 아직 없는 상태, 요청이 실패한 상태입니다. 넷 다 시안에는 잘 그려지지 않는데 실제 사용에서는 자주 일어납니다. 목록이 비었을 때의 화면이 빠져 있으면 새로 가입한 사람이 제일 먼저 보는 화면이 없는 셈입니다.

크기가 커지면 나눕니다. 가입부터 첫 문서 공유까지를 한 장에 그리면 상자가 스무 개를 넘고, 갈림길이 어디에 걸렸는지 눈으로 따라가기 어렵습니다. 목적을 둘로 쪼개는 편이 낫습니다.

이 그림이 실제로 쓰이는 자리는 넷입니다.

첫째는 시안을 그리기 전입니다. 플로우를 먼저 그리면 만들어야 할 화면 목록이 그대로 나옵니다. 상자 열네 개 가운데 여덟 개는 이미 있는 화면이고 여섯 개만 새로 그려야 한다는 것이 착수 전에 정해집니다.

둘째는 개발에 넘길 때입니다. 구현 중에 나올 질문이 그림 안에 이미 답으로 들어 있으면 그 질문이 오지 않습니다. 권한 없는 사람을 어디로 보내는지가 다이아몬드 하나로 적혀 있으면 됩니다.

셋째는 숫자와 맞춰 볼 때입니다. 단계별로 얼마나 빠져나가는지 보는 퍼널 분석의 단계를 플로우의 상자와 같게 맞춰 두면, 어느 상자에서 사람이 빠지는지 그림 위에 숫자가 얹힙니다. 단계가 어긋나 있으면 3단계에서 절반이 빠진다는 말이 어느 화면인지부터 다시 물어야 합니다.

넷째는 자동 테스트의 범위를 정할 때입니다. 사용자 흐름 전체를 실제처럼 돌려 보는 E2E 테스트는 무엇을 돌릴지 정해야 쓸 수 있는데, 플로우의 해피 패스 한 줄이 그 목록의 첫 후보가 됩니다.

계정을 만들기까지 거치는 화면 순서인 가입 흐름처럼 특정 목적에 이름이 붙은 흐름도 있고, 그로스 쪽에서 가장 자주 다시 그립니다.

"시안은 좋은데 플로우가 없어서 이 화면에 어디서 들어오는지 모르겠어요."

화면 한 장으로는 판단할 수 없고 앞뒤를 봐야 한다는 뜻입니다.

"여기서 권한 없는 사람은 어디로 보내죠?"

갈림길이 그려지지 않아 구현하는 쪽이 정해야 하는 상황입니다.

"플로우 상자마다 숫자를 붙여 보니 세 번째에서 절반이 빠집니다."

그림과 지표를 맞춰 놓아 고칠 자리가 한 곳으로 좁혀졌다는 보고입니다.

페이지덱에서 민서가 문서 공유 흐름을 한 장으로 그렸습니다. 해피 패스는 문서 열기에서 공유 누르기, 권한 고르기, 링크 복사까지 네 상자였고, 여기에 갈림길 셋을 붙였습니다. 받는 사람이 계정이 있는지, 공유하는 사람에게 권한이 있는지, 조직 설정이 외부 공유를 막고 있는지입니다.

태오는 세 번째 갈림길에서 첫 질문을 했습니다. 조직 설정으로 막힌 경우에 안내를 띄울지 관리자에게 요청을 보낼지가 정해져 있지 않았기 때문입니다. 현우는 같은 그림의 상자 이름을 퍼널 단계 이름으로 옮겨 적었습니다.

플로우를 한 번 그리면 끝난다고 보는 경우가 가장 많습니다. 착수 전에 쓰는 도면이라 그렇게 여기기 쉽습니다. 그런데 화면은 그 뒤에도 바뀌고 그림은 그대로 남습니다. 반년 뒤에 그 파일을 연 사람은 지금 제품과 다른 경로를 보게 되고, 틀린 그림은 없는 그림보다 나쁩니다. 그래서 확정되는 시점에 한 번 갱신하거나, 아예 시안 파일 안에 함께 두고 화면을 고칠 때 같이 고치는 쪽으로 정해 둡니다.

갈림길을 빠짐없이 그려야 한다고 보는 오해도 흔합니다. 조건을 다 적어 두면 구멍이 없어 보이니 꼼꼼한 작업처럼 느껴집니다. 그런데 조건 다섯 개를 모두 그리면 경로가 서른 갈래를 넘고, 그 그림은 그린 사람도 다시 읽지 않습니다. 고를 기준은 둘입니다. 자주 일어나는가, 그리고 잘못되면 결과가 큰가. 하루에 수십 번 일어나는 경우와 한 번 어긋나면 남의 문서가 밖으로 열리는 경우를 그리고, 나머지는 문장으로 옆에 적어 둡니다.