by
Jul 18. 2023
서비스 기획자의 피그마 사용 가이드-1
0부: 가이드 개요 소개
0부 ☞ 가이드 개요 소개(현재)
1부 ☞ 피그마와 친해지기
2부 ☞ 피그마 꿀팁
인트로
본인은 이전에 한 플랫폼의 프로덕트 매니저로 지내다 현재는 HR SaaS 솔루션의 서비스 기획자로 재직하고 있다. 이전 회사부터 피그마로 기획을 하며 이제는 피그마 컨퍼런스까지 라이브로 챙겨볼 정도로 피그마의 빅팬이 된 상태인데, 열심히 주위에 피그마에 대해 전파하던 중 기회가 되어 회사 내부에서 비디자인 직군을 위한 피그마 사용 강의를 요청받게 되었다.
피그마는 기존 디자인 툴(어도비 시리즈 등)과 마찬가지로 디자인툴의 공통적인 특징은 대부분 가지고 있기 때문에 1) 피그마로 어떤 것까지 할 수 있는지 사례 공유와 2) 피그마 꿀팁, 그리고 3) 피그마의 실습에 강의의 주안점을 두었다.
3번 내용처럼 피그마로 비디자인 직군이 가볍게 실습하는 것을 고려했기에 강의 진행시에는 피그마 파일(.fig) 자체를 공유하고, 청자들이 직접 실습하며 익숙해질 수 있도록 강의를 할 예정이다.
강의는 1부, 2부로 나누어 진행할 생각이고, 글 또한 시리즈 형태로 3~4개 정도를 생각하고 있다. 이번 글에서는 앞으로 작성할 비디자인 직군을 위한 피그마 사용 가이드 개요를 다룰 예정!
일단 강의 커리큘럼은 아래와 같다.
ⓒ 327roy내가 피그마를 사용하는 이유
디자이너는 아니지만 나는 예쁜 디자인을 보는 것을 좋아하고, 이를 스크랩하거나 직접 디자인하고 싶은 욕구를 가지고 있는 사람이다.
이 때문에 예전부터 파워포인트를 시작으로 일러스트레이터, 포토샵, 프리미어, 애프터이펙트, 피그마 등 다양한 디자인 관련 툴을 찍어먹었는데, 프로덕트 매니저의 길을 걷기 시작하며 화면 설계를 위해 피그마를 본격적으로 사용하기 시작했다.
피그마를 최초에 사용한 이유는 회사에서 사용했기 때문이지만, 현재는 간단한 디자인 작업(지인 배너, 현수막 제작)부터 피칭덱, IR 자료 제작, 그리고 서비스 기획서, 스토리보드 작성 등 웬만한 작업을 모두 피그마로 해결하고 있다. 이토록 피그마를 좋아하고, 자주 사용하는 이유를 정리해 보았다.
1. 무료 사용자에게도 제공되는 다양한 기능
피그마를 사용하는데 거부감이 덜했던 가장 큰 이유는 1) 무료로 사용할 수 있다는 점과 2) 무료 사용자에게도 대부분의 기능이 제공된다는 점이었다. 아래 사진은 피그마 공홈의 자료를 보면 무료 플랜에게도 디자인 기능은 모두 제공되는 것을 확인할 수 있다.
ⓒ figma2. 클라우드 기반 서비스
게다가 피그마는 클라우드 기반의 웹 서비스다. 이 말은 즉, 인터넷만 연결되어 있다면 1) 언제 어디서든 접속이 가능하고, 2) 굳이 피그마를 설치하지 않아도 되며 3) 자동으로 저장된다는 특징이 있다.
이는 노션과 같이 요즘 핫한 협업 툴들에게서 찾아볼 수 있는 특징인데, 저장과 데이터 손실에 대한 부담감과 작업 환경이 바뀔 때 발생하는 비용이 적고, 간편한 공유와 협업을 가능케 한다. 근데 이게 무료로 제공되니 내 입장에서는 피그마를 사용하지 않을 이유가 없었다.
3. 뛰어난 사용성과 생산성
피그마는 웹/모바일 디자인을 하기 위해 필요한 핵심 기능들로만 구성되어 있다. 그만큼 기존 디자인툴보다는 기능의 종류가 적은데(하지만 비디자인 직군이 사용하기엔 차고 넘침), 이 덕분에 화면의 구성부터 단축키까지 디테일하게 사용과 접근이 편하도록 구성되어 있다.
실제로 피그마의 단축키들을 보면 대부분 왼손 하나만으로 해결할 수 있다. 예를 들어 기존 디자인 툴에서 오브젝트의 정렬을 ctrl+alr+R 혹은 L등으로 사용했다면 피그마는 alt+A, W, S, D 정도면 끝난다.
또한 피그마는 프론트개발, 웹 디자인에서 많이 사용되는 아토믹 디자인 방법론에 기초하여 만들어진만큼, Component, Auto Layout과 같은 특수한 기능들이 있다.
개인적으로 본인이 피그마를 사용하며 생산성이 폭발적으로 상승했다고 느끼는 기점이 이 두 기능을 터득했을 때부터였다.
본인이 생각하는 피그마를 사용할 때 생산성이 폭발적으로 상승하는 시점 = 'Master Component, Auto Layout, Content의 Fixed/Hug/Fill'을 이해하는 순간
피그마의 기능들을 속속 들어 알게 되면 그때부터는 노션과 마찬가지로 피그마를 통해 상상들을 보다 빠르고, 쉽고, 구체적으로 그려낼 수 있다. 그래서 나는 IT 씬에 있는 사람이라면 피그마를 꼭 사용해 보는 것을 권하고 다닌다. (본인 경럼상 피그마를 통해 프론트 개발을 이해하고, 노션을 통해 백엔드 개발을 이해할 수 있었다.)
4. 활성화된 커뮤니티
피그마는 커뮤니티가 잘 활성화되어있다. 이는 피그마가 자신들의 프로그램을 일반 사용자들도 커스터마이징 할 수 있도록 API를 열어주었기 때문이기도 한데, 이 덕분에 '피그마에 있었으면..' 하는 기능들이 피그마 사용자가 직접 만들어낸 플러그인들로 채워지고 있다.
실제로 한국에도 활성화된 피그마 커뮤니티가 많고(오픈 카톡, 홀릭스, 디자인 나침반 등), IT 씬에 존재하는 많은 협업 툴들이 피그마에 공식 플러그인을 출시하고 있다. 가장 최근에 공식적으로 추가되어 내가 잘 사용하고 있는 플러그인으로는 Jira가 있다.
강의(가이드) 맛보기
강의는 앞서 말했듯이 크게 1부, 2부로 구성할 계획이다. 실제로 비디자인 직군이 사용하는 것을 고려하고 있기 때문에, 디자인을 어떻게 하느냐에 초점이 맞춰져 있다기 보단 기존에 디자인된 것을 사용하여 어떻게, 무엇을 간편하게 만들 수 있는지에 초점을 맞추려고 한다. 차차 시리즈 글에서 아래 내용들을 공개할 생각이다.
공유 예정인 피그마 사용 가이드 파일 ⓒ 327roy
가이드에 포함된 꿀 단축키 ⓒ 327roy
가이드에 포함된 실습 ⓒ 327roy