디자이너를 위한 프레이머 (코드를 몰라도 실무 예제를 중심으로 따라 하며 배우는)

박재환

저자박재환은국민대학교시각디자인과를졸업하고알티캐스트GUI디자이너로근무했다.이후라인에서인터랙션디자이너로재직했으며,현재는스노우에서선행개발팀에재직중이다.UX디자인,인터랙션디자인뿐만아니라ARVR같은신기술에도관심이많다.

1장.들어가며

__변화하고있는디자인프로세스
__LeanUX디자인프로세스
__왜프로토타이핑을하는가?
__어떤프로토타입툴을써야할까?
__왜프레이머인가?
__어떻게시작하는것이좋을까?

2장.커피스크립트문법알아보기

__변수
__조건문
____if문
____if...else문
____if...elseif...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페이지
____GetStarted페이지
____Community페이지
____Blog페이지
____Pricing
____FreeTrial

4장.레이어

__레이어알아보기
____Print
____레이어생성과수정
____Layer좌표
____Layer크기
____레이어회전
____레이어시각화
____레이어구조만들기
____레이어스타일
____그외적용가능한스타일레이어스타일종류
__텍스트레이어
____텍스트레이어문자입력
____텍스트레이어폰트스타일
____텍스트레이어정렬
____텍스트레이어줄간격,문장간격,자간
____텍스트레이어대문자,소문자
____텍스트레이어언더라인,그림자

4장.레이어실전예제

__레이어만들기로상단내비게이션바만들기
__레이어사이즈입력하기
__레이어배경색상입력하기
__이미지레이어사용하기
__원형태의레이어만들기
__레이어순서변경하기
__레이어에텍스트입력하기
__전체코드

5장.애니메이션

__Animation
____단일오브젝트에애니메이션만들기
____애니메이션가능한속성
____애니메이션타이밍설정하기
____커브속성조절하기
____오토코드를이용해애니메이션추가/수정하기
____애니메이션저장해호출하기
____애니메이션거꾸로재생하기
____다중애니메이션설정

5장.Animation실전예제

____배경이미지애니메이션만들기
____로고애니메이션에시간과커브값입력하기
____오토코드애니메이션만들기
____함수를이용해다중애니메이션으로로그인화면완성하기
____전체코드

6장.스테이트

__스테이트를사용해애니메이션만들기
____states사용하기
____Cyclestate
____statesswitch
____statesprevious,current,next
____statesremove
____statesanimationOptions

6장.스테이트실전예제
____X버튼에ON,OFF스테이트추가하기
____X버튼의초기상태off로변환하기
____X버튼클릭이벤트추가
____스테이트애니메이션옵션추가하기
____하단트윗정보스테이트추가하기
____전체코드

7장.드래그

__드래그알아보기
____드래그활성화
____드래그방향설정
____드래그속도설정
____드래그영역설정
____드래그bounce
____directionLock
____direction
____isDragging
____propagateEvents

7장.드래그실전예제

____카드레이어드래그활성화
____드래그가속도반동설정하기
____드래그영역지정하기
____드래그속도조절하기
____오버드래그조절하기
____드래그탄성설정하기
____전체코드

8장.스크롤컴포넌트

__스크롤알아보기
____Scrollcomponent만들기
____Wrapscroll
____스크롤방향잠금
____Scrollcontentinset
____Scrollspeed
____스크롤활성/비활성화
____ScrollX,Y
____Scrollpoint
____Scrollvelocity
____Scrollisdraging,ismoving
____Scrolldirection
____ScrolldirectionLock
____Scrollangle
____Scrolltopoint,scrolltolayer
____마우스휠활성화
____Scrollpropagateevent

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적용하기
____DraggableContraints적용하기
____Pinchable적용하기
____최소/최대핀치스케일정하기
____컴파스움직이기

11장.슬라이더컴포넌트

__슬라이더알아보기
____SliderComponent
____slider.knob
____Slider.fill
____Slider.value
____Slider.min/slider.max
____Slider.pointForValue/valueForPoint
____Slider.animateToValue
____rangerSlider컴포넌트
____rangerSlider컴포넌트최솟값/최댓값및색상설정하기

11장.슬라이더실전예제

____SliderComponent만들기
____슬라이더에기능적용하기
____슬라이더컬러변경하기
____슬라이더최솟값/최댓값변경하기
____슬라이더버튼수정하기
____전체코드

12장.플로우컴포넌트

__플로우알아보기
____플로우컴포넌트만들기
____showPrevious()
____overlayCenter(),overlayTop(),overlayRight(),overlayBottom(),overlayLeft()
____플로우트랜지션으로애니메이션옵션정하기

12장.플로우실전예제

____플로우컴포넌트만들기
____첫번째화면플로우에올리기
____Next버튼을눌러다음화면으로이동하기
____느낌표버튼에상단오버레이넣기
____나머지화면에도적용
____전체코드

13장.이벤트

__이벤트알아보기
____이벤트만들기
____이벤트의종류

13장.클릭이벤트실전예제

____DAILYCHECK버튼이벤트만들기
____팝업애니메이션넣기
____팝업레이어닫기
____좌측menu버튼이벤트만들기
____Schedule화면닫기
____전체코드

13장.체인지이벤트실전예제

____메인페이지컴포넌트만들기
____타이틀페이지컴포넌트만들기
____Portrait페이지컴포넌트만들기
____인디케이터배열만들기
____Change이벤트만들기
____페이지인디케이터이벤트
____타이틀페이지컴포넌트이벤트만들기
____Change:x이벤트만들기
____애니메이션End이벤트만들기
____전체코드

14장.유틸스

__유틸스알아보기
____모듈레