모바일 앱 프로토타이핑
Framer를 활용한 인터랙션 디자인
- 김정민, 오경식 지음
- [email protected] 시리즈_014
- ISBN: 9791158390587
- 22,000원 | 2017년 3월 27일 발행 | 256쪽
디자이너가 머릿속에서 완성한 인터랙션을 개발자에게 정확하게 전달하기는 생각보다 쉽지 않다. 자신이 생각한 디자인을 완벽하게 구현할 수 있는 사람은 디자이너 본인뿐이다. 디자이너가 움직이는 프로토타입을 직접 만들 수 있다면 완제품과 디자인 사이의 괴리를 스스로 줄여 나갈 수 있다.
이 책은 실제 네이버 앱에 적용된 다양한 인터랙션을 대표적인 프로토타이핑 도구인 Framer를 이용해 만드는 방법을 설명한다. 이 책의 예제를 하나씩 따라 하다 보면 어느새 새로운 인터랙션 디자인의 세계에 눈뜨게 될 것이다.
이 책에서는 다음과 같은 내용을 다룬다.
- 프로토타이핑은 무엇이며 왜 필요한지 설명하고, 다양한 프로토타이핑 도구 중에서 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
상세 이미지
김정민
네이버와 SK커뮤니케이션즈에서 여러 디지털 제품을 만들었다. 2017년 현재 네이버 앱 프로덕트 디자이너로 일하고 있다. 디지털 제품, 인터랙티브 디자인과 관련된 커뮤니티에서 종종 활동한다.
오경식
2008년부터 네이버에서 여러 가지 웹 서비스를 만들었다. 2017년 현재 네이버 PC/모바일 메인 개발자로 일하고 있으며 프로토타이핑을 비롯한 새로운 기술에 관심이 많다.
- ▣ 1장: 왜 프로토타이핑인가
- 프로토타이핑이란
- 인터페이스, UX 디자인에서의 프로토타이핑
- 하이피델리티 프로토타이핑
- 하이피델리티 프로토타이핑 도구의 등장
- 인터페이스 디자인 도구의 혁신
- 나에게 맞는 프로토타이핑 도구 선택하기
- Framer를 이용한 프로토타이핑
- 왜 Framer인가
- 디자이너가 Framer를 배워야 하는가
- 네이버에서는 Framer를 어떻게 활용하는가
- 프로토타이핑이란
- ▣ 2장: 프로토타이핑 시작하기
- 프로토타이핑 도구 준비
- 커피스크립트 이해하기
- 코드 기본 문법
- 오류 찾기
- 변수
- 조건문
- 배열과 반복문
- 함수
- 객체
- 유효범위
- 이미지 리소스 준비하기
- 디자인 파일 불러오기
- 불러온 레이어에 이름 붙이기
- 뷰어 설정하기
- 기기/브라우저로 확인하기
- 레이어 개념 이해하기
- Framer의 레이어 개념 이해
- 속성
- 위치와 크기
- 계층 관계
- 정리
- ▣ 3장: 이벤트와 애니메이션을 이용한 인터랙션 만들기
- 애니메이션
- 이벤트
- 머티리얼 디자인 인터랙션 만들기
- 플로팅 액션 버튼 인터랙션 만들기
- 애니메이션 저장하기
- 정리
- ▣ 4장: 사이드 메뉴가 있는 인터페이스 만들기
- 상태
- 상태 추가
- 상태 전환
- 상태 삭제 및 덮어쓰기
- 좌우 사이드 메뉴가 있는 네이버 앱 구조 만들기
- 정리
- 상태
- ▣ 5장: 퀵 메뉴 만들기
- 드래그
- 제한 범위
- 오버드래그, 바운스, 모멘텀
- 드래그 이벤트
- 드래그 애니메이션
- 네이버 앱 퀵 메뉴 만들기
- 편집 모드의 순서 편집 기능 만들기
- 정리
- 드래그
- ▣ 6장: 브라우저 스크롤 인터랙션 만들기
- 스크롤
- 스크롤 컴포넌트
- 콘텐츠인셋
- 래핑
- 스크롤 이벤트
- 스크롤 애니메이션 이벤트
- 스크롤해서 바 숨기기 인터랙션 만들기
- 스크롤해서 내비게이션 디자인 바꾸기
- 정리
- 스크롤
- ▣ 7장: 좌우 페이지 인터랙션 만들기
- 페이지
- 페이지 컴포넌트
- 페이지 추가하기
- 래핑
- 포커스와 페이지 순서
- 페이지 인디케이터
- 네이버 앱 페이지 구조 만들기
- 워크스루 만들기
- 정리
- 페이지
- ▣ 8장: 스크롤하면 크기가 변하는 헤더 만들기
- 모듈레이트
- 스크롤 위치에 따라 요소가 변하는 헤더 만들기
- 정리
- ▣ 9장: 스티키 헤더 인터랙션 만들기
- 체인지 이벤트
- 스티키 헤더 만들기
- 정리
- ▣ 10장: 슬라이더로 미디어 플레이어 조정하기
- 슬라이더 컴포넌트
- 비디오 플레이어 만들기
- 정리
- ▣ 11장: 스틸컷 디자인에서 인터랙션까지
- 네이버 앱 콘셉트 디자인
- 네이버 앱 콘셉트 프로토타입 만들기
- ▣ 12장: 마치며
예제코드 관련 GitHub 페이지
- GitHub 페이지: https://github.com/wikibook/framer
- ZIP 형식으로 다운로드: https://github.com/wikibook/framer/archive/master.zip
108쪽, 페이지 하단 예제 코드를 다음 코드로 수정
# 배경 및 레이어 만들기 background = new BackgroundLayer backgroundColor: "#28affa" # 대화상자 레이어 dialog = new Layer width: 400, height: 600 backgroundColor: "#FFF" y: 300 clip: true dialog.center() # 버튼 레이어 btn = new Layer width: 60, height: 60 backgroundColor: "#0D47A1" x: dialog.x y: dialog.y + 620
109쪽, 상단 예제 코드를 다음 코드로 수정
# 클릭 애니메이션 레이어 circle = new Layer width: 1000, height: 1000 backgroundColor: "#ececec" borderRadius: 500 x: Align.center y: Align.center parent: dialog
111~112쪽 예제 코드
Utils.delay 0.5 뒤에 콤마
,
추가==>
Utils.delay 0.5
,
178쪽, 13번째 줄 예제 코드
page.snapToPage(
pageTwo
) ==> page.snapToPage(layerB
)178쪽, 15번째 줄 예제 코드
page.snapToPage(
pageTwo
, true, curve: "spring(200,25,0)")==>
page.snapToPage(
layerB
, true, curve: "spring(200,25,0)")180쪽, 예제 중 밑에서 2번째 줄
parent:
indicotorParent
==> parent:indicatorParent
184쪽, 본문 2번째 예제 코드에서 6번째 줄
pageContent
.on "change:currentPage", ->==>
page
.on "change:currentPage", ->188쪽, 2번째 예제 코드에서 밑에서 2번째 줄
else if ==> else
194쪽, 첫 번째 예제의 1~3번째 줄을 다음과 같이 교체
# 카드 선택 모드 이벤트(함수) # 상태 애니메이션을 실행한다. txtPages.visible = false
==>
# 카드 선택 모드 이벤트(함수) # 상태 애니메이션을 실행한다. page05 = -> txtPages.visible = false
200쪽, 본문 2번째 예제 코드에서 2번째 줄
scroll = ScrollComponent.wrap(
Layers
.content)==>
scroll = ScrollComponent.wrap(
psd
.content)202쪽, 밑에서 2번째 줄
scroll = ScrollComponent.wrap(
Layers
.content)==>
scroll = ScrollComponent.wrap(
psd
.content)