본문 바로가기

추천 검색어

실시간 인기 검색어

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

웹 트렌드를 반영한 반응형 쇼핑몰 따라 만들기
김동주 지음
비제이퍼블릭

2021년 07월 12일 출간

종이책 : 2021년 07월 19일 출간

(개의 리뷰)
( 0% 의 구매자)
eBook 상품 정보
파일 정보 pdf (148.69MB)
ISBN 9791165920869
쪽수 671쪽
지원기기 교보eBook App, PC e서재, 리더기, 웹뷰어
교보eBook App 듣기(TTS) 불가능
TTS 란?
텍스트를 음성으로 읽어주는 기술입니다.
  • 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를​ 읽을 수 있습니다.
  • 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.

PDF 필기가능 (Android, iOS)
소득공제
소장
정가 : 32,800원

쿠폰적용가 29,520

10% 할인 | 5%P 적립

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

카드&결제 혜택

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

작품소개

이 상품이 속한 분야

웹 디자인 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

이 상품의 총서

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.
    웹 디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서
    웹 트렌드를 반영한 반응형 쇼핑몰 따라 만들기
    저자 모두보기
    저자(글)
    낭독자 모두보기
    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일)