UI 디자인 툴의 최종판 피그마
스케치 vs XD vs 피그마 비교 분석
2018년 여름, 새로 입사하게 된 회사에서 어떤 장비가 필요하냐고 묻는 질문에 망설임 없이 '스케치'를 쓰기 위해 '맥북'이 필요하다고 대답했다. 당시에는 포토샵에서 스케치로 대대적인 패러다임이 일어나던 시점이었고, 이전 회사에서는 윈도우 기반으로 작업 환경이 세팅되어 있었기 때문에 포토샵으로 ui 작업을 하는 상황이 상당히 뒤처져 보였더랬다. 이직하는 회사에서 스케치를 써 보기로 마음먹은 나는 일단 '스케치'라는 책 한 권을 처음부터 끝까지 읽었다. 그리고 모르는 것은 인터넷을 뒤져가며 애자일에 적합한 ui 디자이너로 조금씩 커리어 포지션을 확장했다.
당시 기존의 다른 디자이너가 쓰던 포토샵을 스케치로 통합하기 위해 설득하는 일도 쉽지만은 않았었다. 하다못해 포토샵 시절 2 배수 아트보드에서 작업하던 습관을 1 배수 아트보드로 통합하기 위해서도 설명과 설득의 노력이 들어갔으니. 하던 대로 하고자 하는 관성을 버리는 것이 쉽지 않구나, 팀이 함께 유연하게 움직여주지 않으면 새로운 툴을 시도하는 것조차 어렵구나 깨달았던 시간들이었다.
그리고 스케치를 지나 xd, 피그마까지 프로젝트를 진행한 후 느낀 점은 지금 당장 피그마로 갈아탈 수 있는 기업은 앞으로 더 빨리 나아갈 수 있다는 확신이다. 그렇다. 갈수록 무거워지는 스케치를 누가 더 빨리 탈출하느냐. 이것은 효율의 싸움이다.
물론 스케치는 디자인 역사상 (아마도 포토샵 다음으로) 가장 고마운 툴이다.
비록 후발주자지만 '어도비'라는 헤리티지를 가진 xd가 자사의 클래식한 인터페이스를 버리고 네덜란드의 작은 스타트업인 스케치의 인터페이스를 따라갈 정도였으니, 스케치의 권위와 업적에 대해서는 길게 늘어놓지 않겠다. 또한 실제로 나를 포함한 수많은 디자이너를 psd 용량 압박과 야근 지옥에서 벗어나게 해 주었고.
xd와 피그마는 결국 스케치의 업그레이드 버전일 뿐인데 그렇다면 왜, 고마운 스케치를 갈아타고 xd를 지나 피그마까지 나아가야 하는가. 그에 대한 내 생각을 적어보고자 한다.
최신 스타트업 채용 공고 트렌드는 figma와 sketch를 다룰 수 있는 사람을 우대한다고 적혀 있긴 하지만, 현실적으로 많은 기업들이 아직은 스케치를 버리기 어려울 것이라 짐작한다. 아마 내가 포토샵을 스케치로 전환시키는데 엄청나게 애를 먹었던 것처럼. 작업 히스토리가 스케치 (혹은 앱스트랙트)에 적재되어 있고, 익숙한 프로그램을 버리고 새로운 툴에 적응해야 하는 부담감, ui 스타일 가이드와 컴포넌트 시스템을 또 새롭게 만들어야 하는 리소스 소모 등으로 저항에 부딪힐 테니까.
그러나 심리적인 장벽만 무너뜨리면 스케치 유저가 피그마에 적응하는 시간은 단 1시간이면 충분하다.
그만큼 대부분의 주요 기능 -인터페이스, 심볼 관리, 이미지 익스포팅- 의 방식이 같기 때문이다. 포토샵에서 스케치로 넘어올 수 있었던 ui 디자이너라면 피그마로 넘어가는 것은 빠를수록 작업 시간 단축에 있어 이득이다.
스케치를 떠나야
하는 이유
스케치를 사랑하는 헤비유저가 이 글을 보고 있을 필요는 없다. 다만 나는 스케치를 쓰면서 애증의 스케치라고 불렀을 정도로 개인적으로 아쉬운 점들이 있었다.
작업자로서 아쉬웠던 점 첫 번째.
업데이트의 방향성: 무겁다
처음에는 벡터 기반의 가벼운 프로그램이었던 스케치는 업데이트가 거듭될수록 보조적인 기능이 추가되고 무거워졌다. 특히 협업을 위해서 앱스트랙트라는 프로젝트 히스토리를 관리해주는 프로그램과 연동해서 쓰면 짜증은 배가 된다. 파일을 여는데 5분, 10분- 동기화시키는데 30분이 걸린 적도 있으니. 이것 때문에 야근했을 정도. 지금은 앱스트랙트 같은 쑤레기 프로그램은 거의 쓰지 않은 것 같고 스케치에서 자체 개발한 클라우드를 쓰고 있을 것이라 짐작하지만 베타 버전이 나왔을 때 퇴사한 나는 못 써 봤다.
포토샵보다 작업 시간이
더 걸리는 것 같은
느낌적인 느낌
이 부분은 사바사일 것 같은데, 내가 스케치의 기능 중에서 가장 극혐 했던 파트는 픽셀 퍼펙트다. 작업을 하다 아이콘이나 라인, 텍스트 박스의 픽셀이 조금만 틀어져도 소수점이 발생해서 항상 픽셀 퍼펙트로 정수화 시켜줘야 했다. 심지어 이 버튼은 단축키도 없고, 내가 뭘 잘못했는지 모르겠는데 정신 차려 보면 24.32px 이딴 식으로 끝없는 소수점 발생. 특히 아이콘 그리기는 극악의 난이도.
소수점 노이로제에 걸린 나는 나중에는 소수점이 나오든지 말든지 해탈하는 경지에 이르렀다.
아이콘을 svg 코드로 때려 넣을 수 있는 지금, 아무리 생각해 봐도 픽셀 퍼펙트는 쓸데없는 기능이다.
폰트가 툭하면
깨진다
분명히 같은 폰트의 같은 스케치 파일인데 a 컴퓨터와 b 컴퓨터의 폰트가 호환되지 않는다. 결국 미싱 폰트를 다시 잡고 틀어진 행간 자간을 재 조절하고. 이런 알 수 없는 잔 버그로 인한 노가다 작업이 이어진다. 같은 폰트, 같은 행간인데 텍스트 박스의 높이가 다르다거나 하하. 피그마는 아예 구글 웹폰트를 불러오기 때문에 어떤 컴퓨터에서도, 어떤 환경에서도 폰트가 깨지지 않고 동일하다.
지맘대로
자간과 행간 조절
주관적으로 글을 쓰다 보니 점점 감정 이입이 ㅋㅋ 되고 있다. 어쨌든 스케치의 기본 설정은 폰트의 사이즈별로 행간과 자간이 자동으로 수정된다는 것인데, 개인적으로는 아주 짜증 나는 기능이었다. 마치 아이폰의 자동 완성 키패드 느낌. 아니.. 맘대로 설정 바꾸지 말아 줘. 맘대로 단어를 추천하지 말아 줘.
이하 xd나 피그마와 직접 비교하면서 어떤 단점들이 어떻게 개선되었는지 주관적인 느낌대로 써 보겠다.
우선 스케치와 xd를 비교
xd의 장점
xd는 어도비에서 만든 프로그램이라 빽이(?) 든든하다. 최우선 장점으로는 윈도우에서 돌아간다는 것. 그리고 내가 꼽은 장점들.
1. 크리에이티브 클라우드 요금제를 쓸 경우, 공짜다. 디자이너라면 포토샵과 일러는 기본으로 써야 하는 프로그램이기 때문에 xd는 공짜로 쓰는 느낌. (참고로 피그마도 거의 공짜로 사용 가능하다)
2. 정말 가볍다. 초기 스케치 느낌.
3. 어도비 프로그램을 쓰다가 스케치를 쓸 경우 몇 가지 단축키가 달라서 버퍼링이 오는데, 같은 어도비 단축키를 공유하므로 전환율이 좋다.
4. 아이콘은 일러에서 그려서 가지고 온다. 픽셀 퍼펙트에 구애받지 않고 자유롭게 그릴 수 있다.
[컴포넌트(심볼) 부분]
스케치와 xd/피그마의 가장 큰 차이점은 컴포넌트(심볼)가 아트보드로 관리되느냐 아니냐의 차이다. 스케치에서는 컴포넌트가 아트보드로 관리되기 때문에 관리해야 하는 아트보드도 정말 많다. 그러나 xd/피그마는 하나의 아트보드에서 오브젝트 단위로 컴포넌트 등록이 가능하다. (이렇게 가볍게 문장으로 쓰지만 실제 작업에서는 클릭 횟수를 절반으로 줄여주었다) 스케치의 최신 버전은 오브젝트 사이즈를 수정할 경우 아트보드도 함께 수정되는 것으로 업데이트되긴 했으나 잔 버그가 많다.
5. 컴포넌트 (심볼) 관리의 유연함 - 가장 좋았던 점. 오버라이드를 쓰지 않아도 더블클릭 만으로 복제한 컴포넌트의 수정이 자유롭다. 스케치의 경우- 조금만 다르게 수정하려고 하면 심볼을 깨서 다시 만들어야 했다.
스케치의 경우 우측 인터페이스에서 심볼데이터를 수정해야 하는데 (오버라이드), xd나 피그마는 더블클릭만으로 수정 가능6. 오브젝트 단위로 컴포넌트 등록이 가능한 것도 모자라 상태별로 등록할 수도 있다. 이 기능은 피그마에서 꽃을 피운다. (피그마에서 다시 언급)
인풋 박스 컴포넌트 - 기본 상태
인풋 박스 컴포넌트를 에러 상태로 변경, 굉장히 쉽고 직관적인 ui다. 후술 하자면 스케치에서도 컴포넌트별 상태 등록이 불가능했던 것은 아니지만, 잔머리를 써야 했고 인터페이스 또한 직관적이지 않았다.
[기타 자잘하지만 강력한 장점]
7. 라인을 늘리고 줄일 때 드래그 잡기가 정말 정말 편리하다. 스케치 및 포토샵의 큰 불편함 중 하나였다.
8. 멀티플라이 같은 이펙트를 적용한 이미지가 png 그대로 추출된다.
바로 이런 이미지9. 장점이자 단점이지만 텍스트 박스에서 행간의 높이가 잡히지 않는다. 디자인할 때 깔끔하게 할 수 있다.
행간이 잡히지 않는 텍스트 박스 - 제플린에서 숫자만 보고 코딩하면 큰 일 난다.10. 아트보드 네이밍 할 때 더블클릭으로 가능하다. 이 간단한 것이 스케치에서는 안 되는 기능이다.
11. 어도비 라이브러리 연동이 매우 쉽다. 잘 쓰지는 않지만 이미지 편집이 많은 경우라면 정말 유용할 듯.
12. xd만의 강력한 무기인 [반복 그리드] 기능은 정말 편하다. 물론 이마저도 앞지르는 피그마의 더욱 강력한 기능인 [오토 레이아웃]이 있다.
그러나 xd도 단점이 있다.
가벼워도 너무 가볍다.
가장 큰 문제는 페이지를 나누는 기능이 없다는 점. 이것만 추가돼도 참 좋을 텐데. 그러나 페이지 분리 기능이 없어도 가벼운 앱 디자인이라면 큰 문제는 없다. 아래처럼 ui 스타일 가이드를 왼쪽에 놓고 바로바로 가져다 쓸 수 있어서 편리하다. (제플린에서 스타일 가이드 업로드가 불가능한 것도 단점)
가벼운 앱 디자인에는 최적결론 : 어도비 크리에이티브 클라우드를 사용하고 있고, 가벼운 서비스를 만든다면 추천
스케치와 figma를 비교
figma의 장점
피그마. 너는 미쳤어.
우선 위에서 기재했던 xd에서 되는 기능들은 피그마에서도 모두 가능하다.
가장 감동받았던 강점은 [프로그램 설치를 하지 않아도 됨]. 언제 어디서나, 어떤 컴퓨터 사양과 관계없이 인터넷만 돌아가면 작업을 할 수 있다. 내 컴퓨터가 아니어도 되고, 맥북이 아니어도 된다. 그저 인터넷과 시간만 있으면 하던 작업을 이어서 할 수 있는 것이다!!
사실 처음에는 웹 기반 프로그램의 선입견이 가득했다. 잔 기능만 가득한 버그 투성이의 몇 번 쓰다 버릴 프로그램 정도라고 생각했으니. (실제로 그런 프로그램도 많다) 피그마는 오토 세이브가 굉장히 잘 작동하기 때문에 인터넷 접속 문제로 파일을 날려먹을 걱정은 하지 않아도 될 듯하다. (단점은 나도 모르게 저장되어 버린다는 점- 주의해야 함)
파일을 따로 공유하지 않고 링크 만으로 작업 파일이 실시간 공유되는 경험은 기적에 가깝다!! 심지어 실시간 협업도 가능하지만, 우리나라 디자이너가 좋아할지는 미지수다. 여전히 자기 모니터조차 보여주고 싶지 않아 하는 디자이너가 많은 것도 현실.
두 번째 강점. 개발자에게 디자인 작업을 넘길 때 쓰는 프로그램인 '제플린'이 필요 없다.
결국 프론트 개발자도 디자인 원본 파일을 보며 작업하는 것이 훨씬 효율적이기 때문이다. (과거 디자이너의 많은 사랑을 받았던 '어시스터 ps'라는 프로그램이 소리 소문 없이 사라졌던 것처럼 제플린도 소멸 위기에 처해있는 듯하다.) 코멘트를 다는 기능도 그대로 합쳐진, 진정한 ui 올인원 프로그램이다. 과거에는 스케치에 다는 코멘트, 제플린에 다는 코멘트 - 2중 작업을 해야 했다.
inspect라는 메뉴를 누르면 코드가 바로 뜬다. 행간을 %로 제시하고 있다. 훌륭해. 은근 중요한 컴포넌트 네이밍은 디자이너나 프론트 개발자가 별도로 정의하는 경우가 많았는데, 디자이너가 정의한 컴포넌트 네이밍 그대로 class name으로 지정할 수도 있다. 또한 강력한 프로토타이핑 기능 덕분에 웹으로 띄운 스타일 가이드 문서를 만들 수도 있다.
세 번째 강점. 피그마의 커뮤니에서 무료로 배포되는 훌륭한 소스들이 많다.
버튼 및 인풋 박스 등 컴포넌트를 통째로 가져다 쓸 수도 있고 아이콘도 다양하다. 무엇보다도, 다운받을 필요 없이 복사+붙여 넣기로 쉽게 연동이 된다. 8 배수 디자인은 이제 인터내셔널 사이즈로 규격화돼서 앞으로 소스를 활용환 더 빠른 애자일 작업이 가능해질 것 같다.
네 번째 강점. 컴포넌트 상태 변경의 직관성
위의 xd 파트에서 언급한 부분인데, 간단히 말하면 네이밍 하는 방법이 굉장히 쉬워졌고 아트보드 별 관리가 아닌 그룹핑된 점선 안에서 관리가 가능하다. (컴포넌트의 상태를 추가하면 자동으로 생성된다) xd의 경우 서로 다른 상태를 한눈에 볼 수 없다. 피그마는 이런 세세한 부분까지 고려한걸 보니 ui 디자인 작업자의 작은 고통마저 없애기 위해 고민의 고민을 거듭한 흔적이 보인다.
다섯 번째 강점. 자동화 간격 조정
같은 간격이라면 사이즈가 함께 변경된다.
여섯 번째 강점. 오토 레이아웃
가운데 박스를 삭제하면 아래 박스가 자동으로 위로 붙는다스케치에서 외부 플러그인으로 가능했던 기능들이 피그마에서는 더 직관적이고 쉬운 ui로 기본 내장되어 있다. 오토 레이아웃을 이용해 반응형 웹도 무리 없이 구축할 수 있다.
일곱 번째 강점. 프로토타이핑
프로토파이 같은 외부 프로램의 일부 기능이 구현 가능하다.
하이파이와 로우 파이 중간쯤의 미드 파이(?) 프로토타이핑 가능. ㅎㅎ 물론 액슈어같은 하이파이 프로토타이핑과 연동되는 건 기본이다.
여덟 번째 강점. 브레인스토밍 툴 피그잼
이제 미로(miro)를 로그인할 일은 없을 것 같다.
우선 생각나는 강점은 이 정도로 마무리. 쓰다 보니 사족이 너무 길어졌다.
이미 피그마를 전사적으로 도입한 회사도 있을 테고 해외에서는 피그마가 스케치의 점유율을 앞지른지는 오래다. 어쩌면 이 글 또한 한참 뒷북일지도 모르겠다. 나는 완전한 얼리 어답터는 아니고 중간쯤에 위치하고 있는 유저로서, 소문만 무성했던 피그마를 이제야 써보고 너무나 감탄했기에 흥분을 감추지 못하고 글을 썼다.
>> 결국 강의까지 만들어버리다!!!!
[하기로의 피그마 강의 보기]
성장하는 디자이너, 개발자, 마케터, 기획자, ceo가 세상이 필요로 하는 프로덕트를 만드는 세상을 꿈꿉니다.
프로덕트 기획과 디자인을 한 번에 끝내고 연봉 2배 올리세요!!!
객관적인 데이터를 보고 싶다면 이 글을 추천한다.
피그마의 스타트업 성장 전략 관점에서 보고 싶다면 이 글을 추천한다.
여기까지, 어느 디자이너의 피그마 영업기 끗.
