프로토타입 첫걸음
프로토타입 배우기 #01
Today UX 아티클
uxpin에 올라온 Jerry Cao의 글 What Is a Prototype: A Guide to Functional UX를 전문 번역한 글입니다. y Ca
이 글에선 “프로토타입”을 정의하고, 그 다양한 형태를 설명하고, 어떻게 만드는지, 그리고 UX 디자인 관점에서 지속적으로 사용자에게 어떻게 초점을 맞추는지 다룰 것입니다.
프로토타입은 정확히 무엇인가?
프로토타입의 가장 기본적인 정의는, “론칭 전에 테스트하기 위해 사용되는 최종 제품의 시뮬레이션 또는 샘플 버전”입니다. 프로토타입의 목표는 최종 제품에 많은 돈과 시간을 쏟아붓기 전에 제품(과 제품 아이디어)을 테스트하는 것입니다.
프로토타이핑은 사용성 이슈를 해결하는데 매우 필수적입니다. 개선이 필요한 부분을 밝혀 주기도 합니다.
A quick landscape of prototyping fidelities프로토타입 특징
프로토타입은 4가지 주요 특성이 있습니다.
Representation(표현법)
프로토타입의 실제 양식, 예) 종이, 모바일, HTML, 데스크탑
Precision(정밀성)
프로토타입의 정확성, 디테일, 세련됨, 사실성의 정도를 의미합니다.
Interactivity(상호 작용성)
사용자에게 열려있는 기능, 예) 완전 작동, 부분 작동, 또는 view-only
Evolution(진화)
프로토타입의 생애주기. 어떤 프로토타입은 빨리 만들어지고, 테스트되고, 버려진 후에 개선된 버전으로 대체됩니다(이것이 “rapid prototyping”이라고 알려져 있습니다.) 또 다른 프로토타입은 만들어지고, 그것을 개선하여 최종 제품까지 계속해서 발전시켜 나갑니다.
프로토타이핑에 대한 가장 흔한 오해는 디자인 프로세스의 마지막에 한두 번만 하면 된다는 것입니다. 그렇지 않습니다. 우리 UXPin의 모토 중 하나는,“일찍 테스트하고, 자주 하라” 것입니다.
당신의 디자인이 반복될 때마다 프로토타입을 해야 합니다. 심지어 가장 초기, 기본적인 아이디어에 대해서도 해야 합니다.
프로토타입은 단순히 최종 버전처럼 생긴 베타 테스트가 아닙니다. 테스트에 쓰일 수 있는 모든 버전의 제품이 프로토타입이 될 수 있습니다. 사람들이 제품을 어떻게 자연스럽게 사용하는지에 대한 인사이트를 얻을 수 있다면, 그게 종이건, 정확도가 높건 낮건 HTML이건 상관없습니다.
가장 유용한 프로토타이핑 방법
Paper Prototyping
이 방법은 인터넷이 있기 전부터 잘 이용되어 온 방법입니다. 페이퍼 프로토타이핑은 주로 제품의 아이디어를 테스트하기 위해, 디자인 초기 단계에 쓰기에 매우 적절하게 쓰입니다.
그만큼 간단합니다. 심플한 스크린을 종이에 그리고 디지털 인터랙션처럼 보이도록 만든다. 이런 프로토타입을 테스트의 공통적인 practice는 한 사람이 “제품”을 맡아서 사용자가 어떻게 행동하는지에 따라 스케치를 바꾸는 것입니다.
시각적, 기능적으로 낮은 수준의 종이 프로토타입종이 프로토타입 장점은 다음과 같습니다.
빠름 – 종이 프로토타입은 5분 안에 만들 수 있기 때문에 종이는 아이디어를 테스팅하기에 매우 적절합니다. 하나 빠르게 그릴 수 있고 (심지어 브레인스토밍 회의에서도) 아이디어가 완전 실패해도 큰 손해가 없습니다.
저렴함 – 종이를 비롯한 기본적인 준비물만 있으면 되기 때문에, 종이 프로토타입은 사실상 공짜입니다. (정확도를 높이길 원한다면, stencils나 mock phone cradle 같은 특화된 장비를 사도 되지만, 이건 선택적 사항입니다.)
팀빌딩 – 종이 프로토타입을 만드는 것은 재미있는데, 이는 팀의 유대감을 강화할 수 있습니다! 그룹으로 함께 일하고 손을 써서 단합하는데 확실히 뭔가 있습니다.
문서 작업 – 디지털 및 HTML 프로토타입과 달리, 종이 프로토타입은 나중에 참고하기 위해 한쪽에 놔둘 수 있습니다. 당신에게 필요한 것을 한 곳에 모아두기 위해 필기와 수정사항을 프로토타입 위에 써도 됩니다.
종이 프로토타입 단점은 다음과 같습니다.
비현실성 – 미술이나 기술이 얼마나 좋냐와 상관없이 종이 프로토타입은 디지털 시스템을 대체하기엔 많이 모자랍니다. 특히, 사용성 데이터 수집에 늘 한계가 있습니다.
가짜 긍정 – 때로, 종이 프로토타입은 당신 머릿속에 있는 것을 정확히 테스트할 수 없습니다. 사람들은 프로토타입이 표현하는 아이디어가 아니라 프토토타입 그 자체에 대한 피드백을 주기 때문입니다(예. 박스가 똑바르지 않다).
장점과 단점을 고려해보면, 여전히 추상적인 초기 단계에서만 종이 프로토타입을 사용하길 추천합니다.
종이 프로토타입에 대한 더 많은 정보를 보려면 하단의 자료를 참고하세요.
Digital Prototyping
디지털 프로토타입은 가장 흔한 유형의 프로토타입이며 대부분의 인터페이스 요소를 정확하게 테스트하기에 충분히 현실적입니다. HTML프로토타입을 만드는 것보다 훨씬 쉽기도 합니다.
디지털 프로토타입은 프로토타이핑을 위해 특별히 만들어진 앱이나 소프트웨어를 사용해서 만들 수 있습니다.
Yelp의 리디자인 활동에서 만들어진 낮은 fidelity의 UXPin 프로로토타입디지털 프로토타입 장점은 다음과 같습니다.
현실적인 인터랙션 – 사용자가 어떻게 최종 제품과 비슷한(fidelity에 따라) 환경과 인터랙션 하는지 테스트할 수 있습니다.
유동성 – 일찍 테스트하고, 자주 하라! 낮은 fi(delity) 프로토타입으로 시작해서 디자인 프로세스가 나아감에 따라 점차적으로 더 개선시킬 수 있습니다.
속도 – 종이 프로토타입은 여기서 우위를 가지겠지만, 만일 당신이 인터페이스를 컴퓨터로 처리하고 싶으면, 디지털 프로토타입은 HTML보다 빠릅니다. 속도는 앱마다 다르지만, 대부분 유저 친화적 인터페이스, 인터렉티브 요소, drag-and-drop 기능을 가졌습니다.
디지털 프로토타입 단점은 다음과 같습니다.
학습 곡선 – 당신의 프로토타입을 만들기 전에, 소프트웨어를 배워야 합니다. (하지만 대부분 사용자 친화적인터페이스를 가졌기 때문에, 그렇게 어렵지 않습니다.)
코드로 변환- 소프트웨어에 따라 다르지만, 당신의 디자인을 코드로 변환하다 보면 어렵거나 놓치는 게 생길 수 있습니다. 양립할 수 없는 요소가 변환 중에 없어질 수도 있습니다. 처음부터 고쳐야 한다는 의미입니다.
프로토타입의 성공이 소프트웨어의 영향을 받으며, 디자이너마다 어떤 걸 다른 것 보다 더 선호합니다(선호하는 게 있습니다.) 좀 더 실무적인 조언을 원하면, 아래 링크를 확인해보세요.
HTML Prototyping
마지막 카테고리, HTML 프로토타이핑은 코딩에 자신 있는 디자이너에게만 추천합니다. HTML 프로토타입은 수많은 장점이 있지만, 기술적 비용을 수반합니다.
HTML에서 만들어진 늦은 비주얼/높은 기능을 가진 프로토타입HTML 프로토타입 장점은 다음과 같습니다.
최종 제품의 기술적 토대 – 버리지 않을 프로토타입을 만든다고 가정해보면, HTML 프로토타입은 최종 코드의 기초공사를 처음부터 할 수 있게 해줍니다 – 장래에 엄청난 에너지와 시간 절약을 해줄 것입니다.
플랫폼 불가지론- 당신은 프로토타입을 모든 OS와 기기에서 테스트해볼 수 있으며, 사용자는 외부 소프트웨어를 쓸 필요가 없습니다.
낮은 비용 - HTML 프로토타입은 프로세스의 몇 단계를 건너뛰어도 되어서, 프로토타이핑 소프트웨어를 살 필요가 없습니다. 자금이 부족하고 프로그래밍 언어를 안다면, 가장 경제적인 선택이 될 것입니다.
HTML 프로토타입 단점은 다음과 같습니다.
디자이너의 스킬 수준에 달려 있음 - 당신의 HTML 프로토타입은 당신의 코딩 실력만큼 나올 것입니다. 이 일에 별로 자신이 없다면, 간편한 프로토타이핑 소프트웨어를 쓰는 게 낫습니다.
창의력 억제 - 코드로 바로 들어가는 것은 기본적으로 두 가지를 한 번에 하고 있다는 뜻이다. 디자인과 코딩을, 이 방법이 사용자와 사용자 경험에 대해 “잊어버리게 되는” 좁은 시야를 줄 수 있습니다. 반면, 프로토타이핑 소프트웨어는 HTML 프로토타입에 비해 살펴볼 수 있는 여지를 더 주고, 빌트인 라이브러리에서 새로운 아이디어를 제안해주기도 한다.
The Prototyping Process
최고의 프로토타이핑 프로세스에 하나만 있는 것은 아니지만, 일부는 다른 것들보다 확실히 더 낫습니다. 다음은 가장 효과적인 세 가지 프로세스이며, 각각은 서로 다른 니즈를 충족시킵니다.
(주목: lo-fi에서 hi-fi로 갈 때 항상 프로토타입 테스트를 할 것을 충고합니다.)
Lo-fi Digital => Hi-fiDigital => Code
이는 대부분의 디자이너가 따르는 표준 프로세스입니다 – 그리고 우리가 UXPin에서도 주로 사용하는 방법입니다.
lo-fi 디지털 프로토타입(이는 디지털 툴로 만들어진 인터랙티브와 와어프레임)은 내비게이션과 IA 같은 중대한 요소들을 초기에 테스트합니다. 바꾸는 것이 너무 어려워지기 전에 테스트를 통해 사용자의 피드백을 반영하여 프로토타입 개선합니다.
다음으로, hi-fi 프로토타입은 최종 제품과 더 가까운 것에 대한 구체적인 피드백을 제공하기 때문에 코딩을 작업을 하여 테스트가 준비되어 있습니다.
High fidelity prototype created during a Yelp redesignexercise.Paper => Lo-fi Digital=> Code
당신의 시간과 자원을 절약할 수 있는 매우 효율적인 방법이며, 실험적인 프로젝트에서 매우 유용합니다.
종이 프로토타입은 프로젝트를 구체화하는데 도움이 많이 됩니다. 특히 관련 데이터를 구할 수 없을 때 더 그렇습니다. 상태를 유지하기 위해(궤도를 벗어나지 않기 위해), lo-fi 프로토타입은 구상한 것을 실행해보는 테스트를 하는 데 사용됩니다. 자원이 된다면, hi-fi 프로토타입도 만들 수 있지만, 그게 아니라면 coding으로 바로 넘어가도 됩니다.
Low fidelity prototype created during a Yelp redesignexercise.HTML Prototyping => Code
만일 당신이 코팅을 잘 안다면, 이 프로세스는 꽤 유용합니다.
기본적으로, 이 프로토타입은 디자인 프로세스를 따라가며 발전하여 매끄럽게 최종 제품으로 이어집니다(또는 주요 요소가 됩니다). 이 프로세스는 낭비를 최소화합니다. 버려지는 프로토타입이 없고, 추가적인 단계도 없으며, 추가적인 소프트웨어 비용도 없습니다.
그렇기는 하지만, HTML 프로토타입의 단점을 기억해야 합니다. 디자이너의 코딩 실력에 달려있고, 창의적 자유에 기여가 제한적이라는 것을 알아야 합니다.
감사합니다.
라이브클래스 (줌 Live) UX 스터디 신청 프로그램 안내
1. 줌 Live!!! (실무자) 프로덕트 디자이너를 위한 UX 실무 과정: 총 26회, 총 78시간 (월/수/금 PM 8:30-11:30)
2. 줌 Live!!! (취준생) UX 포트폴리오 부트 캠프 과정: 총 21회, 매주 토/일 PM 8:00-11:00 (OT 1회, 이론 10회, 포플 피드백 10회)
3. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 사용성에 대해 깊이 파고 들고, 프로덕트 역량 키우기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오전 10시-오후 1시)
4. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UI와 인터랙션 원칙에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오후 3시-6시)
5. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 HCI와 UX 정의에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오전 10시-오후 1시)
6. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 프로세스 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오후 3시-오후 6시)
7. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 리서치 기초 뼈대 튼튼히 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (화 오후 8시30분-오후 11시30분)
8. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 원칙&디자인 가이드 뼈대 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (목 오후 8시30분-오후 11시30분)
라이브클래스 (VOD) 프로그램
UX 스터디 참석하지 못한 분을 위해, VOD 강의 촬영하였습니다
(일부 강좌만 VOD 오픈하였고,
그 외 강좌는 아직 VOD 편집 중이며 곧 오픈 예정입니다!!!!)
(VOD) UX 로드맵 시리즈 #1. UX 취업, 면접, 포플
(VOD) UX 로드맵 시리즈 #2. UI, 인터랙션, UX 정의
(VOD) UX 로드맵 시리즈 #3. UX 가설 설계
(VOD) UX 로드맵 시리즈 #4. 데스크 리서치
(VOD) UX 로드맵 시리즈 #5. 유저 컨텍스트 리서치
(VOD) UX 로드맵 시리즈 #6. UX 리서치 분석 및 UX 전략 수립
(VOD) UX 로드맵 시리즈 #7. UX 설계
(VOD) UX 로드맵 시리즈 #8. U8 설계 단계 리서치
(VOD) UX 로드맵 시리즈 #9. UX 디자인 가이드 원칙
