brunch

You can make anything
by writing

C.S.Lewis

by designsystemguy May 11. 2023

재미로 보는 피그마의 과거와 현재, 그리고 미래

Config를 한달 앞두고 쓰는 피그마 이야기

피그마가 주최하는 컨퍼런스 Config가 한 달 앞으로 다가왔습니다. 피그마는 2020년부터 해마다 Config에서 디자인을 중심으로 다양한 주제를 다루고 있는데요. 실질적으로 도움이 되거나, 배울 수 있는 것들도 많아서 제가 굉장히 좋아하는 컨퍼런스입니다.

Config에서는 피그마가 앞으로 출시할 기능에 대해서도 이야기하곤 합니다. 2021 Config에서 피그잼을 처음 선보였을 때는 정말 망치로 머리한대 맞은 것 같은 충격이었죠. 올해에는 과연 어떤 재미난 기능이나 지식이 공유될까요? 벌써부터 기대되네요.

오늘은 그래서 Config 2023(6월 22일)을 앞두고 피그마의 과거와 현재, 그리고 미래에 대해 이야기해보려 합니다.

시작

2012년으로 거슬러 올라갑니다. 피그마는 대학교 친구인 딜런 필드(Dylan Field)와 에반 월리스(Evan Wallace) 두 명이서 시작했어요.

둘은 ‘WebGL이라는 기술로 무엇을 할 수 있을지’부터 고민하면서부터 이 일을 시작했다고 해요. 그래서 2012~2013년 seed-stage 피그마를 보시게 되면, 유사 포토샵처럼 생긴 프로덕트를 확인할 수 있어요.

어떻게 보면 지금 OpenAI API를 활용하여 여러 가지 다양한 인공지능 관련된 프로덕트가 생겨나는 것처럼, 그 당시 딜런 필드와 에반 월리스도 WebGL 그 자체를 혁신을 가져오는 불씨로 바라보았던 것 같아요.

그 둘이 또 한 가지 주목했던 부분은 바로 Google Docs였어요. 동시에 접근하며 협업할 수 있는 작업 환경이 디자인을 함에 있어서도 똑같이 적용될 수 있다는 것을 이해하면서 누구든 함께하는 가치를 프로덕트에 녹여내기 시작했습니다.

실제 Dylan Field의 피치덱 중

피그마의 seed-stage 피치덱을 보면 아래와 같이 크게 세 가지 가치를 실현시키고자 했다는 것을 알 수 있어요.

1. Accessible

Free if working in public

Intuitive

2. Connected

Github for creatives

Collaboration

Community

3. Education

Recipes

Mentorship

개인적으로는 지금 피그마를 바라보았을 때, 창업 당시 가지고 있었던 가치를 지금까지 유지하고 있다는 점이 참 신기하고 대단하게 느껴지네요.

침묵과 노력의 시간 끝에서

그렇게 뚝딱뚝딱 만들다가 누구나 그렇듯 날이 갈수록 목표가 흐려지고, 되는 둥 마는 둥 하는 기간이 흘렀나 봐요. 그래서 목표를 명확히 하고 보다 날이 선 프로덕트를 만들기 위해 고민한 끝에 인터페이스 디자인 툴의 길로 발을 딛게 됩니다.

2015년에 마침내 피그마는 세상에 나오게 돼요. 당시에 인터페이스 디자인 분야에서 글로벌하게는 여전히 포토샵이 강세였을 거라 생각해요. 떠오르는 강자 스케치가 그 뒤를 이었을 것이고, 피그마는 아직 눈에 보이지도 않는 눈곱 같은 수준이었죠.

스케치의 힘은 가히 압도적이었어요. 15~19년까지 스케치는 스큐어모피즘 to 플랫디자인 트렌드에 힘입어 전 세계적으로 엄청난 유저를 모으며 성장을 할 수 있었어요.

저도 18년에 디자인을 시작한 사람으로서, 스케치를 처음 접했을 때 포토샵보다 굉장히 직관적이고 빨라서 좋아했던 기억이 아직까지도 생생하네요. 처음에는 그렇게 스케치 왕조가 오래갈 줄 알았어요.

때를 기다리다.

스케치는 네덜란드에서 시작한 50명 내외의 회사였고, 버그도 굉장히 많은 툴이었어요. Abstract로 디자인 파일 버전 관리를 하거나 머터리얼 디자인 라이브러리를 레퍼런스 삼아 복잡한 UI Kit을 구축하면서 스케치는 감당할 수 없는 렉과 오류로 참을 수 없는 수준까지 불만족을 가져오기도 했어요.

동시에 매년 UX Tools의 디자인툴 서베이에서는 피그마의 투표율이 점점 올라가고 있었는데요. 저도 스케치를 좋아하면서도 문제점에 대해 깊이 알고 있었던지라 이때부터 피그마라는 툴은 어떨지 비교하면서 사용하기 시작했어요.

제가 느꼈던 ‘피그마가 스케치를 넘어선 순간’은 두 가지 지점이었어요. 플러그인 기능을 도입하고, 커뮤니티가 출범했던 버전 이후부터 저는 이미 ‘이 순간부터 스케치의 시대는 끝이 났다’라고 확신했습니다. 그 당시가 아마도 2019년도 후반쯤이었던 것으로 기억하는데요. 아니 웬걸? COVID가 전 세계적으로 확산되는 시기와 맞물리게 되네요?

COVID를 기점으로 피그마의 핵심 기술인 Multiplayer Collaboration이 빛을 발휘하면서, 우리나라를 포함한 전 세계적으로 피그마 물결을 타기 시작하게 됩니다. (우리나라는 OS 디펜던시가 없는 것도 한 몫했어요. 스케치는 Mac에서만 가능했었거든요 ㅋㅋ)

스케치에 있는 컴포넌트 기능도 있겠다, 플러그인까지 있네? 아니 구글독스처럼 동시작업이 가능해? 게다가 커뮤니티를 통해서 다른 사람 작업까지 불러올 수 있다고? 이건 윈도우에서도 돌아가네? 안 쓸 이유가 없는 것이죠.

그렇게 피그마는 정상에 우뚝 서게 되었어요.

정상에 서서

피그마는 경쟁자가 따라올 수 없을 정도로 압도적인 기술이 기반이 되었고, 굉장히 성실한 조직(?)이어서 업데이트 주기도 매우 빨랐어요.

스케치가 멀티플레이어 기능을 어설프게 따라해도, 근본적으로 Rust와 WebAssembly으로 만들어졌기 때문에 디자이너가 작업함에 있어 캔버스에 그리는 Response Time을 기하급수적으로 줄인 피그마의 퍼포먼스를 스케치는 따라 할 수 없었어요.

더불어 성공해 나가는 비즈니스에 두 번째 폭탄이 하나 더 빵 터지니, 그게 바로 피그잼이었어요. 지금으로부터 딱 2년 전에 업데이트된 이 기능은 기존 브레인스토밍툴 Miro를 대체하면서도 피그마 디자인 파일과는 호환성이 매우 좋은 ‘비디자이너들을 위한 선물’ 같은 기능이었어요.

저는 사실 이때, Config를 기다리면서 피그마가 이번에 디자이너와 개발자를 잇는 큰 거 한방을 가져올 것이라고 예측하고 있었거든요. 사실은 정반대였어요. 피그마는 더 Brainstorming하거나 Ideate할 수 있으며, 누구나 이야기할 수 있는 기회를 마련하는, 그야말로 ‘프로덕트를 사랑하는 모든 이가 참여할 수 있는 장’을 만들 생각을 했던 거예요. (망치 꽝~!)

그렇게 피그마는 정점을 찍고 우리 곁을 떠납니다 (안녕). 아시다시피 어도비에게 인수가 되죠. 어도비에게 인수당한 피그마는 앞으로 어떻게 될까요?

The Future of Figma

여기서부터는 저의 (합리적인 의심에 기반한) 뇌피셜입니다. 제가 준비한 피그마의 로드맵에는 여러 가지 멀티버스가 있는데요. 그중에서 두 가지 멀티버스를 말씀드려보겠습니다.

with AI Assistant

예상하신 분들도 계실 텐데요. 지금은 대 AI시대라고 해도 무방할 만큼, 모든 프로덕트에 AI가 붙고 있죠. GPT는 나날이 발전하고 있고, 이와 관련한 피그마 플러그인도 점점 생겨나고 있습니다.

Generative AI 관련하여 처음 접한 건 2020년 Jordan Singer(전 CashApp Developer, 현 Diagram Founder)의 GPT-3을 이용한 피그마 플러그인이었습니다. 이걸 보고 나서, ‘아 이 사람 뭔가 하겠다’ 생각했는데, Diagram이라는 회사를 차리고 Genius와 같은 Generative design tool을 개발하고 있더라고요..

이와 비슷한 사례로 크로스플랫폼 앱개발 제작을 위한 FlutterFlow라는 디자인툴에서 AI를 활용한 Text-to-App 기능이 있어요. FlutterFlow는 Flutter 공식 유튜브에서도 종종 보이는데요. 지금은 아니지만, 이게 언젠간 한 건 할 것 같은 느낌이 들기도 하면서 피그마도 이와 같은 기능을 갖추리라 상상하게 됩니다.

AI는 디자인시스템에도 영향을 끼칠 여지가 존재하는데요. 그건 uizard라는 툴에서 찾아볼 수 있어요. uizard는 오래전부터 AI Powered Design Tool을 표방하면서 오랜 기간 기를 모으고 있는데요. 위에서 말한 Text to design는 물론이거니와 디자인시스템만 존재한다면 손스케치 이미지를 (디자인시스템에 기반하여) 디자인으로 변환시켜 주는 기능도 개발되어 있어요. 피그마라고 못할까요?

이렇게 피그마의 미래에 대해 AI 관련된 로드맵으로 멀티버스를 구성해 보았어요. text to design, 또는 sketch to design의 방향성으로 가능성을 펼쳐질 수 있을 것 같다는 것이 제 생각입니다.

Low Code/No Code Collaboration

제가 생각하는 또 다른 피그마 로드맵 멀티버스도 상당히 그럴듯한데요. 한번 재미 삼아 들어보세요 ㅋㅋㅋ..

Visly.app이라는 회사가 있었습니다. ‘Handoff 하지 마세요.’라는 슬로건을 달고 나온 회사예요. ‘아니 이게 무슨 말이야?’라고 생각되실 텐데요. 말 그대로 ‘디자이너가 개발자에게 핸드오프 하지 않고, 스타일이나 컴포넌트를 Production-Ready Code로 배포까지 가능하게 하자!’는 비전을 가지고 만들어진 회사였어요.

Visly의 포지션은 위 그림과 같아요. 피그마로부터 임포트 받으면 리액트 코드화된 디자인을 깃헙에 커밋&푸시하는 구조예요(디자인 수정 가능). 그러면 궁극적으로는 모든 개발자가 적어도 컴포넌트의 UI를 만드는 부분에 있어 수고로움을 덜 수 있고, 직접 UI레이아웃에 대한 변경권에 대해서만 디자이너가 PR을 올리기까지 할 수 있는 구조를 상상할 수 있게 되는 것이죠. (관련 영상 참고)

물론 이에 따라 개발자만큼의 이해도와 커뮤니케이션이 따르기 때문에 보이지 않았던 업무 및 스트레스가 가시화되는 부분은 피할 수 없게 되리라 생각됩니다. 이런 부분 때문에라도 기능적인 구현이 되었을지라도 사람 간의 커뮤니케이션 이슈로 실현가능성이 낮다고 생각은 들어요.

제가 왜 visly 이야기를 꺼내냐고요? visly는 2020년 경 피그마에 인수가 되었습니다. visly.app 링크는 피그마로 리다이렉트가 되고 있고요, 아래에 창업자 Emil을 포함하여 사이좋게 작업하는 모든 팀원들은 사이좋게 피그마 직원이 되었네요. 링크드인으로 확인해 보았는데, 아직까지 몇 년간 피그마에 있는 것을 보니 피그마 어느 골방에서 작업을 하고 있을 거예요..

이들은 피그마를 위해 무엇을 만들길래 자신들의 프로덕트를 먼지처럼 세상 속에서 사라지게 하고 지금까지 꿋꿋하게 일을 하고 있을까요? 저는 아마 그들이 실현시키고자 했던 비전을 피그마에서 꿈을 펼치는 게 아닌가라는 생각을 자꾸만 하게 되고, 매년 Config에서 이와 관련된 소식이 언제 나올지만을 기다리고 있어요. 5년 내로 나오지 않을까..라는 개인적인 추측만 하게 되네요 ㅎㅎ..

마치며

피그마의 과거와 현재, 그리고 제가 생각하는 멀티버스 미래까지.. 어떠셨나요..? 시간 날 때 재미로 봐주세요 ㅎㅎ.. 저는 그런 생각을 해요. ‘미래는 어찌 되었건 이렇게 저렇게 고도화되는데, 우리들은 그에 발맞춰서 변화해가고 있는가?’ ‘변화하지 않고 멈춰있다면, 나는 어떻게 될까’라는 걱정과 성찰을요. 여러분들도 한 번쯤은 생각해 보시면 좋을 것 같네요. 이 글이 그렇게 가볍게 느껴지지만은 않기를 바라며.. 그럼 안녕~!

참고자료

Figma CEO Dylan Field on crucial moments in Figma's creation, overcoming SaaS burnout & more, This Week in Startups Youtube

[https://www.youtube.com/watch?v=ds1bEXK5G9g]

스큐어모피즘부터 뉴모피즘까지 스마트폰 UI의 역사, 서점직원

[https://brunch.co.kr/@fbrudtjr1/41]

Dylan Field pitches seed-stage Figma to Daniel Gross, Pioneer Youtube

[https://www.youtube.com/watch?v=C1UUVdN3kdQ]

Meet us in the browser, Dylan Field

[https://www.figma.com/blog/meet-us-in-the-browser/]

Rust in Production at Figma, Evan Wallace

[https://www.figma.com/blog/rust-in-production-at-figma/]

WebAssembly cut Figma’s load time by 3x, Evan Wallace