ProtoPie Master Course

 

복잡한 코딩 없이 프로토타이핑이 가능한 ProtoPie 👯

ProtoPie는 디자이너가 개발자의 도움 없이 고객의 의견을 개발 전에 미리 적용해 볼 수 있어요!
개발자와의 원활한 커뮤니케이션 툴을 제공하고 있어 최근 비대면 UI 개발 트렌드에도 딱 맞는 툴 이랍니다.

 

 

---

이런 분들께 추천해요 🙋‍♀️

🎓수강생의 고민

 🎓수강생의 고민 해결 방법

 

---

이런걸 배워요 📚

🌿 ProtoPie 소개 및 페이지 롤링 UI 만들기

* ProtoPie 소개 및 특징
* ProtoPie 활용 범위
* ProtoPie 화면 구조
* ProtoPie에서 지원하는 System Status Bar
* 프리뷰 화면 소개 
* Figma 디자인을 ProtoPie로 불러오기
* 페이지 롤링 UI 만들기 : 투토리얼 화면 제작


🌿 버튼과 화면 전환 및 카드 롤링 UI 만들기

* Tab 트리거를 통한 화면 전환 및 화면내 인터렉션 추가
* 자연스러운 모션을 위한 Easing 값 조절
* 투명 오브젝트의 활용
* 카드 롤링 UI 만들기
* 세로 스크롤 만들기


🌿 Tab 네비게이션 만들기

* 스크롤과 페이징 컨테이너의 중복 사용
* Chain과 Page Scroll 컨테이너를 사용한 Tab 네비게이션 만들기


🌿 프로토타입 공유 및 ProtoPie Player App 사용법

* Cloud 공유와 Interaction Record
* ProtoPie Player 모바일앱 소개 및 사용법


🌿 헤더 인터렉션과 Pull 트리거

* Chain을 사용한 헤더 인터렉션
* Drag를 사용한 헤더 인터렉션
* TouchVelocity를 사용한 헤더 인터렉션
* 리스트를 밀면 나타나는 Context 메뉴 만들기


🌿 인터렉티브 콤포넌트와 통신

* 액션 영역 그룹핑
* Condition을 사용한 체크박스 콤포넌트 만들기
* Send / Receive Trigger를 통한 제어와 통신(1) : 체크박스 전체선택
* Send / Receive Trigger를 통한 제어와 통신(2) : 서로 다른 디바이스간의 연동 인터렉션 만들기


🌿 iOS Backgraoud Blur, Variable 사용한 인터렉션1

* 역방향 페이지 스크롤 인터렉션
* iOS Background Blur 효과 사용하기
* 변수 사용한 로그인 화면 비밀번호 입력 표현
* 변화하는 변수값을 화면에 표시하기


🌿 Variable 사용한 인터렉션2

* 슬라이더에 의해 값이 변화하는 인텨렉션
* 하단메뉴 마이크로 인터렉션
* 3D Rotate 카드 인터렉션


🌿 Variable 사용한 인터렉션3

* 원형 그래프 인터렉션 만들기
* 화면의 스크롤 값을 변수에 넣어서 보기
* Range를 사용한 인터렉션


🌿 Input과 Return 트리거의 사용과 반복 애니메이션

* 입력창과 디바이스 키패드의 사용
* 비밀번호 입력화면 실습
* 타임라인 애니메이션 : 반복효과 등


🌿 동영상 콘트롤과 벡터 애니메이션 활용
* 동영상 파일 콘트롤
* LottieFiles 애니메이션 활용 : json 파일
* Figma에서 만든 화면전환 가져오기 : Smart Transition


🌿 디바이스 센서 활용과 마우스 효과 사용하기

* 지도 UI
* 음악 검색 프로토타입
* 소음측정 프로토타입
* 음성인식 프로토타입
* 마우스 오버/아웃 효과
* 마우스 포인터 디자인

---

강의를 들은 후 수강생의 변화 📜
* ProtoPie를 사용하여 인터렉티브한 프로토타이핑을 할 수 있게 됩니다.

---

예상 질문 Q&A 💬

 

---

지식공유자 소개 ✒️

안명철_인픽스 / Creative Design Group 그룹장/이사