2. 화면 정의서 구성요소 이해하기

화면 정의서는 표지, 히스토리, 사이트맵, 본문으로 구성된다. 브리핑이나 세미나 등 상황에 따라 기능 정의서나 정책 정의서 등을 히스토리 다음에 추가하기도 한다. 

표지

문서의 표지는 간단하게 작성한다. 웹사이트 이름을 표지 맨 상단에 기재한다. 그리고 작성자, 회사명, 문서버전, 연락처 등을 추가로 작성한다. 화면 정의서에서 공통적인 항목을 명시하면 된다. 특히 문서버전을 기재하여 다른 문서와 헷갈리지 않도록 한다. 

문서이력

문서내용이 변경될때마다 문서이력을 기록해두면 수정된 부분만 빠르게 찾아볼 수 있다. 디자이너나 개발자가 이전 버전에서 어떤 부분이 어떻게 수정되었는지 알면 프로젝트를 수행할때 도움이 되고, 작업효율도 올라간다. 또한, 최신버전의 웹사이트가 여러가지 문제로 인해 제대로 동작하지 않는 경우 이전 버전으로 돌려야 할때 문서이력을 참고하여 다시 만들수 있다. 최신 버전의 웹사이트에 문제가 없더라도 사용자 접속률이 저조하다면 이전 버전으로 돌려야 할 수 있다. 이러한 경우에도 문서이력이 도움이 된다. 

문서이력은 버전숫자, 업데이트 일시, 수정내용, 작성자 등으로 구분해서 작성한다. 버전숫자는 하위버전부터 기재한다. 업데이트 일시는 문서수정이 완료된 시점이다. 수정내용은 필요에 따라 수정된 위치도 명시한다. 이렇게 하면 어느 부분이 수정되었는지 빠르게 찾아볼 수 있어서 작업효율이 높아진다. 

버전을 잘못 기재하면 디자이너와 개발자는 잘못된 버전을 참고하여 작업을 할 수도 있다. 또는 이전 버전을 새 버전에 덮어써서 시간을 들여 작성한 문서가 날아가는 경우도 있다. 이러한 참사를 방지하기 위하여 버전을 관리할때는 파일이름, 표지, 문서이력에 있는 3개의 버전이 일치하는지 확인한다. 

사이트맵

사이트맵은 웹사이트에 설계할 메뉴를 정리한 문서이다. 누구라도 사이트맵을 보면 전체적인 웹사이트 구조를 한눈에 파악할 수 있다. 사이트맵과 사이트 구조문서를 참고하여 화면 정의서를 작성하기 때문에 화면 정의서에 추가할때는 그대로 복사 붙여넣기 하면 된다. 다만 사이트맵의 크기가 너무 커서 한 슬라이드에 담지 못하면 화면을 여러개로 쪼개서 담거나 트리구조에서 표형태로 변환해서 담도록 한다. 

본문

실질적인 화면설계 부분이다. 본문양식은 회사마다 기획자마다 다를수 있지만, 주로 화면이름/URL/스케치/디스크립션으로 구분해서 작성한다. 프로젝트 이름이나 기능코드 등을 추가하려면 화면 윗부분에 추가한다. 작성자/작성일/문서버전은 표지에 이미 기재하였기 때문에 본문에서 작성할 필요는 없다. 

화면이름은 웹페이지 화면의 이름을 기재한다. 해당 화면이 어떤 내용을 담고있고, 어떤 기능을 하는지 쉽게 이해할 수 있도록 사용자 관점에서 짓는다. 화면 정의서의 화면이름은 실제 웹사이트에서도 그대로 사용하는 것이 좋다. 가령 화면이름은 Q&A인데 실제 웹사이트에서는 '질의 게시판'으로 하지 않도록 한다. 또한, 화면이름은 [질의 게시판 -> 리스트]와 같이 경로로 기재해도 된다. 

URL은 웹 화면의 실제 URL주소를 표기하는 부분이다. 퍼블리싱 전에는 웹화면의 URL주소는 존재하지 않지만, 퍼블리싱이 진행되면 URL주소가 정해진다. 그때 화면 정의서에 추가할수 있도록 미리 빈칸을 남겨두도록 한다. 퍼블리싱 이후 퍼블리셔에게 화면 정의서의 URL주소를 직접 추가해달라고 요청할 수도 있다. 화면 정의서에 URL 주소가 있으면 기획된 화면과 실제 화면을 비교하기 좋고, 추후 화면 정의서에 수정사항이 있을때 퍼블리셔는 해당 URL주소로 접속하여 페이지에 빠르게 접근할 수 있다. 

스케치는 텍스트, 선, 도형, 그림, 표 등을 활용하여 웹 사이트의 화면을 묘사하는 부분이다. 색상은 사용하지 않고, 검정색과 회색 계열로 웹 화면을 표현한다. 최대한 실제 웹 화면과 유사하게 만드는 것이 좋다. 

디스크립션은 스케치로 표현한 웹 화면을 설명하는 부분이다. 제품 사용설명서와 같이 해당 화면의 기능을 상세하게 서술한다. 또한, 디자이너나 개발자가 해당 화면을 디자인하거나 구현할때 참고할 사항들을 자세히 작성하도록 한다. 

 

UI 플로우 차트 (Flowchart) = 유저 플로우(User flow) = 워크 플로우(Work flow)

플로우차트는 이용자가 웹사이트에 처음 들어와서 나갈때까지 이용자가 웹서비스를 사용하는 전체적인 흐름을 정리한 블록 다이어그램이다. 화면정의서의 각 화면들이 유기적으로 어떻게 연결되는지 도형과 화살표로 도식화한 것이다. 예를 들어 사용자가 웹쇼핑몰에 들어와서 상품을 구매하기까지의 전체적인 흐름이 하나의 플로우차트가 된다. 다른 말로, 서비스 로직설계나 알고리즘이라고도 할 수 있다.

사용자의 사용경험(UX)을 고려하여 최대한 클릭수가 적고, 단순하게 만드는 것이 좋다. 결국 플로우차트를 그려보는 이유는 사용자 관점에서 해당 서비스를 훨씬 더 사용하기 편하게 만들기 위해서기 때문이다. 

https://yeon-design.tistory.com/21

UIUX : 앱 서비스 설계 - 플로우차트 작성법

https://gongbu-ing.tistory.com/92

Flowchart 작성법

https://hello-woody.tistory.com/14

플로우 차트 의미와 종류

https://brunch.co.kr/@bc97281a20374ce/7

기획과 서비스의 User Flow

 

참고자료

https://yslab.kr/148

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

https://mklab-co.medium.com/%EC%9E%91%EC%84%B1%EB%B2%95-%ED%99%94%EB%A9%B4%EC%84%A4%EA%B3%84%EC%84%9C-wireframe-%EC%99%80-%EA%B8%B0%EB%8A%A5%EB%AA%85%EC%84%B8%EC%84%9C-functional-specification-bbcff0071ea2

화면설계서 (Wireframe)와 기능명세서 (Functional Specification)

https://dreamiter.tistory.com/15

기획서(화면설계서) 쉽게 작성하는 방법!

https://yozm.wishket.com/magazine/detail/1112/

초보자를 위한 스토리보드 작성 팁 | 요즘IT

 

연습과제  1

기존 사이트나 내가 만들고 싶은 사이트의 화면정의서 도입부를 완성해주세요! (PPT에 작성)

1. 표지 (배경이미지 선정)
2. 문서이력
3. 사이트맵
4. 본문 양식 (1장)

 

연습과제 2

작성된 화면정의서 도입부에 서비스 흐름을 묘사하는 플로우차트를 추가해보세요! (1번, 2번 택일)

1. 기능정의서에 있는 특정기능을 하나 정해서, 해당 기능에 대한 서비스 로직을 플로우차트로 만들어보세요!
2. 화면간의 연관관계를 고려해서, 화면간 흐름을 플로우차트로 만들어보세요!