본문 바로가기

추천 검색어

실시간 인기 검색어

실전 피그마

UI/UX 디자이너, 서비스 기획자를 위한 실무 입문서
길벗

2023년 11월 22일 출간

종이책 : 2023년 11월 20일 출간

(개의 리뷰)
( 0% 의 구매자)
eBook 상품 정보
파일 정보 ePUB (184.83MB)
ISBN 9791140707485
지원기기 교보eBook App, PC e서재, 리더기, 웹뷰어
교보eBook App 듣기(TTS) 가능
TTS 란?
텍스트를 음성으로 읽어주는 기술입니다.
  • 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를​ 읽을 수 있습니다.
  • 전자책 화면에 표기된 주석 등을 모두 읽어 줍니다.
  • 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.
  • '교보 ebook' 앱을 최신 버전으로 설치해야 이용 가능합니다. (Android v3. 0.26, iOS v3.0.09,PC v1.2 버전 이상)

소득공제
소장
정가 : 20,800원

쿠폰적용가 18,720

10% 할인 | 5%P 적립

이 상품은 배송되지 않는 디지털 상품이며,
교보eBook앱이나 웹뷰어에서 바로 이용가능합니다.

카드&결제 혜택

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 416P
  • 리뷰 작성 시, e교환권 추가 최대 300원

작품소개

이 상품이 속한 분야

UX/UI 디자인 툴 1위 피그마는 UI/UX 디자이너, 서비스 기획자를 위한 협업에 특화되었다. 현업 디자이너로 활동하며, 다양한 피그마 클래스를 진행하는 스무 저자의 친절한 예시와 예제를 통해 회사에서 바로 실무 적용이 가능하도록 현장에서의 협업 능력을 높여줄 것이다.

원하는 결과물을 효율적으로 작업하기 위한 기능부터 객체들의 간격 조정과 정렬을 자동으로 해주는 오토 레이아웃, 수십 가지 디자인 에셋을 하나로 관리할 수 있는 컴포넌트와 배리언츠 등 다양한 기능 및 원리를 자연스럽게 이해하여 완전히 내 것으로 만들어 보자!

실무 프로젝트로 익히는 디자인 실습과 노하우
실무 프로젝트를 통해 프로토타입, 라이브러리 등 피그마의 주요 기능을 실습하다 보면, 어느새 반응형 UI부터 프로토타이핑까지 마스터할 수 있다. 직관적인 단축키, 활발한 커뮤니티 형성, 부족한 기능을 보충할 수 있는 플러그인까지 실무에서 유용하게 사용하는 실전 피그마 활용 팁부터 레이어를 정리하는 노하우, 네이밍 방법론까지 모두 담아 이 책 한 권으로 피그마를 익혀 UI/UX 디자이너가 될 수 있다.
PART 1. 원포인트 레슨! 피그마 미리 보기

01. [장점] 협업을 위한 최고의 올인원 디자인 플랫폼
1. 뛰어난 호환성과 접근성
2. 실시간 협업 기능
3. 벡터 기반 디자인
4. 강력한 편의 기능
5. 디자인 시스템
6. 다양한 플러그인 생태계
7. 자동 히스토리 저장
02. [커뮤니티] 생산성을 높이는 피그마 커뮤니티
03. [그래픽 표현 방식] 비트맵과 벡터 방식의 이해
1. 비트맵(Bitmap) 방식
2. 벡터(Vector) 방식
3. 피그마의 그래픽 표현 방식
04. [디지털 해상도와 배수] 디지털 해상도와 배수 개념의 이해
1. 해상도(Resolution)
2. 픽셀 밀도(Pixel Density)
3. 배수(Scale Factor)
4. 물리적 해상도와 논리적 해상도
05. [로컬 폰트] 로컬 폰트 사용하기

PART 2. 피그마 시작하기

01. [홈 화면] 피그마 홈 화면 살펴보기
02. [작업 화면] 피그마 작업 화면 살펴보기
03. [툴 바] 툴 바 알아보기
1. 피그마 메뉴
2. Tools 메뉴
3. Contextual menu
4. Presentation options
04. [왼쪽 사이드 바] 왼쪽 사이드 바 알아보기
1. 단축키로 탭 전환하기
2. 〔Layers〕 탭
3. 〔Assets〕 탭
05. [오른쪽 사이드 바] 오른쪽 사이드 바 알아보기
1. 단축키로 탭 전환하기
2. 〔Design〕 탭
3. 〔Prototype〕 탭
06. [기본 설정] 편리한 기본 설정 알아두기
1. 테마 전환하기
2. 오브젝트 이동 단위 8배수로 변경하기

PART 3. 피그마 기본 도구 활용하기

01. [프레임] UI 디자인을 위한 기본 요소, 프레임 이해하기
1. 디바이스 프레임
2. 프레임 중첩
3. 클립 콘텐츠(Clip content)
4. 제약 조건(Constraints)
5. 프로토타이핑
02. [도형 도구] 자유자재로 기본 도형 만들기
1. Rectangle - 사각형 도구
2. Line - 선 도구
3. Ellipse - 원 도구
4. Polygon - 다각형 도구
5. Star - 별 모양 도구
03. [정렬] 오브젝트 손쉽게 정렬하기
1. 오브젝트 정렬(Alignment)하기
2. 오브젝트 분배(Distribution)하기
3. 오브젝트 일정하게 정리(Tidy up)하기
04. [그래프 제작] 원형 그래프 만들기
05. [아이콘 제작] 여러 가지 아이콘 디자인하기
1. 아이콘 가이드 만들기
2. 검색 아이콘 만들기
3. 홈 아이콘 만들기
4. 하트 아이콘 만들기
06. [Outline stroke와 Flatten] Outline stroke와 Flatten의 차이점 이해하기
1. Outline stroke - 외곽선 추출하기
2. Flatten - 레이어 병합하기
07. [펜 도구] 벡터 그래픽을 자유롭게 편집하는 펜 도구 알아보기
1. 직선 그리기
2. 곡선 그리기
3. 기준점 연결하기
4. 페인트 도구로 공간 나누기
08. [글래스모피즘] 유리 느낌의 반투명 카드 디자인하기

PART 4. 피그마의 꽃, 오토 레이아웃 살펴보기

01. [오토 레이아웃 구성 요소] 오토 레이아웃의 구성 요소 알아보기
1. 오토 레이아웃 생성하기
2. 방향에 따라 오브젝트 배열하기
3. 간격 설정하기
4. 패딩 - 오브젝트와 프레임 사이 크기 조절하기
5. Auto layout 패널을 사용하지 않고 간격과 패딩 제어하기
6. 정렬 - 프레임 내부 오브젝트 정렬하기
7. 분배 - 오브젝트 분배하기
8. 레이아웃 외곽선 설정하기
9. 캔버스 레이어 순서 조정하기
10. 텍스트 기준선 정렬하기
11. Absolute position - 오토 레이아웃 옵션에 영향 받지 않기
12. 오토 레이아웃 해제하기
02. [크기 조절 옵션] 반응형 디자인을 위한 크기 조절 옵션 알아보기
1. Hug contents - 하위 오브젝트 감싸기
2. Fixed size - 오브젝트 크기 고정하기
3. Fill container - 상위 프레임에 따라 크기 조절하기
4. 중첩된 오토 레이아웃 리사이징하기
03. [버튼과 텍스트 필드] 버튼과 텍스트 필드 만들기
1. 버튼 만들기
2. 텍스트 필드 만들기
04. [알림창] 여러 가지 형태의 알림창 만들기
1. 기본형 알림창 만들기
2. 단일 버튼 알림창 만들기
3. 수직형 버튼 알림창 만들기
4. 시스템형 알림창 만들기
05. [반응형 레이아웃] 프로필 카드 디자인하기
1. 디자인 요소 생성하기
2. 오토 레이아웃 설정하기
3. 크기 조절하기
4. 말줄임표 처리하기

PART 5. 컴포넌트 & 배리언츠 적용하기

01. [컴포넌트] 컴포넌트로 동일한 형태를 반복해서 사용하기
1. 메인 컴포넌트와 인스턴스 컴포넌트 생성하기
2. 인스턴스 컴포넌트의 속성 변경하기
3. 독립된 속성 초기화하기
4. 독립된 속성을 메인 컴포넌트로 이전하기
5. 메인 컴포넌트 찾기
6. 삭제된 메인 컴포넌트 복구하기
7. 인스턴스 컴포넌트 해제하기
8. 다수의 컴포넌트 동시에 생성하기
02. [아이콘 컴포넌트] 컴포넌트로 아이콘 관리하고 사용하기
1. 아이콘 컴포넌트 만들기
2. 컴포넌트 스왑하기
3. 컴포넌트를 그룹으로 구분하기
03. [컴포넌트 프로퍼티] 컴포넌트 프로퍼티를 활용한 체크리스트 만들기
1. 체크박스 컴포넌트 만들기
2. 체크리스트 컴포넌트 만들기
3. 불리언(Boolean) 프로퍼티 설정하기
4. 텍스트(Text) 프로퍼티 설정하기
5. 인스턴스 스왑(Instance Swap) 프로퍼티 설정하기
6. 컴포넌트 프로퍼티 속성 편집하기
04. [배리언츠 & 프로퍼티] 메인 컴포넌트의 묶음, 배리언츠 활용하기
1. 배리언츠 생성 및 준비하기
2. 배리언츠 만들기
3. 프로퍼티 설정하기
4. 프로퍼티와 밸류 순서 변경하기
5. 프로퍼티 삭제하기
6. 배리언츠 해제하기
05. [칩 배리언츠] 배리언츠 프로퍼티를 토글 형태로 만들기
1. 칩(Chip) 배리언츠 만들기
2. 칩을 활용한 카테고리 목록 만들기
06. [컴포넌트 & 배리언츠] 버튼 배리언츠 구성하기
1. 버튼 아이콘 준비하기
2. 기본 버튼 만들기
3. 배리언츠 구성하기
4. 왼쪽 아이콘 프로퍼티 추가하기
5. 오른쪽 아이콘 프로퍼티 추가하기
6. 텍스트 프로퍼티 추가하기
7. 버튼 크기를 추가하여 배리언츠 확장하기

PART 6. 디자인이 살아 움직이는 프로토타입 만들기

01. [프로토타입 속성] 프로토타입 속성 살펴보기
1. 프레임 연결하기
2. 다양한 옵션 살펴보기
02. [온보딩 페이지] 온보딩 페이지 프로토타이핑하기
1. 커뮤니티에서 필요한 리소스 가져오기
2. 플러그인으로 일러스트레이션과 문자열 삽입하기
3. 인디케이터와 버튼 컴포넌트 삽입하기
4. 버튼을 눌러 다음 화면으로 넘어가기
5. 화면을 쓸어넘겨 전환하기
6. 완성된 프로토타입 실행하기
7. 모바일 기기에서 프로토타입 실행하기
03. [스크롤 포지션] 스크롤 포지션 설정하기
1. 이미지가 있는 섹션 만들기
2. Position: Fixed 설정하기
3. Position: Sticky 설정하기
04. [스크롤] 원하는 대로 스크롤 설정하기
1. 수평(가로 방향)으로 스크롤하기
2. 모든 방향으로 스크롤하기
05. [스마트 애니메이트] 스마트 애니메이트 살펴보기
06. [인터랙티브 컴포넌트] 인터랙티브 컴포넌트 살펴보기
1. 체크박스 인터랙션 설정하기
2. 토글 스위치 인터랙션 설정하기
3. 버튼 인터랙션 설정하기
07. [FAB] 튀어나오는 FAB 애니메이션 만들기
08. [로딩 스피너] 자동으로 돌아가는 로딩 스피너 만들기
1. 스피너 도형 만들기
2. 배리언츠 설정하기

PART 7. 피그마 활용 팁 익히기

01. [섹션] 캔버스 영역을 구분하는 섹션(Section) 이해하기
1. 섹션 생성하기
2. 유저 플로우별로 캔버스 영역 구분하기
3. 개발 준비 완료 상태 표시하기
4. 컴포넌트 에셋 그룹화하기
5. 섹션 삭제하기
02. [스타일] 자주 사용하는 속성들을 스타일로 만들어 사용하기
1. 컬러 스타일 만들기
2. 컬러 스타일 적용하기
3. 스타일 관리하기
4. 텍스트 스타일 만들기
5. 이펙트 스타일 만들기
6. 그리드 스타일 만들기
03. [팀 라이브러리] 팀 라이브러리(Team Library) 기능 알아보기
1. 팀 라이브러리 배포하기
2. 팀 라이브러리 적용하기
3. 팀 라이브러리 업데이트하기
04. [필수 플러그인] 작업 효율을 높이는 필수 플러그인 살펴보기
1. 플러그인 실행하기
2. Unsplash - 고품질의 무료 이미지 제공 플러그인
3. Lorem ipsum - 문자열 생성 플러그인(영문)
4. 한글입숨 - 문자열 생성 플러그인(한글)
5. Faker - 특정 카테고리 문자열 생성 플러그인
6. Mapsicle - 지도 생성 플러그인
7. Map Maker - 지도 생성 플러그인
8. Blobs - 추상적인 도형을 무작위로 생성하는 플러그인
9. SkewDat - 도형 왜곡 플러그인
10. Arc - 텍스트 문자열을 둥글게 만드는 플러그인
11. Arrow Auto - 플로우 생성 플러그인
05. [피그마 팁] 피그마 활용 팁 12가지
1. 속성 복사, 붙여넣기
2. 최하위 오브젝트 손쉽게 선택(Deep select)하기
3. 섬네일 설정하기
4. 오브젝트 간격 확인하기
5. 부모-자식 레이어 쉽게 전환하기
6. 모든 레이어 닫기
7. 프레임 URL 공유하기
8. 숫자 목록 적용 취소하기
9. 마지막으로 닫은 탭 열기
10. 새로 고침하여 파일 최신화하기
11. 대체하여 붙여넣기
12. 스타일을 유지하면서 텍스트 내용만 붙여넣기

PART 8. 실전 프로젝트 다루기

01. [쇼핑몰 메인 페이지] 쇼핑몰 메인 화면 디자인하기
1. 내비게이션 바 만들기
2. 카테고리 탭 메뉴 만들기
3. 자동 슬라이드 배너 만들기
4. 세로형 상품 카드 만들기
5. 가로형 상품 카드 만들기
6. 탭 바 만들기
7. 포지션 설정하고 마무리하기
02. [음악 앱 디자인] 음악 앱 화면 디자인하기
1. 아이콘 준비하기
2. 홈 화면 디자인하기
3. 추천 플레이 리스트 영역 만들기
4. Top 100 영역 만들기
5. 리사이징 설정하기
6. 데이터 추가하기
7. 탭 바 만들기
8. 재생 중인 음악 상태 바 만들기
9. 재생 중인 음악 정보 화면 디자인하기
10. 검색창 디자인
11. 인기 검색어 섹션 만들기
12. 추천 앨범 섹션 만들기
13. 스크롤 및 포지션 설정하기
14. 재생 화면 등장 인터랙션 설정하기
15. 화면 전환 인터랙션 설정하기
- 찾아보기

작가정보

저자(글) 김범용 저자

김범용(스무, SMU)올마이티캠퍼스 프로덕트 디자이너(AlmightyCampus Product Designer)커뮤니티Under Figma주요 경력Naver - 피그마 사내 강연2023년 1, 3분기 CLASS101 베스트 멘토(1NER) 선정강의CLASS101 - Figma A to ZBlueTiger - Figma Technique All-in-one Class프로젝트국가정보원 60주년 웹페이지 리뉴얼한동대학교 해커톤 멘토링

이 상품의 총서

Klover리뷰 (0)

Klover리뷰 안내
Klover(Kyobo-lover)는 교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1. 리워드 안내
구매 후 90일 이내에 평점 작성 시 e교환권 100원을 적립해 드립니다.
  • - e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • - 리워드는 1,000원 이상 eBook, 오디오북, 동영상에 한해 다운로드 완료 후 리뷰 작성 시 익일 제공됩니다.
  • - 리워드는 한 상품에 최초 1회만 제공됩니다.
  • - sam 이용권 구매 상품 / 선물받은 eBook은 리워드 대상에서 제외됩니다.
2. 운영 원칙 안내
Klover리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다. 일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
  • 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
  • 도서와 무관한 내용의 리뷰
  • 인신공격이나 욕설, 비속어, 혐오 발언이 개재된 리뷰
  • 의성어나 의태어 등 내용의 의미가 없는 리뷰

구매 후 리뷰 작성 시, e교환권 100원 적립

문장수집

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여 주는 교보문고의 새로운 서비스 입니다. 교보eBook 앱에서 도서 열람 후 문장 하이라이트 하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 ‘좋아요’ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보없이 삭제될 수 있습니다.
리워드 안내
  • 구매 후 90일 이내에 문장 수집 등록 시 e교환권 100원을 적립해 드립니다.
  • e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • 리워드는 1,000원 이상 eBook에 한해 다운로드 완료 후 문장수집 등록 시 제공됩니다.
  • 리워드는 한 상품에 최초 1회만 제공됩니다.
  • sam 이용권 구매 상품 / 선물받은 eBook / 오디오북·동영상 상품/주문취소/환불 시 리워드 대상에서 제외됩니다.

구매 후 문장수집 작성 시, e교환권 100원 적립

    교보eBook 첫 방문을 환영 합니다!

    신규가입 혜택 지급이 완료 되었습니다.

    바로 사용 가능한 교보e캐시 1,000원 (유효기간 7일)
    지금 바로 교보eBook의 다양한 콘텐츠를 이용해 보세요!

    교보e캐시 1,000원
    TOP
    신간 알림 안내
    실전 피그마 웹툰 신간 알림이 신청되었습니다.
    신간 알림 안내
    실전 피그마 웹툰 신간 알림이 취소되었습니다.
    리뷰작성
    • 구매 후 90일 이내 작성 시, e교환권 100원 (최초1회)
    • 리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고
    • 콘텐츠 다운로드 또는 바로보기 완료 후 리뷰 작성 시 익일 제공
    감성 태그

    가장 와 닿는 하나의 키워드를 선택해주세요.

    사진 첨부(선택) 0 / 5

    총 5MB 이하로 jpg,jpeg,png 파일만 업로드 가능합니다.

    신고/차단

    신고 사유를 선택해주세요.
    신고 내용은 이용약관 및 정책에 의해 처리됩니다.

    허위 신고일 경우, 신고자의 서비스 활동이 제한될 수
    있으니 유의하시어 신중하게 신고해주세요.


    이 글을 작성한 작성자의 모든 글은 블라인드 처리 됩니다.

    문장수집 작성

    구매 후 90일 이내 작성 시, e교환권 100원 적립

    eBook 문장수집은 웹에서 직접 타이핑 가능하나, 모바일 앱에서 도서를 열람하여 문장을 드래그하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다.

    P.
    실전 피그마
    UI/UX 디자이너, 서비스 기획자를 위한 실무 입문서
    저자 모두보기
    저자(글)
    낭독자 모두보기
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 프리미엄 이용권입니다.
    선물하실 sam이용권을 선택하세요.
    결제완료
    e캐시 원 결제 계속 하시겠습니까?
    교보 e캐시 간편 결제
    sam 열람권 선물하기
    • 보유 권수 / 선물할 권수
      0권 / 1
    • 받는사람 이름
      받는사람 휴대전화
    • 구매한 이용권의 대한 잔여권수를 선물할 수 있습니다.
    • 열람권은 1인당 1권씩 선물 가능합니다.
    • 선물한 열람권이 ‘미등록’ 상태일 경우에만 ‘열람권 선물내역’화면에서 선물취소 가능합니다.
    • 선물한 열람권의 등록유효기간은 14일 입니다.
      (상대방이 기한내에 등록하지 않을 경우 소멸됩니다.)
    • 무제한 이용권일 경우 열람권 선물이 불가합니다.
    이 상품의 총서 전체보기
    네이버 책을 통해서 교보eBook 첫 구매 시
    교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 네이버 책을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)
    구글북액션을 통해서 교보eBook
    첫 구매 시 교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 구글북액션을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)