Flowchart로 업무흐름을 한 눈에 파악하기
업무 순서를 시각화하여 업무의 핵심을 빠르게파악하고 실행하기
업무나 일을 수행하기 위해 일의 순서나 흐름을 계획하고 구성하는데 일반적으로 목록(list)방식을 많이 활용하고 있습니다. 우선 할일들을 중심으로 생각의 흐름대로 작성한 후, 작성 내용들을 위아래로 이동하면서 실제 효율을 높일 일의 수행단계와 순서들을 설계하고 구체화하는데요. 글로만 작성하다보니, 실제 어떻게 일들이 진행될지 머릿속으로만 생각하다보면 놓치는 부분들이 있을 수 있어서 이를 보완하고자 일의 순서를 시각화할 수 있는 방법으로 플로우차트(FlowChart)를 사용하곤합니다. Whimsical이나 Draw.io와 같은 시각적인 플로우차트 컴포넌트들과 다양한 템플릿 및 도구들을 제공하는 서비스나 제품의 경우, 사용의 편의성과 간편성은 높지만 사용방법에 익숙치 않아서 작성 중간에 사용법 배우다가 작성할 내용을 빠뜨리기도 하고, 내용과 함께 형식도 고려하다보니 작성 시간이 더 걸리는 점들이 아쉽더군요.
뭔가 대안이 필요하다는 생각을 하던 차에 최근 “당근메일”에서 운영하고 있는 카카오톡 오픈채팅방에서 opryu님께서 공유해 주신 “flowchart.fun”을 사용해보니 작성할 내용에 집중할 수 있고 형식에 맞춘 텍스트 작성만으로 빠르게 플로우차트를 생성해주는 기능이 무척이나 유용해서 code2flow와 함께 소개해드리고자 합니다.
flowchart.fun
“플로우차트 펀” 서비스는 웹 상에서 동작합니다. 웹 브라우져에서 flowchart.fun을 입력하시면, 아래와 같이 2개의 panel로 나누어진 화면을 만나 보실 수 있습니다(한글이 지원되서 매우 유용하네요). 왼쪽에는 플로우차트에 입력할 텍스트와 화살표, 화살표에 넣은 설명문을 작성하며, 오른쪽에 왼쪽 내용을 순서도로 표시한 그림이 표시됩니다. 오른쪽 panel에서는 마우스의 스크롤 버튼을 사용해서 뷰(view)의 크기를 변경할 수 있으며, 상자를 클릭하면 화면 내에서 위치를 이동하여 배치를 변경할 수 있습니다. flowchar.fun에서는 생성된 순서도를 svg파일 형식으로 다운로드 받을 수 있습니다. 아래는 커피전문점에서 커피를 주문하는 과정을 순서도로 작성한 예시입니다.
플로우 차트를 생성하기 위해 텍스트를 입력하는 방법에는 몇가지 규칙들이 있습니다. 왼쪽의 panel을 보시면, 행으로 구분된 순차번호가 표시됩니다. 한줄에 하나의 문장만 입력이 가능하며, 순차관계는 space(공백)로 구분됩니다. space를 첫글자 앞에 몇개 있는지에 따라 작성 내용이 바로 윗 내용의 다음 순서로 위치하게 됩니다. 작성 시, 중요한 부분의 하나는 순서 관계를 연결하는 화살표입니다. 순서방향의 화살표에 설명을 추가하려면, 위의 3번과 같이 콜론(:)을 사용해서 앞에는 화살표에 들어갈 내용, 콜론 뒤에는 박스에 들어갈 내용([stay] 대기자가 있다면 : 줄서있는다)을 기술합니다. 만일, 화살표가 이미 작성한 내용의 박스를 가르키도록 하려면 해당 내용을 포함하는 행의 번호나 행 작성 시 행의 내용을 구별하기 위해서 사용하는 [ ] 안의 구분자를 괄호안에 입력하여 설정하면 원하는 박스로 화살표를 이동시킬 수 있습니다.
한가지 참고할 사항은 Flowchar.fun에서는 조건분기(branch)나 반복(loop) 기능을 제공하지 않기 때문에 이를 구현하기 위해서는 화살표에 분기조건의 값을 작성(4,5번 행)하여 분기에 따른 순서도를 작성해야하며, 조건이 만족될때까지 계속 반복해야하는 loop의 경우 4번처럼 (stay) 문장을 사용해서 loop를 설정해야 합니다. 별다른 GUI의 도구 없이도 텍스트 내용만으로 플로우차트를 편리하고 간편하게 작성할 수 있어서 빠른 순서도 작성에 매우 유용합니다.
code2flow
앞서 소개한 flowchart.fun이 박스 형태로 내용의 흐름을 빠르고 간편하게 설계하는데 초점을 맞추었다면, 이번에 소개하는 code2flow는 프로그래밍하는 방식을 활용해서 복잡한 순서도 작성이 가능합니다. 물론 실제 코드가 아닌, 순서도에 들어갈 내용중심의 텍스트를 작성하고, 분지조건 설정이나 루프(while)등은 코딩과 같은 방식으로 설정할 수 있습니다. 위의 커피매장에서 커피를 주문하는 단계를 code2flow로 작성하면 아래와 같습니다.
code2flow에서는 작성내용의 첫 줄과 마지막 줄을 자동으로 순서도의 시작과 끝으로 인식하기 때문에 여기서는 Start, End를 앞 뒤에 추가하여 새로운 프로세스의 시작과 끝을 표시하도록 하였습니다. flowchart.fun보다는 제어구분(if, while)을 사용할 수 있어서 기존의 순서도에서 사용되는 비주얼 컴포넌트들이 제대로 표시됩니다. code2flow에서 표현식(expression)으로는 if, else, switch, case, for, return, goto, while, do ~ while, function, try~catch, block등이 사용가능합니다. 프로그래밍 언어수준의 표현력을 가지고 있어서 코드 작성이나 프로세스의 세부단계를 Pseudo-code형식으로 충분히 작성도 가능할 것 같네요. 프로그래밍 언어에 익숙하신 분들이라면, 순서도 작성 시 코딩 방식을 가볍게 응용 가능하다는 점에서 code2flow를 추천합니다.
code2flow에서는 다양한 형식의 이미지 저장 포맷도 지원합니다. Flowchart.fun에서는 svg 형식만 지원해서 별도의 이미지 포맷으로 변환이 필요했지만, code2flow에서는 png와 PDF파일을 추가적으로 지원합니다. 생성된 순서도를 자료나 문서에 손쉽게 추가하거나 메일등에 첨부할 수 있습니다. 여러명이 함께 협업해야한다면, 일의 순서와 절차, 과정을 한 눈에 파악하고 설명하는데 플로우 차트만큼 유용한 도구는 없을 것 같네요.
플로우 차트는 개발업무에 국한되지 않고 일과 삶 속의 다양한 일들에 활용이 가능합니다. 플로우 챠트를 통해 계획하거나 하고 있는 일들을 시작적으로 가시화(visualization)하고, 일의 단계를 세부적으로 구체화해보면서 누락되거나 배제된 일의 마디를 찾고 배치해 보세요. 일의 속도와 생산성이 높아지는 분명 플로우차트가 큰 도움이 될 것 입니다.
업무 흐름과 일의 실행 속도를 높이는 방법들이 궁금하시다면, 아래의 글을 참고해 주세요.
