Flowchart(순서도)
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
플로우 차트 만드는 법 #
목차 #
- 서론
- 사전적 정의
- 추천하는 툴
- 각 모형의 역할
- 작성 예시
- 정리
서론 #
오늘은 앱 개발 업무에서 사용하는 플로우 차트에 대해서 알아볼 것이다. 플로우 차트가 무엇일까? 아래 사진과 같은 도표를 본 적이 있는가? 아마 한 번쯤은 봤을 표일 것이다. 순서도를 사용하는 이유는 크게 두 가지가 있다. 하나는 차트를 작성하면서 앱, 웹 프로세스의 놓친 논리적 모순을 발견할 수 있다. 그리고 다른 하나는 작성하고 코드를 작성하면 조금이라도 스파게티화나 중복된 코드를 지울 수 있다. 덕지덕지 조건문을 남발하는 것보다 대분류부터 소분류까지 미리 나누면 코드 수를 크게 줄일 수 있다. 마지막으로 프로젝트는 대부분 혼자 하는 상황이 아닐 것이다. 순서도를 공유하여 상대방과 업무를 나누기도 용이하며 미리 생길 문제점도 논의가 가능하다. 이런 장점을 가진 플로우 차트를 어떻게 작성하면 좋을지 알아보도록 하자.
사전적 정의 #
순서도(영어: flowchart)는 워크플로 혹은 프로세스를 보여주는 다이어그램의 한 종류다. 여러 종류의 상자와 이를 이어주는 화살표를 이용해 주어진 문제에 대한 솔루션 모델을 보여준다. 프로세스 작용은 이 같은 상자들과 작업의 흐름(workflow)을 나타내는 화살표 연결로 나타낸다.
추천하는 툴 #
플로우 차트를 작성할 수 있는 툴은 정말 많다. 그중에서 가장 사람들이 많이 사용하는 것은 draw.io이다. 데스크탑 전용 응용 프로그램에서 작업할 수 있을 뿐만 아니라 웹 페이지에서도 작업이 용이하다. GitHub, GitLab, Google Cloud등에도 동기화할 수 있으며 jpg, svg, png, pdf등 다양한 확장자로 파일 저장이 가능하다. 또한 전용 확장자인 drawio를 사용하며 다른 사람들도 이 툴을 사용하여 수정을 할 수 있다.
- 공식 홈페이지: https://app.diagrams.net/
- 프로그램 다운 링크: https://github.com/jgraph/drawio-desktop/releases/tag/v21.1.2
각 모형의 역할 #
타원(Start) #
타원은 시작과 끝을 뜻한다. 앱에서는 사용자가 앱을 누른 (다운이 완료되어 실행되는) 시점부터이며 끝나는 시점은 보편적으로 앱을 종료하는 시점이다. 하지만 순서도를 앱 전부 기능을 담아 그릴 필요는 없다. 예를 들어 로그인 프로세스 부분만 플로우 차트를 그릴 수 있다. 이럴 경우 시작은 앱이 시작되는 시점, 끝은 로그인이 완료되어 메인 페이지로 넘어가는 시점일 것이다.
마름모(Decision) #
마름모는 조건 기호다. 분기를 태울 때 사용되며 프로그래밍 언어로 if~else문 혹은 switch문이 가장 자주 사용된다. 마름모의 결과는 yes 혹은 no이며 각 상황에 맞는 다음 플로우를 기획해두어야 한다. 대부분 아래와 같은 방식으로 마름모를 작성한다.
직사각형(Process) #
직사각형은 처리 과정을 뜻하는 기호다. 일을 처리하는 과정을 주로 함수로 제작하기 때문에 코드에서는 함수 혹은 클래스 안 메소드로 사용한다. 세부적으로 반복하여 처리할 때는 반복 아이콘을 사용한다.
사다리꼴(Input/Output) #
사다리꼴은 데이터의 입력과 출력을 의미한다. 나는 개인적으로 API 통신을 통한 데이터 POST나 GET을 이 도형을 사용하여 표시한다.
변형된 사다리꼴(Input) #
변형된 사다리꼴은 사용자가 직접 입력한 이벤트를 뜻한다. 대표적으로 아이디 입력, 비밀번호 입력을 자판을 통해서 하는 것이 있다.
변형된 직사각형(미리 정의된 처리) #
이 도형은 미리 정의된 처리를 표시할 때 사용한다. 만약 사용자가 페이지 이동 이벤트를 실행하였을 때 로딩바를 보여주거나 로딩과 관련된 지정 화면을 보여주는 작업등을 주로 이 도형과 함께 표시한다. 말 그대로 미리 정의된 처리이기 때문에 결괏값은 같을 경우가 많다.
디스플레이 #
각 웹 혹은 앱 화면을 뜻한다. 페이지 번호 혹은 백앤드와 사전에 협의된 공통 이름을 아래 같이 적어두면 좋다.
작성 예시 #
앱에서 로그인 프로세스를 살펴보자. 로그인에는 일반 로그인, 소셜 로그인으로 나뉜다. 또한 일반 로그인 같은 경우 비밀번호 찾기가 추가적으로 들어가야한다. 만약 완전한 사용자 정보가 필요한 경우 요즘은 PASS를 사용한다. 이 모든 조건을 충족하면서 플로우 차트를 그리려면 어떻게 해야할까?
위 사진을 보면 기본적인 페이지는 디스플레이 아이콘을 사용했다. 그리고 회원 정보 탐색을 위한 API는 GET과 같이 어떤 종류의 API인지 적고 이름을 명시한다. 나는 개인적으로 draw io에서 데이터 편집에 들어가서 속성값에 url, 변수명을 같이 적어둔다. 사용자가 직접 핸드폰의 자판으로 입력하는 아이디 입력, 비밀번호 입력은 변형된 사다리꼴을 사용했다. 사용자가 제대로 아이디, 비밀번호 양식을 지키지 않고 다음 프로세스로 넘어갈 수 있다. 이것을 제어하는 부분을 마름모로 표시했다. 로그인이 성공할 때 진행하는 프로세스(개인 정보 GET, 사용자에게 필요한 데이터 처리) 등을 하나로 묶어서 직사각형 아이콘으로 표현했다. 물론 이 프로세스도 세분화하여 순서도로 표현할 수 있다.
정리 #
순서도는 앱, 웹 개발뿐만 아니라 많은 시스템 개발에 쓰이는 방법이다. 개인적으로 타인과 업무를 분배하고 공유할 때 정말 많은 도움이 된다고 생각한다. 개발자의 역량 중 하나는 잘 써서 기록하는 것으로 생각한다. 아무리 혼자 코드를 잘 써도 같은 팀 맴버들이랑 생각 공유가 안 되면 쓸모없는 코드가 되거나 전체 생산성이 낮아질 확률이 높다. 같은 목표를 바라보고 문제점을 같이 인식하려면 전체적인 그림(나무)을 공유하는 좋은 수단이 플로우 차트이다.
