화면정의서(스토리보드) 쉽게 이야기하기

 기획의 꽃이라고 불리는 화면 정의서 이 화면 정의서는 무엇이며 왜 이렇게 중요하다고 하는 걸까요?

 

Q. 화면 정의서 무엇이길래 다들 이렇게 중요하다 꽃이다 하는 걸까요?

 

화면 정의서는 기획의 최종 산출물이자 개발자, 디자이너와 공유하는 최종 파일입니다.

개발자는 화면 정의서를 화면 정의서를 보고 개발하고 디자이너 역시 화면 정의서를 보고 전체적인 디자인을 하게 됩니다.

화면 정의서를 바탕으로 산출물이 나오기 때문에 화면 정의서는 명확하게 작성되어야 합니다.

 

Q. 명확하게 작성한다라는 게 뭔가요?

 

 명확하게 작성한다라는 것은 우선 이 문서는 개발자, 디자이너를 비롯해 회사 상황에 따라 QA가 함께 볼 수 있습니다. 즉 여러 사람이 보는 문서라는 것이죠. 그렇다 보니 이 문서는 용어가 통일화되어있어야 하며, 누가 봐도 이해가 가능해야 합니다.

Unsplash - Building Construction photo by Scott Blake

 흔히 화면 정의서를 건물 설계도로 예시를 많이 드는 데 건물 설계도가 보는 사람마다 누구는 엘리베이터를 지어야 하구나 누군가는 에스컬레이터로 지어야 하는구나라는 식으로 다르게 이해되고 어떤 곳은 벽돌 어떤 곳은 시멘트라는 식으로 다르게 명시되어 있다면 그 건물이 잘 지어지기는 힘들 것입니다.

 

Q. 무슨 내용이 들어가 있어야 하나요?

 

 화면 정의 서인만큼 화면에 대한 설명, 기본 값, 동작 방법, 정의와 같은 내용(Description)은 필수적으로 들어가 있어야 합니다.

그리고 제품의 히스토리와 정책 역시 함께 적어 둡니다.

필요에 따라 별도의 Page에 설명을 따로 적기도 합니다. (하단 링크를 참고할 경우 더욱 상세하게 보실 수 있습니다.)

화면정의서 디스크립션 영역 예시

작성하면서 가장 중요한 것은 모르는 사람이 봐도 이해해야 하고 읽고 나서 서로 다르게 이해하는 일이 없도록 최대한 구체적이고 명확하게 적어줘야 합니다. 

 

 텍스트가 많을수록 읽기 싫어지는 법이니 텍스트를 많이 적기보다는 되도록 이미지화해서 적는 게 좋다고 생각됩니다.

 

Q. 최종이라고 하면 수정이 불가능한 건가요?

 

 최종 문서라고 하지만 수정은 가능합니다. 되도록 수정 안 하는 것이 좋긴 하겠지만 여러 가지 요인에 의해서 Tag가 덕지덕지 붙은 문서가 되기도 하는 데 그래도 최대한 누구나 알아볼 수 있고 명확하게 적을 수 있도록 노력하는 게 좋겠습니다.

 

참고:https://yslab.kr/148

[웹/앱 설계의 기본] 화면설계서 작성방법