홈앤서비스 SK BROADBAND

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

[디자인 파트]에서는 레이어 · 스타일 · 팀 라이브러리 · 인터랙션 등 웹 디자인에 필요한 피그마의 주요 기능을 소개한다. 특히, 어떻게 하면 효율적이고 일관성 있게 코딩할 수 있을지 고민하며 디자인하기 때문에 추후 개발에 용이하게 작업하는 방법을 익힐 수 있다. [퍼블리싱 파트]에서는 완성한 디자인을 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. 최종 비교