디지털 서비스에서 인터랙션은, 서비스 전체의 인상을 좌우할 수도 있을만큼 중요한 부분입니다.그렇기에 과거에는 인터랙션을 개발의 영역으로 많이 생각했지만, 이제는 기획자와 디자이너도 함께 고민하는 경우가 많은데요,프레이머는 개발 언어에 대한 이해가 없는 사람도 디테일한 인터랙션을 구현할 수 있는 훌륭한 툴입니다.물론 개발자 분들에게도 빠른 시간에 인터랙션의 느낌을 확인할 수 있는 멋진 프로토타이핑 툴이구요.플린토/인비전 등의 Flow를 빠르게 확인하기 위한 툴들도 있지만 훨씬 더 높은 자유도를 제공한다는 점에서 다들 프레이머의 매력에 푹 빠지실거에요. 스케치와의 연동도 매우 좋구요. 프레이머에 대한 소개는 이 정도로 하고, 이 책의 장점에 대해 소개를 한다면요,첫번째는 실제 인터랙션을 구현하는 과정에 기반하여 설명되어 있다는 점입니다.프레이머 홈페이지의 Docs를 참고하면 여러 코드들과 함수들이 설명되어 있는데요,물론 그걸 완벽하게 숙지하면 좋긴 하겠으나 어떤 상황에서 어떻게 각 코드가 쓰이는지 알기가 어렵기 때문에 한계가 있습니다.그러나 이 책은 단순히 coffeescript(프레이머의 언어)에 대한 설명이 아니라 스크롤, 페이징, 사이드메뉴, 플로팅 버튼, 슬라이더 등 예제 기반으로 설명이 되어있어서 훨씬 따라가기가 쉽습니다. 물론 처음에 책을 훑어보면 코드가 나열되어 있는 모습에 지레 겁을 먹을 수도 있지만,차근차근 따라하면 대부분의 예제를 무리 없이 완성시킬 수 있습니다.인상깊었던 부분은 구현 과정에서 초보자가 할 수 있는 실수도 같이 짚어준다는 점입니다.그래서 더 친절하고, 사고의 흐름에 맞게 책이 작성되었다는 느낌입니다.(물론 가끔 어려운 코드가 튀어나와서 당황할때도 있지만, 어려운 부분은 또 어렵다고 미리 말해주십니다^^;;)두번째는 실제 작업을 해볼 수 있도록 Framer코드 샘플 및 PSD파일까지 다운로드가 가능합니다.인터랙션을 구현하려면 그 기반이 되는 디자인 파일이 있어야 하는데, PSD파일을 제공하므로 매우 편합니다.아마 책만 보다보면 머릿속에 남는 것이 하나도 없을 수도 있습니다, 이해도 어렵구요.컴퓨터와 책을 같이 놓고 하나하나 코드를 실제 작성해보시는 방법을 추천드립니다.저의 경우 설령 책에 있는 코드를 그대로 옮길 지라도, 제가 직접 인터랙션을 구현한 뒤 정답 코드와 비교해보는 방식을 사용했습니다.이렇게 하다보면 나중에는 책을 보지 않고도 기본적인 코드는 작성할 수 있는 수준이 됩니다.답을 먼저 보기보다는 시간이 걸리더라도 자력으로 먼저 할수있는데까지 해보고, 막히는 부분에서 책을 보는걸 추천드립니다. 코드는 작성하는 사람에 따라 스타일이 다를 수 있기 때문에, 책에 실린 코드가 꼭 정답은 아니니까요. 마지막으로는 초판인 책이라 그런지 약간의 오타 등이 있긴 하나, 사이트를 통해 지속적으로 수정 내역이 안내된다는 점입니다.물론 다음번 인쇄에서는 오타가 전혀 없는 완벽한 버전이 되길 기대해봅니다^^ 아직도 프레이머가 어려울까봐 시작을 못하셨다면 이 책을 통해 바로 시작해보세요!저도 개발 언어에 무지했으나 이 책을 통해 프레이머와 친해졌으니까요, 대신 이 책만으로 마스터할 수 있는 툴은 아니므로 꾸준한 연습과 공부가 필요할 것 같아요.포토샵과 같은 다른 오래된 툴과 달리 프레이머는 비교적 최신 툴이라 국내에 관련 서적이 거의 없어서 항상 아쉬웠는데요, 이 책을 필두로 앞으로 더 많은 좋은 프레이머 책들이 나오길 바래봅니다. <이 글은 TECH@NAVER 서평 작성 이벤트에 응모하여 받은 도서를 읽고 작성했습니다.>
디자이너가 머릿속에서 완성한 인터랙션을 개발자에게 정확하게 전달하기는 생각보다 쉽지 않다. 자신이 생각한 디자인을 완벽하게 구현할 수 있는 사람은 디자이너 본인뿐이다. 디자이너가 움직이는 프로토타입을 직접 만들 수 있다면 완제품과 디자인 사이의 괴리를 스스로 줄여 나갈 수 있다.이 책은 실제 네이버 앱에 적용된 다양한 인터랙션을 대표적인 프로토타이핑 도구인 Framer를 이용해 만드는 방법을 설명한다. 이 책의 예제를 하나씩 따라 하다 보면 어느새 새로운 인터랙션 디자인의 세계에 눈뜨게 될 것이다.이 책에서는 다음과 같은 내용을 다룬다.◎ 프로토타이핑은 무엇이며 왜 필요한지 설명하고, 다양한 프로토타이핑 도구 중에서 Framer를 선정한 이유를 소개한다.◎ Framer를 사용할 때 필요한 커피스크립트의 기초 개념을 소개한다. ◎ 네이버 앱에 적용된 다양한 인터랙션을 만들어 본다.- 이벤트와 애니메이션을 이용한 인터랙션 만들기- 사이드 메뉴가 있는 인터페이스 만들기- 퀵 메뉴 만들기- 브라우저 스크롤 인터랙션 만들기- 좌우 페이지 인터랙션 만들기- 스크롤하면 크기가 변하는 헤더 만들기- 스티키 헤더 인터랙션 만들기- 슬라이더로 미디어 플레이어 조정하기
1장: 왜 프로토타이핑인가
프로토타이핑이란
- 인터페이스, UX 디자인에서의 프로토타이핑
- 하이피델리티 프로토타이핑
하이피델리티 프로토타이핑 도구의 등장
- 인터페이스 디자인 도구의 혁신
- 나에게 맞는 프로토타이핑 도구 선택하기
Framer를 이용한 프로토타이핑
- 왜 Framer인가
- 디자이너가 Framer를 배워야 하는가
- 네이버에서는 Framer를 어떻게 활용하는가
2장: 프로토타이핑 시작하기
프로토타이핑 도구 준비
커피스크립트 이해하기
- 코드 기본 문법
- 오류 찾기
- 변수
- 조건문
- 배열과 반복문
- 함수
- 객체
- 유효범위
이미지 리소스 준비하기
- 디자인 파일 불러오기
- 불러온 레이어에 이름 붙이기
- 뷰어 설정하기
- 기기/브라우저로 확인하기
레이어 개념 이해하기
- Framer의 레이어 개념 이해
- 속성
- 위치와 크기
- 계층 관계
정리
3장: 이벤트와 애니메이션을 이용한 인터랙션 만들기
애니메이션
이벤트
머티리얼 디자인 인터랙션 만들기
플로팅 액션 버튼 인터랙션 만들기
애니메이션 저장하기
정리
4장: 사이드 메뉴가 있는 인터페이스 만들기
상태
- 상태 추가
- 상태 전환
- 상태 삭제 및 덮어쓰기
좌우 사이드 메뉴가 있는 네이버 앱 구조 만들기
정리
5장: 퀵 메뉴 만들기
드래그
- 제한 범위
- 오버드래그, 바운스, 모멘텀
- 드래그 이벤트
- 드래그 애니메이션
네이버 앱 퀵 메뉴 만들기
편집 모드의 순서 편집 기능 만들기
정리
6장: 브라우저 스크롤 인터랙션 만들기
스크롤
- 스크롤 컴포넌트
- 콘텐츠인셋
- 래핑
- 스크롤 이벤트
- 스크롤 애니메이션 이벤트
스크롤해서 바 숨기기 인터랙션 만들기
스크롤해서 내비게이션 디자인 바꾸기
정리
7장: 좌우 페이지 인터랙션 만들기
페이지
- 페이지 컴포넌트
- 페이지 추가하기
- 래핑
- 포커스와 페이지 순서
- 페이지 인디케이터
네이버 앱 페이지 구조 만들기
워크스루 만들기
정리
8장: 스크롤하면 크기가 변하는 헤더 만들기
모듈레이트
스크롤 위치에 따라 요소가 변하는 헤더 만들기
정리
9장: 스티키 헤더 인터랙션 만들기
체인지 이벤트
스티키 헤더 만들기
정리
10장: 슬라이더로 미디어 플레이어 조정하기
슬라이더 컴포넌트
비디오 플레이어 만들기
정리
11장: 스틸컷 디자인에서 인터랙션까지
네이버 앱 콘셉트 디자인
네이버 앱 콘셉트 프로토타입 만들기
12장: 마치며