모바일 앱 프로토타이핑 (Framer를 활용한 인터랙션 디자인)

김정민

저자김정민은네이버와SK커뮤니케이션즈에서여러디지털제품을만들었다.2017년현재네이버앱프로덕트디자이너로일하고있다.디지털제품,인터랙티브디자인과관련된커뮤니티에서종종활동한다.

▣1장:왜프로토타이핑인가
프로토타이핑이란
-인터페이스,UX디자인에서의프로토타이핑
-하이피델리티프로토타이핑
하이피델리티프로토타이핑도구의등장
-인터페이스디자인도구의혁신
-나에게맞는프로토타이핑도구선택하기
Framer를이용한프로토타이핑
-왜Framer인가
-디자이너가Framer를배워야하는가
-네이버에서는Framer를어떻게활용하는가

▣2장:프로토타이핑시작하기
프로토타이핑도구준비
커피스크립트이해하기
-코드기본문법
-오류찾기
-변수
-조건문
-배열과반복문
-함수
-객체
-유효범위
이미지리소스준비하기
-디자인파일불러오기
-불러온레이어에이름붙이기
-뷰어설정하기
-기기/브라우저로확인하기
레이어개념이해하기
-Framer의레이어개념이해
-속성
-위치와크기
-계층관계
정리

▣3장:이벤트와애니메이션을이용한인터랙션만들기
애니메이션
이벤트
머티리얼디자인인터랙션만들기
플로팅액션버튼인터랙션만들기
애니메이션저장하기
정리

▣4장:사이드메뉴가있는인터페이스만들기
상태
-상태추가
-상태전환
-상태삭제및덮어쓰기
좌우사이드메뉴가있는네이버앱구조만들기
정리

▣5장:퀵메뉴만들기
드래그
-제한범위
-오버드래그,바운스,모멘텀
-드래그이벤트
-드래그애니메이션
네이버앱퀵메뉴만들기
편집모드의순서편집기능만들기
정리

▣6장:브라우저스크롤인터랙션만들기
스크롤
-스크롤컴포넌트
-콘텐츠인셋
-래핑
-스크롤이벤트
-스크롤애니메이션이벤트
스크롤해서바숨기기인터랙션만들기
스크롤해서내비게이션디자인바꾸기
정리

▣7장:좌우페이지인터랙션만들기
페이지
-페이지컴포넌트
-페이지추가하기
-래핑
-포커스와페이지순서
-페이지인디케이터
네이버앱페이지구조만들기
워크스루만들기
정리

▣8장:스크롤하면크기가변하는헤더만들기
모듈레이트
스크롤위치에따라요소가변하는헤더만들기
정리

▣9장:스티키헤더인터랙션만들기
체인지이벤트
스티키헤더만들기
정리

▣10장:슬라이더로미디어플레이어조정하기
슬라이더컴포넌트
비디오플레이어만들기
정리

▣11장:스틸컷디자인에서인터랙션까지
네이버앱콘셉트디자인
네이버앱콘셉트프로토타입만들기

▣12장:마치며

이책에서는다음과같은내용을다룬다.

◎프로토타이핑은무엇이며왜필요한지설명하고,다양한프로토타이핑도구중에서Framer를선정한이유를소개한다.
◎Framer를사용할때필요한커피스크립트의기초개념을소개한다.
◎네이버앱에적용된다양한인터랙션을만들어본다.
ㆍ이벤트와애니메이션을이용한인터랙션만들기
ㆍ사이드메뉴가있는인터페이스만들기
ㆍ퀵메뉴만들기
ㆍ브라우저스크롤인터랙션만들기
ㆍ좌우페이지인터랙션만들기
ㆍ스크롤하면크기가변하는헤더만들기
ㆍ스티키헤더인터랙션만들기
ㆍ슬라이더로미디어플레이어조정하기

[추천사]

"ThisbookgivesyouaninsightintohowNAVERusesFramerintheirproductdesigncycle.It'sagreatreadforproductdesignerslookingtoexpandtheirskillset.Learnhowtobringyourideastolife."
"이책은네이버에서제품을디자인할때Framer를어떻게활용하는지심도있게다룬다.제품디자이너로서자신의스킬을넓히고싶다면좋은자료가될것이다.머릿속아이디어를실제로구현하는방법을배워보자."
-BenjamindenBoer,FramerProductDesigner