by
Aug 04. 2023
서비스 기획자의 피그마 사용 가이드-2
1부: 피그마와 친해지기
0부 ☞ 가이드 개요 소개
1부 ☞ 피그마와 친해지기(현재)
2부 ☞ 피그마 꿀팁
인트로
7월 중순부터 주에 2~3번 정도는 네트워킹을 한 듯하다. 멘토님부터 친분 있는 마케터, 개발자, 기획자 등 다양한 사람들과 교류하고 인사이트를 공유받았다. 주말에도 우선순위가 높은 일들이 치고 들어오니 빨리 마무리하고 싶던 이 시리즈도 계속 미루게 되는 불상사가 발생했다. 다시 마음 잡고 써봐야지.
이번 챕터에서는 재직 중인 회사에서 진행한 피그마 교육에서 다룬 자료들을 바탕으로 글을 작성할 생각이다. 따라서 1) 피그마 서비스의 배경 설명부터 2) 기본적인 피그마 UI의 개요를 다룰 예정. 자주 사용하는 단축키등 꿀팁은 따로 발행할 것이다.
비디자인 직군을 위한 피그마 사용 가이드, 스타트
피그마는 IT 씬에 있다면 다들 본 적이 있을 것이다. 이제는 디자이너뿐 아니라 기획자, 마케터, 개발자, 인사담당자 등 정말 다양한 직군들이 사용하기 때문이다. 그러면 피그마의 특징을 먼저 짚고 넘어가 보자.
#1 강력한 UI 드로잉
피그마는 벡터, 비트맵을 모두 지원하는 웹 기반의 디자인 툴이다. 웹 기반 프로그램의 장점은 온라인 실시간 작업이 가능하다는 것이다. 실제로 브라우저나 데스크톱 앱으로 접속하는 모든 환경이 웹 기반이기 때문에, 개발자 도구를 열어보면 실시간으로 저장과 조회를 위한 API를 호출하는 걸 확인할 수 있다.
또한 피그마는 디자인 프로세스를 적극 반영한 UI를 가지고 있다. 디지털 프로덕트 제작의 생애를 담을 수 있는 GUI를 가지고 있으며, 이 때문에 더욱 실무에 적용하기 쉽다는 장점이 있다.
테더링 연결해서 피그마 사용하면 데이터가 금방 소진된다. ⓒ 327roy
#2 쉬운 공유
피그마가 원활한 협업을 위해 제공하는 것들은 대표적으로 [실시간 저장과 조회, 커서 채팅, 코멘트, 웹 링크 공유, 지라나 노션 등 다양한 툴과의 연계, 커뮤니티, 플러그인] 정도가 있다.
피그마나 노션처럼 실시간 협업 툴이 재밌는 것은 그룹화된 객체 단위로 고유의 URL을 가지고 있다는 점(노션의 경우 Block 단위). 우리는 그 URL을 공유해서 상대방을 내가 원하는 객체에 즉시 Focus on 시킬 수 있다.
※ 피그마에서 객체의 고유 링크는 그룹 단위 이상부터 부여된다. (그룹, 프레임, 컴포넌트, 섹션, 페이지, 피그마 파일)
#3 시스템적 이용
피그마는 개발과 관련된 개념들이 무척이나 잘 녹아져 있는 디자인 협업 툴이다. 프론트엔드 엔지니어링의 컴포넌트 개념을 가지고 온 마스터 컴포넌트, CSS의 개념을 가지고 온 오토 레이아웃, 그리고 디자인 시스템을 가능케 하는 팀 라이브러리가 존재한다. 또한 피그마는 Rest API를 제공하고 있기 때문에 플러그인을 사용하거나, Webhooks를 이용하여 Storybook 업데이터 등을 구축할 수도 있다.
여기서 말한 Storybook은 UI 컴포넌트 개발을 위한 도구의 일종이다. 참고 문서
#4 끊임없이 진화 중인 제품
피그마의 업데이트는 유저 친화적으로 꾸준하게 진행되고 있다. (심심할때는 피그마의 업데이트 노트를 확인한다.)
나는 현재 피그마가 투 트랙(디자인과 개발)을 겨냥하고 있다고 판단한다. 웹/앱 개발을 위한 디자인파트는 이제 프로토타입 기능의 고도화를 시도하며, 동시에 개발자를 위한 기능(Dev mode)을 통해 개발 프로세스에 보다 이해관계자들이 부드럽게 녹아들 수 있는 방법을 만들고 있기 때문이다.
개인적으로 내년쯤이면 퍼블리싱의 영역에 보다 발을 깊게 걸치지 않을까 기대하고 있다. 내년 피그마 컨퍼런스를 기대하는 중.
TIP! 피그마를 사용할 때는 Desktop App을 사용하는 것을 추천한다. 확실히 버벅거림이 덜하고, 화면의 Height을 보다 넓게 사용할 수 있다. 로컬 폰트의 자동 적용은 덤!
피그마 UI 뜯어보기
ⓒ 327roy피그마의 GUI를 뜯어보면 크게 6개의 영역 정도로 구분할 수 있다.
① 툴바: 마우스 커서의 역할을 변경할 수 있는 툴바가 위치해 있다.
② 파일 위치/파일명: 파일 위치와 파일명, 그리고 파일에 대한 설정 몇 가지(Version history 등)가 존재한다.
③ 뷰 영역: 해당 피그마 파일에 로그온한 사람과 웹 공유 설정, Dev mode 변경과 뷰 관련 설정이 가능하다.
④ 좌측 패널: 피그마 파일의 페이지, 페이지 내의 레이어, 파일 내의 자산(Components)을 확인할 수 있다.
⑤ 우측 패널: 우측 패널은 크게 투 타입이 있다. 1) 아무것도 클릭하지 않았을 때는 파일 전체에 대한 디자인적 설정(캔버스 색 변경, Local variables/styles 확인 등), 2) 오브젝트를 클릭한 경우에는 오브젝트 디자인의 상세 설정을 할 수 있다.
⑥ 캔버스: 번호는 안 매겼지만, 중간에 있는 가장 큰 영역이 캔버스 영역이다. 우리는 캔버스에서 디자인을 하고, 문서를 작성할 수 있다.
피그마 UI: ① 툴바
ⓒ 327roy피그마 툴바의 모습이다. 내 기준으로 자주 사용하는 툴들은 따로 하이라이트 표시했다. 피그마의 핵심이 되는 단축키(자주 쓰는 툴바, 정렬, 오토 레이아웃)는 꼭 익숙해지는 것을 추천한다. 자, 3분 간 각자 툴바의 기능들을 캔버스에 하나씩 사용해 보자.
참고로 Scale 기능은 오브젝트의 스케일을 축소/확대하는 기능이다. 나의 경우엔 '아이폰 13 mini (width 375px)` 기준으로 2 배수 디자인을 할 때 사용했는데, 디자이너가 아니면 굳이 알 필요 없는 기능이다.
피그마 UI: ① 툴바 실습 - 모작하기
ⓒ 327roy툴바를 한 번씩 끄적여 봤으면 실습을 진행해 보자. 실습 자료 링크에 접속한 후, 실습 자료를 복사하여 자신의 피그마 파일에 붙여넣기하여 진행하면 된다. 5분의 실습 시간을 가져보는 것을 추천한다.
피그마 UI: ② 파일명, ③ 뷰 영역
ⓒ 327roy사진에서 대략적으로 각 영역에 어떤 기능이 있는지 확인할 수 있다. 협업 시에 자주 사용하는 기능은 아래와 같다.
① Spotlight me: 개발자, 디자이너가 어디 영역을 보고 있는지 그들의 뷰 화면을 함께 볼 수 있다.
② Share: 웹 공유 및 이해관계자들의 접근 권한을 관리하기 위해 사용한다.
③ Dev mode: 개발자 모드는 디자인이 완료된 화면을 집중해서 보기 편하다.
④ Prototype: 피그마에 스케치한 형상을 이해관계자에게 설명할 때 자주 사용한다.
⑤ 피그마 뷰 설정의 Zoom to fit(Shift+1): 페이지 내 전체 오브젝트를 한눈에 볼 수 있게 캔버스가 축소/확대된다.
피그마 UI: ④ 좌측 패널
페이지와 레이어, 디자인 자산을 관리하는 영역
ⓒ 327roy여기서 알아두면 좋은 것은 레이어(Layer)에 대한 개념이다. 일러스트레이터, 포토샵, 파워포인트 등 2차원 평면에 도형을 겹치는 작업을 할 수 있는 모든 툴에 적용되는 개념으로서, 레이어의 특징은 1) 레이어 간 위계가 존재하며, 2) 특정 위계의 레이어만 따로 작업할 수 있다는 것이다. 예를 들어, 오브젝트를 클릭한 후 '맨 뒤로 보내기'의 기능은 해당 오브젝트의 위계를 최하위로 강등시킨다는 의미이다.
그리고 레이어를 보다 잘 사용하기 위해서는 묶음의 개념을 이해하자. 피그마의 단일 오브젝트(도형, 텍스트)를 1개 이상부터 그룹화를 할 수 있다. 그룹화의 종류는 대표적으로 아래와 같다.
① 그룹: 오브젝트를 묶는다. 그룹의 크기는 내부 오브젝트의 사이즈에 맞춰진다.
② 프레임: 오브젝트를 가둔다. 피그마의 유의미한 작업은 대부분 프레임을 통해 이루어진다. 오토 레이아웃과 컴포넌트도 프레임의 일종이다.
③ 오토 레이아웃: 오토 레이아웃의 기능을 가진 프레임을 의미한다.
④ 컴포넌트: 컴포넌트 기능을 가진 프레임을 의미한다.
⑤ 섹션: 작년 말에 추가된 기능이다. 프레임보다 상위 위계이며, 프레임을 가둘 수 있는 영역을 의미한다.
여기에서 그룹과 프레임의 개념이 헷갈릴 수 있다. 이에 대한 설명은 다른 브런치 작가분의 글로 대체하겠다.
피그마 UI: ⑤ 우측 패널
파일 내 지정된 스타일, 개별 오브젝트의 상세 설정을 관리하는 영역
ⓒ 327roy이 장표에서는 비디자인 직군이 굳이 알 필요 없는 영역을 말하는 게 빠를 듯하다. 우측 패널 > Layer > Pass through라고 적힌 영역이 있다. 이것은 알 필요 없다. 여러 장의 레이어를 겹칠 때 이펙트를 주는 일종의 혼합 모드 개념인데, 완전히 디자인을 위한 기능이다. 이 외에는 한 번씩 만져보면 좋을 듯하다.
사실 컴포넌트 혹은 오토 레이아웃의 경우 우측 패널에 영역이 하나씩 더 생긴다. 이것은 심화 편에서 다룰 생각이다.
Width, Height을 늘릴 때 꿀팁: 해당 칸 안에서 사칙연산이 동작한다. 500px를 늘리고 싶으면 +500을 작성하면 된다.
피그마 UI: ④ 좌측 패널, ⑤ 우측 패널 실습 - 모작하기
ⓒ 327roy