기획을 공부하기 위해, 여러가지 책도 읽고 아티클을 읽긴 했지만...
그래서 실무에서 대체 어떨 때 어느 방법론을 써야하고, 어느 단계에서 와이어프레임을 그려야하는 건지 전혀 알 수 없었다.
내가 바보라서 모르는 건가...ㅋ
그래서 '도그냥'님이 쓰신 '현업 기획자가 알려주는 서비스 기획 스쿨'이라는 책을 읽으면서 알게 된 프로젝트 프로세스 과정에 대해서 정리해보려한다.
저작권 때문에 모든 내용을 그대로 옮길 수는 없기 때문에 간단하게만 작성했다.
특히, 프로젝트를 진행함에 있어 프로세스 흐름과 그 단계에서 무엇을 해야하는지에 대해서 적어보려한다.
1️⃣ 마인드맵 그리기
서비스에 필요한 데이터들을 모두 작성해보고, 기능도 모두 작성해보는 단계이다.
그리고, 작성한 데이터에 필요한 기준을 정해보는 것이다.
예를 들어, 위치기반의 서비스를 만든다고 하면 사용자의 위치 기준으로 반경 어느정도까지 할 것인지 정확한 기준을 정해보는 것이다.
저자는 여기서 절대! 스케치를 하지 않기를 권한다. (UI와 같은 스케치)
2️⃣ 플로우 정리하기
앞서 작성한 마인드맵을 기준으로, 서비스가 선후 관계를 가지고 잘 굴러갈 수 있도록
입력 데이터와 출력 데이터를 구분하는 단계이다.
흔히 알고 있는 플로우 차트를 그리는게 아니라, 1단계에서 작성한 마인드맵에서 어떤 데이터가 입력 데이터이고, 출력할 데이터인지 구분해서 정리하라는 것이다.
또한, 입력 데이터의 경우 사용자가 입력하는 것인지 위치 정보로 수집해 오는 것인지 등 이러한 내용을 구체적으로 정리하는 단계인것이다.
페르소나가 필요한 단계도 이 단계이다.
어드민과 서비스 이용자를 기준으로 각 기능과 필요한 데이터가 다르기 때문이다.
3️⃣정보구조(IA) 작성하기
IA (Information Architecture) : 시각적으로 보이는 화면 목록을 정리한 것
1,2단계에서 작성한 기능과 데이터를 바탕으로, 고객이 이용하는 화면을 그대로 생각하여 큼직하게 정리하는 단계이다.
즉, 기획서 작성 전의 가설계 단계라고 보면 된다.
4️⃣ 요구사항 정의서 작성(feat. 개발팀과 의사소통)
앞 단계들을 모두 하고 나면, 개발자와의 커뮤니케이션을 할 단계이다.
그 전에, 요구사항 정의서 (Software Requirement Specification)을 작성해야한다.
저자는 여기서 어떤 양식인지는 중요한게 아니라, 요청사항을 하루라도 빠르게 협업자들에게 전달하는 것이 중요하다고 말한다.
5️⃣ UI 설계
앞선 4단계를 모두 마치고 나서 드디어 UI 스케치를 할 수 있는 단계가 온다.
이 단계에서 우리가 흔히 알고 있는 스케치, 와이어프레임, 프로토타입 등을 설계하는 것이다.
이들이 뭔 차이가 있는지는 간단하게만 아래에 정리하겠다.
| 단계 | 정의 | 주로 하는 일 | 툴 예시 |
|---|---|---|---|
| 스케치 (Sketch) | 아이디어를 손으로 빠르게 그려보는 초기 밑그림 단계 | 레이아웃 구조, 기능 흐름 아이디어 스케치 | 종이, iPad, GoodNotes 등 |
| 와이어프레임 (Wireframe) | 실제 UI의 뼈대만 구성한 구조도 (흑백/선 위주) | 콘텐츠 배치, 정보 구조, 화면 간 이동 흐름 설계 | Figma, Adobe XD, Balsamiq |
| 목업 (Mockup) | 실제 디자인처럼 보이게 만든 정적 시안 | 색상, 폰트, UI 스타일 적용 / 비주얼 확인 | Figma, Sketch, Photoshop |
| 아트보드 (Artboard) | UI 툴에서 각 화면의 작업 공간 단위 (기술적 용어) | 여러 화면 구성 시 정리된 단위로 작업 | Figma, XD, Illustrator |
| 프로토타입 (Prototype) | UI에 인터랙션을 연결해 작동 흐름을 테스트하는 모형 | 클릭, 전환, 사용자 흐름 시뮬레이션 | Figma, XD, ProtoPie, Framer |
