본문 바로가기
웹/UIUX 공부

플로우 차트 만드는 방법

by cucat 2022. 5. 18.

플로우 차트는 사용자가 서비스를 이용하는 동선을 나타내는 순서도입니다. 프로그래머에게는 상당히 익숙한 양식인데, 프로그래밍처럼 논리에 따라서 흐름이 진행되기 때문입니다. 

 

지난 글에서 메뉴 트리와 정보구조도 등의 정보 구조 설계 방법에 대해 설명했었습니다. 플로우 차트는 이 데이터를 바탕으로 작성되니 참고하시기 바랍니다.

 

플로우 차트는 서비스의 흐름을 파악하고, 보완해야할 점을 찾을 수 있기 때문에 상당히 유용하게 사용할 수 있는 방법입니다. 

 

이 글에서는 다음과 같은 내용을 다룹니다.




1. 플로우 차트 표준 기호 알기

 

플로우 차트를 그릴 때는 반드시 표준 기호로 그려야 합니다. 전 세계적으로 그렇게 하기로 약속한 내용이기 때문입니다.

플로우 차트의 표준 기호는 TCP 스쿨 플로우 차트 페이지에 설명되어 있습니다.

 

 

2. 플로우 차트 작성하기

 

해당 단계에 어떤 표준 기호를 부여해야할지를 파악하기만 해도, 플로우 차트는 자동으로 그려집니다.

 

플로우 차트를 작성하는 방법은 다음과 같습니다.

 

  1. 서비스의 각 단계나 페이지를 나열합니다.
  2. 그 단계나 페이지에서 제공하는 기능 조건을 표시합니다.
  3. Yes 또는 No를 통해 화살표의 이동 방향을 결정합니다.

 

이를 통해서 시작과 최종 목적지가 어디인지, 어떤 흐름으로 진행되는지 한눈에 파악할 수 있습니다.

 

그러나 단순히 현재의 시스템 흐름을 파악하는 것만이 플로우 차트의 목적은 아닙니다. 

 

플로우 차트를 작성하면서 흐름이 효율적이지 못하거나, 논리적이지 않거나, 사용자의 불편이 있는지 파악하고 흐름을 수정할 수 있습니다.



그런데 기획자가 아니라면 이런 기호를 다 알기는 어렵고, 자칫 어렵게 느껴질 수 있습니다. 

 

따라서 플로우 차트를 대체할 수 있는 방식을 소개해드리겠습니다.

 

2. 플로우 차트의 대안 : 와이어 플로우 차트


디자이너는 메뉴 트리가 익숙하고, 프로그래머는 플로우 차트가 익숙한 경우가 많습니다. 와이어 플로우 차트는 두 직군이 함께 이해하기 쉬우면서도 플로우 차트의 장점을 잃지 않는 방법입니다.

 

직업군에 따른 이해 방식 차이를 보완하기 위해, 와이어 프레임플로우 차트를 섞은 와이어 플로우 차트를 사용할 수 있습니다.

 

또한 플로우 차트는 대개 기획자가 만드는데, 기획자가 따로 없거나 작은 회사라면 기획자가 할 일이 너무 많아 작성하고 설명할 수 있는 여력이 안될 수도 있습니다.

 

따라서 와이어 프레임에 기능 정의를 추가해서 플로우 차트를 대체하면 디자이너와 프로그래머 모두 이해하기가 쉽습니다.

 

 

와이어 플로우 차트를 만드려면, 와이어 프레임을 만들 줄 알아야합니다. 이에 대한 내용은 다음 글에 작성해두겠습니다.

 

 

와이어 프레임 만드는 방법, 순서

와이어 프레임을 만드는 방법과 순서에 대해 알아보고 피그마 등의 관련 프로그램도 소개합니다. 또한 구현 가능한 와이어프레임 작성을 위해 웹 표준, 모바일 운영체제 가이드라인 등의 정보

cucat.tistory.com

 

 

이상으로 플로우 차트를 만드는 방법(표준 기호, 차트 그리는 방법)과 플로우 차트의 대안으로 사용할 수 있는 와이어 플로우 차트까지 정리해보았습니다. 읽어주셔서 감사합니다.

 

 

댓글