ProtoPie를 본격적으로 살펴보기 전에 ProtoPie, 먼저 Figma에 대해 간단히 이야기해 봅시다. 이 도구는 사용자 인터페이스를 설계하고, FigJam에서 아이디어를 브레인스토밍하고, Figma Slides로 프레젠테이션을 만들 때 대부분의 디자인 작업에 아주 유용합니다. 게다가 AI 통합 기능은 Figma의 활용성을 더욱 높여 줍니다.
하지만 Figma에는 한계가 있습니다. 강력한 UI3 인터페이스와 논리 기반 기능이 있어도 복잡한 인터랙션은 다루기 까다로울 수 있습니다. ProtoPie에서는 간단한 수식과 최소한의 설정만으로 처리할 수 있는 실시간 검증이나 다단계 로직 같은 작업이 Figma에서는 번거로워질 수 있습니다. 따라서 고정밀 인터랙션을 위해 전용 프로토타이핑 도구가 필요하다는 점을 보여 줍니다.
배우게 될 내용:
이 튜토리얼을 끝내면 아래와 같은 나만의 “Money Transfer App”을 처음부터 직접 만들 수 있습니다:
최종 프로토타입 미리보기
Figma의 프로토타이핑 한계
이제 Figma가 부족한 부분을 짚어 보겠습니다 — 적어도 지금은 그렇습니다.
실시간 검증 및 피드백의 한계
광범위한 변수 관리
기본 입력/키보드 인터랙션
단순한 출력에 비해 과도한 커스터마이징
예를 들어, 입력한 금액이 사용자의 계좌 잔액과 비교하여 검증되어야 하는 송금 앱을 만든다고 상상해 봅시다. 사용자는 0보다 큰 금액을 보내야 하며, 동시에 총 잔액보다 같거나 적어야 합니다. Figma에서는 이를 위해 수많은 변수가 필요합니다:
숫자 변수 3개(잔액과 금액용)
문자열 변수 2개(메시지용)
색상 변수 1개(오류 메시지용)
불리언 2개(메시지 표시/숨김용)
그 밖에 메시지 길이와 버튼 불투명도 같은 UI 요소를 제어하기 위한 추가 변수들
하나의 키보드 인터랙션을 위한 로컬 변수 표
하지만 Figma는 기본적으로 여러 자리 숫자 입력 필드나 키보드 인터랙션을 지원하지 않는다는 점을 알아두세요. 숫자와 문자열은 사용할 수 있지만, 한 자리 숫자를 넘어가는 값을 입력할 수는 없습니다. 따라서 아래처럼 복잡한 인터랙션을 갖춘 매우 커스텀한 키보드를 처음부터 만들어야 합니다:
*Figma의 커스텀 키보드 인터랙션 *
이제 각 키마다 이런 복잡한 검증 세트를 상상해 보세요. 실제 키보드에서 동작하게 하려면 그 수를 두 배로 늘려야 합니다.
몇 가지 우회 방법과 많은 커스터마이징을 사용해도, 아래 출력에서 보듯이 오류 메시지를 띄우기 위해 입력할 수 있는 한 자리 최대값인 9*.*를 기준으로, 8이라는 커스텀 잔액을 사용해 수식을 여전히 조정해야 했습니다.
Figma의 여러 자리 입력 한계
Figma에서는 방대한 설정(많은 변수와 커스텀 입력)이 필요한 작업도 ProtoPie에서는 **하나의 수식과 두 개의 **변수만으로 처리할 수 있어, 과정이 훨씬 빠르고 직관적입니다.
**Figma 파일 체험하기 **여기.
고급 프로토타이핑을 위한 ProtoPie
ProtoPie는 동적이고 멀티모달한 인터랙션을 위한 #1 고급 프로토타이핑 도구입니다. 이 도구는 매우 뛰어나며 디자이너가 실제 인터랙션 디자인을 할 수 있게 해 줍니다. 이미지, 비디오, 음악, Lottie 애니메이션을 JSON 파일로 쉽게 추가할 수 있고, Figma, Adobe XD, Sketch 같은 도구에서 UI 에셋을 매끄럽게 가져올 수 있습니다. Framer나 Proto.io 같은 다른 고정밀 프로토타이핑 도구와 달리, 거의 코딩 기술이 필요 없다는 점이 가장 큰 장점입니다.
ProtoPie Studio의 UI 소개:
ProtoPie Studio 인터페이스
Scenes: 각 scene은 프레임, 아트보드 또는 화면과 같습니다. 한 번에 하나의 scene만 미리 볼 수 있어, 복잡한 인터랙션을 만들 때 한 화면에 집중할 수 있습니다.
Layers Panel: Figma의 레이어 패널처럼 왼쪽 끝에 위치하며, 활성 scene 안의 모든 레이어를 계층 구조에 따라 정리해 한눈에 보여 줍니다.
Variables Panel: Figma에서 고급 프로토타이핑을 거의 사용해 보지 않았다면 Variables panel이 새롭게 느껴질 수 있지만, 사실상 비슷합니다. 로컬 변수나 일반 변수를 추가할 수 있으며, 각각 문자열, 숫자 또는 색상으로 지정할 수 있습니다.
Scene Preview/Canvas: 중앙에는 활성 scene의 Scene preview가 표시됩니다. 여기서 프레임 크기, 픽셀 밀도, 기기 방향, 시스템 상태 표시줄 같은 특정 UI 요소도 커스터마이징할 수 있습니다.
Interactions Panel: 오른쪽에는 Interactions panel,이 있으며, 객체에 연결된 트리거(탭, 클릭, 스와이프)를 만들 수 있습니다. 이 트리거는 position, scale, color, playback 변경 같은 동작을 실행합니다. 여기서 인터랙션 타임라인도 미리 보고 조정할 수 있습니다.
Properties Panel: 가장 오른쪽에 위치합니다. 너비, 높이, 위치, 색상, 텍스트 스타일, 애니메이션 사양 같은 인터랙션 속성을 커스터마이징하세요.
Preview Window: Preview 창을 사용해 인터랙션이 실제로 어떻게 동작하는지 확인하고, 프로토타입을 공유하기 전에 오류를 찾아낼 수 있습니다.
Device: 모바일이나 태블릿에서 ProtoPie Player 앱을 사용해 프로토타입을 직접 테스트하세요.
Cloud: 프로토타입을 ProtoPie Cloud에 업로드하고 Pie 링크를 팀 및 이해관계자와 공유하세요.
Handoff: Handoff 버튼을 사용해 인터랙션 녹화본을 만들고 사용자 흐름, 요소 동작, 전반적인 인터랙션 통합을 프로토타입 안에서 보여 줄 수 있습니다.
ProtoPie는 Component Libraries, Variables, Conditions, Developer Handoff 같은 고급 기능도 제공합니다. 전체 잠재력을 더 깊이 살펴보려면 ProtoPie School Courses를 확인해 보세요.
ProtoPie 시작하기
ProtoPie는 복잡한 인터랙션과 검증을 통해 Figma의 한계를 뛰어넘습니다. 이번에는 ProtoPie로 Money Transfer App을 다시 만들어 봅시다.
1단계: 파일 설정. Figma에서 프레임 가져오기
첫 번째 단계는 Figma 파일을 ProtoPie로 가져오는 것입니다. Figma에서 ProtoPie 플러그인을 실행하세요.
ProtoPie 플러그인을 사용해 Figma 디자인 파일을 ProtoPie로 가져오기
필요한 Figma 프레임을 선택하고 Export 버튼을 누르세요. 잠시 기다리면 ProtoPie가 알아서 처리합니다. 모든 디자인 요소가 로드되면 ProtoPie로 자동 이동됩니다.
프레임 선택 후 내보내기
해당 프레임은 ProtoPie에서 Scene으로 표시됩니다. 필요하면 레이어를 다시 정렬하고, 사용자 지정 Status Bar와 Device를 설정하세요(저는 iPhone 15 Pro 화면 비율을 사용하고 있습니다).
아래는 최종 설정입니다. 이제 Figma의 고급 프로토타이핑 한계를 넘어설 준비가 되었습니다. 계속해서 프로처럼 실제 인터랙션 디자인을 만들어 봅시다.
ProtoPie의 최종 설정
2단계: 기본 입력 및 키보드 인터랙션 설정하기
이제 실제 입력과 키보드 인터랙션을 추가해 봅시다. 새 입력 레이어를 만드세요. 이제 기본 키보드를 사용해 레이어 안에 직접 입력을 추가할 수 있습니다.
입력 도구 추가
크기와 더불어 플레이스홀더 텍스트, 비어 있을 때와 입력된 상태 모두의 글꼴 스타일 같은 속성을 정의하세요. 그런 다음 입력을 탭했을 때 표시할 키보드를 설정합니다. 이 경우에는 숫자 키보드를 표시하겠습니다.
입력 도구 속성 패널
ProtoPie에서 입력 필드를 원하는 스타일로 설정한 뒤, Figma에서 가져온 원래의 플레이스홀더 텍스트/입력 필드는 제거하세요. 레이어 패널에서 최종 위치를 다시 정렬하고, 사용자 지정 키보드를 만들지 않고도 자유롭게 조정할 수 있는 Live Preview로 실시간 입력을 테스트하세요. 입력 이름은 “MoneyTransfer”처럼 적절하게 지정합니다.
관련 상위 레이어 아래에 입력 레이어 추가
이제 수식을 동작하게 하려면 변수 패널에서 **두 개의 변수 **를 만들어야 합니다:
Balance: 숫자형이어야 하며, 입력한 금액을 빼기 위해 고정값(예: 20,000)을 가져야 합니다.
Amount: 역시 숫자형이지만 고정값 대신 “MoneyTransfer” 필드의 실시간 입력을 가져옵니다. “Use formula” 체크박스를 선택한 다음 아래 수식을 추가해 활성화합니다.
“Balance” 변수 만들기
“Amount” 변수 만들기
Variables panel에서 각 변수 옆의 벌레 아이콘을 클릭해 Debug mode를 켜면, 실시간 업데이트가 초록색 배지로 표시됩니다. 필요에 따라 위치를 조정한 뒤 Preview window를 사용해 입력할 때 “amount” 변수가 값을 실시간으로 가져오는지 확인하세요.
3단계: Conditions, variables, and Formulas로 오류 메시지 만들기
다음 단계는 메시지를 출력하는 것입니다. 아래 세 가지 상황에 따라 서로 다른 3개의 메시지를 표시할 수 있습니다:
기본 상태. Balance 변수 = 20,000일 때
잔액 부족 오류 메시지. amount 변수 > balance 변수일 때.
최종 잔액 도움말 메시지. 0 > amount 변수 < balance 변수일 때
초기 검증을 위해 먼저 Start Trigger를 추가합니다. 이렇게 하면 이 특정 scene이 로드될 때 인터랙션을 활성화할 수 있습니다. 트리거에 조건을 추가해 잔액이 20,000일 때 이 인터랙션이 활성화되도록 설정하세요.
Trigger 추가>Start
Start trigger에 조건 추가
Start trigger의 조건 속성 정의하기
이제 “Balance:” 텍스트 객체의 이름을 “Dynamic message”로 바꿔 봅시다. 먼저 “Balance:” 텍스트 객체를 선택하고 편집 가능하게 만들기를 누르세요.
💡참고: Figma에서 프레임을 가져오면 ProtoPie는 기본적으로 모든 텍스트를 이미지로 바꿉니다.
텍스트 객체를 편집 가능하게 만들기
이름을 “Dynamic message”로 바꾸세요. 조건에 따라 달라지는 동적 오류 메시지로 이 텍스트 객체를 매번 변경할 것입니다.
“Balance Text:”를 “Dynamic Message:”로 이름 변경
다시 Start Trigger로 돌아가 Text response를 추가하세요. “Dynamic message” 객체를 선택합니다.
scene이 기본 상태로 열리도록 하기 위해, 동적 메시지 객체를 잔액 변수 값으로 대체할 것입니다.
수식 옵션 아래에 “balance” 변수의 정확한 이름을 입력하세요
Preview window에서 프로토타입을 실행해 보고, 모든 설정이 올바르면 “Dynamic message” 텍스트 값이 “20000”으로 바뀝니다.
이제 3가지 시나리오에 따라 사용자 지정 메시지를 표시하는 두 번째 검증으로 넘어가겠습니다. 새 “Detect” Trigger를 추가하는 것부터 시작하세요.
“amount” 변수를 선택합니다. 그러면 프로토타입이 특정 조건을 만족할 때마다 “amount” 변수 값을 확인할 수 있습니다. 다음으로 각 시나리오에 대해 서로 다른 3개의 조건을 추가합니다.
“Detect” triggers에서는 레이어 속성이나 변수가 변경될 때 응답이 활성화됩니다.
시나리오 1: balance = 20000 또는 amount = 0일 때
첫 번째 조건은 Start trigger 조건 및 text response와 동일합니다. 이렇게 하면 사용자가 “Money Transfer” 입력 탭에 잘못된 값을 입력했을 때 잔액이 초기값, 즉 20000으로 다시 설정됩니다.
balance가 20000일 때 detect trigger 사용자 지정
시나리오 2: amount 변수가 > balance 변수일 때
이 경우 앱은 오류 메시지를 표시해야 합니다. amount > balance 조건을 또 하나 설정하세요.
조건 설정: Amount > Balance
“Dynamic message” 객체가 있는 text response를 선택하고, “안에” 오류 메시지를 입력해 문자열 수식을 추가합니다.
Amount > Balance일 때 오류 응답 추가
20,000보다 큰 금액을 입력해 프로토타입을 테스트하세요. 다시 0으로 돌아가 첫 번째 검증이 제대로 실행되는지, 그리고 Dynamic message 텍스트 객체가 다시 20000으로 돌아가는지 확인합니다.
2가지 검증이 적용된 라이브 미리보기
시나리오 3: 0 >amount< 20000일 때
이전 시나리오의 조건 설정을 복제하고, amount < balance 및 amount > 0의 2가지 조건을 추가할 수 있습니다.
플러스 아이콘을 사용해 여러 조건 추가하기
이번 메시지는 송금 후 남은 잔액이 됩니다. 또 다른 Text response를 추가하고 아래와 같이 수식을 설정합니다:
프로토타입을 실행해 보세요. Figma의 한 자리 숫자 및 최대 9 제한을 우회하면서, 단 하나의 간단한 수식과 2개의 변수만으로 Dynamic message 텍스트 객체에서 3가지 맞춤 메시지가 표시되는 것을 확인할 수 있습니다.
Figma vs ProtoPie
고급 인터랙션 & 애니메이션 만들기
지금까지 기본 로직을 설정했으니, 이제 고급 문자열 수식, 데이터 기반 동적 커스터마이징, 그리고 말랑말랑한 애니메이션 유니콘으로 인터랙션을 강화할 차례입니다.
먼저 고급 문자열 수식과 조건을 사용해 도움말과 오류 메시지를 커스터마이징해 보겠습니다. 그런 다음 ProtoPie의 커스터마이징 유연성을 살펴보고, 마지막에는 Lottie용 프로덕션 수준 JSON 파일을 사용해 같은 로직으로 커스텀 애니메이션 유니콘을 통합해 보겠습니다.
1단계: 수식, 조건, & 서식을 사용한 고급 인터랙션 만들기
이제 Dynamic message 텍스트 객체에 3가지 서로 다른 메시지를 출력하도록 서식을 지정해 봅시다. Detect Trigger의 3가지 조건 이벤트 중 하나를 만날 때마다 고유한 메시지를 출력하기 위해 사용자 지정 수식을 사용할 것입니다.
시나리오 1: 기본 상태 또는 amount = 0일 때
첫 번째 메시지에 서식을 조금 더해 봅시다.
쉼표(,)와 소수점(.)을 추가합니다. 이 서식을 적용하려면 아래 수식으로 잔액 변수를 감싸야 합니다:
그것을 Start Trigger와 Detect Trigger의 첫 번째 조건 이벤트에 복사해 붙여넣습니다. 다음과 비슷하게 보일 것입니다.
금액 앞에 “Balance”와 “$”를 출력하는 일반 텍스트 문자열을 추가합니다.
Start와 Detect Triggers 모두에서 수식을 업데이트하고 프로토타입을 실행하세요. 올바르게 했다면 프로토타입이 실행될 때마다 Dynamic message가 “Balance: $20,000.00”을 출력합니다.
기본 상태 또는 amount가 0일 때의 라이브 미리보기
시나리오 2: 잔액 부족 오류 메시지.
일반적인 오류 메시지를 지우고, Detect Trigger의 두 번째 조건 응답에 서식이 지정된 balance 변수를 설정합니다.
사용자의 현재 잔액 뒤에 오류 메시지가 이어지도록 일반 텍스트 문자열을 추가합니다.
ProtoPie가 색상을 자동으로 추가하는 것을 보면, 수식에서 어떤 부분이 문자열, 숫자, 연산자인지 구분하기 쉽습니다.
오류 메시지를 다시 업데이트하고 프로토타입을 실행하세요.
시나리오 3: 최종 잔액 도움말 메시지.
기본 서식은 주요 뺄셈 연산을 감싸게 됩니다. 이를 Detect Trigger의 세 번째 조건 이벤트에 복사해 붙여넣으세요.
아래 연산이 거래 완료 후의 잔액임을 알려 주는 설명을 위해 첫 번째 문자열을 추가합니다. 사용자 지정 메시지를 따옴표로 감싸고 덧셈(+) 연산자를 설정하세요.
수식을 업데이트하고 프로토타입을 실행하세요. 이제 금액을 입력할 때마다 Detect Trigger가 거래 완료 후 계좌에 남은 금액을 보여 주는 메시지를 출력합니다.
최종 미리보기: 남은 잔액 표시
2단계: 피드백과 오류 메시지 커스터마이징하기
이제 오류 메시지를 커스터마이징하고 버튼의 활성화/비활성화 인터랙션을 만들어 보겠습니다.
오류 메시지의 텍스트 색상 커스터마이징
Detect Trigger의 2nd condition에 Color event를 추가합니다. Dynamic message 텍스트 객체를 선택하고 채우기 색상을 #FF0000으로 설정하세요. 프로토타입을 실행하면 오류 조건에 도달할 때 색상은 빨간색으로 바뀌지만, 다시 분홍색으로 돌아오지는 않습니다.
💡참고**: 트리거 패널에서 detect condition을 어떻게 배치했는지에 따라 순서가 달라질 수 있습니다
원래 색상으로 돌아오도록 1st and 3rd conditions에 또 다른 Color event를 설정하세요. 이번에는 채우기 색상을 #F46ADE로 지정합니다.
💡참고**: 트리거 패널에서 detect condition을 어떻게 배치했는지에 따라 순서가 달라질 수 있습니다
라이브 프로토타입을 실행하고 2번째 “error” 조건에 도달할 때 Dynamic message가 빨간색으로 바뀌는 것을 확인하세요. 또한 1번째와 3번째 조건을 만족할 때는 다시 분홍색으로 돌아갑니다.
라이브 미리보기: 사용자 지정 오류 메시지
“Submit” 버튼 커스터마이징
활성화/비활성화 버튼 인터랙션은 같은 로직으로 투명도만 바꾸면 될 만큼 간단합니다. 하지만 그 전에 몇 가지를 조정해야 합니다.
MoneyTransfer input을 선택하고 Focus Trigger를 추가합니다. Focus In 옵션을 설정하고 Move response를 추가하세요.
Move response의 Button object를 선택하고 Move To Y:490으로 설정합니다. 이제 입력에 focus in하면 버튼이 위로 올라가지만, focus out해도 원래 위치로 돌아오지 않습니다.
버튼을 원래 위치로 되돌리려면 Focus Out을 선택한 또 다른 Focus Trigger를 추가하세요. Button 객체에 또 다른 Move event를 설정하고 Move To Y:783으로 지정합니다.
focus out할 때도 금액을 커스터마이징할 수 있습니다. 위의 Focus Trigger에 Focus out 상태용 Text event를 추가하세요. 이를 MoneyTransfer input 객체에 연결하고 내용을 Formula로 설정합니다. 아래 서식 수식을 추가해 쉼표(,)와 소수점(.)이 표시되도록 합니다.
마지막으로 활성화/비활성화 인터랙션을 추가하겠습니다. Detect Trigger에 Opacity events 3개만 추가하세요. 1번째와 3번째 조건에서는 Button 객체의 불투명도를 100%로 설정하고, 2번째 조건인 오류 상태에서는 40%로 설정합니다.
Preview window에서 실행하고 완성된 프로토타입을 즐겨 보세요… 사실 거의 완성입니다. 로직은 끝났습니다. 하지만 LottieFiles 마법으로 말랑말랑한 유니콘을 더해야 합니다 🦄🌈
최종 미리보기: 고급 커스터마이징
3단계: LottieFiles로 말랑말랑한 애니메이션 유니콘 추가하기
애니메이션에는 무료로 다운로드할 수 있는 아래 3개의 유니콘 Lottie 파일을 사용하겠습니다:
Free Surprised Unicorn Animation by Nico Del Real | LottieFiles
Free Unicorn Looking Up Animation by Nico Del Real | LottieFiles
이제 시작해 봅시다.
3개의 유니콘을 JSON 파일로 다운로드한 뒤 ProtoPie 파일 안으로 드래그 앤 드롭하세요.
크기를 42x42px로 조정하고 Layers panel 안의 unicorn group 안에 배치하세요. Figma에서 가져온 임시 GIF는 지웁니다. 이제 실제 JSON으로 작업할 것입니다.
유니콘 2와 3의 불투명도를 0%로 설정하세요. 다시 Start Trigger로 돌아가 play action이 포함된 Playback event를 추가해 첫 번째 Lottie가 움직이는 모습을 볼 수 있게 합니다. 애니메이션이 반복 재생되도록 looping 옵션을 체크하세요.
Detect Trigger를 복사해 붙여넣습니다. 새 것은 Unicorn animations로, 기존 것은 Print message***.***로 이름을 바꾸세요.
Unicorn animations Detect Trigger의 모든 응답을 지우세요. 이제 필요한 것은 amount 변수와 3 conditions를 가리키는 트리거뿐입니다.``````
각 condition에 3 Opacity events를 추가하세요. 각각 하나의 유니콘을 가리키게 합니다. 1st condition은 unicorn 1을 100%로, 나머지는 0%로 바꿉니다. 2nd condition은 unicorn 3을 100%로, 나머지는 0%로 바꿉니다. 3rd condition은 unicorn 2를 100%로, 나머지는 0%로 바꿉니다.
이제 마지막으로 Playback events 3개를 추가하세요. 각각은 unicorn animation Detect Trigger 안의 서로 다른 조건에 들어갑니다. 모두 반복 재생되게 설정합니다.
마지막으로 Variables panel로 가서 “balance”와 “amount” 변수의 debug mode를 끄세요. 이제 더 이상 필요하지 않습니다. 그리고 짠! 프로토타입이 완성되었습니다 🔥.
최종 프로토타입
이제 마지막으로 한 번 더 Preview를 눌러, 실시간 검증, 동적 오류 메시지, 고급 문자열 수식, 데이터 기반 커스터마이징, 그리고 말랑말랑한 애니메이션 유니콘까지 갖춘 완전한 기능의 프로토타입을 즐겨 보세요.
Live Preview : 최종 Pie
**최종 클릭 가능한 인터랙티브 프로토타입을 확인해 보세요 **여기
마무리!
축하합니다! 🦄 이제 기본 및 고급 프로토타이핑 기능을 갖춘 첫 번째 Pie를 만들었습니다. 이제 ProtoPie로 프로토타이핑 실력을 한 단계 끌어올렸고, 고급 문자열 수식, 동적 피드백, 그리고 JSON 기반 LottieFiles 애니메이션의 마법까지 익혔습니다. Figma의 기본 인터랙션을 넘어, 창의성과 실제 기능 사이의 간극을 메우는 고정밀 디자인에 딱 맞는 살아 있고 반응하는 프로토타입을 만들었습니다.
더 많은 애플리케이션 동작을 추가할 수 있는 팁과 요령을 살펴보거나, 같은 관심사를 가진 고정밀 프로토타이핑 선구자들과 연결되고 배우고 성장하기 위해 ProtoPie Community에 참여해 보세요.
