Meta는 Facebook과 Instagram의 모회사로 알려져 있으며, 2014년에 현실 세계와 디지털 세계를 통합하는 리브랜딩의 일환으로 AR/VR 시장에 진입했습니다.

고충실도 프로토타입은 뛰어난 디지털 경험을 디자인하는 데 중요한 역할을 하며, 특히 Meta와 같은 회사에는 필수적입니다. 그러나 Meta의 프로덕트 디자이너들은 기존의 프로토타이핑 도구에서 접근성 문제로 어려움을 겪고 있었고, 마침 ProtoPie를 발견하게 되었습니다.

웨비나 "How Design Teams Use ProtoPie in Their Workflow"를 통해 Meta의 내부 디자인 툴 팀의 프로덕트 디자이너인 Jon Bernbach를 만났습니다. 그의 팀은 프로덕트 및 콘텐츠 디자이너들이 대규모로 작업할 수 있도록 돕는 도구를 설계하고 구축하는 책임을 지고 있습니다.

웨비나를 통해 Meta의 디자인 워크플로우에서 프로토타이핑이 어떤 역할을 하고, 왜 그들의 디자인 팀이 ProtoPie를 주요 프로토타이핑 도구로 선택했는지에 대한 인사이트를 얻을 수 있습니다. (영어로 진행된 웨비나 입니다. 한국어로 웨비나 요약본을 읽어보실 수 있으니 끝까지 기사를 읽어주세요.)

Meta의 제품 개발 사이클에서 프로토타이핑이 중요한 이유

Meta는 "왼쪽으로 이동(shifting left)"이라는 개발 프로세스를 통해 테스트와 품질 보증을 개발 초기 단계로 이동시키며 높은 기준을 유지합니다.

“제품을 구현하거나 공개한 후의 모든 단계는 개발 시간과 엔지니어링 측면에서 매우 비용이 많이 듭니다. 품질을 초기 단계에 두고, 그 단계에 도달하기 전에 문제와 실수를 파악하기 위한 방법입니다.”라고 Jon은 설명했습니다.

Shifting left는 Jon 팀이 다른 팀들이 더 많이 실천하도록 하는 중요한 부분입니다. 이 말은 다음과 같은 것들을 의미합니다:

• 기존 디자인 시스템과 컴포넌트를 따르기.

• 올바른 색상 사용하기.

• 접근성 휴리스틱을 준수하기.

실제로 이는 팀들이 광범위한 프로토타이핑과 사용자 연구에 참여하도록 장려된다는 것을 의미합니다. 이를 효과적으로 수행하기 위해서는 적절한 도구가 필요합니다. Jon은 뛰어난 제품의 개발에서 프로토타이핑이 중요한 역할을 한다는 세 가지 핵심 영역을 강조합니다.

1. 프로토타이핑은 디자인 경험을 소통하게 한다.

혁신적인 디지털 경험을 위한 프로토타이핑은 정적인 목업만을 제시할 때 발생할 수 있는 의사소통 오류를 줄여 팀의 속도를 빠르게 합니다.

프로토타입을 검토하는 것은 팀이 더 정보에 기반한 전략적인 결정을 내리는 데 도움이 되며, 진행 중인 상황에 맞춰 조정할 수 있어 추측이나 가정을 하지 않게 됩니다.

2. 프로토타이핑은 디자인 리서치를 가속화한다.

프로토타입을 활용한 사용자 테스트는 각 테스트를 거칠수록 사용성 향상에 큰 도움이 됩니다.

프로토타입을 사용하면 팀은 구현 후 A/B 실험에 의존할 필요가 없습니다. 이는 특히 하이테크 기업에서 흔히 사용되는 방식으로, 몇 가지 옵션을 구현한 후 A/B 테스트를 통해 어떤 제품이 가장 적합한지 판단하는 방식입니다.

하지만 A나 B가 문제에 대한 올바른 해결책이 아닐 때도 있습니다. 그렇기 때문에 “shifting left”가 중요한데, 이는 실패할 수밖에 없는 제품에 개발 시간을 낭비하지 않도록 도와주기 때문입니다.

3. 프로토타이핑은 프로덕트 품질을 향상시킨다.

디자인과 의사결정 과정을 엔지니어가 아닌 디자이너에게 맡기면, 제품 품질이 향상됩니다.

그렇다면 왜 디자이너들이 품질 향상에 도움이 된다고 알고 있으면서도 디자인 프로세스에 프로토타이핑을 많이 포함하지 않을까요?

Meta가 ProtoPie를 도입한 방법

ProtoPie 이전의 Meta의 프로토타이핑 절차

Meta의 내부 조사에 따르면, Meta 내 디자이너들 중 매우 적은 비율만이 프로토타이핑 도구를 워크플로우의 일환으로 사용하고 있었습니다.

그 이유는 중간 복잡도의 프로토타입을 만들어야 했던 Meta 디자이너들이 중요한 도구 간의 격차에 의해 큰 불편을 겪었기 때문입니다.

Meta에서는 Figma, Origami, Framer와 같은 프로토타이핑 도구를 사용했고 디자이너들이 느낀 문제점은 다음과 같습니다:

• Figma는 간단한 프로토타이핑에는 훌륭하지만, 그 기능에는 한계가 있고 Meta 외부에서 프로토타입을 사용하거나 참가자를 통해 유저 테스트할 때 보안 위험이 있으며 온보딩에 어려움이 있었습니다.

• Framer와 Origami Studio는 Meta에서 자체 개발한 도구로, 복잡한 프로토타이핑에는 뛰어나지만, 사용법을 배우는 데 어려움이 있어 많은 디자이너들이 프로토타이핑을 꺼리게 되었습니다.

Meta에서는 경험상, 반복적인 프로토타이핑과 연구를 제품 사이클에 통합하지 않은 팀은 낮은 품질의 경험을 만들어낸다는 것을 알고 있습니다.

Jon은 이 도구 격차가 그들이 해결해야 할 중요한 문제라는 것을 깨달았습니다. 그는 두 가지 주요 목표를 설정했습니다:

1. Figma와 Origami 사이의 중간 복잡도의 프로토타입 격차를 메우기.

2. Meta에서 안전하고 반복적인 디자인 연구를 지원할 수 있는 실용적인 프로토타이핑 도구를 찾기.
   
   
   

13개의 도구와 기능 평가를 통해 ProtoPie가 가장 일반적인 제품 디자이너와 UX 연구원의 니즈에 가장 부합하는 도구로 선택되었습니다.

Meta의 디자이너들을 ProtoPie에 온보딩하기

새로운 소프트웨어를 Meta와 같은 대기업의 직원들에게 온보딩하는 데에는 SSO 구현, 홍보를 위한 프레젠테이션 작성, 디자이너 교육 자료 제공, 문제 해결 등과 같은 많은 노력이 필요합니다. 

이전에 ProtoPie를 사용한 경험이 있는 Meta 디자이너는 많지 않았으나 Jon은 온보딩 과정에서 일부 사람들이 빠르게 배워서 다른 사람들이 속도를 맞출 수 있도록 도와주는 모습을 보았습니다.

UX 연구자들은 완전히 다른 유저 그룹으로 그들은 연구자와는 별도로 작업을 진행했습니다. 이 과정에서 연구자들에게 다음을 안내해야 했습니다:

• 클라우드 계정을 어떻게 탐색하는 방법

• 프로토타입을 안전하게 설정하는 방법

• 연구 세션 종료 후, 테스트 참가자가 프로토타입에 접근하지 못하도록 하는 방법

Meta의 디자이너들이 ProtoPie를 사용하는 5가지 이유

Jon은 ProtoPie가 Figma의 기능을 넘어  Origami Studio나 Framer와 같은 도구에서는 이해하기 어려운 실제 애니메이션 상호작용과 전환 효과를 프로토타입하려는 사람들에게 훌륭한 도구라고 말합니다. 

또한 그는 ProtoPie가 모바일 앱 경험을 프로토타이핑하는 데 이상적이라고 말합니다. 디자이너들이 사용하는 또 하나의 뛰어난 기능은 ProtoPie Connect로, Reality Labs에서 Oculus 헤드셋, 스마트워치, 기타 IoT 장치와 같은 외부 하드웨어를 사용하여 프로토타이핑할 때 유용하게 사용하고 있습니다.

1. ProtoPie는 중저의 학습곡선을 가지고 있다

ProtoPie의 개념은 이해하기 쉽고, 이를 익히는 데 도움이 되는 무료 및 유료 교육 자료가 많습니다. 이 점이 Jon이 ProtoPie를 선택하는 데 중요한 요소였습니다.

그의 팀은 디자이너들이 상대적으로 빠르게 배울 수 있고, 사용하는 데 흥미를 느낄 수 있는 디자인 도구를 찾고 있었습니다. 만약 모든 기능을 갖추고 있지만 디자이너들이 접근하기 어려운 도구였다면, 결국 낮은 도입율로 도구 격차의 문제는 해결되지 않았을 것입니다.

2. ProtoPie는 노코드, 변형 없는(no-variant) 프로토타이핑 도구이다

Meta의 조사에 따르면, 코딩는 디자이너들이 도구를 선택하는 데 있어 중요한 요소입니다. 예를 들어, Framer와 같은 도구는 고도화된 코딩 작업이 필요해서 복잡한 또는 중간 수준의 작업을 할 때 사용하기가 어렵습니다.

ProtoPie는 Figma와의 통합이 필수적이었는데, Jon은 디자이너들이 처음부터 끝까지 모든 것을 하지 않아도 되는 변형 없는 프로토타이핑 도구를 원했다고 말합니다. 그의 말에 따르면, 많은 화면을 디자인하지 않고도 더 많은 일을 끝낼 수 있었다고 합니다.

“그냥 프로토타입으로 가는 지름길 같은 거죠,” Jon이 말했습니다.

3. ProtoPie는 안전하고 확장 가능한 원격 연구 기능을 제공합니다.

Meta 외부의 테스트 참가자들과 안전하게 프로토타입을 공유하고 웹 브라우저를 통해 접근할 수 있는 기능은 또 다른 중요한 요소였습니다.

네이티브 Android와 iOS 미리보기 앱도 훌륭하지만, 테스트 참가자들이 앱을 많이 다운로드하는 것을 원하지 않기 때문에 웹 브라우저는 현재 원격 연구 환경에서 필수적입니다.

참가자들은 웹사이트에 접속하여 프로토타입을 바로 확인하고 싶어 하므로, Meta의 UX 연구자들이 ProtoPie를 통해 테스트 세션을 진행하는 것이 훨씬 간편해졌습니다.

4. ProtoPie는 유연하고 관대하며 사용성이 뛰어납니다.

Jon은 “ProtoPie는 상대적으로 쉽게 도입할 수 있는 강력한 상호작용 디자인 도구의 완벽한 균형을 찾았습니다.”라고 말했습니다.

변수, 조건, 커스텀 컴포넌트와 같은 기능을 통해 디자이너들은 Figma에서 할 수 있는 것 이상으로 현실적인 프로토타입을 만들 수 있습니다.

ProtoPie는 Origami Studio와 Framer만큼 강력하지만, 모던한 인터페이스는 많은 익숙한 디자인 패턴을 따르고 있어, 디자이너들에게 더 직관적인 경험을 제공합니다.

이 네 가지 이유 외에도, Meta 팀이 ProtoPie를 선택할 때 중요하게 고려한 다른 요소들은 다음과 같습니다:

• 디바이스의 카메라, 센서, 음성 UI에 접근

• XFNs와 클라우드 계정을 통해 공유 및 협업

• 실제 키보드와 멀티터치 제스처

• 다양한 디바이스에서 실시간 상호작용

5. ProtoPie는 VR 팀의 워크플로우에 적합합니다.

ProtoPie는 Oculus 헤드셋과 핸드 컨트롤러 작업을 하는 VR 팀의 워크플로우에도 잘 맞습니다.

VR 팀의 디자이너들은 헤드셋 안에서 테스트할 수 있는 2D 경험을 프로토타이핑하는 방법을 탐구하고 있습니다. 또한 현재 ProtoPie와 협력하여 그들의 헤드셋을 더 몰입감 있게 만드는 기능을 개발 중입니다.

이 비디오의 18:00에 나온 프로토타입에서 디자이너는 변수, 수식, 그리고 다른 정교한 상호작용을 사용하여 모든 것을 구현했습니다.

디자이너는 며칠 만에 ProtoPie를 배우고 주말이 끝날 무렵에는 꽤 고급 프로토타입을 만들 수 있었습니다.. Jon은 이를 ProtoPie의 배우기 쉬운 특성을 증명하는 사례로 언급하며, ProtoPie가 팀의 주요 도구가 될 수 있는 큰 기회로 부각되었다고 말합니다.

“ProtoPie를 사용함으로써 엔지니어 없이도 프로토타이핑을 할 수 있게 되어 팀의 생산 속도가 증가했습니다. 현재 시장에서 ProtoPie는 디자이너를 위한 프로토타이핑 도구로서 완벽한 균형을 찾았기 때문에 미래가 밝습니다. Figma로는 해결할 수 없는 부분을 ProtoPie가 채우고 있습니다.” 라고 Jon은 말했습니다. 

ProtoPie가 Meta의 주요 프로토타이핑 도구가 된 과정

새로운 도구를 배우는 것은 대부분에게 도전이 될 수 있으며, 특히 Meta와 같은 빠르게 변화하는 개발 환경에서는 더 그렇습니다.

하지만 Jon에 따르면, 초기 참여 후기는 압도적으로 긍정적이며, 그들은 이전에는 전혀 생각하지 못했던 결과들을 보고 있습니다:

• 프로토타입이 검토와 연구 단계에서 사용되고 있으며, Jon은 이 일이 그렇게 빨리 일어날 줄 몰랐다고 말합니다. 디자이너들도 새로운 도구를 배우고 있고, 그들이 빠르게 사용하며 아이디어 리뷰와 연구 세션에서 활용하는 모습을 보는 것은 정말 중요한 일이었고, 많은 긍정적인 인상을 주었습니다.
  
  

• 디자이너들이 스스로 ProtoPie를 지지하고 전파하고 있습니다. Jon은 파일럿 프로그램에서 알지 못했던 디자이너들이 ProtoPie를 사용하면서 니즈를 충족시킨다는 사실을 발견했습니다. Meta는 규모가 크기 때문에 모든 팀에서 무슨 일이 일어나고 있는지 항상 알 수는 없기 때문에, ProtoPie가 초기 파일럿 프로그램을 넘어 자연스럽게 퍼지고 있다는 사실을 알게 된 것은 매우 만족스러웠습니다.
  
  

Meta와 15,000개 이상의 회사가 ProtoPie로 고충실도 프로토타이핑을 사용하고 있습니다. ProtoPie를 도입하고 디자인 프로세스에 프로토타이핑을 포함시켜 보세요. 

무료로 시작하기👉