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

웹 트렌드를 반영한 반응형 쇼핑몰 따라 만들기

김동주 저자(글)

비제이퍼블릭 · 2021년 07월 19일

책 소개

웹 디자인 x 웹 퍼블리싱
모두를 소화하는 실무형 인재가 되고 싶다면,
이 책과 함께 커리어 UP 하라!

본 도서는 웹 디자인뿐만 아니라 웹 퍼블리싱 구현까지 한 번에 학습할 수 있는 유일한 책이다. 책 전반에 걸쳐 ‘디자인’부터 ‘코딩’까지 총망라하며, 모바일 쇼핑몰 및 반응형 포트폴리오 웹 페이지를 제작한다.

[디자인 파트]에서는 레이어 · 스타일 · 팀 라이브러리 · 인터랙션 등 웹 디자인에 필요한 피그마의 주요 기능을 소개한다. 특히, 어떻게 하면 효율적이고 일관성 있게 코딩할 수 있을지 고민하며 디자인하기 때문에 추후 개발에 용이하게 작업하는 방법을 익힐 수 있다. [퍼블리싱 파트]에서는 완성한 디자인을 HTML · CSS · jQuery 등의 언어로 구현하며, 데스크톱 · 태블릿 · 모바일 등 다양한 플랫폼에 맞춰 구현한다. 이 과정에서 최신 웹 트렌드 코딩 기법과 피그마를 스마트하게 활용하는 저자의 노하우를 체득할 수 있다.

피그마의 숨은 기능까지 빠짐없이 철저하게 짚어주는 이 책을 통해 피그마를 완벽하게 활용하는 방법을 터득해 보자. 웹 디자이너와 웹 퍼블리셔의 경계를 허무는, 디자인 능력뿐만 아니라 개발 지식까지 갖춘 ‘실무형 인재’로 거듭날 수 있을 것이다.

작가정보

저자(글) 김동주

IT 붐이 있던 2000년대 초반, 웹 마스터 과정을 수료하고 직접 개발한 웹사이트를 통해 수출입 업무를 했다. 이후 광고 대행사 웹 마케팅을 하며 웹의 생태를 깊이 이해했고, 중소기업 협동조합에서 조합원사의 웹사이트 개발을 시작으로 15년 이상의 실무 경험을 쌓았다. 2015년부터 웹 디자인, 웹 퍼블리싱, 프론트엔드 등을 가르치는 학원 강사로 활동하며 3년 연속 우수 강사 표창을 받았다. 현재는 웹 강의뿐만 아니라 유튜브 채널을 통한 웹 디자인, 웹 퍼블리싱, 프론트엔드 강의 및 웹 포트폴리오 제작 과외 등 다양한 활동을 하고 있다.

- (현) 그린컴퓨터아트학원 웹 퍼블리싱 프론트엔드 강사
- (현) 이지웹 대표
- 유튜브: http://www.youtube.com/c/EasywebPublishing

목차

• [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. 최종 비교

출판사 서평

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

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

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

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

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

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

기본정보

ISBN	9791165920739 ( 1165920735 )
발행(출시)일자	2021년 07월 19일
쪽수	672쪽
크기	211 * 275 * 33 mm / 1642 g
총권수	1권