모바일 프로토타이핑 도구를 선택하는 12가지 요소

몇 년 전, 한 꼬마가 칼로 나뭇가지를 잘라 활을 만들려고 했습니다. 이 고군분투를 본 할아버지는 "항상 작업에 적합한 도구를 사용하십시오!" 이야기 속의 아이로서 저는 장인 정신에 대한 귀중한 교훈을 배웠습니다. 문제를 해결하기 위해 도구를 고를 때 좋은 도구가 많이 있지만 일부는 다른 것보다 작업에 더 적합합니다!

최근 몇 년 동안 모바일 디자인을 위한 새로운 프로토타이핑 도구가 등장했습니다. 환경은 끊임없이 변화하고 있으며 일부 도구는 UX 디자이너(또는 UX 사용자)의 선호를 잃고 다른 도구는 그 자리를 차지합니다. 이 기사는 프로토타이핑 도구를 선택하기 위한 완전한 숫자별 매뉴얼 역할을 하지는 않지만 선택 프로세스에 영향을 미치는 중요한 요소에 대해 논의할 것입니다.

SmashingMag에 대한 추가 정보:

• 저충실도 프로토타이핑에 대한 회의론자를 위한 안내서
• 콘텐츠 우선 프로토타이핑
• 반응형 웹 디자인을 위한 스케치 사용
• 스케치를 사용하여 iOS 및 Android 앱 프로토타이핑

나는 특정 도구가 다른 도구보다 어떻게 더 잘 맞는지 설명하기 위해 다양한 도구를 사용하고 연구한 개인적인 경험에 의존할 것입니다. 기사의 끝 부분에 있는 "리소스" 섹션에서는 의사 결정을 위한 추가 컨텍스트를 제공하기 위해 보다 구체적인 비교 방향을 알려줍니다.

모바일 도구가 필요합니다. 너 뭐하니?

모바일 프로젝트를 위해 선택할 수 있는 도구가 많더라도 하나를 선택하는 것이 어려운 작업일 필요는 없습니다. 질문에 답하여 선택 기준을 형성함으로써 가능성을 좁힐 수 있습니다.

프로젝트의 요구 사항은 좋은 초기 제약 조건을 제공합니다. 사용성을 테스트하고 있습니까? 시각 디자인이 프로토타이핑의 일부가 될까요? 프로토타입이 높은 수준의 개념을 포착하거나 본격적인 생산 작업을 수행할 수 있습니까?

UX 디자이너는 주어진 문제를 지속적으로 평가하고 코스를 계획합니다. 그렇다면 프로토타이핑 도구를 선택하는 데 동일한 프로세스를 적용하는 것이 어떻겠습니까? 선택을 더 작은 요소로 세분화 하면 궁극적으로 추구하는 방향에 대한 자신감을 키울 수 있습니다. 다음 각각은 결정에 중요한 역할을 할 수 있습니다.

• 상호 작용 충실도,
• 애니메이션과 모션,
• 제스처 지원,
• 시각 디자인,
• 데모의 단순성,
• 디지털 협업,
• 선적 서류 비치,
• 민감도.

고려해야 할 기술적 요소

모바일 프로토타이핑 환경은 흥미로운 새 도구로 매년 성장하고 있습니다. 각 도구에는 설계자가 다양한 문제를 해결할 수 있는 다양한 기능이 있습니다. 일부 도구는 다른 작업보다 한 작업 집합에 더 가치가 있습니다. 단일 도구가 모든 것을 최상으로 만들 수는 없습니다!

다음은 우리의 선택 기준에 따라 일반적인 프로토타이핑 도구와 기술이 얼마나 적합한지에 대한 한 가지 해석입니다. 선택은 프로젝트에 따라 달라집니다. 아래에 "가장 적합"이라고 표시된 도구가 프로젝트에 더 적합하다는 것을 알 수 있습니다.

"적합" 등급은 단순히 특정 도구가 강력하게 권장되지만 다른 도구("가장 적합함"으로 표시됨)가 약간 더 높은 기능을 갖고 있음을 나타내므로 특정 작업을 더 쉽게 수행할 수 있습니다.

1. 대화형 충실도

상호 작용은 다양한 맛으로 나타납니다. 흐름을 전달하기만 하면 됩니다. 따라서 클릭연결 프로토타입이 이상적입니다(개념 및 사용성 테스트에 일반적임). 오히려 프로젝트에서 다단계 조건부 상호 작용을 설명해야 할 수도 있습니다(생산 준비 및 문서 중심 프로토타입이 필요한 경우). 어떤 경우이든 프로토타이핑 도구가 도움이 됩니다!

적합

일부 모바일 도구는 핫스팟 연결을 통해 프로토타입을 클릭스루할 수 있습니다. Keynote와 같은 프레젠테이션 소프트웨어와 모바일 페이퍼 툴인 Fluid UI 및 Marvel이 좋은 예입니다.

더 알 맞는

도구가 상태 관리, 자세한 이벤트 모델 및 요소 재사용을 위한 변수를 지원할 때 대화형 유연성이 확보됩니다. 이 법안에 맞는 도구에는 Pixate 및 Proto.io와 같은 클라우드 기반 도구와 Axure 및 Justinmind와 같은 데스크톱 소프트웨어가 있습니다. Bootstrap, jQuery Mobile 및 Framer와 같은 프로그래밍 기술도 이러한 기능을 제공하며 그 효율성은 프로토타입을 구축할 수 있는 속도에 따라 다릅니다.

2. 애니메이션과 모션

애니메이션은 모바일 상호 작용을 전달하는 데 큰 역할을 합니다. 모바일 프로젝트를 시작할 때 프로토타입에서 애니메이션을 만드는 책임이 자신인지 아니면 개발자나 모션 디자이너와 같은 다른 사람이 있는지 결정합니다. 누가 이것을 처리하는지에 관계없이 프로토타입에서 애니메이션에 대한 제어 수준을 아는 것이 도움이 됩니다.

적합

이 범주의 모바일 도구에는 애니메이션이 내장되어 있지만 사용자 정의 기능(예: Blueprint 및 Xcode)이 부족한 경우가 많습니다. 보다 강력한 도구 중 일부는 타이밍 및 탄력성 설정을 포함한 애니메이션 구성을 제공합니다. Axure, Justinmind 및 Proto.io에는 이 기능이 있습니다.

더 알 맞는

애니메이션의 속도, 탄성, 마찰 및 기타 물리 기반 속성에 대한 추가 제어를 위해 Framer 또는 CSS3 애니메이션과 같은 코딩 도구를 사용해 볼 수 있습니다. 이러한 도구 중 다수는 크기, 회전, 불투명도, 색상 및 흐림 수준을 비롯한 고유한 위젯 속성을 애니메이션으로 만들 수도 있습니다.

3. 제스처

모바일 프로토타이핑에는 제스처 입력을 위한 디자인이 포함되므로 프로젝트에 이것이 필요한지 고려하십시오. 대부분의 UX 전용 도구는 기본적으로 이를 지원합니다. 한 세트의 도구에는 공통 제스처가 내장되어 있고 다른 세트는 제스처 생성 및 다중 손가락 입력을 지원합니다.

적합

내장 제스처는 Blueprint 및 AppCooker와 Proto.io와 같은 많은 클라우드 기반 모바일 도구에서 찾을 수 있습니다. 이러한 도구는 탭, 스와이프 및 플릭을 지원합니다. 일부는 길게 누르거나 두 번 탭하는 기능이 있습니다. 제스처에는 구성 가능한 매개변수가 없으므로 제스처 입력 시 특정 상호 작용을 트리거해야 하는 경우 제약이 있을 수 있습니다.

더 알 맞는

프로토타입에 드래그 감쇠, 속도 및 방향성을 포함하여 더 미세한 제스처 제어가 필요한 경우 코드 기반이든 사람이 읽을 수 있는 작업의 형태로 추상화된 API든 모바일 도구를 어떤 형태의 API와 함께 활용해야 합니다. 좋은 예는 Hammer와 Axure입니다. 여러 손가락 제스처를 지원하는 도구도 있습니다. Justinmind, Pixate 및 Framer는 두 손가락 핀치 및 회전을 실행합니다.

4. 시각 디자인

모바일용 프로토타이핑 시 결과물의 시각적 충실도에 대한 기대치를 식별하십시오. UX 사용자는 종종 대규모 조직의 전문 디자이너에게 위임된 책임인 시각적 디자인을 담당합니다. 충실도는 프로젝트의 목표와 청중에 따라 결정됩니다. 피치 및 프로덕션 작업의 경우 높음, 사용성 테스트의 경우 중간에서 낮음, 개념 증명의 경우 낮음입니다.

적합

Blueprint, 코드 기반 도구(Framer 및 CSS3 애니메이션) 및 클라우드 기반 도구(Flinto, Pixate 및 InVision)와 같은 모바일용 종이 도구는 외부 시각적 앱에서 가져온 시각적 자산에 대한 상호 작용을 생성합니다. 이러한 도구 중 일부는 내장 위젯을 통해 시각적 디자인도 가능합니다. 이러한 유형의 워크플로에서 UX 사용자는 프로토타이핑 도구와 Sketch 또는 Photoshop과 같은 시각적 응용 프로그램 간에 전환하는 자신을 발견할 수 있습니다.

더 알 맞는

일부 프로토타이핑 도구는 그라디언트, 그림자, 사용자 정의 글꼴 및 재사용 가능한 스타일(예: Axure 및 Justinmind)을 포함한 정교한 시각적 디자인이 가능합니다. 이것은 대부분의 프로토타이핑 요구 사항을 해결하는 독립 실행형 프로세스를 만듭니다. 그러나 마스킹, 다중 경로 벡터 및 사진 향상을 포함하여 보다 복잡한 시각적 디자인을 위해 UX 사용자는 전용 시각적 도구에 의존해야 합니다.

5. 데모의 단순성

청중 앞에서 모바일 프로토타입을 얻는 것은 디자인을 검증하는 데 매우 중요합니다. 모바일 프로토타입을 시연하는 두 가지 주요 방법이 있습니다: 컴퓨터에서 또는 대상 장치에서 직접. 컴퓨터에서 장치로 또는 그 반대로 미러링하는 것과 같이 그 사이에 변형이 있습니다. 프로젝트를 시작할 때 어떤 방법이 가장 적합하고 프로토타이핑 도구에서 지원하는지 고려하십시오.

적합

많은 코드 기반 도구(jQuery Mobile 및 CSS3 애니메이션)는 프로토타입을 클라우드에서 호스팅하고 링크를 통해 대상 장치에 로드해야 합니다. 이것은 데모를 위한 추가 단계를 생성할 수 있습니다. iOS의 ProtoSee와 같은 도구를 사용하면 생성된 프로토타입을 장치에 직접 로드할 수 있으므로 더 빠른 솔루션이 됩니다. Axure, InVision 및 Proto.io를 비롯한 일부 모바일 도구는 클라우드에서 장치로 프로토타입을 가져올 수 있는 앱을 제공하여 한 단계 더 나아갑니다.

더 알 맞는

많은 공급업체에서 대상 장치용 컴패니언 앱을 출시하기 시작했습니다. 이를 통해 UXer는 데스크톱에서 프로토타입을 만들고 Wi-Fi를 통해 모바일 장치에서 프로토타입을 실시간으로 미러링할 수 있습니다. Pixate, Flinto, 심지어 Framer도 기본 앱을 통해 이를 지원합니다. Wi-Fi 안정성과 프로토타입의 전체 크기를 염두에 두십시오.

흥미롭게도 대상 장치에서 직접 프로토타입을 만들 수 있는 모바일 도구는 프로토타입을 시연하는 가장 쉬운 방법 중 하나를 제공합니다. AppCooker, Blueprint 및 Marvel에는 편집 모드와 미리보기 모드 간에 전환하는 기능이 내장되어 있습니다.

6. 디지털 협업

디자이너는 진공 상태에서 작업하지 않습니다. UXer는 프로젝트 수명 주기 동안 이해 관계자 및 기타 전문가(시각 디자이너 및 개발자 포함)와 힘을 합칩니다. 따라서 프로토타입의 공동 제작이 중요합니다. 다른 사람들과 어떻게 협력할지 미리 알아보세요.

적합

많은 모바일 프로토타이핑 도구는 단일 UXer를 위해 설계되었으므로 공동 생성 또는 피드백 캡처를 지원하지 않습니다. Pixate와 Framer가 떠오릅니다. 일부 도구는 공동 작성을 지원하지 않지만 일정 수준의 협업을 제공합니다. Marvel과 InVision은 외부 피드백을 캡처하여 궁극적으로 반복을 유도합니다.

더 알 맞는

가장 강력한 협업을 제공하는 모바일 프로토타이핑 도구는 공유 프로젝트, 버전 제어 및 분산 공동 생성을 허용합니다. Justinmind와 Axure는 모두 이 작업을 수행할 수 있습니다. 그리고 둘 다 리뷰어가 프로토타입에 대해 논평할 수 있도록 합니다.

7. 문서

모든 모바일 프로토타입에 문서가 필요한 것은 아닙니다. 상호 작용과 흐름이 때때로 적절합니다. 많은 비즈니스 로직과 복잡성이 있는 시스템의 경우 문서는 개발자에게 세부 정보를 명확히 하는 중요한 도구가 됩니다. 문서는 상호 작용 디자인에서 구현되지 않았지만 UXer의 마음에 있는 세부 사항을 캡처합니다.

적합

많은 프로토타이핑 도구는 프로토타입에 의존하여 문서 역할을 합니다(Flinto 및 Pixate). 일부 도구는 한 단계 더 나아가 UXer가 디자인을 PDF 또는 PNG 스택으로 내보낼 수 있도록 합니다. 이 범주에서 도구는 주석에 대한 혼합 지원을 제공합니다. 예를 들어 Proto.io에는 이 기능이 없지만 AppCooker와 Blueprint는 사용자 정의 메모와 주석을 허용합니다.

더 알 맞는

가장 유연한 문서는 Axure 및 Justinmind와 같은 플랫폼 프로토타이핑 도구에서 제공됩니다. 이를 통해 개별 UI 위젯 또는 전체 페이지에 주석을 달고, 동적 문서 카테고리를 생성하고, 버튼 클릭으로 완전한 사양을 생성할 수 있습니다! 또한 많은 코드 기반 도구가 개발자에게 도움이 될 수 있는 인라인 문서(Framer 및 jQuery Mobile)를 캡처합니다.

8. 반응성

프로토타입이 기본 경험을 지원하는지 아니면 반응형인지 결정합니다. 또한 반응형 웹 디자인 작업을 하는 경우 도구가 적응형 또는 유동적 레이아웃을 지원하는지, 반응형 위젯 라이브러리가 있는지, 도구 내에서 응답성을 시연할 수 있는 방법을 고려하십시오.

적합

일부 모바일 도구는 다른 중단점에 대한 화면을 표시할 수 없습니다. Marvel 및 Keynote와 같은 프레젠테이션 소프트웨어가 좋은 예입니다. 그러나 중단점을 개별적으로 문서화하고 나란히 비교할 수 있습니다.

다른 도구는 단일 중단점의 다른 방향과 중단점에서 동일한 디자인의 변형을 지원하지만 데모 중에 중단점 간에 동적으로 전환하지 않습니다. Blueprint, InVision 및 Pixate는 소수에 불과합니다.

더 알 맞는

반응형 디자인을 지원하는 전용 UX 도구가 등장하고 있습니다. Axure에는 여러 중단점에 대한 적응형 프로토타입을 만들 수 있는 기능이 있습니다. 약간의 해킹이 필요하지만 유체 설계가 가능합니다. Proto.io와 Justinmind는 진정으로 유동적인 디자인이 가능합니다.

Bootstrap 및 Foundation과 같은 프론트엔드 응답 프레임워크를 사용하여 더 큰 유연성을 달성할 수 있습니다. 반응형 지원을 제공하는 다른 도구에는 HotGloo 및 WebFlow가 있습니다.

당신의 선택에 숨겨진 영향

이제 도구 조사를 완료했습니다. 당신은 당신의 선택에 매우 만족하고 디자인에 뛰어들고 싶어합니다. 멋진 작품을 만들겠다는 기대는 큰 동기부여가 되지만 때로는 큰 그림을 보는 데 방해가 됩니다! 기술적 측면 외에도 2차적 요인을 고려해야 한다. 권장 사항에 도달하기 전에 간단히 검토해 보겠습니다!

학습 가능성

프로토타이핑 도구, 특히 경험이 없는 도구를 선택하는 것은 까다로운 제안입니다. 프로젝트 자체에 소요된 시간 외에도 모바일 도구의 복잡성과 버그, 디자인 재작업 프로세스를 배우는 데 시간을 할애하게 됩니다. 그렇다고 해서 다이빙을 방해해서는 안 됩니다.

도구의 기본 사항에 익숙해지는 데 6개월에서 1년 이 걸릴 수 있습니다. 숙달은 지속적인 사용과 함께 제공되며 일부 도구의 경우 최대 2~3년 이 소요될 수 있습니다. 숙달은 조사하지 않고도 문제를 해결하는 방법을 즉시 아는 것을 의미합니다. 이러한 추정치는 내 개인적인 경험에서 파생되지만 코딩 및 프로토타이핑에 대한 귀하의 친숙도에 따라 달라질 것입니다.

개발 관련 사고 방식을 채택해야 합니다. 구획화, 논리 전파, 이벤트 감지 및 응답 모두 익숙해지는 데 시간이 걸립니다. 각 도구는 UI 수준에서 이러한 측면을 다르게 처리하여 처리해야 할 새로운 디자인 비유를 만듭니다. 그러나 각각의 연속적인 도구를 마스터할 때마다 이전 가능한 지식을 쌓게 될 것입니다!

비용

설치 가능한 제품의 경우 계층형 가격 책정을 살펴보십시오. 예를 들어, Axure에는 비용과 기능면에서 다른 표준 및 프로 버전이 있습니다. 기타 고려 사항에는 단일 라이센스가 지원하는 시스템 수와 업그레이드 빈도가 포함됩니다.

클라우드 기반 도구는 월별 가격이 책정됩니다. 대부분의 중대형 프로젝트에 적합한 6개월 및 1년 기간 의 비용을 계산합니다. 도구는 프로젝트 수, 기능 및 허용된 검토자 수에 따라 다릅니다. 이 카테고리에서 InVision 및 Proto.io를 확인하십시오. Justinmind 및 Pixate와 같은 독립 실행형 및 클라우드 기반 버전 모두에 하이브리드도 있습니다.

무료의 힘을 과소평가하지 마십시오! 일부 클라우드 서비스는 1~3개의 프로젝트에 대해 무료 요금제를 제공합니다. 다운로드 가능한 도구에는 일반적으로 1개월 평가판 버전 이 있습니다. 아직 학교에 다니는 UXer를 위해 회사는 무료 또는 할인된 도구를 제공합니다. Pixate는 Google에 인수되기 전에 "학술 계정"이 있었습니다. Axure에는 우수한 학생 프로그램이 있습니다. Proto.io는 50% 교육 할인을 제공합니다.

여러 프로젝트에 단일 도구를 사용하려는 경우 구독을 사용하는 대신 도구를 구입하여 최고의 투자 수익을 얻을 수 있습니다. 개인 및 소규모 설계 워크샵의 경우 이것이 최선의 선택입니다. 구독을 사용하면 팀이 지리적으로 많이 분산되어 있고 실시간 협업에 의존하지 않는 한 도구의 수명 동안 지출된 총 비용이 비용 효율적이지 않을 수 있습니다. 대형 디자인 에이전시와 기업은 이러한 접근 방식을 취할 수 있는 재정적 유연성을 갖추고 있습니다.

기술적 지원

귀하의 결정은 도구의 기능뿐만 아니라 제공되는 기술 지원에 의해 결정됩니다. 나는 비디오 자습서, 단계별 연습, API 라이브러리 등의 형태로 공개적으로 사용 가능한 문서를 참조하고 있습니다. Proto.io는 웨비나 월간 프로그램을 훌륭하게 수행하고 있습니다. Axure에는 자세한 단계별 연습이 있습니다. Framer에는 API 웹사이트와 커뮤니티 구축 예제가 있습니다.

또 다른 고려 사항은 진화하는 UX 요구 사항을 수용하기 위해 도구가 업데이트되는 속도입니다. 3개월마다 마이너 릴리스 와 6~12개월마다 메이저 릴리스 가 있는 프로토타이핑 도구는 디자인 곡선보다 앞서 나갈 수 있습니다. 예를 들어, Framer에는 버그 수정 및 새로운 기능에 대한 많은 소규모 업데이트가 있는 반면 Axure는 일반적으로 12개월마다 주요 릴리스가 있으며 그 사이에 증분 업데이트가 있습니다.

타사 리소스

모바일 프로토타이핑 도구 공급업체는 커뮤니티 구축에 중점을 둡니다. 디자이너는 종종 동일한 문제를 해결합니다. 따라서 지식 공유는 관련성이 높습니다. Axure, Proto.io 및 Justinmind를 비롯한 많은 도구에는 사용자가 자신의 프로토타입과 정보를 제공할 수 있는 온라인 포럼이 있습니다. Framer를 비롯한 다른 공급업체는 Facebook Groups와 같은 대체 솔루션을 사용합니다.

당신의 선택은 또한 UX 커뮤니티에 의한 도구의 수용을 기반으로 해야 합니다. 출판물과 전문 행사의 수는 디자이너의 관심을 나타내는 좋은 지표입니다. 보다 널리 채택된 도구의 경우 설계 자산 판매를 위한 인증 과정 및 시장을 볼 수 있습니다. 예를 들어 Axure에는 책, 기사 및 연례 웨비나가 있는 반면 Framer에는 여러 도시와 사용자 제공 GitHub 리포지토리에 전문 워크샵이 있습니다.

요약

이 기사에서는 기술적인 요소와 보다 전략적인 선택 기준을 모두 포함하여 UX용 모바일 프로토타이핑 도구를 선택하기 위한 실용적인 고려 사항을 소개했습니다. 옳고 그른 결정은 없다는 것을 명심하십시오. 디자이너는 작업 스타일, 전문 지식 및 요구 사항이 다릅니다!

더 많은 정보를 바탕으로 선택을 하려면 자신의 강점을 파악하십시오. 코딩을 아십니까? 당신은 뛰어난 비주얼 커뮤니케이터입니까? 얼마나 많은 요구 사항을 식별 했습니까? 이러한 질문에 답하고 프로젝트에 대한 정보를 수집하면 올바른 도구를 결정하는 데 도움이 됩니다.

권장 사항

아무도 원트릭 포니가되고 싶어하지 않습니다. 따라서 모바일 프로토타이핑 툴킷에 다음 카테고리 중 하나 이상을 포함하는 것이 좋습니다.

• 다양한 모바일 문제를 해결하기 위한 전체 플랫폼: Axure, Justinmind
• 상호 작용 및 애니메이션 제어를 위한 코드 기반 도구: Framer, jQuery Mobile
• 협업 및 분산 작업을 위한 클라우드 기반 도구: Flinto, Proto.io, Pixate
• 빠른 개념 모형을 위한 온디바이스 프로토타이핑 도구: Blueprint, AppCooker, Fluid UI

당신의 분야에서 최고가 되기 위해 노력하십시오. 새로운 상호 작용 도구(Principle, InVision Motion 및 Adobe Experience Design CC 등)에 대해 계속 궁금합니다. 비즈니스 파트너와 최종 사용자를 위한 훌륭한 경험의 프로토타이핑을 계속하십시오. 모바일용 프로토타이핑 도구 선택 경험에 대해 듣고 싶습니다!

자원

도구의 상위 수준 비교

• "디자이너의 툴킷: 프로토타이핑 도구", Emily Schwartzman, Cooper
• "UX 도구", Fabricio Teixeira 및 Caio Braga, UXdesign.cc
• "UX/UI 프로토타이핑 도구 목록", Michael McDearmon
• 프로토타이핑 도구, Javier-Simon Cuello

찬반 양론에 대한 심층 분석

• "오늘날 가장 인기 있는 프로토타이핑 도구 및 응용 프로그램의 장단점 분석" Stephen Meszaros
• "모든 디자이너가 고려해야 할 9가지 모바일 프로토타이핑 도구 비교", Dave Crow
• "인기 있는 레이어 기반 및 코드 기반 프로토타이핑 도구 비교", 김보나, UX Magazine
• “4가지 인기 있는 페이지 기반 대화형 프로토타이핑 도구 비교”, Bona Kim, UX Magazine