나만의 순서도 작성하기 (feat, 범례 & SW기획자)

순서도는 어떤 업무나 일을 처리하는 과정을 간단한 기호와 화살표로 도식화한 그림이다.
오래전 어르신들 국민학교 시절 컴퓨터 도형자(尺)를 통해 직접 그리기도 했었다고 한다.

출처 : 인터파크

 

컴퓨터나 전산에서는 정해진 규격의 도형을 통해 순서도를 그릴 수 있으나 상대도 같은 지식을 가지고 있어야만 의사소통이 가능하다. 

그래서 정해진 틀에 얽매일 필요 없이
   나만의 범례를 가지고
      가시성이 높은 순서도를 그려서
         보는 사람이 업무의 처리 순서를 이해했다면 
            순서도의 목적을 달성할 수 있다고 생각한다.

순서도를 그리기 위해서는 처리할 업무의 수준(level)을 정의할 필요가 있다.
은행에 돈을 입금하는 업무를 순서도로 표현한다고 가정을 해보자.

(A) 사용자 입장에서 입금 방법을 선택하고 입금할 금액을 정하고 입금을 요청하여 입금되었는지는 확인하는 사용자 입장에서의 업무 순서를 정의할 수 있다. 
그러면 (B)업무 처리를 현재 사용자가 선택할 수 있는 입금 가능 수단을 조회하고 입금 가능 시간과 한도 등을 조회하는 업무가 순서대로 진행되어 사용자에게 선택지를 제공할 것이다. 
 다시 (A) 상황으로 돌아가 사용자는 자신이 사용할 수 없는 입금 수단이 제공될 경우 입금을 취소하는 새로운 (C)라는 업무가 진행될 수 있다.

이와 같이 사용자 수준의 일반적인 업무 흐름, 비즈니스 플로우 차트가 필요하고
비즈니스를 성공시키기 위한 세부 업무 프로세스와 예외 상황에 대한 프로세스가 순서도로 정의되어야 한다.

• Biseuness flowchart : 서비스나 시나리오에 대한 순서로 사업적 측면 고려한 순서도
• Function flowchart : 기능 동작 

 

모든 업무가 순서대로 진행됨에 따라 순서도의 중요성을 한 번 짚어봤다. 
그럼 나만의 순서도를 작성하기 위한 SW개발을 위한 기획자의 순서도 예제를 보고 활용해보기 바란다.

 

---

 

 

비즈니스 플로우

최초의 시작은 요구 사항 기반으로 상세 기능이 정의된 이후 시작할 수 있다.

사용자 요구 사항, 시스템 요구 사항, 유즈케이스, 기능 명세서 등...

그다음 바로 화면 설계서를 작성하는 것이 아니라,
비즈니스 플로우를 작성하기를 권한다.

그 이유는

• 전체 프로세스를 이해하고 시작할 수 있다.
• 화면과 UI 요소, 기능의 누락을 방지한다.
• 방향을 잃고 헤매거나 삼천포로 빠지는 것을 방지한다.
• 결과적으로 문서 작업의 시간이 절약된다. 

비즈니스 플로우란 사이트맵 + 유즈케이스 + 와이어프레임의 심플한 혼합 형태라고 볼 수 있다.
필자는 작업 영역이 많거나 신규 제품에 대한 업무를 시작할 때는 PPT 문서 사이즈를 최대 100cm 설정하고 시작한다.

아래는 후배 기획자가 작성한 문서이고, 예제로 사용한다.

Sample 1. 회원가입 프로세스

 

 

범례

- 비즈니스 플로우를 구성하는 요소에 대해 정의를 해 두었다.
- 팀이나 TF에서 상호 협의하여 이해할 수 있는 범위로 정해두고 사용하면 좋다.
- 그리고 최대한 개수를 줄여서 범례 없이도 문서를 볼 수 있도록 하는 것이 좋다.
- 범례는 화면, 기능, 분기 등의 요소가 포함될 수 있다.

 

 

화면
- 하나의 화면을 구성하는 요소에 대해 명시되어 있다. (UI 컴포넌트, 역할 or 기능)
- 화면설계서를 작성할 때, 명시된 구성요소와 기능이 모두 담겨 있는지 체크하는데 도움을 준다. 
- 명사로 작성하기를 권한다.

프로세스(기능)
- 화면에서 다음 화면으로 넘어갈 때 수행하는 기능에 대하여 명시한다.
- 사용자가 행할 수 있는 액션이 될 수 있다.
- 동사로 작성하기를 권한다.

 

프로세스 분기
- 이전 프로세스에 대한 도착 화면이나 메시지, 결과를 분기한다.
- 2개의 선택지로 "Yes(true)" or "No(false)" 로 결정되어야 한다.
- 3개의 선택지가 필요한 경우 다음 단계를 추가하여 2개의 분기로 처리되도록 한다.

 

프로세스 이동(업무) 흐름
- 프로세스(데이터) 흐름은 화살표로 표시한다. 
- 조금 더 신경을 쓴다면, Critical Path 를 지정하여 선을 볼드로 표현하던가
- 분기의 Yes 와 No 의 점선과 실선 또는 파란색과 빨간색 형태를 구분하던가

 

필자의 데이터 흐름 작성 방법 (개인 취향)

flowchart arrow

 

간단하게 후배가 작성한 문서로 내용을 살펴보았다.
단, 너무 다양한(복잡한) 조합은 의미 전달이 어려울 수 있으니 주의해야 한다.
예제처럼 로그인 부분만 분리하여 범주별로 작성하는 것도 방법이다.

만약 비즈니스 플로우 문서가 없었다고 한다면 
화면설계서를 작성하는 기획자는 더 많은 문어발식 확장을 했을 수도 있다.

필자도 기획을 처음 시작할 때 경험했던 내용이고.. 다시 처음부터 새롭게 다시 작성했었다.

마무리

• 전체 플로우를 담아라
• 연결 관계를 명확히 해라
• 간결하게 작성해라

 

예시

모바일에서 앱 실행하기

 

 

 

기능 플로우

화면 내에서 존재하는 기능의 동작에 대하여 데이터 흐름으로 정의하는 방법이다.
데이터 흐름은 순서를 가진다는 의미로 무엇을 먼저 체크하고 수행할지도 정의된다.
기능 플로우를 작성하는 부분은 크게 2가지라고 보면 된다.

1. 화면(페이지)에서 버튼이나 사용자 액션에 따라 동작해야 하는 기능
2. 화면(페이지) 로딩 시 체크되어야 하는 기능

 

1. 화면에서의 동작

아래 예제는 웹에서 로그인하는 기능에 대한 순서도이다.

로그인 페이지 기능 설명 

 

사용자 행위가 발생하는 부분을 명시하였다.
마우스 클릭 시, 플로우가 시작된다.

 

기능 동작 시 체크되어야 할 항목에 대하여 표시한다.
- 입력 필드 및 데이터에 대한 유효성 검증을 한다.
- 검증 결과에 따라 다음 체크 항목으로 이동한다.
- 개발 시, 체크 순서로 정의된다. 

 

오류로 체크된 항목에 대하여 사용자에게 피드백을 제공한다.
- 입력 필드의 경우 빈 공란에 대한 예외처리를 안내할 수 있다.
- 입력 필드의 데이터에 대한 유효성에 대해 가이드할 수 있다.
- 세부 항목은 옆에 Description으로 추가 설명을 한다.
- 사용자에게 다음 액션을 가이드하는 것을 추천한다.

유효성 체크는 크게 2가지로 구분할 수 있다.

• 클라이언트에서 체크하는 유효성 (위의 입력 폼 유효성)
• 서버에서 체크하는 유효성 (아래의 서버 오류 메시지)

기능 동작 체크는 순서에 따라 진행된다고 말했다.

클라이언트에서 입력 데이터에 대한 유효성 체크가 완료되면 서버에서의 유효성 체크가 이루어지는 게 좋다.

따라서 순서도에서도 마지막 부분에 다루어지는 내용이다.

사용자가 알아야 할 중요도에 따라 다이얼로그 형태의 컨펌 창으로 안내할 수 있다.

 

참고. 보통 화면설계서는 화면에 대한 설명과 기능에 대한 설명을 구분해서 작성한다.

 

2. 로딩 시점의 동작

화면이 전환되거나 페이지를 로딩, 로그인 후 전환 등의 프로세스에서
서버는 여러 가지 일을 처리하여 고객에게 보여줄 정보를 가공하게 된다.
이 부분도 기획자가 정의한 내용과 순서에 따라 처리가 되어야 사용자 관점에서 원하는 정보가 출력될 수 있다.
가장 쉽게 안내할 수 있는 것이 모바일 앱에서 앱을 실행할 때 체크되는 조건들 일 것이다.
아래 예제는 앱을 실행할 때 체크하는 항목에 대한 순서도이다.

모바일 앱 실행 (안드로이드)

스플래시 화면은 앱의 아이덴티티를 보여주는 역할도 하지만,
사용자가 알지 못하는 백그라운드 작업을 하기 좋은 영역이다.
그래서 위와 같이 체크하는 내용을 별도 화면이 아닌 스플래시 화면에서 처리하는 것을 추천한다.

만약 위에 언급한 순서를 사용자 입장에서 정의하지 않는다면 
사용자 입장에서는 앱이 실행되어 홈에 도착한 상태에서 업데이트하라고 다시 앱을 종료하는 경우나
네트워크가 동작하지 않는 상태인데 지속적으로 서버 연결을 시도하여 오랜 로딩이 되는 불편함을 겪을 수도 있다.

두 번째 소개할 예제는 특정 상황에서 웹 페이지를 새 탭으로 실행하는 경우이다.

초대 메일의 링크를 선택할 경우 처리 로직

위 케이스는 회원 가입이나 비밀번호 찾기를 했을 때 이메일로 수신한 링크를 선택할 때 유용하게 쓸 수 있다.

페이지를 로딩하면서 링크의 유효성을 체크하여 잘못된 접근의 경우
사용자에게 불필요하게 정보 입력이나 추가 액션을 하지 않게 바로 다음 가이드를 할 수 있다.
(미미하지만 사용자 불만을 줄일 수 있습니다.)

Flowchart 를 작성함으로써 아래의 효과를 볼 수 있다.

• 개발팀의 코딩/로직 오류의 방지
• 사용자에게 사용성 높여주는 효과
• 오류 발생 시 오류 발생 지점 추적의 용이성

업무 프로세스 리뷰를 위한 기획자의 순서도.

기획자도 개발을 알아야 한다. 기획자의 개발 용어 알아가기

OPR(One Page Report), 보고서 작성 요령