#11. Figma vs Sketch

최근 UI 디자이너들 사이에서 화제가 된 Figma, 그리고 Sketch

MengTo가 Medium에 기고한 글의 번역입니다. (원문) Figma는 예전부터 UI디자이너들 사이에서 화제였던 도구였는데 드디어 사용가능한 버전이 출시되었습니다. Design+Code로 유명한 MengTo가 Figma를 Sketch와 비교한 글을 읽고 번역 & 공유드리니 도움이 되었으면 좋겠습니다. 

Figma is like Sketch in the browser with real-time collaboration.

제한된 시간동안 사용했을 뿐이지만, 전 Figma가 어도비 XD를 처음 접했을 때 보다 좀 더 세련되고 실제 프로덕트 레벨에 가까운 상태로 나왔다고 단언할 수 있습니다. Figma는 자신을 돋보이게 할만한 뛰어난 세가지 기능을 가지고 있습니다: 실시간-협업 기능(real-time collaboration), 벡터 연결(vector networks), 그리고 버전 관리(version history)에 대한 부분들입니다. Figma를 통해서 여러 명의 디자이너들이 동시에 하나의 디자인 파일을 작업할 수 있게 되었습니다. 더욱 중요한 것은 Figma가 정말 빠른 도구이며, 20개가 넘는 아트보드들을 하나의 문서 안에서 손쉽게 작업할 수 있다는 점입니다. 

사람들은 필연적으로 Figma를 Sketch와 비교할 겁니다. Sketch를 오래 사용한 유저로써 저는 저의 경험을 공유하려 합니다. 제가 3년 전에 포토샵과 Sketch를 비교했던 것처럼요. 

Browser VS Native

Figma

 

처음엔 전 Figma에 대해서 비관적인 시선을 가지고 있었습니다. 이는 Figma가 브라우저 기반의 UI 디자인 도구였기 때문입니다. 그러나 실제 결과물이 나온 지금, 전 이 부분에 어느 정도 미래가 있다고 이야기 할 수 있을 것 같습니다. 모든 기능들이 매우 환상적으로 반응하고 기대했던대로 동작합니다. 많은 부분들이 스케치와 흡사하게 강력합니다.(다만 스케치의 심볼 기능과 다양한 플러그인 같은 부분들은 아직 찾아볼 수 없습니다.) 모든 문서들과 각 버전들은 서버에 존재하며, 필연적인 반복 작업들을 보다 수월하게 만들어 줍니다. 또한 문서를 .fig 파일로 만들어 다운로드 가능하도록 할 수도 있습니다. 이런 방법들을 사용하여 당신의 Figma 파일을 남들과 공유할 수 있습니다. 

 

Figma는 Google fonts를 사용합니다.

자연스럽달까, Figma는 구글폰트(Google fonts, a free library of 800+ fonts)를 사용합니다. 그리고 애드온을 통해 사용자가 별도로 가지고 있는 폰트 역시 사용할 수 있습니다. 그들의 폰트 시스템은 아이코닉한 폰트와 CSS 툴 킷을 제공하는 FontAwesome까지 포함합니다. 이러한 시도들은 굉장히 영리하다고 생각됩니다. 대부분의 협업자들이 함께 작업하는 것을 위해서 별도의 폰트를 설치하는 것을 달가워하지 않으니까요. 

Real-time collaboration

Figma에서 두 명의 사용자가 같이 작업하고 있습니다.

많은 팀들에게, 이 부분이 바로 게임 체인저로 작용할 겁니다. 동료 디자이너들, 엔지니어들 혹은 클라이언트들과 실시간으로 작업이 가능하게 됨으로 인해 우리는 프로젝트를 진행하고 커뮤니케이션하는데 있어 실로 수많은 시간들을 절약할 수 있습니다. 물론 모든 프로젝트들이 협업을 필요로 하는 것은 아니지만, 손쉽게 협업을 할 수 있는 가능성이 존재한다는 것은 좋은 일입니다. 

작업 환경에 다른 사람들을 초대할 수 있습니다. 

물론 Figma를 사용해서 재빠르게 혼자 작업할 수도 있습니다. 그 이후에 다른 사람들을 초대하죠. 그들이 싸인업(sign-up)을 하거나 혹은 하지 않더라도 현재 디자인이 진행되고 있는 프로세스를 같이 볼 수 있고 수정할 수 있습니다. 브라우저 기반 툴의 확실한 장점은 수동적으로 초대를 받고 접근하는 유저들이 별도로 아무것도 설치하지 않아도 된다는 점입니다. 함께 참여하기 위해 맥이 필요하지도 않구요. Figma는 맥과 윈도우즈 그리고 리눅스 기반에서 모두 작동하며 단순한 뷰잉(Viewing)의 경우는 모바일 디바이스에서도 문제가 없습니다. 이런 일련의 상황들은 확실히 팀을 다이나믹하게 바꾸고 디자이너와 개발자들 간의 진정한 협업을 이뤄내는데 일조합니다. 아무나 작업의 현장에 들어올 수 있고 모든 스펙들을 체크할 수 있습니다: 폰트, 컬러, 크기, 거리, 기타 다른 것들까지. 개발자들은 각종 제한사항들을 점검하고 여러 개의 스크린에 어떤 식으로 레이아웃들이 적용됐는지 손쉽게 확인할 수 있습니다.

 

Version History

Figma의 버전 관리

 

Figma에서 버전 관리에 대한 부분은 좀 더 시각적으로 구성되어 있습니다. 그리고 이는 작업자가 조금 더 빠르게 각 버전들을 비교할 수 있게 만듭니다. 이런 경험들은 Sketch의 다소 느리고 과도한 버전 비교보다(macOS의 네이티브 기능을 사용한) 훨씬 만족스럽니다. Figma와 Sketch 모두 오토 세이브 기능과 버전 관리에 대한 기능을 가지고 있지만 그것을 실현해내는 방법은 사뭇 다릅니다.

Sketch의 버전 관리

Sketch에선 버전들을 넘나들며 비교하는 것이 매우 무겁게 진행됩니다. 대부분 디자이너들은 이 기능을 꺼두는데(오토 세이브), 이러한 기능들이 디스크 스페이스를 너무 많이 잡아먹기 때문입니다. 

Comments System

Figma의 코멘트 시스템

이 코멘트 시스템은 Figma에 자체 내장되어 있습니다. 팀 멤버들은 각자의 디자인에 핀을 꽂아 코멘트를 할 수 있고, 상대방은 이에 대한 노티를 받게 됩니다. 해당 부분에 대해 해결이 되었을 경우 "Resolve" 버튼을 클릭함으로써 해당 코멘트에 대한 쓰레드를 숨길 수 있습니다. 

Sktech에선 제플린(Zeplin) 같은 프로그램을 사용하여 코멘트 기능 및 스펙들에 대한 인터랙티브한 해결책들(가이드)과 Asset 전달에 관련된 부분들을 해결할 수 있습니다.

Zeplin

제플린 역시 브라우저 기반으로 동작하기 때문에 맥과 윈도우즈에서 모두 사용할 수 있습니다. 또다른 Sketch 플러그인으로 주목할만한 것은 인비전(InVision)에서 제작한 크래프트(Craft) 입니다. 크래프트는 Sketch사용자들이 실제 데이터로 디자인 할 수 있도록 도와줍니다. 작업자는 손쉽게 기존 프리셋, 웹사이트 혹은 API를 통해서 이름이나 사진 등의 데이터를 생성할 수 있습니다. 

Craft from InVision

만약 디자이너가 스케치와 함께 크래프트, 인비전(InVision), 제플린을 함께 사용한다면 해당 프로젝트는 프로토타이핑과 코멘트 시스템을 통해 훨씬 매력적으로 작업할 수 있는 상태가 됩니다. 

Vector Networks

벡터 연결(Vector Networks)은 획기적입니다. Figma에서 작업자는 벡터 포인트 대신 라인들을 움직일 수 있고 그 라인과 이어질 수 있는 점들은 자동으로 연결되어 따라옵니다. 이것은 Figma에선 단순히 시작점과 끝점을 가지고 처리하는 것이 아닌 여러 개의 벡터라인들을 연결할 수 있기 때문입니다. 한 번 사용하게 되면 이것이 얼마나 직관적인 처리방법인지 아실 수 있을 겁니다.

Vector networks introduced by Figma

물론 아직 가위(Scissors)기능이나 로테이트 카피(Rotate Copies) 기능은 없습니다만, 대부분의 벡터 처리에 있어서 Figma가 강점을 가질 것이라고 생각합니다. 한 번 사용하게 되면 사용자가 좀 더 쉽게 사용할 수 있고 벡터 연결(Vector Networks)를 통해서 보다 재미있는 결과물들을 이끌어 낼 수 있을것이라 봅니다. 

Import from Sketch

Figma는 매우 높은 수준의 정확도로 Sketch 파일 임포트가 가능합니다. 모든 아트보드들, 그룹들, 레이어들을 각각 정확한 이름과 그룹핑, 프로퍼티(멀티플 보더, 그림자, 블렌딩 모드와 백그라운드 블러 등의 이펙트까지)를 가진 상태로 온전히 가져옵니다.  바로 이러한 점 때문에, 전 Figma를 Sketch 사용의 연장선 상에서 혹은 그 반대로 Sketch를 Figma 사용의 연장선 상에서 쓸 수 있다고 생각합니다. Figma를 사용하면서 기존에 존재하는 Sketch 작업을 임포트하고 바로 그 지점에서 작업을 시작할 수 있는 것이죠. 

 

다만 이상하게도, 스케치에서의 벡터를 Figma로 Copy & Paste 할 수는 없었는데요, Drag & drop으로는 바로 SVG 파일들을 가져올 수 있는 점을 확인했습니다. 

 

그리고 아주 복잡한 벡터조차 임포트가 가능했습니다.(from Angle) 충분히 만족할만한 결과물을 얻을 수 있었어요. 물론, 그라디언트나 그림자 효과 같은 경우는 아...주 만족 스럽진 않았습니다. (가끔은 아예 사라져버리기도 하더군요.) 하지만 어쨌든 모든 모양들이 제자리에 있었어요. 이건 아주 큰 포인트입니다, 왜냐하면 모든 Sketch UI 킷들을 Figma에서 사용가능하다는 말이니까요. 

There’s a Desktop-ish app

Figma를 사용하는 유저라면 데스크탑 버전도 다운로드 받을 수 있습니다. 다만 기존의 네이티브 어플리케이션의 경험을 생각하시면 곤란합니다. 이건 그냥 웹버전의...포장(Web wrapper) 같은 거에요. 단적으로 키보드 단축키 같은 것들은 브라우저 버전과 같은 방식으로 동작하지 않습니다. 예를 들어 커맨트+1~9 같은 경우는 브라우저 버전에선 각각의 탭들을 이동하는데, 데스크탑 버전에서는 각 문서 사이를 이동합니다. 

Constraints

어댑티브(Adaptive) 레이아웃은 최근 디자인 도구들 사이에선 필수불가결한 기능이 되었습니다. 이는 디자이너들이 필연적으로 다수의 디바이스 해상도와 작업해야하는 상황이 되었기 때문입니다. 만약 아이폰 7과 아이폰 7 플러스 화면을 디자인함에 있어 단순히 아트보드 리사이징으로 작업 가능한 상황이 아니라면 정말 힘들겁니다. 

어댑티브 레이아웃

Figma에선 보더의 핀을 조정하는 것만으로도 어댑티브 레이아웃에 관련된 제약들을 해결할 수 있습니다. 이건 Sketch에서의 Pin to Corner 기능과 Resize object와 같은 기능입니다. 두 가지를 모두 써본 입장에선 Figma의 방식이 좀 더 시각적으로 잘 풀어냈고 직관적이라는 것을 인정해야 할 것 같습니다. 

Figma의 Constraints 조정

Sketh에선 Float in place 기능이 있는데요, 이는 여러 개의 요소들을 같은 비율의 거리차와 크기차를 유지하면서 조정할 때 쓰입니다. 전반적으로 Figma는 이와 같이 동작합니다. 

Sketch의 Float in place

Performance

다수의 아트보드들을 조정하는 것은 Figma에서는 쉬운 일입니다. (하지만 당신 컴퓨터의 팬은 신나게 돌기 시작할꺼에요...) Sketch에서 다수의 아트보드들을 다루는 데 있어 퍼포먼스 이슈를 겪은 분이라면 Figma에선 좀 더 나은 모습을 기대하실 수 있을 겁니다. 아무래도 브라우저 베이스이기 때문에 일반적인 데스크탑과 랩탑, 모바일 폰 사용자들은 좀 더 나은 접근성을 가지게 됩니다. 오랜 시간동안 Sketch가 윈도우 버전을 출시하길 바랬던 유저 분들이라면, 여기에서 그 답을 찾을 수 있을 것 같습니다. 

The User Interface

UI는 거의 정확하게 Sketch의 것과 흡사합니다. 각 tool들의 이름과 키보드 단축키, 아트보드와 그룹의 개념, 익스포트 하는 것들까지. 아, 이건 Figma에 대해서 뭐라고 하는 것이 아닙니다. 명백히 유저들에게 좋은 일이거든요. 단지 Sketch의 UI셋이 표준으로 삼을 정도로 효과적이고 강력했기에 Adobe XD와 Figma가 주저없이 따라했다는 것을 알 수 있습니다. 

Sketch는 이제 디자인 도구들 사이에선 마치 "아이폰"과 같은 존재(=표준)가 되었습니다. 가장 최근의 툴들은 표준을 따라하고 거기에 약간의 변화를 더하죠. 하지만 시간이 지날수록 툴들은 각자 나름대로 더 성숙해질 것이고 그들만의 희소성을 찾아나갈 겁니다. 최종적으로는 유저들이 가장 큰 이익을 보게 될 것입니다. 더 많은 선택지와 더 나은, 높은 수준의 표준들이 정립될테니까요. 다른 말로 하자면, 이제 더이상 디자이너들은 UI 디자인을 위해서 포토샵에 막혀있을 필요가 없게 되었습니다. 

여기에는 Figma나 Adobe에 대해서 어떠한 공격적인 의미도 없습니다. 그들은 최대한 디자이너들이 원하는 바들을 반영하면서 혼란스럽지 않게 변화를 유도하고 그를 최대한 부드럽게 시행하고 있을 뿐입니다. 좀 더 공평하게 이야기하자면 많은 수의 표준들은 사실 Mac과 어도비의 일러스트레이터 그리고 파이어웍스Fireworks (RIP)에서 따왔습니다. 

Should you use Figma?

제 생각엔 완전히 "Yes" 입니다. 새로운 도구를 배운다는 개념으로 접근할 필요는 없습니다. Figma는 정확히 Sketch를 대하는 것과 유사한 느낌이고 실제로 그렇게 동작합니다. 저에겐 이 두가지 도구들을 번갈아 사용하는 것이 매우 자연스럽게 느껴졌습니다. 

두 도구들은 서로를 보완하며 발전할 겁니다. 맥과 윈도우즈, iOS와 안드로이드 등을 필요에 따라 번갈아 사용하는 것처럼 서로 다른 필요지점을 찾아서 영역을 채워나갈 수 있을 것이라 생각합니다. 저는 실시간 협업 시스템과 멀티 플랫폼 지원(윈도우, 맥, 리눅스)을 위해선 Figma를, 그 자체의 플랫폼이 성숙한 점과 강력한 네이티브 경험 그리고 뛰어난 플러그인(plugins)과 리소스(resources) 활용을 위해선 Sketch를 사용할 겁니다. 기능적인 면에 관해선 사실 언젠가 서로가 서로를 따라잡을 것이라고 생각해요. (실시간 협업, 벡터 연결, 코멘트 시스템, 심볼 기능, 다양한 플러그인 등)  

Figma 는 2016년이 끝날 때까지 무료입니다. 마음편히 한 번 시도해보세요.