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