유저 플로우 (User Flow)

유저 플로우는 사용자가 서비스에 진입한 뒤 목표를 달성하기까지 거치는 화면, 행동, 데이터 처리와 이동 경로를 시각화하는 문서입니다.

기능명세서에서 정의한 기능이 실제 사용자 경험에서 어떤 순서로 작동하는지 확인하고, 사용자가 어떤 행동을 통해 다음 단계로 이동하는지 설계할 수 있습니다.

매니패스트에서는 PRD와 기능명세서를 바탕으로 새로운 유저 플로우를 생성할 수 있습니다. 생성된 플로우는 캔버스에서 직접 편집하거나, 수정본을 만들거나, 채팅에서 AI 에이전트 매니에게 수정을 요청할 수 있습니다.

1. 구조 이해하기

유저 플로우는 노드(Node), 연결선(Edge), 섹션(Section)으로 구성됩니다. 화면 상단의 범례에서 각 노드 유형과 연결선의 의미를 확인할 수 있습니다.

노드 유형

시작: 유저 플로우가 시작되는 진입점을 나타냅니다.
페이지: 사용자가 실제로 확인하거나 탐색하는 화면을 나타냅니다.
데이터: 서비스에서 데이터를 조회하거나 저장·변경하는 단계를 나타냅니다.
분기: 조건이나 사용자의 선택에 따라 이동 경로가 나뉘는 지점을 나타냅니다.
행동: 버튼 클릭, 정보 입력, 항목 선택 등 사용자의 인터랙션을 나타냅니다.

시작 노드에서 분기 노드로 바로 연결할 수도 있습니다. 이를 활용하면 ‘앱 실행 → 로그인 여부 확인 → 홈 또는 로그인 화면’과 같이 서비스 진입 직후 경로가 나뉘는 흐름을 설계할 수 있습니다.

연결선

연결선은 한 노드에서 다음 노드로 이어지는 사용자의 이동 경로를 화살표로 표시합니다.

분기 노드에서 나뉘는 연결선에는 Y/N 또는 조건별 결과가 표시됩니다. 이를 통해 사용자가 어떤 조건에서 각 경로로 이동하는지 구분할 수 있습니다.

연결이 많은 구간에서는 여러 연결선이 하나의 줄기로 정리됩니다. 연결선이 노드를 통과하거나 문구가 서로 겹치지 않도록 배치도 자동으로 조정됩니다.

섹션

섹션은 하나의 목적이나 사용자 여정에 포함되는 노드를 묶어 보여주는 영역입니다.

예를 들어 ‘회원가입 및 로그인’, ‘상품 탐색’, ‘결제’처럼 관련된 페이지와 행동을 하나의 섹션으로 구분할 수 있습니다. 섹션 영역은 포함된 노드의 범위에 맞춰 표시됩니다.

2. 새 유저 플로우 만들기

유저 플로우를 생성하기 전 PRD의 개요를 작성하고, 기능명세서에 최소 1개 이상의 기능을 정의합니다.

오른쪽 버전 패널의 새 유저 플로우를 누르면 PRD와 기능명세서를 바탕으로 새로운 플로우를 생성할 수 있습니다.

추가 요청 사항 입력하기

새 유저 플로우 생성 화면의 추가 요청 사항에 강조하고 싶은 사용자 여정이나 설계 방향을 입력할 수 있습니다.

예:

“첫 방문 사용자의 온보딩 과정을 중심으로 만들어줘.”
“결제 실패와 재시도 경로까지 포함해줘.”
“모바일 사용자의 핵심 여정만 간단하게 정리해줘.”

추가 요청을 입력하지 않으면 PRD와 기능명세서의 전체 맥락을 바탕으로 유저 플로우가 생성됩니다.

3. 버전과 수정본 관리하기

하나의 프로젝트 안에서 목적이 다른 유저 플로우와 기존 플로우를 바탕으로 만든 수정본을 함께 관리할 수 있습니다.

오른쪽 버전 패널에서 유저 플로우의 이름과 생성 일시를 확인하고 원하는 버전으로 전환할 수 있습니다.

새 유저 플로우와 수정본 구분하기

새 유저 플로우: 기존 플로우와 목적이나 범위가 다른 사용자 여정을 새로 설계할 때 사용합니다. 새로운 버전 그룹으로 생성됩니다.
수정본 만들기: 현재 선택한 플로우를 기준으로 특정 부분만 변경하거나 보완할 때 사용합니다. 생성된 수정본은 원본과 같은 버전 그룹에 추가됩니다.

예를 들어 전체 서비스 흐름과 별도로 결제 과정만 다루는 플로우가 필요하다면 새 유저 플로우를 만듭니다. 기존 플로우에 이메일 인증 단계나 예외 경로를 추가하려면 수정본 만들기를 사용합니다.

버전 목록의 더보기 메뉴에서는 버전 이름을 수정하거나 필요하지 않은 버전을 삭제할 수 있습니다.

작업 화면을 넓게 사용하려면 버전 패널 위쪽의 패널 접기를 누릅니다.

수정본 만들기

화면 아래쪽의 수정본 만들기를 누르면 캔버스 위에 작은 패널이 열립니다. 기존 유저 플로우를 확인하면서 변경할 내용을 입력할 수 있습니다.

예:

“로그인 페이지 다음에 이메일 인증 단계를 추가해줘.”
“결제 실패 후 재시도하거나 다른 결제 수단을 선택하는 경로를 추가해줘.”
“온보딩은 유지하고 회원가입 단계만 간단하게 만들어줘.”

새 유저 플로우 생성 화면과 동일하게 추천 프롬프트를 활용할 수 있습니다.

요청 내용을 입력하고 계획 만들기를 누르면 AI가 변경 계획을 제안합니다. 계획을 확인한 뒤 수정을 진행하면 원본은 유지되고, 변경된 플로우가 같은 버전 그룹에 새로운 수정본으로 추가됩니다.

4. 채팅으로 유저 플로우 편집하기

유저 플로우를 처음부터 다시 만들지 않아도 채팅에서 AI 에이전트 매니에게 원하는 변경을 요청할 수 있습니다.

채팅 입력창에 @유저플로우를 입력하고, 표시되는 질문에서 기존 플로우 수정과 대상 플로우를 선택한 뒤 변경 내용을 요청합니다.

예:

“로그인 다음에 이메일 인증 단계를 추가해줘.”
“결제 화면 사이에 결제 버튼 클릭 행동을 추가해줘.”
“커스터마이징 섹션의 단계를 더 간단하게 정리해줘.”
“온보딩과 회원가입 섹션에 실패 경로를 추가해줘.”

편집 계획 확인하기

매니는 요청을 바로 반영하지 않고 먼저 편집 계획을 보여줍니다.

계획에서 어떤 노드와 연결선이 추가·수정·삭제되는지 확인한 뒤 편집 진행 또는 편집 취소를 선택합니다.

편집을 시작하면 현재 작업 상태가 표시되며, 진행 중인 작업을 취소할 수 있습니다. 편집을 취소하거나 작업 중 화면을 이동해도 같은 작업이 중복으로 실행되거나 크레딧이 이중으로 사용되지 않습니다.

요청을 처리하지 못한 경우에는 실패 사실과 확인할 수 있는 이유가 채팅에 표시됩니다. 안내된 내용을 확인한 뒤 수정할 노드나 섹션을 더 명확하게 지정하여 다시 요청할 수 있습니다.

5. 캔버스에서 직접 편집하기

노드 이름이나 위치, 연결선처럼 범위가 작은 변경은 캔버스에서 직접 처리할 수 있습니다.

편집한 내용은 자동으로 저장되며 실행 취소(Undo)와 재실행(Redo)을 사용할 수 있습니다.

노드 편집

이름 수정: 노드를 더블 클릭하거나 편집 메뉴를 열어 이름을 변경합니다.
노드 추가: 기존 노드의 앞이나 뒤에 페이지, 행동, 데이터, 분기 등의 노드를 추가합니다.
노드 유형 변경: 흐름의 목적에 맞게 기존 노드의 유형을 변경합니다.
노드 이동: 노드를 드래그하여 캔버스 안에서 원하는 위치로 이동합니다. 노드를 이동해도 주변 노드와 다른 섹션은 함께 밀리지 않습니다.
노드 삭제: 필요하지 않은 노드를 삭제합니다. 삭제할 노드에만 연결된 하위 흐름은 함께 삭제될 수 있으므로 연결 관계를 먼저 확인합니다.

연결선 편집

연결선을 클릭하면 해당 이동 과정에서 발생하는 행동을 입력할 수 있습니다.

예를 들어 ‘로그인 화면 → 홈 화면’ 연결선에 ‘로그인 버튼 클릭’을 입력하여 화면 사이에서 사용자가 수행하는 행동을 표시할 수 있습니다.

단, 다음과 같은 경우에는 입력 방식이 달라집니다.

행동 노드와 연결된 연결선: 행동을 중복으로 표시하지 않도록 연결선에 별도 행동을 입력할 수 없습니다.
분기 노드에서 이어지는 연결선: Y(Yes), N(No) 또는 직접 입력 중 하나를 선택할 수 있습니다.

노드의 연결 지점을 다른 노드로 드래그하면 새로운 연결선을 만들 수 있습니다.

연결 대상에 상위 노드가 하나만 있는 경우에는 흐름이 완전히 끊어지는 것을 방지하기 위해 연결선을 삭제할 수 없습니다.

노드를 이동하거나 연결 관계를 변경하면 연결선은 변경된 위치에 맞춰 자동으로 정리됩니다.

섹션 편집

화면 아래쪽의 새 섹션을 누르면 새로운 섹션과 해당 섹션의 최상위 페이지가 추가됩니다.

섹션 이름에 마우스를 올리면 표시되는 도구를 사용하여 다음 작업을 수행할 수 있습니다.

섹션 이름 수정
섹션 순서 변경
섹션 삭제

첫 번째 섹션을 제외한 섹션은 위·아래 이동 버튼으로 순서를 변경할 수 있습니다.

섹션의 최상위 페이지를 삭제하면 해당 섹션도 함께 삭제됩니다.

캔버스 정리하기

노드를 직접 이동한 뒤 전체 배치를 다시 정리하려면 화면 아래쪽의 레이아웃 초기화를 누릅니다.

노드와 섹션의 위치가 다시 정리되고, 연결선은 노드를 통과하거나 문구가 겹치지 않도록 자동으로 배치됩니다.

이전도큐먼트 뷰 (Document View)

다음와이어프레임 (Wireframe)

마지막 업데이트 1개월 전