by
Aug 08. 2023
서비스 기획자의 피그마 사용 가이드-3
1.5부: 피그마 꿀팁
0부 ☞ 가이드 개요 소개
1부 ☞ 피그마와 친해지기
2부 ☞ 피그마 꿀팁(현재)
인트로
이전 글에서 다루지 못했던 피그마 꿀팁을 이번 글에서 다룰 예정. 알면 편한 단축키와 플러그인, 파일 버전 히스토리, 묶음 PDF 파일 내보내기, 디자인 키트 정도를 말할 것이다.
알면 편한 단축키
출력을 하거나 이미지 파일로 공유하고 싶다면 1) 피그마 파일에 접속한 후, 2) [알면 편한 단축키] 프레임을 복사하고 3) 자신 피그마 파일에 붙여넣은 후 4) PDF, PNG 등으로 Export 하면 된다.
개인적으로 이 단축키들이 손에 익는 순간부터 피그마의 생산성이 확 올라갔다. 간단하게 몇 개 단축키만 짚어서 설명하면 아래와 같다.
#1 단축키 도저히 못 외우겠다면? [단축키 패널]을 사용하자.
[ctrl + shift + 슬래시(/)]를 키보드로 타이핑하면 단축키 패널이 하단에 열린다. 이 패널에서 피그마의 단축키 튜토리얼을 해볼 수 있으니, 처음에 단축키가 손에 익지 않을 때 자주 사용하는 것을 추천한다. (아쉽게도 피그마는 단축키 변경이 없다.)
단축키 패널 예시 ⓒ 327roy
#2 단일 개체를 선택하고 싶은데 그룹 때문에 여러 번 클릭하는 것이 짜증 난다면? [딥 셀렉트]를 사용하자.
디자인 툴과 레이어의 개념에 익숙하지 않다면 존재하는지 알기 힘든 기능, 딥 셀렉트다.
딥 셀렉트는 말 그대로 최하위 위계의 레이어를 마우스로 선택할 수 있는 기능이다. (액슈어에서는 키보드의 alt를 누른 상태에서 마우스로 클릭하면 가능하다.)
예를 들어 프레임과 그룹 안의 오브젝트를 한 번에 선택하고 싶을 때, 기능을 사용하지 않으면 그 개체가 선택될 때까지 몇 번이라도 더블클릭을 해야 하지만, 키보드의 ctrl를 누른 상태에서 선택하면 한 번에 프레임과 그룹 안의 객체가 선택된다.
딥 셀렉트 예시 ⓒ 327roy
#3 빠르게 객체들을 정렬하고 싶다면? [정렬]을 사용하자.
피그마의 재밌는 UX 중 하나. 정렬을 왼손 방향키와 동일하게 해 두었다. 좌상하우를 AWSD로 해놨다는 말. 크레이지아케이드를 2인 플레이 해보거나 FPS 게임을 해본 사람들이라면 바로 이해가 될 것이다.
두 개의 오브젝트를 클릭하고 키보드의 Alt+A, W, S, D를 입력하면 이 오브젝트들이 정렬되는데, 만약 오브젝트가 겹쳐있다면 큰 오브젝트를 기준으로 정렬되고, 둘이 떨어져 있다면 공평하게 반반씩 이동하여 정렬된다.
또한 수직정렬과 수평정렬은 약어를 따른다. 수직정렬은 Vertical의 V, 수평정렬은 Horizontal의 H. 결국 정렬 단축키는 Alt+A, W, S, D, V, H로 귀결된다. 영상은 [피그마로 서비스 기획 스토리보드 만들기] 글 본문을 참고하자.
[액슈어&파워포인트]의 경우 먼저 클릭한 객체를 기준으로 다른 객체가 정렬되지만, [피그마]의 경우 가장 끝단에 있는 객체를 기준으로 정렬한다는 점에서 차이가 있다.
#4 화면을 보다 편하게 그리고 싶다면? [오토 레이아웃, 컴포넌트]를 사용하자.
오토 레이아웃과 컴포넌트는 개인적으로 피그마의 정수라고 생각되는 기능들이다. 개발 메커티즘과 관련이 깊은 기능들인 만큼 이론을 알고 기능에 익숙해지는 것이 필요하다. 따라서 얘들은 2부 글이나 혹은 다른 글에서 따로 다룰 예정이다.
오토 레이아웃과 컴포넌트를 가볍게 설명하면 둘 다 프레임Frame의 일종인데, 오토 레이아웃의 경우 프레임 레이아웃Layout을 미리 정해놓은 규칙대로 자동 설정하는 것이고, 컴포넌트의 경우 프레임의 프리셋Preset을 활용하여 객체를 빠르게 변경하는 것이다.
아래 영상은 컴포넌트와 오토 레이아웃을 사용해 상담문의 접수 모달을 빠르게 만들어 본 것이다. (별다른 디자인 작업 없이 8 배수 디자인 규칙을 따랐다.) 오토 레이아웃은 단축키를 사용했으며, 이를 사용하는 시점은 하단 패널의 오토 레이아웃 단축키가 깜박거리는 것으로 확인할 수 있다.
ⓒ 327roy
화면 설계 시 자주 사용하는 기능의 컴포넌트를 미리 만들어 놓으면 화면 설계할 때 편하다. 내부에 디자인 시스템이 존재하는 경우, 디자이너가 만들어 놓은 컴포넌트를 십분 활용하자.
플러그인과 위젯
플러그인은 피그마 Rest API를 활용하여 편의성을 위해 피그마 사용자들 혹은 관련 회사들이 만든 도구를 말한다. 내가 자주 사용하는 플러그인은 이곳에서 확인할 수 있다.
현재 가장 강추하는 플러그인은 Jira에서 공식적으로 내놓은 Jira 플러그인이다. 피그마 내에서 해당 플러그인을 통해 Jira 계정의 프로젝트를 연결할 수 있으며, 피그마의 오브젝트(레이어) 단위로 생성한 티켓(혹은 만들어진 티켓)을 연결할 수 있다. 프로젝트를 리드해야 하는 관리자나 개발자의 입장에서 상당히 편리하다.
예를 들어 피그마에서 기획자가 작성한 Description을 보고 Jira에서 개발자가 기능 단위로 하위 작업을 생성할 때, 이 Jira 하위 작업 티켓을 피그마의 Description에 바로 연결할 수 있다. 당연히 Jira API를 활용해 만든 플러그인이기 때문에 피그마 내에서 Jira 티켓의 상태를 바꾸거나 하는 작업도 가능하다.
버전 히스토리 저장 / 묶음 PDF 파일 생성
#1 피그마 파일의 히스토리 관리가 필요하다면? [버전 히스토리 저장] 기능을 사용하자.
피그마로 기획 문서를 만들 때 편한 점은, 더 이상 PPT를 쓸 때처럼 별도 장표로 업데이트 히스토리를 남기지 않는다는 것이다. 피그마에서 버전 히스토리로 관리하면 되기 때문이다. 또한 버전의 장점은, 만약 현재 버전에서 실수로 디자인이나 작성해 놓은 문서를 날렸다고 하면 이전 버전에서 이를 복사해 올 수 있다는 것이다.
유료 플랜 사용하면 Dev mode도 이용할 수 있는데, 만약 디자인이 바뀐 경우 [Dev mode > Changed compare]라는 기능을 통해 개발자들이 직접 AS-IS, TO-BE 형상을 확인할 수 있다. 이는 링크 내 본문 하단의 [Session 2 > 변경 내역 추적]에서 말씀드린 기능을 확인할 수 있다.
#2 묶음 PDF 파일 생성
피그마로 IR 등 발표 자료를 만들 때 이를 PDF로 다운로드 받아야 할 때가 있다. 이때는 사진 속 Export frames to PDF 기능을 사용해, 현재 피그마의 페이지 내의 모든 장표들을 좌측 패널에 정렬된 순서에 맞춰 PDF로 다운로드할 수 있다.
디자인 키트
디자이너가 아니어서, 혹은 시간이 많이 들어 디자인 컴포넌트를 만들기 힘든 상황이라면? 망설임 없이 누군가 잘 만들어 놓은 디자인 키트를 활용하면 된다.
내가 자주 사용하거나 참고하는 디자인 키트는 이곳에서 확인할 수 있다. 상단의 동영상에서 사용한 컴포넌트는 Ant Design에서 만든 컴포넌트를 활용한 것이다.
실제로 리액트 등에서 코드 Import 가능한 컴포넌트를 피그마 디자인 키트로 구현한 것들이 꽤 있다. 대표적으로 Ant Design과 MUI가 있다. 이를 통해 별다른 디자인 없이 개발 라이브러리에서 구현되는 컴포넌트와 동일한 디자인을 피그마에서 할 수 있다.
디자인 키트 실습:
Ant Design 디자인 키트(링크)를 활용해 상담문의 신청 화면 만들기
ⓒ 327roy