# 유저 플로우 (User Flow)

유저 플로우는 사용자가 서비스 안에서 이동하는 경로와 흐름을 시각화하는 문서입니다. 기능명세서에서 정의된 기능들이 실제로 어떤 순서로 연결되는지, 사용자가 어떤 행동을 통해 다음 화면으로 이동하는지를 설계합니다.

<figure><img src="https://3323951709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0nDmWkcH3Ia4zEb82Qz%2Fuploads%2FmM2pIYpOhAaBPX7LCG8u%2Fuser%20flow.png?alt=media&#x26;token=e516a0d2-9230-4f6d-8592-90cafc58267a" alt=""><figcaption></figcaption></figure>

### 1. 구조 이해하기

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

* **시작** : 플로우가 시작되는 진입점입니다.
* **섹션 최상위 페이지** : 각 섹션의 대표 화면입니다.
* **페이지** : 사용자가 실제로 탐색하는 개별 화면입니다.
* **행동** : 버튼 클릭, 입력 등 사용자의 인터랙션을 나타냅니다.
* **유저가 이동하는 흐름(연결선)** : 노드 간 이동 경로를 화살표로 표시합니다.

<figure><img src="https://3323951709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0nDmWkcH3Ia4zEb82Qz%2Fuploads%2FARWhJSsgwrq4WmDSL9Ju%2Fuserflow-info.png?alt=media&#x26;token=c7abc3b8-a1d0-4c29-b3d5-14faf2ffae64" alt=""><figcaption></figcaption></figure>

### 2. 유저 플로우 추가

유저 플로우는 하나의 프로젝트 안에 여러 버전을 만들어 관리할 수 있습니다. 우측 패널에서 버전 목록을 확인하고 전환할 수 있으며, 각 버전의 이름과 생성 일시가 표시됩니다.

<figure><img src="https://3323951709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0nDmWkcH3Ia4zEb82Qz%2Fuploads%2FKFqTc8pvTTOYu5S3dlgz%2Fuser%20flow-list.png?alt=media&#x26;token=50154002-95b1-4a15-9a62-49a82305db20" alt=""><figcaption></figcaption></figure>

버전은 **버전 그룹** 단위로 묶입니다. 처음 생성한 플로우를 기준으로, 이를 재생성한 버전들은 모두 같은 그룹으로 분류됩니다.&#x20;

* **버전 이름 수정 및 삭제** : 목록 우측의 더보기(⋮) 메뉴 버튼을 눌러 이름을 수정하거나 개별 삭제할 수 있습니다.
* **새 유저 플로우** : 목적이 다른 플로우를 새로 만들 때 사용합니다. 생성 시 새 버전 그룹이 만들어집니다. 예) 기능명세서를 바탕으로 "1. 새 플로우"를 생성 → 이번엔 결제 흐름에 집중한 "2. 결제 강화"를 별도로 생성
* **수정본 만들기** : 현재 선택된 버전을 기반으로 특정 부분을 개선하거나 기능명세서 변경사항을 반영할 때 사용합니다. 재생성된 플로우는 원본과 같은 그룹에 추가됩니다. 예) "1. 새 플로우"에서 온보딩을 강화한 "1-1. 온보딩 강화"를 재생성 → 거기서 게스트 모드를 추가한 "1-2. 온보딩-게스트 모드 추가"를 다시 재생성

<figure><img src="https://3323951709-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0nDmWkcH3Ia4zEb82Qz%2Fuploads%2FCSFhZbEr727iMWVfHBaR%2Fuserflow-modal.png?alt=media&#x26;token=7e469da7-8e1d-4007-a461-48e19d064ea9" alt=""><figcaption></figcaption></figure>

* 맞춤형 생성: 생성 버튼을 누르면 나오는 생성 창에 강조하고 싶은 흐름이나 방향(예: 온보딩 강조, 결제 흐름 중심으로)을 프롬프트로 입력하면, AI가 이를 반영하여 맞춤형 유저 플로우를 설계합니다.

{% hint style="info" %}
유저 플로우를 생성하려면 먼저 PRD의 '개요'가 작성되어야 하며, 기능명세서에 최소 1개 이상의 '기능'이 정의되어 있어야 합니다.
{% endhint %}

### 3. 유저 플로우 편집

생성된 유저 플로우가 수정이 필요하다면 직접 편집하여 기획 의도를 정확하게 반영할 수 있습니다. 단순한 수정은 직접 편집으로, 구조적인 큰 변경은 '수정본 만들기'로 처리하는 것을 권장합니다.

#### 노드 편집

캔버스 내에서 노드를 추가, 수정, 연결할 수 있습니다. 모든 편집은 즉시 **자동 저장**되며, 실행 취소(Undo) / 재실행(Redo)이 가능합니다. 다수가 동시 접속할 경우 다른 사용자가 편집 중인 노드에는 테두리가 표시됩니다.

* **노드 이름 수정** : 최소 1자 \~ 최대 20자 이내로 수정할 수 있습니다. 노드 우상단의 버튼 또는 노드 더블클릭으로 편집할 수 있습니다.&#x20;
* **노드 추가** : `섹션 최상위 페이지`, `페이지`, `행동` 타입을 선택하여 기존 노드의 하위 또는 같은 레벨에 새로 추가할 수 있습니다.
  * 기존 연결선 사이에도 새 노드를 추가할 수 있습니다.
* **노드 타입 변경**: 기존 노드의 타입을 다른 타입으로 변경할 수 있습니다.
  * 단, '시작 노드'와 '시작 노드 직후의 하위 노드'는 타입 변경이 불가능합니다.
* **노드 삭제**: 특정 노드를 삭제하면 그 노드에만 연결된 모든 하위 노드와 연결선이 함께 삭제됩니다.
  * 단, 하위 노드에 삭제할 노드 외의 다른 노드가 연결되어 있다면 하위 노드는 삭제되지 않습니다.

#### 연결선 편집

편집하려는 연결선을 클릭하면 나타나는 툴바를 통해 연결선을 편집할 수 있습니다.

* **수동 연결** : 노드의 소스 핸들(선이 나가는 쪽)에서부터 연결하려는 다른 노드의 타겟 핸들(타겟, 선이 들어오는 쪽)으로 드래그하면 수동으로 연결이 가능합니다. 연결 시 선은 자동 정렬됩니다.
* **연결선 삭제** : 타겟 핸들에 상위 노드가 1개뿐인 경우 해당 연결선은 끊을 수 없습니다. 상위 노드가 2개 이상일 때만 삭제할 수 있습니다.

{% hint style="info" %}
노드와 연결선은 시스템에 의해 자동 정렬되므로 사용자가 직접 위치를 바꿀 수 없습니다.
{% endhint %}

#### 섹션 편집

섹션은 **섹션 최상위 페이지 노드**에 따라 생성, 이동됩니다. 섹션 이름에 마우스를 호버해서 나타나는 툴바를 통해 편집할 수 있습니다.

* **섹션 추가** : 섹션 최상위 페이지 노드가 추가되거나 기존의 다른 노드가 섹션 최상위 페이지 노드가 되었을 때 자동으로 추가됩니다.
* **섹션 이름 수정** : 편집 버튼을 누르거나 이름을 더블 클릭해서 편집 가능합니다.
* **섹션 순서 변경** : 첫 섹션을 제외한 섹션들은 화살표 버튼으로 순서를 바꿀 수 있습니다.
* **섹션 삭제** : 섹션 최상위 페이지 노드를 제거하면 섹션이 함께 삭제됩니다.