프로토파이 툴 테크닉 > UX UI GUI | 리메인 | 리메인 커리어
오픈신청이 완료 되었습니다.

클래스 오픈시 가입하신 핸드폰 번호로 문자를 발송 드립니다 :D
고객센터 02-6080-8623

프로토파이 툴 테크닉 VOD

49,000
8,167
6개월 무이자 카드안내
🎉

바로수강 가능

클래스 정보

  • 온라인 클래스

    강의 유형

    촬영된 영상을 제공하는 클래스 입니다.

  • 평생 소장

    소장 기간

    90일간 수강가능

로그인 필요

결제기능을 이용하기 위해서는
로그인이 필요합니다.

close

카드안내

  • 신한카드

    2-3개월 무이자 할부 (5만원 이상)

  • KB국민

    2-3개월 무이자 할부 (5만원 이상)

  • 비씨(페이북)

    2-3개월 무이자 할부 (5만원 이상)

  • 삼성카드

    2-3개월 무이자 할부 (5만원 이상)

  • NH농협

    2-3개월 무이자 할부 (5만원 이상)

  • 현대카드

    2-3개월 무이자 할부 (1만원 이상)

  • 하나카드

    2-3개월 무이자 할부 (5만원 이상)

  • 롯데카드

    2-3개월 무이자 할부 (5만원 이상)

* 무이자 할부는 결제 금액 기준으로 적용됩니다.

[ 유의사항 ]
- 법인(기업), 체크, 선불, 기프트, 은행계열카드 (BC마크가 없는 NON BC카드 불가)제외 (예. 수협카드 등)
- 직계약 가맹점, 상점부담 무이자 가맹점, 특별제휴가맹점, 오프라인 가맹점, 신규 가맹점 등 일부 제외
- 본 행사는 카드사 사정에 따라 변경 또는 중단될 수 있음
- 무이자 할부 결제시 포인트, 마일리지 적립 제외
- 개인간 안전거래 이니 P2P 서비스 제외
- TASF 취급 수수료 거래 하나카드 제외
- 온라인 PG업종 해당하는 무이자로 이 외 업종은 적용 불가 (제약, 등록금, 도시가스 등)

안녕하세요.
우리 클래스를 소개합니다.

내 디자인을 실제 움직이는 프로토타입으로
만들고 싶은 분들을 위한 클래스입니다

prototypr.io

프로토파이는 많은 프로토타이핑 툴 중에서도 빠르고 정교한 구현이 가능한 대표적인 툴입니다. 그래픽 툴 인터페이스를 갖고 있어 디자인 작업에 익숙한 분이라면 사용 방법을 쉽게 익힐 수 있으며, 작업 중인 스케치, xd, figma 파일이 있다면 별도의 플로그인 설치없이 바로 임포트해 사용할 수 있다는 장점도 있습니다. 평소 팀에서 디자인 회의를 하거나 사용자 조사를 자주 하시는 분이라면 프로토파이를 유용하게 활용하실 수 있습니다.


UXUI 디자인할 때
이런 고민 해본 적 있으셨나요?

  • “서비스의 모든 플로우를 테스트해보고 싶어요. 회원가입부터 음성인식, 영상재생같은 특수한 상황도 테스트 가능했으면 해요.”

    프로덕트 디자이너 임00

  • “스케치랑 xd, figma를 프로젝트 성격에 따라 바꿔가며 쓰고 있는데, 임포트하기 수월한 프로토타입 툴이 있으면 좋겠어요.”

    프리랜서 웹디자이너 한00

  • “컴포넌트 세트가 있어서 나중에 다시 쓰기 쉬웠으면 해요. 인터렉션을 컴포넌트에 매번 넣기가 힘들거든요.”

    uxui 디자이너 김00

  • “개발과 병행할 수 있도록 빠르고 정교하게 인터렉션을 구현하고 싶어요.”

    uxui 디자이너 김00

navigate_before
navigate_next


그래서 준비한
클래스 포인트 강점

프로토타입을 만들기 위해 가장 많이 사용되는 기능 위주로 설명드리는 클래스입니다. 글로만 보면 어렵게 느껴지던 trigger나 response 활용법도 실습을 통해 쉽게 배우실 수 있습니다.

프로토파이의 기본적인 인터페이스 사용법

기본적인 툴바, 레이어 패널 외에도 프로토파이에만 있는 타임라인 패널 등 프로토파이 툴의 기본적인 인터페이스에 대해 하나씩 살펴봅니다. 다른 툴들과 차별화되는 인터페이스 사용법을 알 수 있습니다.


디바이스에 반응하는 trigger 사용법

trigger 기능을 이용하면 사용자 액션에 따라 키보드가 올라오게 만들하거나 화면 회전의 인터렉션이 가능합니다. 활용도 높은 Input, sensor trigger의 사용법을 알아봅니다.


프로토파이의 Component 개념 익히기

프로토파이의 컴포넌트는 화면(Scene)에 인터렉션을 주는 instance들의 연결고리입니다. 버튼, 그래픽, 텍스트 등의 위치, 사이즈 속성을 컴포넌트를 이용해 자유자재로 컨트롤 해보세요.


본인만의 Interaction Library 만들기

실습에서 사용한 Checkbox Component와 Switch, 및 Radio button Component가 포함된 Interaction Library를 만들어봅니다. 만든 라이브러리 파일은 권한을 가진 팀 멤버와 공유할 수 있고, 재사용이 가능합니다.



Introducing ProtoPie

클래스를 마치고,
여러분은 이렇게 달라질 거에요

프로토파이의 기능과 인터페이스를 이해하고
정교한 인터렉션을 만들 수 있게 됩니다

  • 개발자의 도움 없이도 다양한 인터랙션을 구현할 수 있습니다.
  • 정교한 인터랙션을 팀원들에게 쉽게 설명할 수 있습니다.
  • 개발 단계 이전에도 사용자의 피드백을 쉽게 받을 수 있습니다.
🙌

프로토파이 툴 테크닉

쳅터 1

프로토파이 소개 및 기본 인터페이스 익히기

  • 프로토파이 소개, 모든 디자이너를 위한 프로토타입 툴
  • 프로토파이의 기본 인터페이스를 소개합니다.

쳅터 2

프로토파이 기본 인터랙션

  • Trigger, 상호작용을 만드는 인터렉션
  • Response, 상호작용된 결과를 보여주는 인터렉션
  • ProtoPie 기본 인터랙션 실습, trigger로 정사각형을 움직이는 인터랙션 해보기

쳅터 3

프로토파이 예제 실습

  • Input 예제 실습, 버튼이 포함된 입력창 만들기
  • Conditional 예제 실습, 누를 때 마다 On,Off가 바뀌는 Toggle button 만들기
  • Formula 예제 실습, 숫자값을 바꿔주는 +,- 버튼 만들기
  • Component 요소 설명, Checkbox Component 만들기

쳅터 4

프로토파이 Interaction Library 제작 실습

  • Interaction Library를 소개합니다
  • Interaction Library 제작해보기, Checkbox와 Switch, Radio button을 포함해 만들어 봅니다.