3. 화면 정의서 작성방법

화면 정의서는 한장 한장 순서대로 완벽하게 작성하는 것이 아니라 웹 사이트의 이용흐름(워크플로우)에 따라 모든 화면을 대강 스케치한 다음 조금씩 살을 덧붙이면서 구체화하는 방식으로 작성한다. 웹 사이트의 화면들은 일직선으로 연결된 것이 아니라 복잡하게 뒤엉켜 있다. 이 때문에 뒷부분의 내용을 작성하거나 수정함에 따라 앞부분의 내용도 수정해야 할수 있다. 

순서대로 모든 화면을 대강 스케치하기

한 화면씩 완벽하게 작성하지 않고, 화면들의 연결흐름에 따라 생각나는대로 대강 스케치한다. 스케치하면서 떠오르는 생각이나 주의사항을 디스크립션에 간단하게 메모해둔다.

모든 화면의 디스크립션 작성하기

앞서 개략적인 스케치가 완성되면 틈틈이 메모한 내용을 바탕으로 좀 더 구체적으로 디스크립션을 작성한다. 스케치와 같은 방법으로 화면간에 서비스 흐름에 따라 기능설명, 화면 이용방법, 작업 요청사항 등을 기술한다. 

이용자 행태와 작업자를 고려하여 스케치와 디스크립션 구체화하기

작성된 스케치와 디스크립션을 여러번 검토한다. 사용자가 화면을 이용하면서 실수할만한 부분이나 팀원들이 작업하면서 의문을 가질 사항 등을 고려하면서 스케치와 디스크립션을 구체화하고, 내용을 보완한다. 미처 생각하지 못한 새로운 화면을 추가할 수도 있고, 기존 화면을 삭제하거나 수정할 수도 있다. 

화면이름과 URL주소 추가하기

화면의 전체적인 흐름이 확정되면 화면 정의서의 슬라이드 위치가 뒤바뀔 일은 거의 없다. 그러므로 화면이름과 URL을 입력하여 화면 정의서를 마무리짓는다.

 

스케치 작성요령

스케치는 검정 계열의 색상만 사용한다.

스케치는 검정 계열의 색상 위주로 사용한다. 단, 의미를 구분하거나 특정 문구를 강조할때만 제한적으로 사용하도록 한다. 다양한 색상을 사용하면 디자이너는 이 색상으로 디자인하라는 의미인지, 기획자가 단순히 의미를 강조하려고 사용한 것인지 헷갈려 할 수 있다. 디자이너에게 특정 색상을 사용할 것을 요청할때는 디스크립션에 추가하도록 한다. 

 

도형은 엷게 그린다.

웹 화면을 표현할때 선과 도형을 많이 사용하게 되는데 선이 너무 굵으면 텍스트나 화면의 레이아웃을 파악하기 힘들다. 그래서 선은 되도록 회색 계열의 연한 색상을 사용하고, 가는선으로 표현하는 것이 좋다. 선의 두께는 파워포인트 기준으로 1/2pt 를 넘지 않도록 한다. 

 

문구는 실제 웹화면에 가깝게 작성한다.

문구는 실제 화면에 보여지는 것과 유사하게 작성하는 것이 좋다. 상품명이나 이용후기 등 텍스트가 보여지는 부분에 'ㅇㅗ소 ㅓ' 이나 'asfdfdfdf' 와 같이 작성하면 디자이너나 개발자가 봤을때 성의없다고 생각할 수 있다. 실제와 유사하게 문구를 작성하면, 디자이너나 개발자가 해당 문구를 보고 디자인하거나 화면을 구현할때 도움이 된다. 

 

시각적인 요소를 고려해서 그린다.

웹 사이트에서 자주 사용되는 아이콘이 있으면 적극적으로 사용하는 것이 좋다. 우리가 흔히 웹사이트 화면에서 보는 아이콘들을 활용하면 화면이 깔끔해지고, 의미전달도 쉽다. 특히 화면에 버튼이 들어간다면 버튼에 텍스트 대신 아이콘을 사용하면 사용성을 높일수 있다. 또한, 반응형 웹을 적용한 모바일 환경에서는 화면이 작기 때문에 더더욱 아이콘으로 표현하는 것이 효과적이다. 

 

데이터를 호출하는 부분은 중괄호({})를 사용해서 작성한다.

앞선 수업에서 웹 쇼핑몰 상품 상세화면을 만들때 상품수만큼 만들지 않고, 화면(레이아웃)은 하나만 만들어놓고 데이터베이스에서 데이터만 다르게 불러와서 사용한다고 했었다. 그러한 이유로 화면 정의서에서 데이터 호출이 필요한 부분은 중괄호를 이용하여 {상품가격}과 같이 작성하도록 한다. 중괄호를 사용하면 개발자에게 '이 부분은 데이터를 호출해서 사용해주세요!'라고 일일이 설명하지 않아도 개발자는 중괄호를 확인하고, 데이터베이스에서 데이터를 조회해서 화면에 보여줄 것이다. 화면이 복잡한 경우에는 실제 데이터가 사용된 웹 화면도 함께 보여주면 좋다. 웹사이트는 개발관점에서 정적사이트(static site)와 동적사이트(dynamic site)가 있는데 이러한 방식은 동적사이트에 해당된다. 

 

화면이 세로로 길면 슬라이드를 나눠서 작성한다.

화면이 길면 슬라이드를 나누어 스케치한다. 웹 화면은 세로방향으로 스크롤이 가능하기 때문에 화면이 세로로 길어지면 하나의 슬라이드에 다 담기 힘들다. 화면을 나누면 화면이 이전 슬라이드 & 다음 슬라이드에서 연결된다는 것을 표현하기 위하여 별도의 도형을 추가할 수 있다. 파워모크업에서는 Cutout 도형이라고 한다. 화면에 같은 내용이 반복되어도 해당 도형을 삽입하여 생략이 가능하다. 보통 해당 도형이 슬라이드 위아래로 있으면 이전 슬라이드 & 다음 슬라이드와 연결된다는 의미이고, 슬라이드 중간부분에 위치하면 화면에 같은 내용이 반복되어서 생략된 경우라고 볼 수 있다. 

 

설명이 필요한 스케치는 번호를 매겨서 작성한다.

스케치 도중에도 필요한 기능이 생각날 수 있다. 가령 입력창의 입력기준(한글 4자 이상 등)이나 버튼 클릭시 이동할 URL 주소 등 퍼블리셔나 개발자가 작업시 꼭 필요한 사항이 빠져있을 수 있다. 안내사항이나 가이드라인 또는 부연설명이 필요한 경우 스케치의 해당 부분에 번호를 추가하고, 설명은 디스크립션 영역에 작성하도록 한다. 이때 번호는 기존의 스케치에서 눈에 띌 수 있도록 색상을 넣어주는 것이 좋다. 안내사항이나 부연설명은 스케치 위에 바로 작성하지 않도록 한다. 그렇게 하면 스케치 영역이 복잡하게 보인다. 

 

화면구성에 따라 슬라이드를 구분해서 작성하면 화면을 찾기 쉽다.

관련된 화면에 따라 슬라이드를 구분하도록 한다. 화면 정의서의 슬라이드를 섹션으로 나누면 원하는 문서를 쉽고 빠르게 찾을수 있다. 화면 정의서 앞부분에 목차를 추가할수도 있지만, 섹션으로 분리하는게 훨씬 낫다. 화면 정의서의 슬라이드 수가 많아질수록 섹션으로 구분하면 유용하다. 가령 기획자가 디자이너에게 '상품후기 작성 화면을 수정해주세요' 라고 했는데 슬라이드가 300장이 넘어가면 상품후기 작성 화면을 찾는데 쓸데없는 시간을 낭비하게 된다. 그래서 관련된 화면끼리 섹션으로 구분해두면 좋다. 섹션을 구분하려면 슬라이드 사이 여백에 마우스 우클릭을 하고 [구역 추가]메뉴를 클릭한다.

 

이용자 화면을 구현할때는 관리자 화면도 함께 생각한다.

웹 쇼핑몰의 이용자 화면에 대한 화면 정의서를 작성할때는 관리자 화면도 함께 생각해봐야 한다. 예를 들어 상품 상세화면을 보여줄때 '인기상품' '특가상품' 과 같은 배지도 함께 보여준다. 이러한 배지를 상품에 따라 다르게 보여주려면 관리자의 상품등록 기능은 어떻게 동작해야 하는지 함께 고민해볼 필요가 있다. 반대로 이용자 화면에서 등록한 데이터를 관리자 화면에서 어떤 방식으로 보여줄지도 생각해봐야 한다. 가령 웹사이트에서 특정 사용자가 회원가입을 진행하면, 관리자 화면에서는 회원정보를 어떻게 보여줘야 할지도 연관지어서 고민해보는 것이 좋다. 

 

디스크립션 작성요령

스케치는 웹 화면이 실제로 어떻게 구현될지 미리 예상할 수 있도록 선과 도형으로 표현하는 것이라면, 디스크립션은 스케치만 보고 알 수 없는 내용을 글로 작성하는 부분이다. 디스크립션을 작성하면 디자이너나 개발자가 화면 정의서의 디스크립션 부분을 읽어보고, 해당 화면이 어떻게 동작하는지 자세히 이해할 수 있다. 그래서 디스크립션은 작업자가 추가질문 없이 프로젝트를 수월하게 진행할 수 있도록 자세하게 기술하는 것이 좋다. 또한, 작업자가 해당 화면을 구현할때 오해가 없도록 명확한 단어로 작성하도록 한다.

 

분할된 화면의 위치를 표기한다.

분할된 화면위치를 기재하도록 한다. 웹 화면은 세로방향으로 스크롤이 가능하므로 세로로 긴 화면이 많다. 이러한 경우 화면 정의서에서는 슬라이드를 나눠서 작성하는데 이때 현재 슬라이가 웹 화면의 어느 위치인지를 디스크립션 상단에 보여주도록 한다. 

 

번호 순서대로 제목과 내용을 작성한다.

스케치에 추가한 번호 순으로 제목과 내용을 디스크립션에 작성한다. 작업자는 스케치에 표기된 번호와 일치하는 디스크립션 내용을 찾아서 읽는다. 즉, 해당 번호는 스케치와 디스크립션을 연결해주는 역할을 한다. 번호는 산술적인 의미가 없기 때문에 알파벳으로 대체해도 된다. 

 

특정 작업자에게 전달할 내용은 따로 표기한다.

특정 작업자가 확인할 내용은 별도의 제목으로 구분한다. 디자이너는 화면 정의서에서 스케치를 주로 확인하고, 개발자는 화면 정의서에서 디스크립션을 자주 본다. 그러나 때대로 디자이너에게 스케치의 상세내용에 대해 알려줘야 할때가 있다. 이러한 경우 디스크립션에서 디자이너만 확인할 내용은 별도의 제목을 표기해서 디자이너가 디스크립션 전체를 다 읽을 필요가 없도록 하는 것이 좋다. 가령 디자이너만 보는 디스크립션 제목은 '디자인' 이라는 제목을 달아두면 된다.

 

기능 설명은 이용자 관점에서 설명하면 된다.

기능 설명은 웹 화면에서 동작되는 상황 그대로 서술하면 된다. 만약 기획자가 웹 개발에 관한 지식이 있다면 개발시 어떤 작업을 해야 되는지 정확히 작성하면 된다. 예를 들어, '소셜 로그인시 토큰을 쿠키에 저장하기'와 같이 기술적인 부분을 명확히 작성할 수 있다. 다만 기획자가 개발지식이 전무하다면 웹 화면에서 동작되는 상황 그대로 기술하여 개발자가 스스로 어떤 작업을 해야할지 유추할 수 있게 하면 된다. 가령 '웹사이트 로그인시 홈페이지로 이동하여 상품목록 보여주기' 라고 작성하면 개발자는 로그인후 홈페이지로 리다이렉션하고 홈페이지가 로딩될때 서버와 DB에서 상품목록을 불러와서 화면에 보여주면 되겠다고 생각할 것이다. 누구나 알고 있는 회원가입, 로그인, 댓글, 게시판 등의 기능들은 자세한 설명을 생략해도 된다. 

 

정책 정의서 내용도 화면정의서에 반영하도록 한다.

정책 정의서에 작성된 내용은 화면 정의서에 반영되어야 한다. 그렇게 해야 개발자나 퍼블리셔가 정책에 맞도록 프로그래밍할 수 있다. 예를 들어 정책 정의서에 '공지사항 게시글은 관리자만 작성가능'이라고 되어 있으면, 화면 정의서에는 '공지사항 게시글은 관리자만 작성할 수 있도록 구현'이라고 작성하면 된다.

 

버튼과 배너는 링크주소와 링크타입을 기재한다.

버튼과 배너는 이동할 페이지의 URL 링크주소와 링크형태를 기재한다. 자사 웹사이트 안에 존재하는 페이지는 Self 를 이용하여 현재 화면이 변하도록 기재하고, 외부 웹사이트로 이동하는 경우에는 Blank 를 설정하여 새창이 열리도록 작성한다.

 

경고창이나 선택창은 기획자에 따라 다양한 형태로 작성한다.

경고창이나 선택창은 회원가입이나 주문서 작성 등 관리자에게 필요한 데이터를 사용자로부터 전달받아야 하는 경우에 자주 사용된다. 경고창은 스케치 영역에 직접 그린다. 경고창이 많으면 표 형태로 정리할 수도 있다. 또한, 경고창 메세지가 간단하면 그냥 디스크립션에 메세지 내용만 작성해도 된다. 경고창은 기존 스케치를 가리지 않도록 빈 공간에 보여주고, 경고창을 보여줄 공간이 부족하면 새로운 슬라이드에 별도로 보여주도록 한다.

 

데이터 호출방법은 자세하게 작성하도록 한다.

데이터베이스에서 데이터를 호출해서 화면에 보여줘야 하는 경우 무슨 데이터를 몇개나 보여주고, 어떻게 보여줘야 하는지 상세히 작성하도록 한다. 예를 들어 게시판 화면에서 게시글을 한 페이지에 몇개나 보여줘야 할까? 상품목록 화면에서 상품은 한 페이지에 몇개나 보여주면 될까? 또한, 게시글이나 상품이 없는 경우에는 어떻게 보여줘야 할까? 화면 정의서에서는 상품이 없는 경우 '등록된 상품이 없습니다'라고 디스크립션에 기재한다. 상품이 존재하는 경우 '최신순으로 페이지당 20개씩 보여주기'라고 작성한다. 즉, 목록을 정렬하는 방법 및 페이지당 보여줄 갯수 등을 기재한다.