Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (19)
Similar a Prototyping
Similar a Prototyping (20)
Prototyping
- 1. Prototyping 프로토타이핑 Made in Taeya
- 2. 2/26 Prototyping 책 소개 및 목차 - 타드 자키 워플 지음 http://www.yes24.com/24/goods/5122353?sc ode=032&OzSrank=3 Chapter1. 가치 Chapter2. 프로세스 Chapter3. 유형 Chapter4. 8가지 가이드 Chapter5~11. 툴 Chapter12. 테스팅
- 3. 3/26 Prototyping Chapter1. 가치 프로토타이핑은 커뮤니케이션 오류의 발생 가능성을 줄여준다. - 그 어느 누구도 60~200장에 달하는 요구사항을 읽고 싶어하지 않는다. - 텍스트 기반으로 제작된 문서들은 ‘전체적인 그림’ 을 그릴 수 있게 도 와주지 못한다.
- 4. 4/26 Prototyping Chapter1. 가치 프로토타이핑은 커뮤니케이션 오류의 발생 가능성을 줄여준다. - 그 어느 누구도 60~200장에 달하는 요구사항을 읽고 싶어하지 않는다. - 텍스트 기반으로 제작된 문서들은 ‘전체적인 그림’ 을 그릴 수 있게 도 와주지 못한다. 기존 요구사항서의 문제점 1. 부적합한 문서 작성으로 인한 커뮤니케이션 문 제 2. 요구사양서 작성의 시간과 노력 소모 프로토타이핑은 3. 끝나지 않는 수정작업 자원의 낭비를 감소시킨다 4. 잘못된 해석으로 인한 오해, 오류상황 발생 5. 중요도가 떨어지는 항목에 대한 설명 6. 뒤늦은 실수 발견
- 5. 5/26 Prototyping Chapter1. 가치 프로토타이핑은 ‘보여주기’ 와 ‘말하기’를 통해 커뮤니케이션 하기 때문에 시간과 노력, 비용을 절감시킨다. 또한 빠른 피드백 순환구조를 생성하여, 궁극적으로는 프로젝트의 위험부담을 줄여준다
- 6. 6/26 Prototyping Chapter2. 프로세스 하나의 공식처럼 적용할 수 있는 ‘최고’의 프로토타이핑 프로세스는 존재하지 않는다 But. 대개의 프로세스는 4가지 요소를 포함하고 있다 (1) 스케칭(화이트보드, 페이퍼, 코딩) (2) 공개평가 (3) 모델링 (4) 테스팅 (1) 스케칭 Sketching - 머릿속의 아이디어를 최대한 알기 쉽게, 손에 잡힐 수 있는 형태로 그리는 것 - 질보다는 양으로 많은 수의 디자인 컨셉을 창출하고 다음단계로 진행할 준비를 해야 함 - 통상적으로 거칠고, 미완성이고, 직관적인 형태로 진행 - 화이트보드나 html대신 종이로 스케칭 할 시 스케치의 수정이 용이하며, 휴대성과 공동작업을 수행하기 용이 하다
- 7. 7/26 Prototyping Chapter2. 프로세스 (2) 공개평가 Critique - 프로토타이핑 프로세스에서 가장 중요한 부분으로, 이 단계에서 ‘질적’인 면에 집중해 작업을 진행한다 - 이전 단계에서 펼쳐놓은 아이디어 중 ‘최선’ 의 아이디 어를 찾는다 - 이 단계의 목적 역시 아이디어를 빠르게 뽑아내는 것 이므로 한 아이디어당 프리젠테이션 시간을 2~3분으 로 제약하고, 공개평가도 3분 정도로 짧게 하는 것이 좋다 - 공개 평가를 통해 얻어진 모든 아이디어를 스케치 작 업 위에 적어 놓자 (3) 모델링 Modeling - 실제 어떤 방식으로 작동할 수 있는지에 대한 고민을 시작 하는 단계 - 주어진 시간과 어떤 수준의 충실도가 요구되는 작업인 지 고민한다(프로토타이핑 컨셉 잡기)
- 8. 8/26 Prototyping Chapter2. 프로세스 (4) 테스트 - 클라이언트 테스팅(Testing with clients) - 최종 사용자 테스팅(Testing with End-User) 8~12명의 참가자와 5~6개의 시나리오로 검증
- 9. 9/26 Prototyping Chapter3. 유형 컨셉 아이디어를 공유하거나, 내부적으로 아이디어를 어필하거나, 사용자에게 아이 디어를 설득하거나, 기술적으로 어떤 점이 구현 가능한지에 대한 검증을 할 때 각각 다른 성격의 프로토타입이 필요하며 이를 5가지의 유형으로 구분할 수 있다 (1) 커뮤니케이션 공유형 - 공통의 커뮤니케이션 플랫폼은 해석의 오류를 줄여줄 수 있다 - 다른 언어를 사용하는 그룹(디자인, 개발자, 기획) 이 함께 작업을 진행하면서 서로의 아이디어들이 디자인 속에서 유의미한 관계를 구축할 수 있도록 도와준다 - 프로토타입은 ‘말하기’ 가 아닌 ‘보여주기’ 기반의 커뮤니케이션 플랫폼이기 때문 에 언어의 장벽을 허물어뜨리는데 큰 기여를 한다 (2) 디자인 작업 중심형 - 스파(spa)형 본래 컨텐츠를 기반으로 새로운 요소를 첨가하거나 기능을 더 업그레이드 시키거 나, 몇 가지 요소를 고치는 정도로 작업 - 메이크오버(makeover)형 컨텐츠의 구조, 디자인 컨셉 자체를 뒤집는 작업 각 디자인 요소들이 어떻게 작용하는지에 대해 초점이 맞춰짐
- 10. 10/26 Prototyping Chapter3. 유형 (3) 내부 아이디어 공유형 - 여러분의 아이디어를 설명하고 이해시킬 때, 프로토타입은 기술적인 구현 가능성 과 아이디어 자체의 가치를 가장 잘 어필하는 도구로서 자기 역할을 한다 (4) 사용성 테스팅 - 사용성 테스트를 통해서 기획진의 아이디어가 유용한지에 대한 실질적인 데이터 를 보여준다면, 개발팀의 마음을 돌려놓을 수 있다. 그들이 ‘믿을 수 있는’ 것을 제시 하자 (5) 기술 구현 가능성 측정형 - 하나의 아이디어에 대해 어떤 단계를 거쳐, 어떻게 작동하는지에 대한 시뮬레이 션을 실시하는 것만으로도 개발팀에게 주장을 충분히 펼칠 수 있다 - ‘기술 구현 가능성 측정형’ 의 프로토타입은 대게 시장에 바로 내놓을 수 있을 만 큼의 고품질로 만들어진다
- 11. 11/26 Prototyping Chapter4. 8가지 가이드 프로토타이핑 프로세스에서 실수를 최소화하기 위해 염두에 두어야 할 8가지 가이드 원칙은 아래와 같다 (1) 대상 사용자와 제품의 기획의도를 이해하라 아이패드 도마? - 사용자에 대한 이해와 프로토타입의 기획의도는 프로토타이핑 모든단계에 걸쳐 영향을 미친다 - 프로토타이핑 대상자를 고려할때는 어떤 매개체와 어느정도의 충실도를 적용해 야 ‘그들’ 에게 편할 것인지를 생각해야한다. - 고품질의 프로토타이핑이 무조건 좋은것이 아니다
- 12. 12/26 Prototyping Chapter4. 8가지 가이드 (2) 계획은 조금만 세우고 뒷일은 프로토타입에 맡겨라 - 상황에 따라 변화해야 하지만, 스케칭 단계 디자인의 약 70%를 프로토타이핑에 적용하는것이 좋다 아이패드 도마? (3) 기대심리를 조성하자 - 여러분의 대상 사용자에게 기대 심리를 조성해 주목을 끄는 것은 중요하다 - 사용자에게 전반적인 프로토타이핑의 내용을 구두로 설명하여 기대감 조성 후, 어느 정도 ‘기대하고 있던 점들’ 을 프로토타이핑을 통해 직접 경험하게 하면, 대상 사용자들에게 신뢰를 심어줄 수 있다 (4) 스케치를 두려워하지 마라 - 잘 그리지 않아도 상관없다! 여러분의 아이디어만 전달할 수 있으면 된다
- 13. 13/26 Prototyping Chapter4. 8가지 가이드 (5) 프로토타입은 예술품이 아니다 - 완벽주의적 성향을 갖고 있다 하더라도 여기서 발휘하지 말자. 이것은 그저 ‘프로토타입’ 일뿐이다 - ‘적정한 레벨과 적당한 충실도’ 를 항상 기억하자 (6) 제대로 만들 수 없다면, 제대로 만든 ‘척’이라도 하자 - 코딩이나 관련 프로그램을 몰라도 ‘실제인 척’ 할 수 있는 팁들은 얼마든지 있다 - 대상 사용자들이 인터랙션을 이해할 수 있게 만드는것이 중요하다 - 다음 한메일 페이퍼 프로토타이핑 http://www.youtube.com/watch?v=GrV2SZuRPv0
- 14. 14/26 Prototyping Chapter4. 8가지 가이드 (7) 필요한 부분만 프로토타이핑하라 - 시스템 전부를 프로토타이핑 할 필요는 없다. 작성한 시나리오에 필요한 부분만 구현하면 된다 (8) 프로토타입을 초기에 제작하고, 자주 만들어보자 - 프로젝트 초기에 프로토타이핑을 통해 각 요소와 기능들을 나누어 반복적으로 실험해 보고 고쳐나가면 프로젝트 리스크를 줄일 수 있다
- 15. 15/26 Prototyping Chapter5. 툴 프로토타이핑을 위한 툴은 종류가 다양하며, 대상 사용자나 기획의도, 친숙 도와 학습 가능성, 배포방법, 협력작업 등 다양한 사항들을 고려해 나에게 맞 는 툴을 선택하는 것이 좋다 < 2008년도 설문조사 약 200명정도 참가하였으며. 인터렉션 디자이너는 63% 중복 응답 가능 >
- 16. 16/26 Prototyping Chapter6. 페이퍼 장점 단점 제작속도가 빠르다 원격 작업에는 부적합하다 프로그램 실행상태를 머릿속에 그려야 하므로 상상력이 필수적 비용이 싸고 쉽다 으로 요구된다 빠른 편집이 가능하다 시각적 표현에 한계가 있다 협력 작업 진행에 용이하다 하드웨어나 소프트웨어에 구애받지 않는다 언제 어디서든 할 수 있다
- 17. 17/26 Prototyping Chapter6. 페이퍼 현재 ‘상황’ 에 대한 변화를 반영할 수 있는지의 여부가 스케치와 프로토타입을 구분하 는 가장 큰 포인트 이므로 페이퍼 프로토타이핑을 진행하는 동안에는 여러 아이디어를 활용하는 것이 좋다. - 포스트잇, 트레이싱페이퍼, 색연필이나 컬러 마커 등을 활 용!
- 18. 18/26 Prototyping Chapter7. 파워포인트와 키노트 장점 단점 배우기 쉽다 가장 기본적인 형태의 그리기 도구만 제공된다 익숙하고 대중적이다 인터랙티비티가 하이퍼 링크를 제작하는 정도로만 제한된다 마스터 슬라이드를 이용해 제작의 효율성과 일관성을 확보할 수 소스코드의 재사용이 불가능하다 있다 독립적인 개체 또는 전체화면을 쉽고 빠르게 복사할 수 있다 화면 순서 정리가 드래그&드롭으로 단순하다 HTML과 PDF로 내보내기가 가능하다
- 19. 19/26 Prototyping Chapter8. 비지오 장점 단점 배우기 쉽다 Mac에서 동작하지 않는다 Window 환경에서 근무하는 직장인에게 친숙하다 인터랙티비티가 하이퍼 링크를 제작하는 정도로만 제한된다 배경 기능을 응용해 다수의 화면에서 자주 쓰일 요소룰 쉽게 지 Visual basic 을 활용해 고급 인터랙티비티를 구현하는 것이 가 정할 수 있다 능하지만 어렵다 HTML과 PDF로 내보내기 실행 시 배경에 포함된 링크는 지원되 풍부한 스텐실, 세이프, 템플릿을 기본적으로 탑재하고 있다 지 않는다 HTML과 PDF로 내보내기가 가능하다 직관적이지 않은 인터페이스를 가지고 있다 Visual basic 과 같은 프로그램에 익숙하다면 비지오와 함께 높 소스코드의 재사용이 불가능하다 은 수준의 인터랙티비티를 구현할 수 있다
- 20. 20/26 Prototyping Chapter9. 파이어웍스 장점 단점 Illustrator, 포토샵, 드림위버, 플래시 같은 프로그램들과 호환성 Illustrator, 포토샵 숙련자에게는 부자연스러운 작업흐름을 가지 이 좋다 고 있다 기본작업 해상도가 72ppi로 비교적 작은 용량의 파일이 생성된 요구사항, 수정사항에 대한 추적이 용이하지 않다 다 상태 패널을 사용해 웹페이지의 상황을 실제처럼 표현할 수있다 50페이지 이상의 큰 용량의 프로토타입 파일재생이 힘들다 마스터 페이지는 템플릿과 같은 역할을 하는데, 하나의 문서당 벡터이미지와 비트맵이미지 작업이 동시에 가능하기 때문에 하나의 마스터 페이지만 지정할 수 있기 때문에 다양한 상황 연 Illustrator, 포토샵을 오가며 작업할 필요 없다 출이 어렵다 HTML, PDF, Flash, Flex, AIR을 포함한 여러 형태의 파일로 저 장가능하다 저품질에서 고품질까지 유연하게 작업할 수 있다 미리 보기가 가능하다
- 21. 21/26 Prototyping Chapter10. Axure RP PRO 장점 단점 와이어프레임, 프로토타입, 명세문서 등 디자인과 문서제작을 Illustrator, 옴니그래플, 비지오에서 볼 수 있는 그림도구의 기능 위한 툴을 한번에 제공한다 이 부족하다 배우기 쉽다(학습장벽이 낮은 편이다) 소스코드의 재사용이 불가능하다 일반적인 와이어프레임과 순서도를 작성하기 위한 다수의 위젯 을 가지고 있다 오버레이나, 보여주기/숨기기 같은 ajax 스타일의 인터렉션을 만들기 편하다 디자인이 완료 후 메인 메뉴의 ‘프로토타입 생성’ 이라는 버튼만 누르면 나머진 프로그램이 자동으로 해결한다 프로젝트 공유 시 다수의 사람들이 같은 파일에 동시 접근 가능 하다 협업이 편하다
- 22. 22/26 Prototyping Chapter11. HTML 장점 단점 Mac, window, 리눅스 어디서나 작업할 수 있다 처음 시작 시 시간과 노력이 많이 필요하다 HTML 프로토 타입에 주석을 다는 것은 도전적인 일이다(어렵 무료로 사용가능한 편집도구가 많다 기도 하고 보는 사람도 보기가 쉽지 않다) HTML 프로토타입을 서버에 올리면 누구든 관계없이 공유할 수 있다 우리가 얻게 되는 최종 산출물과 굉장히 유사하게 작업 가능하 다 Jquery,blueprint 같은 무료프레임워크가 있어 손쉽게 진행할 수 있다(?!) 하나의 파일로 작업되지 않기 때문에 다수의 팀원들이 동시에 작업을 진행할 수 있다 실제 생산에 재사용할 수 있으며, 충분한 시간과 노력을 기울이 면 거의 모든 것이 가능하다(잠재력이 높다)
- 23. 23/26 Prototyping Chapter12. 프로토타입 테스팅 프로토타이핑 프로세스 실행 중 ‘테스팅’ 은 반드시 한번은 꼭 거쳐야 하는 중요한 단 계다 테스팅 시 자주 발생되는 6가지 실수를 저지르지 않게 조심하자 (1) 사용성 테스트는 프로세스의 한 부분이지 이벤트가 아니다 - 사용성 테스트는 기획, 리쿠르팅, 실전 테스트, 분석, 결과 보고라는 매우 중요한 프로세스를 통해 완성된다. 특정 목적을 가지고 답을 찾고 분석해 결론을 낼 수 있 도록 프로젝트의 질적 향상을 위해 중요한 프로세스임을 알자 (2) 부실한 설계 - 사용성 테스트는 주어진 시간 안에서 사용자가 어떤 노력을 기울여서 과업을 수 행하고 어떤 포인트에서 만족감을 느끼는지에 대해 정량적으로 알아볼 수 있는 좋은 방 법이다 - 가장 먼저 ‘왜 사용자 테스트를 하려고 하는가?’ 를 염두하고 ‘누구’를 대상으로 테스트 하고 싶은지를 명확히 설정해라 - 기획 단계에서 발생하는 실수는 테스트 참가자들을 선정하는 과정과 프로토타입 의 작동여부와 관련해 발생되며 이 실수들은 최종결론에 까지 영향을 미치기 때문에
- 24. 24/26 Prototyping Chapter12. 프로토타입 테스팅 (3) 부적합한 참가자 리쿠르팅 - 정확한 참가자 리쿠르팅을 위해서는 매우 자세한 선별 기준을 확립하거나 전문가 를 고용하는 것이 가장 좋다 (4) 제대로 설계하지 않은 질문 리스트 - 참가자가 정확하게 질문의 내용을 이해할 수 있게 해주는 것이 매우 중요하며 설 계자 가 원하는 방식대로 참가자가 사이트를 사용하도록 유도해서는 안 된다. 테스트 의 목적은 ‘참가자들이 어떻게 사이트를 사용하는가’ 를 알아보는 것이기 때문이다 - 참가자들의 자유도를 높여야 그들이 해당 사이트를 어떻게 사용할 것인지에 대해 정확히 이해할 수 있다 (5) 미숙한 테스트 진행 - 사용성 테스트 진행에 있어 핵심은 ‘균형’ 이다. 좋은 진행자는 어떤 부분에서 참 가자와 의 대화를 시도해야 하는지 어느 포인트에서 침묵해야 하는지 그 비율에 대한 균 형을 잘 잡을 줄 알아야 한다 - 그렇기 때문에 테스트 진행자는 교육과정을 거치고 연습하는 시간이 필요하다
- 25. 25/26 Prototyping Chapter12. 프로토타입 테스팅 (6) 결과 분석에 적합하지 않은 방법론이나 분석 툴 설정 - 10~20 페이지에 달하는 리서치 리포트를 처음부터 끝까지 꼼꼼히 읽는 사람은 별 로 없지만 리서치 리포트는 모든 작업을 충실하고 제대로 해냈다는 증명을 하기 위 한 자료이기 때문에 꼼꼼히 작성하는 것이 좋다 - 결과 분석을 위해서는 사용성 테스트 일정이 끝날 때마다 참가자들과 짧은 토론 시간 테스팅 Flow 이를 바탕으로 분석하는 ‘퀵 리뷰(Quick Review)’ 방식이 효과적이다 을 갖고 사용성 테스트 테스트 시나리 프로토타입 테 테스트과정 녹 결과 분석 및 준비 오 설계 스트 화 및 피드백 다음액션 설정 - 기획의도를 이해할 - 잘 설계된 시나리오 - 참가자가 테스트를 - 진행자 1인, 관찰자 1 - 중요한 포인트는 사 것 는 특정 행동을 직접 편안하게 느낄 수 있 인체제가 좋으며 녹 용자 테스트를 실시 - 테스트 세션 하나의 지시하기보다는 목표 도록 참가자와 진행 화 중 기록포인트발 하면서 참가자들이 소요시간은 45~60분 를 제시하고 테스트 자가 테스트 전에 미 생시 녹화 테이프에 반복적으로 보인 행 으로 제한 하고 대 여 에 몰입할 수 있도록 팅시간을 갖는 것이 직접 코멘트를 남기 동과 코멘트로 알수 섯개의 시나리오를 유도한다 좋다 는 것이 가장 효과적 있다 전개하는 것이 효과 - 참가자의 긴장 해소 - 테스트 도중 진행자 이다 - 테스트에서 얻어진 적이다 를 위해 미리 커뮤니 는 왜 이런 방법을 사 - 관찰 기록 방법은 종 결과물을 벽에 붙여 - 통상 45분 테스트 후 케이션 하고, 이를 적 용하는지? 현재 생각 이,엑셀, 녹화 등 여러 서 한눈에 볼 수 있도 30분 휴식 절히 사용해 자연스 하는 다른 문제 해결 방법이 존재한다 록 하면 결과분석 시 럽게 테스크 태스크 방법?에 대해 물어보 효과적이다
- 26. Thank you - 해당 PPT는 프로토타이핑의 이해를 돕기 위해 해당 책의 내용을 정리한 것입니다. - PPT에 나오는 이미지들은 모두 구글 검색에서 사용했습니다. - 이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용할 수 있습니다 - 관련한 문의사항은 tkuku@naver.com 으로 문의주세요