#1 한 번쯤 들어봤을 '피그마'
피그마 설명서 1부, 떠오르는 피그마
저의 처음 시작은 당연히 모두가 비슷하듯이 포토샵으로 시작하였습니다. 처음 디자인을 시작할 때 가끔 XD라는 툴이 나온다는 Figma, Sketch라는 툴이 좋다는 이야기만 들었지 왜 좋은지 왜 사용하는지 알지 못했습니다. 차후에 이 UI 디자인 툴을 사용하게 되고 새로운 세계를 접하게 되었습니다.
아직은 많은 디자인 회사에서 포토샵을 사용하고 있습니다. 사람은 원래 새로운 환경에 두려워하는 법이니깐요. 하지만 우리가 이름만 들으면 알만한 디자인 회사와 해외의 많은 기업은 이미 Sketch와 Figma를 사용하고 있는 거로 알려져 있습니다. 우리나라의 많은 에이전시도 점점 UI에 특화된 디자인 툴을 도입하려는 시도가 많이 보입니다. 그러면 무엇 때문에 굳이 사용하던 포토샵을 버리고 UI 디자인 툴로 환승하는 것일까요?
‘스마트폰 VS 2G 폰’ = ‘피그마 VS 포토샵’
저는 피그마를 주로 이용하는 디자이너기 때문에 주로 피그마와 포토샵에 대해서 비교해보도록 하겠습니다. 일단 저는 이렇게 비유하고 싶습니다. '포토샵 = 2G 폰' '피그마= 스마트폰'이라는 표현을 하고 싶습니다. 2G 폰과 스마트폰을 궁극적인 목적을 보았을 때 똑같은 휴대전화라는 틀을 가지고 있다는 점과 피그마와 포토샵도 똑같은 디자인 툴이라는 점으로 같습니다. 하지만 속을 들여다보면 스마트폰과 2G 폰은 전혀 다르듯이 피그마와 포토샵은 전혀 다른 디자인 툴입니다.
여러분이 2G 폰에서 지금 스마트폰을 사용하는 이유는 무엇이라고 생각하십니까? 몇 배는 더 비싼 돈을 주워 가면서 스마트폰을 사용하는 이유는 약 10년 전인 2007년 1월 9일 검정 목폴라에 뉴발란스 993만 신고 다니던 한 남자가 샌프란시스코에서 'iPod+Phone+internet'을 외치며 앱스토어가 열렸던 그때부터 저희는 애플리케이션을 사용하며 인터넷을 컴퓨터가 아닌 스마트폰으로 사용하는 시대가 열렸습니다.
2007.01.09 故. 스티브 잡스의 아이폰 출시 프레젠테이션 (사진출처 - Apple)스마트폰처럼 UI 디자인 툴은 굉장히 혁신적인 툴입니다. 디자이너가 생산성을 높이고 더욱 편리하게 일을 할 수 있도록 도와주는 툴입니다. 그 이유로는 2G 폰과 스마트폰의 차이가 앱스토어이듯 피그마와 포토샵의 가장 큰 차이인 일단 플러그인이 그 역할을 해주고 있습니다.
스마트폰의 앱은 스마트폰 제조사에서 배포하는 것이 아닌 여러 IT 회사에서 내놓듯이 피그마의 플러그인 또한 피그마에서 배포하는 것이 아닌 여러 IT 회사에서 배포하는 것이고 심지어 무료입니다. 이로 인해 시장의 확장성이 높다는 점이 가장 큰 차이라고 할 수 있습니다.
퇴근시간이 바뀌는 컴포넌트 시스템
플러그인과 마찬가지로 가장 큰 차이인 바로 Sketch에선 Symbols, Figma에서는 Components, XD에서는 Assets로 불리고 있는 바로 '구성요소 시스템'입니다. 우리는 웹이든 모바일이든 사용자가 웹을 이용하는데 혼동을 주지 않기 위해서 컬러 및 텍스트들을 지정하여 디자인 시스템을 많이 사용하고 있습니다. 이것을 좀 더 명확하고 간편하게 사용하게 해주는 것이 바로 '구성요소 시스템'입니다.
피그마로 설명하자면 하나의 마스터 구성요소로 종속된 여러 하위 구성요소들을 관리하는 시스템입니다. 사실 플러그인 시스템보다 저는 이 구성요소 시스템에 더 큰 표를 던지고 싶습니다. 사실 디자인 회사에 일하다 보면 수정에 수정에 수정에 수정…. 을 반복하는 경우가 비일비재한데 이럴 때 수정 때문에 10시에 집에 가야 할 저에게 7시(Feats. 정시퇴근은 5시 반)에 집에 갈 수 있도록 해주는 마법 같은 시스템이죠.
디자이너가 야근하는 이유..... 무한 수정 무한 최종본!디자이너가 선호하는 툴
UI 다자인 툴 전쟁이 시작되고 스케치는 압도적으로 UI 디자인 시장을 차지해나갔습니다. 피그마와 인비전 스튜디오가 그 뒤를 따랐고 약 3년 전 Adobe에서도 드디어 XD라는 툴을 발표하였죠. 하지만 스케치의 대항마는 없었죠. 하지만 2년 전부터 미디엄과 브런치 등 다양한 커뮤니티에서 피그마를 선호하는 글이 점차 나오기 시작했습니다. 그 결과는 작년의 UI 디자인 툴의 시장 점유율 통계에서 확인할 수 있었습니다.
UXtools.co의 2018년 가장 인기 있는 UI 디자인 툴 설문 조사 결과 (사진출처 - UXtools.co)
UXtools.co의 2019 년 가장 인기 있는 UI 디자인 툴 설문 조사 결과 (사진출처 - UXtools.co)이 통계를 보면 Sketch의 점유율이 아직도 압도적이지만 많은 디자인 회사가 Mac OS를 사용하기 때문에 다른 시각에서 바라보면 결과는 다릅니다. Mac OS에서만 사용 가능한 Sketch와 Windows, Mac OS 등 인터넷이 되는 공간이면 어디든 사용 가능한 Figma의 차이는 사용하는 OS에 따른 UI 디자인 툴의 사용 차이를 보여주고 있습니다.
실제로 Apple의 디자이너들은 대부분 Sketch를 사용하고 Microsoft의 디자이너들 대부분은 Figma를 사용한다는 이야기를 참고할 수 있습니다. Human Interface Guide에서는 Apple의 디자인 시스템 키트를 Sketch와 XD, PSD로 배포하는 반면 Microsoft의 Fluent Design 가이드에서는 Figma로 다지인시스템 키트를 제공하고 있습니다. 이 둘의 차이는 해당 회사가 어떤 디자인 툴 선호하는지에 대해서 보여주고 있습니다.
UXtools.co의 Windows와 Mac에서의 UI 디자인 툴 설문 조사 결과 (사진출처 - UXtools.co)- Apple사의 Human Interface Guide
https://developer.apple.com/design/human-interface-guidelines/?testcode=0506
- Microsoft의 Fluent Design Guide
https://www.microsoft.com/design/fluent/#/
3. 상황에 맞게 사용
저는 지금 Sketch를 애플, Figma를 삼성, XD를 엘지라 비유하고 싶습니다. 막상 사용해보면 거기서 거기인 느낌이 없지 않아 있습니다. 한 군데서 이런 기능이 나오면 다른 두 군데서 똑같은 기능을 나오고 UI 디자이너로서는 이러한 경쟁이 굉장히 반갑습니다.
하지만 사람들이 많이 사용하고 관심을 가지는 데는 그만큼 이유가 있습니다. 명품과 짝퉁의 차이는 미세한 차이라고 말하듯 이 3가지 툴에도 미세한 차이들이 존재합니다. 많은 사람이 지금 UI 디자인 툴 전쟁 시대라고 말하듯 어떤 툴이 보편화할지 모르는 저희에게는 다양한 툴들에 대해서 이해하고 관심을 가지면서 자신에게 맞는 툴을 사용하는 게 가장 현명한 방법이라고 생각합니다.
