Figma vs Sketch vs Adobe XD
3개 툴 경험으로 왜 피그마를 사용하는것이 좋은지 이야기를 해봅니다.
Sketch는 신세계였다
2015년 처음 느꼈던 Sketch의 감동은 지금 돌아봐도 잊을 수 없는 경험이었다.
수백 장의 PPT 화면정의서에 단축키를 외워가며 네모, 세모로 노가다 작업을 하던 중 만났던 벡터 기반의 가볍지만 너무 완벽했던 디자인 전문 툴 Sketch는 시장에 없던 새로운 제품이었다. 물론 발사믹, UX pin 등 일부 UI 설계 툴들과 프로토타입핑 툴이 있긴 했지만 퀄리티, 퍼포먼스 등에서 비교 대상이 되지 못했으며 당시 툴들은 전체적으로 무거웠다.
2015년 팀에 공유했던 업무 프로세스를 변경해야 하는 이유, 당시는 이게 최고였다!
특히 UI 설계 특성상 컴포넌트의 반복적 사용이 많다보니 이를 효과적으로 관리하고 사용하는 것이 큰 어려움이었는데 스케치의 '심볼'을 사용하며 불필요한 작업을 압도적으로 줄여줬었다. 당시는 새로운 개념이라 심볼 때문에라도 스케치를 써야할 이유가 명확했다. 그외도 가볍고 빈약하긴 했지만 일러스트도 어느 정도 대체가능한 최고의 디자인 툴이었다.
"하지만 우리에게 Sketch의 치명적 한계는 Mac 전용이었다. "
Window 유저는 어쩔수 없이 XD
우리 회사의 일부만 Mac을 사용했기 때문에 디자이너 전용 툴이 되기는 힘들었다.
결국 대기업의 대안은 엔터프라이즈 버전을 제공하며 Window에서 사용이 가능한 Adobe XD였다. 출시당시 무료 버전에 인터랙티브한 프로토타입 연결, Auto Layout, Repeat Grid 등 기능을 대대적으로 내세웠다. 하지만 실질적인 장점은 Window 버전과 기존 포토샵, 일러스트 등 Adobe 툴과의 연계였다.
XD는 기존 Adobe 툴과의 연계가 장점이다
2018년 XD 사용 경험은 만족스럽지 못했다.
스케치를 사용하다 넘어갔더니 심볼과 라이브러리를 부재가 가장 큰 아쉬움이었다. 또한 보안이 엄격한 사내망에서 활용하다 보니 클라우드 등의 주요 기능을 제대로 활용하지 못했던 부분도 불편을 증대시켰다. Adobe에서 개발자 수백 명이 투입되어 대대적인 개발 중이라는 소문대로 매해 신규 기능들이 끊임없이 추가되었으며 정말 많이 좋아지기도 했지만 타 서비스 대비 기능적 큰 차별점은 없었다.
그래서 우리팀은 마림바를 시작할 때 실시간 협업이 가능한 피그마를 선택했다.
(지금은 XD, Sketch에도 실시간 협업이 있다 )
지금부터 우리가 왜 스케치(Sketch), Adobe XD가 아닌 피그마를 선택한 5가지 이유를 작성해본다.
피그마 = 실시간 협업
마림바 디자이너들은 종종 페어로 디자인한다.
'페어 디자인'이란 2명의 디자이너가 한 화면을 보며 함께 디자인 작업하는 방식이다. 이런 페어 디자인은 두사람이 끊이 없이 서로 의견을 피력하고 디자인 요소를 그리고 설득하며 함께 동일한 시나리오에 대해 설계를 한다. 당연히 실시간으로 협업이 중요한 상황이었다.
이런 상황에서 피그마는 완벽한 툴이었다.
코로나로 원격인 상황에서 피그마에서의 페어 디자인은 너무나도 자연스럽다. 각자의 커서가 실시간으로 분주히 움직이며 때론 함께 때론 각각 동시다발적으로 제품을 디자인하였다. 떨어져 작업하는 것이라 느껴지지 않을 정도였다. 실시간 협업은 피그마가 게임 체인저가 된 가장 큰 요인이었다.
피그마에서 버전 관리는 사치
또 다른 강력한 부분은 불필요한 버전 관리이다.
큰 디자인팀에서는 앱스트랙트와 같이 체계적이며 강력한 버전 관리가 필요한 서비스도 있을 수 있다. 서로 명확한 규칙과 기준등으로 버전관리가 필요할수 있지만 마림바 팀처럼 빠르게 피봇하고 계속 움직여야 하는 팀에겐 오버스택이었다. 서로 싱크를 맞추기 위해 위한 업로드, 다운로드, 그리고 머지(merge)는 더 이상 쓸모없었다.
실시간으로 동일한 결과물에 있기 때문에 싱크라는 고민을 해본 적이 없었다. 물론 필요에 의해 가끔 버전 히스토리를 제공하기에 필요하다면 언제라도 원하는 시점으로 롤백 할 수 있었다. (물론 스케치도 되지만 훨씬 가볍다)
종종 버려두었던 디자인 찾기 위해 Version history 기능을 활용한다
All in one : 피그마에서 모든것을
마림바 디자인팀은 피그마로 넘어오면서 스케치, 제플린, 인비전, 앱스트랙트의 유료 계정을 전부 해지했다.
피그마가 위의 서비스 기능들을 거의 커버하기 때문이다. 💵 💵
https://uxtools.co/survey-2020/
핸드오프: no more Zeplin
초기 피그마 도입 후 한동안은 제플린을 지속 사용하였다.
팀 전체 커뮤니케이션 방법을 변경하는 것은 항상 시간이 걸리는 작업이기 때문이다. 제플린을 통한 핸드오프에 익숙한 개발팀을 위해 작은 모듈부터 순차적 변경이 필요했으며 그리고 슬랙, 지라 등의 팀 커뮤니케이션 툴과의 연계된 부분들에 불편함이 없는지를 살폈다.
제플린을 사용하며 가장 큰 불편은 매번 해당 디자인 화면을 동기화 시켜줘야 하는 부분이었다.
"혹시 제플린에 올려주셨어요?"
종종 개발자 분들에게 듣던 이야기였다.
디자이너들은 끊임없이 디자인을 업데이트했으며 아무리 제플린과 피그마의 인티그레이션이 잘되어 있다고 하지만 익스포트를 통해 싱크를 맞춰줘야 했다. 이게 잦다 보면 일부 프레임을 빠트리는 일이 빈번하게 발생했다. 또한 뒤늦게 동기화 후 로딩이 느려 은근 불편했었는데 더 이상 이런 걱정은 없어졌다. 디자인 작업 완료가 곧 핸드오프 완료였다.
물론 피그마가 가장 진화했던 핸드오프 툴 인 제플린을 완벽히 대체하진 못했다.
개발에서 이야기한 가장 큰 불편은 피그마에서 화면을 찾아다녀야 하는 것이다.
제플린과 같이 개발자를 위한 정제된 공간이 아니라 디자이너들의 작업 공간에 와서 디자인 스펙을 확인해야 한다. 프레임별 링크를 제공하지만 개발자가 길을 잃으면 수백 개의 디자인 더미 속에서 원하는 프레임을 찾는 것은 쉽지 않았다. 제플린과 같이 검색이나 섹션 같은 개념이 없기에 디자이너가 페이지나 화면 정렬 구조를 잘 정리해놓지 않으면 구조를 이해하고 찾아오는건 어려운 일이었다.
더욱이 디자인 인스펙션을 위해 사용하던 제플린의 오버레이 기능은 정말 아쉬웠다. 개발완료 후 디자인 검수 시 해당 화면과 제플린을 overlay 하여 비교해서 찾아내는것은 유용했었는데.. 이런 소소한 아쉬움들은 있었다.
프로토타이핑: 빠른 제작과 공유
마림바 팀은 제품 초기 단계이기 때문에 상세한 인터렉션 중심의 Hi-fidelity보다 Flow 중심의 Low-fidelity가 더 자주 활용되었다.
이 정도의 목적에는 딱 맞게 활용 가능하다. 프레이머나 프로토파이처럼 강력하지는 않지만 기기별 사이즈 대응과 애니메이션 효과, 트랜지션, 스크롤 등을 왠만한 프로토타입 기능을 제공하기 때문에 다른 서비스로 이동 없이 적절한 수준의 프로토타입을 빠르게 생성 & 공유 가능하다.
특히 피그마 프로토타입은 공유에 가장 큰 강점을 가지고 있다.
최근 원격 사용자 검증이 잦은 상황에선 이전처럼 인터뷰이 옆에서 프로토타입을 직접 보여주지 못한다. 이런 상황에서 프로토타입의 링크를 제공 후 'observation mode'를 실행하면 인터뷰이가 어떤 화면에서 헤매는지, 클릭하는지 화면 위치부터 커서까지 상세히 관찰할 수 있다.
프로토타입 툴과 디자인 툴이 동일하기에 불필요한 반복작업을 최소화할 수 있다.
프로토타입이 디자인 파일과 항상 싱크가 되다 보니, 매 이터레이션마다 소소한 디자인 컴포넌트의 수정이 발생하더라도 추가적으로 프로토타입을 업데이트 없이 최신 디자인으로 프로토타입 검증이 가능하다.
또한 마스터 컴포넌트를 프로토타입에 활용하면 반복적인 프레임 간 연결을 줄일 수 있다.
예로 상단 탭 바를 master component로 등록 후 메뉴의 항목을 해당 프레임으로 연결하면 해당 instance를 만들 때마다 master의 연결이 유지된다.
웹 브라우저 기반
4년 전 피그마가 웹에서 구동이 된다던 이야기를 듣고 첫 반응은 "굳이?"였다. 당시 스케치와 Adobe XD를 상황에 따라 사용 중이었는데 Mac/Window 제약은 컸지만 웹브라우저에 대해 필요를 못 느꼈다.
하지만 경험 후 웹브라우저에서 접속이 가능한 것은 뛰어난 차별점이었다.
특히 팀 내 비 디자이너 직군 또는 스테이크홀더와 커뮤니케이션 시 매우 유용하게 활용했다. 제품과 관련된 다양한 역할자들은 항상 디자인에 대해 궁금해한다. 하지만 디자인 결과물은 디자이너만의 전유물이었기에 보고 싶어도 디자이너에게 요청해야 하는 수고가 필요했으며 디자이너 또한 PDF나 또는 프로토타입 툴을 활용하여 Export를 해야만 했다.
피그마에서는 이메일로 초대된 누구나 웹에서 현재의 디자인을 언제 어디라서도 확인 가능하다. (심지어 View 초대 계정은 무제한 무료이다.) 그리고 특정 부분에 대해 코멘트도 남기고 즉각적인 피드백을 얻을 수도 있다. 이는 투명한 팀 문화를 지향하며 역할자 간의 벽을 한 단계 낮췄다.
디자이너들은 매일 피그마 App을 사용한다. 하지만 가끔 사용자 검증을 목적으로 출장 가거나, 고객에게 간단한 리뷰를 하거나 다른 공간에서 급하게 디자인을 수정해야 할 상황이 발생한다. 이런 경우에 장비의 유형 (Mac/Window)에 상관없이 어디에서나 로그인만 하면 나의 작업 공간이 완성되는 점은 또 하나의 장점이다.
결론: 피그마는 대세다
스케치는 아직 강력한 디자인 툴이자 200만 개가 넘는 템플릿, 리소스, 플러그인을 가지고 다양한 디자인 툴과 연계도 잘 이루어져 있다. Adobe XD도 지금은 위에서 말했던 기능들을 단숨에 커버할 정도로 빠르게 성장과 개선하는 툴이다. 그럼에도 불구하고 피그마의 강세는 한동안 더 지속될 것으로 생각한다.
아래와 같은 팀에게는 강력히 추천한다.
- 소규모이며 역할자 간 실시간 커뮤니케이션이 빈번한 팀
- 지속적으로 업데이트 또는 피봇이 필요한 프로덕트를 만들 때
- 탄탄하고 체계적인 디자인 시스템보다 가볍고 유연함을 선호하는 팀
- 비용 절약이 필요한 팀, 디자인 전체 프로세스 커버 가능
- 원격으로 일하는 팀, 업무환경이 자주 바뀌는 팀
글. 조(디자이너)
디자인 작업은 Fimga에서
온라인 화이트보드는 Marimba에서
온라인 화이트보드 마림바
Marimba 마림바 | 실시간 온라인 화이트보드 협업툴
실시간 협업를 위한 더 쉽고 편리한, 최고의 온라인 화이트보드 협업툴 마림바(Marimba)를 통해 플로우차트, 마인드맵, 조직도, 다이어그램을 지금 바로 무료 체험을 통해 만들어보세요!
www.marimba.team
'디자인툴' 카테고리의 다른 글
| 피그마(Figma) 베리언트(variants)로 디자인 시스템 전환 (1) | 2021.04.30 |
|---|
댓글