엔지니어가 제품을 만들때 이용하는 똑같은 UI코드컴포넌트를 사용하여 디자인 할 수 있습니다. 요소를 드래그 앤 드롭하기만 하면 될뿐, 코딩기술은 필요 없습니다.
WCAG 규격에 따라 포괄적인 제품디자인을 할 수 있습니다. 콘트라스트 검사기 및 색각 시뮬레이터 등을 통해 프로토타입을 테스트할 수 있습니다.
스테이트, 조건부 인터랙션 및 오토레이아웃 등 테스트 중에도 프로토타입은 마치 최종 제품을 만지고있는 것처럼 작동합니다.
"동료들에게 디자인을 검증하는데 몇일 밖에 안걸린다고 자신있게 말할 수 있게 되었어요. 월요일에 프로토타입을 만들어, 화요일과 수요일에 테스트하고, 목요일에 결과를 보여줄 수 있죠. "
모두가 같이 제품을 만들기 위한 더 쉬운 방법을 선택하십시오!
와이어프레임, 프로토타입, 아이디어를 실시간으로 공유 할 수 있습니다. 리모트 협업 프로세스를 지원하기 위해, Mac, Windows 또는 브라우저 어디에서든 원활하게 작업 할 수 있습니다.
당신의 디자인을 쉽게 공유하고 의견을 구하세요. 팀 구성원에 태그를 지정하고 댓글을 할당하는 등 팀 전체가 작업하고 있음을 실감하세요.
개발자에게 모든 스펙, 코드 그리고 자동 레드라이닝을 포함하여 디자인을 전송합니다. 코드컴포넌트를 사용하여 작업하고 핸드오프 트러블은 완전히 없어집니다.
오늘날에는 수많은 UX/UI 프로그램들이 있다. ‘웹’ 디자인만이 존재하던 2000년대에는 Photoshop과 Illustrator로 모든 디자인이 가능했었다. 그러나, 스마트폰이나 아이패드와 같은 기기들의 탄생이 다양한 화면비율을 만들어내기 시작하자 픽셀 기반의 Photoshop은 점차 대응성이 떨어졌다. 화면에 따라 늘어나거나 줄어드는 이미지가 흔한 말로 ‘깨지기’ 시작한 것이다. 이러한 문제점을 해결하고자 Sketch, Figma, XD와 같은 프로그램들이 줄지어 개발되었다. 벡터 기반의, 어느 화면비율에도 대응될 수 있는 그런 프로그램들 말이다.
가장 먼저 Sketch가 세상에 나왔고, 그 뒤로 Figma, 가장 마지막으로 XD가 나왔다. 이외에도 다른 프로그램들이 존재하지만 현재 사용성이 가장 높은 프로그램은 이 셋이다. 셋은 기능적인 측면에서 크게 다를 바 없다. 그렇다면 선호도도 비등비등할 법한데 전혀 그렇지 않다. 눈에 띄게 선호도의 차이를 보인다.
위의 표들을 보자면 2018년부터 2020년까지 선호도의 변화가 보인다.
2018년도의 선호도는 Sketch가 압도적으로 우세했으며 큰 차이를 보이지만 그 뒤로 Figma, Photoshop, XD가 자리잡고 있다.
2019년도에도 여전히 Sketch가 우세하나 점차 Figma의 선호도가 올라 차이를 줄여가고 있었고, XD가 PhotoShop을제쳤다.
가장 최근인 2020년도에는 아주 큰 변화가 눈에 띈다. 만년 2등의 자리에만 있던 Figma가 반란을 일으켰다. Sketch를 넘어서고야 만것이다. 굳건해 보이던 Sketch의 아성이 무너졌다. XD는 꾸준히 선호도가 오르고 있으나, 큰 변화의 폭은 보이지 않는다.
도대체, 무엇이 Figma의 성장원동력이 된 것일까? 앞서 말했다시피 세 프로그램들의 기능들은 비슷한데 말이다. 세 제품들의 공통점과 차이점을 보면 그 이유를 알게 된다.
공통점
1. 구성 요소 시스템
일전에 포토샵에서는 같은 개체가 여러 개 있을 시 제 각각 수정을 했어야만 했다. 하나의 사진에 적용된 효과가 수정된다면, 복사된 다른 사진에도 효과값을 고쳐줘야만 했다. 그러나 '구성 요소 시스템'이라는 이 혁신적인 기능은 최초의 개체를 마스터로 설정하고 복사했을 경우, 마스터의 효과값만 고쳐주면 다른 복사된 요소들에도 일제히 적용된다. 얼마나 경제적인 시스템인가? 이 시스템 하나만으로도 이 세 프로그램의 편리성은 여타 프로그램들에 비해 월등히 높아졌다.
2. 플러그인 제공
프로그램을 사용하는데 있어서 기본으로 제공되는 기능 외에 추가적으로 다운로드 받을 수 있는 플러그인이 제공된다. 플러그인은 현재 그 종류가 방대하다. 간단하게는 레이어의 이름을 자동으로 다르게 지어주는 기능부터, 인터넷 특정 사이트에서 제공되는 아이콘과 사진을 손쉽게 불러오는 기능 등 프로그램을 이용하여 기획이나 디자인을할 때 사용되는 요소들을 손쉽게 불러오고 제작할 수 있도록 해준다.
차이점
1. OS 대응
Sketch는 맥OS에서만 사용이 가능하다.
XD는 맥OS와 윈도우OS 전부 사용이 가능하다.
Figma는 웹 브라우저에서 사용이 가능하므로 OS의 영향을 받지 않는다. (네이티브 프로그램 또한 맥OS, 윈도우OS에 모두 설치가 가능하다.)
국내의 경우 맥OS 보다 윈도우OS의 사용자의 비율이 높은데, Sketch는 맥OS만을 대응하니 자연스레 국내에서는 사용도가 높지 않고, 해외에서 주로 사용되던 프로그램이다.
2. 저장 시스템
Sketch와 XD는 클라우드 서버를 제공하고, 로컬 저장 기능을 갖추고 있다.
Figma는 웹에 자동 저장이 되는 형식이며, 로컬 저장 기능도 갖추고 있다.
GB당 결제를 해야하는 시스템인 클라우드 서버에 비해 웹에 저장이 되는 시스템은 이점이 크다. 용량의 압박에서 벗어나게 해주며, 가격적인 측면에서도 부담이 없기 때문이다.
3. 퍼포먼스
세 프로그램 모두 협업을 제공하는프로그램임은 분명하다. 그러나 Figma의 특성으로 협업시스템이 두드러지는 이유는 바로 퍼포먼스 부분에서 Figma가 상당히 두각을 드러내기 때문이다.
XD는 UX/UI 프로그램의 후발주자로 Sketch와 Figma의 장점들은 전부 내포하고 있는데도 불구하고 Figma나 Sketch를 넘어서지 못하는 이유가 바로 퍼포먼스적인 측면이다. XD는 끊임 없이 자잘한 버그와 불안정한 서비스 환경으로 인해 사용자들에게 큰 호감을 얻지못하고 있다.
Sketch는 오랫동안 생태계의 제왕 자리를 차지하고 있었으나, 오래된 만큼 기능들 프로그램 자체가 무겁다는 평가를 받고 있으며, 타사 플러그인 사용 시 성능 문제도 빈번하게 발생하는 것으로 알려져 있다.
그러나, 새롭게 각광받고 있는 Figma는 웹 기반이라 하드웨어 의존도가 낮으며, 다른 프로그램들에 비하면 성능 문제가 거의 없는 편에 속한다. 실제 사용자들의 후기를 살펴보아도 Figma의 만족도가 높다는 평이 상당히 많다.
4. 협업
세 가지 프로그램 모두 협업에 대한 대응이 되어 있다. 그러나 세세한 부분에서 차이점을 보인다. 2020년에 들어 코로나로 재택근무를 하는 사용자들이 늘어나다보니, 자연스레 협업이 편리한 시스템이 강세를 보이기 시작했다. 그게 바로 Figma이다. 사실상 2020년에 Figma가 급격한 성장세를 보인 이유는 협업이 잘 이루어질 수 있는 환경을 제공하고 있기 때문이다.
Sketch는 클라우드 스토리지 서비스를 이용해 다른 사용자와 파일을 공유하고 편집할 수 있는 기능을 제공한다. 그러나 프로토타이핑과 같은 기능을 Sketch 내에서는 제공하고있지 않기 때문에 다른 툴(invision이나 Zeplin)과병행하여 사용하여야 한다는 단점이 있다. 이러한 점이 Figma나 XD에 비해 뒤처져 있는 점이다. 디자이너에게는 많은 플러그인을 제공하여 편리한 시스템이지만 타 직무의 사람들과 연계하기에는 다른 두 프로그램에 비해 다소 불편하다.
XD는 여러 사용자가 편집할 수 있는 기능과 파일의 버전을 관리할 수 있는 기능을 탑재한 코딩 기능을 출시했다. 여타 다른 프로그램을 병행할 필요없이 XD 내에프로토타이핑 기능과 애니메이션 기능, CSS 개발소스를 제공하는 기능 등 핸드오프 세트를 갖추고 있다. 플러그인을 통해 Iack, Jira, Microsoft Teams, Zeplin 등의 통합 서비스를 이용하여 기획자, 디자이너, 개발자 간의 협업에도 용이하다.
Figma는 실시간 협업이 가능하다는 점에서 협업 툴로 가장 적합하다. 여러 사람이 동시에 같은 파일을 편집할 수 있다는 점은 Figma만의 고유한 특징이다. 자동 저장이 되는 시스템으로 누구나 항상 최신 업데이트 내역을 볼 수 있으며, 버전 관리나 설계 시스템 검사도 제공한다. XD와 마찬가지로 핸드오프 세트를 갖추고 있어 기획자, 디자이너, 개발자 간의 협업이 편리하다.
5. 가격 정책
Sketch
- 연 99$
XD
- Starter(무료 – 문서 공유 1회, 1명의 편집자 추가, 링크공유 1회, 2GB 클라우드 제공)
- Single (월 9.99$– 문서공유 무제한, 편집자 추가 무제한, 링크 공유 무제한, 100GB 클라우드 제공)
Figma
- Stater (무료 –문서 공유 무제한, 2명의 편집자 추가, 프로젝트 최대 3개)
- Professional (편집자마다 월 12$)
- Organization (편집자마다 매달 45$)
선택은?
2021년 현재 Figma가 시장의 파이를 무섭게 먹어 치우는 것을 보면, 사용자들은 실시간 협업 시스템을 선호한다는 것을 알 수 있다.
그렇다고 해서 꼭 Figma를 사용해야만 한다는 것은 아니다. 각 프로그램마다 장점들이 확실하기 때문에 사용자가 사용하고자 하는 용도에 따라 선택하면 적합할 것이다. 와이어프레임이나 프로토타이핑을 편리하게 하고 싶다면 XD, 실시간 협업 시스템이 필요하고 무거운 기능들보다는 빠른 퍼포먼스를 선호한다면 Figma, 다양한 플러그인을 사용하여 편리하게 디자인을 하고 싶다면 Sketch를 선택하면 된다.