1. Flow Chart란?
- Flow Chart는 하나의 기능이나 업무가 어떤 순서로 진행되는지를 도형과 화살표를 이용해 표현하는 순서도.
- 텍스트로 기능을 설명하면 중간 과정이 빠지거나 사람마다 다르게 이해할 수 있는데, Flow Chart는 모든 흐름을 시각적으로 표현하기 때문에 누구나 동일한 프로세스를 이해할 수 있다는 장점이 있음.
- 예를 들어 회원가입 기능이라면 단순히 '회원가입 → 완료' 가 아니라
'서비스 접속 → 회원가입 버튼 클릭 → 정보 입력 → 입력값 검증 → 조건 만족 여부 → 성공이면 가입 완료 → 실패하면 오류 메시지 출력'처럼 조건에 따라 어떤 흐름으로 진행되는지까지 표현하는 것이 핵심.
2. Flow Chart의 구성 요소
- Flow Chart는 의미가 정해진 도형을 사용하여 작성함.
- Terminator : 시작(Start), 종료(End)
- Process : 하나의 작업이나 기능 수행
- Decision : 조건에 따른 분기(Yes / No)
- Input / Output : 사용자 입력 또는 데이터 출력
- Flow Line : 다음 단계로 이어지는 흐름
- 특히 Decision(마름모)이 매우 중요. 실제 서비스는 대부분 "예/아니오", "성공/실패", "로그인 여부"처럼 조건에 따라 서로 다른 화면이나 기능으로 이동하기 때문임.
- 즉, Flow Chart는 단순한 순서를 그리는 것이 아니라 조건에 따른 흐름까지 표현하는 문서임. 조건에 따른 분기를 잘 설정해줘야
3. User Flow를 작성할 때 생각해야 하는 부분
- User Flow는 사용자의 행동을 기준으로 작성하지만, 실제로는 여러 가지 예외 상황까지 함께 고려해야 함.
- 예를 들어, 상품을 구매하는 과정이라면 '로그인 안 되어 있으면 로그인 화면 이동'처럼 정상적인 흐름뿐 아니라 사용자가 중간에 마주칠 수 있는 분기까지 함께 설계해야 함.
4. Flow Chart를 작성하는 이유
UI 목업 그릴 때는 기능을 머릿속으로만 생각할 때는 빠뜨리는 부분이 많지만, 실제로 하나씩 그려 보면
- 어디서 사용자의 선택이 발생하는지
- 어떤 예외 처리가 필요한지
- 어떤 화면이 추가로 필요한지
- 개발 로직이 자연스럽게 이어지는지(개발 백그라운드가 없어서 난 어렵ㅠ)
를 쉽게 확인할 수 있음.
결국 Flow Chart를 먼저 작성하면 기능 정의가 명확해지고, 이후 Wireframe이나 화면 설계도 훨씬 수월해질 것 같음.
오늘 인사이트, 느낀 점
- 조건 분기를 얼마나 꼼꼼하게 작성하느냐에 따라 완성도가 달라짐.
- User Flow를 그릴 때는 정상적인 시나리오뿐 아니라 실패와 예외 상황까지 함께 고려해야 함.
- 기능을 바로 화면으로 그리기보다 먼저 Flow Chart로 전체 흐름을 정리하면 누락되는 기능을 줄일 수 있을 것 같음.
- 처음에는 단순히 화면 이동을 표현하는 다이어그램 정도로 생각했는데, 이걸 안 하면 여러 팀원이 협업하는 과정에서 누락되는 부분이 생길 수 있다는 것을 몸소 느낌.