사용자 흐름, 사용자 인터페이스·사용자 경험·고객 여정 설계로 이탈 줄이기
온라인 쇼핑몰에서 상품을 고른 뒤 결제하려는데 갑자기 로그인 화면이 나오고, 주소를 입력한 뒤에는 다시 상품 페이지로 돌아가야 한다면 어떨까요? 대부분의 사람은 몇 번 시도하지 않고 창을 닫습니다. 화면이 예쁘지 않아서가 아니라 다음에 무엇을 해야 하는지 알기 어렵기 때문입니다.
사용자 흐름을 살펴보면 이런 이탈이 어디에서 생기는지 보입니다. 이 글을 읽으면 사용자 흐름과 사용자 인터페이스의 차이, 화면을 연결하는 순서, 실제 점검 방법과 자주 하는 실수를 알게 됩니다. 웹사이트나 앱을 만들기 전뿐 아니라 이미 운영 중인 서비스의 문제를 찾을 때도 활용할 수 있습니다.
사용자 흐름이란 무엇인가
사용자 흐름은 사용자가 목표를 이루기까지 거치는 행동의 순서입니다. 예를 들어 배달 앱에서 음식을 주문하는 과정은 ‘앱 열기 → 음식점 찾기 → 메뉴 선택 → 장바구니 확인 → 주소와 결제 수단 확인 → 주문 완료’처럼 이어집니다.
여기서 중요한 점은 화면 목록만 적는 것이 아니라는 사실입니다. 사용자가 어떤 목적을 갖고 시작하며, 각 단계에서 무엇을 보고 어떤 선택을 하는지까지 표현해야 합니다. 한 화면에서 다음 화면으로 이동하는 길이 여러 개라면 그 갈림길도 함께 표시합니다.
- 시작점: 검색 결과, 알림, 광고, 즐겨찾기 등 사용자가 들어오는 경로
- 행동: 누르기, 입력하기, 선택하기, 스크롤하기 같은 실제 조작
- 판단: 로그인 여부, 재고 확인, 약관 동의처럼 다음 단계에 영향을 주는 조건
- 결과: 구매 완료, 신청 접수, 오류 안내, 다시 시도처럼 마지막에 도달하는 상태
사용자 인터페이스는 사용자가 보는 버튼, 글자, 색, 입력창 같은 화면 요소를 말합니다. 반면 사용자 경험은 그 화면을 이용하며 느끼는 편리함과 불편함까지 포함합니다. 버튼의 모양이 좋아도 흐름이 끊기면 경험은 나빠질 수 있습니다.
그리기 전에 확인할 체크리스트
처음부터 모든 화면을 그리려고 하면 선이 복잡해지고 중요한 문제가 묻힙니다. 먼저 사용자의 목표를 하나로 좁히는 것이 좋습니다. ‘회원 가입하기’와 ‘첫 구매하기’는 서로 다른 흐름으로 나누어야 합니다.
- 누가 이 흐름을 사용하는가? 처음 방문한 사람인지, 기존 회원인지 구분합니다.
- 사용자는 어디에서 시작하는가? 검색, 공유 링크, 알림 등 유입 경로를 적습니다.
- 완료 기준은 무엇인가? 결제 버튼을 누른 시점인지, 결제 완료 화면을 본 시점인지 정합니다.
- 반드시 필요한 정보만 요구하는가? 목적과 관계없는 입력은 중간 이탈을 늘립니다.
- 실패했을 때 돌아갈 길이 있는가? 잘못 입력했을 때 처음부터 다시 시작하지 않게 해야 합니다.
- 휴대전화에서도 같은 목표를 달성할 수 있는가? 작은 화면에서 버튼과 안내가 잘 보이는지 확인합니다.
특히 시작점을 놓치지 않아야 합니다. 사용자가 검색으로 특정 상품에 들어왔다면 첫 화면은 메인 화면이 아니라 해당 상품 정보여야 자연스럽습니다. 출발 위치가 달라지면 같은 기능도 필요한 안내와 버튼의 순서가 달라집니다.
사용자 흐름과 고객 여정 지도의 차이
두 도구는 비슷해 보이지만 쓰임이 다릅니다. 사용자 흐름은 서비스 안에서 실제로 이동하는 경로를 설계하는 데 적합합니다. 고객 여정 지도는 서비스 밖의 상황까지 포함해 사용자의 생각과 감정을 살펴보는 데 유용합니다.
| 구분 | 사용자 흐름 | 고객 여정 지도 |
|---|---|---|
| 주요 질문 | 어떤 화면을 거쳐 목표를 이루는가 | 각 접점에서 무엇을 느끼고 기대하는가 |
| 범위 | 웹사이트나 앱 안의 행동 | 검색, 문의, 이용, 재방문까지의 전체 경험 |
| 활용 시점 | 화면과 기능을 설계할 때 | 문제 원인과 개선 기회를 찾을 때 |
| 대표 결과 | 화면 연결도와 분기 구조 | 접점별 불편, 기대, 개선 과제 |
예를 들어 온라인 강의 신청을 생각해 보겠습니다. 사용자 흐름에는 강의 선택, 일정 확인, 신청서 입력, 결제, 신청 완료가 들어갑니다. 고객 여정 지도에는 강의를 검색하며 느끼는 불안, 가격을 비교하는 과정, 결제 후 수강 안내를 기다리는 경험까지 담깁니다. 둘 중 하나만 고르면 화면 문제 또는 서비스 전반의 감정 문제를 놓칠 수 있습니다.
사용자 흐름을 만드는 순서
1. 목표와 사용자를 한 문장으로 정하기
‘누구나 편하게 이용하는 앱’처럼 넓게 쓰지 말고 ‘처음 방문한 사용자가 회원 가입 없이 상품을 비교한다’처럼 구체화합니다. 목표가 선명해야 필요 없는 화면을 걷어낼 수 있습니다.
2. 실제 행동을 동사로 적기
‘상품 화면’이라고만 쓰면 사용자가 무엇을 하는지 알 수 없습니다. ‘상품 설명을 읽는다’, ‘옵션을 고른다’, ‘배송비를 확인한다’처럼 행동으로 적어야 빠진 단계가 보입니다.
3. 화면보다 조건과 분기를 먼저 찾기
회원인가, 재고가 있는가, 결제가 승인되었는가처럼 결과가 달라지는 지점을 표시합니다. 조건을 빼면 정상적인 경우만 설계하게 됩니다. 실제 서비스에서는 오류와 예외 상황이 자주 발생하므로 ‘아니오’일 때의 경로도 함께 그립니다.
4. 가장 짧은 정상 경로를 먼저 만들기
처음부터 세부 기능을 모두 넣지 말고 사용자가 목표를 달성하는 기본 경로를 완성합니다. 이후 취소, 뒤로 가기, 오류, 권한 없음 같은 상황을 덧붙입니다. 화살표가 지나치게 교차한다면 흐름을 기능별로 나누거나 시작점을 다시 확인합니다.
5. 실제 사람에게 설명해 보게 하기
설계자가 직접 설명하지 말고 다른 사람에게 ‘이 다음에는 무엇을 하겠어요?’라고 물어보세요. 상대가 멈추는 지점이 있다면 문구, 버튼 위치, 순서 중 하나가 불분명할 가능성이 큽니다. 짧은 사용성 테스트만으로도 내부 회의에서 찾지 못한 문제를 발견할 수 있습니다.
자주 하는 실수와 수정 방법
첫째, 화면을 너무 빨리 그리는 경우입니다. 색과 모양을 정하기 전에 목표와 조건을 정해야 합니다. 예쁜 화면이 복잡한 절차를 가려 주지는 못합니다.
둘째, 정상 경로만 만드는 경우입니다. 비밀번호를 틀리거나 결제가 실패했을 때 어디로 이동하는지 빠져 있으면 출시 후 문의가 급증합니다. 오류 문구도 ‘오류가 발생했습니다’에서 끝내지 말고 원인과 다음 행동을 함께 알려야 합니다.
셋째, 사용자의 출발점을 하나로 가정하는 경우입니다. 메인 화면에서 들어오는 사람과 검색 결과에서 바로 들어오는 사람은 필요한 안내가 다릅니다. 주요 유입 경로별로 첫 화면과 다음 행동을 따로 점검하세요.
넷째, 단계 수만 줄이려는 경우입니다. 단계가 적다고 항상 좋은 것은 아닙니다. 한 화면에 너무 많은 선택지를 몰아넣으면 오히려 판단이 어려워집니다. 단계 수보다 각 단계의 목적이 분명한지, 사용자가 실수했을 때 회복할 수 있는지를 우선 봐야 합니다.
자주 묻는 질문
사용자 흐름은 언제 만들면 되나요?
기획 초기에 만드는 것이 가장 좋지만, 운영 중인 서비스에도 늦지 않았습니다. 이탈률이 높은 화면이나 문의가 반복되는 기능부터 실제 경로를 그려 보면 개선 순서를 정하기 쉽습니다.
손으로 그려도 괜찮나요?
괜찮습니다. 초기에는 종이나 간단한 도형만으로도 충분합니다. 중요한 것은 도구가 아니라 시작점, 행동, 조건, 결과가 빠짐없이 드러나는지입니다. 팀원이 함께 수정해야 한다면 공동 편집이 가능한 도구를 사용하는 편이 편리합니다.
사용자 인터페이스 설계와 무엇이 먼저인가요?
대체로 사용자 흐름을 먼저 잡고 화면 요소를 설계합니다. 다만 기존 서비스의 문제를 찾는 상황이라면 실제 화면을 보며 흐름을 거꾸로 추적할 수도 있습니다. 흐름과 화면을 오가며 확인하되, 서로 다른 문제를 한꺼번에 해결하려고 하지는 않는 것이 좋습니다.
좋은 흐름인지 판단하는 기준은 무엇인가요?
사용자가 목표를 알고, 다음 행동을 예측하며, 실수해도 쉽게 돌아올 수 있는지 보세요. 여기에 실제 사용자의 테스트 결과와 이탈이 발생한 위치를 함께 확인해야 합니다. 방문자 수나 전환 수치만으로 원인을 단정하지 말고, 어떤 경로에서 문제가 생겼는지 공식 분석 자료와 실제 문의 내용을 함께 살펴보는 것이 안전합니다.