UX/UI
좋은 화면보다 먼저 설계해야 하는 사용자 흐름
좋은 화면보다 먼저 설계해야 하는 사용자 흐름
화면을 먼저 그리면 빠르게 진행되는 것처럼 보이지만 중요한 경로와 예외 상황을 놓치기 쉽습니다. 사용자의 목표에서 출발해 필요한 화면을 도출하는 방법을 살펴봅니다.
화면을 먼저 그리면 빠르게 진행되는 것처럼 보이지만 중요한 경로와 예외 상황을 놓치기 쉽습니다. 사용자의 목표에서 출발해 필요한 화면을 도출하는 방법을 살펴봅니다.
사용자는 화면을 감상하기 위해 서비스를 이용하지 않습니다
새로운 서비스를 디자인할 때는 색상과 글꼴, 카드와 버튼의 모양부터 고민하기 쉽습니다. 완성된 화면은 진행 상황을 보여주기 좋고 이해관계자의 반응도 빠르게 얻을 수 있기 때문입니다.
하지만 사용자는 아름다운 화면 자체를 보기 위해 서비스에 들어오지 않습니다. 원하는 정보를 찾고, 예약하거나 구매하고, 신청서를 제출하거나 필요한 업무를 끝내기 위해 서비스를 이용합니다.
화면이 세련되어도 다음 행동을 찾기 어렵거나 같은 정보를 반복해서 입력해야 한다면 좋은 경험으로 이어지지 않습니다. 화면마다 디자인은 잘되어 있지만 서로 어떻게 연결되는지 불분명하다면 중요한 기능이 누락되거나 불필요한 페이지가 만들어질 수도 있습니다.
사용자 흐름은 사용자가 서비스에 들어온 순간부터 목표를 완료할 때까지 거치는 행동과 선택, 시스템의 반응을 연결한 구조입니다.
흐름을 먼저 설계하면 다음 질문에 화면을 그리기 전에 답할 수 있습니다.
사용자는 어디에서 서비스에 들어오는가?
어떤 정보를 이미 알고 있는가?
무엇을 완료하려고 하는가?
목표까지 반드시 거쳐야 하는 단계는 무엇인가?
중간에 실패하면 어디에서 다시 시작하는가?
사용자의 행동을 운영자는 어떻게 처리하는가?
사용자 흐름은 UI 디자인을 대신하는 결과물이 아닙니다. 어떤 화면이 필요하고 각 화면이 어떤 역할을 해야 하는지 결정하는 기준입니다.
출발점과 완료 기준을 먼저 정의하세요
같은 사용자도 진입 경로에 따라 필요한 정보가 달라집니다
홈 화면에서 탐색을 시작한 사용자와 검색 결과에서 특정 상품으로 바로 들어온 사용자는 같은 목표를 가지고 있어도 현재 알고 있는 정보가 다릅니다.
광고를 통해 들어온 사용자는 광고에서 본 혜택이 실제 페이지에도 적용되는지 확인하고 싶어 할 수 있습니다. 알림을 눌러 돌아온 사용자는 이전에 중단한 작업을 이어서 진행하기를 기대할 수 있습니다.
대표적인 진입 경로는 다음과 같습니다.
검색 결과
광고와 캠페인
SNS 및 공유 링크
이메일과 푸시 알림
홈 화면과 내비게이션
QR 코드와 오프라인 안내
이전에 저장한 페이지
모든 사용자를 홈 화면으로 보내는 흐름만 그리면 실제 유입 경로에서 발생하는 맥락을 놓치기 쉽습니다. 출발점마다 사용자가 이미 알고 있는 정보와 기대하는 다음 행동을 확인해야 합니다.
목표는 완료 여부를 판단할 수 있어야 합니다
“상품을 둘러본다”와 같은 표현은 행동의 끝을 알기 어렵습니다. 이를 “조건에 맞는 상품을 비교하고 결제를 완료한다”로 바꾸면 필요한 단계와 성공 여부를 판단할 수 있습니다.
예약 서비스라면 완료 기준을 다음처럼 정리할 수 있습니다.
원하는 서비스를 선택했다.
이용할 날짜와 시간이 확정됐다.
필요한 정보를 입력했다.
결제 또는 신청이 정상적으로 처리됐다.
예약 결과와 이후 절차를 확인했다.
완료 기준이 명확하면 필요한 화면을 역순으로 찾을 수 있습니다. 결제를 완료하려면 결제 정보를 입력하는 화면이 필요하고, 예약 결과를 확인하려면 완료 화면과 알림이 필요합니다.
정상 흐름은 가장 짧고 명확한 경로로 만드세요
사용자가 목표를 완료하는 대표 경로를 먼저 연결합니다.
예를 들어 방문 서비스를 예약하는 흐름은 다음과 같습니다.
서비스에 진입한다.
필요한 서비스를 검색한다.
상세 정보와 조건을 확인한다.
가능한 날짜와 시간을 선택한다.
결제 수단을 선택하고 결제한다.
예약 결과와 이용 정보를 확인한다.
각 단계에는 하나의 주요 목적을 두는 것이 좋습니다. 상세 화면에서 정보를 이해하고, 날짜 선택 화면에서 일정을 고르며, 결제 화면에서는 결제를 완료하도록 행동을 분명하게 나눕니다.
정상적인 경로만 설계해서는 부족합니다
사용자는 언제든 흐름에서 벗어날 수 있습니다
기획 단계에서는 사용자가 모든 정보를 정확하게 입력하고 결제를 한 번에 완료한다고 가정하기 쉽습니다. 하지만 실제 환경에서는 다양한 문제가 발생합니다.
선택한 시간이 다른 사용자에게 먼저 예약된다.
입력한 카드로 결제가 승인되지 않는다.
인증번호가 도착하지 않는다.
네트워크 연결이 중간에 끊어진다.
필요한 자료를 준비하지 못했다.
뒤로 이동하거나 앱을 종료한다.
권한이 없어 다음 단계로 진행하지 못한다.
오류가 있다는 사실을 알리는 것으로는 충분하지 않습니다. 사용자가 문제를 해결하고 원래 목표로 돌아올 수 있는 경로가 필요합니다.
오류 메시지는 복구 행동까지 연결해야 합니다
“결제에 실패했습니다”라는 메시지만 표시하면 사용자는 무엇을 해야 할지 판단하기 어렵습니다. 실패한 이유와 다음 행동을 함께 제공해야 합니다.
예를 들면 다음과 같습니다.
해당 시간은 예약할 수 없습니다. → 가능한 다른 시간을 보여준다.
카드 승인이 거절되었습니다. → 다시 시도하거나 결제 수단을 변경한다.
연결이 중단되었습니다. → 입력한 내용을 유지하고 이어서 진행한다.
접근 권한이 없습니다. → 필요한 권한과 요청 방법을 안내한다.
복구 과정에서도 사용자가 이미 입력한 정보를 최대한 유지해야 합니다. 하나의 오류 때문에 처음부터 모든 내용을 다시 작성하게 하면 이탈 가능성이 커집니다.
운영자의 행동도 사용자 흐름에 포함하세요
사용자가 신청을 제출해도 운영자가 이를 확인하고 처리할 수 없다면 서비스의 흐름은 끝나지 않은 것입니다.
다음 과정까지 함께 연결해야 합니다.
사용자가 신청이나 결제를 완료한다.
담당자에게 새로운 요청이 전달된다.
담당자가 내용을 검토하고 상태를 변경한다.
변경된 결과가 사용자에게 안내된다.
문제가 있다면 담당자가 사용자에게 다시 요청한다.
관리자가 처리해야 하는 조건과 알림, 상태 변경이 사용자 화면과 연결되어야 실제로 운영 가능한 서비스가 됩니다.
흐름이 정리되면 필요한 화면과 UI가 자연스럽게 보입니다
사용자 흐름을 완성한 뒤에는 각 단계와 상태를 화면 목록으로 바꿉니다. 정상 경로뿐 아니라 빈 화면, 로딩, 오류, 완료와 재시도 상태도 포함합니다.
그다음 와이어프레임을 통해 각 화면에 필요한 정보와 행동을 배치합니다.
화면마다 하나의 주요 목적을 둡니다
한 화면에서 너무 많은 행동을 요구하면 사용자는 무엇부터 해야 할지 판단하기 어렵습니다.
상품 상세 화면의 주요 목적이 구매 여부를 결정하는 것이라면 상품 정보와 가격, 조건과 구매 버튼이 먼저 보여야 합니다. 관련 콘텐츠와 공유, 추천 기능은 핵심 행동을 방해하지 않는 위치에 배치합니다.
정보의 순서는 사용자의 질문을 따라갑니다
사용자는 화면을 위에서 아래로 읽으며 다음 질문의 답을 찾습니다.
이것은 무엇인가?
나에게 필요한가?
어떤 조건과 비용이 있는가?
믿고 진행해도 되는가?
다음에는 무엇을 해야 하는가?
UI의 정보 계층은 이 질문에 자연스럽게 답하는 순서로 구성해야 합니다.
시각 디자인은 흐름을 더 명확하게 만듭니다
컬러와 타이포그래피, 컴포넌트와 인터랙션은 흐름을 장식하기 위한 요소가 아닙니다. 현재 상태와 중요한 정보, 다음 행동을 더 쉽게 이해하도록 돕는 수단입니다.
주요 버튼의 색상이 강한 이유는 브랜드 컬러를 보여주기 위해서만이 아니라 사용자가 다음 행동을 찾도록 돕기 위해서입니다. 오류 상태의 색과 문구도 문제가 발생한 위치와 해결 방법을 전달해야 합니다.
UX와 UI는 분리된 두 개의 결과물이 아닙니다. 사용자 흐름이 서비스의 길을 정한다면 UI는 그 길을 이해하기 쉽게 보여주는 안내 체계입니다.
FOUR PERSPECTIVES STUDIO는 사용자의 목표와 진입 경로, 정상·예외·운영 흐름을 먼저 정리한 뒤 필요한 화면과 인터페이스를 설계합니다. 기존 서비스에서 이탈이 발생하거나 새로운 기능의 화면 구조를 결정하기 어렵다면 화면을 수정하기 전에 사용자가 목표를 완료하는 전체 경로부터 살펴볼 수 있습니다.
Latest Blogs
UX/UI
좋은 화면보다 먼저 설계해야 하는 사용자 흐름
좋은 화면보다 먼저 설계해야 하는 사용자 흐름
화면을 먼저 그리면 빠르게 진행되는 것처럼 보이지만 중요한 경로와 예외 상황을 놓치기 쉽습니다. 사용자의 목표에서 출발해 필요한 화면을 도출하는 방법을 살펴봅니다.
화면을 먼저 그리면 빠르게 진행되는 것처럼 보이지만 중요한 경로와 예외 상황을 놓치기 쉽습니다. 사용자의 목표에서 출발해 필요한 화면을 도출하는 방법을 살펴봅니다.
사용자는 화면을 감상하기 위해 서비스를 이용하지 않습니다
새로운 서비스를 디자인할 때는 색상과 글꼴, 카드와 버튼의 모양부터 고민하기 쉽습니다. 완성된 화면은 진행 상황을 보여주기 좋고 이해관계자의 반응도 빠르게 얻을 수 있기 때문입니다.
하지만 사용자는 아름다운 화면 자체를 보기 위해 서비스에 들어오지 않습니다. 원하는 정보를 찾고, 예약하거나 구매하고, 신청서를 제출하거나 필요한 업무를 끝내기 위해 서비스를 이용합니다.
화면이 세련되어도 다음 행동을 찾기 어렵거나 같은 정보를 반복해서 입력해야 한다면 좋은 경험으로 이어지지 않습니다. 화면마다 디자인은 잘되어 있지만 서로 어떻게 연결되는지 불분명하다면 중요한 기능이 누락되거나 불필요한 페이지가 만들어질 수도 있습니다.
사용자 흐름은 사용자가 서비스에 들어온 순간부터 목표를 완료할 때까지 거치는 행동과 선택, 시스템의 반응을 연결한 구조입니다.
흐름을 먼저 설계하면 다음 질문에 화면을 그리기 전에 답할 수 있습니다.
사용자는 어디에서 서비스에 들어오는가?
어떤 정보를 이미 알고 있는가?
무엇을 완료하려고 하는가?
목표까지 반드시 거쳐야 하는 단계는 무엇인가?
중간에 실패하면 어디에서 다시 시작하는가?
사용자의 행동을 운영자는 어떻게 처리하는가?
사용자 흐름은 UI 디자인을 대신하는 결과물이 아닙니다. 어떤 화면이 필요하고 각 화면이 어떤 역할을 해야 하는지 결정하는 기준입니다.
출발점과 완료 기준을 먼저 정의하세요
같은 사용자도 진입 경로에 따라 필요한 정보가 달라집니다
홈 화면에서 탐색을 시작한 사용자와 검색 결과에서 특정 상품으로 바로 들어온 사용자는 같은 목표를 가지고 있어도 현재 알고 있는 정보가 다릅니다.
광고를 통해 들어온 사용자는 광고에서 본 혜택이 실제 페이지에도 적용되는지 확인하고 싶어 할 수 있습니다. 알림을 눌러 돌아온 사용자는 이전에 중단한 작업을 이어서 진행하기를 기대할 수 있습니다.
대표적인 진입 경로는 다음과 같습니다.
검색 결과
광고와 캠페인
SNS 및 공유 링크
이메일과 푸시 알림
홈 화면과 내비게이션
QR 코드와 오프라인 안내
이전에 저장한 페이지
모든 사용자를 홈 화면으로 보내는 흐름만 그리면 실제 유입 경로에서 발생하는 맥락을 놓치기 쉽습니다. 출발점마다 사용자가 이미 알고 있는 정보와 기대하는 다음 행동을 확인해야 합니다.
목표는 완료 여부를 판단할 수 있어야 합니다
“상품을 둘러본다”와 같은 표현은 행동의 끝을 알기 어렵습니다. 이를 “조건에 맞는 상품을 비교하고 결제를 완료한다”로 바꾸면 필요한 단계와 성공 여부를 판단할 수 있습니다.
예약 서비스라면 완료 기준을 다음처럼 정리할 수 있습니다.
원하는 서비스를 선택했다.
이용할 날짜와 시간이 확정됐다.
필요한 정보를 입력했다.
결제 또는 신청이 정상적으로 처리됐다.
예약 결과와 이후 절차를 확인했다.
완료 기준이 명확하면 필요한 화면을 역순으로 찾을 수 있습니다. 결제를 완료하려면 결제 정보를 입력하는 화면이 필요하고, 예약 결과를 확인하려면 완료 화면과 알림이 필요합니다.
정상 흐름은 가장 짧고 명확한 경로로 만드세요
사용자가 목표를 완료하는 대표 경로를 먼저 연결합니다.
예를 들어 방문 서비스를 예약하는 흐름은 다음과 같습니다.
서비스에 진입한다.
필요한 서비스를 검색한다.
상세 정보와 조건을 확인한다.
가능한 날짜와 시간을 선택한다.
결제 수단을 선택하고 결제한다.
예약 결과와 이용 정보를 확인한다.
각 단계에는 하나의 주요 목적을 두는 것이 좋습니다. 상세 화면에서 정보를 이해하고, 날짜 선택 화면에서 일정을 고르며, 결제 화면에서는 결제를 완료하도록 행동을 분명하게 나눕니다.
정상적인 경로만 설계해서는 부족합니다
사용자는 언제든 흐름에서 벗어날 수 있습니다
기획 단계에서는 사용자가 모든 정보를 정확하게 입력하고 결제를 한 번에 완료한다고 가정하기 쉽습니다. 하지만 실제 환경에서는 다양한 문제가 발생합니다.
선택한 시간이 다른 사용자에게 먼저 예약된다.
입력한 카드로 결제가 승인되지 않는다.
인증번호가 도착하지 않는다.
네트워크 연결이 중간에 끊어진다.
필요한 자료를 준비하지 못했다.
뒤로 이동하거나 앱을 종료한다.
권한이 없어 다음 단계로 진행하지 못한다.
오류가 있다는 사실을 알리는 것으로는 충분하지 않습니다. 사용자가 문제를 해결하고 원래 목표로 돌아올 수 있는 경로가 필요합니다.
오류 메시지는 복구 행동까지 연결해야 합니다
“결제에 실패했습니다”라는 메시지만 표시하면 사용자는 무엇을 해야 할지 판단하기 어렵습니다. 실패한 이유와 다음 행동을 함께 제공해야 합니다.
예를 들면 다음과 같습니다.
해당 시간은 예약할 수 없습니다. → 가능한 다른 시간을 보여준다.
카드 승인이 거절되었습니다. → 다시 시도하거나 결제 수단을 변경한다.
연결이 중단되었습니다. → 입력한 내용을 유지하고 이어서 진행한다.
접근 권한이 없습니다. → 필요한 권한과 요청 방법을 안내한다.
복구 과정에서도 사용자가 이미 입력한 정보를 최대한 유지해야 합니다. 하나의 오류 때문에 처음부터 모든 내용을 다시 작성하게 하면 이탈 가능성이 커집니다.
운영자의 행동도 사용자 흐름에 포함하세요
사용자가 신청을 제출해도 운영자가 이를 확인하고 처리할 수 없다면 서비스의 흐름은 끝나지 않은 것입니다.
다음 과정까지 함께 연결해야 합니다.
사용자가 신청이나 결제를 완료한다.
담당자에게 새로운 요청이 전달된다.
담당자가 내용을 검토하고 상태를 변경한다.
변경된 결과가 사용자에게 안내된다.
문제가 있다면 담당자가 사용자에게 다시 요청한다.
관리자가 처리해야 하는 조건과 알림, 상태 변경이 사용자 화면과 연결되어야 실제로 운영 가능한 서비스가 됩니다.
흐름이 정리되면 필요한 화면과 UI가 자연스럽게 보입니다
사용자 흐름을 완성한 뒤에는 각 단계와 상태를 화면 목록으로 바꿉니다. 정상 경로뿐 아니라 빈 화면, 로딩, 오류, 완료와 재시도 상태도 포함합니다.
그다음 와이어프레임을 통해 각 화면에 필요한 정보와 행동을 배치합니다.
화면마다 하나의 주요 목적을 둡니다
한 화면에서 너무 많은 행동을 요구하면 사용자는 무엇부터 해야 할지 판단하기 어렵습니다.
상품 상세 화면의 주요 목적이 구매 여부를 결정하는 것이라면 상품 정보와 가격, 조건과 구매 버튼이 먼저 보여야 합니다. 관련 콘텐츠와 공유, 추천 기능은 핵심 행동을 방해하지 않는 위치에 배치합니다.
정보의 순서는 사용자의 질문을 따라갑니다
사용자는 화면을 위에서 아래로 읽으며 다음 질문의 답을 찾습니다.
이것은 무엇인가?
나에게 필요한가?
어떤 조건과 비용이 있는가?
믿고 진행해도 되는가?
다음에는 무엇을 해야 하는가?
UI의 정보 계층은 이 질문에 자연스럽게 답하는 순서로 구성해야 합니다.
시각 디자인은 흐름을 더 명확하게 만듭니다
컬러와 타이포그래피, 컴포넌트와 인터랙션은 흐름을 장식하기 위한 요소가 아닙니다. 현재 상태와 중요한 정보, 다음 행동을 더 쉽게 이해하도록 돕는 수단입니다.
주요 버튼의 색상이 강한 이유는 브랜드 컬러를 보여주기 위해서만이 아니라 사용자가 다음 행동을 찾도록 돕기 위해서입니다. 오류 상태의 색과 문구도 문제가 발생한 위치와 해결 방법을 전달해야 합니다.
UX와 UI는 분리된 두 개의 결과물이 아닙니다. 사용자 흐름이 서비스의 길을 정한다면 UI는 그 길을 이해하기 쉽게 보여주는 안내 체계입니다.
FOUR PERSPECTIVES STUDIO는 사용자의 목표와 진입 경로, 정상·예외·운영 흐름을 먼저 정리한 뒤 필요한 화면과 인터페이스를 설계합니다. 기존 서비스에서 이탈이 발생하거나 새로운 기능의 화면 구조를 결정하기 어렵다면 화면을 수정하기 전에 사용자가 목표를 완료하는 전체 경로부터 살펴볼 수 있습니다.
Latest Blogs
UX/UI
좋은 화면보다 먼저 설계해야 하는 사용자 흐름
좋은 화면보다 먼저 설계해야 하는 사용자 흐름
화면을 먼저 그리면 빠르게 진행되는 것처럼 보이지만 중요한 경로와 예외 상황을 놓치기 쉽습니다. 사용자의 목표에서 출발해 필요한 화면을 도출하는 방법을 살펴봅니다.
화면을 먼저 그리면 빠르게 진행되는 것처럼 보이지만 중요한 경로와 예외 상황을 놓치기 쉽습니다. 사용자의 목표에서 출발해 필요한 화면을 도출하는 방법을 살펴봅니다.
사용자는 화면을 감상하기 위해 서비스를 이용하지 않습니다
새로운 서비스를 디자인할 때는 색상과 글꼴, 카드와 버튼의 모양부터 고민하기 쉽습니다. 완성된 화면은 진행 상황을 보여주기 좋고 이해관계자의 반응도 빠르게 얻을 수 있기 때문입니다.
하지만 사용자는 아름다운 화면 자체를 보기 위해 서비스에 들어오지 않습니다. 원하는 정보를 찾고, 예약하거나 구매하고, 신청서를 제출하거나 필요한 업무를 끝내기 위해 서비스를 이용합니다.
화면이 세련되어도 다음 행동을 찾기 어렵거나 같은 정보를 반복해서 입력해야 한다면 좋은 경험으로 이어지지 않습니다. 화면마다 디자인은 잘되어 있지만 서로 어떻게 연결되는지 불분명하다면 중요한 기능이 누락되거나 불필요한 페이지가 만들어질 수도 있습니다.
사용자 흐름은 사용자가 서비스에 들어온 순간부터 목표를 완료할 때까지 거치는 행동과 선택, 시스템의 반응을 연결한 구조입니다.
흐름을 먼저 설계하면 다음 질문에 화면을 그리기 전에 답할 수 있습니다.
사용자는 어디에서 서비스에 들어오는가?
어떤 정보를 이미 알고 있는가?
무엇을 완료하려고 하는가?
목표까지 반드시 거쳐야 하는 단계는 무엇인가?
중간에 실패하면 어디에서 다시 시작하는가?
사용자의 행동을 운영자는 어떻게 처리하는가?
사용자 흐름은 UI 디자인을 대신하는 결과물이 아닙니다. 어떤 화면이 필요하고 각 화면이 어떤 역할을 해야 하는지 결정하는 기준입니다.
출발점과 완료 기준을 먼저 정의하세요
같은 사용자도 진입 경로에 따라 필요한 정보가 달라집니다
홈 화면에서 탐색을 시작한 사용자와 검색 결과에서 특정 상품으로 바로 들어온 사용자는 같은 목표를 가지고 있어도 현재 알고 있는 정보가 다릅니다.
광고를 통해 들어온 사용자는 광고에서 본 혜택이 실제 페이지에도 적용되는지 확인하고 싶어 할 수 있습니다. 알림을 눌러 돌아온 사용자는 이전에 중단한 작업을 이어서 진행하기를 기대할 수 있습니다.
대표적인 진입 경로는 다음과 같습니다.
검색 결과
광고와 캠페인
SNS 및 공유 링크
이메일과 푸시 알림
홈 화면과 내비게이션
QR 코드와 오프라인 안내
이전에 저장한 페이지
모든 사용자를 홈 화면으로 보내는 흐름만 그리면 실제 유입 경로에서 발생하는 맥락을 놓치기 쉽습니다. 출발점마다 사용자가 이미 알고 있는 정보와 기대하는 다음 행동을 확인해야 합니다.
목표는 완료 여부를 판단할 수 있어야 합니다
“상품을 둘러본다”와 같은 표현은 행동의 끝을 알기 어렵습니다. 이를 “조건에 맞는 상품을 비교하고 결제를 완료한다”로 바꾸면 필요한 단계와 성공 여부를 판단할 수 있습니다.
예약 서비스라면 완료 기준을 다음처럼 정리할 수 있습니다.
원하는 서비스를 선택했다.
이용할 날짜와 시간이 확정됐다.
필요한 정보를 입력했다.
결제 또는 신청이 정상적으로 처리됐다.
예약 결과와 이후 절차를 확인했다.
완료 기준이 명확하면 필요한 화면을 역순으로 찾을 수 있습니다. 결제를 완료하려면 결제 정보를 입력하는 화면이 필요하고, 예약 결과를 확인하려면 완료 화면과 알림이 필요합니다.
정상 흐름은 가장 짧고 명확한 경로로 만드세요
사용자가 목표를 완료하는 대표 경로를 먼저 연결합니다.
예를 들어 방문 서비스를 예약하는 흐름은 다음과 같습니다.
서비스에 진입한다.
필요한 서비스를 검색한다.
상세 정보와 조건을 확인한다.
가능한 날짜와 시간을 선택한다.
결제 수단을 선택하고 결제한다.
예약 결과와 이용 정보를 확인한다.
각 단계에는 하나의 주요 목적을 두는 것이 좋습니다. 상세 화면에서 정보를 이해하고, 날짜 선택 화면에서 일정을 고르며, 결제 화면에서는 결제를 완료하도록 행동을 분명하게 나눕니다.
정상적인 경로만 설계해서는 부족합니다
사용자는 언제든 흐름에서 벗어날 수 있습니다
기획 단계에서는 사용자가 모든 정보를 정확하게 입력하고 결제를 한 번에 완료한다고 가정하기 쉽습니다. 하지만 실제 환경에서는 다양한 문제가 발생합니다.
선택한 시간이 다른 사용자에게 먼저 예약된다.
입력한 카드로 결제가 승인되지 않는다.
인증번호가 도착하지 않는다.
네트워크 연결이 중간에 끊어진다.
필요한 자료를 준비하지 못했다.
뒤로 이동하거나 앱을 종료한다.
권한이 없어 다음 단계로 진행하지 못한다.
오류가 있다는 사실을 알리는 것으로는 충분하지 않습니다. 사용자가 문제를 해결하고 원래 목표로 돌아올 수 있는 경로가 필요합니다.
오류 메시지는 복구 행동까지 연결해야 합니다
“결제에 실패했습니다”라는 메시지만 표시하면 사용자는 무엇을 해야 할지 판단하기 어렵습니다. 실패한 이유와 다음 행동을 함께 제공해야 합니다.
예를 들면 다음과 같습니다.
해당 시간은 예약할 수 없습니다. → 가능한 다른 시간을 보여준다.
카드 승인이 거절되었습니다. → 다시 시도하거나 결제 수단을 변경한다.
연결이 중단되었습니다. → 입력한 내용을 유지하고 이어서 진행한다.
접근 권한이 없습니다. → 필요한 권한과 요청 방법을 안내한다.
복구 과정에서도 사용자가 이미 입력한 정보를 최대한 유지해야 합니다. 하나의 오류 때문에 처음부터 모든 내용을 다시 작성하게 하면 이탈 가능성이 커집니다.
운영자의 행동도 사용자 흐름에 포함하세요
사용자가 신청을 제출해도 운영자가 이를 확인하고 처리할 수 없다면 서비스의 흐름은 끝나지 않은 것입니다.
다음 과정까지 함께 연결해야 합니다.
사용자가 신청이나 결제를 완료한다.
담당자에게 새로운 요청이 전달된다.
담당자가 내용을 검토하고 상태를 변경한다.
변경된 결과가 사용자에게 안내된다.
문제가 있다면 담당자가 사용자에게 다시 요청한다.
관리자가 처리해야 하는 조건과 알림, 상태 변경이 사용자 화면과 연결되어야 실제로 운영 가능한 서비스가 됩니다.
흐름이 정리되면 필요한 화면과 UI가 자연스럽게 보입니다
사용자 흐름을 완성한 뒤에는 각 단계와 상태를 화면 목록으로 바꿉니다. 정상 경로뿐 아니라 빈 화면, 로딩, 오류, 완료와 재시도 상태도 포함합니다.
그다음 와이어프레임을 통해 각 화면에 필요한 정보와 행동을 배치합니다.
화면마다 하나의 주요 목적을 둡니다
한 화면에서 너무 많은 행동을 요구하면 사용자는 무엇부터 해야 할지 판단하기 어렵습니다.
상품 상세 화면의 주요 목적이 구매 여부를 결정하는 것이라면 상품 정보와 가격, 조건과 구매 버튼이 먼저 보여야 합니다. 관련 콘텐츠와 공유, 추천 기능은 핵심 행동을 방해하지 않는 위치에 배치합니다.
정보의 순서는 사용자의 질문을 따라갑니다
사용자는 화면을 위에서 아래로 읽으며 다음 질문의 답을 찾습니다.
이것은 무엇인가?
나에게 필요한가?
어떤 조건과 비용이 있는가?
믿고 진행해도 되는가?
다음에는 무엇을 해야 하는가?
UI의 정보 계층은 이 질문에 자연스럽게 답하는 순서로 구성해야 합니다.
시각 디자인은 흐름을 더 명확하게 만듭니다
컬러와 타이포그래피, 컴포넌트와 인터랙션은 흐름을 장식하기 위한 요소가 아닙니다. 현재 상태와 중요한 정보, 다음 행동을 더 쉽게 이해하도록 돕는 수단입니다.
주요 버튼의 색상이 강한 이유는 브랜드 컬러를 보여주기 위해서만이 아니라 사용자가 다음 행동을 찾도록 돕기 위해서입니다. 오류 상태의 색과 문구도 문제가 발생한 위치와 해결 방법을 전달해야 합니다.
UX와 UI는 분리된 두 개의 결과물이 아닙니다. 사용자 흐름이 서비스의 길을 정한다면 UI는 그 길을 이해하기 쉽게 보여주는 안내 체계입니다.
FOUR PERSPECTIVES STUDIO는 사용자의 목표와 진입 경로, 정상·예외·운영 흐름을 먼저 정리한 뒤 필요한 화면과 인터페이스를 설계합니다. 기존 서비스에서 이탈이 발생하거나 새로운 기능의 화면 구조를 결정하기 어렵다면 화면을 수정하기 전에 사용자가 목표를 완료하는 전체 경로부터 살펴볼 수 있습니다.