6. 아이디어 구체화하기

당신의 아이디어가 비즈니스가 되는 순간

Jun 15. 2023

아이디어는 토론과 조사를 통해 서비스 컨셉으로 발전됩니다. 어떤 제품과 서비스를 만들 것인지 형상, 기능, 제공 방식 측면에서 구체화되는 것이죠. 하지만, 이 단계는 아직 제품과 서비스를 본격적으로 만드는 단계는 아닙니다. 상품 개발 프로젝트를 진행하기 전에 전략, 방향, 비용, 투입 인력을 구체화하기 위해서 정리하는 단계인 것이죠. 프로젝트가 진행되기 위해서는 팀이 구성됩니다. 서비스 개발을 위한 팀 구성은 적어도 3명 이상으로 구성됩니다. 큰 프로젝트의 경우 수십 명이 참여하게 되죠. 팀 하부에는 각 채널 개발을 담당하는 파트가 구성되기도 합니다. 인력 구성은 서비스 개발에 필요한 스킬을 보유하고 프로젝트가 원활하게 진행되도록 조율하는 역할을 담당하는 인력으로 구성됩니다.

PO(Product Owner), 앱 기획자, 웹 기획자, 앱 디자이너, 웹 디자이너, 퍼블리셔, 네이티브 앱 개발자, 프런트엔드 개발자, 백엔드 개발자, DB 개발자, 아키텍처, 품질(QA) 담당자 등으로 구성이 됩니다. 이렇게 많은 팀원이 구성될 때는 우리가 어떤 서비스를 만들려고 하는가에 대한 목표와 범위에 대해 정확하게 이해하고 있어야 합니다. 건축물에 비유하면 모형이 나와야 하는 것이죠. 물론 상세한 설계도가 나오면 더할 나위 없습니다. 그렇지만 상세한 스토리보드가 나올 때까지 마냥 손 놓고 놀 수는 없을 것입니다.

와이어프레임은 전체적인 시나리오 흐름, 대표적 화면 구성, 핵심 기능, 메뉴간 상호 연결, 핵심 정책을 살펴보면서 프로젝트에서 중점적으로 구현해야 할 사항이나 예상되는 이슈(기술, 비용, 품질 등)에 대해 프로젝트 구성원이 이해하고 합의하는데 필수적인 과정입니다. 경우에 따라서는 개발자나 퍼블리셔와 같은 멤버들이 기획자가 생각하지 못했던 더 좋은 방식을 제안하기도 합니다.

와이어프레임은 파워포인트 같은 문서를 활용하여 작성해도 되지만 최근에는 피그마(Figma)나 스케치(Sketch) 같은 기획 협업툴이 많이 활용됩니다. 이런 툴은 어려분의 아이디어를 구체화하는데 매우 유용한 툴입니다.

와이어프레임은 개발팀이 어떤 제품과 서비스를 만드는 것인지를 형태, 구성, 기능, 동작 측면에서 상세화하는 단계입니다. 스토리보드라는 상세 설계서와 기능 명세서라는 산출물이 만들기 전까지 프로젝트 구성원이 범위, 정책, 이슈 등에 대해 빠르게 의사결정하고 합의하는 매우 중요한 단계입니다.

구현된 제품과 서비스를 판매하는 과정에서 브로셔, 소개자료, 브랜드 사이트와 같은 세일즈 툴킷(Sales toolkit)에 들어가는 핵심적인 내용은 바로 와이어프레임 내용과 거의 일치합니다. 즉, 구매자가 구매하게 되는 제품과 서비스의 고객 제공 가치가 와이어프레임에 담겨있는 것이죠.

개발 과정에서 기획자와 개발자 간에 마찰이 가장 많은 사항이 바로 로직과 정책입니다. 서비스에는 기능 요소와 로직 요소가 존재합니다. 이때 어떤 기능을 제공할 것이며, 어떤 로직으로 제공할 것인지가 개발의 범위나 난이도에 상당히 영향을 줄 수 있습니다. 또한 아무런 로직 요구사항이나 정책 요구사항 없이 개발자나 기획자가 임의로 구현했을 때 결과물에 대해 큰 이슈가 발생할 수도 있죠.

우리에게 익숙한 인스타그램이나 페이스북 같은 소셜 서비스에는 친구들의 게시글이 피드에 노출이 됩니다. 피드에 노출되는 콘텐츠는 어떤 기준으로 노출되어야 할까요? 가장 최신 순으로? 가장 인기 있는 순으로? 가장 가까운 순으로? 그것도 아니면 사용자가 관심 있어하는 주제로? 또한 사용자가 서비스에 자주 들어와서 친구들의 최근 게시글을 다 읽었을 경우에는 어떤 콘텐츠를 노출해야 할까요? 인기있는 게시글을 노출해야 할까요? 이렇게 서비스에는 사용자에게 보이지 않는 로직과 정책이 존재하고 이는 개발 요구사항으로 와이어프레임에 정의됩니다. 기획자는 이러한 로직과 정책이 서비스의 고객 가치에 부합되도록 기획을 해야 하며, 이것은 곳 개발 공수와 개발 난이도에 영향을 주므로 개발자를 포함하여 프로젝트 구성원과 소통해여 합의해야 합니다.

결국, 와이어프레임은 각 화면의 구성, 기능의 흐름을 도출하는 과정에서 구현되어야 할 로직과 정책에 대해 포착해내고 이것을 개괄적으로 합의한 후 스토리보드에서 상세하게 요구사항을 정의하는 매우 중요한 과정이라 할 수 있습니다.

와이어프레임을 만드는 순서는 크게 5단계로 구성됩니다.

1 단계 ‘핵심 기능 정의‘

: 서비스가 제공하고자 하는 가장 핵심적인 가치(또는 기능) 3가지를 정의합니다. 사용자의 문제해결을 위해 어떤 기능이 제공되어야 하는지 정하는 것이죠.

2 단계 ‘유저그룹 정의＇

: 이 서비스를 사용할 유저 그룹을 정의합니다. 영어회화앱을 만든다고 하면 직장인 학습자로 정의할 수 있으며 학교/학원 대상의 영어회화 서비스를 제공한다면 영어선생님, 학생으로 정의할 수 있습니다. 유저 그룹에 따라 웹으로 제공할 것인지 앱으로 제공할 것인지 제공 방식도 결정이 되겠죠.

3 단계 ‘진입화면 정의’

: 사용자가 이상적으로 만나게 될 메인 화면이 어떤 모습일지 화면을 구성합니다. 만약 메인에 콘텐츠가 노출된다면 콘텐츠가 풍부하게 진열되어 있고, 진열 방식이 추천, 인기, 최신 등으로 보여질 수 있을 것입니다. 최초 진입 시의 시나리오는 와이어프레임 다음 단계인 스토리보드에서 정의하면 됩니다.

4 단계 ‘구성 요소 Flow 정의

: 메인화면에는 콘텐츠 등록, 조회나 구매 페이지 등의 서브 화면 및 기능으로 연결됩니다. 2 Depth까지 화면과 흐름을 정의하면 전체 서비스가 어떻게 구성되는지 알 수 있게 되죠.

5 단계 ‘핵심 요건 정의‘

: 화면과 흐름에 있어서 핵심 가치 및 핵심 기능을 제공하기 위해 어떻게 개발되어야 하는지 요건 사항이 정의가 됩니다.

와이어프레임을 구성하는 과정에서 화면 구성과 흐름은 혼자서 창작하는 것보다 잘 만들어진 서비스 화면과 흐름을 참조해서 응용하는 것이 좋습니다.

와이어프레임의 가장 큰 목적은 웹페이지 또는 모바일앱 화면에서 핵심과 비핵심 기능으로 연결되는 메뉴 및 버튼을 어떻게 공간적으로 배치하느냐를 결정하는 것입니다. 메인화면의 공간 배치가 완료되면 메인에서 이어지는 서브 화면의 배치 작업이 이어지고, 메인화면과 서브화면 간, 서브 화면과 서브화면 간의 연결되도록 해야 하는 것이죠.

메뉴와 버튼의 공간 배치를 하기 위해서는 블록을 먼저 구성해두는 것이 필요합니다. 왼쪽 그림에서 보듯 메뉴 영역 – 업데이트한 친구 목록 영역 – 친구의 게시글 영역 – 댓글 노출 영역 – 추천 친구리스트 영역과 같이 각 영역의 블록을 먼저 정해둡니다.

블록 내에서 아이콘-타이틀-세부정보 등을 어떻게 표현하면 좋을지 논의하여 세부적으로 결정하게 됩니다. 물론 모든 화면 구성은 스토리보드에서 결정되는 것이지만 전체 윤곽을 확인하는 과정에서 중요한 화면에서는 어느정도 합의된 화면이 필요하게 됩니다. 그것이 와이어프레임의 가장 큰 역할인 것이죠.