ProtoPie Master Courses (프로토파이 마스터 클래스)
프로토타이핑의 최강자 ProtoPie 툴을 처음부터 실무 스킬까지 워크숍 방식으로 진행합니다.
초급자를 위해 준비한
[UX/UI, 그래픽 디자인] 강의입니다.
이런 걸
배워요!
ProtoPie의 기본 사용법
Figma와 연계한 효율적인 프로토타이핑 작업
모바일 디바이스의 센서를 사용한 프로토타이핑
프로토타이핑의 최강자 ProtoPie의
기초부터 실무 스킬까지! 🌠
복잡한 코딩 없이
프로토타이핑이 가능한 ProtoPie 🪄
ProtoPie는 디자이너가 개발자의 도움없이
고객의 의견을 개발 전에 미리 적용해 볼 수 있어요!
개발자와의 원활한 커뮤니케이션 툴을 제공하고 있어
최근 비대면 UI 개발 트렌드에도 딱 맞는 툴이랍니다.
이 강의만의 특장점
📝
실습 방식
🧑💻
실무 위주의 예제
🍯
다양한 팁 전수
이런 분들께 추천해요 🙋♀️
처음으로 프로토파이를
접하시는 분
디자인 작업물을 효과적으로
프레젠테이션 하고 싶으신 분
인터랙티브한 프로토타입으로
인상적인 프레젠테이션을
하고 싶으신 분
UI의 실사용성을 검증하기 위해
디테일한 프로토타이핑이
필요하신 분
🎓 수강생의 고민
"처음 해보는데 잘 할 수 있을까요?"
👨🏫 수강생의 고민 해결방법
입문부터 고급 실무까지 쉽게 하나씩 따라하면서 배울 수 있습니다.
이런걸 배워요 📚
1. ProtoPie 소개 및 페이지 롤링 UI 만들기
- ProtoPie 소개 및 특징, 활용 범위, 화면 구조, System Status Bar, 프리뷰 화면 소개
- Figma 디자인을 ProtoPie로 불러오기
- 페이지 롤링 UI 만들기: 튜토리얼 화면 제작
2. 버튼과 화면 전환 및 카드 롤링 UI 만들기
- Tab 트리거로 화면 전환 / 인터렉션 추가
- 자연스러운 모션을 위한 Easing 값 조절
- 투명 오브젝트의 활용
- 카드 롤링 UI / 세로 스크롤 만들기
3. Tab 네비게이션 만들기
- 스크롤과 페이징 컨테이너의 중복 사용
- Chain과 Page Scroll 컨테이너를 사용한 Tab 네비게이션 만들기
4. 프로토타입 공유, ProtoPie Player App 사용법
- Cloud 공유와 Interaction Record
- ProtoPie Player 모바일앱 소개 및 사용법
5. 헤더 인터렉션과 Pull 트리거
- Chain / Drag를 사용한 헤더 인터렉션
- TouchVelocity를 사용한 헤더 인터렉션
- 리스트를 밀면 나타나는 Context 메뉴만들기
6. 인터렉티브 컴포넌트와 통신
- 액션 영역 그룹핑
- Condition 사용한 체크박스 컴포넌트 만들기
- Send / Receive Trigger를 통한 제어와 통신
7. Variable 사용한 인터렉션 (1)
- 역방향 페이지 스크롤 인터렉션
- iOS Background Blur 효과 사용하기
- 변수 사용한 로그인 화면 비밀번호 입력 표현
- 변화하는 변수값을 화면에 표시하기
8. Variable 사용한 인터렉션 (2)
- 슬라이더에 의해 값이 변화하는 인터렉션
- 하단메뉴 마이크로 인터렉션
- 3D Rotate 카드 인터렉션
9. Variable 사용한 인터렉션 (3)
- 원형 그래프 인터렉션 만들기
- 화면의 스크롤 값을 변수에 넣어서 보기
- Range를 사용한 인터렉션
10. Input / Return 트리거 사용과 반복 애니메이션
- 입력창과 디바이스 키패드의 사용
- 비밀번호 입력화면 실습
- 타임라인 애니메이션: 반복효과 등
11. 동영상 컨트롤과 벡터 애니메이션 활용
- 동영상 파일 컨트롤
- LottiesFiles 애니메이션 활용: json 파일
- Figma에서 만든 화면전환 가져오기: Smart Transition
12. 디바이스 센서 활용과 마우스 효과 사용하기
- 지도 UI
- 마우스 오버 / 아웃 효과, 마우스 포인터 디자인
- 음악 검색 프로토타입, 소음 측정 프로토타입, 음성 인식 프로토타입
예상 질문 Q&A 💬
Q. 이 강의만 다 들으면 ProtoPie를 마스터 할 수 있나요?
이 강의를 다 듣고 나면, 실무에 바로 사용하실 수 있는 수준이 됩니다.
Q. 이 강의가 ProtoPie의 모든 기능을 다 포함하나요?
이 강의의 실무 위주의 워크샵 방식으로 진행되어 ProtoPie의 모든 기능을 포함하진 않지만, 주로 사용하는 대부분의 기능의 다루고 있습니다.
Q. ProtoPie는 윈도우에서도 사용이 가능한가요?
ProtoPie는 OS를 가리지 않고 맥, 윈도우에서 모두 사용 가능합니다.
✅ 수강 전 확인해주세요
프로토파이 무료 플랜 정책의 변경으로 인해 하나의 파일에서 사용할 수 있는 Scene 개수가 2개로 제한되었습니다. 관련하여 아래 언급된 수업은 무료 플랜으로는 수강에 제약이 있을 수 있음을 알려드립니다.
섹션2 - ProtoPie 시작하기 파트
- 2~4강 예제는 Scene을 최대 4개까지 사용하기 때문에 원활한 강의 진행을 위해서는 유료 플랜이 필요합니다.
- 2강에서 튜토리얼 화면을 한번에 3개를 불러오던 부분은 무료 플랜에서는 한 번에 하나의 화면씩 가져오는 방식으로 진행하셔야 할 수 있습니다.
- 무료 플랜에서 허용되는 2개 Scenes(예, 튜토리얼, 메인) 외의 나머지 부분을 따라해보시기 위해서는 먼저 작업된 Scene(예, 튜토리얼 및 전체메뉴)을 지우고 진행하실 수 는 있습니다.
섹션3 - ProtoPie 익숙해지기
- 6강 예제는 다양한 방법으로 헤더 인터렉션을 구현해보느라 3개의 Scene을 사용합니다.
- 다만, Scene 간 연결되는 인터렉션이 있는 것은 아니라서 진행하던 하나의 Scene에서 계속 따라하시면서 수업을 진행하실 수 는 있습니다.
이런 분들께
추천드려요!
학습 대상은
누구일까요?
인터렉티브한 프로토타입으로 인상적인 프리젠테이션을 하고 싶으신 분
UI의 실 사용성을 검증하기 위해 디테일한 프로토타입이 필요하신 분
선수 지식,
필요할까요?
1강에서 Figma 툴과의 연계가 이루어져서 Figma 툴을 사용할 줄 아시면 더 수월합니다.(하지만, 모르셔도 배우시는데 지장은 없습니다.)
안녕하세요
mc입니다.
안녕하세요.
디지털 에이전시 인픽스 크리에이티브 디자인그룹 그룹장 안명철 입니다.
내부 직원들을 교육하다가 이렇게 온라인 강의도 올리게 되었습니다.
저의 툴 강의를 통해 UI/UX 디자인을 하는 분들께 도움이 되면 좋겠습니다.