실습#5 인터랙티브 프로토타입 2011년 2학기 숙명여자대학교 임순범.

Presentation on theme: "실습#5 인터랙티브 프로토타입 2011년 2학기 숙명여자대학교 임순범."— Presentation transcript:

1 실습#5 인터랙티브 프로토타입 2011년 2학기 숙명여자대학교 임순범

2 실습 개요 사전 준비물 목표 개요 결과물: 인터랙티브 프로토타입 결과물 (HTML 파일)
페이퍼 프로토타입 + 사용자 평가 결과물 (종이 스케치) 목표 페이퍼 프로토타입 및 사용자 평가를 통해 개선한 UI 디자인을 인터랙티브 프로토타입으로 구현한다. 개요 페이퍼 프로토타입 테스트를 통해 개선한 UI 디자인을 최종 정리한다. 인터랙티브 프로토타입 형태로 구현한다. 팀 내부 테스트를 통해 결과물을 수정 보완한다. 결과물: 인터랙티브 프로토타입 결과물 (HTML 파일)

3 1. UI 디자인 정리 이전 단계 최종 사용자 인터페이스 화면을 정리한다
각 화면들은 인터랙티브 프로토타입 구현 시 그대로 사용될 것이므로, 기능 별, 시나리오 별로 잘 정리해두도록 한다.

4 2. 인터랙티브 프로토타입 구현 NHN Design Studio를 다운로드 받는다. UI 화면의 구현
UI 화면의 구현 이전 단계에서 정리한 UI 디자인 화면을 토대로 각 화면을 구현한다. HTML 미리보기를 통해 결과물을 생성, 검토한다. 페이퍼 프로토타입 디지털 프로토타입 실행 프로그램

5 NHN Design Studio 설치 및 실행
다운로드 기획서 작성과 프로토타이핑을 도와주는 웹 서비스 기획용 윈도우즈 어플리케이션

6 새 프로젝트 생성 새 프로젝트를 클릭하여 프로젝트 명을 입력하면 새 프로젝트가 생성 됨

7 새 페이지 추가 및 화면 설계 필요한 수만큼 페이지 생성 각 페이지에서는 화면 설계 요소 템플릿을 이용하여 화면을 구성
오른쪽 버튼

8 화면 설계 예시 – 로그인 화면 double click

9 인터랙션 추가 인터랙션을 적용 할 요소(버튼) 선택 마우스 액션 선택한 후, 추가 버튼 클릭

10 인터랙션 추가 선택단계 1, 2 예 왼쪽 선택단계 1에서 액션 선택 선택단계 2에서 세부설정
현재 프로젝트 내에서 페이지 이동을 시킬 경우, 선택단계 1 : 현재 프로젝트 선택단계 2 : 페이지 번호

11 HTML 생성 우측 상단 미리보기 (혹은) 프로젝트 우클릭  HTML 생성

12 3. 내부 테스트 및 수정 팀 확인 (내부 테스트) 수정 모든 화면이 제대로 연결되었는지 점검
페이퍼 프로토타입에서 미처 발견하지 못한 사용상의 문제점 확인 수정 내부 테스트에서 발견 된 에러, 수정 사항들 보완하여 최종 결과물을 작성