IT 서비스 기획, PM, PO

[서비스 기획/PM] 화면설계서(스토리보드) 작성방법

CODE_PLAN 2024. 1. 21. 21:35

목차 

- 히스토리 

- 메뉴구조 

- 화며목록 

 

설계 

- 프로세스

- 정책

- UI, 기능정의

- 마무리 표지

(감사인사) 

 

 

 

화면설계서나 스토리보드를 만들때 첫페이지는 표지로 시작 

같은 버전의 문서를 보는지 체크하는것도 중요 

메뉴구조- 프로젝트 사이즈 한눈에보기 쉬움 

프로젝트를 하게되면 information 아키텍처라는 포멧을 정리하게됨

IA

화면목록중 변경되거나 삭제되면 아에 행을 삭제하는게 아니라 시각화해서 표시해주는게 좋다

- 간단한 UI 몇개있는 페이지를 만들면 FlowChart를 작성할필요가 없다 

조금 복잡한 프로세스가 들어가게되면 FlowChart를 먼저 작성하는것이 좋다 

( 프로세스 - 평행사변형/ 분기 - 마름모/페이지단위(ex: 인증방식 선택-네모난 직사각형으로 표시) 

-비밀번호 찾기같이 입력폼이 필요한경우  -> 오른쪽에 UI에 필요한 필드들과 항목들을 정리하면 

이후에 UI 그릴때 굉장히 빠르게 그릴수있다

- 프로세스에 따라서 alert 메시지가 필요한경우가 있는데요 그럴땐 시각적으로 명확히 구분해서 표시하는것이 좋다

- 정책에선 앞에서 flowchart내용이 회원가입에대한 내용이면 정책도 회원가입에 대한 내용을 정리해주는것이 좋다

이때 어떤것을 선택했는지 비고란등에  ex) 4안으로 결정 이렇게 적어주면 커뮤니케이션할때 좀 더 명확하게 할수있다.

-유저 등급이 많을때는 권한정책을 정리하는것이 좋다 -> 표로 정리하면 굉장히 좋다

( 페이지단위 / 등급단위 / 페이지별 권한에 대해서 정리/ + 페이지에 따라서 기능이 없는경우 블럭처리를 해서 표시해주면 좋다) 

- UI, 기능정의단에서 개발자나 디자이너에게 설명이 필요할경우 별도의 공간에 표시해서 설명해주기도 한다

( 공통적인부분은 check point 로 빼서 적어주는것도 좋으며, 페이지와 관련된 아이디도 함께 적어주면 좋으며, 

페이지가 부족한부분은 따로빼서 정리해주는것이 좋다

ex) validation - 필수 입력항목/ 유효성 체크 => 개발자들이 알기쉽게 나타내기)