#2 피그마를 왜 써야 하는데?
피그마 설명서 2부, 피그마 장점
저는 장점을 이야기하기 전에 먼저 단점을 이야기해보려 합니다. 사실 Spectrum커뮤니티에서 피그마에 대해서 해외 많은 디자이너들과 소통하다 보면 아직 피그마의 오류들이 종종 보이곤 합니다. 가장 큰 단점으로는 영문이 아닌 한국어 및 중국어, 일본어에서 텍스트 먹힘 현상이 많이 일어나고 있습니다.
텍스트를 수정하기 위해서 스페이스바 및 Delete키를 누르면 양옆의 텍스트가 먹히는 현상이 종종 일어납니다. 저만 겪고 있는 문제인 줄 알았으나 Spectrum에서 영문을 제외한 외국어들에서 해당 문제가 일어나고 있다는 게시글을 읽었습니다. 필자는 해당 문제에 대해서 피그마 측에 메일을 보내보았으나 해당 문제를 개선 예정이라고만 답변을 받았습니다.
텍스트 오류 문제 및 몇 개의 버그들이 발견되었지만 지금은 텍스트 오류를 제외한 대부분의 문제가 해결된 걸로 확인이 되었습니다. 이러한 버그들이 있어도 피그마를 왜 사용하고 사람들이 관심을 가지는지에 대해서 저는 몇 가지의 카테고리로 정리해보도록 하겠습니다.
(저는 글의 간결함을 위해 Sketch, Figma 및 Adobe XD 3가지의 UI 디자인 툴에만 중점을 두겠습니다.)
1. 2020년 가장 기대되는 툴
UXtools.co에서 최근 발표한 설문조사에 의하면 2020년에 선호하는 디자인 툴은 무엇인가라는 설문 조사에서 앞도적으로 Figma가 표를 차지하였습니다. 실제로 미디엄의 UI 디자인 툴에 대한 대부분의 글은 '피그마로 왜 넘어가는지'와 '아직 피그마보다 스케치가 더 훌륭한지'에 대한 두 가지 종류의 글로 나뉩니다.
사실 아직 다양한 플러그인 및 UI 인터페이스 등이 스케치가 더 훌륭하며 사실 피그마는 스케치를 많이 카피했다 느낌이 없지 않아 있습니다. 하지만 두 가지 종류의 글을 보면 모두 사람들이 피그마에 관심이 있다는 척도로 해석이 됩니다. 무플보다는 악플이 낫다는 말처럼 말이죠.
UXtools.co의 2020년 가장 관심을 가지고 있는 UI 디자인 툴 설문 조사 결과 (사진출처 - UXtools.co)2. 언제든 어디서나 내 마음대로!
피그마는 스케치와 XD 같이 비트맵 기반이 아닌 벡터 기반이라는 점은 같습니다. 하지만 가장 큰 차이는 피그마는 클라우드 웹 기반의 프로그램이라는 점입니다. 스케치와 XD도 팀 라이브러리로 해당 시스템을 가지고 있지만 아직 부족하다 생각합니다. 인터넷이 되는 Mac OS, Windows 모두에서 데스크톱 앱이 굳이 없더라고 어디서든 접속해서 작업을 할 수 있다는 점입니다. 인터넷이 되는 공간이면 어디서든 파일 링크만 보내면 접속이 가능한 점은 다른 UI 디자인 툴 시장에서 가장 독창적인 피그마의 장점인 것 같습니다.
또한 필자는 주로 맥북을 사용하고 있는데 맥북의 용량은 기본 용량으로 터무니없이 적은 용량을 사용하고 있습니다. 그래서 주로 구글 드라이브를 사용하고 스케치와 XD 모두 벡터 기반으로 비트맵 기반의 포토샵보다 파일의 용량이 현저히 적지만 그 개수가 쌓이다 보면 무시하지 못합니다. 하지만 피그마는 데스크톱에 용량을 단 1mb도 차지하지 않는다는 점이 또 하나의 가장 큰 장점인 것 같습니다.
3. 이게 무료라고요?
인생을 살아가면서 가장 중요한 돈!! 그래서 우리는 무언가를 구매할 때 가격을 상당히 많이 보는데요. 가장 많이 사용하는 Sketch는 30일의 무료체험판을 제공하기는 하지만 99$라는 비용을 지불 후 1년 후에는 매년 79$의 비용을 내야 한다는 점은 큰 리스크로 작용한다고 생각합니다.
하지만 피그마는 그냥 무료입니다. 물론 팀 단위 프로젝트라면 무료가 아니지만 개인으로 이용한다면 돈을 낼 필요도 없이 그냥 브라우저에서 로그인만 하면 사용이 가능하다는 점이지요. 피그마를 기간제도 체험도 아닌 개인과 편집자 2명의 한해서 무제한 무료라는 점입니다. 당신이 디자인 회사를 운영하지 않는 이상 돈 쓸 일이 없습니다.
충분히 경험해보고 다수의 인원이 참여하는 프로젝트를 실행할 시에 결제를 하고 사용한다는 점은 가장 큰 피그마의 장점이라고 생각합니다. 저는 피그마의 프로젝트를 개인작업 및 소규모 프로젝트로 퍼블리셔 분과 두 명이서 작업하기 때문에 아직까지는 무료 라이선스 상위의 라이선스를 결제해서 가져간 적은 없습니다.
우리들의 월급은 어디로 가는가...? 내 지갑과 매우 흡사하다...4. 컴포넌트 시스템
총괄적으로 부르면 디자인 시스템이라고 합니다. 디자인 시스템이란 디자인 속도를 높이고 디자인 일관성을 유지하도록 도와줍니다. 이것은 PD 키트의 기반이 되는 유용한 기능입니다.
각 컴포넌트는 스타일, 모양 및 기타 구성 요소로 만들어지므로 몇 번의 클릭만으로 모든 요구를 쉽게 조정할 수 있습니다. 예를 들어 버튼은 모양 (컴포넌트의 배경)과 버튼 텍스트 스타일로 만들어집니다. 이러한 요소들로 마스터 컴포넌트를 만들고 마스터 컴포넌트만 변경하면 모든 컴포넌트가 변경되는 시스템은 너무 편한 기능 중 하나입니다.
Figma 공식 사이트의 컴포넌트 설명 GIF 이미지 (자동재생이 안될 시 확대해서 봐주세요) (사진출처 - Figma)5. 텍스트 & 컬러 스타일 지정
우리는 피그마가 나오기 전 포토샵을 사용할 때 상급자가 나누어준 문서를 봐가면서 컬러 및 텍스트 가이드를 일일이 보면서 작업해야 했습니다. 그 가이드는 수시로 변경돼서 작업자들로 하여금 혼동이 생기기도 했습니다.
피그마는 애초에 이러한 시스템을 지정할 수 있습니다. 예를 들어 브랜드 컬러를 #00000로 지정하고 타이틀이 62pt로 지정하고 있었습니다. 그런데 갑자기 프로젝트 중간에 클라이언트가 브랜드 컬러를 #fb0000으로 지정하고 타이틀을 64pt로 바꾼다고 합니다. 여기서 야근이 시작되는 거죠..... 수십 페이지의 컬러 타이틀을 바꾸고 타이틀이 바뀌니 서브텍스트들도 다 바뀌는 현상이 일어나죠.
피그마는 이 기능을 그냥 맨 처음 지정해놓은 브랜드 컬러 시스템에서 한 번만 바꾸고 H1(보통 타이틀은 H1~H3다.)를 한 번의 클릭으로 수십 장의 페이지들이 다 바뀌는 칼 퇴각을 보여주게 되죠. 이러한 컬러랑 텍스트 시스템은 컴포넌트 시스템과 같이 가장 유용한 기능 중 하나입니다.
Figma의 Local Color System 예시 GIF(자동재생이 안될 시 확대해서 봐주세요) (사진출처 - Figma)6. 점차 스케치를 따라잡고 있는 플러그인
그동안 사실 많은 디자이너들이 피그마가 아닌 스케치를 사용하는 가장 큰 이유는 플러그인이었습니다. 스케치는 GitHub를 통해서 다양한 플러그인을 배포하고 있으며 아직 피그마가 스케치의 플러그인보다 부족하다는 점은 사실입니다. 하지만 최근 피그마는 수많은 업데이트로 피그마 자체 기능으로 해당 문제를 보완해가고 있으며 플러그인도 굉장히 빠른 속도로 스케치를 따라잡고 있습니다.
현재는 필수 플러그인인 Unsplash, Zeplin, Content Reel 등 많은 플러그인들이 나오며 해당 플러그인의 설명도 자세하게? 설명이 되어있습니다. 필수 플러그인들과 활용방법은 '#3 플러그인 어떻게 활용해?'에서 좀 더 중점적으로 자세히 다뤄보도록 하겠습니다.
Figma의 플러그인 이미지 (사진출처 - Figma)7. 자동 저장과 버전 관리
Figma는 클라우드 기반이며 서버에 자동 저장하기 만하면 작업을 저장하지 않거나 컴퓨터에 나쁜 일이 생길 경우 걱정할 필요가 없습니다. 하지만 와이파이 연결이 되지 않을 시 작업 및 자동 저장 기능이 안된다는 양날의 검같은 장점이기도 합니다.
무료 플랜을 사용하면 지난 작업의 30일까지의 버전 관리가 가능하며 이 기능은 스케치의 히스토리 기능보다 훨씬 훌륭한 ui와 시스템이라 생각 듭니다. 포토샵으로 날짜별로의 폴더링을 하고 여러 폴더들을 왔다 갔다 하면서 이전 작업물을 보는 것보다 정말 편리한 기능이었습니다.
8. Auto Layout 기능으로 자동 간격 조정
피그마에서 오토 레이아웃 기능이 생긴 것은 그렇게 오래되지 않았습니다. 스케치의 가장 대표적인 플러그인인 Anima의 기능을 피그마는 자체 기능으로 탑재를 하였습니다. 피그마에 없어서 가장 아쉬운 플러그인중 하나였는데 이 기능을 자체 기능으로 넣어주다니.... 피그마는 디자이너가 무엇을 원하는지 정말 잘 체크하는 것 같습니다.
오토 레이아웃이란 각 섹션 및 구성요소들의 간격들을 일정한 패딩 값을 지정하여서 시스템으로 관리하는 것입니다. 상하 좌우 패딩 마진 값을 그룹으로 지정할 수 있으며 오토 레이아웃 그룹의 그룹에도 오토 레이아웃을 적용할 수 있습니다.
해당 기능은 주로 구성요소들의 간격 아코디언, 테이블 등등 많이 사용되지만 주로 박스 버튼에 많이 사용되고 있습니다. 필자는 버튼을 웬만하면 오토 레이아웃으로 만든 후 마스터 컴포넌트로 지정하여 사용하고 있습니다.
Figma Auto Layout의 예시(자동재생이 안될 시 확대해서 봐주세요) (사진출처 - Figma)9. 더 이상 설명이 필요 있나...?
피그마는 이외에도 말할 거 없이 엄청난 장점을 많이 가지고 있습니다. 사실 피그마를 사용할 줄 알면 스케치도 사용할 줄 알고 XD를 사용할 줄도 알 것입니다. 앞서 말한 것과 같이 기능은 비슷하기 때문이지요.
사실 피그마나 스케치 XD를 사용하는 많은 디자이너들은 만나보았지만 이 툴을 제대로 이해하고 사용하는 디자이너는 별로 보지 못했습니다. 속으로 그렇게 사용할 거면 포토샵 쓰라고 말하고 싶었죠.
저도 맨 처음 주위에 해당 툴에 대해 잘 아는 사람이 많지 않았습니다. 그래서 미디엄 및 스펙트럼에서 구글 번역기 돌려가며 공부하고 카본 디자인 및 애플과 구글의 키트들을 뜯어보며 공부해왔습니다. 저는 이 글을 쓰는 이유는 독자분들이 피그마 및 스케치를 제대로 이해하고 사용하기를 바라는 마음에 글을 쓰고 있습니다.
