Framer로 구현하는 인터랙티브 프로토타이핑 CAMP
기   간 2018년 8월 4일 ~ 9월 15일
(주 2회 수업, 총 6주 12회)
*휴강 – 8/25 (토)
일   정 매주 토요일/일요일 9:30 ~ 13:30 (4시간)
장   소 강남대로 364 미왕빌딩 10층 F강의실
담당자 담당 매니저 02-518-4839
주저말고 매니저에게 언제든지 문의하세요!
궁금한 부분을 시원하게 설명해드립니다

*출시알림을 신청해주시면 다음 기수 개강시 가장먼저 연락 드립니다.

Framer로 정교한 인터랙션, 고퀄리티 프로토타이핑 구현하기!

코딩 초보자도 대환영! 이제 자바스크립트보다 쉬운 ‘커피스크립트’로
당신의 비주얼 커뮤니케이션 능력을 확 끌어올려보세요.

막연한 코딩,
Framer와 커피스크립트로
쉽고 빠르게 배운다!

어렵고 불편한 자바스크립트의 단점을 보완하여 재탄생한
‘커피스크립트’를 사용하는 Framer!

이제 딱딱한 코딩 언어를 다루기 부담스러웠던 분들도
조금 더 쉽게 접근할 수 있습니다.

당신의 아이디어,
이제 말로 설명하지 말고
직접 보여주세요!

“휙- 돌아가게, 스르륵 움직이게, 촤락 펼쳐지게…”
이제 더 이상 말로써 구구절절 소통하지 말아요.
개발자와의 커뮤니케이션 비용을 확 절감시켜줄
인터랙티브 프로토타이핑을 배워보세요.

강의 특징

인터랙티브 프로토타이핑,
왜 중요할까요?

앱 디자인 완성도를 좌우하는 것은 더 이상 화려한 그래픽이 아닙니다. 디지털 디바이스의 특성을 고려한, 효과적인 인터렉션이 모바일 사용자 경험(UX)의 기준이 되었습니다.

이제는 코딩하는 디자이너,
내가 만든 디자인을 직접 구현

디자이너가 코딩까지 해야하나요? 나의 디자인이 완벽하게 구현되길 원한다면 이제는 직접 코딩하세요. 이 시대가 선망하는 코딩하는 디자이너. 프레이머로 시작해보세요!

한결 원활해지는
실무 협업 프로세스

내가 상상한 인터랙션은 이게 아닌데… 하며 개발자와 힘겨운 소통을 하고 계신가요? 인터렉션을 정확히 구현한 프로토타이핑으로 커뮤니케이션 오류를 해결해보세요.

강사 소개

235423

강사
Jason Lee, Developer

– 카이스트 HCI 전공
– 모바일 서비스 개발 경력 5년(iOS, Android)
– N사 개발자
– Framer community 운영자

제목-없음-1

특강강사
이다윗

Designer at Daylight Design
Manager at Design Spectrum
Member of Framer Honchos (secret group)
KAIST HCI

강사님 포트폴리오

수강 대상

코딩을 배워보고 싶은 디자이너

프레이머JS에서 다루는 커피스크립트는 어려운 자바스크립트를 쉽게 사용할 수 있도록 고안되었으며, 코딩을 처음 시작하는 디자이너들에게 가장 좋은 도구입니다.

더욱 정교한 인터랙션 디자인을 하고싶은 분

인비전, 플린토로 매번 같은 인터랙션만을 구현하시나요? 단순한 Lo-fi툴들은 쉽긴 하지만 한계가 분명합니다. 프레이머를 통해 한계가 없는 인터렉션 디자인의 세계를 경험해 보세요.

디자인의 사용성을 검증하고 싶은 분

개발이 끝나고나서 워크플로우가 잘못된 것을 깨닫는것은 비극이죠. 완성된 앱과 동일한 퀼리티의 프로토타입으로 유저 테스트는 물론 프레젠테이션까지!

수강생 리뷰

수강생 만족도

4.9

★★★★★

Framer로 구현하는 인터랙티브
프로토타이핑 CAMP 지난 기수강생 평가

수강 후기

수강생 A
“코딩은 처음이라 수업을 못따라가면 어떡하나 걱정했는데, 두 강사님께서 넘치는 열정으로 밀착 코칭해주셔서 포기하지 않고 끝까지 배울 수 있었어요. 이제 실무에서도 프레이머를 사용하여 협업을 하다보니 소통이 훨씬 매끄럽고 빨라졌습니다.”

수강생 B
“짧은기간 수업이라 많이 배울수 있을까 걱정했는데 단순 예제만으로 끝나는것이 아니라 앞으로 더 발전 시킬 수 있는 방법까지 알려 주셨습니다. 따로 회사내 스터디도 시작할 예정입니다. 많이 배우고 또 감사했습니다.”

수강생 C
“강사님께서 준비를 너무 잘해주셨고 이해할 수 있도록 난이도를 잘 조절해주셨습니다. 요즘 꼭 필요한  Tool 이기 떄문에 적극 추천합니다.”

수강생 D
“프로토타이핑에 조금이라도 관심이 있다면 망서릴 이유가 없는것 같아요. 지금 이런 교육을 해주는 곳이 많지 않은것 같습니다. 또한 디자이너에게도 많은 도움이 되는것 같아요.”

수강 지원 서비스

‘기초 코딩으로 구현하는 모바일 인터랙티브 프로토타이핑 CAMP’를
200% 활용할 수 있도록 도와주는 패스트캠퍼스만의 지원 서비스!

강의자료 제공

디자이너에게 낯설기만 한 코드. 예제 파일을 제공해드리며, 예제 파일에 대한 작업 및 코딩 가이드 인쇄물을 통해 완벽한 복습으로 Framer를 정복하세요.

수강생 페이스북 그룹

수강생용 비공개 페이스북 그룹을 통해 자유롭게 자료를 공유하고, 질문하면서 서로 의견을 주고받을 수 있습니다.

Framer 50% 할인 쿠폰 제공

오직 ‘Framer로 구현하는 인터랙티브 프로토타이핑 CAMP’ 수강생에게만 Framer 50% 할인 쿠폰을 제공합니다!
(*Framer 내부 정책이 수시로 변경되므로 상황에 따라 할인쿠폰 지급이 어려울 수 있다는 점 감안 바랍니다.)

강의 진행 과정

Untitled-1-01

코딩 기초

Framer 기본 구성을 익히고, 간단한 예제를 연습하면서 코딩의 기초를 닦습니다.

Untitled-1-02

인터랙션 실습

실전에 쓰이기 위한 프로토타입 제작을 통해 심화과정을 연습해봅니다.

Untitled-1-03

응용 프로토타이핑

지금까지 배운 내용을 기초로 프로토타입을 제작하고, 실무에 활용법을 알아봅니다.

커리큘럼

  • 프레이머 소개
  • 커피스크립트 (CoffeeScript) Basic – 1
    – 변수, 할당, 점, 인덴테이션
    – 함수
  • 프레이머(Framer) Layer
    – 기본 레이어 및 속성
  • 커피스크립트(CoffeeScript) Basic – 2
    – 반복문
  • 스크롤뷰 만들기
    – 컨테이너 레이어(스크롤 컴퍼넌트, 페이지 컴퍼넌트)
  • 프레이머 State, Animation
  • 커피스크립트(CoffeeScript) Basic – 3
    – 조건문
  • 애니메이션 만들기
  • 프레이머(Framer) Event 1
    – 탭/드래그/스와이프
  • 카드 스와이프 및 드래그 인터랙션
    (틴더 카드 스와이프 인터랙션)
  • 프레이머(Framer) Event 2
    – 레이어 속성 이벤트 감지
  • 배경이미지 바운스, 상단 탭바 하이라이트바 인터랙션
  • 프레이머 디자인탭 기능 소개
  • 디자인탭을 이용한 워크 플로우 소개
  • 디자인탭을 이용한 예제
  • PageComponent, Utils.modulate를 활용한 인터랙션
  • 스케일, 인디케이터 활용 (원티드 이미지 활용)
  • 실무에서 가장 많이 활용되는 플로우, 인터랙션 실습
  • 인스타그램 다이렉트 메세지 인터랙션
  • 특별강사 초대
    – 작업물 공유
  • 영화 추천 서비스 프로토타입 1
  • ScrollComponent의 새로운 속성 이해
  • 상세페이지 이동 인터랙션
  • 영화 추천 서비스 프로토타입 2
  • ScrollComponent의 새로운 속성 이해
  • 상세페이지 이동 인터랙션
  • 야후 웨더 따라하기
    – 시차 스크롤 이해
    – 시차 스크롤 응용 예제
※ 강의 진행 시, 세부 커리큘럼은 필요에 따라 강사 재량으로 일부 변경될 수 있습니다.

수강료

*출시알림을 신청해주시면 다음 기수 개강시 가장먼저 연락 드립니다.

Framer를 활용하면 이런 작업이 가능합니다.

ysl_portfolio