목차
1.와이어프레임
-협업을 통한 와이어프레임 완성하기
2.기획서 작성하기 실습
-가이드 FO
-가이드 BO
-기획서 작성 실습 예시
와이어프레임
필드에 따라 프로토타입, 스토리보드와 같은 의미로 사용하기도 한다.
화면설계서, 화면정의서
✔️화면(UI)을 어떻게 표현할지 그려놓은 프로토타입
✔️웹페이지, 앱페이지의 화면을 페이지 구조, 레이아웃, 정보구조, 유저플로우, 기능, 의도된 동작들에 대한 정의 - PPT, 포토샵, 피그마 등 툴 활용
4가지 항목을 깊이있게 고민해서 와이어프레임 작성하기
WHY 왜 해야 하는지 명확하게 정의
GOAL 일관되고 정확한 목표가 녹아져 있어야 한다. UI의 방향
WHAT 무엇으로 사용자와 커뮤니케이션 할 것인가
CONCEPT 룩앤필, 목표에 맞는 컨셉 정의
와이어프레임 작성 시 반영해야 하는 것
✔️비즈니스를 할 때 ‘웹’을 도구로 하는 기획이다.
웹 사용자 이해, 웹의 구조로 표현, 웹의 언어로 표현
✔️웹/앱의 구조를 설계하고 화면 UI를 설계
콘텐츠의 적절한 배치, 서비스 화면 구조, 설득 문서(협업자 대상)
협업을 통한 와이어프레임 완성하기
기획자는
전체적인 요건에 대한 분석, 방향과 목표 설정을 통해 일정 계획을 수립하고 화면을 설계, 담당자들과 커뮤니케이션, 팀별 의견 조율을 위한 설득, 최종 산출물 정리 등 프로젝트의 시작과 끝의 역할을 담당한다.
what, why, how, IF (방어로직) 를 고민하며!
웹/앱 서비스 기획자는
프로젝트의 요건 분석과 기술적인 검토가 반영된 서비스를 설계하고 이를 통해 서비스를 구축, 운영해 나가는 역할을 한다.
Web producer의 개념으로 프로젝트의 처음과 끝을 책임지며 다른 직군과의 커뮤니케이션이 가장 중요하다. 와이어프레임 역시 리뷰를 통해 협업하며 완성도 높게 만들어간다.
와이어프레임은 성공적인 서비스 구축을 위한 커뮤니케이션 도구
서비스 기획서 완성하기
*개정이력(히스토리) - 문서의 재개정 이력과 주요 변경 내용 관리, 버전 관리, 날짜 작성자 수정자 등
*정책정의 - 주요 정책 정의
*TOBE IA(Information Architecture) - 정보 구조와 내비게이션
*서비스 프로세스 및 플로우차트 - 각 기능 수행과 사용자의 행위 매핑 및 흐름도
*레이아웃 - 화면의 전체적인 레이아웃 정의 ‘통일감’ ‘공통단’ ‘커먼(CO)’
*시나리오(와이어프레임) - 기능 구현을 위한 인터페이스 요소의 배치와 화면 구조, 화면간의 흐름, 전환, 상호작용
*디스크립션 정의 내용⬇️ (화면 완성도 증가, 누수 방지)
입력폼: 아이디, 패스워드 가능 범위 정의 등
서비스 기획서 가이드_FO(front office)
서비스 기획서 가이드_BO(back office)
대체로 경력자들이 하는 편, 프론트보다 기능에 대해 디테일하고 많은 정의를 해야 한다.
백오피스를 어느 정도 이해하고 있어야 프론트오피스 정의도 가능하다.
서비스 기획서 작성
분석(사용자 분석, ux/ui 분석, 벤치마킹, 트렌드-디자인 및 ux ui 컨셉 정의) > 요건 정의 (리소스 포함 등등) > 정책 정의 > 유저 플로우, 플로우차트 > IA 정의 > 최종 산출물 :서비스 기획서
필드마다 가이드는 다르다!
실습 예시⬇️
6. User Process
✔️넘버링 ✔️화살표로 흐름 표시 ✔️내부에 순서 작성, Y/N 필요 시 다른 도형으로
7. FlowChart
유저프로세스 상에 포함됐다면 생략 가능
유저프로세스보다 디테일하게 작성 가능
8.레이아웃
와이어프레임을 설계하기 위해 대략적 레이아웃을 정의하는 문서
바디 영역에 대해 다른 레이아웃이 발생하면 정의
9. 와이어프레임/시나리오/스토리보드
BO 는… 잘 이해가 되지 않는다.
서비스 기획서 완성하기 수업은 끄읕
강사님이 중간 중간 누락된 사항들 찾아보라고 하셨을 때 하나도 못찾은 나이지만
기획서의 대략적인 구성은 파악할 수 있었다.
원활한 커뮤니케이션이 주된 목적인 것을 기억하고 처음 보는 실무자도 내용을 파악할 수 있는 기획서를 작성하자!
'PM study log' 카테고리의 다른 글
| study log 28. Portfolio 작성하기_2 (0) | 2023.03.16 |
|---|---|
| study log 27. Portfolio 작성하기_1 (0) | 2023.03.15 |
| study log 25. User Process, FlowChart (0) | 2023.03.14 |
| study log 24. PRD와 정책서, IA (0) | 2023.03.12 |
| study log.23 서비스 분석 (0) | 2023.03.10 |
