웹기획에 사용되는 플로우차트를 간단히 소개 드리겠습니다.
플로우차트는 다른말로 워크플로우로 명칭하기도 합니다.
저는 소프트웨어 공학적인 플로우차트는 지양하고 있습니다. 웹기획자 입장에서 “흐름”을 가장 중요시 하는 이유도 있지만, 누락되는 예외 케이스를 놓치지 않기 위함이 제일 큰 이유이기도 합니다. 또 개발자님들로부터 지금까지 소프트웨어 공학적인 챠트를 요구받은적도 없습니다.
중요한 것은 흐름속에서 “유저액션”, “관리자액션”, “시스템처리” 가 되어야 합니다.
제 경우, 좀 더 자세하게 분류하면 아래와 같은 요소로 플로우차트를 작성 합니다. (개발방법론으로 정의된 입력 > 판정 > 출력 등의 플로우차트는 사용하지 않습니다.)
즉, 사용자구분, 시스템등의 이용대상을 기준으로 구분을 두어 플로우차트를 만듭니다.
- 유저액션 : 유저의 클릭 또는 입력
- 관리자액션 : 관리자의 클릭 또는 입력
- 시스템 : 유저액션 또는 관리자액션에 따라 보여줄 View페이지 또는 처리해야 할 내용
- PUSH : 유저액션 또는 관리자액션에 따라 처리후 발송해야 하는 이메일 또는 알람
- API : 유저액션 또는 관리자액션에 따라 요청 후 리턴 받아야 하는 기능
- 설명 : 페이지 또는 액션별로 세부기능처리에 대한 Description을 기재
- DB : 더 디테일하고 자세한 내용의 설명을 필요로 할때 작성합니다.
위의 요소를 가지고 회원가입때 해야할 플로우를 “회원가입 버튼 클릭” 부터 시작 합니다. 또 결제의 경우 “장바구니 버튼 클릭” 또는 “주문 버튼 클릭” 부터 시작합니다.
사실 이 부분은 유저의 행동을 하나하나 쪼개어 분리한 후 가장 노멀한 순서로 종료가 되는 때 까지의 흐름을 그리고 다시 또 케이스를 바꾸어 분리를 합니다.
가령 회원가입 버튼을 클릭 하면 회원가입 페이지가 VIew 된 후, 여기에 가입정보 입력 및 가입완료 흐름을 만든 후, 다시 오픈API(SNS회원가입)추가 해 주는 방식 입니다. 이후에 약관동의가 필요할경우 다시 가입정보 입력 전 또는 후에 약관동의를 추가해 주는 것이지요.
이런 흐름표가 있을 경우, 누락되는 기능 또는 서비스를 쉽게 찾을수 있고, 디자인/개발 파트에서 쉽게 화면상세설계를 이해할 수 있습니다.
플로챠트는 PPT, Figma, Miro, Whimsical 등을 사용하며, 각 도구마다 장단점이 있습니다. 제 경우는 PPT 또는 Figma를 주로 사용하고 있습니다.
플로우차트는 흐름상의 분류를 하면 좋습니다. 회원가입, 주문및결제, 비회원주문처리 등..
웹기획자입장에서 플로우차트를 그리는 부분은 시스템적으로 분석하고 미처 생각하지 못하는 기획에 포함할 요소를 파악 할 수 있으며, 개발자분들의 마음을 이해하는데 큰 도움이 되실거라 생각 합니다.
'앱.웹 기획 > 03. IA 정보구조 설계' 카테고리의 다른 글
| 어드민 IA 설계 (0) | 2023.12.10 |
|---|---|
| IA 설계 따라하기 (0) | 2023.12.09 |