오늘부터 갓 들어온 신입분에게 설명하는 느낌으로 글을 적어보려고 합니다.
실제로 후배와 사이가 가까워진다면 해당 블로그를 오픈하고 전달할 예정입니다.
그만큼 조금은 친밀하고 막연한 말투로 글을 작성할테니 넓은 아량으로 이해부탁드립니다.
화면 기획을 시작 할 때. 우리는 상위기획 / IA / 정책서 를 참고합니다.
앞서 상위기획 / IA / 정책서에 참여했으면 가장 베스트지만 해당 실무를 참여하지 않아도
해당 문서를 참고로 화면 기획을 바로 진행해야할 수도 있습니다.
[기획]이라는 분야는 '신뢰'가 중요한 분야라고 거듭 생각이 드는데요.
이해관계자의 '신뢰' 득하기 위해서 체계적으로 화면설계서를 작성할 필요가 있습니다.
일단 적으면서 추가하자는 마인드로 설계를 치다보면 숭숭 뚫린 기획서를 만들 수 있습니다~
이러면 이해관계자의 '신뢰'와 동시에 내 밥벌이도 잃을 수 있겠죠.
체계적인 화면 기획의 시작은 01.화면 기획서의 순서 정하기입니다.
01. 화면 기획서의 순서
화면기획서의 순서. 기획자마다 스타일이 조금씩은 다를 수 있겠지만
일반적으로 저와 제 동료 기획자들이 써왔던 순서를 말씀드리겠습니다.
오늘은 간단하게 설명드리고 추후에 자세하게 단계마다 설명드리도록 할게요.
0. 요약
표지 > 버전 히스토리 > 약식 정책서 > 서비스 구성 기능 요약 > 서비스 주요 프로세스(시나리오) > 공통 영역 > 메인 기획 1 > 서브 기획1 ......
1. 표지
버전과 작성자 최종 작성일자를 기입합니다.
SI 업체의 경우 주관부서/유관부서 담당자의 싸인 등을 받고는 합니다.
2. 버전 히스토리
보통은 테이블로 작성하고는 하는데요.
버전 / 작성일자 / 작성자 / 내용 / (비고) 정도 작성하시면 됩니다.
히스토리는 약식으로 간단하게 작성해주시면 되지만 필수로 작성해주어야 하는 중요한 요소입니다.
| 버전 | 작성일자 | 작성자 | 내용 | 페이지 |
| 3.1 | 2012.12.12 | 미어캣 | 변경된 예외케이스 추가 | P12 |
3. 정책서(약식)
전체 정책서를 화면 기획서에 넣을 필요는 없겠죠.
화면 기획서에서는 서비스의 기본적인 용어 합의와 UX합의가 필요한 사항이나 개발 기본 사항이 포함된 정도의 약식 정책서가 포함됩니다.
뭐,,일반적으로느 기능 / 주요 페이지별로 정책서 내용을 발췌해 일단 얹어 놓고는 합니다. 왜냐면...
<<기획에 영원한 건 절대 없어. 결국에 정책도 변했지..>> 정책은 화면 기획 중에도 변경 될 수 있기때문에 앞서 정책의 정석 처럼 픽스를 해놓을 필요는 없다고 생각합니다.
4. 서비스 기능 요약
페이지별 기능 및 콘텐츠를 테이블 형태로 단순 기입해놓습니다.
화면 기획이 상세히 작성되지 않은 상태에서 대략적인 기능 배치를 구상해볼 수 있는 페이지고 추후 화면 기획서를 작성하면서 채워가시는 페이지일수도 있습니다.
기능의 상세한 디스크립션이 아닌 정말 기능. 예를 들어 본문 메뉴 - 책갈피 - 설정/해제 딱 이정도 수준의 기능 작성입니다.
해당 페이지가 필수는 아니지만 일단 적어놓으면 기획자 입장에서 화면 기획을 쓸 때 일단 용이합니다.
중복 기능이나 콘텐츠가 있던 페이지로 넘어가서 디스크립션을 복사해올 수도 있고,,, 껄껄
개괄적으로 서비스의 기능을 확인할 수 있어 IA보다는 더 자세한 조망도라고 보실 수도 있습니다.
IA 혹은 메뉴트리가 전국 특별광역시가 기입된 대한민국 지도라면 해당 페이지는 중대형 소도시가 전부 기입된 지도라고나 할까요.
필수는 아니지만 유용한 페이지 정도라고 생각하시면 될 것 같습니다.
5. 주요 프로세스 (시나리오)
서비스의 주요 프로세스를 기입합니다.
세부 프로세스는 각 화면 기획의 앞단에 작성하시고 주요 프로세스 혹은 플로우 차트는 앞서 작성하고는 합니다.
기획서를 처음 읽는 이들에 이해를 돕기 위함이라고나 할까요? 앞선 커뮤니케이션을 위함이라고나 할까요.?
자주 확인해야하는 부분이라 검색의 용이성을 위함이라고나 할까요?... 앞선 배치의 쓰임은 다양합니다.
프로세스 작성 방법은 추후 자세하게 다뤄보도록 하겠습니다.
6. 공통 영역
공통 영역에 대한 정의가 이루어지는 페이지입니다.
페이지 공통 컴포넌트인 GNB , 하단 네비게이션, 햄버거 버튼 메뉴 등 을 기입하고
입력 필드나 영역 가이드 등을 기입하기도 합니다.
저 같은 경우 공통 팝업이나 스크린 문구 등을 작성해 놓기도 합니다.
TIP. 최대한 공통 요소를 다 정리해 놓으셔야 추후 . 공통00 확인/참고 등으로 디스크립션을 줄일 수 있습니다.
ex) 공통08. 스크린문구_09 출력 등
7. 메인/서브 등등.
실제 화면들에 대한 설계가 이루어지는 페이지입니다.
중요도가 높은 순서부터 치는 경우도 있고 IA 설계를 했던 순서대로 내려오는 경우도 있죠.
02. 화면 기획서 양식
양식은 회사마다, 도메인 마다 다르게 작성할 수는 있겠지만 저는 사용해오던 양식을 대체로 재활용해서 사용하고는 합니다.
제가 사용하는 양식이 정석은 아닐 수 있으나 적어도 제가 작성한 양식의 내용정도는 들어가야 한다고 참고하시면 될 것 같습니다.
아차차 저는 화면기획서의 툴로 figma 와 ppt를 이용하고는 합니다.
(액슈어 같은 경우 분명 화면 기획서를 그리기에는 매우 유용한 툴이라고 생각은 드나 개발자나 디자이너분에게 넘길때 그 분들이 적응하는데 시간이 걸렸기때문에 폭2..)
PC / MO 기획서를 나눠서 보여드릴게요.
먼저 PC 웹 기획서 같은 경우 PPT 로 작성한 양식입니다.
02.1. PC 기획서
- 기존 기획서에서 내용을 대부분 날리니 빈껍데기가 되었네요. (추후 내용 채우기는 말씀드릴 예정이니 걱정마세요)
뭐 하여튼 전체 화면을 모두 써서 PC화면을 설계한다는 느낌적인 느낌만 참고하시고. 저희는 양식에 집중해보죠.
상단에 [화면명] [화면경로] [화면 ID] 가 보이실까요?
그리고 우측면에 [디스크립션[이 보이실까요?
여기 정보에 걸맞는 화면을 저희는 기획해주시면 되는거에요.
화면명 : 화면에 대한 정보 (화면 타이틀)
EX) 로그인 페이지
화면 경로 : 이 화면에 도달하는 경로
EX) 로그인 -> 약관동의 -> 14세미만 보호자 동의
화면 ID : 화면 ID
ex) mk_ma_01 = 미어캣_메인_1번페이지
02.2. MO 기획서
모바일 기획서는 조금 더 신경써서 피그마로 그린 기획서를 가져와봤습니다.
양식이랄게 PC / MO 크게 다르지는 않아요. PC화면을 그려놨던 왼쪽 영역에 모바일 화면을 그리면 되는거죠~
Page path (화면 경로)
Page ID (화면 ID)
Page Name (화면명)
+
작성일
정도로 PC와 동일한 구성을 가지는데 [작성일] 같은 경우 구축보다는 운영 서비스단에서 기입을 하고는 합니다.
운영의 일부 서비스는 변경이 잦다보니 작성일 작성이 필수인 경우도 있어요.
이건 서비스 성격마다 다르니 현재 자신이 맡은 서비스/도메인 성격을 고려해서 양식을 작성해보도록 하세요.
오늘은 뭐 사실 화면 기획서의 일반적인 작성 순서와 양식 정도만 말씀드렸습니다.
사실 별거 아니기도 한 내용이지만 시작은 늘 중요한 법이니까요.
사수없이 화면기획서를 그려야하는 일부 기획자입장에서는 이런것도 도움이 될 수 있을 것 같아 글을 적어보았습니다.
다음에는 조금은 더 유익한 내용을 말씀드려보겠습니다.
그럼 안녕
'기획 > 화면기획' 카테고리의 다른 글
| 화면 기획 기초 2. 기획서는 자세하게? 단순하게?(feat. 화면기획 체크리스트) (0) | 2023.09.04 |
|---|