사용자 흐름: 그것이 무엇이며 UX 디자인에서 중요한 이유1 min read

훌륭한 UX는 픽셀로 시작하지 않습니다. 이는 사용자가 무엇을 하려고 하는지, 어디에서 제품을 입력하는지, 어떤 결정을 내려야 하는지, 성공적인 결과를 얻기 위한 경로를 이해하는 것에서 시작됩니다.

그 길을 a라고 부른다. 사용자 흐름.

사용자 흐름은 사람이 앱, 웹 사이트 또는 특정 작업을 통해 수행하는 단계를 시각적으로 나타낸 맵입니다. SaaS 앱 온보딩과 같은 전체 제품 경험이나 가입, 데모 예약, 뉴스레터 구독, 결제 완료와 같은 소규모 흐름을 보여줄 수 있습니다.

UX 디자이너, 제품 팀 및 창립자에게 사용자 흐름은 세부 화면을 적용하기 전에 더 나은 인터페이스를 디자인하는 가장 간단한 방법 중 하나입니다. 사용자가 혼동할 수 있는 부분, 흐름의 단계가 너무 많은 부분, 실제로 디자인해야 하는 화면을 확인하는 데 도움이 됩니다.

이 가이드에서는 사용자 흐름이 무엇인지, 어떻게 읽는지, 언제 생성하는지, 더 나은 UX 디자인을 지원하는 방법에 대해 설명합니다.

AI로 사용자 흐름을 디자인해 보세요

디자인하려는 사용자 흐름을 설명한 다음 Anima가 이를 UX, 화면 및 코드로 변환하도록 하세요.

사용자 흐름이란 무엇입니까?

에이 사용자 흐름 사용자가 제품 내에서 목표를 달성하기 위해 이동하는 경로를 보여주는 다이어그램입니다. UX 디자인에서 해당 제품은 일반적으로 앱, 웹 사이트, 웹 앱 또는 디지털 서비스입니다.

사용자 흐름은 홈페이지, 랜딩 페이지, 검색 결과, 이메일 링크, 로그인 화면, 장바구니 등의 진입점에서 시작됩니다. 계정 생성, 구매 완료, 양식 제출, 프로젝트 게시 또는 확인 페이지 연결과 같은 최종 상호 작용으로 끝납니다.

사용자 흐름은 다음을 나타낼 수 있습니다.

• 새로운 앱 검색, 가입, 사용 등 전체 제품 여정
• 비밀번호 재설정이나 계획 업그레이드와 같은 단일 작업
• 프로젝트 생성, 팀원 초대, 디자인 내보내기와 같은 기능 흐름
• 제품 내부에서 화면이 연결되는 방식을 보여주는 사용자 인터페이스 흐름

목표는 간단합니다. 인터페이스를 세부적으로 디자인하기 전에 사용자의 경로를 명확하게 만드는 것입니다.

기본 사용자 흐름 구조의 예

사용자 흐름과 사용자 인터페이스 흐름

용어 사용자 흐름 그리고 사용자 인터페이스 흐름 밀접한 관련이 있습니다.

사용자 흐름은 목표를 향한 사용자의 경로에 중점을 둡니다. 다음과 같은 질문에 답합니다.

• 사용자는 어디에서 시작합니까?
• 그들은 어떤 작업을 완료하려고 합니까?
• 그 과정에서 그들은 어떤 결정을 내립니까?
• 성공하거나, 실패하거나, 다른 길을 택하면 어떻게 되나요?

사용자 인터페이스 흐름은 화면, 상태, 버튼, 양식 및 인터페이스 요소가 연결되는 방식에 보다 구체적으로 중점을 둡니다. 다음과 같은 질문에 답합니다.

• 이 화면 다음에는 어떤 화면이 나오나요?
• 사용자가 이 버튼을 클릭하면 어떻게 되나요?
• 이 오류 상태는 어디로 연결되나요?
• 양식을 제출한 후 사용자에게 무엇이 표시되나요?

실제로 UX 팀은 두 가지를 함께 사용하는 경우가 많습니다. 사용자 흐름은 경로를 정의합니다. 사용자 인터페이스 흐름은 제품 UI 내에서 해당 경로를 구체적으로 만듭니다.

사용자 흐름을 읽는 방법

사용자 흐름은 사용자가 진입점에서 최종 상호 작용까지 취하는 단계를 배치합니다. 각 단계는 일반적으로 노드라고도 하는 모양으로 표시됩니다. 노드는 이동 방향을 나타내는 화살표로 연결됩니다.

대부분의 사용자 흐름 다이어그램은 간단한 시각적 언어를 사용합니다.

• 원형 또는 타원형: 시작점 또는 끝점
• 구형: 화면, 페이지 또는 작업
• 다이아몬드: 예/아니요, 성공/실패, 경로 선택 등의 결정 지점
• 화살: 단계 간 이동 방향

사용자 흐름 구성요소 설명

예를 들어 간단한 가입 사용자 흐름은 다음과 같습니다.

1. 사용자가 홈페이지에 접속
2. 사용자가 ‘무료 시작’을 클릭합니다.
3. 사용자가 이메일과 비밀번호를 입력합니다.
4. 시스템은 이메일이 유효한지 확인합니다.
5. 사용자가 계정을 확인합니다
6. 사용자가 온보딩 화면에 도달함
7. 사용자가 설정을 완료함
8. 사용자가 대시보드에 접속합니다.

이러한 종류의 사용자 흐름 예시는 팀이 모든 화면을 디자인하기 전에 경험을 이해하는 데 도움이 됩니다.

사용자 흐름 예시

사용자 흐름을 실제 제품 작업에 연결하면 이해하기가 더 쉬워집니다. 다음은 UX 팀이 제품 계획 중에 생성하는 몇 가지 일반적인 사용자 흐름 예입니다.

가입 사용자 흐름

가입 사용자 흐름은 새로운 방문자가 등록된 사용자가 되는 방법을 매핑합니다.

1. 방문 페이지 방문
2. 가입 CTA를 클릭하세요.
3. 가입 방법 선택
4. 계정 세부정보 입력
5. 이메일 확인
6. 온보딩 완료
7. 제품 대시보드에 접근

이 흐름은 팀이 첫 번째 경험에서 마찰을 줄이는 데 도움이 됩니다. 가입 단계가 너무 많고, 양식 필드가 불명확하거나, 확인 상태가 혼란스러우면 사용자가 제품을 보기도 전에 중단할 수 있습니다.

Checkout 사용자 흐름

결제 사용자 흐름은 사용자가 제품 관심에서 구매로 이동하는 방식을 매핑합니다.

1. 제품 또는 가격 페이지 보기
2. 항목 추가 또는 요금제 선택
3. 장바구니 또는 요금제 세부정보 검토
4. 결제 정보 입력
5. 구매 확인
6. 성공 페이지 또는 영수증에 도달

모든 추가 단계가 전환에 영향을 미칠 수 있으므로 이 흐름은 전자상거래, SaaS 및 구독 제품에 특히 중요합니다.

로그인 및 비밀번호 재설정 사용자 흐름

로그인 흐름은 복귀 사용자가 극단적인 경우를 포함하여 자신의 계정에 액세스하는 방법을 매핑합니다.

1. 로그인 페이지 열기
2. 자격 증명을 입력하세요
3. 시스템이 입력을 검증합니다.
4. 사용자가 성공적으로 로그인했거나 오류가 표시됨
5. 필요한 경우 사용자가 비밀번호 재설정을 시작합니다.
6. 사용자가 이메일을 확인합니다
7. 사용자가 새 비밀번호를 설정함
8. 사용자가 제품으로 반품

로그인 프로세스에 대한 사용자 흐름의 예(작업 흐름)

온보딩 사용자 흐름

온보딩 사용자 흐름은 신규 사용자가 첫 번째 성공적인 제품 순간에 도달하는 방법을 매핑합니다.

1. 계정 만들기
2. 설정 질문에 답변
3. 템플릿 또는 시작점 선택
4. 첫 번째 작업 완료
5. 성공 상태 보기
6. 제품으로 계속

AI 제품, 디자인 도구 및 생산성 앱의 경우 사용자가 다음에 수행할 작업을 빠르게 이해해야 하기 때문에 온보딩 흐름이 중요합니다.

사용자 흐름을 생성하는 경우

설계 프로세스 초기, 이상적으로는 초기 사용자 조사 후와 충실도가 높은 UI 설계 이전에 사용자 흐름을 생성합니다.

이 단계에서 사용자 흐름은 다음을 수행하는 데 도움이 됩니다.

• 어떤 화면이 있어야 하는지 결정
• 불필요한 단계 제거
• 혼란스러운 결정 포인트 식별
• 제품 구조를 중심으로 팀을 정렬하세요
• 계획 프로토타입 더 빠르게
• 깨진 경로에 대해 세련된 화면을 디자인하지 마십시오.

사용자 흐름은 제품 수명주기 후반에도 유용합니다. 기존 인터페이스의 성능이 저하되는 경우 사용자 흐름을 통해 사람들이 이탈하거나 반복하거나 주요 작업을 완료하지 못하는 위치를 진단하는 데 도움이 될 수 있습니다.

즉, 사용자 흐름은 신제품에만 국한되지 않습니다. 기존 제품을 개선하는 데에도 유용합니다.

UX 설계에서 사용자 흐름의 역할

사용자 흐름은 사용자 목표를 제품 구조에 연결하기 때문에 UX 설계의 핵심 부분입니다. 간격, 타이포그래피, 시각적 계층 구조 또는 구성 요소에 대해 걱정하기 전에 사용자가 달성하려는 것이 무엇인지, 그리고 제품이 이를 달성하는 데 어떻게 도움이 되는지 알아야 합니다.

사용자 흐름은 UX 팀이 세 가지 중요한 작업을 수행하는 데 도움이 됩니다.

1. 보다 직관적인 인터페이스 만들기

명확한 사용자 흐름은 최종 인터페이스를 더 쉽게 이해할 수 있도록 해줍니다.

설계하기 전에 흐름을 매핑하면 마찰을 조기에 발견할 수 있습니다. 어쩌면 사용자는 충분한 정보를 얻기 전에 결정을 내려야 할 수도 있습니다. 양식이 너무 빨리 나타날 수도 있습니다. 확인 단계가 누락되었을 수도 있습니다. 어쩌면 하나면 충분할 세 개의 화면이 있을 수도 있습니다.

흐름이 혼란스럽다면 인터페이스도 혼란스러울 것입니다.

2. 기존 인터페이스 평가

사용자 흐름은 예상대로 전환되거나 유지되지 않을 수 있는 기존 제품을 최적화하는 좋은 방법입니다. 사용자가 중요한 작업을 전환, 활성화 또는 완료하지 않는 경우 현재 흐름을 매핑하세요.

사용자가 잘못된 화면으로 이동하거나, 너무 많은 정보를 요청하거나, 사용자의 의도와 일치하지 않는 경로를 강제로 거치는 것을 발견할 수 있습니다.

3. 팀 구성원과 이해관계자에게 전략을 전달하세요.

사용자 흐름은 협업에 적합합니다. 디자이너, 개발자, PM, 의사 결정자 및 이해관계자에게 경험에 대한 공유 지도를 제공합니다.

디자이너는 흐름을 사용하여 화면을 계획할 수 있습니다. 개발자는 이를 사용하여 상태와 극단적인 사례를 이해할 수 있습니다. PM은 이를 사용하여 요구 사항을 명확히 할 수 있습니다. 이해관계자는 팀이 세부 설계 또는 구현에 투자하기 전에 이를 사용하여 경험의 논리를 검토할 수 있습니다.

사용자 흐름은 개발자가 전반적인 흐름을 이해하는 데 도움이 될 수도 있습니다. 최종 프로토타입 뒤의 구조, 이는 핸드오프 더 효율적입니다.

사용자 여정과 사용자 흐름

사용자 여정과 사용자 흐름은 혼동되는 경우가 많지만 동일한 것은 아닙니다.

에이 사용자 여정 사용자와 제품의 관계에 대한 더 넓은 이야기를 전달합니다. 일반적으로 제품 사용 전, 사용 중, 사용 후 사용자 목표, 감정, 동기, 문제점 및 터치포인트가 포함됩니다.

에이 사용자 흐름 사용자가 특정 목표를 달성하기 위해 제품 내에서 이동하는 경로에 중점을 둡니다.

주요 차이점

둘 다 유용합니다. 여정은 사용자의 상황을 이해하는 데 도움이 됩니다. 흐름은 인터페이스를 통해 실제 경로를 디자인하는 데 도움이 됩니다.

사용자 흐름을 만드는 방법

화이트보드, 디자인 도구, 다이어그램 도구 또는 AI 디자인 도구를 사용하여 사용자 흐름을 만들 수 있습니다. 형식은 경로의 명확성보다 중요하지 않습니다.

1. 사용자 목표 정의

사용자가 완료하려는 작업부터 시작하세요.

• 계정 만들기
• 제품 구매
• 데모 예약
• 웹사이트 게시
• 팀원 초대
• 디자인을 코드로 내보내기

사용자 흐름은 모호한 제품 영역이 아닌 특정 목표를 중심으로 구축되어야 합니다.

2. 진입점 선택

사용자가 시작하는 위치를 결정합니다. 예를 들어 홈페이지, 가격 페이지, 검색 결과, 이메일 캠페인, 앱 대시보드, 알림 또는 공유 링크가 있습니다.

서로 다른 진입점은 서로 다른 흐름을 생성할 수 있습니다. 재방문자와 최초 방문자에게는 동일한 경로가 필요하지 않을 수 있습니다.

3. 행복한 길을 지도로 그려보세요

행복한 길은 처음부터 끝까지 가장 간단하고 성공적인 길이다.

1. 사용자가 가격 페이지를 엽니다.
2. 사용자가 요금제를 선택합니다.
3. 사용자가 계정을 생성합니다
4. 사용자가 결제 세부정보를 입력합니다.
5. 사용자가 구매를 확인함
6. 사용자가 성공 페이지로 이동

이는 기본 경험을 제공합니다.

4. 결정 및 엣지 케이스 추가

실제 사용자가 항상 완벽한 경로를 따르는 것은 아닙니다. 다음과 같은 결정 사항을 추가합니다.

• 사용자에게 이미 계정이 있습니까?
• 양식이 유효한가요?
• 결제 성공하셨나요?
• 사용자가 월간 청구 또는 연간 청구를 선택했습니까?
• 사용자에게 계속할 권한이 있습니까?
• 사용자가 취소하면 어떻게 되나요?

이러한 분기는 간단한 경로를 실제 UX 디자인 사용자 흐름으로 바꾸는 것입니다.

5. 흐름을 단순화하세요

흐름이 매핑되면 마찰을 찾으십시오.

• 단계를 제거할 수 있나요?
• 화면을 결합할 수 있나요?
• 너무 일찍 정보를 요청하고 있는 걸까요?
• 다음 행동은 뻔한가?
• 막다른 골목이 있나요?
• 오류 상태가 명확합니까?
• 사용자는 무슨 일이 일어났는지 항상 알고 있나요?

최고의 사용자 흐름은 복잡성이 이미 이면에서 해결되었기 때문에 명백하게 느껴집니다.

간단히 말해서 사용자 흐름

사용자 흐름은 제품 디자인을 위한 구조적 맵입니다. 사용자가 앱, 웹 사이트 또는 작업을 시작점부터 최종 상호 작용까지 이동하는 방법을 보여줍니다.

강력한 사용자 흐름:

• 명확한 사용자 목표로 시작
• 사용자의 진입점을 표시합니다.
• 경로의 단계, 화면 및 결정을 매핑합니다.
• 중요한 엣지 케이스 포함
• 상세한 UI 설계 전에 팀이 마찰을 식별하는 데 도움이 됩니다.
• 디자이너, 개발자, PM 및 이해관계자가 더 쉽게 핸드오프할 수 있습니다.

UX 팀의 경우 사용자 흐름은 사용자 연구를 인터페이스 구조로 전환하는 가장 실용적인 도구 중 하나입니다. 화면별로 추측하는 대신 의도를 가지고 디자인하는 데 도움이 됩니다.

FAQ: 사용자 흐름

사용자 흐름이란 무엇입니까?

사용자 흐름은 사용자가 앱, 웹 사이트 또는 제품 작업을 통해 이동하는 경로를 보여주는 다이어그램입니다. 일반적으로 홈페이지나 로그인 화면과 같은 진입점에서 시작하여 사용자가 가입, 구매, 양식 제출과 같은 목표를 완료하면 종료됩니다.

UX 디자인의 사용자 흐름은 무엇입니까?

UX 디자인에서 사용자 흐름은 사용자가 목표를 달성하기 위해 취하는 단계, 화면, 결정 및 작업을 매핑합니다. UX 팀은 고품질 화면을 만들기 전에 사용자 흐름을 사용하여 제품 구조를 계획하고, 마찰을 줄이고, 보다 명확한 인터페이스를 설계합니다.

사용자 흐름과 사용자 여정의 차이점은 무엇인가요?

사용자 여정은 사용자 동기, 감정, 문제점 및 터치포인트를 포함하여 더 광범위한 경험을 보여줍니다. 사용자 흐름은 사용자가 작업을 완료하기 위해 제품 내에서 선택하는 특정 경로에 중점을 둡니다.

사용자 인터페이스 흐름이란 무엇입니까?

사용자 인터페이스 흐름은 화면, UI 상태, 버튼, 양식 및 상호 작용이 제품 내부에서 연결되는 방식을 보여줍니다. 이는 사용자 흐름과 밀접하게 관련되어 있지만 인터페이스 수준 경로에 더 구체적으로 중점을 둡니다.

언제 사용자 흐름을 만들어야 합니까?

초기 사용자 조사 후 상세한 UI 설계 전에 사용자 흐름을 생성합니다. 나중에 기존 제품을 감사하고, 감소를 진단하거나 전환을 개선하기 위해 사용자 흐름을 만들 수도 있습니다.

사용자 흐름의 예는 무엇입니까?

일반적인 사용자 흐름 예로는 가입 흐름, 체크아웃 흐름, 온보딩 흐름, 로그인 흐름, 비밀번호 재설정 흐름, 예약 흐름, 업그레이드 흐름, 팀 동료 초대 흐름이 있습니다.

사용자 흐름이 중요한 이유는 무엇입니까?

사용자 흐름은 팀이 세부 설계 또는 개발에 투자하기 전에 사용자가 제품을 통해 이동하는 방식을 이해하는 데 도움이 됩니다. 프로세스 초기에 마찰, 누락된 단계, 혼란스러운 결정, 불필요한 복잡성이 드러납니다.

사용자 흐름을 어떻게 만드나요?

사용자 목표로 시작하고, 진입점을 선택하고, 행복한 경로를 매핑하고, 결정과 극단적 사례를 추가한 다음 경로를 단순화하세요. 시작과 끝 지점에는 원이나 타원을 사용하고, 화면이나 작업에는 직사각형을, 결정에는 다이아몬드를, 방향을 표시하려면 화살표를 사용하세요.

사용자 흐름 및 UX 설계를 위해 Anima Playground를 사용해 보세요.

Anima Playground 브라우저에서 제품 아이디어부터 UX 흐름, 디자인 및 작업 코드까지 이동할 수 있습니다. 구축하고 싶은 경험을 설명하고, AI로 개선하고, 그 결과를 실제 대화형 제품으로 전환하세요.

Anima Playground로 설계 시작.