몇 년전부터 디자인 업계에서 프로토타이핑에 대한 열기가 뜨겁다. 많은 프로토타이핑 도구 중 프레이머는 독보적인 하이피텔리 프로토타이핑 툴로 가지고 있는 아이디어와 생각을 프레이머로 자유롭게 표출할 수 있다. 코드가 어려워서, 인터랙션이 어려워서 프로토타이핑 제작이 힘들다고 생각하는 디자이너 및 기획자에게 이 책이 확실한 길라잡이 역할을 해 줄 것이다.

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. 스프라이트 시트 애니메이션 사용하기

박재환