본문내용 바로가기
MD의선택 무료배송 이벤트 경품

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

UX 프로페셔널
박재환 , 이정익 지음 | 에이콘출판 | 2017년 10월 31일 출간

이 책의 다른 상품 정보

  • 정가 : 40,000원
    판매가 : 36,000 [10%↓ 4,000원 할인]
  • 제휴할인가 : 27,000 교보-롯데카드 최대 25% 청구할인 카드/포인트 안내
  • 통합포인트 :
    [기본적립] 2,000원 적립 [5% 적립] 안내 [추가적립] 5만원 이상 구매 시 2천원 추가적립 [회원혜택] 우수회원 5만원 이상 구매 시 2~3% 추가적립
  • 추가혜택 :
    naver네이버페이 결제 시 무조건 1% 추가 적립 payco페이코 결제 시 최대 1만원 적립 okcashbag 실 결제 금액의 0.5% 적립 안내
  • 배송비 : 무료 배송비 안내
  • 배송일정 : 서울특별시 종로구 세종대로 기준 지역변경
    당일배송 지금 주문하면 오늘(25일,토) 도착 예정 배송일정 안내
  • 바로드림 : 인터넷으로 주문하고 영업점에서 직접 수령 안내
행사도서 포함, 5만원이상 구매시 택 1 (라지 3000P, 스몰 2000P 차감)
닫기
  • 스무 살 패브릭 포스터 증정 O tvN 어쩌다 어른 X 교보문고 단독혜택
  • 어린이 가을독서 추천도서전
  • 가을입맛 사로잡기
  • 행사도서 포함, 5만원이상 구매시 택 1 (라지 3000P, 스몰 2000P 차감)
  • 유아/어린이/가정육아 이달의 기대신간
  • 올재 클래식스 100권 완간! 시리즈의 정수만 모은, 올재 셀렉션즈 단독 판매
  • 자기계발 메인이벤트
  • 경제경영 메인이벤트
  • 행사도서 포함, 2만원이상 구매시 택 1 (1500P 차감)
  • 나만의 경쟁력, 동양고전 김원중 명품고전 독서대 증정
  • 비모 벽시계
  • 자기계발:버리거나 혹은 얻거나

이 책의 이벤트 해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.

  • 에이콘의 도서를 한 눈에 살펴보세요
    2017.11.23 ~ 2019.12.31
  • 리드잇 IT칼럼 및 예약판매중인 책을 한 곳에서 보실 수 있습니..
    2017.11.22 ~ 2018.12.31
  • 설문참여 시 매월 5명 추첨통해 선물을 드립니다.
    10. 14 ~ 12. 31
상품상세정보
ISBN 9791161750545(1161750541)
쪽수 560쪽
크기 190 * 237 * 34 mm /1302g 판형알림

책소개

이 책이 속한 분야

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

상세이미지

디자이너를 위한 프레이머(UX 프로페셔널) 도서 상세이미지

저자소개

저자 : 박재환

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

저자 : 이정익

저자 이정익은 홍익대학교 디지털미디어디자인 학과를 졸업하고 알티캐스트 GUI디자이너로 근무했다. 이후 현재까지 네이버에서 인터랙션 디자이너로 재직 중이다. 플래시 시절부터 인터랙션 관련 업무를 해왔고, 현재는 모바일 인터랙션 업무에 집중하고 있다.

목차

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

추천사

Benjamin Den Boer(Framer Team Product Designer)

『디자이너를 위한 프레이머』 is a fantastic way to get started with Framer. It’s thorough, simple and walks you through the basics of Fram... 더보기

최민상(구글, 인터랙션 디자이너)

프레이머는 강력한 툴이지만, 그 능력을 제대로 사용하기까지는 시간과 노력이 들어갑니다. 특히 "코드"라는 것은 디자이너들에겐 아직도 쉽게 느껴지지 않는 재료일 것입니다. 『디자이너를 위한 프레이머』는 충실한 예제를 중심으로 ... 더보기

안지용(토스, UI 디자이너)

빠르게 변화하는 IT 환경에서 좀 더 나은 결정을 하기 위해 프로토타이핑은 필수적인 요소가 됐습니다. 이 책은 많은 프로토타이핑 툴 중에서도 하이피델리티 프로토타이핑을 할 수 있고 많은 국내 유저를 보유하고 있는 프레이머에 ... 더보기

이준원(네이버, 디벨로퍼)

프레이머는 버전이 올라가면서 상당히 많은 기능을 제공하고 해당 사용법을 온라인 문서로 제공하고 있습니다. 처음 시작하는 사람들에게는 어느 문서를 어떻게 시작해야 할지 어려울 수 있는데, 이 책에서는 입문자를 위한 가이드가 잘... 더보기

이정영(라인, 인터랙션 디자이너)

디자인 프로세스가 변하면서 프로토타이핑 툴이 각광받고 있습니다. 그중 커피스크립트를 사용하는 프레이머는 높은 자유도를 가지고 있으며, 실제 앱과 가장 유사한 경험을 줄 수 있기 때문에 실무에서 활발히 활용됩니다. 이 책은 프... 더보기

출판사 서평

★ 이 책에서 다루는 내용 ★

■ 디자이너 기획자처럼 개발 언어를 전혀 모르는 사람을 위해 코드의 기초 설명
■ 디자인 실무에서 인터랙션 실무까지 프로토타이핑 연동 방법의 순차적 설명
■ 효과적인 인터랙션을 만들기 위한 방법
■ 프레이머의 주요한 기능을 각 장마다 설명
■ 프레이머의 주요한 기능을 실무에서 효과적으로 사용할수 있도록 각 장마다 실전 예제 수록
■ 실무에서 프레이머를 사용할 때 꼭 필요한 기능
■ 실무에서 프레이머를 사용할 때 발생하는 문제 해결을 위한 실무 팁 수록

★ 이 책의 대상 독자 ★
... 더보기

북로그 리뷰 (0) 쓰러가기

도서 구매 후 리뷰를 작성하시면 통합포인트를 드립니다.
결제 90일 이내 작성 시 300원 / 발송 후 5일 이내 작성시 400원 / 이 상품의 첫 리뷰 작성 시 500원
(포인트 적립은 작성 후 다음 날 혹은 해당 도서 출고 후 익일에 적립됩니다.
외서/eBook/음반/DVD/GIFT 및 잡지 상품 제외)
안내
  • 해당도서의 리뷰가 없습니다.

Klover 평점/리뷰 (0)

교환/반품/품절안내

※ 상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

교환/반품/품절안내
반품/교환방법 마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환신청 ,
[1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900)

※ 오픈마켓, 해외배송주문, 기프트 주문시 [1:1상담>반품/교환/환불]
    또는 고객센터 (1544-1900)
반품/교환가능 기간 변심반품의 경우 수령 후 7일 이내,
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
반품/교환비용 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
반품/교환 불가 사유
  • 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
  • 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
  • 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
  • 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
  • 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우
  • 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
  • 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에
    해당되는 경우
(1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시 ‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①양서-판매정가의 12%, ②일서-판매정가의 7%를 적용)
상품 품절 공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는
이메일과 문자로 안내드리겠습니다.
소비자 피해보상
환불지연에 따른 배상
  • 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은
    소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨
  • 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의
    소비자 보호에 관한 법률에 따라 처리함

이 분야의 베스트

더보기+

이 분야의 신간

더보기+

바로가기

  • 우측 확장형 배너 2

최근 본 상품