brunch

You can make anything
by writing

C.S.Lewis

by 기획자의 경험 Aug 05. 2021

서비스 기획[1]- 앱&웹 서비스 기획  프로세스

웹&앱 서비스 기획을 하며 전체 구조를 이해하기 위한 10가지 프로세스



안녕하세요. 트라이브즈입니다. 현재 온라인 서비스 기획을 준비하며 기획을 진행하고 있습니다.



 개인적인 경험으로는 서비스 기획에 대한 내용이 접하기 힘든 부분도 있고, 기획방법이 기업마다 사람마다 도구마다 틀려서 전체적인 방향을 잡기가 쉽지 않았습니다. 과정을 정리해 두는 것이 의미가 있는 작업이라 생각이 들었습니다. 


요즘 트라이브즈는 서비스 기획 컨설팅을 받고 있습니다.  서비스 기획자인 '노노니'님에게 받고 있는데요. 수강한 내용을 트라이브즈에 적용해봤습니다. 우선 기획 부분에 초점을 두고 개발 전까지의 프로세스를 시리즈로 하여 상세하게 다루고 트라이브즈의 작업을 함께 나눠 보려 합니다



하나의 앱이나 웹의 서비스가 만들어진다는 것은 사실 큰 영역을 가지고 있습니다. 사업기획에서 아이디어 도출 서비스 기획 그리고 디자인, 퍼블리싱, 개발 그리고 지속적인 관리 거기에서 서비스 기획이라는 것은 초기 세팅 작업으로 전체 영역의 20%~30%를 차지하고 있습니다. 



하지만 서비스라는 것은 초기의 시작이 중요하고 점진적으로 고도화시켜 나가는 것이 매우 중요하기에 범위에서는 20% 일지라도 중요성은 80%라 하여도 과언은 아닙니다. 




웹 혹은 앱 서비스 기획 과정은 총 10가지로 나누어집니다. 


1. 아이디어 도출 

2. 최소안  

3. 유저 시나리오 

4. 기능 도출 

5. 서비스 흐름도 

6. 메뉴 구성 

7. 정보마인드맵 

8. 페이지 흐름도

9. 화면 설계 

10. 스토리보드 (문서화) 


하나하나 간단히 살펴보면서 알아가 보도록 하겠습니다. 







웹&앱 서비스 기획 프로세스


1. 아이디어 도출  - 가능한 아이디어 브레인스토밍 작업


 처음의 사업을 시작하며 무엇을 하고자 하는지 아이디어를 정리해야 합니다. 이때 많은 아이디어가 나오게 됩니다. 가능한 것도 있지만 가능하지 않은 것도 있습니다. 이때 모든 아이디어를 끄집어내어 취합해 내는 것이 중요합니다.  아이디어를 내는 방법에는 다양한 방법론들이 있습니다. 


 그중에서도 가장 효과적인 방법이 브레인스토밍으로 팀이나 관련된 사람들이 모여 아이디어를 끄집어내는 것입니다. 



2. 최소안 도출 - 모든 아이디어 중에서 핵심이 되는 아이디어 도출 


초기의 아이디어는 보통 거대하고 방대합니다. 저도 처음 웹을 기획하기로 하였을 때 서비스들이 너무도 다양하여서 정리하는데 무척이나 힘이 들었습니다. 


 고객의 관점에서 무엇이 가장 필요로 하고 문제를 해결해 주는지를 중심으로 가장 기초적인 서비스를 설계합니다. 이것을 최소안이라고 합니다. 


예를 들면 카카오톡의 경우 여러 가지 기능들이 있습니다. 현재는 더 방대해졌습니다. 그러나 처음부터 그렇게 시작한 것이 아니라 처음에는 친구끼리 이야기를 보내는 톡 대화 기능으로 시작하였습니다.  이렇게 핵심 기능이 정해진 상태에서는 개발이 더 수월해지고 방향이 잘 잡히게 됩니다. 



3. 유저 시나리오 


최소 안이 완성되었다면 이것을 가지고 유저가 어떻게 서비스를 사용할 것인지를 처음부터 마지막까지 시나리오를 그려봅니다. 가장 중요한 기능이라고 생각하는 것들만 작성하고 더 상세한 부분은 기능 정의서에서 정의해 나가면 됩니다. 


예를 들어 스타벅스의 경우 유저의 시나리오는 이렇게 구성됩니다. 


이런 시나리오를 그릴 수가 있겠죠.



▶ 손님이 들어온다

▶ 메뉴를 선택한다. 

▶ 결제를 진행한다. 

▶ 대기표를 받는다. 

▶ 음료를 알림 받는다. 

▶ 음료를 받는다. 

▶ 나간다. 

▶ 혹은 자리에서 마신다. 


 이런 것처럼 서비스도 고객이 어떻게 사용할 것인지 핵심적인 덩어리 부분을 그려 줍니다. 


저희의 서비스의 경우 워크 시트지를 선택하고 작성한 뒤 출력하고 배송해 줍니다. 그리고 미션이 저장되고 원하는 사람은 공유를 하는 것이 유저의 시나리오입니다. 이러한 것들을 공부하기 좋은 것은 자신이 좋아하는 앱이나 벤치마킹을 하고자 하는 서비스를 모델로 해서 연습으로 자주 그려 보는 것입니다. 



4. 기능 정의 - 서비스에 필요한 기능의 정의 


유저 시나리오에 따라 필요한 기능들이 있습니다. 주문이 있으면 결제 기능이 있어야 하고요. 회원가입 등 공통적으로 필요한 기능들도 있습니다. 이러한 기능들을 정의하는데 이러한 것들은 기능 정의서에 입력하여 줍니다.  


기능 정의서는 상세한 설명과 더 구체적으로 배워야 하는 부분이기에 나중에 따로 정리를 하겠습니다. 서비스 기획자에게 필수적인 역할 중의 하나가 바로 기능 정의서입니다. 



5. 서비스 흐름도 - 서비스가 어떻게 흘러가는지를 그려내는 것 


서비스 흐름도는 각 서비스들이 어떤 순서를 따라 움직이는지 로직을 그려 보는 것입니다. 흐름도 역시 사람들이 처음부터 마지막까지 어떻게 서비스를 활용할지를 그려보면 도움이 됩니다. 



6. 메뉴 구성  - 사용자 페이지와 관리자 페이지의 메뉴를 구성하는 것


메뉴는 GNB 메뉴를 구성하는 것인데  두 가지 관점이 필요합니다. 하나는 고객들이 보는 페이지에서의 메뉴 구성이고 다른 하나는 관리자 입장에서 메뉴 구성입니다. 개인적으로 서비스 기획을 처음 접하시는 분들이 공통적으로 어려워하는 부분이 바로 관리자 페이지입니다.  



7. 정보마인드맵 - 각 정보에 관련된 내용을 카테고리별로 구성 


다음은 정보에 관련된 내용들을 정리해 보는 과정이 필요합니다. 정보 마인드 맵의 경우 각 카테고리별로 무엇이 필요한지를 정보를 정리해 나가는 과정입니다. 이러한 분류를 통해 개발자들이 정보의 관계를 확인할 수 있습니다. 아래는 심플한 정보마인드 맵입니다. 실무에 들어가는 정보는 마인드맵 도구를 통해 훨씬 더 복잡해집니다.  


서비스 페이지에서는 상당한 분량의 정보들이 구성되어 있는데 이러한 관계들이 정리가 되어 있지 않으면 개발 시 혼란을 겪을 수 있습니다. 보통 도구로는 싱크 와이즈와 마인드맵 도구를 활용하기도 합니다. 




8. 페이지 흐름도(플로우 차트) - 각 페이지별로 어떻게 연결되어야 하는지 흐름을 구조화 


앱이나  웹 서비스는 페이지간의 이동이 있습니다. 이러한 페이지 이동에 흐름을 아래와 같이 그려 주는 것이 필요합니다. 


각 페이지 옆의 번호는 나중에 화면 설계서를 그릴 때 번호를 맞춰 개발자와 퍼블리셔들이 함께 확인하며 작업을 하게 됩니다.  


일반적으로 각 도형들은 의미를 가지고 있는데 네모 박스는 일반적인 화명 이동이고 다이아몬드 박스의 경우는 서비스 사용자가 의사결정을 하는 페이지를 나타냅니다. [N] 은 No  [Y]는 YES를 했을 때 다음으로 이동한다.라는 의미를 가지고 있습니다. 



9. 화면 스케치 - 페이지 흐름도에 따른 화면 스케치 


플로우 차트가 그려지면 화면 스케치를 합니다. 보통 손으로 작업을 많이 합니다. 이 작업을 바로 스토리보드 작업으로 들어가는 분들도 계신데 경험이 많으신 분들은 일반적으로 손으로 스케치를 하고 들어가신다 고 하세요.


 아무래도 화면에서 바로 스토리보드 작업보다 구조나 기능을 손으로 그려보고 작업을 하면 더 작업을 효율적으로 할 수 있다고 합니다. 



10. 스토리보드 - 도구를 활용하여 스토리 보드를 만들어 내는 것 


이제 마지막 단계 스토리보드입니다. 화면 설계서라고도 하는데 이것을 통해 클라이언트, 기획자, 퍼블리셔, 개발자 가 소통을 하게 됩니다. 화면 설계서를 작성하는 것은 파워포인트의 목업 외에도 다양한 프로그램이 있습니다. 요즘은 미국에서 확산되고 있는 프로그램이 피그마라고 있는데 이것을 한번 활용해 볼까 합니다. 



이것은 전체적인 서비스 기획의 순서를 나타낸 것이에요. 각 부분마다 이제 실무를 이해해 가야 합니다. 일주일에 하나씩 내용을 정리해 보도록 하겠습니다.  


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari