실습 실습 #6 #6 인터랙티브 프로토타입 인터랙티브 프로토타입
숙명여자대학교 임순범
1
실습 개요
사전 준비물
페이퍼 프로토타입 + 사용자 평가 결과물 ( 종이 스케치 )
목표
페이퍼 프로토타입 및 사용자 평가를 통해 개선한 UI 디자인을 인터랙티브 프로토타입으로 구현한다 .
개요
페이퍼 프로토타입 테스트를 통해 개선한 UI 디자인을 최종 정리한다 .
인터랙티브 프로토타입 형태로 구현한다 .
팀 내부 테스트를 통해 결과물을 수정 보완한다 .
결과물 : 인터랙티브 프로토타입 결과물 (HTML 파일 )
Ⓒsblim, 2011
1. UI 디자인 정리
이전 단계 최종 사용자 인터페이스 화면을 정리한다
페이퍼 프로토타입 및 사용자 평가를 통해 개선된 UI 및 화면
각 화면들은 인터랙티브 프로토타입 구현 시 그대로 사용될 것이므로 , 기능 별 , 시나리오 별로 잘 정리해두도록 한다 .
2. 인터랙티브 프로토타입 구현
Kakao Oven 에 접속하여 , 가입한다 .
https://ovenapp.io/
UI 화면의 구현
이전 단계에서 정리한 UI 디자인 화면을 토대로 각 화면을 구현한다 .
HTML 미리보기를 통해 결과물을 생성 , 검토한다 .
페이퍼 프로토타입 디지털 프로토타입 실행 프로그램
Ⓒsblim, 2011
KAKAO OVEN 실행
카카오 오븐
https://ovenapp.io/
프로토타이핑을 도와주는 웹기반 프로토타입 툴 .
•
이메일을 통한 계정 생성 후 클릭하여 프로젝트 명을 입력하 면 새 프로젝트 생성됨새 프로젝트 생성
Ⓒsblim, 2011
•
페이지 추가를 통해 필요한 만큼 페이지 생성•
각 페이지에 화면 요소 템플릿 , 아이콘 , 이미지를 더블클릭 혹은 드래그하여 프로토타입을 구성할 수 있음새 페이지 추가 및 화면 설계
화면 설계 예시 : 로그인 화면
•
요소를 선택하여 로그인 화면 구성Ⓒsblim, 2011
화면 설계 예시 : 로그인 화면
•
인터랙션 추가하기 : 인터랙션 ( 링크 ) 적용할 요소 ( 버튼 ) 를 우클릭•
페이지 또는 외부 URL 로의 링크 적용을 통해 인터랙션 생성 (‘ 웹 테스 트’ 모드에서 확인 )•
좌측 상단 메뉴에서 버튼 클릭 혹은 ‘ 페이지 - 웹 테스트＇메뉴에서 웹 테스트 실행•
QR 코드 / 단축 URL 생성하여 외부 기기에서 확인 가능화면 설계 예시 : 로그인 화면
Ⓒsblim, 2011
•
웹 테스트 결과 예시화면 설계 예시 : 로그인 화면
3. 내부 테스트 및 수정
팀 확인 ( 내부 테스트 )
모든 화면이 제대로 연결되었는지 점검
페이퍼 프로토타입에서 미처 발견하지 못한 사용상의 문제점 확인
수정
내부 테스트에서 발견 된 에러 , 수정 사항들
보완하여 최종 결과물을 작성
