목록 실험실 바로가기

개발자를 위한 순서도 가이드: 비즈니스 로직 분석부터 프로그램 설계까지

이 문서는 개발자가 순서도를 활용하여 비즈니스 로직을 명확히 분석하고, 실제 프로그래밍 전 단계에서 견고한 설계를 할 수 있도록 돕는 가이드입니다. 순서도의 기본 개념부터 실제 프로젝트에 적용하는 방법, 그리고 제공되는 순서도 편집기(Flowchart)의 사용법과 기술적 구조까지 상세히 다룹니다.

Part 1: 순서도의 이해와 활용

1. 순서도란 무엇인가?

순서도(Flowchart)는 프로세스나 워크플로우를 시각적으로 표현하는 다이어그램입니다. 정해진 기호(도형)를 사용하여 작업의 순서와 분기, 흐름을 명확하게 나타냅니다. 코드를 작성하기 전에 순서도를 그리면 다음과 같은 장점이 있습니다.

논리적 오류 감소: 복잡한 비즈니스 로직을 시각적으로 따라가며 예외 케이스나 논리적 허점을 미리 발견할 수 있습니다.
원활한 커뮤니케이션: 기획자, 동료 개발자 등 다른 팀원과 로직에 대한 이해를 공유하고 논의하기 용이합니다.
명확한 설계 문서: 코드가 어떻게 동작해야 하는지에 대한 명확한 설계도 역할을 하며, 향후 유지보수 시에도 도움이 됩니다.

2. 순서도 기본 기호와 프로그래밍 대응

순서도 기호는 프로그램의 제어 흐름과 직접적으로 대응됩니다. 각 기호의 의미를 이해하면 로직을 코드로 옮기기 수월해집니다.

기호	명칭	용도 및 프로그래밍 대응
	시작 / 끝 (Terminal)	프로세스의 시작과 끝을 나타냅니다. • 코드 대응: 함수의 시작(`function process() {`), `return` 또는 함수의 종료(`}`)에 해당합니다.
	처리 (Process)	데이터 처리, 계산, 값 할당 등 특정 작업을 수행하는 단계를 나타냅니다. • 코드 대응: `let result = a + b;`, `data.update();` 와 같은 실행문에 해당합니다.
	입력 (Input)	외부로부터 데이터를 입력받는 지점을 나타냅니다. • 코드 대응: 사용자의 입력값, API 요청의 `body`나 `parameter`를 받는 부분에 해당합니다.
	판단 (Decision)	조건에 따라 프로세스의 흐름이 나뉘는 분기점을 나타냅니다. • 코드 대응: `if-else`, `switch` 와 같은 조건문에 해당합니다.
	출력 (Output)	처리된 결과를 외부로 보여주거나 반환하는 지점을 나타냅니다. • 코드 대응: 화면에 결과를 표시하거나, API 응답(`response.send()`)을 반환하는 부분에 해당합니다.

3. 실전 예제: 로그인 로직 분석

사용자 로그인 프로세스를 순서도로 설계하며 비즈니스 로직을 분석하는 과정은 다음과 같습니다.

[시작] 로그인 프로세스를 시작합니다.
[입력] 사용자로부터 아이디와 비밀번호를 입력받습니다.
[처리] 입력받은 아이디로 데이터베이스에서 회원 정보를 조회합니다.
[판단] 회원 정보가 존재하는가?
- No: [출력] “존재하지 않는 사용자입니다.” 메시지를 표시하고 [끝]
- Yes: 다음 단계로 진행합니다.
[처리] 입력받은 비밀번호와 데이터베이스의 비밀번호가 일치하는지 확인합니다.
[판단] 비밀번호가 일치하는가?
- No: [출력] “비밀번호가 틀렸습니다.” 메시지를 표시하고 [끝]
- Yes: 다음 단계로 진행합니다.
[처리] 로그인 성공 토큰을 생성합니다.
[출력] “로그인 성공” 메시지와 함께 토큰을 반환합니다.
[끝]

이처럼 순서도를 작성하면, 개발자는 각 단계별로 어떤 코드를 작성해야 할지, 어떤 예외 처리가 필요한지를 명확하게 인지한 상태에서 개발을 시작할 수 있습니다.

Part 2: 순서도 편집기 사용법

Flowchart 파일은 위에서 설명한 순서도를 직접 그려볼 수 있는 웹 기반 편집기입니다.

1. 도형 추가

화면 왼쪽의 기호 패널에서 원하는 도형을 마우스로 끌어(Drag) 오른쪽 캔버스 영역에 놓아(Drop) 추가합니다.

2. 도형 연결

첫 번째 도형을 클릭하여 시작점으로 선택합니다. (선택된 도형은 강조 표시됩니다.)
두 번째 도형을 클릭하여 끝점으로 선택하면 두 도형이 화살표로 연결됩니다.
연결을 취소하려면 Esc 키를 누릅니다.

3. 텍스트 편집

도형 또는 연결선을 더블 클릭하면 텍스트를 입력하거나 수정할 수 있습니다.
도형의 텍스트 길이에 따라 도형의 크기가 자동으로 조절됩니다.

4. 요소 삭제

삭제하고 싶은 도형이나 연결선을 클릭하여 선택한 후, 키보드의 Delete 또는 Backspace 키를 눌러 삭제합니다.
연결선은 Ctrl 키 (Mac의 경우 Cmd)를 누른 상태에서 더블 클릭하여 빠르게 삭제할 수도 있습니다.

5. 스타일 및 다중 선택

선 종류: 왼쪽 패널에서 연결선 스타일을 직선(─) 또는 직각(┘)으로 변경할 수 있습니다.
색상 변경: 변경할 요소를 클릭한 후, 색상 팔레트에서 원하는 색을 선택합니다.
다중 선택: Ctrl 키 (Mac의 경우 Cmd)를 누른 상태에서 여러 요소를 클릭하여 다중 선택 후, 함께 이동하거나 색상을 일괄 변경할 수 있습니다.

6. 저장 및 불러오기

저장: 저장 버튼을 클릭하면 현재 순서도가 flowchart.json 파일로 다운로드됩니다.
불러오기: 불러오기 버튼으로 저장했던 .json 파일을 다시 불러올 수 있습니다.

Part 3: 개발자를 위한 기술 상세 정보

이 편집기는 순수 HTML, CSS, JavaScript로만 구성되어 있어 웹 개발에 대한 기본적인 이해만 있다면 쉽게 구조를 파악하고 확장할 수 있습니다.

1. 사용된 오픈소스 라이브러리

JointJS (v3.7.0): 다이어그램(그래프) 생성 및 상호작용을 위한 핵심 라이브러리입니다.
jQuery (v3.6.0): DOM 요소 선택 및 이벤트 처리를 간편하게 하기 위해 사용되었습니다.
Lodash (v4.17.21): JointJS 내부에서 사용하는 유틸리티 라이브러리입니다.
Backbone.js (v1.4.0): JointJS가 모델-뷰 구조를 위해 의존하는 라이브러리입니다.

2. 프로그램 구조 (`flowchart`)

HTML: 전체적인 레이아웃을 정의합니다. (#sidebar, #palette, #paper 등)
CSS: <style> 태그 내에 모든 스타일이 정의되어 있습니다.
JavaScript: 프로그램의 모든 로직이 <script> 태그 내에 구현되어 있습니다.
- 초기화: joint.dia.Graph와 joint.dia.Paper를 생성하여 순서도를 그릴 캔버스를 초기화합니다.
- 커스텀 도형 정의: joint.shapes.flowchart.Terminal과 같이 JointJS의 기본 도형을 확장하여 프로젝트에 맞는 커스텀 도형을 정의합니다.
- 이벤트 핸들러: paper.on('element:pointerdown', ...) 와 같이 JointJS가 제공하는 이벤트 리스너를 사용하여 도형 연결, 텍스트 편집, 삭제 등 대부분의 상호작용을 구현합니다.
- 저장/불러오기: graph.toJSON()과 graph.fromJSON() 메소드를 사용하여 그래프의 상태를 직렬화/역직렬화하여 파일로 저장하고 불러옵니다.

3. 향후 확장 방향

이 순서도 편집기는 다음과 같은 방향으로 기능을 확장할 수 있습니다.

신규 도형 추가: 데이터베이스, 문서 등 더 다양한 순서도 도형을 커스텀으로 정의하여 추가할 수 있습니다.
백엔드 연동: 로컬 파일 저장 방식 대신, 백엔드 서버와 API 통신을 통해 데이터베이스에 순서도를 저장하고 불러오는 기능을 구현할 수 있습니다.
코드 자동 생성: 순서도 그래프 데이터(graph.toJSON()의 결과)를 분석하여 특정 언어의 기본 코드 골격(boilerplate)을 자동으로 생성해주는 기능을 추가할 수 있습니다. (예: if-else 구조, 함수 선언 등)
실시간 협업: WebSocket 등을 이용하여 여러 사용자가 동시에 하나의 순서도를 편집하는 기능을 구현할 수 있습니다.

#순서도

웹 기반 순서도(Flowchart)