웹 디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서 (웹 트렌드를 반영한 반응형 쇼핑몰 따라 만들기)

김동주

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

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

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

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


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

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


[PART3]Figma업그레이드-스마트한활용법
A.Figma플러그인
i.Unsplash
ii.ContentReel
iii.ImagePalette
iv.SuperTidy
v.Able

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

C.Figma단축키


[PART4]Figma200%활용하기-웹퍼블리싱
A.Figma활용웹퍼블리싱

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

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


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

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