디자이너가 머릿속에서 완성한 인터랙션을 개발자에게 정확하게 전달하기는 생각보다 쉽지 않다. 자신이 생각한 디자인을 완벽하게 구현할 수 있는 사람은 디자이너 본인뿐이다. 디자이너가 움직이는 프로토타입을 직접 만들 수 있다면 완제품과 디자인 사이의 괴리를 스스로 줄여 나갈 수 있다.
이 책은 실제 네이버 앱에 적용된 다양한 인터랙션을 대표적인 프로토타이핑 도구인 Framer를 이용해 만드는 방법을 설명한다. 이 책의 예제를 하나씩 따라 하다 보면 어느새 새로운 인터랙션 디자인의 세계에 눈뜨게 될 것이다.
이 책에서는 다음과 같은 내용을 다룬다.
◎ 프로토타이핑은 무엇이며 왜 필요한지 설명하고, 다양한 프로토타이핑 도구 중에서 Framer를 선정한 이유를 소개한다.
◎ Framer를 사용할 때 필요한 커피스크립트의 기초 개념을 소개한다.
◎ 네이버 앱에 적용된 다양한 인터랙션을 만들어 본다.
- 이벤트와 애니메이션을 이용한 인터랙션 만들기
- 사이드 메뉴가 있는 인터페이스 만들기
- 퀵 메뉴 만들기
- 브라우저 스크롤 인터랙션 만들기
- 좌우 페이지 인터랙션 만들기
- 스크롤하면 크기가 변하는 헤더 만들기
- 스티키 헤더 인터랙션 만들기
- 슬라이더로 미디어 플레이어 조정하기