서비스 플로우 설계하기
Front-end, Back-end 필요한 내용 수집하기
한동안 쉬었던 웹기획 사전을 다시 시작해봅니다. :)
오늘은 #서비스플로우 , #플로우차트 혹은 #서비스흐름도 라고 불리는 문서를 작업하는데 있어서 필요한 부분들을 알아보려고 합니다.
구축하는 프로젝트라면 초반 기획 설계에 필요한 여러가지 업무들이 있습니다.
무엇부터 진행하느냐는 프로젝트의 성격에 따라서 다를 수 있지만 개인적으로는 서비스 플로우를 먼저 제작 후 IA(정보구조설계도)를 제작하는 것을 선호합니다. 전체적인 흐름이 파악되어야 서비스에 필요한 화면 단위를 산정하는데 더 쉽더라구요.
서비스플로우에서 사용하는 도형의 의미 파악하기
프로젝트를 구축하는데 있어서 요구되는 사항이 정리되고 나면 우리 서비스에 필요한 기능을 어느 정도 수집할 수 있습니다.
https://brunch.co.kr/@applehong/63
https://brunch.co.kr/@applehong/62
이렇게 수집된 요구사항을 구현하기 위해서 필요한 부분을 간단하게 #프론트엔드 front-end, #백엔드 back-end 라는 용어로 나눠보겠습니다.
두 용어는 개발에서 사용되는 용어이지만 서비스 흐름도를 구성하는데 있어서도 이 용어를 사용해서 1차적으로 구분해볼 수 있습니다.
간단하게 생각하세요.
사용자의 눈에 보이는 화면, 팝업창 등은 눈에 보이는 것들이죠? 이렇게 직접적으로 서비스에서 눈으로 보여지는 것들은 프론트 엔드로 구분할 수 있습니다. 백엔드는 그 반대입니다. 서비스 전면에 노출되거나 사용자에게 보여지진 않지만 정상적인 서비스 이용을 위해서 처리되는 내용을 백엔드라는 용어로 지칭할 수 있습니다.
서비스플로우는 이렇게 생겼어요 https://docs.oracle.com/cd/E14004_01/books/FieldServ/FieldServServSupport6.플로우 차트를 작성할때 기본적으로 구분이 되어야하는 기본적인 요소는 다음과 같습니다.
화면 단위로 진행되는 요소
사용자의 액션 (입력, 버튼 클릭, 옵션 선택 등)
백엔드에서 판단해야 하는 조건 또는 데이터
결과값(Yes or No 혹은 True of False)에 따라서 이동되는 경로
이것을 표현하는 요소들도 여러분은 이미 알고 있습니다. :)
Powerpoint 도형 영역을 살펴보세요우리가 가장 많이 사용하는 파워포인트의 도형 영역을 보신적이 있나요?
제공되는 도형 영역에서 순서도 영역을 한번 살펴봐주세요. 각 도형에 마우스를 오버하시면 각 도형의 여러가지 의미를 확인할 수 있습니다.
순서도, 즉 Flow를 그리는데 있어서 필요한 다양한 도형들을 여기서 확인할 수 있습니다.
실제 기획 실무에서는 PPT 에서 제공하는 순서도 도형을 모두 사용하지는 않습니다.
가장 많이 사용하는 것은 처리라는 이름으로 제공되는 사각형, 그리고 판단이라는 이름으로 제공되는 마름모꼴 도형을 가장 많이 사용합니다.
아래 예시 이미지를 한번 볼까요?
예시) 카카오 계정으로 로그인 하기위의 예시 이미지에서 하늘색 사각형은 사용자가 실행하는 액션 또는 이동되는 페이지를 의미합니다. 즉, 프론트 엔드 사용자의 눈에 보이는 단위입니다.
노란색 마름모꼴은 사용자의 눈에는 보여지지 않지만 데이터가 처리되는 부분을 의미합니다. 바로 백엔드 영역이겠죠?
카카오 로그인을 실행하게 되면 이때 결과 값은 총 2개로 나눠볼 수 있습니다. 성공 또는 실패에 대한 값으로 나눠질 것이기 때문에 이에 맞춰 서비스 플로우에서도 성공했을 때의 이동 경로와 실패했을 때의 이동 경로를 표기해 줍니다.
조금 더 명확하게 플로우 차트를 그리고 싶다면 우리 서비스 화면, 외부 화면(있다면), 데이터가 저장되는 시점 등을 추가하여 조금 더 구체적인 서비스 플로우를 그려줄 수 있습니다.
서비스 플로우 쉽게 그리기
이 기능은 Figma에서 제공되는 FigJam 파일에서 조금 더 쉽게 사용할 수 있기 때문에 FigJam을 사용하시는 것을 추천드립니다.
Step 1. FigJam 파일 하단에서 사각형을 선택해보세요
Step 2. 도형을 연결할 방향의 포인트를 클릭하세요
Step 3. 도형을 변경하고 싶다면 원하는 도형을 클릭해줍니다.
Step 4. 도형을 클릭하면 텍스트를 입력할 수 있습니다.
Step 5. 연결선 중앙에도 텍스트를 넣을 수 있어요TIP
서비스의 주요 단위별로 나누어 플로우를 그려보세요.
서비스 규모가 크다면 하나의 차트로 서비스 전체의 흐름을 그리는 것인 사실상 불가능한 경우도 발생합니다. 따라서 우리 서비스를 이루는 주요 기능 단위로 나눠서 플로우를 작성해보세요.
Ex. 회원가입/로그인, 회원 상품구매, 비회원 상품구매 등
20년차 경력자도 서비스 플로우는 계속해서 업데이트 합니다 :)
서비스 플로우를 처음 그리시는 분들 대부분 고민하시는 것이 너무 어렵다! 라는 것입니다.
네, 서비스 플로우는 어려운 것이 맞아요. ㅎㅎㅎㅎ 실무 경력이 오래된 경력자들도 서비스 플로우는 여러번 수정에 수정을 거듭하면서 완성합니다. 처음에 잘 안된다고 포기하지 마시고 차근차근 업데이트 한다는 생각으로 찬찬히 그려보세요.
#레탑피그마 #웹기획 #Figma로하는웹기획 #앱기획 #Figma #피그마 #기획자의Figma #피그마강의 #피그마학원 #요구사항정의서 #요구사항수집
#서비스플로우 #플로우챠트 #서비스흐름도 #웹디자인학원 #웹디자인강의
