피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

요즘 회사에 입사하는 신입 또는 주니어나 디자이너들을 보면 몇가지 패턴을 볼 수 있습니다. 하나는 디자인 시스템에 대한 기본기와 관리 능력이 있다는 것이고, 다른 하나는 피그마에서 반응형 디자인을 할 수 있는 능력을 갖추었다는 것이에요.

그 이유는 굉장히 간단하다고 생각해요. 이 능력이 있으면 "현업에 바로 투입"이 가능하다는 것이에요. 반대로 디자인 시스템, 반응형 디자인 능력이 없는 상태로 입사를 하게 되면 회사 입장에서는 정말 많은 비용과 시간을 투자해서 교육을 시켜야 하는데 이게 만만치 않습니다. 

그렇다고 해서 모든 지원자들이 이 능력을 갖추고 있는 것은 아니에요. 제 경험상 소수만 이 능력을 갖추고 있었어요. 그렇다는 것은 능력을 갖춘다면 금방 눈에 띄고 면접으로 올라갈 가능성도 높아진다는 것을 의미해요.

그래서 요즘 UX/UI디자인 입문자 및 취준생 여러분들에게 꼭 갖추라고 강조하는 것 중에 하나가 반응형 디자인입니다. 이 능력을 갖춘다면 취업 시장에서는 큰 경쟁력을 갖출 수 있습니다.

그리고 주니어 디자이너 또는 현업에 계시는데 반응형 디자인을 할 줄 모른다면 꼭 갖추시라고 추천을 드려요. 왜냐하면 이 능력이 있으면 훨씬 더 속도감 있게 업무를 해낼 수 있고 개발자와의 커뮤니케이션에 있어서 효율성이 크게 올라가기 때문입니다.

"반응형 디자인 완전 정복 with 피그마" 강의를 이번주에 런칭합니다. (얼리버드 50% 할인 쿠폰을 드려요.)

앞서서 반응형 디자인의 중요성에 대해서 말씀을 드렸는데요. 피그마를 활용해 반응형 앱부터, 웹, 카드, 컴포넌트 등 많은 것들을 직접 만들 수 있도록 반응형 디자인을 집중적으로 다룬 강의를 이번주에 런칭합니다. (수요일 전후) 반응형 디자인이 무엇인지, 어떻게 시작하면 좋을지 막막하셨다면 이번 강의가 좋은 출발점이 되어줄 거예요.

기초 개념부터 실습까지 하나하나 차근차근, Figma를 활용해 반응형 디자인의 원리를 직접 체득하고 실전 능력을 장착할 수 있도록 구성했습니다.

• 반응형 디자인의 핵심 개념 정리

• Auto Layout, Constraints, Layout Grid 이해와 활용

• 실무에서 자주 쓰이는 내용으로 구성

• 반응형 웹과 앱 모두 마스터

강의에 대한 자세한 커리큘럼과 내용이 궁금하시다면 이 링크를 눌러 확인해보시기 바랍니다. 

✨ 얼리버드 50% 할인 안내 및 신청서

강의에 관심 있으신 분들을 위해 이번에는 특별히 얼리버드 혜택을 준비했습니다. 아래 링크의 간단한 설문에 참여해주시면, 출시 시점에 50% 할인된 가격으로 수강할 수 있는 쿠폰을 드릴 예정이에요.

>> 얼리버드 신청(50% 할인): https://forms.gle/reSTKbdhMn1Yo6ni8

얼리버드 할인 혜택을 받고 싶으신 분들은 이번주 목요일(6일)까지 신청해주시기 바랍니다.

감사합니다.

안녕하세요. 에릭입니다.

추가적인 영상 업데이트가 있어서 안내드립니다.

최신 피그마 버전으로 재촬영을 진행하고 있습니다.

아래는 영상이 업데이트된 부분입니다.

섹션 7. 실전 예제 1. 스플래시 화면 디자인해보기

• 예제 샘플파일을 나의 드래프트로 가져오는 방법

• 스플래시 UI 화면 디자인하기

섹션 9. 피그마로 아이콘 만들기 A to Z

• 좋은 아이콘을 만드는 원칙

• Boolean 기능 활용하기

• 펜 툴 활용법 익히기

• Keyline 이해하기

• 아이콘 만들기

• 해상도를 고려한 아이콘 Export하기

   

   

   

   

   

참고로 "섹션 8. 실전 예제 2. 와이어프레임 만들기"는 피그마 버전 업데이트의 영향을 받지 않는 영상들이라 재촬영을 진행하지 않습니다. 피그마 버전 업데이트로 인해 영향을 받는 섹션의 영상 업데이트를 우선적으로 하고 있어요.그러면 감사드리고 업데이트가 진행이 되는데로 계속 소식 공유드리도록 할게요.

그러면 좋은 하루 되세요.

감사합니다.

에릭 드림

안녕하세요. 에릭입니다.

영상 업데이트가 있어서 안내드립니다. 피그마의 버전이 업데이트 된 부분이 생김에 따라 기존 영상에서 보여지는 피그마와 최근 피그마가 다르게 보여지는 점이 있어서 최신 피그마 버전으로 영상을 재촬영하여 올렸습니다. 아래는 영상이 업데이트된 부분입니다.

섹션 4. 피그마 작업 환경 이해

• 무료로 시작할 수 있는 피그마의 가격 정책 및 서비스

• 회원가입과 피그마 파일 관리를 위한 환경

섹션 5. 피그마 기초 기능 익히기

• 도형 만들기, 그리고 우측 패널 기능들 익히기

• 트랜스폼 및 오브젝트 이동 관련 기능들과 단축키 익히기

• 정렬, 분배, Tidy up, 그리고 Smart Selection 기능

• 텍스트 만들기

• 컬러 관련 기능 - 피커, 그라데이션

• 이미지와 마스크 기능

• 이펙트 이해하기

섹션 6. 생산성을 높여주는 플러그인과 템플릿

• 시간을 몇배, 몇십배 아껴주는 "플러그인"

• UI디자인의 퀄리티를 단숨에 높여주는 "템플릿 활용법"

그러면 참고 부탁드리고, 다음 섹션 영상들도 피그마 버전 업데이트로 인해 영상 재촬영이 필요한 부분들에 대해서 작업을 진행하고 있습니다. 업데이트도 진행이 되는데로 공유드리도록 할게요.

그러면 좋은 하루 되세요.

감사합니다.

에릭 드림

안녕하세요. 에릭입니다.

영상 업데이트가 있어서 안내드립니다. "섹션 2. UX, UI 디자인 툴로서 피그마 이해하기"의 아래 3개 영상을 최신 정보를 토대로 업데이트를 했습니다. 기존 버전 영상에서는 통계자료에서 디자인 툴로서 스케치가 피그마 대비 조금 더 우세했는데, 현 시점(2023년)에서는 피그마가 UX, UI 디자인 툴에 있어서 시장에서 압도적인 1위를 하고 있습니다. 2위, 3위와 격차가 워낙 커서 비교하기가 어려울 정도입니다. 그래서 UX, UI디자인을 입문하는 입장에서 어떤 툴을 써야할까 고민중이라면 바로 피그마를 사용할 것을 추천할 수 있는 상황인 것 같습니다.

[영상 업데이트 된 부분들]

섹션 2. UX, UI 디자인 툴로서 피그마 이해하기

- 피그마 툴 소개

- 통계로 알아본 "UX, UI 디자이너는 어떤 툴을 사용하고 있을까?"

- UX, UI 디자인 툴 별 장단점, 그리고 피그마를 사용해야 하는 이유

참고 부탁드리고, 최근 피그마 소프트웨어 버전이 업데이트된 부분들이 조금씩 있어서 이 점을 반영해서 다른 섹션/챕터들도 영상촬영을 진행하고 있습니다. 목표는 올해 안에 피그마 버전이 업데이트된 부분을 모두 반영하여 이 강의 관련 영상들을 모두 업데이트하는 것으로 하고 있어요. 다른 업데이트도 진행이 되는데로 공유드리도록 할게요.

그러면 좋은 하루 되세요.

안녕하세요 에릭입니다.

추운 겨울 따뜻하게 잘 보내고 계시기를 바랍니다.

2021년에 이어서 UX tools에서 2022년도 UX/UI디자인 툴 사용에 대한 통계자료를 발표했습니다. UX tools에서는 매년 이것을 발표하고 있어서 UX, UI 디자인 툴 시장의 흐름이 어떻게 흘러가고 있는지, 어떤 툴들이 많이 활용되고 있는지 알 수 있어서 좋은 것 같습니다. 통계조사 결과를 정리해보았습니다. (통계 출처: uxtools.co)

결론 "피그마 독보적": UX, UI 디자인을 하기 위해서는 여러가지 활동을 해야 합니다. Wireframe, UI Design, Design System 등이 있는데요. 2020년에서 2021년이 되면서 피그마가 다른 툴 대비 훨씬 더 많이 활용이 되면서 격차를 벌렸다면 이제는 거의 넘사벽 수준으로 독보적이 되어가고 있는 것 같습니다. 

1. 이 설문에는 누가 참여했는가? "전 세계의 디자이너들"

이번 설문에서는 전세계의 UX 디자이너 또는 관련 업종에서 종사하거나 일하고 있는 분들 4260명이 참여했습니다.

2. 어떤 직업인들이 참여를 많이 하는가? "UX, UI를 모두 하는 프로덕트 디자이너, UX/UI 디자이너들이 많아지는 트렌드 발견"

참여한 직업군은 프로덕트 디자이너와 UX/UI 디자이너가 제일 많았습니다. 이 부분은 2021년 결과에 비해서 변화가 느껴집니다. 

테크 업계에서는 애자일, 린 스타트업이 활용이 되면서 디자이너 역시 UX 디자이너, UI 디자이너를 따로 뽑던 시대에서 점차 UX, UI를 모두 할 줄 아는 UX/UI 디자이너 또는 프로덕트 디자이너를 많이 채용하는 트렌드가 있습니다. 제품 개발 및 업데이트를 위해 빠르게 이터레이션을 해야 하는 흐름 속에서 모두를 아우르는 프로덕트 디자이너를 더 원하는 것은 어찌 보면 당연한 부분인 것도 같습니다. 그런 관점에서 UX 디자이너 및 UI 디자이너는 줄고 프로덕트 디자이너, UX/UI 디자이너가 늘어난 변화가 보입니다.

2021년 참여자들의 직업군 (아래)

2022년 참여자들의 직업군 (아래)

3. UI 디자인 툴 설문 결과 "피그마로 종결"

UX, UI 디자인 툴 시장에서 가장 핫한 부문은 역시 UI디자인이라고 볼 수 있습니다. 핸드 스케치나 와이어프레임은 꼭 UI 디자인 전용 툴이 아니라도 다른 대체 소프트웨어나 방법이 있습니다. 예를 들어 와이어프레임은 파워포인트를 통해서도 만들 수 있기 때문입니다. 그런데 UI디자인만큼은 전용툴을 활용해야 하고 터득을 하는데 툴의 전문적인 활용법을 익혀야 합니다. 그렇기 때문에 얼마나 더 좋은 전용툴을 제공하고 있는가가 중요한데요. 낙년에는 피그마가 꽤 압도적으로 다른 툴을 이겼다면 이번에는 그냥 비교하기 어려울 정도로 차이가 많이 벌어졌습니다. 그만큼 전세계의 디자이너들이 피그마를 많이 사용하고 있다는 이야기이겠지요.

그래서 UI디자인 입문을 고민 중인 분이라면 먼저 피그마를 배울 것을 추천드립니다.

2021년 UI 디자인 툴 설문 결과

2022년 UI 디자인 툴 설문 결과

연도별 UI 디자인 시장 점유율 변화 (피그마는 격차를 이미 벌렸다고 생각했는데 더 많이 벌렸습니다;)

4. UI 프로토타이핑 "Basic은 피그마가, Advanced는 프로토파이"

올해 UI 프로토타이핑 설문은 두개의 섹션으로 나뉘어져 있었는데요. 하나는 Basic, 다른 하나는 Advanced입니다. Basic은 기본적으로 화면이 구동되어 보이는 정도, 가벼운 애니메이션이라든지 화면 클릭이 가능하도록 하는 정도로 보면 될 것 같고, Advanced는 훨씬 더 고퀄로 프로토타이핑을 하는 걸로 보면 될 것 같은데요. Basic은 피그마가, Advanced는 우리나라에서 만든 소프트웨어 Protopie가 1위를 차지했습니다. 

5. 디자인 시스템 "이것도 피그마"

디자인 시스템도 역시나 피그마가 압도적입니다. 스토리북은 개발자와 코드를 포함한 콤포넌트를 공유하는 소프트웨어인데요. 디자이너와 함께 관리를 하는 부분이 있어 2위를 차지했습니다. 참고로 이 설문에는 개발자도 꽤 많이 참여를 했어요. 아무래도 협업이 많기 때문으로 보입니다. 개발자도 마찾가지로 피그마를 Viewer로서 많이 활용하고 있기도 하구요.

6. 디지털 화이트보드 "Miro와 피그마에서 만든 피그잼의 경쟁"

디지털 화이트보드는 작년에 이어 거의 비슷하게 Miro와 피그마가 경쟁 중에 있습니다. 피그잼은 피그마 사용자가 바로 사용할 수 있어 편리한 이점이 있는데요. 그럼에도 Miro가 확실히 시장을 먼저 점유해서인지 1위를 유지하고 있습니다. 온라인 협업이 중요해진 요즘 디지털 화이트보드 시장의 경쟁은 앞으로도 뜨거워질 것 같습니다.

* 그 외에도 유저 리서치 소프트웨어라든지, 유저 리서치 리크루팅 툴에 대한 설문조사도 있으니 한번 살펴보시기 바랍니다. 

요약 및 생각

1. 피그마는 UX, UI디자인을 위한 거의 모든 프로세스에 대한 솔루션을 제공하고 있습니다. 브레인스토밍을 위한 피그잼, 와이어프레임, UI디자인, 디자인 시스템, 프로토타입까지 말이지요. 거기다가 플러그인과 오픈소스 템플릿은 점점 더 많아지기 때문에 계속해서 넘사벽으로 가고 있는 것 같습니다.

2. 최근 피그마가 어도비에 인수되는 일이 있었습니다. 워낙 시장에서의 영향력이 크기 때문에 어도비가 피그마를 당장 어떻게 변형시킬지는 모르겠으나, 저는 피그마가 지금의 방향성을 계속 유지해서 사용자편의성에 집중을 하면 좋겠습니다. 워낙 디자이너의 입장에서 잘 만들고 편리한 툴이라고 생각합니다.

3.  디지털 화이트보드 시장의 경쟁도 흥미로운 지점이 많은 것 같습니다. 비대면 협업이 중요해지고 있기 때문에 비디자이너들과 함께 아이디어 회의를 하기 위해 필요한 소프트웨어이기 때문에 그렇습니다.

4. 프로덕트 디자이너, UX/UI디자이너에 대한 수요가 점점 더 커지는 것을 느낍니다. 입문자 분들은 이런 점을 참고하셔서 커리어 설계를 하시면 좋을 것 같습니다.

자료 출처:

UX tools 2022년 통계 결과

UX tools 2021년 통계 결과

기타:

2021년 UX디자인 툴 통계발표 "피그마의 독주"

안녕하세요. 에릭입니다.

여름이 다가오고 있는데 다들 잘 지내시는지요? 제가 있는 뉴욕은 이제 꽤 무더워지기 시작했습니다.

제가 이번에 UX디자인 입문자를 위한 개론서를 출간하게 되어 소식을 공유합니다. UX디자인의 개념과 UX/UI디자인의 원리, 유저 리서치, 커리어 로드맵을 설계하는 방법 등에 대해서 다룬 책입니다. 

예스 24, 교보 문고 등 인터넷을 통해 주문하실 수 있습니다. (👉구매 링크)

* 제가 인프런에 개설한 UX 디자인 개론 수업의 내용에 내용을 조금 추가해서 엮은 책이라 해당 수업을 이미 들으셨다면 책은 읽지 않으셔도 될 것 같습니다.

✅ 책을 쓰게 된 배경

저는 10여년 전에 첫 UX디자인 커리어를 시작하게 될 때에, 누군가에게 지식을 전달하거나 가르치는 것은 계획하지도 않았고 상상해본 적이 없었어요. 그런데 몇년전 감사하게도 UX 입문자분들을 도와드릴 수 있는 기회가 생겼고 이를 계기로 1:1 코칭, 인프런 강의 등을 통해 활동을 하게 되었습니다.

저는 서울과 뉴욕에서 UX, UI 디자인과 유저 리서치를 공부하고, 실무를 경험하고 성장해왔는데요. 입문을 하던 시절 그 과정에서 좌절과 많은 시행착오를 겪었어요. 그래서 저와 비슷한 고민과 어려움을 갖고 있는 입문자분들을 도와드리는 것에 보람을 느꼈습니다.

UX 분야로 진로를 고민을 하고 있는 분들에게는 지금이 인생에서 중요한 시점일텐데 이 책을 통해 조금이나마 도움이 되었으면 합니다. 책과 관련해서 궁금한 점이 있다면 언제든지 문의주세요. (ericworld121@gmail.com)

✅ 왜 UX 디자인 입문에 가이드가 필요한가? 

저는 서울과 뉴욕에서 UX, UI 디자인과 유저 리서치를 공부하고, 실무를 경험하고 성장해왔는데요. 입문을 하던 시절 그 과정에서 좌절과 많은 시행착오를 겪었어요. 그래서 저와 비슷한 고민과 어려움을 갖고 있는 입문자분들을 도와드리는 것에 보람을 느꼈고 제가 가진 지식과 경험, 시행착오들을 토대로 어떻게 하면 입문자 분들이 UX/UI 디자인을 조금이라도 쉽게 시작하도록 도와드릴 수 있을까를 고민하면서 코칭과 강의를 해왔습니다. 제 강의를 들으셨던 대부분의 입문자 분들은 다음과 같은 공통적인 질문을 하셨어요.

"UX디자인은 무엇을 하는 일일까?"

"나는 전공자가 아닌데 UX디자이너가 될 수 있을까?"

"나는 시각적인 감각이 뛰어난지 모르겠는데 이 분야에 입문할 수 있을까?"

입문자 분들에게 실무자의 관점에서 경험과 업계에서 활용되는 살아있는 지식을 공유드리는 것이 위 질문에 대한 답을 얻을 수 있도록 돕는다는 것을 알게 되었어요. 단순히 이론적인 내용만을 배우는 것보다는 실제 현업에서 일하는 사람이 생각할 때에 UX와 UX 디자인의 개념은 무엇이고, 실무자의 관점에서 어떤 것들을 알아야 입문을 잘할 수 있는지 알려드리는 것이 궁극적으로 입문자 분들이 원하는 목표에 더 빠르게 도달할 수 있기 때문이었어요. 즉, 지름길을 공유하는 것과 같습니다.

그래서 이 책에서는 현업에서 UX/UI디자이너로 10여년가 일하고 있는 제가 지금까지 강의, 코칭을 하면서 입문자분들에게 도움이 되었던 내용들을 정리하여 다음의 내용으로 구성했습니다. 

✔️ UX의 본질적인 개념: UX, UX디자인, UI디자인은 무엇일까?   

✔️ UX디자이너는 어떤 마인드셋을 가지고 입문하고, 실전에 임해야 할까?

✔️ UX, UI 디자인을 빠르게 잘 할 수 있게 도와주는 디자인 원리란 무엇인가?

✔️ UX디자인의 핵심 알맹이, 유저 리서치란 무엇이고 어떻게 하는가?

✔️ 사용자를 끌어당기는 UX는 어떤 프로세스로 만들어질까?

✔️ 최근 테크 업계에서 제품은 어떻게 만들어지고 있으며이를 위해 UX 디자이너는 어떤 역할을 하는가?

✔️ UX 관련 직업은 어떤 것이 있을까?

✔️ UX 커리어 로드맵: 이제 디자이너가 되기 위해 무엇을 해야 할까? (Feat. 툴, 프로젝트, 포트폴리오)

✅ 누구를 위한 책인가?

이 책은 다음과 같은 분들을 생각하며 집필했습니다.

✔️ UX디자인에 관심이 있고, UX디자이너가 무엇을 하는지 알고 싶은 분

✔️ 디자인 비전공자, UX와 전혀 무관한 분야에서 일을 하고 있지만, UX로 직종 전환을 고민 중인 분

✔️ 탄탄한 UX, UI 기본기를 "빠르게" 다지고 싶은 분

✔️ UX 디자이너와 협업을 하는 분들

✔️ 새로운 분야에 대해 배우고자 하는 갈망이 있는 분

✅ 추천사

“UX 분야로 진로를 전환할지 망설이던 시기에 저자의 ‘UX 디자인 입문 강의’를 처음 접했다. 산발적인 인터넷 검색으로는 해소되지 않았던 UX 디자인의 세계를 두루 이해할 수 있었는데, 이는 비전공자로서 가졌던 막연한 두려움을 해소하고 새로운 시작을 결심할 수 있는 용기를 심어주었다.“

- 이경은 (프랫 인스티튜트 Information Experience Design 석사과정)

“이 책은 저자의 풍부한 경험과 지식을 바탕으로 UX의 기본 정의와 방법론 같은 이론적 개념부터 실제 현장에서 사용되는 프로세스, 다양한 UX 직업군, 커리어 시작하기 등 현실적인 부분까지 두루두루 다루고 있어 UX 분야를 종합적으로 이해하는 데 많은 도움이 되리라 생각한다.”

- 이경민 (구글 UX 디자이너)

“UX 입문자가 잊지 말고 기억해야 할 UX 원리와 트렌드에 비춰 반영해야 할 실무 지식까지 이해하기 쉽게 갈무리되어 있다. UX 입문자뿐만 아니라 UX 기본기를 다시 기억하고 탄탄하게 다지고 싶은 주니어 디자이너에게도 유용한 가이드라인이 될 거라 확신한다.”

- 이강민 (한화생명 UX 기획자)

“UX를 처음 입문하는 주니어 디자이너부터 UX를 함께 고민해야 하는 기획자, 마케터 같은 모든 직군에게 도움 되는 내용으로 가득하다.”

- 송민승 (메타(페이스북) 수석 디자이너)

책에 대한 더 자세한 내용과 전체 추천사는 다음 링크에서 확인할 수 있습니다.

👉 추천사 및 상세 소개

수강생 여러분을 통해 저 역시 성장하고 있습니다.

늘 감사합니다.

작년에 이어서 얼마 전에 UX tools에서 2021년도 UX/UI디자인 툴 사용에 대한 통계자료를 발표했습니다. 저는 이번에는 설문조사에도 참여를 했어서 발표가 어떻게 나올지 궁금했고 더 유심히 지켜보았습니다. 통계조사 결과를 정리해보았습니다. (통계 출처: uxtools.co)

시간이 없으신 분들은 다음 요약내용을 확인해보세요.

_

요약 및 생각:

"UX/UI디자인 프로세스의 거의 전 영역에서 다른 툴을 압도하는 피그마"

하나의 툴로 UX, UI디자인에 대한 전반적인 기능을 제공하는 피그마는 점점 대부분의 영역에서 다른 툴 대비 넘사벽으로 가고 있는 것 같습니다. 디자인 툴 시장이 워낙 급변하고 지난 5-6년 사이에 엎치락 뒤치락 했던 부분들도 있어서 내년에는 또 어떻게 될지는 모르겠습니다. 다만, 한번 툴 사용이 쉬워지면 다른 툴로 쉽게 이동을 하지 않는 게 일반적이라 피그마는 앞으로도 당분간은 시장우위를 점하지 않겠나 생각이 듭니다.

_

통계 결과 정리

세계 111개의 나라의 UX, UI디자인 등 관련 업계에서 종사하고 있는 분들 3,100여 명을 대상으로 조사를 했습니다. 데모그래피 정보와 관련해서 몇가지 흥미로운 부분이 있었습니다. 하나는 국가별 참여자수로 봤을 때 우리나라 참여자가 111명으로 6번째로 높았다는 부분이었습니다. 작년에 비해 우리나라 디자이너분들의 참여도가 더 높았기 때문으로 보이고, 이렇게 존재감이 드러나는 것은 여러모로 기분 좋은 일인 것 같습니다.

: 국가별 참여자 수 랭킹

참여한 직종별 참여자 랭킹은 아래와 같습니다. UX, UI디자인을 모두 겸하는 프로덕트 디자이너가 가장 많게 나왔고 UX디자인, UI디자인이 그 뒤를 잇고 있는데, 이제는 프로덕트 디자이너가 대세 직군 중 하나로 확실히 자리를 잡아가고 있는 것 같습니다. 아무래도 프로덕트 디자이너가 Agile/Lean 조직에서 선호하기 때문이 아닐까 생각이 듭니다.

 

: 직군별 통계 참여자 수 랭킹

이 통계조사는 UX/UI디자인과 관련하여 UI디자인, 프로토타이핑, 화이트보드 등 영역 별로 어떤 툴을 많이 사용하고 있는지 조사한 것인데 결론부터 말씀드리자면 '피그마, 독보적'입니다. 작년에는 주요 지표에서 피그마가 스케치를 앞지르기 시작했다면 올해는 그 독주를 완전히 굳히는 형세로 가고 있는 것 같습니다.

그러면 영역별로 결과를 살펴보도록 하겠습니다. (출처: UXtools.co)

_

1. UI 디자인: "독보적인 Figma"

UX, UI디자인 툴 시장에서의 경쟁에서 전면전이라고 볼 수 있는 것은 역시나 UI디자인 영역이라고 생각합니다. 디자인 프로세스에서 앞단(기획, 아이데이션)에 해당하는 브레인 스토밍, 화이트보드, 와이어프레임은 상대적으로 진입장벽이 낮은 툴들을 사용할 수 있어서 UI디자인 전문툴을 꼭 사용하지 않아도 되고 대체 가능한 툴들이 있습니다. 브레인 스토밍은 종이와 펜도 좋은 툴이 될 수 있고 와이어프레임은 파워포인트나 발사믹 등의 툴을 활용해도 됩니다. 그런데 UI디자인 만큼은 전문적인 툴이 필요하기 때문에 이 시장을 잡는다는 것은 큰 의미가 있는 것 같습니다.

통계결과는 피그마가 작년에 이어서 1위를 달성했는데 훨씬 더 압도적이었다는 겁니다. 아래는 2020년 기준 랭킹인데 피그마가 스케치를 처음으로 앞서서 1위가 된 해이기도 한데요. 스케치가 여전히 존재감이 있었습니다. 

 

: 2020년 UI디자인 툴 랭킹

2021년 통계결과는 피그마가 다른 툴들을 압살했다고 볼 수 있을 정도로 저 멀리 달아나는 모습입니다. 

: 2021년 UI디자인 툴 랭킹

 

: 연도별 UI디자인 점유율 변화

_

피그마가 잘 나가는 이유는 여러가지가 있을 것 같은데, 가장 큰 이유로는 다음 정도가 되지 않을까 싶습니다. (참고로 제가 피그마를 사용하는 이유이기도 합니다.ㅎㅎ)

• 피그마는 스케치에 비해서 맥OS 뿐 아니라 윈도우에서도 사용할 수 있음.

• 피그마의 커뮤니티 기능. 다양한 플러그인과 템플릿 사용 가능.

• 디자이너 뿐 아니라 함께 일하는 팀원들과 협업에 용이함. 유료회원이 아니어도 View 모드에서 Comment를 남길 수 있음.

• 프로토타이핑, 핸드오프 등의 기능도 가능하기 때문에 다른 앱들을 따로 설치해서 사용할 필요 없음 (올인원 효과)

_

2. UI 프로토타이핑: "넘사벽 Figma"

다음은 화면이 실제 구동가능하게끔 해서 사용자 테스트 등에 사용하는 프로토타이핑에 대한 결과입니다. 여기서도 피그마가 압도적입니다. 제 개인적인 생각은 Principle과 같은 툴에 비해 애니메이션을 만드는 것과 같은 디테일 적인 부분은 피그마가 아쉬운 부분이 있습니다. 그럼에도 이렇게 잘 나가는 이유는 Figma에서 UI디자인한 것을 다른 앱의 도움 없이 바로 프로토타이핑을 할 수 있다는 점 때문인 것 같습니다.

한 때 쉬운 사용성으로 잘 나가던 Invision은 이제 존재감이 거의 없어진 것 같습니다. 추가로 몇가지 흥미로운 부분이 있었는데요. 하나는 Adobe XD가 조용하지만 존재감을 꾸준히 드러내고 있다는 부분입니다. 다른 하나는 우리나라에서 만든 ProtoPie가 프로토타이핑 시장에서 4위까지 올라왔다는 점입니다. ProtoPie 앞으로도 승승장구하고 더 잘 됬으면 좋겠습니다.

 

: UI 프로토타이핑 툴 랭킹

 

: UI 프로토타이핑 툴 연도별 점유율 변화

_

3. 디자인 시스템, 핸드오프

컬러, 폰트 등 디자인 요소에 대한 통일성/일관성을 위해 활용하는 디자인 시스템과 도 UI디자인과 마찬가지로 피그마가 1위로서 2위, 3위 툴과의 간격이 크게 벌어졌습니다. 피그마의 콤포넌트, Style 기능이 쉽고 팀으로 사용하는 경우 Library를 통해 팀원 간 공용으로 활용할 수 있고 굳이 다른 툴을 사용할 필요가 없기에 시장 우위를 점하고 있다고 생각됩니다. 

핸드오프는 피그마가 Zeplin을 멀찌감치 따돌리고 1위를 굳혀가고 있습니다.

 

: 디자인 시스템 툴 랭킹 변화

 

: 핸드오프 툴 랭킹 변화

_

4. 디지털 화이트보드, 브레인스토밍:

"Figma를 등에 업은 Figjam의 등장, 1위 Miro를 따라잡다"

팬더믹의 영향으로 비대면 협업이 중요해지는 가운데, 회의를 하거나 함께 문서를 공유 및 보기를 하는데 필요한 디지털 화이트보드 툴들의 경쟁이 심화되고 있는 것 같습니다. 피그마의 경우 올해 화이트보드에 특화한 피그잼 앱을 발표하기도 했습니다.

결과는 Miro가 1위로 나왔습니다. Figjam이 등장한지 얼마 되지 않았음에도 2위로 Miro를 바짝 쫓고 있는 부분이 인상적인데 많은 디자인 사용자를 보유하고 있는 Figma가 제공하는 기능이기에 그런 것 같습니다. 사용자 입장에서는 한 군데에서 UI디자인도 하고 화이트보드도 할 수 있어 편리한 부분인 것 같습니다. 참고로 UXtools에 따르면 (Figjam이 올해 무료로 사용 가능했음에도) 유료 툴인 Miro가 1등을 한 이유는 기능에 대한 만족도가 5점 만점에 4.3으로 높기 때문이라는 분석이 있었습니다. 

: 디지털 화이트 보드 랭킹

_

다시 정리하자면, 

디자인 씽킹의 관점에서 봤을 때에 UX, UI디자인 프로세스에서 필요한 전반적인 기능을 제공하는 피그마는 다른 툴을 모두 제치고 전세계에서 독보적인 UX/UI디자인 툴이 되어가고 있는 것 같습니다. 디자이너의 입장에서 이렇게 편리한 툴이 있다는 것, 그리고 더 많은 디자이너에게 사용된 다는 것은 기분 좋은 일인 것 같습니다.

_

자료 출처:

UX tools 2021년 통계 결과

UX tools 2020년 통계 결과

기타:

2020 UX디자인 툴 통계발표 "압도적인 피그마"