가입 흐름

가입은 오래도록 화면 하나로 취급됐습니다. 디자이너가 가입 화면을 그리고 개발자가 그것을 만들면 끝나는 일이었습니다. 화면 단위로 보면 고칠 것도 화면 안에 있습니다. 버튼 색, 입력 칸의 여백, 안내 문구입니다.

그렇게 고쳐도 숫자가 움직이지 않는 일이 반복됐습니다. 사람이 빠져나가는 자리가 화면 안이 아니라 화면 사이에 있었기 때문입니다. 제출 버튼을 누른 뒤 인증 메일을 기다리는 동안, 메일 링크를 눌러 돌아오는 동안, 돌아왔더니 입력값이 사라져 있는 동안입니다. 어느 것도 화면의 디자인 문제가 아닙니다.

페이지덱에서도 같은 일이 있었습니다. 민서가 가입 화면을 다시 그렸는데 3주 뒤 전환율은 그대로였습니다. 태오가 로그를 열어 보니 제출까지 오는 사람은 늘었고, 인증 메일이 회사 메일 서버에서 스팸으로 분류되어 그중 3분의 1이 되돌아오지 못하고 있었습니다. 화면 하나가 아니라 순서 전체를 하나의 대상으로 묶어 부르기 시작한 것이 이 말입니다.

이 흐름은 다섯 자리로 나뉩니다.

1. 진입입니다. 사용자가 어디서 왔는지에 따라 첫 화면이 달라집니다. 가격 페이지에서 온 사람은 이미 플랜을 고른 상태이고, 동료의 초대 링크로 온 사람은 소속될 팀이 정해져 있습니다.
2. 식별 정보 입력입니다. 계정을 구분할 값을 받는 자리로, 이메일과 비밀번호를 직접 받거나 이미 있는 계정으로 들어오게 하는 소셜 로그인 버튼을 놓습니다.
3. 확인입니다. 받은 이메일이나 휴대폰 번호가 실제로 그 사람의 것인지 검사합니다. 사용자가 제품을 떠나 메일함으로 이동하는 유일한 자리라 손실이 가장 큽니다.
4. 최초 설정입니다. 팀 이름을 정하거나 동료를 초대하는 화면이 여기 놓입니다.
5. 도착입니다. 제품의 첫 화면에 닿습니다.

관리하는 값은 자리별 통과 비율입니다. 페이지덱의 지난 분기 숫자로 보면 방문 1만 명, 가입 화면 진입 2,400명, 제출 1,800명, 인증 완료 1,200명, 첫 화면 도착 1,150명입니다. 구간별로 옮기면 24퍼센트, 75퍼센트, 67퍼센트, 96퍼센트입니다.

여기서 찾는 것은 가장 낮은 칸이 아니라 앞뒤보다 유독 낮은 칸입니다. 첫 구간의 24퍼센트는 구경만 하러 온 사람이 섞여 있어 원래 낮은 자리입니다. 반면 세 번째 구간의 67퍼센트는 이미 이메일과 비밀번호까지 적어 낸 사람 셋 중 하나가 사라진다는 뜻이라 설명이 필요합니다. 이렇게 유독 손실이 큰 자리를 퍼널 이탈 구간이라고 부릅니다.

한 갈래로만 흐르지는 않습니다. 초대 링크로 온 사람은 4번 자리를 건너뛰고, 무료 체험처럼 일정 기간 전체 기능을 열어 주는 방식을 쓰는 제품은 3번 뒤에 결제 정보를 받을지 말지가 또 갈립니다. 갈래가 늘면 각 갈래의 통과 비율을 따로 세야 합니다. 합쳐 놓으면 초대 유입이 많은 달에 전체 비율이 저절로 올라 제품이 나아진 것처럼 보입니다.

이 말이 가장 자주 쓰이는 자리는 전환을 올릴 대상을 고르는 회의입니다. 모든 사용자가 반드시 지나는 좁은 목이라 통과 비율이 1퍼센트포인트만 올라도 뒤쪽 모든 칸의 사람 수가 함께 오릅니다. 반대로 여기가 막혀 있으면 제품 안쪽을 잘 만들어도 볼 사람이 오지 않습니다.

실험의 단위로도 쓰입니다. 화면 하나를 둘로 만들어 비교하는 것이 아니라 흐름 전체를 두 벌 만들어 비교합니다. 칸 다섯 개를 한 화면에 세운 흐름과 두 칸씩 세 화면으로 나눈 흐름을 절반씩 보여 주고 도착 인원을 세는 식입니다. 화면 단위로 재면 다음 화면의 손실이 성적표에 안 들어와, 앞 화면만 좋아 보이는 안이 이깁니다.

디자인에서는 이 흐름을 화면과 분기의 경로인 유저 플로우 문서로 그려 둡니다. 초대로 온 사용자와 검색으로 온 사용자가 어느 자리에서 갈라지고 어디서 다시 만나는지가 그림으로 있어야 빠진 경로를 찾을 수 있습니다.

법무와 보안의 요구가 들어오는 자리도 여기입니다. 약관 동의, 연령 확인, 사업자 확인이 모두 이 흐름 안에 들어갑니다. 어느 자리에 놓느냐가 통과 비율을 바꾸므로, 빼는 것이 불가능한 항목이라도 순서는 협의 대상입니다.

"가입 흐름 전체를 두 벌 만들어서 돌립시다. 화면 하나만 바꿔 보면 결론이 안 나와요."

손실이 화면 사이에 있으니 흐름 단위로 비교하자는 제안입니다.

"초대로 들어온 사람은 가입 흐름이 다르니까 따로 세 주세요."

갈래가 섞인 평균을 보면 개선인지 유입 구성 변화인지 구별되지 않는다는 지적입니다.

"연령 확인은 가입 흐름 마지막으로 미룰 수 있을까요. 지금 자리에서 30퍼센트가 빠집니다."

필수 항목이라도 놓이는 순서는 바꿀 수 있다는 요청입니다.

페이지덱은 인증 구간의 67퍼센트를 두고 두 가지를 같이 했습니다. 인증 메일을 보내는 주소를 회사 도메인으로 바꿔 스팸 분류를 줄이고, 메일을 기다리는 동안에도 제품 안을 둘러볼 수 있게 순서를 바꿨습니다. 인증은 문서를 저장하려는 순간으로 미뤘습니다.

두 주 뒤 세 번째 구간은 84퍼센트가 됐습니다. 다만 인증을 미룬 탓에 가짜 이메일로 만든 계정이 늘어 태오가 정리 작업을 따로 만들어야 했습니다.

화면 수가 적을수록 좋다고 읽는 경우가 가장 많습니다. 칸이 늘면 전환이 떨어진다는 사실이 널리 알려져 있으니 자연스러운 추론입니다. 하지만 화면을 넘기는 동작에도 값이 붙고, 한 화면에 칸이 너무 많으면 보기만 해도 그만두게 됩니다. 칸 다섯 개짜리 한 화면이 칸 두 개짜리 세 화면보다 잘 나오는 경우도, 그 반대도 실제로 있습니다. 이 오해를 그대로 두면 팀은 화면 수를 줄이는 일에만 매달리고, 정작 손실이 큰 인증 구간은 손대지 않습니다.

이것을 디자인 문제로만 보는 것도 오해입니다. 눈에 보이는 것이 화면이니 그렇게 보입니다. 실제로 손실이 가장 큰 자리는 메일이 도착하는지, 되돌아왔을 때 입력값이 남아 있는지, 오류 메시지가 무엇이 틀렸는지 알려 주는지처럼 화면 밖에서 정해집니다. 디자이너 혼자 고칠 수 있는 범위가 아니라서, 이 흐름을 맡는 자리에는 개발이 처음부터 함께 들어갑니다.