실습 실습 #3. #3. 페이퍼 프로토타입 페이퍼 프로토타입
숙명여자대학교 임순범
1
페이퍼 프로토타입 만들기 실습
사전 준비물
스토리보드 결과물
실습 도구
종이 , 펜 , 포스트 잇 , 인덱스카드 , 컬러 펜 , 연필 , 지우개 , 테이프 , 가 위 , 포스터 보드 , 화면용 전지 , 콘텐츠 표현 용 출력물 등
Ⓒsblim, 2011
실습 개요
목표
스토리보드 ( 시나리오 ) 에 따라 인터페이스 화면을 설계한다
페이퍼 프로토타입의 목적
초기 인터페이스의 논리적 흐름이 제대로 구성되었는지
화면 조작에 있어 문제점이 없는지 판단
개요
다양한 인터페이스 요소를 추출 / 활용하여 전체 UI 화면을 스케치
스케치로 표현된 UI 화면을 실제 페이퍼 프로토타입으로 구현
결과물
시나리오 4~5 개에 대한 페이퍼 프로토타입 ( 각 시나리오를 실행 )
3
실습 단계
1. 초기 구성 요소 도출
시나리오 (5~4 개 ) 및 스토리보드에서 도출된 화면에 기반하여
페이퍼 프로토타입에 쓰여질 시스템 요소 , UI 화면 , 상호작용 등을 도출
도출된 결과물들은 별도의 목록으로 정리
2. UI 컨셉 개발
구성요소로 선택된 다양한 요소들을 표현하기 위한 UI 요소들을 도출
입 / 출력 UI: 버튼 , 탭 , 박스 , 체크 , 텍스트 입력 , 선택목록 , 링크 , 선 택 등
Ⓒsblim, 2011
3. UI 스케치 작성
지금까지의 시나리오 , 구성요소 , UI 요소를 정리하여
첫 화면부터 하부 요소까지의 화면을 스케치 ( 포스트 잇 등 ) 하고 ,
이것을 서로 연결한 전체 UI 화면을 작성
4. 페이퍼 프로토타입 작성
스케치로 표현된 UI 화면 및 구조를 실제 페이퍼 프로토타입으로 구현
UI 동작에 대한 작동과정을 정확히 구현 : 드롭다운 메뉴 , 화면전환 , 텍스트창 등
링크 설정 : 단계는 평가에 집중할 수 있을 정도로 제한
실행된 콘텐츠가 필요시 : 유사한 제품 혹은 개발할 결과화면 등을 출력 / 적용
확인 및 수정
전체 시나리오에 맞게 구현된 결과물을 팀 내부에서 테스트해보고 , 수정사항 또는 부족한 부분을 반영
꼭 확인해야 할 사항 : 잘못된 액션을 수행했을 때 보여줄 에러메시지 창
5
