스토리보드 디스크립션 쓰는 방법

디스크립션(Discription)은 작업자에게 '다음 행동'을 암시하는 화면을 정의하는 문장이다.

즉, 기획한 웹사이트의 와이어프레임을 잡은 후에 그 화면에서 발생하는 액션을 이해관계자에게 설명하기 위해 작성하는 것이라고 보면 된다.

*와이어프레임: 웹 페이지의 구조를 제안하기 위한 화면 설계도이다. 즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것이다.

 

(와이어프레임) + (디스크립션) = 스토리보드

 

세균무기 웹사이트

보통 좌에서 우로, 위에서 아래로 기술 번호를 매겨서 디스크립션을 한다.

스토리보드를 작성하다보면 계속해서 추가 기술을 해야 하거나 신규 수정이 필요할 경우가 있는데, 그 때마다 순서에 맞게 맞춰 작성해주는게 좋으며, 버전이 달라진 경우는 수정한 부분을 기존 디스크립션과 차별되는 컬러 또는 박싱으로 표현해야 이해관계자들이 바로 파악할 수 있다.

 

회사마다 스토리보드를 만들지 않고 와이어프레임으로 대체하는 곳도 있다.

내가 근무하고 있는 곳에서는 와이어프레임 단계에서 디스크립션까지 모두 포함해서 작성한다. 그래서 따로 스토리보드라는 산출물이 나오지 않고 와이어프레임으로 대체하곤 한다. 명칭을 좀 정리해야겠다는 생각을 하기는 하는데...

 

이미지 출처 기획자 데이먼

다시 디스크립션 내용으로 돌아가자면, 디스크립션을 쓸 때 꼭 써야할 요소는 다음과 같다.

 

Function Description과 Button Description

 

Function Description

• 기능에 대한 상세한 설명을 작성한다.
• 인풋박스에는 텍스트가 몇 글자로 입력 제한되는지, 기호 또는 숫자 사용이 가능한지, 유효성 체크 방식 등 내부적으로 동작하는 자세한 기능을 작성한다. 

예) 회원가입 시 아이디/비밀번호/입력 내용 등에서 유효성 검사 메시지(Validation Message)를 꼭 기술해 줘야 한다.

네이버 회원 가입 페이지

회원가입 부분의 기획방법을 잘 설명한 아티클이 있어 공유한다.

이렇게 기획하면 안 돼요! #회원가입

 

디스크립션은 대부분 기획자가 입력하나 디자이너나 개발자가 보고 부족한 부분에 대해 보완요청을 하는 경우가 많다. 내가 디자이너로 일할때는 디스크립션을 내가 추가로 넣어서 기획자에게 도로 제안한적도 있다.(라떼는 말이야 하려던건 아니었는데)

여튼 디스크립션은 기획자가 이해하는 부분에서 끝나는 것이 아니라, 나아가 개발자가 이해할 수 있도록, 개발자 친화적으로 쓰는것이 중요하다. 프로젝트의 끝에는 결국 개발자가 마무리를 지어줘야 하기 때문이다. 

 

Button Description

• 버튼이 어떤 기능을 수행하는지부터,
• 활성화/비활성화
• 알림은 표시 방법
• 색 변화 경우 표기
• 클릭 시 어떠한 링크로 이동되는지
• self/blank인지 등