기획/프로젝트툴 분석

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


프로젝트 툴 네이버 디자인 스튜디오

 

 

프로젝트 수행하면서 기획자가 화면설계서 작성에 쓰는 일반적인 도구는 파워포인트이지만 프레젠테이션 용도로 개발된 도구로 설계도구로 쓰기는 불편한 점이 많습니다. 웹사이트의 페이지가 슬라이드 한장에 넣을 수 없는 경우, 인터렉션이 복잡하면 이를 설명할 내용은 슬라이드 한장으로는 부족할 때가 종종 있습니다. 이를 보완해줄 네이버 디자인 스튜디오를 소개해 들릴까 합니다.

 

 

1. 디자인 스튜디오의 주요기능

 

웹서비스를 위한 화면 설계서를 작성하고 운영 중 발생할 수 있는 문제점을 보완하기 위해 디자인 스튜디오는 여러 가지 기능을 갖추고 있습니다.

공유 및 이력관리: 화면설계서를 서버에 저장해 다른 팀원과 공유하고 업데이트 사항을 쉽게 확인할 수 있습니다.

트리형태 구조파악: 작업화면이 구성돼 있어 웹서비스의 구조를 쉽게 파악이 가능합니다.

완성도체크: 누락되거나 잘못된 내용이 들어갈 경우를 체크해줍니다.

업데이트 충돌처리: 수정사항이 누락되지 않게 업데이트 충동 사실 통보해줍니다.

템플릿 기능: 상단메뉴, 하단 영역 등 자주 사용하는 UI요소 템플릿지정

 

2. 설치하기

 

네이버 개발자센터의 디자인 스튜디오는 다운로드페이지(http://dev.naver.com/projects/dstudio/)에서 최신 버전을 내려 받고 필요한 시스템 요구사항을 확인 후 설치하시면 됩니다.

시스템 요구사항

운영체제: Linux, Windows XP SP3(Mac OS 지원안함)

브라우저: Internet Explorer 7.0이상 또는 Firefox 3.5이상

 

네이버 개발자센터의 디자인 스튜디오 다운로드

 

1.jpg

 

<http://dev.naver.com/projects/dstudio/>

 

설치 시작

 

다운로드 후 설치를 진행하시면 됩니다. 나눔글꼴을 사용을 권장하지만 사용 안 하셔도 무방합니다.

 

2.jpg

 

3. 디자인 스튜디오 구성

 

디자인 스튜디오는 크게 화면설계 탭요소설명 탭으로 구성돼 있습니다.

화면설계탭 :

화면 설계창을 비롯해 화면을 설계할 수 있는 패널로 구성돼 있습니다.

 

3.jpg

 

1. 메인메뉴버튼: 메인 메뉴 버튼을 클릭하면 프로젝트를 만들거나 저장하는 등의 주요 기능

2. 빠른 실행도구모음: 자주 사용하는 기능만 모아 놓은 도구

3. 리본메뉴: UI요소를 삽입하고 서식을 편집할 수 있는 메뉴

4. 화면목록패널: 프로젝트의 페이지 목록을 트리 구조로 표시

5. 템플릿패널: 프로젝트의 UI요소와 레이아웃 템플릿을 트리 구조로 표시

6. 화면 설계창 : 페이지 및 템플릿 화면을 편집

7. 설명패널: 요소에 대한 설명을 입력

8. 기본속성패널: 선택한 요소의 기본속성을 편집

9. 인터렉션 패널: 선택한 요소의 인터렉션을 편집

10.상태표시줄: 선택한 요소의 상태를 확인

 

요소설명탭 :

화면설명탭 옆에 있는 요소설명 탭은 UI 요소에 자세한 설명추가하거나 표현하기 어려운  아이디어 등을 텍스트로 입력할 수 있습니다.

 

4.jpg

 

1. 요소설명/데이터편집영역: 페이지에 포함된 전체 요소 설명 및 데이터 편집

2. 요소설명 화면; 선택한 페이지 템플릿 화면을 미리보기

 

 

지금까지 디자인 스튜디오 설치 후 작업환경에 대해 간단히 둘러봤습니다. 파워포인트와 같은 UI 환경을 제공하고 있어 친숙한 느낌이 들긴 합니다. 웹서비스를 위한 화면목록을 트리 구조로 볼 수 있어 구조파악을 쉽게 할 수 있을듯 합니다.