스케치 기법 & 비디오 프로토타입 2010년 2학기 숙명여자대학교 임순범

UI 설계에서 스케칭(Sketching) 기존의 스케칭과 유사 단순히 모습보다 느낌이 중요 시간의 흐름과 역학관계를 표시해야 스케치와 스토리보드

Planning = Design? Concept - Blueprint © Bill Buxton

Seattle Public Library Planning Model Dec1999 Open Jul 2004 Design Call Nov1998 Construction Mar 2002 Construction © Bill Buxton

스케칭의 특징 빠르다(Quick) / 즉시(Timely) 저비용(Inexpensive) / 폐기가 용이(Disposable) 풍부한 상상(Plentiful) 낮은 정확도 요구 원하는 개념을 표현하는 정도의 정확도/정밀도이면 충분 스케치의 해상도는 개념의 정밀도와 무관 모호성(Ambiguous)

스케치와 스토리보드(Storyboards)

스토리보드(Storyboards) 스토리보드의 유래 주요 이벤트의 기록(“script”) film & animation 상세한 설명은 생략 중요한 상호작용에만 집중

Ink Chat

Picturing Time

비디오 프로토타입 프로토타입의 유형 비디오 브레인스토밍 비디오 프로토타입 비디오 프로토타입 제작단계

프로토타입의 유형 프로토타입은 디자인의 구체적인 표현 프로토타입의 특징별 유형 표현형태 정확도 상호작용성 off-line (paper) or on-line (software) 정확도 informal or polished 상호작용성 고정형(fixed) 프로토타입 : 비디오 클립 고정방향(fixed-path) 프로토타입 : 각 단계는 특정 행위로 시작 개방형(open) 프로토타입: 사실적, but 오류처리나 실행 성능은 제한적 개선 (프로토타입 라이프사이클) 폐기 or 반복사용

비디오 브레인스토밍(Brainstorming) 비디오 카메라 앞에서 아이디어를 행위로 표현 가능한 많은 아이디어 도출 목적 : 각 2-5분 정도 아이디어 도출을 위해 일반적인 브레인스토밍 실행 장점 시간이 지난 후 비디오가 노트 기록보다 이해가 용이함 참여자가 실제 인터랙션을 경험해보고 아이디어 기록을 보존 Character follows user with its eyes. Video brainstorming of an animated character in Prototyping Tools & Techniques by Beaudouin-Lafon & Mackay.

비디오 프로토타입 사용자가 어떻게 시스템과 인터랙션 하는지 설명 특징 일반적으로 고정형 프로토타입 적용 나레이션 가능 브레이스토밍과는 반대로 디자인 공간을 좁힌다. 특징 빨리 작성 가능, 저비용 일반적으로 고정형 프로토타입 적용 스케치 또는 페이퍼 프로토타입 혹은 기존 소프트웨어, 실제 상황의 이미지 등도 이용 가능 나레이션 가능 나레이션은 인터랙션의 변화에 대한 이벤트나 기타 동작을 설명 인터랙션 변화는 비디오 녹화 후 설명 없이도 이해 가능하도록 탄탄한 스토리보드가 있다면 1시간 내에 녹화 가능

비디오 프로토타입 제작 단계 사용자 및 작업분석에 대한 필드 데이터를 리뷰 비디오 브레인스토밍 아이디어를 리뷰 사용자 시나리오를 문장으로 작성 스토리보드 개발 각 행동/이벤트에 대해 화면 설명을 위한 주석과 함께 작성

비디오 프로토타입 제작 단계 Image from Beaudouin-Lafon & Mackay

비디오 프로토타입 제작 단계 사용자 및 작업분석에 대한 필드 데이터를 리뷰 비디오 브레인스토밍 아이디어를 리뷰 사용자 시나리오를 문장으로 작성 스토리보드 개발 각 행동/이벤트에 대해 화면 설명을 위한 주석과 함께 작성 각 스토리보드 카드에 따라 비디오 클립 녹화(Shoot) 가급적 카메라 편집은 지양 – 스토리보드 순서에 따라 녹화 비디오 클립의 구분은 타이틀 카드 사용 무성영화처럼 잘못 제작시, 이전 마지막 타이틀 카드로 환원하여 다시 녹화

Tips & Tricks 내용이 잘 설명되려면 구조화하라 그외 기법 활용 타이틀 화면으로 시작 그다음, “설정샷/전경샷 (establishing shot)” 향후 이야기를 위해 장소, 무대, 극적인 분위기를 예시해 주는 화면 그리고, 타이틀 카드 사이의 클로즈업 및 중간 샷 들 녹화 마지막 종료화면(credits at the end, or closing credits) 그외 기법 활용 비디오 클립의 검색이 쉽도록 색상으로 구분된 타이틀 카드 활용 저속촬영(“Time-lapse photography”) 으로 인터랙션 표현 예) 팝업메뉴의 표현: 버튼 누르기→카메라 멈춤→메뉴추가→ 재녹화

비디오 프로토타입 예제 U. Washington 예제 숙명여대 예제 “Cluster” (2:09, mov 파일, 137MB) “Don’t forget” (1:02, mov 파일, 39MB) 숙명여대 예제 모바일 숙명 다이어리 (MP4 파일) Part #1 (0:55, 11MB), #2 (1:25, 17MB), #3 (0:37, 7MB)