내용으로 건너뛰기
프로토타이핑이란 무엇이며 왜 중요한가요?

프로토타이핑이란 무엇이며 왜 중요한가요?

프로토타이핑이 무엇이며 왜 중요한지 알아보세요. Indigo.Design 전문가가 프로토타이핑 프로세스를 설명하고 예제, 프로토타이핑 방법 및 사용할 도구를 자세히 설명합니다.

6min read

다음은 진행 중인 새로운 앱에 대해 수많은 질문을 하기 시작하는 작은 목소리입니다.

잠재 고객이 이 제품을 정말 좋아할까요? 우리가 가정한 대로 그들의 특정 요구 사항을 충족합니까? 사용자 인터페이스가 우아하고 단순하여 고객이 좋아할 것입니까? 등등...

그렇다면 어떻게 이러한 불확실성을 극복하고 아이디어와 디자인을 검증할 수 있을까요?

프로토타입이란 무엇입니까?

프로토타입은 만들려는 솔루션의 모형입니다. 개발자의 개입 없이 완전히 개발된 제품과 동일한 방식으로 경험할 수 있도록 모든 상호 작용 및 보기를 모형화할 수 있습니다. 앱에 포함하려는 모든 기능(또는 이 경우 모든 종류의 솔루션)을 표시하고, 아이디어를 검증하고, 전체 UX 전략을 검증할 수 있습니다. 프로토타입의 목적은 사용자의 필요와 프로젝트 단계에 따라 달라질 수 있으며, 이를 어떻게 사용할지는 사용자에게 달려 있습니다.

프로토타입은 설계를 위한 Sketch 형 도구 및 디자인 도구 스크리닝을 포함한 다양한 유형의 도구를 사용하여 구축되어 완전한 통합 디자인-코드 도구를 제공합니다. 일부는 이해 관계자가 피드백을 지원하는 데 도움이 되는 협업 기능과 함께 제공되고, 다른 일부는 초기 와이어프레임을 구체화하는 데 도움이 되는 아이디어 구상 도구를 포함합니다.

프로토 타입에는 4 가지 주요 품질이 있습니다.

표현(Representation) - 프로토타입의 실제 형태(예: 종이 및 모바일 또는 HTML 및 데스크톱)입니다.

정밀도- 프로토타입의 충실도, 즉 세부 수준, 광택 및 사실감을 의미합니다.

상호 작용(Interactivity) - 사용자에게 개방된 기능으로, 완전히 작동하거나, 부분적으로 작동하거나, 보기 전용입니다.

진화— 프로토타입의 수명 주기입니다. 일부는 신속하게 구축되고, 테스트되고, 폐기된 다음 개선된 버전으로 교체됩니다(이를 "신속한 프로토타이핑"이라고 함). 다른 것들은 구축되고 개선되어 궁극적으로 최종 제품으로 발전할 수 있습니다.

Low Fidelity Prototyping Example

종종 종이 기반의 저충실도 프로토타입은 최종 제품의 설계 요소를 시각적으로 표현합니다.

프로토타이핑에 대한 가장 일반적인 오해 중 하나는 디자인 프로세스가 끝날 때 한두 번만 수행하면 된다는 것입니다. 이것은 사실이 아닙니다. Infragistics의 모토 중 하나는 "일찍 테스트하고 자주 테스트"입니다.

보시다시피 프로토타이핑은 하나의 과정입니다. 좀 더 자세히 알아보겠습니다.

프로토타이핑은 무슨 뜻인가요?

프로토타이핑은 대상 사용자를 위한 최적의 환경을 설계하는 프로세스입니다. 여기에는 디자이너, 제품 소유자 또는 비즈니스 분석가가 사용자 요구 사항, 탐색, 정보 아키텍처, 유용성, 접근성, UI 또는 시각적 디자인을 비롯한 주요 관심사를 결정하는 데 도움이 되는 다양한 단계가 포함되어 있습니다.

High Fidelity 프로토타이핑 예제

최신 프로토타이핑 도구는 동적이며 제안된 앱의 스크린샷, 전환, 테마 스타일 등을 포함하여 완성된 앱의 모양과 느낌에 대한 실제 느낌을 제공합니다.

일반적으로 우리가 무언가를 디자인할 때마다 초기 반복은 그다지 좋지 않을 수 있습니다. 디자인이 하룻밤 사이에 성공하는 경우는 거의 없기 때문에(또는 현실적으로 "좋은 디자인"은 절대 성공하지 못함) 이것이 우리가 프로토타이핑이 필요한 이유입니다. 그리고 많은 초기 버전의 프로토타입이 실패했기 때문에 인간 중심 디자인의 개념을 홍보하고 혁신 연구소를 시작하고 팝업 인큐베이터를 만든 것으로 유명한 디자인 회사인 IDEO의 설립자인 David Kelley의 생각을 염두에 두는 것이 좋습니다.

'더 빨리 실패하려면 더 빨리 성공하라' —

David Kelley, IDEO Founder

프로토타이핑의 종류

프로토타이핑을 살펴보는 두 가지 일반적인 방법은 다음과 같습니다.

  • 충실도가 낮은 프로토타이핑: 빠르고 저렴하며 종이 기반인 경우가 많으며 제품을 빠르게 미리 볼 수 있으며 일반적으로 사용자가 적절하게 테스트할 수 없습니다.
  • 충실도가 높은 프로토타이핑: 출시 전에 실제 제품과 최대한 유사하게 사실적으로 나타나고 작동하며, 상호 작용하고 의미 있는 피드백을 제공합니다. 또한 잠재적 투자자 또는 이해 관계자 앞에서 시연하기에 좋습니다.

프로토타이핑이 중요한 이유

프로토타이핑의 가장 강력한 측면 중 하나는 잘 수행되면 고객에 대한 공감대를 형성 한다는 것입니다. 이런 점에서 소프트웨어를 설계하는 것은 인간이 사용하거나 거주할 다른 제품이나 구조를 설계하는 것과 다르지 않습니다.

예를 들어, 건축가는 웅장한 타워, 보석처럼 빛나는 천장부터 바닥까지 내려오는 대형 창문, 디자이너의 개성을 과시하는 방과 복도의 특이한 레이아웃과 같은 건물의 웅장함에 사로잡히기 쉽습니다. 그러나 그 건물에서 살거나 일해야 하는 사람들에 대한 공감이 없다면, 그 웅장한 디자인은 좋지 않은 환경 설계로 이어질 수 있습니다 - 사람들은 한 곳에서 떨고 다른 사람들은 불과 몇 야드 떨어진 곳에서 땀을 흘리게 될 수 있습니다. 그리고 그 반짝이는 창문은 너무 많은 햇빛을 받아 근로자들이 컴퓨터 화면을 볼 수 없게 할 수 있습니다.

같은 방식으로 고객의 요구 사항을 이해하고 공감하지 않고 소프트웨어를 설계하면 불필요한 기능, 혼란스러운 워크플로, 읽을 수 없는 화면 텍스트 및 기타 여러 문제가 발생할 수 있습니다. 고객 공감은 디자이너가 최종 제품이 겉으로 보기에도 아름다울 뿐만 아니라 기능적이고 내부도 즐겁도록 하는 데 도움이 됩니다.

프로토타입 제작의 주요 이점을 요약하면 다음과 같습니다.

  • 시간과 비용을 절약할 수 있습니다
  • 대상 사용자 그룹에서 개념을 표시하고 테스트할 수 있습니다
  • 개발자에게 유용한 참고 자료입니다
  • 프로젝트의 문서 역할을 할 수 있습니다
  • 유형의 유물에 대해 팀과 함께 작업할 수 있는 기회를 얻게 되며, 이를 통해 더 나은 아이디어를 창출할 수 있습니다

Prototyping Tools

필요에 따라 다양한 유형의 프로토타이핑 도구가 있습니다. 일부는 와이어프레임이 있는 프론트엔드 설계에 초점을 맞추고, 다른 일부는 사용자 테스트 및 사용자 흐름의 기본 시연을 허용하는 반면, 다른 일부는 완전히 통합되어 기존 설계 또는 Sketch와 같은 프로그램의 와이어프레임으로 작업하고, 현실적이고 풍부한 사용자 상호 작용을 시뮬레이션하고, 팀과 협업하고, 사용자 테스트를 수행하고, 개발자에게 전달할 준비가 된 코드를 생성할 수 있습니다. 어떤 도구를 선택할지는 프로토타입의 목표, 사용자 테스트에 얼마나 빨리 사용할 수 있어야 하는지, 누가 작업할 것인지, 워크플로에 어떻게 통합해야 하는지에 따라 달라집니다.

App Builder를 사용한 프로토타이핑

App Builder는 완전히 통합된 도구 중 하나로, 프로토타이핑, 디자인 시스템, 사용자 테스트 등을 통합하는 완전한 디자인-코드 로우 코드 도구입니다. 실제 UI 구성 요소를 사용하여 동급 최고의 UX 및 UI 디자인을 만들고 디자인 파일을 코드로 변환할 수 있습니다.

Interactive Prototype Example

그런 다음 App Builder 사용하여 프로토타입을 애니메이션화하여 실행 중인 프로토타입의 상호 작용 및 사용자 흐름을 볼 수 있습니다. 또한 공동 작업 옵션도 포함되어 있으므로 조정되지 않은 원격 사용성 테스트를 위해 공유할 수 있는 URL을 얻을 수 있습니다. 또는 만족스러우면 Sketch 플러그인을 사용하여 Visual Studio Code에서 코드를 생성할 수 있는 개발자와 URL을 공유할 수 있습니다.

프로토타입 제작 방법 비디오 (시간: 2:51)에서 이러한 기능에 대한 짧은 데모를 시청하십시오.

데모 요청