디자이너가 만드는 화면 기획서 : 원활한 의사소통을 위한 작업

 

 

 

 

 

*2023년 8월 11일 업데이트

 

 

 

 

키패드 있는 화면에 처음 나오는 화면.. 아뇨 그거 말구.. 다음페이지! 네네 그 화면에서.. !@#$%^&*(

 

디자이너로 일하다 보면 종종 화면설계부터 들어가는 일이 있는데, 기획자가 각잡고 만드는 정말 제대로 된 정석의 화면설계서가 아니기 때문에 간단하게 진행한다. 화면설계의 목적은

 

 

 

 

 

• 전체적인 정보 구조 파악(메뉴트리)
• 협업 관계자와의 소통(넘버링)
• 빠른 피드백 적용

 

 

 

 

 

 

나는 주 업무가 디자인이기 때문에.. 디자인에 집중하기 위해 스타일 입히기 전의 화면에 대한 피드백을 빠르게 적용 하기위해 와이어프레임을 만들어 정리해서 보여주는것이 나의 가장 큰 목적이었다.

 

그리고 가장 중요한 넘버링 작업으로 화면에 대한 의사소통시 번호로 지칭하여 빠른 의사소통을 가능케 했고 버튼을 누르면 어디로 이동하는지 등, 개발자에게도 이해를 시켜줄 수 있는 소통에 집중한 문서이기 때문에 화면리스트, 플로우차트, 정책 등은 공유가능한 구글시트 또는 노션에서 진행하면 되어서 문서에 포함시키지 않았다.

 

 

*플로우차트도 마찬가지 다른 문서에서 진행 -> 간단한 플로우라면 X

     ㄴwhy? 리스트업, 플로우 수정 할 때 마다 화면설계서 버전이 계속 올라가는 문제가 생김

 

 

 

 

 

 

 

 

 

버전 히스토리(Version History)

 

 

 

어느부분이 수정되었는지 알 수 있도록 초장에 히스토리 내용을 표로 정리해서 넣는다. 버전업의 숫자같은 경우 주관적인 부분인데 나는 0.01으로 문서를 시작하고 소수점 두번째 자리는 크게 추가되거나 바뀐부분이 있을 때 마다 올라가며 0.011같이 소수점 세번째 자리는 오타수정이라던지 큰 의미없는 수정을 할 때 세자리수를 붙이게 되었다.

 

 

 

 

 

 

 

메뉴트리(Menu Tree)

 

 

정보구조와 메뉴트리를 따로 진행해야 하지만.. 학교에서도 그렇게 배웠지만.. 디자이너에게는 시간이 없다! 추후 화면 확장에 대한 계획이 없다면 메뉴트리를 진행하면서 메뉴에 번호를 붙이는 작업까지 한번에 진행한다! 사용자 여정은 여유있을 때 추천

그리고 나는 추후 디자인이 완성되고 제플린에 업로드 할 때 이걸 보며 섹션을 나눠야한다. 또는 피그마에 잘 정리하면 된다.

 

 

 

 

 

 

 

Q. 디자인 입장에서의 정보구조(Information architecture)와 메뉴트리(Menu tree)의 차이점은? 그리고 플로우차트(Flow chart)는?

 

A. 정보구조(이하 IA)는 서비스의 전체적인 구조도를 나타내고 메뉴트리는 보이는 화면 메뉴에 대한 경로(Depth)를 나타낸다. 플로우 차트는 서비스의 상세한 흐름을 보여 줄 수 있는 시각화된 흐름도다. 그렇기 때문에 메뉴트리는 모바일과 PC에서 달라질 수 있지만 IA는 달라지지 않는다. IA의 목표는 서비스의 전체적인 이해도이며 메뉴트리는 화면 구조를 한눈에 파악 할 수 있도록 하는것이 목표이다.
*디자이너로써 강의와 실무에서 IA, 메뉴트리, 플로우차트를 접한 제 주관이며 저의 주관이 꼭 정답은 아닙니다.

 

 

 

 

 

 

 

 

 

 

화면설계

 

 

 

 

일반 화면설계서랑 똑같다. 디스크립션은 항상 오른쪽에 필수로 둬야하고 모든 기능과 설명을 다 넣어야한다.

그대신 번호 작업은 필수이며 추후 화면에 대한 대화를 할 때 번호로 소통하기 때문에 넘버링작업은 신중하게 해야한다.

 

 

 

 

 

 

 

무신사 예시

 

 

 

 

000-00-00-00-00

*같은 평행관계에서는 숫자가 위로 올라가지만 뎁스가 늘어나는 수직관계에서는 오른쪽 방향으로 숫자가 추가된다고 보면 된다.

 

 

 

 

A001 우먼 홈

A001-01 알림(header)

A001-02 검색(header)

A001-03 장바구니(header)

A001-04 GNB(하단 고정 내비게이션 바)

ㄴA001-04-01 카테고리

ㄴA001-04-02 ...

A001-05 상단 탭 메뉴

ㄴA001-05-01 ...

ㄴA001-05-02 ...

 

 

 

화면이 너무 복잡하다면 알파벳을 추가로 넣어 영역을 나눠서 진행하는것도 좋은 방법인 것 같다.

 

 

 

 

 

 

 

플로우차트(Flow chart)

 

 

 

 

회원가입 혹은 비밀번호 찾기 또는 마켓 서비스에서의 구매 여정 등에는 성공과 실패가 존재 할 수 밖에 없기 때문에 다양한 변수를 생각해야 한다. 그렇기 때문에 플로우차트가 필요하다. 간단한 플로우차트를 그리는 것도 다양한 디자인을 생각 할 수 있어서 좋은 방법이라 생각된다.

 

 

 

 

 

 

 

 

 

 

 

 

여기까지 완성되면 엄청난 피드백과 예상치 못하게 갑자기 추가된 기능들과 등등 다양한 이슈들을 접하며 고치고.. 버전업하고.. 중간중간 디자인가이드(컬러, 폰트..)를 작업하며 메인화면부터 입혀서 스타일 컨펌도 받아야한다. 갈 길이 멀다.