디자이너를 위한 프레이머

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 compo