★ 이 책에서 다루는 내용 ★ ■ 디자이너 기획자처럼 개발 언어를 전혀 모르는 사람을 위해 코드의 기초 설명 ■ 디자인 실무에서 인터랙션 실무까지 프로토타이핑 연동 방법의 순차적 설명 ■ 효과적인 인터랙션을 만들기 위한 방법 ■ 프레이머의 주요한 기능을 각 장마다 설명 ■ 프레이머의 주요한 기능을 실무에서 효과적으로 사용할수 있도록 각 장마다 실전 예제 수록 ■ 실무에서 프레이머를 사용할 때 꼭 필요한 기능 ■ 실무에서 프레이머를 사용할 때 발생하는 문제 해결을 위한 실무 팁 수록 ★ 이 책의 대상 독자 ★ ■ 코드를 전혀 다룰줄 모르지만 배우고 싶어하는 UX관련 실무자 또는 학생 ■ 본인이 디자인한 화면에 인터랙션을 만들고 싶어하는 디자이너 ■ 개발자와의 원할한 소통을 위해 프로토타이핑을 배우고 싶어하는 UX 실무자 또는 학생 ★ 지은이의 말 ★ 몇 년 전부터 디자인 업계에서 프로토타이핑에 대한 열기가 뜨겁다. 디자인 트렌드가 빠르게 바뀌고 있어서 서비스의 제작에서 론칭 시기까지의 한 호흡이 이전보다 줄어들었고, 사용자의 눈높이가 높아져서 정적인 디자인을 동적으로 보여주는 방식을 선호하게 됐기 때문이다. 대부분의 디자이너들이 본인이 만든 디자인에 대한 프로세스를 보여주기 위해 프로토타입 툴 1개씩은 다뤄봤을 것이다. 그만큼 프로토타입에 대한 관심도가 높아졌다는 의미일 것이다. 프레이머는 프로토타입 툴 중에서 독보적인 위치에 있는 하이피델리티 프로토타입 툴이다. 거의 모든 인터랙션을 구현할 수 있는 자유도를 갖고 있으며, 글로벌 회사에서 이미 다양하게 사용하고 있다. 우리도 많은 프로토타입 툴을 써봤지만, 프레이머처럼 인터랙션 표현에 자유도가 높은 툴은 많지 않다. 하지만 코드 베이스이기 때문에 디자이너가 다루기 어렵다는 단점이 있다. 또한 시중에서 프레이머에 관련된 제대로 된 자료를 구하기도 어렵다. 책이 많지 않을 뿐만 아니라 한글로 된 자료들도 없다. 페이스북 프레이머 커뮤니티에서 정보를 구할 수는 있지만, 그것 또한 자료가 산발적이라 초보자들이 차근차근 시작하기에는 어려울 것이다. 이 책은 그러한 분들에게 좋은 디딤돌이 될 수 있다. 우리가 인터랙션 업종에 재직하면서, 그리고 프레이머 코드를 배우면서 익혔던 나름의 노하우를 책 한 권에 담으려고 노력했다. 사실 우리도 디자이너 출신으로 코드를 익혔기 때문에 디자이너가 느끼는 코드에 대한 부담감을 잘 알고 있다. 그렇기 때문에 책을 쓰면서 ‘어떻게 하면 좀 더 디자이너들의 코드에 대한 거부감을 없앨 수 있을까?’라는 고민을 정말 많이 했다. 이 책의 내용만 이해하더라도 프레이머를 실무에서 자유자재로 쓸 수 있을 것이다.

1장. 들어가며 __변화하고 있는 디자인 프로세스 __Lean UX 디자인 프로세스 __왜 프로토타이핑을 하는가? __어떤 프로토타입 툴을 써야 할까? __왜 프레이머인가? __어떻게 시작하는 것이 좋을까? 2장. 커피스크립트 문법 알아보기 __변수 __조건문 ____if문 ____if ... else문 ____if ... else if ... else __연산자 ____산술 연산자 ____관계 연산자 __반복문 __함수 ____함수 선언과 호출 ____매개변수를 갖는 함수 __주석 처리 3장. 프레이머 시작하기 __프레이머 인스톨하기 ____프레이머 홈페이지 접속 ____다운로드 페이지 ____프레이머 설치하기 ____프레이머 실행하기 __프레이머 기본 화면 알아보기 - v.89 ____1. 오토코드 ____2. Import, Docs, Inspect ____3. 코드 입력 창 ____4. 프리뷰 창 ____5. 레이어 창 ____6. 업로드 버튼 __프레이머 기본 화면 알아보기 ? v.90 이상 ____1. 디자인 탭, 코드 탭 ____2. 툴 탭 ____3. 레이어 탭 ____4. Canvas ____5. Properties ____이미지 레이어 만들기 ____코드 탭 __포토샵에서 프레이머로 임포트하기 ____PSD 파일 레이어 정리 ____프레이머에서 임포트하기 ____확인하기 ____요약 __프레이머 홈페이지 알아보기 ____Features 페이지 ____Examples 페이지 ____Get Started 페이지 ____Community 페이지 ____Blog 페이지 ____Pricing ____Free Trial 4장. 레이어 __레이어 알아보기 ____Print ____레이어 생성과 수정 ____Layer 좌표 ____Layer 크기 ____레이어 회전 ____레이어 시각화 ____레이어 구조 만들기 ____레이어 스타일 ____그 외 적용 가능한 스타일 레이어 스타일 종류 __텍스트 레이어 ____텍스트 레이어 문자 입력 ____텍스트 레이어 폰트 스타일 ____텍스트 레이어 정렬 ____텍스트 레이어 줄 간격, 문장 간격, 자간 ____텍스트 레이어 대문자, 소문자 ____텍스트 레이어 언더라인, 그림자 4장. 레이어 실전 예제 __레이어 만들기로 상단 내비게이션 바 만들기 __레이어 사이즈 입력하기 __레이어 배경 색상 입력하기 __이미지 레이어 사용하기 __원 형태의 레이어 만들기 __레이어 순서 변경하기 __레이어에 텍스트 입력하기 __전체 코드 5장. 애니메이션 __Animation ____단일 오브젝트에 애니메이션 만들기 ____애니메이션 가능한 속성 ____애니메이션 타이밍 설정하기 ____커브 속성 조절하기 ____오토코드를 이용해 애니메이션 추가 / 수정하기 ____애니메이션 저장해 호출하기 ____애니메이션 거꾸로 재생하기 ____다중 애니메이션 설정 5장. Animation 실전 예제 ____배경 이미지 애니메이션 만들기 ____로고 애니메이션에 시간과 커브 값 입력하기 ____오토코드 애니메이션 만들기 ____함수를 이용해 다중 애니메이션으로 로그인 화면 완성하기 ____전체 코드 6장. 스테이트 __스테이트를 사용해 애니메이션 만들기 ____states 사용하기 ____Cycle state ____states switch ____states previous, current, next ____states remove ____states animationOptions 6장. 스테이트 실전 예제 ____X 버튼에 ON, OFF 스테이트 추가하기 ____X 버튼의 초기 상태 off로 변환하기 ____X 버튼 클릭 이벤트 추가 ____스테이트 애니메이션 옵션 추가하기 ____하단 트윗 정보 스테이트 추가하기 ____전체 코드 7장. 드래그 __드래그 알아보기 ____드래그 활성화 ____드래그 방향 설정 ____드래그 속도 설정 ____드래그 영역 설정 ____드래그 bounce ____directionLock ____direction ____isDragging ____propagateEvents 7장. 드래그 실전 예제 ____카드 레이어 드래그 활성화 ____드래그 가속도 반동 설정하기 ____드래그 영역 지정하기 ____드래그 속도 조절하기 ____오버 드래그 조절하기 ____드래그 탄성 설정하기 ____전체 코드 8장. 스크롤 컴포넌트 __스크롤 알아보기 ____Scroll component 만들기 ____Wrap scroll ____스크롤 방향 잠금 ____Scroll content inset ____Scroll speed ____스크롤 활성/ 비활성화 ____Scroll X, Y ____Scroll point ____Scroll velocity ____Scroll is draging, is moving ____Scroll direction ____Scroll directionLock ____Scroll angle ____Scroll to point, scroll to layer ____마우스 휠 활성화 ____Scroll propagate event 8장. 스크롤 컴포넌트 실전 예제 ____스크롤 컴포넌트 만들기 ____스크롤 컴포넌트 안에 콘텐츠 넣기 ____좌우 스크롤 막기 ____wrap을 이용해 스크롤 컴포넌트 빠르게 만들기 ____contentInset을 이용해 스크롤에 여백 적용하기 ____동시 드래그되는 스크롤 컴포넌트 해결하기 ____나머지 레이어 ____전체 코드 9장. 페이지 컴포넌트 __페이지 알아보기 ____페이지 컴포넌트 만들기 ____addPage로 페이지 추가하기 ____Parent로 페이지 추가하기 ____반복문으로 여러 페이지 만들기 ____페이지에 이벤트 추가하기 ____특정 페이지로 이동하기 - 1 ____특정 페이지로 이동하기 ? 2 9장. 페이지 컴포넌트 실전 예제 ____페이지 컴포넌트 만들기 ____상하 페이지 콘텐츠 넣기 ____좌우 페이지 컴포넌트 만들기 ____페이지 컴포넌트 옵션 적용하기 ____페이지 인디케이터 연결하기 ____전체 코드 10장. 핀치 __핀치 알아보기 ____layer.pinchable.enabled ____layer.pinchable.threshold ____layer.pinchable.centerOrigin ____layer.pinchabel.scale ____layer.pinchable.scaleincrements ____layer.pinchable.minScale, maxScale ____layer.pinchable.scaleFactor ____layer.pinchable.rotate ____layer.pinchable.rotateIncrements ____layer.pinchable.rotateFactor 10장. 핀치 실전 예제 ____예제 파일 열기 ____맵 이미지에 draggable 적용하기 ____Draggable Contraints 적용하기 ____Pinchable 적용하기 ____최소/최대 핀치 스케일 정하기 ____컴파스 움직이기 11장. 슬라이더 컴포넌트 __슬라이더 알아보기 ____Slider Component ____slider.knob ____Slider.fill ____Slider.value ____Slider.min / slider.max ____Slider.pointForValue / valueForPoint ____Slider.animateToValue ____rangerSlider 컴포넌트 ____rangerSlider 컴포넌트 최솟값/최댓값 및 색상 설정하기 11장. 슬라이더 실전 예제 ____Slider Component 만들기 ____슬라이더에 기능 적용하기 ____슬라이더 컬러 변경하기 ____슬라이더 최솟값/최댓값 변경하기 ____슬라이더 버튼 수정하기 ____전체 코드 12장. 플로우 컴포넌트 __플로우 알아보기 ____플로우 컴포넌트 만들기 ____showPrevious() ____overlayCenter(), overlayTop(), overlayRight(), overlayBottom(), overlayLeft() ____플로우 트랜지션으로 애니메이션 옵션 정하기 12장. 플로우 실전 예제 ____플로우 컴포넌트 만들기 ____첫 번째 화면 플로우에 올리기 ____Next 버튼을 눌러 다음 화면으로 이동하기 ____느낌표 버튼에 상단 오버레이 넣기 ____나머지 화면에도 적용 ____전체 코드 13장. 이벤트 __이벤트 알아보기 ____이벤트 만들기 ____이벤트의 종류 13장. 클릭 이벤트 실전 예제 ____DAILY CHECK 버튼 이벤트 만들기 ____팝업 애니메이션 넣기 ____팝업 레이어 닫기 ____좌측 menu 버튼 이벤트 만들기 ____Schedule 화면 닫기 ____전체 코드 13장. 체인지 이벤트 실전 예제 ____메인 페이지 컴포넌트 만들기 ____타이틀 페이지 컴포넌트 만들기 ____Portrait 페이지 컴포넌트 만들기 ____인디케이터 배열 만들기 ____Change 이벤트 만들기 ____페이지 인디케이터 이벤트 ____타이틀 페이지 컴포넌트 이벤트 만들기 ____Change :x 이벤트 만들기 ____애니메이션 End 이벤트 만들기 ____전체 코드 14장. 유틸스 __유틸스 알아보기 ____모듈레이트 ____사이클 ____labelLayer ____round ____randomChoice ____randomColor ____randomimage ____randomNumberdelay ____interval ____debounce 14장. 유틸스 모듈레이트 실전 예제 ____예제 파일 불러오기 ____스크롤 이벤트 만들기 ____검색 창 스크롤 이벤트 ____배경 이미지 스크롤 이벤트 ____모듈레이트 반복문 사용하기 15장. 미디어 __오디오 파일 사용하기 ____글로벌 레이어 만들기 ____오디오 소스 사용하기 ____이퀼라이저 애니메이션 만들기 ____오디오 체인지 ____전체 코드 __비디오 파일 사용하기 ____예제 파일 열기 ____영상 파일 임포트하기 ____영상 파일 루핑 활성화하기 ____슬라이더와 영상 재생 시간 연결하기 ____슬라이더 드래그 이벤트 만들기 ____Play Pause 버튼 연결하기 ____무비 레이어 마스크 ____다중 영상 임포트 ____현재 영상 설정하고 재생하기 ____함수 만들어 슬라이더 이벤트 실행하기 ____영상 교체 버튼 만들기 ____슬라이더 이벤트 다중 영상 레이어에 적용하기 부록. 실무 팁 __실무 팁 1. 임포트 레이어 이름 축약하기 __실무 팁 2. 절대 좌표 ____스크롤 및 레이어 만들기 ____레이어에 변수 추가하기 ____이벤트 만들기 ____전체 코드 __실무 팁 3. 반복문을 이용해 바둑판식 배열하기 ____일반적인 반복문 레이어 배치 ____바둑판식 배열하기 ____바둑판식 페이지 컴포넌트 만들기 ____3차원 배열 만들기 __실무 팁 4. 충돌 테스트 ____드래그 레이어 만들기 ____충돌 테스트 함수 만들기 ____hitTest를 이용해 이벤트 만들기 ____전체 코드 ____충돌 테스트 실전 예제 ____카메라 아이콘 드래그 적용하기 ____HitTest 함수 만들기 ____드래그 이벤트 만들기 ____전체 코드 __실무 팁 5. 폰트 사용하기(웹 폰트, 로컬 폰트) ____웹 폰트 사용하기 ____레이어 만들기 ____구글 폰트 이용하기 ____초 간격으로 반복되는 이벤트 만들기 ____전체 코드 ____로컬 폰트 사용하기 ____폰트 폴더 만들기 ____텍스트 레이어 만들기 ____로컬 폰트 적용하기 __실무 팁 6. 폰 회전하기 ____레이어 배열 만들기 ____Portrait, Landscape 함수 만들기 ____좌/우측 회전 ____프레이머 가상 기기와 실제 기기 ____전체 코드 __실무 팁 7. 스프라이트 시트 애니메이션 사용하기