장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
웹 디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서
미리보기

웹 디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서

  • 김동주
  • |
  • 비제이퍼블릭
  • |
  • 2021-07-19 출간
  • |
  • 672페이지
  • |
  • 210 X 275 mm
  • |
  • ISBN 9791165920739
판매가

41,000원

즉시할인가

36,900 원

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
36,900원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평




[이 책의 특징]
- 웹 디자인과 웹 퍼블리싱을 동시에 학습할 수 있다.
- 디자인 단계에서부터 최종 코딩을 염두에 두어 효율적이고 일관성 있게 작업한다.
- 최신 웹 트렌드를 반영한 반응형 모바일 쇼핑몰과 포트폴리오 사이트를 구현한다.
- 유용한 플러그인, 작업 시 유용한 실무 Tip 등 피그마를 스마트하게 활용하는 노하우가 담겨있다.

[소스코드 다운로드]
https://github.com/bjpublic/Figma_WEB

왜 Figma(피그마)인가?
피그마는 웹 디자이너와 웹 퍼블리셔 모두에게 주목받는 프로그램으로, UX/UI 설계 · 디자인 · 프로토타이핑 · 버전 관리까지 모든 것이 가능한 All-in-one 툴이다. 디자이너와 개발자가 동일한 페이지에서 실시간으로 협업할 수 있고, 웹 기반으로 언제 어디서든 접속하여 작업할 수 있다는 점이 피그마만의 강력한 장점이다.

과연 실무에서 디자인만 잘하면 충분할까?
No! 개발에 대한 이해도가 높은 디자이너만이 살아남는다
웹 디자이너와 웹 퍼블리셔의 경계가 모호해지고 있다. 웹 디자이너도 퍼블리싱의 기술적 베이스를 잘 알고 있어야 실무에서 기획자 및 개발자와 함께 업무의 흐름을 공유할 수 있고, 기기별 대응하는 반응형 디자인을 제작할 수 있다. 실제 채용 시장에서도 디자이너와 개발자 간의 원활한 소통이 가능한 혹은 디자인과 퍼블리싱 두 작업 모두를 원활히 소화할 수 있는 ‘마스터’를 원하는 추세이다. 이제 웹 디자이너에게도 HTML 마크업을 비롯한 전반적인 개발에 대한 이해도가 중요한 역량이 된 것이다.

『피그마 완벽 활용서』로
웹 디자인 x 웹 퍼블리싱 모두 컨트롤 가능한 ‘마스터’로 거듭나자
본 도서는 피그마와 HTML, CSS, jQuery를 활용하여 웹 디자인부터 웹 퍼블리싱까지의 모든 과정을 총망라하며, 최종적으로 웹 트렌드를 반영한 반응형 모바일 쇼핑몰과 포트폴리오 사이트를 제작한다. 또한, 디자인 단계에서부터 어떻게 해야 이후 관리가 용이한 잘 만들어진 웹 문서(Well-formed Document)가 되는지에 초점을 두고 작업한다. 이를 통해 ‘효율적인 디자인’이 무엇인지 체득할 수 있고, 디자이너와 개발자 간 서로의 업무를 이해하는 실무적인 눈을 가질 수 있다.

이 책과 함께 디자인과 퍼블리싱을 모두 안고 나만의 경쟁력을 키워서, 기업이 원하는 ‘실무형 인재’로 거듭나길 바란다.


목차


[PART 1] Figma 100% 활용하기 - 웹 디자인
A. Figma 시작하기
i. Figma 설치 및 실행
ii. Figma UI
iii. Frame · Shape · Text
iv. Page
v. Pen 툴: 사각형 만들기
vi. Vector 편집: 면 추가하기
vii. Fill · Stroke
viii. SVG 추출 및 코드 복사
ix. Component
x. Grid

B. 디자이너의 Figma 사용하기
i. Figma 디자인
____로그인 헤더 만들기
____로그인 폼 디자인하기
____Forgot Password 추가하기
____Footer 설정하기
____제약 조건 설정하기
ii. 프로토타이핑
____대시보드 페이지 디자인
____회원가입 페이지 디자인
____비밀번호 찾기 페이지 디자인
____프로토타이핑 설정하기
iii. 페이지 연결하기


[PART 2] Figma 실전 - 프로젝트 디자인
A. Figma 고급 활용
i. 레이어 제약 조건
ii. 버전 관리
iii. 스타일
____Color 스타일
____Text 스타일
____Drop Shadow 스타일
____Grid 스타일
iv. 팀 라이브러리
v. 프로토타이핑
____디바이스 프레임
____외부 웹사이트 URL
____이전 프레임으로의 Hotspots
____고정 오브젝트
____스크롤 영역
____인터랙션 · 트랜지션
vi. Figma에서 Illustrator 파일 사용하기
vii. 협업
____Figma로 협업하기
____팀 생성과 관리
____팀 멤버 권한 관리
____컴포넌트 스타일 공유하기
____공유
____코멘트
____버전 관리
____기타 툴로 통합

B. [실전 프로젝트] 모바일 쇼핑몰과 반응형 랜딩페이지 완성하기
i. 최신 웹 디자인 트렌드
____UI/UX
____Micro-Interaction
____Minimalism
____Typography
ii. 모바일 쇼핑몰 디자인
____메인 화면
____로그인
____회원가입
____상품 목록
____카테고리 목록
____상품 상세페이지
____장바구니
____주문 페이지
____네비게이션 메뉴
iii. 반응형 포트폴리오 페이지 디자인
____PC 화면
____태블릿 화면
____모바일 화면


[PART 3] Figma 업그레이드 - 스마트한 활용법
A. Figma 플러그인
i. Unsplash
ii. Content Reel
iii. Image Palette
iv. Super Tidy
v. Able

B. Figma 유용한 팁
i. 레이어 패널 팁
____모든 오브젝트 잠금 풀기 및 숨김 해제
____레이어 이름 빠르게 변경하기
____다중 레이어를 한꺼번에 열고 닫기
____레이어의 표시를 빠르게 전환하기
ii. 오브젝트 선택 팁
____같은 속성의 오브젝트 빠르게 선택 편집하기
____상/하위 요소 선택하기
iii. 레이어 쌓기 팁
____레이어 순서 변경하기
____레이어 빠르게 선택하기
iv. 캔버스 팁
____디자인 화면에서 레이어 선택하기
____좀 더 정확하게 확대 축소하기
____오브젝트 중심으로 바로 확대하기
v. 프레임 팁
____내용을 포함하여 새 프레임 생성하기
____내용에 맞춰 프레임 크기 조절하기
____프레임 크기 확대 축소하기
vi. 프로젝트 · 페이지 · 아트보드 팁
____프로젝트 썸네일 만들기
____페이지 전환
____아트보드 간 이동하기
____프레임 가독성 올리기
vii. 속성 팁
____오브젝트의 속성 복사하기
____텍스트 속성 변경하기
____속성값의 수치 변경하기
____방향키로 색상 조절하기
viii. 이미지 팁
____이미지 채우기 세팅
____폴더의 이미지를 통째로 Place Image하기
____다중 이미지 로드하기
ix. 벡터 그래픽 팁
____복잡한 벡터 그래픽 구현하기
____오브젝트에서 바로 svg 태그 생성하기
____svg 태그 복사하기
x. 컴포넌트 팁
____컴포넌트 플립하기
____반복 패턴 만들기
xi. 레이아웃 팁
____등척성(Isometric) 쉽게 비틀기(Skew)
____아이템 간의 간격 제거하기
____좀 더 정확하게 정렬하기
xii. 핸드오프 테스트 팁
____인스펙트 탭을 통한 출력
____붙여넣기할 코드 생성하기
____모바일 기기에서 Figma 미러 앱으로 테스트하기
____브라우저에서 Figma 미러 앱으로 테스트하기
xiii. 기타 팁
____아웃라인 모드 전환
____단축키표 접속하기
____넛지 양 조절하기

C. Figma 단축키


[PART 4] Figma 200% 활용하기 - 웹 퍼블리싱
A. Figma 활용 웹 퍼블리싱

B. [Figma to HTML 실전] 모바일 쇼핑몰 완성하기
i. 모바일 쇼핑몰 디자인 HTML
ii. 모바일 쇼핑몰 디자인 CSS
iii. 모바일 쇼핑몰 SCRIPT

C. [Figma to HTML 실전] 반응형 포트폴리오 페이지 디자인하기
i. 포트폴리오 페이지HTML
ii. 포트폴리오 페이지CSS - PC 화면
iii. 포트폴리오 페이지 CSS - 태블릿 · 모바일 화면


[PART 5] 부록 - Figma와 Adobe XD의 비교
A. Figma와 Adobe XD 비교
i. 지원 플랫폼
ii. 협업 · 공유 · 미리보기
iii. 디자인
iv. 디자인 시스템
v. 프로토타이핑
vi. 핸드오프
vii. 기타 사항
viii. 가격
ix. 최종 비교
추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.