1. 기획자는 화면 정의서로 말한다

화면 정의서는 청사진이다

화면 정의서는 웹 사이트의 기능, 정책, 화면 UI가 모두 반영되어 있는 최종 산출물이다. 화면 정의서를 만드는 일은 기획자에게 매우 중요하지만, 기능이나 사용자의 이용형태에 따라 고려해야 하는 경우의 수가 많기 때문에 꽤 힘든 작업이다. 디자이너, 퍼블리셔, 개발자는 화면 정의서를 참고하면서 프로젝트를 진행하기 때문에 화면 정의서는 웹사이트의 '건축 설계도'와 같다.

 

화면 정의서를 보면 웹사이트가 전반적으로 어떻게 동작하는지 이해할 수 있다. '해당 화면은 이런 기능들이 있구나' '해당 화면의 UI는 이렇구나' 처럼 누구나 화면 정의서를 보고 웹사이트의 동작방식이나 UI를 파악할 수 있어야 한다. 디자이너가 '이 화면은 어떻게 보여지나요?'라던지 개발자로부터 '이 화면에서 하단 버튼을 누르면 어떻게 동작하나요?' 등의 질문을 팀원들로부터 받는다면 화면 정의서 내용이 부족하다는 의미이므로 보완할 필요가 있다. 

 

 

화면 정의서는 언어다

화면 정의서는 디자이너, 퍼블리셔, 개발자에게는 작업 지침서와 같다. 화면 정의서에는 웹사이트에 들어갈 화면은 어떤 것들이 있는지, 해당 화면에는 어떤 컨텐츠가 들어가는지, 각 컨텐츠는 어디에 배치해야 하는지 (레이아웃), 버튼을 누르면 어느 화면으로 이동하는지 (라우팅) 등 웹사이트 동작에 대한 자세한 설명이 포함되어 있다.

 

또한, 화면 정의서는 기획자가 다른 팀원들과 소통할 수 있는 언어이다. 화면 정의서 없이 팀원들과 프로젝트에 대해 얘기하면 명확히 이해하지 못하거나 오해가 생길수 있다. 그래서 해당 문서를 보고 작업할 디자이너나 개발자 입장을 고려해서 작성하는 것이 좋다.

 

화면 정의서는 한번더 검토하기

화면 정의서는 기획자의 최종 산출물이므로 빠진 내용이 없는지 다시 한번 검토할 필요가 있다. 잘못 기재된 내용은 없는지, 모호한 표현은 없는지, 부연설명이 필요한 부분은 없는지 등을 체크해봐야 한다.

특히 디스크립션(웹화면에 대한 설명)은 팀원간에 오해가 생기지 않도록 모호한 표현은 없애고, 명확한 단어로 작성하도록 한다. 필요하면 다른 기획자에게 검토를 부탁할 수도 있다. 또한, 일정을 산출할때 화면 정의서 작성기간과 더해 검토기간도 추가로 포함하도록 한다. 

 

화면 정의서는 깔끔하게 작성하기

화면 정의서는 팀원들의 작업 지침서이기 때문에 어렵고 복잡한 단어보다 단순하고 명확한 단어를 사용하도록 한다. 여러번 읽어보면서, 퇴고하는 것이 좋다. 

 

화면 정의서는 빠진 내용없이 자세히 작성하기

'이 정도는 말하지 않아도 이해할 수 있겠지?' 와 같이 기획자만 알 수 있게 작성하지 않도록 한다. 다른 팀원들이 화면 정의서를 보고 디자인과 개발을 수월하게 진행할 수 있도록 문구가 축약되어 있다면 부연설명을 추가로 달아주는 것이 좋다. 단순한 내용은 화면 정의서 문서의 빈공간에 작성하면 되고, 복잡한 내용은 별도로 작성해서 링크로 달아주면 된다.

텔레파시

 

문서 이름 짓는 요령

기획자가 작성한 모든 문서는 팀원들과 공유하기 때문에 팀원들이 어떤 문서를 전달받았는지, 팀원들이 전달받은 문서가 최신인지 알 수 있어야 한다. 

규칙 웹사이트명_문서종류_버전_작성일.pptx
예시 라라마켓_화면정의서_v1.0_20231122.pptx

문서를 작성하는 시점에 웹사이트명이 아직 정해져 있지 않으면 가명으로라도 기재한다. 이후 문서를 작성하는 동안 사이트명이 정해지면 문서이름에서 사이트명만 수정한다.

문서종류는 웹사이트를 만드는 동안 기획자가 작성하는 기능 정의서, 정책 정의서, 일정표, 화면 정의서 중 하나로 기재하면 된다.

문서에 수정이나 업데이트가 필요한 경우 기존문서는 남겨두고, 이를 복사하고 수정한 후 버전도 함께 변경한다. 문서에 버전관리가 필요한 이유는 프로젝트 계획이 수정되는 경우 이전 버전의 문서를 참고해야 할 수 있기 때문이다. 또한, 버전을 명시하면 웹서비스에 문제가 발생할때 문서의 업데이트 이력을 살펴보면서 해결방법을 찾을수도 있다.

작성일은 문서작성을 완료한 시점이며, 년/월/일 순으로 표기한다. 프로젝트 기간이 길어지면 PC에 수많은 문서가 있을수 있기 때문에 작성일을 기록해두면 필요한 문서를 찾는데 도움이 된다. 

 

문서 버전을 변경하는 방법

문서의 초안은 버전을 0.01로 시작한다. 문서가 업데이트될때마다 버전을 0.01만큼씩 높인다. 프로젝트가 끝나면 버전을 1.0으로 변경한다. 이후 웹사이트를 대대적으로 리뉴얼하는 동안 버전을 0.01만큼씩 올리다가 리뉴얼이 끝나면 버전을 2.0으로 수정한다. 

 

화면정의서와 와이어프레임의 차이점

화면정의서는 와이어프레임보다 조금더 화면 UI가 상세하고, 화면에 대한 자세한 설명도 추가적으로 작성되어 있다. 

 

연습과제 

자신이 마음에 드는 사이트를 하나 선정하고, 웹사이트 화면을 간략화한 와이어프레임을 그려보세요! 화면간 이동은 화살표로 표현합니다.