Figma + 플러그인 조합으로 사이드 프로젝트 사전준비하기

목차

---

사이드 프로젝트를 하게 되었다.

글또 커뮤니티 슬랙 채널에 비사이드 포텐데이에 참가할 인원을 모집하는 글을 우연히 보게 되었다. 글또가 개발 관련 직군 위주로 구성된 커뮤니티이다보니, 디자이너를 구하기 어렵겠다는 생각이 들었다. 퇴사 후 공백기가 있다보니, 업무에 대한 감각도 챙기고, 새로운 경험을 해보고 싶어 홀린 듯 지원하였고, 디자이너 역할을 수행하게 되었다. 

오랜만의 협업이라, 어떻게 세팅을 가져가면 좋을지 고민하다 사이드 프로젝트 진행 과정을 기록할 겸 글로 남겨보려고 한다. 이 글에서는 사이드 프로젝트 초반에 Figma와 시안 전달에 대한 부분을 다루도록 하겠다.

 

일단 Figma 세팅부터

디자인 툴은 팀원분들도 익숙한 Figma를 선택하게 되었다. 사이드 프로젝트를 위한 세팅을 하기 위해 여러가지 사항을 고려해봤을 때, 가장 적합하다고 판단하였다. 무료 플랜을 사용해본 적이 거의 없어 Figma 공식 홈페이지에서 어디까지 가능한지 확인해보았다.

디자인 기능

출처: Figma 공식 홈페이지

스타터 팀(무료) 플랜에서는 버전 내역 저장이 30일까지만 되는 것을 빼면 대부분의 기능을 잘 사용할 수 있다. 프로토타입 제작이나, 디자인 시스템에서 몇몇 기능을 활용하지 못하는 것이 아쉽긴 하지만, 사이즈가 작은 단위의 작업이기에 없어도 크게 문제되지 않는다. 다만, 협업 디자인 파일에 제한이 있다. Figma, FigJam 파일 각각 3개까지 밖에 사용하지 못한다. 베타 기능인 Slide Deck에는 제한이 아직 없다. 

프로젝트 세팅

프로젝트 세팅을 위해 사이드 프로젝트용 팀을 만들었다고 가정해보자.

사진을 보면 이처럼 파일 수에 제한이 있기 때문에, 파일을 많이 만들지 않고 운영하는 방법을 생각해야한다. 프로젝트를 진행할 때, 디자이너가 1명이라면(편집 권한이 1명으로 충분하다면), Team project 폴더에 올리지 않고 Drafts에서 작업하는 것도 방법이다. Team project에 파일을 두면, 멤버들과 같이 수정할 수 있다. 그래서 팀 상황에 맞춰 적절한 방법을 사용하는 것이 좋다. 우리 팀은 디자이너인 나를 제외하고는 Figma 파일에서 View 권한만 있어도 되는 상황이라, Drafts에 Figma 파일을 두고 파일 내 페이지 관리를 자유롭게 사용하는 방향으로 진행하려고 한다. 

디자인 툴은 정했는데, 시안 전달은 어떻게 하지?

디자인툴은 무얼 사용하던, 작업한 디자인을 개발자에게 어떻게 전달하는 지가 중요하다고 생각한다. 디자인 의도가 개발자에게 온전히 전달되지 못했다면, 그것은 만드는 사람에게 책임이 있다고 보는 것이 맞지 않을까? 그런 점에서 나는 Figma에 새로운 기능이 나오면, 개발 관련 기능을 먼저 확인하는 편이다. 보통 이런 개발 관련 기능 업데이트는 소통을 좀 더 편하게 하기 위한 목적 위주이기 때문이다. 
나는 이번 사이드 프로젝트에서 시안 전달을 위해 두 가지 방식을 고려하였다. 하나는 Figma + Zeplin 이고, 다른 하나는 Figma + Figma Plugin이다. 방식을 선정하기 위해, 팀원들의 선호도, 작업 효율성 등을 따져보았고, 최종적으로는 Figma + Figma Plugin 조합을 선택하게 되었다. 이렇게 결정하게 된 이유는 두 방식다 크게 차이가 없었고, Zeplin의 경우 버전 관리에 장점이 있었으나, 짧은 기간 진행하는 사이드 프로젝트의 특성상 버전 관리를 하게 될 경우가 많지 않을 것이라고 판단했다. 또한, 협업툴을 많이 사용하면 관리하는 측면에서 비용도 커지기 때문에 되도록이면 하나의 툴에서 해결할 수 있는 방식이 좋을 것이다.

시안 전달에 도움을 주는 Figma Plug-in 및 기능

시안 전달은 어떻게 하는 게 좋을까? 보는 사람이 시안에서 어떤 것을 보기를 원하는 지 알아내는 것이 먼저다. 나의 주관적인 경험을 되짚어보면, 다음과 같은 것들을 주로 확인한다.

1. 요소와 요소 사이의 간격 (padding, margin 등)
2. 요소의 크기 (width, height 등)
3. 요소의 상대적인 위치 (fixed, sticky 등)
4. micro-interaction 여부 (animation 등)
5. Action and Reaction (어떤 요소를 누를 수 있고, 누르면 어떻게 되는지 등)
6. 이전 시안과의 변경점

이런 내용들은 어떤 것은 정적이지만, 어떤 것은 동적이다. 정적인 것은 시안을 보는 것으로도 어느정도 이해가 되는 반면, 동적인 것은 정적인 화면을 보고 상상을 해야한다. 그렇기에 주로 동적인 것을 전달할 때는 설명이나 프로토타이핑 등 디자인 의도를 전달하기 위해 노력을 해야 한다. 

개발자에게 전달하기 1 - 정적인 요소를 파악하는 방법

혹시, Figma에 익숙하지 않은 개발자(있을진 모르겠지만)와 협업할 때, 정적인 요소를 파악하기 위해 단축키 4가지만 알면 된다고 전달하라. 이들만 알아둬도, 시안을 편리하게 탐색할 수 있을 것이다.

 

1. ⌘ + 클릭 or 더블클릭 (윈도우: ctrl + 클릭) : 요소 안에 요소 클릭하기 (Deep Select)

 

 

2. ⌥ + 요소 가리키기 (윈도우: alt + 요소 가리키기) : 요소 수치 확인하기

 

3. Enter (윈도우 동일) : 자식요소 선택하기

 

4. \ or ⇧ + Enter (윈도우 동일) : 부모요소 선택하기

개발자에게 전달하기 2 - 동적인 요소를 전달하는 방법

앞서 말했듯, 멈춰있는 화면은 알 수 있는 정보의 한계가 있다. 일부는 기본 기능에서 확인할 수 있는 방법이 있지만, 무료 플랜에서는 많이 부족한 편이라 이를 도와주는 Figma 플러그인들을 사용하면 좋다. 여기서는 Figma 기본 기능과 플러그인 몇 가지를 소개한다.

1. Fill, Hug, Fixed
디자인 작업 시에 Auto Layout으로 요소를 잘 정리해두었다면, 아래와 같이, 요소의 크기를 볼 때, Fill, Hug, Fixed임을 알 수 있다. 혹시나 Auto Layout을 잘 사용하지 않는다면, 개발자를 위해서라도 습관을 들이는 게 좋다고 생각한다.

2. 시안 상태 표시하기 1 - Ready for Dev
Ready for Dev 기능은 해당 시안이 작업 가능한 상태인지를 표시할 수 있는 간단한 기본 기능이다. 실제로 다른 유료 플랜을 사용하면 더 다양한 기능을 사용할 수 있으나, 상태를 여러가지로 나눠서 관리할 게 아니라면 이것만으로도 충분할 것이다.

3. 시안 상태 표시하기 2 - Status Annotation
하지만, Ready for Dev 기능은 껐다 켰다만 할 수 있어서 더 구체적으로 상태 관리를 하고 싶다면, Status Annotation도 대안이 될 수 있다. 이 플러그인 뿐만 아니라 Figma Community 에서 Status를 검색하면 대체할 수 있는 플러그인들이 있으니 적절히 활용하면 되겠다.

4. Commentator (요소에 표시하기)
각 요소에 대한 설명을 달아야 할 때, 사용하면 좋을 플러그인이다. 꼭 플러그인을 사용하지 않더라도, 어떤 요소에 설명을 달아두면 작업 시 확인하기 편할 것이다.

나가며

여기까지 Figma 팀 설정방법과 시안 전달에 필요한 기능들을 알아보았다. Figma와 Figma Community에는 디자이너의 작업에 도움을 주는 것부터 문서화에 도움이 되는 것까지 다양한 기능과 플러그인들이 존재한다. 이런 것들이 가능하구나 정도만 알아두면 좋다. 그것보다 중요한 것은 내가 작업한 디자인 결과물을 개발자에게 잘 전달하는 것이다. 그러므로, 시안 작업만 하지말고, 어떤 점이 불편한지 소통하면서 워크플로우를 만들어가는 것이 중요하다.