기획/프로젝트툴 분석

|  놀이터라 생각하고 마음껏 떠들어요! ^^


화면설계서작성하기 

 

디자인스튜디오를 활용한 화면설계서 작성하는 방법에 대해 알아보도록 하겠습니다. 페이지의 구조를 실제 메뉴 구조처럼 구성하여 디자인스튜디오의 주요기능인 트리구조를 활용하여 작업을 진행하도록 하겠습니다.

 

 

화면설계 작성과정

 

화면설계서 페이지의 전체적인 순서는 다음과 같습니다. 

 

디자인 스튜디오로 웹페이지 화면을 구성,  UI 요소를 삽입하고   각  UI 요소에 인터렉션을 설정하고  UI 요소만으로 표현하기 어려운 아이디어를 설명으로 추가합니다. 이렇게 작성한 화면 설계서 페이지를  HTML 로 출력해 실제로 구현될 페이지의 모습과 인터랙션을 브라우저에서 대략적으로 확인합니다.

          1.jpg

화면페이지 구성

 

화면페이지 구성은 네이버 디자인스튜디오 페이지 자료실에서 있는 샘플입니다.   (http://dev.naver.com/projects/dstudio/) 예전 네이버 모바일블로그를 화면설계서로 작성되었습니다.

 

2.jpg

 

 

앞으로 위와 같은 화면 설계서를 디자인스튜디오에서 작성하면서 시작하는 방법부터 페이지를 구성하고 요소를 삽입하는 방법, 요소에 인터랙션을 적용하는 방법에 대해 설명하도록 하겠습니다. 익숙하지 않는 프로그램이지만 활용만 잘하면 편리하게 화면설계를 효과적으로 할 수 있을겁니다.