모바일 앱 프로토타이핑(TECH@NHN 시리즈 14)

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



◎ 프로토타이핑은 무엇이며 왜 필요한지 설명하고, 다양한 프로토타이핑 도구 중에서 Framer를 선정한 이유를 소개한다.

◎ Framer를 사용할 때 필요한 커피스크립트의 기초 개념을 소개한다.

◎ 네이버 앱에 적용된 다양한 인터랙션을 만들어 본다.

ㆍ 이벤트와 애니메이션을 이용한 인터랙션 만들기

ㆍ 사이드 메뉴가 있는 인터페이스 만들기

ㆍ 퀵 메뉴 만들기

ㆍ 브라우저 스크롤 인터랙션 만들기

ㆍ 좌우 페이지 인터랙션 만들기

ㆍ 스크롤하면 크기가 변하는 헤더 만들기

ㆍ 스티키 헤더 인터랙션 만들기

ㆍ 슬라이더로 미디어 플레이어 조정하기



[추천사]



"This book gives you an insight into how NAVER uses Framer in their product design cycle. It's a great read for product designers looking to expand their skillset. Learn how to bring your ideas to life."

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

- Benjamin den Boer, Framer Product Designer

▣ 1장: 왜 프로토타이핑인가

프로토타이핑이란

- 인터페이스, UX 디자인에서의 프로토타이핑

- 하이피델리티 프로토타이핑

하이피델리티 프로토타이핑 도구의 등장

- 인터페이스 디자인 도구의 혁신

- 나에게 맞는 프로토타이핑 도구 선택하기

Framer를 이용한 프로토타이핑

- 왜 Framer인가

- 디자이너가 Framer를 배워야 하는가

- 네이버에서는 Framer를 어떻게 활용하는가



▣ 2장: 프로토타이핑 시작하기

프로토타이핑 도구 준비

커피스크립트 이해하기

- 코드 기본 문법

- 오류 찾기

- 변수

- 조건문

- 배열과 반복문

- 함수

- 객체

- 유효범위

이미지 리소스 준비하기

- 디자인 파일 불러오기

- 불러온 레이어에 이름 붙이기

- 뷰어 설정하기

- 기기/브라우저로 확인하기

레이어 개념 이해하기

- Framer의 레이어 개념 이해

- 속성

- 위치와 크기

- 계층 관계

정리



▣ 3장: 이벤트와 애니메이션을 이용한 인터랙션 만들기

애니메이션

이벤트

머티리얼 디자인 인터랙션 만들기

플로팅 액션 버튼 인터랙션 만들기

애니메이션 저장하기

정리



▣ 4장: 사이드 메뉴가 있는 인터페이스 만들기

상태

- 상태 추가

- 상태 전환

- 상태 삭제 및 덮어쓰기

좌우 사이드 메뉴가 있는 네이버 앱 구조 만들기

정리



▣ 5장: 퀵 메뉴 만들기

드래그

- 제한 범위

- 오버드래그, 바운스, 모멘텀

- 드래그 이벤트

- 드래그 애니메이션

네이버 앱 퀵 메뉴 만들기

편집 모드의 순서 편집 기능 만들기

정리



▣ 6장: 브라우저 스크롤 인터랙션 만들기

스크롤

- 스크롤 컴포넌트

- 콘텐츠인셋

- 래핑

- 스크롤 이벤트

- 스크롤 애니메이션 이벤트

스크롤해서 바 숨기기 인터랙션 만들기

스크롤해서 내비게이션 디자인 바꾸기

정리



▣ 7장: 좌우 페이지 인터랙션 만들기

페이지

- 페이지 컴포넌트

- 페이지 추가하기

- 래핑

- 포커스와 페이지 순서

- 페이지 인디케이터

네이버 앱 페이지 구조 만들기

워크스루 만들기

정리



▣ 8장: 스크롤하면 크기가 변하는 헤더 만들기

모듈레이트

스크롤 위치에 따라 요소가 변하는 헤더 만들기

정리



▣ 9장: 스티키 헤더 인터랙션 만들기

체인지 이벤트

스티키 헤더 만들기

정리



▣ 10장: 슬라이더로 미디어 플레이어 조정하기

슬라이더 컴포넌트

비디오 플레이어 만들기

정리



▣ 11장: 스틸컷 디자인에서 인터랙션까지

네이버 앱 콘셉트 디자인

네이버 앱 콘셉트 프로토타입 만들기



▣ 12장: 마치며

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