모바일 앱 프로토타이핑-Framer를 활용한 인터랙션 디자인(위키북스 TECH@NAVER 시리즈 14)

디자이너가 머릿속에서 완성한 인터랙션을 개발자에게 정확하게 전달하기는 생각보다 쉽지 않다. 자신이 생각한 디자인을 완벽하게 구현할 수 있는 사람은 디자이너 본인뿐이다. 디자이너가 움직이는 프로토타입을 직접 만들 수 있다면 완제품과 디자인 사이의 괴리를 스스로 줄여 나갈 수 있다. 이 책은 실제 네이버 앱에 적용된 다양한 인터랙션을 대표적인 프로토타이핑 도구인 Framer를 이용해 만드는 방법을 설명한다. 이 책의 예제를 하나씩 따라 하다 보면 어느새 새로운 인터랙션 디자인의 세계에 눈뜨게 될 것이다.

▣ 1장: 왜 프로토타이핑인가 프로토타이핑이란 - 인터페이스, UX 디자인에서의 프로토타이핑 - 하이피델리티 프로토타이핑 하이피델리티 프로토타이핑 도구의 등장 - 인터페이스 디자인 도구의 혁신 - 나에게 맞는 프로토타이핑 도구 선택하기 Framer를 이용한 프로토타이핑 - 왜 Framer인가 - 디자이너가 Framer를 배워야 하는가 - 네이버에서는 Framer를 어떻게 활용하는가 ▣ 2장: 프로토타이핑 시작하기 프로토타이핑 도구 준비 커피스크립트 이해하기 - 코드 기본 문법 - 오류 찾기 - 변수 - 조건문 - 배열과 반복문 - 함수 - 객체 - 유효범위 이미지 리소스 준비하기 - 디자인 파일 불러오기 - 불러온 레이어에 이름 붙이기 - 뷰어 설정하기 - 기기/브라우저로 확인하기 레이어 개념 이해하기 - Framer의 레이어 개념 이해 - 속성 - 위치와 크기 - 계층 관계 정리 ▣ 3장: 이벤트와 애니메이션을 이용한 인터랙션 만들기 애니메이션 이벤트 머티리얼 디자인 인터랙션 만들기 플로팅 액션 버튼 인터랙션 만들기 애니메이션 저장하기 정리 ▣ 4장: 사이드 메뉴가 있는 인터페이스 만들기 상태 - 상태 추가 - 상태 전환 - 상태 삭제 및 덮어쓰기 좌우 사이드 메뉴가 있는 네이버 앱 구조 만들기 정리 ▣ 5장: 퀵 메뉴 만들기 드래그 - 제한 범위 - 오버드래그, 바운스, 모멘텀 - 드래그 이벤트 - 드래그 애니메이션 네이버 앱 퀵 메뉴 만들기 편집 모드의 순서 편집 기능 만들기 정리 ▣ 6장: 브라우저 스크롤 인터랙션 만들기 스크롤 - 스크롤 컴포넌트 - 콘텐츠인셋 - 래핑 - 스크롤 이벤트 - 스크롤 애니메이션 이벤트 스크롤해서 바 숨기기 인터랙션 만들기 스크롤해서 내비게이션 디자인 바꾸기 정리 ▣ 7장: 좌우 페이지 인터랙션 만들기 페이지 - 페이지 컴포넌트 - 페이지 추가하기 - 래핑 - 포커스와 페이지 순서 - 페이지 인디케이터 네이버 앱 페이지 구조 만들기 워크스루 만들기 정리 ▣ 8장: 스크롤하면 크기가 변하는 헤더 만들기 모듈레이트 스크롤 위치에 따라 요소가 변하는 헤더 만들기 정리 ▣ 9장: 스티키 헤더 인터랙션 만들기 체인지 이벤트 스티키 헤더 만들기 정리 ▣ 10장: 슬라이더로 미디어 플레이어 조정하기 슬라이더 컴포넌트 비디오 플레이어 만들기 정리 ▣ 11장: 스틸컷 디자인에서 인터랙션까지 네이버 앱 콘셉트 디자인 네이버 앱 콘셉트 프로토타입 만들기 ▣ 12장: 마치며