Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

프로토타이핑

3,354 views

Published on

  • Login to see the comments

프로토타이핑

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

×