![프로토파이](http://designbase.co.kr/wp-content/uploads/2024/07/icon-protopie.png)
![프로토파이 소개 이미지](https://designbase.co.kr/wp-content/uploads/2021/04/protopie_01_overview-728x410.jpg)
![프로토파이](http://designbase.co.kr/wp-content/uploads/2024/07/icon-protopie.png)
드디어 프로토파이 강좌를 시작합니다!
이번 시간에는 프로토파이 강좌 소개를 하는 시간이에요.
목적 자체는 유료 강좌로 제작됐지만, 기본적으로 알아두면 좋은 기본 개념인 ’07.Scene을 활용한 페이지 간 이동’ 영상까지는 유튜브에 무료로 업로드될 예정입니다. 그 이후에 고급 기능과 개념들에 대한 강좌 영상은 멤버십 회원으로 가입해주시면 볼 수 있습니다.
(*멤버십 관련 영상과 설명은 조만간 업로드될 예정입니다.)
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
프로토파이 강좌 커리큘럼
기초
- 강좌 소개
- 프로토파이 인터페이스 파악하기
- 오브젝트, 트리거, 리스폰스 개념 이해하기
- UI툴에서 import 하기
- Scroll을 활용한 페이지 스크롤 제작
- Paging을 활용한 페이징 제작
- Scene을 활용한 페이지간 이동
고급
- Input을 활용한 Validation 표현
- 프로퍼티 개념 이해하기
- 변수 개념 이해하기
- 함수 개념 이해하기 – 글자수 세기 기능 만들기
- 조건 Condition 개념 이해하기
- 체인과 레인지 개념 이해하기
- 클라우드 활용 & 모바일 앱에서 확인하기
- Tilt 기능 활용하기
- Sound 기능 활용하기
- Lottie.js 사용하기
- Start 애니메이션 적용하기
핵심 요약
요즘 매우 핫한 프로토타이핑 툴인 ProtoPie 입문 강좌를 시작합니다!
직관적인 사용법과 디테일한 기능을 통해 디자이너 들 사이에서 빠르게 선점하고 있죠!
구글, 마이크로소프트 등 많은 기업에서도 사용합니다.
![프로토파이 사용하는 회사 - 마이크로소프트, 구글, r/ga](http://designbase.dothome.co.kr/wp-content/uploads/2021/04/protopie-01-01-730.jpg)
프로토 타이핑 이라는 것을 처음 접하는 분들을 위해 짧게 설명을 드릴게요. 개발이 들어가기 전에 사용성이나 구현 방식을 검증하는 단계에서 제작되는 목업 단계라고 생각하면 쉬워요.
![프로토타이핑 위치](http://designbase.dothome.co.kr/wp-content/uploads/2021/04/protopie-01-02-730.jpg)
프로토타이핑 구현 수준이 어느 정도인가로 포지션이 나뉩니다.
크게는 피델리티로 나뉘는데 여기서 로우 피델리티.. 묘사력이 낮은 툴을 말합니다. 줄여서 Lo-Fi 라고 합니다. 그 반대는 Hi-Fi 겠죠?
유저 플로우 확인용으로 페이지 이동을 위주로 제공하는 가벼운 Lo-Fi 프로토타이핑 툴이 있고, 많은 기능과 상세한 인터렉션까지 제공하는 Hi-Fi 프로토타이핑 툴이 있습니다.
![hi-fi 프로토타이핑 툴 - 프로토파이](http://designbase.dothome.co.kr/wp-content/uploads/2021/04/protopie-01-03-730.jpg)
Lo-fi의 대표적인 툴은 인비전이 있죠. 배우기 쉽고 사용성도 좋아요.
인비전에 대해 궁금하신 분들은 인비전 강좌를 통해 배워보세요.
우리가 이번 강좌에서 배워볼 프로토 파이는 Hi-fi에 속합니다!
![프로토파이 장점](http://designbase.dothome.co.kr/wp-content/uploads/2021/04/protopie-01-04-730.jpg)
프로토파이의 장점을 살펴볼게요.
OS 제약 없어요. 프린서플은 맥에서만 사용가능한데.. 프로토파이는 윈도우 사용자도 가능하다는 장점이 있죠. 우리나라에 에이전시 중에서도 윈도우로 디자인을 하는 디자이너들이 은근 많기 때문에 XD를 사용하는 사람들에겐 아주 큰 장점이죠.
당연히 UI 전용 툴 Top3인 피그마, 스케치, xd에서 임포트가 가능하죠!
![프로토파이 임포트 기능 - 스케치, 피그마, xd](http://designbase.dothome.co.kr/wp-content/uploads/2021/04/protopie-01-05-730.jpg)