[웹기획]3단계 플로우차트(서비스 흐름도)
고객의 문제(요구사항)을 파악하고 문제에 필요한 해결방안(기능정의서)이 정해졌다면 서비스 개발을 위한 플로우차트를 만들어야 한다.
플로우차트 용어 정의
"서비스(화면) 흐름도"라고도 불리는 "플로우차트"는 사용자가 제품을 어떤 순서로 사용하는지 쉽게 파아악하기 위해 제작하는 문서이다.
다이어그램이라는 용어를 사용하는 곳도 있지만 다이어그램 종류가 많고 전문(?) 용어이기 때문에 필자는 "플로우차트"로 용어를 통일해서 사용하고 있다.
플로우차트가 필요한 이유
1) 기획서를 보는 사람이 전체 구조를 빠르고 정확하게 전달할 수 있다.
2) 프로세스상의 예외케이스(문제점)를 미리 체크할 수 있다.
3) 사용성(UX)의 효율성을 체크할 수 있다.
플로우차트 기호
플로우차트에서 사용하는 기호는 아래와 같이 다양하다. 하지만 이번 글에서는 필자가 자주 사용하는 기호만 설명을 하도록 하겠다.
파워포인트에서 제공하는 플로우차트 기호 종류1) 처리
이미지 - 처리모든 처리 과정을 표시, 기호 내에 처리 내용을 기재하는 용도로 사용한다. 예를 들어 '고객이 입력한 검색어 결과를 표시한다.'와 같은 명령을 표시한다. 하지만 필자는 화면(페이지)을 구분하는 용도로 사용한다.
2) 판단
이미지 - 판단판단은 YES or NO 따라 서비스 흐림이 달라지는 경우 사용하는 기호이다. 개발자와 커뮤니케이션을 거듭하다 보면 많은 '판단'이 추가되고 수정되는 경우를 경험하게 된다.
3) 출력
이미지 - 출력파워포인트에서는 '문서'로 표기되어 있지만 '출력'으로 더 많이 알려진 기호이다.
액션 이후에 표시되는 문구를 나타낼 때 많이 사용된다.
플로우차트 사용 방법
본 방법은 팀원들의 의견을 반영하여 팀에 맞춰 만든 플로우차트이다. 때문에 플로우차트 정석과는 다소 차이가 있다는 점을 참고하기 바란다.
처음부터 완벽한 플로우차트를 목표로 하지 말자.
플로우차트는 스케치와 같다. 스케치라는 것은 결국 많이 수정된다. rm 때문에 처음 작성하는 플로우차트는 빠르게 작성하는 것이 좋다. 플로우차트를 빠르게 작성하기 위해서 익숙한 툴을 사용하도록 하자.
대표적으로 사용하는 플로우차트 툴은 아래와 같다.
파워포인트
다른 팀원들에게 빠르게 공유하자.
구성원의 역할에 따라 관점은 다르다. 기획자는 '사업성', '사용 편의' 등을 고려해서 플로우차트를 만들지만, 개발자는 눈에 보이지 않는 부분(시스템)을 논리적으로 접근한다. 예를 들어 해당 기능은 어떤 로직에 의해 작동할 수 있는가? 어떤 예외케이스를 체크해야 버그를 줄일 수 있는가? 등을 고민한다.
즉, 기획자/디자이너/개발자의 여러 관점이 조합되어야 좋은 플로우차트를 만들 수 있다. 그러기 위해서는 기획자가 플로우차트를 빠르게 공유하고 다른 팀원들이 해당 플로우차트를 빠르게 체크해서 함께 개선해가는 것이 좋다.
예외의 경우는 경험이 팀원이 있으면 플로우차트를 체크하고 플로우차트 제작을 리드하는 것이 효율적이다.
제작 사례
이해를 돕기 위해 실제 사례로 설명하겠다. 아래 이미지는 플로우차트의 초안이다. 사용자가 접하는 페이지에 따라 플로우차트를 만들었다.
이미지 - 플로우차트 초안해당 플로우차트를 팀원들에게 공유하고 시스템에서 체크해야 할 요소들이 추가되고, 관련된 화면의 와이어프레임이 완성되면 아래와 같은 플로우차트 최종본이 완성된다.
이미지 - 플로우차트 최종본