화면 - 저장된 상품과 예상 배송일이 표시된 장바구니
행동 - '주문하기'를 누름
화면 - 배송지와 배송 시간대 선택
행동 - 시간대를 고름
화면 - 저장된 카드와 새 카드 추가 옵션이 있는 결제
행동 - '결제'를 누름
화면 - 배송 조회 링크가 있는 주문 완료
조건과 답변별 이동 위치
배송지가 여전히 유효? 아니요 → 배송지 수정 화면, 이후 배송지로 복귀. 예 → 시간대 선택
결제 승인? 예 → 주문 완료. 아니요 → 결제 실패 화면, 다시 시도(최대 2회 재시도, 이후 고객센터 문의 화면)
결제 화면에서 뒤로 가기 → 선택한 시간대를 유지한 채 배송지로 복귀
성공 및 이탈 지점
주문 완료, 결제 실패 후 고객센터 문의로 이동, 어느 화면에서든 이탈
표기 방식 또는 강조
비워 둠
재시도 루프가 2회 후 멈추고 고객센터 문의로 빠져나가는지, 뒤로 가기 경로가 알맞은 화면으로 돌아가는지, 긴 화면 이름이 잘리지 않는지 확인합니다.
같은 작업, 세 가지 방향
시작할 방향을 골라 보세요.
01
성공 경로 먼저
주요 성공 경로를 한 줄로 곧게 그리고 나머지 경로는 모두 거기서 갈라지게 해, 이해관계자와 빠르게 검토할 때 좋습니다.
02
오류·예외 상태
같은 과업의 모든 실패, 재시도, 막다른 길을 드러내 QA 계획이나 디자인 리뷰에 씁니다.
03
신규·기존 사용자
두 진입 경로가 공통 화면에서 합쳐지는 구조로, 핵심 흐름 전에 회원가입과 로그인이 갈리는 과업에 맞습니다.
템플릿이 지키는 것
항상 일관되게 유지되는 부분.
01
화면과 행동의 구분
화면은 상자로, 행동은 그 사이를 잇는 라벨로 표시해 차트가 사용 흐름을 따라가듯 읽힙니다.
02
모든 분기에 끝이 있음
각 경로가 적어 둔 종료 지점에서 끝나거나, 이유를 적은 라벨과 함께 이전 화면으로 돌아갑니다.
03
우리 팀의 화면 이름
디자인 파일과 티켓에서 쓰는 이름과 같게 유지됩니다.
사용 방법
정보 입력부터 결과까지.
01
과업 하나와 진입 지점 고르기
수업 예약, 비밀번호 재설정, 결제처럼 과업 하나만 담아야 차트가 읽기 쉽습니다.
02
화면과 행동을 순서대로 적기
각 줄을 '화면' 또는 '행동'으로 시작해야 장소와 사용자가 하는 일이 구분됩니다.
03
조건 더하기
확인 사항을 질문으로 쓰고, 뒤로 가기와 재시도 경로를 포함해 답마다 어디로 가는지 적으세요.
04
모든 종료 지점을 적고 Vizify에서 검토하기
성공, 이탈, 오류로 끝나는 지점을 적으세요. 브리프를 보내기 전에는 아무것도 실행되지 않습니다.
05
분기마다 디자인과 대조하기
모든 경로를 종료 지점까지 따라가 보고 화면 이름이 와이어프레임과 같은지 확인하세요.
결과물의 한계
사용 전에 확인할 점.
차트는 흐름을 보여 줄 뿐 화면 자체를 그리지 않습니다. 와이어프레임, UI 문구, 레이아웃은 포함되지 않습니다.
Vizify는 앱을 테스트하거나 빠진 예외 상황을 찾지 않습니다. 목적지가 없는 분기는 알려 주지만 언급하지 않은 경로는 알 수 없습니다.
차트 하나에 과업 하나입니다. 여러 과업을 한 다이어그램에 넣으면 금방 따라가기 어려워집니다.
레이아웃은 자동입니다. 내보내기 옵션은 Vizify 앱이 다이어그램에 제공하는 기능을 따릅니다.
자주 묻는 질문유저 플로우 차트와 와이어프레임은 어떻게 다른가요?+
유저 플로우 차트는 과업의 화면 순서와 분기를 보여 주고, 와이어프레임은 화면 하나의 모습을 보여 줍니다. 화면을 디자인하기 전에 플로우로 경로부터 합의하세요.
사용자가 뒤로 갈 수 있다는 것은 어떻게 표시하나요?+
"결제 화면에서 뒤로 가기 → 배송지로 복귀" 같은 줄을 추가하세요. 이전 화면을 가리키는 라벨 붙은 화살표가 됩니다.
이 유저 플로우 템플릿을 앱뿐 아니라 웹사이트에도 쓸 수 있나요?+
네. 화면은 페이지, 모달, 입력 폼의 단계가 될 수 있습니다. 팀에서 이미 쓰는 이름을 써야 차트가 티켓과 일치합니다.
오류 뒤에 어떻게 되는지 잘 모르겠다면요?+
브리프에 질문으로 남겨 두세요. Vizify가 오류 화면을 지어내지 않고 그 분기가 어디로 가야 하는지 되물으니, 팀과 빈틈을 논의하기 쉬워집니다.
