개요
시작하기
파이를 만드는 과정에 들어가기 전에, 준비해 둔 모든 필요한 디자인 자산에 접근했는지 확인해 주세요:
ProtoPie 빠른 시작 가이드를 여세요.
안내가 포함된 시작 파이 파일에 접근하세요.
파일 링크를 클릭하고 ProtoPie Studio에서 여세요.
스크롤 인터랙션 만들기
가장 기본인 스크롤 인터랙션부터 시작해 봅시다. 프로토타이핑 여정 내내 현실감과 깊이를 더하기 위해 자주 사용하게 될 것입니다.
단계:
스크롤하려는 그룹 레이어를 선택하세요.
Container를 클릭하고 Scroll을 선택하세요.
Direction(세로 또는 가로)을 설정하세요.
빠른 팁: 더 자연스러운 인터랙션을 위해 스크롤 컨테이너 안에 콘텐츠를 그룹화하세요.
트리거와 반응 익히기
다음으로, 사용자 입력(트리거)을 시각적 동작(반응)과 연결해 봅시다.
예시: 커피 사이즈 선택기 (Curto, Medium, Venti)
Curto 카드를 선택하세요.
Tap 트리거를 추가하세요.
Border 반응을 추가하고 Curto 테두리 불투명도를 100으로 설정하세요.
Medium과 Venti 테두리를 0으로 설정하는 Border 반응을 두 개 더 추가하세요.
이 과정을 Medium과 Venti에 대해 반복하세요.
팁: 테두리 불투명도를 재설정하면 선택이 더 명확해집니다.
조건과 로직 사용하기
이제 조건과 로직을 사용해 토핑 선택 같은 토글 인터랙션을 효과적으로 추가해 봅시다.
예시: 휘핑크림 & 아이스 선택
Whipped Cream 카드를 선택하세요.
Tap 트리거를 추가하세요.
Condition을 추가하세요:
테두리 불투명도 = 0이면 100으로 설정합니다.
그렇지 않으면 불투명도를 0으로 설정합니다.
Ice에도 같은 로직을 반복하세요.
팁: 조건과 변수는 토글에 핵심입니다.
변수 설정 및 가격 계산
진정한 하이파이 프로토타입을 만들려면, 파이가 단순한 시각적 반응 이상의 것을 갖추길 원할 것입니다. 대부분의 프로토타입에는 2와 2를 맞춰 주는 로직이 필요합니다!
ProtoPie에서는 Variables와 Dynamic Calculations를 사용해 선택 항목을 쉽게 관리할 수 있습니다.
단계:
씬별 변수를 추가하세요: CURTO, MEDIUM, VENTI, WhippedCream, Ice, total_price.
변수 값을 확인하기 위해 디버그 모드를 활성화하세요.
변수 할당:
사이즈(CURTO, MEDIUM, VENTI): 선택된 항목은 1로, 나머지는 0으로 설정하세요.
토핑(Whipped Cream, Ice): 처음에는 변수를 1로 설정하고, 다시 선택되면 0으로 전환하세요.
총 가격 계산:
각 트리거 아래에 다음 수식을 할당하세요:
(CURTO * 4.59 + MEDIUM * 5.39 + VENTI * 6.79) + (WhippedCream * 3.06) + (Ice * 2.00)
total_price와 연결된 Text 반응을 추가하세요.
버튼 색상 강조(선택 사항):
total_price의 변화를 감지해 선택 항목을 강조하세요(예: 색상 #D8FF99).
팁: 디버그 컨트롤을 사용해 로직을 확인하세요.
특별 혜택
창의적인 프로토타입을 공유하고 ProtoPie Pro 플랜의 첫 달을 무료로 받으세요!
방법: 설문을 통해 제출하거나 소셜 미디어에서 해시태그 #SimplePie를 사용하세요!
