최근 웨비나에서 디자이너 Yushi Xiang은 ProtoPie를 디자인 워크플로에 통합해 효율성을 높이고 강력한 인터랙티브 프로토타입을 만드는 방법에 대한 유용한 인사이트를 공유했습니다. 다음은 ProtoPie를 개념에서 완성까지 활용하고, 더 스마트한 프로토타입을 만들며, 하드웨어와 통합하는 방법에 대한 핵심 내용을 정리한 것입니다.
1부: 디자인 워크플로에서의 ProtoPie
ProtoPie는 단순히 고정밀 목업을 만드는 도구가 아닙니다. 시작부터 끝까지 전체 디자인 프로세스를 지원할 수 있습니다.
디자인 전: 개념 검증 💡
디자인을 시작하기도 전에 ProtoPie를 사용해 저정밀 또는 준고정밀 모델을 만들어 개념이 실현 가능한지 테스트해 보세요. 이 빠른 검증 단계는 아이디어가 실현 가능하지 않을 경우 상당한 시간과 자원을 절약해 줍니다.
디자인 중: 고정밀 목업 ✨
개념이 확인되면 정적인 디자인을 고정밀 프로토타입으로 전환하세요. 이렇게 하면 동료들과 디자인을 쉽게 공유하고, 전체적인 상호작용 로직과 미학을 파악할 수 있습니다. 또한 이해관계자에게 디자인을 제시해 빠르게 승인을 받는 데 중요한 도구가 됩니다.
디자인 후: 사용성 테스트 🔬
최종적으로 다듬어진 고정밀 모델을 만들어 사용성 테스트를 진행하세요. 이를 통해 새 기능에 대한 사용자 피드백을 얻고, 개발되기 전에 솔루션을 개선하는 데 활용할 수 있습니다. 이러한 테스트를 진행할 때는 새 디자인이 직관적이고 효과적인지 확인하기 위해 일관성, 경험의 연속성, 사용성과 같은 핵심 지표에 집중하세요.
2부: 표준화되고 효율적인 프로토타입 만들기
더 빠르게 프로토타입을 만들고 일관성을 유지하기 위해 Yushi는 컴포넌트를 구축할 때 표준화된 접근 방식을 권장합니다.
프로토타이핑 전 준비
새 프로토타입을 시작하기 전에 다음 세 단계를 수행하면 생산성을 최소 30% 향상시킬 수 있습니다.
표준화된 레이어 명명: ProtoPie에서 상호작용을 만들 때 쉽게 찾을 수 있도록 레이어에 명확하고 정확한 이름을 사용하세요.
재사용 가능한 요소 정리 및 내보내기: 레이어를 정리하고 아이콘처럼 자주 사용하는 요소는 미리 이미지로 내보내세요. Figma의 Auto Layout을 사용한다면 파일을 가져온 후 ProtoPie 작업 공간을 더 쉽게 탐색할 수 있도록 컨테이너 레이어를 정리하는 것을 잊지 마세요.
사용 빈도가 높은 컴포넌트 식별: 자주 사용하는 컴포넌트를 찾아 나중에 원자 컴포넌트로 캡슐화할 수 있도록 하세요. 이렇게 하면 디자인 일관성을 보장하고, 효율성을 높이며, 다른 사람들과의 협업도 더 쉬워집니다.
컴포넌트 캡슐화
캡슐화를 사용하면 재사용 가능한 컴포넌트를 만들 수 있어 반복 작업을 줄이고 일관된 디자인 시스템을 유지할 수 있습니다.
원자 컴포넌트: 단방향 슬라이더 같은 원자 컴포넌트를 먼저 캡슐화하세요. 상호작용 동작, 애니메이션, 그리고 출력할 값을 정의합니다. 또한 쉽게 재사용할 수 있도록 컴포넌트에 조정 가능한 변수를 추가할 수 있습니다.
컴포넌트 인스턴스: 원자 컴포넌트를 만든 후 2차 캡슐화를 통해 이를 컴포넌트 인스턴스로 만들 수 있습니다. 이는 필터 카드 세트처럼 유사한 컴포넌트 그룹에 특히 유용합니다. 각 인스턴스에 고유 ID를 부여하면 하나를 선택했을 때 다른 항목이 자동으로 선택 해제되도록 할 수 있습니다.
그룹 캡슐화: 이후 여러 컴포넌트 인스턴스를 기능 그룹으로 캡슐화할 수 있습니다. 이렇게 하면 메인 ProtoPie 씬이 단순해지고 향후 유지보수도 훨씬 쉬워집니다. 예를 들어 새 필터를 추가해야 한다면 해당 그룹에 추가하기만 하면 됩니다.
이 컴포넌트들이 작동하도록 하려면 Send와 Receive 기능을 사용해야 합니다. 이를 통해 컴포넌트에서 값을 밖으로 보내고, 메인 씬에서 인터랙티브한 로직을 만드는 데 활용할 수 있습니다.
3부: 변수와 하드웨어 통합 사용하기
Yushi는 원격으로 제어하는 배드민턴 점수판을 만들어 ProtoPie의 변수와 하드웨어 통합의 강력함을 보여주었습니다.
변수: score_green과 score_blue 같은 변수를 사용해 점수를 추적하세요. 위로 스와이프 같은 간단한 제스처를 점수에 1을 더하도록 설정할 수 있습니다.
나머지 표현식: 점수가 홀수인지 짝수인지 확인하려면 % 2 표현식을 사용하세요. 점수를 2로 나눴을 때 나머지가 1이면 홀수, 0이면 짝수입니다. 이를 통해 점수에 따라 화면에서 플레이어 위치를 자동으로 변경할 수 있습니다.
조건: 게임의 승자를 결정하는 조건을 정의하세요. 예를 들어, 한 플레이어의 점수가 21점을 초과하고 상대보다 2점 이상 앞서 있을 때 승리하도록 조건을 설정할 수 있습니다.
하드웨어 통합: 점수판을 더 실용적으로 만들기 위해 AssistiveTouch 기능을 사용해 휴대폰에 블루투스 버튼을 연결할 수 있습니다. 그런 다음 버튼에 단일 클릭 같은 사용자 정의 동작을 지정해, 휴대폰에서 수동으로 스와이프하지 않고도 점수를 올릴 수 있습니다.
이 혁신적인 접근 방식은 코드를 한 줄도 작성하지 않고도 ProtoPie로 실물에 가까운 실제 제품을 만들 수 있음을 보여줍니다.
디자인 프로세스를 혁신할 준비가 되셨나요?
Yushi Xiang의 전체 발표를 통해 인터랙티브 프로토타이핑이 팀의 워크플로를 어떻게 혁신할 수 있는지 알아보세요. 지금 바로 실행하세요!
이미 프로토타이핑을 사용해 더 나은 제품을 더 빠르게 만드는 수백 개의 디자인 팀에 합류하세요.
