Thumbnail
디자인 UX/UI

ProtoPie Master Courses (프로토파이 마스터 클래스) 대시보드

(4.8)
5개의 수강평 ∙  102명의 수강생
77,000원

월 15,400원

5개월 할부 시
지식공유자: mc
총 13개 수업 (7시간 54분)
수강기한: 
12개월
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[UX/UI, 그래픽 디자인] 강의입니다.

프로토타이핑의 최강자 ProtoPie 툴을 처음부터 실무 스킬까지 워크숍 방식으로 진행합니다.

✍️
이런 걸
배워요!
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를 가리지 않고 맥, 윈도우에서 모두 사용 가능합니다.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
인터렉티브한 프로토타입으로 인상적인 프리젠테이션을 하고 싶으신 분
UI의 실 사용성을 검증하기 위해 디테일한 프로토타입이 필요하신 분
📚
선수 지식,
필요할까요?
1강에서 Figma 툴과의 연계가 이루어져서 Figma 툴을 사용할 줄 아시면 더 수월합니다.(하지만, 모르셔도 배우시는데 지장은 없습니다.)

안녕하세요
mc 입니다.
mc의 썸네일

안녕하세요.

디지털 에이전시 인픽스 크리에이티브 디자인그룹 그룹장 안명철 입니다.

내부 직원들을 교육하다가 이렇게 온라인 강의도 올리게 되었습니다.

저의 툴 강의를 통해 UI/UX 디자인을 하는 분들께 도움이 되면 좋겠습니다. 

커리큘럼 총 13 개 ˙ 7시간 54분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Preview
섹션 1. ProtoPie 시작하기
ProtoPie 소개 및 페이지 롤링 UI 만들기 미리보기 48:45
버튼과 화면 전환 및 카드 롤링 UI 만들기 56:16
Tab 네비게이션 만들기 34:34
섹션 2. ProtoPie 익숙해지기
프로토타입 공유 및 ProtoPie Player App 사용법 21:55
헤더 인터렉션과 Pull 트리거 45:06
인터렉티브 콤포넌트와 통신 37:17
섹션 3. ProtoPie 잘 써보기1
iOS Background Blur, Variable을 사용한 인터렉션1 41:07
Variable을 사용한 인터렉션2 54:50
Variable을 사용한 인터렉션3 32:03
섹션 4. ProtoPie 잘 써보기2
Input과 Return 트리거의 사용과 반복 애니메이션 25:04
동영상 콘트롤과 벡터 애니메이션 활용 15:06
디바이스 센서 활용과 마우스 효과 사용하기 01:00:35
강의 게시일 : 2022년 09월 29일 (마지막 업데이트일 : 2022년 12월 29일)
수강평 총 5개
수강생분들이 직접 작성하신 수강평입니다.
4.8
5개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
유한나 thumbnail
5
차분하게 순서대로 잘 찝어주셔서 끝까지 잘 배울 수 있었습니다. 저는 완전 초보는 아니라 괜찮았지만 변수, 트리거와 리스팡스의 이해를 돕기위해 개념 정의를 한번 해주셨으면 좋을 것 같습니다. 역할을 온전히 이해하지못하고 그냥 외우니까 응용이 어렵더라구요ㅠ 그 부분 제외하면 제가 본 다른 어떤 프로토파이 강의보다 유용했고 도움이 많이 되었습니다! (프로토파이 강의만 3개째 완강)
2023-04-27
지식공유자 mc
정성어린 수강평 감사드립니다. 말씀하신 부분은 검토해보겠습니다~
2023-04-27
DH thumbnail
5
너무 유익하고 도움이 많이 됩니다. 설명도 재밌어요~~
2023-08-09
지식공유자 mc
감사합니다! 앞으로 업무에 잘 활용하시면 좋겠습니다.
2023-08-10
추혜린 thumbnail
5
제 프로젝트에 적용할 만한 여러 예제들을 실습해 볼 수 있어서 좋았습니다. 그리고 설명을 정말 잘 하시는 것 같아요! 원리를 잘 설명해 주셔서 응용도 쉽게 할 수 있을 것 같아요.
2023-06-12
지식공유자 mc
답변이 늦었네요~ 도움이 된거 같아 기쁩니다. 감사합니다!
2023-08-10
방성주 thumbnail
4
처음 듣는 protopie 강의인데 따라하기도 쉽고 잘배웠습니다.
2023-05-10
지식공유자 mc
도움이 되서 다행입니다. 실무에 활용 하시어 좋은 결과 있으시길 바랍니다.
2023-05-10
jiui.kim thumbnail
5
이해가 안되는 부분 없이 설명과 자료가 충분해요. 프로토파이는 이 강의로 마스터 할 수 있어요
2023-04-10
지식공유자 mc
도움이 된거 같아 기쁩니다. 감사합니다!
2023-04-11