ProtoPie의 공식 출시 후 5개월 만에, ProtoPie는 37개국 디자이너들이 선호하는 프로토타이핑 도구가 되었습니다. 많은 사용자들이 Dribbble과 ProtoPie Community를 비롯한 여러 채널에 자신의 프로토타입을 공유했고, ProtoPie는 그중에서도 UI 감각이 뛰어나고 따라 하기 쉬운 20개의 프로토타입을 선정했습니다.
그렇다면, 이 글은 어떻게 활용할 수 있을까요?
관심 있는 프로토타입을 살펴보세요.
관심 있는 링크를 클릭해 직접 실행해 보세요.
소스 파일을 다운로드해 따라 해 보세요.
Dribbble이나 ProtoPie Community에 프로토타입을 뽐내 보세요.
다이어리
Lily 작성
이 프로토타입의 개념은 다이어리 앱이므로, 페이지를 넘기고 항목을 선택하는 인터랙션이 있습니다. 이 데모에는 반복되는 인터랙션이 많기 때문에, ProtoPie의 Scene Copy 기능을 사용하면 이 데모를 더 쉽게 구성할 수 있습니다.
다운로드
https://share.protopie.io/eLWb28tsH2c
키워드
페이지 전환, 3D 회전, 카드 UI, 당기기
안드로이드 잠금화면
Eddy 작성
안드로이드 휴대폰 상단에 숨겨진 배너를 휙 넘겨서 아래로 내릴 수 있고, 당겨서 다시 숨길 수 있습니다.
다운로드
https://share.protopie.io/HxL5WtXYbot
키워드
휙 넘기기, 당기기
결제
Claire 작성
이 프로토타입은 송금 개념을 보여 줍니다. 그리고 사람의 사진을 지정된 영역으로 드래그해 돈을 이체할 수 있습니다. 이 프로토타입은 조건과 범위를 사용하는 것이 얼마나 쉬운지 보여 줍니다.
다운로드
https://share.protopie.io/bwnShi3EPSv
키워드
조건, 범위, 3D 회전
카드 전환 #1
Seongwon Yun 작성
Seongwon Yun이 드래그로 카드의 순서를 왼쪽과 오른쪽으로 다시 정렬할 수 있도록 Reorder 기능을 적용한 이 프로토타입을 제출했습니다.
다운로드
https://share.protopie.io/bAgkuvhtvpD
키워드
재정렬, 드래그, 카드 UI
카드 전환 #2
Eddy 작성
카드를 클릭하면 내용을 스크롤할 수 있습니다. 한 카드의 맨 아래에 도달하면 다음 카드로 이동할 수 있습니다. 3D 회전 기능이 전체 인터랙션에 재미를 더해 줍니다.
다운로드
https://share.protopie.io/Ehmrm3M1S4E
키워드
카드 UI, 3D 회전, 장면, 당기기, 스크롤
카드 재정렬 #1
Eddy 작성
이 프로토타입은 원하는 앱을 전체 화면 모드로 전환하는 인터랙션을 제공합니다.
다운로드
https://share.protopie.io/fcMTGqMGwwJ
키워드
카드 UI
카드 재정렬 #2
Eddy 작성
이 프로토타입에는 앱의 “캐러셀”에서 앱을 선택할 수 있는 인터랙션이 있습니다.
다운로드
https://share.protopie.io/VvT3vc6efMf
키워드
캐러셀, 페이징, 카드 UI
Flickr 온보딩
Claire 작성
온보딩 경험을 위한 페이징을 특징으로 하는 인터랙션입니다. ProtoPie에서 몇 분 만에 이 기능을 복제할 수 있습니다.
다운로드
https://share.protopie.io/EST6pUhGLGv
키워드
페이징, 인디케이터, 체인
숫자 입력
Eddy 작성
이 인터랙션은 확대 효과와 함께 숫자를 입력하는 기능을 제공하며, ProtoPie의 조건을 사용해 쉽게 만들 수 있습니다.
다운로드
https://share.protopie.io/cy8QhmiRWuK
키워드
크기 조정, 조건
머티리얼 메일
David Lee 작성
Google의 머티리얼 디자인은 화면 전환 중이거나 객체가 화면에 나타날 때 마스크 사용을 권장합니다. ProtoPie의 마스킹 기능으로 이를 쉽게 시뮬레이션할 수 있습니다.
다운로드
https://share.protopie.io/EQmkKwHyLA9
키워드
머티리얼 디자인, 마스크
판다
Junhyuk Jang 작성
화면을 드래그하면 귀여운 판다가 손 위에 올라옵니다.
다운로드
https://share.protopie.io/eN4vfmJffBc
키워드
드래그, 체인
헤더 전환
Chen jiayu 작성
이 인터랙션은 화면에 표시되는 콘텐츠에 따라 헤더 색상과 인디케이터 위치가 달라지는 특징을 보여 줍니다.
다운로드
https://share.protopie.io/3wcDRFmQf4Z
키워드
범위, 인디케이터, 색상
당겨서 새로고침
Eddy 작성
이것은 Pull-to-refresh를 시뮬레이션한 것으로, 페이지를 일정한 만큼 끌어당긴 뒤 원래 위치로 돌아가기 전에 잠시 멈추는 인터랙션입니다.
다운로드
https://share.protopie.io/gxZ5J7c75xR
키워드
조건, 스크롤, 반복
고정 레이블
Eddy 작성
이 인터랙션은 연락처 같은 긴 목록 형식의 콘텐츠에서 흔히 볼 수 있습니다. 어떤 콘텐츠가 보이는지에 따라 표시되는 카테고리가 바뀝니다.
다운로드
https://share.protopie.io/fhhhwrKNc4W
키워드
범위, 스크롤, 체인, 인디케이터
토글 버튼
Eddy 작성
이 인터랙션은 한 번의 탭으로 두 가지 서로 다른 상태를 전환합니다. ProtoPie를 사용하면 두 가지뿐만 아니라 세 가지 이상의 서로 다른 상태도 설정할 수 있습니다.
다운로드
https://share.protopie.io/ZrpYPgKbUjY
키워드
토글 버튼, 조건
Uber
Tony 작성
이 프로토타입은 Uber를 부르듯 출발지와 목적지를 선택하는 기능을 보여 줍니다. 인터랙션은 한 페이지에 표시되지만, 복잡성을 줄이기 위해 프로토타입은 3개의 장면으로 구성되어 있습니다.
다운로드
https://share.protopie.io/8eXJkrLwUuk
키워드
장면, 불투명도
다운로드 진행
Eddy 작성
이것은 원형으로 다운로드 과정을 시각화한 데모입니다. 회전하는 컨테이너를 사용하는 인터랙션으로 만들 수 있습니다.
다운로드
https://share.protopie.io/7EujXR2MewY
키워드
컨테이너, 회전
로그인
Fluo Soup 작성
이것은 머티리얼 디자인에서 활용한 로그인 프로토타입입니다. 로그인 페이지에서 프로필 페이지로 이동할 때 ProtoPie의 마스크 기능이 이 전환을 더 자연스럽게 보이게 합니다.
다운로드
https://share.protopie.io/c21DMDWkEiR
키워드
머티리얼 디자인, 마스크, 로그인
타임딜
Fluo Soup 작성
헤더 바는 스크롤 거리와 함께 움직이며, 카운트다운 타이머도 지정된 영역에 들어가면 작동을 시작합니다
키워드
텍스트, 시작, 카운트다운
시작 페이지
Chen jiayu 작성
체인은 다른 레이어의 변경에 따라 레이어를 애니메이션으로 움직일 수 있게 해 줍니다. 이 프로토타입은 페이지를 스크롤할 때 이미지가 움직이는 모습을 보여 줍니다.
다운로드
https://share.protopie.io/gxNhFHreZQr
키워드
체인
