글에 앞서 스케치를 사용하다 피그마로 넘어간 개인적 소회임을 밝히며, 각자의 환경과 상황에 따라 ppt가 최고의 툴이 될 수도, 스케치가 최고의 툴이 될 수도 있다. 아랫글은 Figma Desktop App release 85 버전 기준으로 작성되었다.
처음 접한 UI 툴, Sketch
대학 4학년 즈음 처음으로 접한 UI 디자인 툴이 스케치였다. 대중적으로 쓰이기도 전에 접해서 symbol 기능을 활용하는 방법도 모른 채 마구잡이로 사용했던 기억이 있다. 이후 첫 번째 회사에서 포토샵과 ppt 모두를 경험했고 자연스럽게 스케치의 소중함을 깨달았다.
이직 후에도 상당 기간 스케치와 제플린을 사용했다. 이미 많은 프로젝트가 스케치 파일로 이루어져 있었고 버전 히스토리도 많이 쌓였었다. 그만큼 활용도가 높은 툴이란 뜻이겠지만, 스케치 특유의 로컬 파일로 이루어진 구조가 불편함을 낳기도 했다.
그중 제일 불편한 점은 4~5명의 디자이너가 여러 프로덕트의 .sketch 파일을 스케치 클라우드를 활용해 공유하는 구조였다. 파일이 바뀔 때마다 매번 업로드 or 다운로드의 반복이 비효율적이라고 느껴졌고, 이 순환 자체도 수동으로 이루어지기 때문에 시안을 항상 최신 상태로 유지하기 어려웠다.
또 스케치뿐만 아니라 함께 사용하는 제플린과 인비전도 불편하긴 마찬가지였다. 제플린은 스케치와 전혀 관계없는 툴이면서 디자인 가이드를 넘길 때 꼭 사용해야하는 툴로 자리매김하는게 불편했다. 또 인비전의 경우는 간단한 플로우를 확인하려해도, craft를 통해 업로드를 해야 하는 방식이 피곤을 유발했다.
다시 만난 Figma
그렇게 스케치에 대한 피로도가 높아갈 때쯤, 핫한 피그마 소식이 스멀스멀 올라왔다. 몇 년 전 피그마 출시 당시 호기심으로 써봤던 경험은 웹 기반의 콜라보레이션 기능 이외엔 큰 인상을 주지 못했다. 하지만 2019년 9월, 심상치 않은 피그마 대세론(?)에 호기심을 느껴 디자인 팀 내에서 가볍게 스터디를 해보기로 했다.
개인적으론 새로운 툴을 탐색하고 써보는 것 자체가 재밌기도 했지만, 그동안 스케치에서 느꼈던 불편함을 피그마가 어느 정도 해소해주는 것 같아 성공적으로 스터디를 진행할 수 있었다. 4주간의 맛보기가 끝나자, 자연스럽게 스케치 → 피그마로의 이사가 확정되었다. 스케치 파일의 히스토리가 없는 프로젝트는 처음부터 피그마로만 시안을 잡기도 했다.
그래서, 뭐가 좋아요?
그렇게 메인 디자인 툴을 변경한 지 어느덧 6개월. 그동안 느꼈던 장점들을 정리하자면 아래와 같다.
넌 아직도 저장하니? 💾
처음 피그마로 옮겨 왔을 때 가장 많이 본 토스트이다. 디자이너들은 지진이 나도 차분하게 ⌘S를 누른다는 농담답게, 틈틈이 저장하는 게 습관이 되어버렸는데 피그마는 그럴 필요가 없다. 한 번은 자리를 바꾸다 실수로 아이맥 전원이 팍- 꺼져버린 일이 있었는데, (물론 스케치도 다시 복구는 해줬겠지만) 그때 나온 농담이 바로 "넌 아직도 저장하니?"이다. 농담처럼 말했지만, 저장을 안 한다는 건 정말 큰 장점이다. 가장 최신의 화면을 항상 유지할 수 있으니 버전 관리를 위해 업로드도, 다운로드도 필요 없다.
언 링크도 이제 안녕 🔗
개인 맥북에는 개인 스케치 계정을 가지고 있었고, 회사 아이맥에는 회사 계정이 연결되어 있어 한동안은 불편함 없이 사용했었다. 하지만 스케치 스마트 레이아웃이 출시되고 이전 버전으로 더는 같은 작업을 할 수 없어, 원격 근무 시 회사 아이맥에서 계정 언 링크 후 → 개인 맥북에 다시 연결하는 과정을 거쳤다. 특히 한 쪽 계정에 이미 레지스터 되어있고, 그를 언 링크하지 않은 이상 다른 계정에서 언 링크 시킬 수 없어 문제였다. 그래서 매번 원격 전날 스케치 계정이 언 링크 되어 있는지 두 세 번 확인하고서야 원격 근무가 가능했다. 하지만 웹 기반의 피그마는 그럴 필요가 없다. 계정 등록만 되어있다면 웹과 앱이 디바이스 수에 상관없이 작동할 수 있다.
올 인 원 🍱
앞에서 언급한 제플린과 인비전도 필요가 없다. 피그마는 한 화면에서 디자인, 프로토타이핑, 코드까지 모두 확인할 수 있기 때문이다. 세 가지 기능을 한 툴에서 해결하니 작업 속도도 매우 빨라졌다. 또 작업하는 디자이너뿐만 아니라, 화면을 확인하는 기획자나 개발자도 프로젝트별로 최신 화면을 찾아 제플린을 헤매지 않아도 되니 이 또한 장점 중 하나이다. 특히 프로토타입 기능은 스마트 애니메이션 기능으로 날개를 달았는데, 많은 프로토타이핑 툴을 써본 사용자로서 빠르게 많은 동작을 구현할 수 있다. 물론 고도화된 모션은 프로토파이나 프레이머와 같은 하이파이 툴을 써야 하겠지만, 아직까진 그 둘의 도움을 받아야 하는 상황은 나오지 않았다.
실시간 협업 🤝
예전 피그마의 가장 핵심 기능이었던 실시간 협업도 여전히 중요한 기능으로 자리매김한다. 특히 디자이너들(또는 여러 명이 edit 권한을 가진 조직)끼리 작업을 해야 할 때 유용하게 쓰이고 있다. 예를 들면, 디자인 시스템을 구축하며 컴포넌트들을 오토 레이아웃이나 반응형으로 제작할 때 까다롭고 헷갈리는 부분을 즉각 도와줄 수 있다. 또 시안 만들 때도 여유 없는 디자이너가 있다면 바로 그 프로젝트 파일에 들어가서 작업을 도와줄 수도 있다. 디자이너들끼리가 아니더라도 빠른 리뷰가 필요할 때 이해 관계자가 해당 프로젝트에서 시안이 수정되는 모습을 실시간으로 확인할 수도 있다.
커뮤니티 👩👩👧👧
피그마의 커뮤니티 기능은 아직 Beta이고, 심지어 나는 당첨되지도 않았지만 앞으로 큰 강점이 될 것 같다. 각자 도메인을 지정할 수 있고, 공개된 도메인 안에 자신의 프로젝트를 피그마 파일 자체로 공개할 수 있다. 특히나 리디처럼 디자인 시스템을 만들고 있는 회사라면 정리된 파일을 오픈하고 싶을 수 있는데, 피그마 커뮤니티가 이에 적합한 플랫폼이 될 것 같다. 회사 차원 뿐만 아니라 dribbble처럼 가볍게 그린 비주얼 작업부터 Behance까지 굵직한 프로젝트를 한 데 모아 놓기도 좋겠다고 생각했다.
조금 아쉬운 점
모든 툴이 그렇듯이 사용자를 100% 만족시킬 순 없다. 피그마도 마찬가지이고 계속 나아질 거라 믿지만, 그중에서도 불편한 점이 몇 가지 있다.
한글 버그
스케치에선 발견되지 않았던 가장 치명적인 버그이다. 시안의 90% 이상은 한글을 쓰게 되는데, 가끔 한글 버그가 난 것을 모른 채 그대로 리뷰에 가져가기도 한다. 이미 Whimsical을 사용하며 한글 버그에 매우 익숙해져서 망정이지, 처음 접하는 사람이라면 충분히 당황스러울 것 같다. 아직 해결될 기미가 보이지 않는 버그이기 때문에 시안 작성 후 한글 버그가 없는지 확인하는 습관이 필수이다. 이마저도 힘들다면 피그마 안에서는 타이핑을 줄이고 텍스트는 붙여넣기로 해결하는 게 지금으로선 최선일 것 같다.
Preview 2x Copy
리디는 대부분의 디자인 리뷰에 노션을 활용한다. 화면뿐만 아니라 그 시안에 관한 배경이나 어떤 조건이 있는지, 어떤 생각으로 그 시안을 만들었는지 등의 부가 설명이 필요하기 때문이다. 그래서 figma 프로토타입 임베드가 있지만, 정지되어있는 화면을 봐야 할 때가 더 많아 이미지 첨부 방식이 중요하다.
스케치를 사용할 때엔 Preview 화면을 드래그 앤 드롭하면, Presets에서 적용된 사이즈 배수가 그대로 적용되어 레티나에서도 깨지지 않고 노션에 첨부하기가 편리했다. 따로 이미지를 저장할 필요 없이 필요한 배수를 입력한 후 드래그만 하면 되기 때문이다. 하지만 피그마에선 이 동작이 이루어지지 않기 때문에 노션에 이미지를 첨부하기 위해 필요한 이미지를 전부 저장해야 한다.
프로토타입
프로토타입에도 몇 가지 불편함이 있다. 우선 프로토타입 재생할 때 무조건 ▶️ 표식이 달린 Frame부터 열린다는 점이다. 첫 재생 화면이 아닌 중간부터 재생하는 기능이 없어 중간 화면을 확인하기에 어려움이 따른다.
두 번째로는 프로토타입을 구분하기 위해선 각 프로토타입의 Page를 구분해야 한다는 점이다. 한 페이지엔 한 프로토타입만 들어갈 수 있으며, 미리 보기나 노션에 임베드도 페이지 단위로만 가능하다. UT를 준비하거나 여러 가지 시안이 나오게 되면 자연스럽게 페이지가 늘어나게 되는데, 이럴 땐 어쩔 수 없이 한 페이지에 프로토타입을 몰아넣고 그것을 컨트롤하기 위한 리모컨 페이지를 만들어야 한다.
마지막으론 Figma Mirror App에선 Show Hotspot Hints on Click 옵션을 끌 수 없다는 점이다. 궁극적으로 프로토타입은 실제 제품을 개발하기 전 설계한 플로우나 UX가 효용성이 있는지 파악하기 위함인데, 이 Hints 옵션을 끌 수 없어 제대로 된 검증을 하기 어렵다. 그래서 전용 앱이 있음에도 웹 브라우저를 켜서 데스크톱 모드로 전환 후 Hints 옵션을 꺼야 하는 불편함이 있다.
컬러 스타일
리디의 모든 프로덕트 디자이너가 같은 컬러 시스템을 사용하기 위해 라이브러리로 퍼블리싱해두었다. 하지만 피그마 안에서 리디 컬러 시스템을 사용하기 위해선 컬러 피커로 찍거나 hex 코드를 입력해선 안 된다. 캡쳐 화면처럼 꼭 컬러 스타일 패널을 열어 컬러를 어림짐작으로 선택해야 한다. 패널에서는 Dodger Blue 50 같은 변수명이 바로 노출되지 않고 호버를 오래 해야 보이기 때문이다. 게다가 컬러 시스템으로 지정하더라도 Fill과 Stroke에 따로따로 Opacity를 지정할 수 없으며 그라데이션 효과도 불가능하다.
유용한 플러그인
웬만하면 플러그인에 의지하지 않으려 하지만, 몇 가지 플러그인을 쓰면 더 생산성 있는 작업을 할 수 있다. 특히나 사혼의 구슬인 스케치 플러그인과는 다르게, (Runner가 있지만, 유료 전환을 했으니 논외) 피그마 플러그인의 대부분은 한 데 모여 있다. 그중 유용하게 썼던 몇 가지 플러그인을 소개한다.
Google Sheets Sync
구글 스프레드시트로 정리한 데이터를 시안에 입힐 수 있는 플러그인이다. 실제 데이터를 써야 하는 디자이너들에겐 강 같은 플러그인이 아닐 수 없다. 리디 디자인팀도 북 데이터, 아티클 데이터 등 실제 제품에 사용된 데이터를 스프레드시트로 정리한 후, 시안에 입히는 데 유용하게 사용하고 있다. 사용법이 다소 복잡하기 때문에 꼭 소제목의 링크를 참고해 사용하기 바란다.
Similayer
위 플러그인을 만든 Dave williames의 다른 플러그인이다. 특정 오브젝트를 선택한 후, Similayer를 통해 그 오브젝트와 비슷한 다른 오브젝트들을 한 번에 선택할 수 있다. 옵션들이 꽤 구체적이라 원하는 오브젝트를 거의 정확하게 집을 수 있어 여러 화면을 작업할 때 특히 유용하다.
Show/Hide Slices
.Sketch 파일을 피그마로 옮겨왔을 때 가장 스트레스받았던 부분이 바로 Slice 영역의 점선이 그대로 드러나는 것이었다. 이 플러그인을 발견하기 전에는 앞에서 소개한 Similayer를 통해 오브젝트를 한꺼번에 선택한 후 점선을 안 보이게 만들었었는데, 이 플러그인이면 복잡한 과정 없이 모든 점선을 한 번에 끄거나 켤 수 있다.
Rename it
이미 피그마 내에 Rename 기능이 존재하지만, Find Replace Selected Layers 기능이 강력해서 사용하고 있다. 같은 플러그인이 스케치 버전으로도 있기 때문에 대부분의 디자이너가 유용하게 쓰고 있지 않을까 생각한다. 하지만 이 글로 처음 알게 되었다면, 꼭 사용해 보길 권장한다.
몇 가지 Tip
표지 지정하기
피그마에선 Project 내에서만 폴더링이 되고 대부분은 Recent에 풀어 보이기 때문에 커버를 통한 구분이 중요하다. 커버하고 싶은 Frame을 선택한 후 Set as Thumbnail을 설정하면 구분도 쉽고 프로젝트를 열지 않아도 내용 구분이 어느 정도 가능하다. 회사에선 제품별로 커버를 달리하고 있고 개인 프로젝트도 나름의 커버를 만들어 관리하면 좋다.
프로토타입
피그마 프로토타입의 스마트 레이아웃은 Principle App과 원리가 비슷하다. 레이어 이름이 같으면 동작이 이어지고, 똑같이 생겼더라도 레이어 이름이 다르면 동작이 이어지지 않는다. (하지만 레이어 이름’만’ 같다고 동작이 이어지진 않는다) 따라서 이를 잘 이용하면 꽤 고도화된 프로토타입을 제작할 수 있다. 또한 프로토타입은 Frame만 가능하다. 고로 Group인 오브젝트가 있다면 Frame으로 한 번 더 감싸줘야 한다.
패널 왔다 갔다 하기
예전엔 Design-Prototype-Code 패널을 왔다 갔다 하기가 불편했었다. 발견을 못한 건지, 없었던 건지 단축키를 몰랐었는데 최근에야 알게 되었다. 맥북 기준 ⌥+8은 Design 패널, ⌥+9는 Prototype 패널, ⌥+0은 Code 패널이다. 편하게 ⌥+8,9,0으로 외우면 쉽다.
Opacity와 Zoom 단축키
단축키가 나와서 덧붙이자면 이전 피그마 단축키는 0~10까지가 Opacity 조정, Shift+0,1,2가 Zoom 관련 단축키였는데, 최근 버전에서 이 둘이 스왑되었다. 어도비 포토샵에서 크기 조정의 Alt와 Shift가 스왑된 것처럼 불편하게 스왑되어서 화가 나지만 어쩌겠는가, 적응하려 노력 중이다.
Constraints
스케치의 Resizing 기능은 피그마의 Constraints와 같다. 최근 오토 레이아웃이 나오면서 이 Constraints이 더욱 중요해졌는데, 여기서 포인트는 오토 레이아웃을 적용하기 전 Constraints를 적용해야 한다. 이 둘의 순서가 뒤바뀌면 오토 레이아웃으로 적용된 레이어를 다시 깨야 하는 불상사가 일어날 수 있다. (마치 나처럼!)
마치며
대부분의 기능을 Sketch와 비교한 꼴이 되었지만, 요즘은 모든 UI 툴이 비슷해지고 있다. 그 안에서 디자이너는 퍼포먼스를 잘 낼 수 있는 툴을 찾는 탐구력, 더 좋은 툴이 나타났을 때 갈아탈 수 있는 유연한 태도가 필요할 것 같다. 물론 툴은 툴일 뿐, 중요한 건 문제 해결이라는 중심을 잃지 않고 말이다.
피그마에 관련된 더 자세한 팁은 TIL(Today I Learn)에 적어 두었다.
