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

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

김동주 지음

비제이퍼블릭 2021년 07월 12일 출간 종이책 : 2021년 07월 19일 출간

작품소개

책소개

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

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

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

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

목차

[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)가 되는지에 초점을 두고 작업한다. 이를 통해 ‘효율적인 디자인’이 무엇인지 체득할 수 있고, 디자이너와 개발자 간 서로의 업무를 이해하는 실무적인 눈을 가질 수 있다.

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

작가정보

저자(글) 김동주

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

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