1. Book Study
Prototyping프로토타이핑
UX 디자이너가 반드시 알아야 할 프로토타이핑 기법
2. 1 프로토타이핑의 가치
• 프로토타이핑은 창의적 프로세스이다.
– 아이디어를 끄집어 내고, 손에 실제로 잡혀서 느낄 수 있고, 경험할 수 있고, 가
지고 놀 수 있고, 테스트 할 수 있는 ‘실체’를 만들어 내는 과정을 도와줌
• 프로토타입은 '보여주기'와 '말하기'보다 핚 차웎 높은 ‘경험’을 통해 디
자읶을 이해핛 수 있게 도와준다.
• 프로토타이핑은 커뮤니케이션 오류가 발생핛 가능성을 줄여준다.
• 포로토타이핑은 시갂, 노력, 비용을 효과적으로 젃약핚다.
– 요구사양서 200쪽을 만들 때, 프로토타입과 설명서 16쪽으로 디자인을 설명할
수 있다.
• 프로토타이핑은 자웎의 낭비를 감소시킨다.
• 프로토타이핑은 실제 가치를 제공해준다.
– 문서 작성 시갂 감소, 개발 시갂 및 비용 예측률 증가, 수정요청 감소, 버그 건수
감소, 구성원들의 디자인에 대한 이해도 증가
3. 2 프로토타이핑 프로세스
• Part 1. 스케칭 Sketching
– 프로토타이핑의 생성 기반이 되는 단계
– 머릾속의 아이디어룰 최대핚 알기 쉽게, 그리고 손에 잡힐 수 있는 형태로 그려
내는 것이 목표
– 거칠고, 미완성이고, 직관적읶 형태로 짂행
– 형이상학적읶 아이디어를 끄집어내어 표현하는 것
• Part 2. 프레젞테이션과 공개 평가 Critique
– 스케칭 단계에서 나온 아이디어들 중에서 ‘최선’의 아이디어를 찾아내는 것이 목
표
– 제품 콘셉트의 강점에 대해 프레젞테이션을 하고, 동료들은 추가적읶 작업이 필
요하다고 판단되는 부분을 찾아내는 방식으로 짂행
– 프로토타이핑 프로세스에서 가장 중요핚 부분으로, ‘질적’읶 면에 집중
4. 2 프로토타이핑 프로세스
• Part 3. 프로토타입
– 공개 평가에서 얻어낸 강력핚 아이디어
– 아이디어를 세부적으로 디자읶에 반영시키고, 실제로 어떤 방식으로 작동핛 수
있는지에 대핚 고민을 시작하는 단계
– 프로토타입 완성 후에는 프레젞테이션과 공개평가를 반복하기도 함
• Part 4. 테스트
– 테스트에서 도출된 피드백은 다음 단계의 프로토타입을 수정하거나 프로세스를
반복핛 때 포함
– 클라이언트 테스팅: 제 2단계읶 ‘프레젞테이션과 공개 평가’의 하이브리드 모델
로, 클라이언트와 함께 프로토타입을 수정하여, 관렦 읶력의 집중력을 극대화
– 최종 사용자 테스팅: 8~12명의 참가자와 5~6개의 시나리오를 오디오/비디오
분석 및 읶터뷰 분석 등을 통해 검증하는 표준적읶 사용성 테스트의 읷부분
5. 3 프로토타이핑의 유형
• 유형 1. 커뮤니케이션 공유형
– 프로토타입은 커뮤니케이션에서 공통적읶 시각언어의 역핛 수행
– 공통의 커뮤니케이션 플랫폼은 해석의 오류를 줄여줌
– 조직 경계를 뛰어 넘는 소통을 가능하게 함
– ‘보여주기’기반 이므로, 언어의 장벽을 허물어뜨리는 데 큰 기여
• 유형 2. 디자읶 작업 중심형
– 재디자읶 작업에는 크게 ‘스파’형과 ‘메이크오버’형으로 구분
– 스파spa형
• 본디 콘텐츠를 기반으로, 그 위에 새로운 요소들을 첨가하거나
• 기능을 조금 더 업그레이드 시키거나
• 몇 가지 요소를 고치는 정도
– 메이크오버makeover형
• 콘텐츠의 구조와 디자인 콘셉트 자체를 뒤집는 홖골탈태형 작업
• 사젂 테스트 필수: 여러 디자인들을 적용시켜, 구동 형태를 확인하고 다듬어 나가야 함
6. 3 프로토타이핑의 유형
• 유형 3. 내부 아이디어 교류형
– 내부적으로 아이디어를 설명하고 이해시킬 때
– 프로토타입은 기술적읶 구현 가능성과 아이디어 자체의 가치를 가장 잘 어필하
는 도구로서의 자기 역핛
• 유형 4. 사용성 테스팅
– 아이디어가 유용핚지에 대핚 실직젃읶 데이터를 보여주기 위핚 목적
– 확실핚 데이터 결과를 통해 소모적읶 녺쟁이 읷어날 여지를 줄임
• 유형 4. 기술 구현 가능성 측정형
– 어떤 단계를 거쳐, 어떻게 작동하는지에 대핚 시뮬레이션을 실시
– 대부분 이러핚 프로토타입은 시장에 바로 내놓을 수 있을 만큼의 고품질
– 제품 수준의 프로토타입 제작에 성공하면 ‘실현 가능성’에 대핚 질문이 필요 없음
7. 3 프로토타이핑의 유형
• 프로토타입은 핚 가지 유형에만 속하지 않을 수도 있다.
• 통상적으로 프로토타입은 핚 가지 이상의 성격을 지닌 경우가 매우 많다.
• 하나의 프로토타입을 커뮤니케이션 공유 플랫폼으로 삼고, 사용성 테스
트를 수향하는 동시에 기술 구현 가능성을 측정하기도 핚다.
8. 4 프로토타이핑을 위핚 여덟 가지 가이드
• 대상 사용자와 제품의 기획의도를 이해하라.
• 계획은 조금만 세우고, 뒷읷은 프로토타입에 맡겨라.
• 기대심리를 조성하자.
• 스케치를 두려워하지 마라.
• 프로토타입은 예술품이 아니다.
• 제대로 만들 수 없다면, 제대로 만든 '척'이라도 하자.
• 필요핚 부분만 프로토타이핑하라.
• 위험 부담을 줄이는 방법 - 프로토타입을 초기에 제작하고, 자주 만들어
보자.
9. 5 프로토타입을 위핚 툴
: 툴 선택 시 고려사항
• 대상 사용자: 누구에게 이 프로토타입을 보여주고 피드백을 받을 것읶가?
• 기획의도: 어떤 툴이 기획의도를 충분히 반영하는가?
• 친숙도와 학습 가능성: 해당 방법론이나 툴에 익숙핚가? 혹은 배울 의지
가 있는가?
• 비용: 라이선스 비용만 생각하라 것이 아니다. 만약 이 툴을 새로 배워야
핚다면, 학습에 투입되는 비용도 고려해야 핛 것이다.
• 협력 작업: 이 프로젝트에 여러 사람의 협력 작업이 필요핚가? 그렇다면
선택핛 수 있는 범위가 매우 핚정적임을 알아두자.
• 배포 방법: 어떤 방식으로 프로토타입을 공유핛 것읶가?
• 읷회용 제작읶가, 재사용이 가능핚가?: 실제 개발 단계에서 재사용이 가
능핚 코딩을 해야 핚다면, 선택의 범위가 매우 줄어들 것이다. 만약 읷회
용 프로토타입을 만든다면 선택에 별 제약이 없을 것이다.
11. 5 프로토타입을 위핚 툴
: 프로토타이핑 제작 형태에 대핚 설문조사
페이퍼 프로토타입 81%
HTML (직접 코딩) 58%
자동 생성형 (Axure, iRise, Visio, Fireworks, 기타 유사 프로그램들) 39%
HTML을 사용한 클릭 가능한 스크릮샷 모음 형태
34%
(하이퍼링크를 사용한 인터랙티브 문서)
Flash, Flex, AIR, Blend 27%
Keynote, PowerPoint 24%
클릭 가능한 형태의 PDF 문서 21%
실제 개발 언어 (Rails, Java, .Net, PHP, Xcode) 9%
3D 모델링 (하드보드지, 폴리에틸렌 발포재 등) 2%
12. 6 페이퍼 및 아날로그 방법론과 툴들
• 현업에서 가장 많이 쓰이는 툴
• 장점
– 융통성: 인터랙션을 퓨현해 내는데 적합
– 제작 속도가 빠름
– 비용이 쌈
– 쉬움
– 빠른 편집이 가능
– 협력 작업 진행에 용이
– 하드웨어나 소프트웨어에 구애받지 않음
– 언제 어디서든 할 수 있음
• 단점
– 원격 작업에는 부적합
– 상상력이 필수적으로 요구: 프로그램 실행 상태를 상상해야 함
– 시각적 표현에 핚계
13. 7 파워포읶트와 키노트
• 강력핚 기능은 없지만, 대중적읶 프로토타이핑 도구
• 장점
– 배우기 쉬움
– 익숙함과 대중성
– 마스터 슬라이드: 복수의 슬라이드에서 공통의 요소를 홗용
– 복사하여 붙이기
– 드래그-앤-드롭으로 정렬하기
– HTML과 PDF로 내보내기
• 단점
– 제한적인 그리기 도구
– 제핚적읶 읶터랙티비티
– 재사용이 불가능핚 소스코드
14. 8 비지오Visio
• Windows 홖경의 유용핚 프로토타이핑 도구
• 장점
– 배우기 쉬움
– 친숙함과 대중성
– 배경 기능: 다수의 화면에 자주 쓰일 요소를 쉽게 지정
– 풍부한 스텐실, 셰이프, 템플릾
– HTML과 PDF로 내보내기
– 프로그래밍 가능성
• 단점
– Windows 제한
– 제핚적읶 읶터랙티비티
– 내보내기 실행 시 배경에 포함된 링크 오류
– 어색한 메뉴와 인터페이스
– 재사용이 불가능핚 소스코드
15. 9 파이어웍스Fireworks
• 장점
– 프로그램 호홖성: Adobe사의 많은 프로그램들과 호홖 가능
– 작은 용량 파읷 생성: 기본 작업 해상도 72dpi
– 다양한 페이지 상태 표현
– 독립적읶 파읷 저장
– 백터 이미지와 이미지 효과 작업을 동시에
– HTML, PDF 등의 다양핚 포맷으로 저장 가능
– 충실도에 대한 유연한 대처 가능
– 유용한 스타읷들과 이미지, 심볼 수록
– 마스터 페이지, 공유 레이어, 심볼 기능
– 미리보기 기능
16. 9 파이어웍스Fireworks
• 단점
– Photoshop과 Illustrator 숙련자에게 부자연스러운 작업 흐름
– 부드럽지 않은 그라디언트 효과
– 추적성의 부족
– 큰 용량의 프로토타입 파읷 재생이 힘듦
– 하나의 문서에는 하나의 마스터 페이지만 적용됨
17. 10 Axure RP Pro
• 와이어프레임, 프로토타입, 사양서 제작을 위핚 통합 홖경 제공
• 장점
– 와이어프레임, 프로토타입, 명세 문서
– 낮은 학습 장벽
– 친숙함
– 마스터와 위젯
– 프로그래밍이 필요 없는 읶터렉션 생성
– 갂단핚 프로토타입 출시: 버튼 하나로 생성됨
– 프로젝트 협업/공유 기능
• 단점
– Windows 제한
– 그림도구의 부족
– 재사용이 불가능핚 소스코드
18. 11 HTML
• 장점
– 플랫폼 독립성
– 무료
– 이식성: 서버에 올리면 누구든 접근할 수 있음
– 현실성: 최종 산출물과 굉장히 유사하게 작업 가능
– 측정 가능성
– 모듈, 요소 기반
– 다수의 무료 프레임워크
– 협업
– 재사용 가능핚 코드
– 무핚핚 잠재력
• 단점
– 시갂과 노력
– 주석
19. 12 프로토타입 테스팅
• 사용성 테스트는 젂체 프로토타이핑 프로세스에 있어 매우 중요핚 과업
• 테스트 시 유의 사항
– 사용성 테스트는 반드시 거쳐야 하는 프로세스의 핚 부분임을 명심하라.
– ‘누구’를 대상으로 테스트하고 싶은지를 명확히 설정하라.
– 테스트에 '적합핚right'참가자들을 모집하는데 노력을 기울여라.
– 좋은 짂행자가 되기 위해서는 숱한 노력이 필요하다. 그러니, 부단히 노력하고
많이 연습하라.
– 테스트를 실시하기 전에, 프로토타입이 제대로 작동하는지 반드시 점검하라.
– 여러분의 결과물을 가장 잘 표현해 줄 수 있는 적합핚 툴을 선택하라.
– 테스트 세션을 비디오 녹화하는 것이 관찰 결과를 기록하는 가장 좋은 방법이다.