사용 가이드로 건너뛰기
User Flow Diagram작성자 Owl-Listener

User Flow Diagram 스킬.

사용자가 하나의 목표를 달성하기 위해 거칠 수 있는 경로를 보여 줍니다.

  • 프로토타이핑
  • 사용자 플로우
소스 검토 · User Flow DiagramSKILL.md
작업 프로토타이핑 산출물 • 하나의 사용자 목표를 위한 플로우 다이어그램 • 레이블이 붙은 판단, 트리거, 백그라운드 작업, 종료 지점 • 성공 경로와 함께 제공되는 오류 및 복구 경로 시작하기 전에 소스는 별도의 다이어그램 애플리케이션을 요구하지 않습니다. 다만 선택한 출력 형식이 명확한 표기법을 유지해야 합니다.
편집 요약 · 검토한 소스 2026-10-07 · 생성된 예시가 아님

01 기능 소개

경로, 판단, 복구 매핑하기

표준 요소, 트리거 레이블, 시스템 주석, 복구 분기를 갖춘 화면 단위 플로우 다이어그램 가이드입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

User Flow Diagram는 제품 내 이동을 화면과 동작 수준에서 매핑합니다. 진입점, 화면, 판단, 사용자 동작, 백그라운드 프로세스, 종료 지점을 구분하여 다이어그램이 경로와 각 전환의 원인을 함께 전달하도록 합니다.

소스는 정상 경로(happy path)에서 시작한 뒤 분기, 오류, 복구, 종료를 추가할 것을 권장합니다. 이 순서는 실패를 뒤늦게 고려하지 않으면서도 플로우를 읽기 쉽게 유지해 줍니다. 또한 선형 태스크 플로우, 분기형 사용자 플로우, 화면 썸네일이 포함된 와이어 플로우를 구분합니다.

예상 산출물

  • 하나의 사용자 목표를 위한 플로우 다이어그램입니다.
  • 레이블이 붙은 판단, 트리거, 백그라운드 작업, 종료 지점입니다.
  • 성공 경로와 함께 제공되는 오류 및 복구 경로입니다.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    목표와 진입점 설정

    완료가 무엇을 의미하는지, 사용자가 어디에서 시작할 수 있는지 파악합니다.

  2. 02
    주요 경로 그리기

    분기를 추가하기 전에 일관된 표기법으로 화면과 동작을 매핑합니다.

  3. 03
    판단과 복구 추가

    모든 화살표에 이유가 있도록 조건, 시스템 이벤트, 지연, 오류, 종료 지점에 레이블을 붙입니다.

02 활용 상황

사용 시점

소스는 별도의 다이어그램 애플리케이션을 요구하지 않습니다. 다만 선택한 출력 형식이 명확한 표기법을 유지해야 합니다.

적합한 경우

  • 여러 화면에 걸친 작업사용자가 여러 화면을 거쳐 결과에 도달하는 방식을 팀이 합의해야 할 때 유용합니다.
  • 분기형 워크플로권한, 선택, 실패한 작업으로 인해 달라지는 경로를 드러내는 데 도움이 됩니다.

확인할 한계

  • 감정 여정이 아님감정과 접점을 다루는 엔드투엔드 여정 맵을 대체하지 않습니다.
  • 시각적 UI 목업이 아님플로우는 와이어프레임을 참조할 수 있지만, 완성된 화면 디자인보다는 주로 경로를 설명합니다.

준비할 입력

  • 작업 목표결과와 완료 조건을 명시합니다.
  • 화면과 진입점알고 있는 뷰와 사용자가 시작할 수 있는 위치를 제공합니다.
  • 분기 규칙권한, 유효성 검사, 실패, 시스템 측 이벤트를 포함합니다.

03 핵심 결정

핵심 결정

  1. 화살표가 동작을 설명한다

    레이블이 붙은 연결선은 플로우를 실행 가능하게 만듭니다. 레이블 없는 선은 구현에 필요한 트리거를 숨깁니다.

  2. 하나의 목표가 가독성을 지킨다

    관련 없는 목표를 분리하면 하나의 다이어그램이 제품 전체를 담은 읽기 어려운 지도가 되는 것을 막을 수 있습니다.

04 예시 브리프

집중형 브리프 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

저장소에 문서화된 설치 방법을 사용하고 참조된 보조 파일을 함께 유지하세요. 이 항목은 실행형 애플리케이션이 아니라 집중형 디자인 방법을 설명합니다.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md

소스는 별도의 다이어그램 애플리케이션을 요구하지 않습니다. 다만 선택한 출력 형식이 명확한 표기법을 유지해야 합니다.

하나의 산출물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
워크스페이스에 팀원을 초대하는 플로우에 user-flow-diagram을 사용하세요. 설정과 빈 팀 화면에서의 진입, 기존 계정과 신규 계정 분기, 만료된 초대, 권한 오류를 포함하세요. 모든 연결선에 레이블을 붙이고 사용자 동작과 백그라운드 이메일 발송을 구분하세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 모든 화살표에 트리거 또는 조건이 있습니다.
  • 완료와 조기 종료가 명확하게 표시됩니다.
  • 최소한 알려진 실패 경로에는 복구 경로가 있습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록은 해당 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 종속성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 변경될 수 있습니다.

소스 소유자
Owl-Listener
라이선스
MIT
검토한 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
표준 요소, 트리거 레이블, 시스템 주석, 복구 분기를 갖춘 화면 단위 플로우 다이어그램 가이드입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

와이어 플로우란 무엇인가요?

경로 다이어그램과 와이어프레임 썸네일을 결합하여 경로와 대략적인 화면 구조를 함께 읽을 수 있게 합니다.

제품 전체를 다루어야 하나요?

소스는 분기를 이해하기 쉽게 유지하도록 목표마다 하나의 플로우를 권장합니다.

상태 머신과는 어떻게 다른가요?

사용자 플로우는 화면과 동작을 거치는 이동을 설명합니다. 상태 머신은 특정 동작에 대한 유효한 상태와 전환을 명시합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 워크스페이스에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md