Figma Config 2025 참관기: 디자인 도구에서 제품 협업 플랫폼으로

샌프란시스코의 나른한 날씨 속 Moscow Center

 

들어가며

안녕하세요. 케이뱅크 코어디자인팀에서 디자인 시스템을 운영하고 있는 조예문입니다. 저희 팀은 케이뱅크의 핵심 제품인 홈, 이체, 그리고 디자인 시스템의 UX 디자인을 개선하고 있습니다.

 

저는 올해 5월, 케이뱅크의 도움을 받아 제품 디자이너의 축제 Figma Config 컨퍼런스에 다녀왔는데요. Figma를 모르시는 분 들을 위해서 우선 소개하지면, 이 제품은 디자이너들이 웹 브라우저에서 함께 디자인 작업을 할 수 있게 해주는 도구입니다. 마치 구글 독스에서 여러 사람이 동시에 문서를 편집하듯이, 디자이너들의 실시간 협업을 도와주고 있죠.

 

이번 컨퍼런스에서 Figma는 놀라운 변신을 선언했습니다. 이번 발표를 통해 Figma는 더 이상 디자인만 하는 도구가 아니라, 실제 작동하는 제품을 만드는 플랫폼으로 나아가려는 방향성을 엿보았어요.

 

소프트웨어는 어떻게 만들어질까?

본격적인 이야기에 앞서, 혹시 소프트웨어를 어떻게 만드는지 알고 계신가요?

 

1. 기획자가 "무엇을 만들까?"를 정합니다
2. 디자이너가 "어떻게 보일까?"를 그립니다
3. 개발자가 "실제로 작동하게" 만듭니다

각 단계마다 전문가가 필요하고, 서로 간의 소통과 조율에 많은 시간이 걸립니다. 마치 건축에서 설계도를 그리는 사람과 실제로 짓는 사람이 다른 것처럼요. 그런데 Figma를 사용하면 이제 모든 과정을 한 사람이 전담할 수 있습니다.

 

네 가지 도구로 바뀌는 일하는 방식

 

Dylan Field의 키노트에서 Figma는 네 가지 신제품(Draw, Buzz, Site, Make) 을 발표했습니다. 이는 단순한 기능 추가가 아니었습니다. 이는 Figma가 디자인 단계를 넘어 제품의 Pre-Production 전체 과정을 아우르는 플랫폼으로 변화하고 있음을 보여주는 신호였어요. 

Figma의 Co-founder, Dylan Field가 Figma의 새로운 제품을 소개하고 있다

1. Figma Site: 클릭 한 번으로 웹사이트 만들기

 

지금까지는 디자이너가 예쁜 그림을 그리면, 개발자가 그것을 보고 코드로 다시 만들어야 했습니다. 마치 건축 도면을 보고 실제 건물을 짓는 것처럼요. 이 과정에서 디자이너의 의도가 100% 구현되기 어렵고, 시간도 오래 걸렸습니다.

그런데 이제는 디자이너가 Figma에서 만든 디자인을 버튼 하나만 누르면 실제 웹사이트가 됩니다. 주소(URL)가 생기고, 누구나 들어가서 클릭하고 사용할 수 있는 진짜 웹사이트가 되는 거죠.

예를 들어, 카페 사장님이 웹사이트를 만들고 싶다면? 예전에는 디자이너에게 디자인을 의뢰하고, 개발자에게 제작을 의뢰하고, 호스팅 업체에 서버를 임대해야 했습니다. 이제는 Figma에서 직접 디자인하고 "배포하기" 버튼 한 번에 바로 공개할 수 있습니다.

 

2. Figma Make: AI가 도와주는 인터랙션

 

Figma Make는 더 놀랍습니다.

"회전하는 3D 지구본을 만들어줘"라고 말하면, AI가 실제로 돌아가는 지구본을 만들어줍니다. "스크롤하면 글자가 서서히 나타나게 해줘"라고 하면, 그런 효과가 자동으로 추가됩니다.

이전에는 이런 효과를 만들려면 JavaScript라는 프로그래밍 언어를 알아야 했습니다. 하지만 이제는 일상적인 언어로 원하는 것을 설명하기만 하면 됩니다. 마치 동료에게 일을 전달하듯이 AI에게 요청하면 되는 거죠.

 

3. Figma Draw: 전문가급 인러스트레이션

Figma Draw는 Adobe Illustrator 같은 전문 일러스트 도구의 기능을 Figma 안에 통합했습니다. 로고를 만들거나, 복잡한 일러스트를 그리는 것이 가능해졌습니다. 그 외 아래와 같은 정말 많은 기능이 Figma Design에 통합되었습니다.

Combine, Lasso 등을 활용한 정교한 벡터 편집
Repeater로 특정 오브젝트를 반복적으로 배치
Text on a path, Texture로 자연스러운 굴곡 제공
Progressive blur로 자연스러운 블러 효과 추가
Dynamic Stroke로 Ziggle 효과 추가
Pattern Fill, Variable Width Stroke, Texture Effect 외 다양한 기능 추가

4. Figma Buzz: 마케팅의 자동화

 

Figma Buzz는 반복적인 디자인 생산 작업을 자동화합니다. 예를 들어 100개의 제품 배너를 만들어야 한다면? 엑셀 파일에 제품명과 가격을 넣으면 자동으로 100개의 배너가 생성됩니다.

 

과거에는 디자인이 개발 전 단계의 청사진 역할을 했다면, 이제 사용자들은 더 빠른 피드백을 원합니다. 아이디어가 실제로 작동하는지, 사용하기 편한지를 '디자인 단계'에서 미리 확인하고 싶어합니다. 이런 변화는 필연적으로 디자이너의 역할 확장을 요구합니다. 단순히 보기 좋은 화면을 만드는 것이 아니라, 실제로 작동하는 프로토타입을 필요로 하고 있습니다.

 

왜 이것이 혁명적인가?

AI 시대 이전의 MVP(Minimum Viable Product) 개발을 생각해봅시다. 최소한 네 명이 필요합니다:

 

1. 기획자: 요구사항 정의와 우선순위 결정
2. 디자이너: UI/UX 설계와 비주얼 디자인
3. 프론트엔드 개발자: 사용자 인터페이스 구현
4. 백엔드 개발자: 서버와 데이터베이스 구축

각자의 전문성은 분명하지만, 커뮤니케이션 비용은 기하급수적으로 증가합니다. 회의, 문서화, 피드백, 수정... 이 과정에서 원래의 아이디어는 희석되고, 제작 시간은 길어져요.

 

회전목마 기능을 Figma Make로 제작하고 있는 Chad Bergman

 

하지만 Figma의 새로운 도구들을 이용해봅시다. 이제 한 사람이:

 

1. Figma에서 화면을 디자인하고
2. Make로 인터랙션을 추가하고
3. Site로 배포하여 실제 사용자 피드백을 받을 수 있습니다.

이것은 단순히 효율성의 문제가 아닙니다. 아이디어에서 실행까지의 거리가 극적으로 단축되면서, 더 많은 실험이 가능지고, 실패에 따른 비용도 아주 많이 낮아집니다.

 

실리콘밸리 한국 디자이너들이 말하는 현장의 변화

실리콘밸리의 한국 디자이너분들의 이야기는 이런 변화가 이미 현장에서 일어나고 있음을 보여주고 있어요.

 

캘리포니아의 한인 디자인 그룹, Bay Area K Group 모임

 

"프로토타입의 의미가 완전히 바뀌었어요. 예전에는 '이런 느낌입니다'를 보여주는 수준이었다면, 이제는 '이렇게 작동합니다'를 보여줄 수 있습니다. Figma Make를 통해서요."

Jason Kim, Product Designer in Figma

"모든 디자이너가 SUPER IC(Individual Contributor)가 되어야 합니다. 단순히 화면을 설계하는 사람이 아니라, 제품을 만드는 사람이 되어야 해요."

Kyo Kim, Director of Product Designer in GlossGenius

 

추가로, 엔지니어 직군은 제품 프로토타입에 더 많은 것을 요구하고 있었습니다.

"저는 이제 AI를 활용해 풀 프로덕트 프로토타입을 만듭니다. 단순한 클릭 더미가 아니라, 실제 데이터를 연동하고 사용자 행동을 추적하는 수준까지요. 2개월 앞선 로드맵을 프로토타입으로 만들어두고, 사용자 테스트를 통해 검증합니다. 실제 개발에 들어가기 전에 이미 제품의 성공 가능성을 알 수 있는 거죠."

David Lee, AI UX Engineer in Google

 

이것이 우리에게 의미하는 것

앞으로는 '나는 디자이너야', '나는 개발자야'라는 구분이 희미해질 것입니다. 대신 '나는 OOO 제품을 만드는 사람이야'라는 정체성이 중요해지겠죠. 이미 소프트웨어 업계에서는 Maker라는 단어가 익숙해지고 있습니다. 기술적 장벽이 낮아지면서, 아이디어만 있다면 누구나 서비스를 만들어볼 수 있게 됩니다. 음식점 사장님이 직접 예약 시스템을 만들 수도 있고, 선생님이 교육 앱을 만들 수도 있습니다. 그렇다면 앞으로의 디자이너는 어떻게 제품에 기여하게 될까요?

Craft의 가치: 도구가 발전해도 변하지 않는 것

Crafting quality that endures, Karri Saarinen, Co-founder of Linear

 

최근 실리콘밸리에서 이슈 트래킹 툴을 혁신하는 Linear의 co-founder, Karri Saarinen의 클로징 키노트는 중요한 균형점을 제시했어요.

"제품 자체에 집중했기 때문입니다. 사용자가 진짜 필요로 하는 것을 깊이 이해하고, 그것을 가장 우아한 방식으로 해결했죠. 도구가 아무리 발전해도, 무엇을 만들 것인가와 왜 만들 것인가는 여전히 인간의 영역입니다."

Linear의 co-founder, Karri Saarinen

 

Linear는 마케팅 비용 없이 2년 만에 수익을 창출하고, 4년 만에 1만 개 이상의 유료 구독을 달성하였습니다. 사용자가 정말로 필요로 하는 영역을 끊임없이 파헤쳤기 때문입니다.

이것은 중요한 시사점을 던집니다. Figma, 그리고 AI를 기반으로 한 새로운 도구들이 '어떻게(How)'를 혁신한다면, '무엇을(What)'과 '왜(Why)'는 여전히 우리가 답해야 할 질문으로 아직 남아있습니다.

 

Code의 가치: 디자인과 코드와의 간극을 좁히다.

디자인과 코드의 간극을 한 눈에 설명하고 있는 Carmen Ansio, Design Engineer of LottieFiles

 

과거의 코드는 개발자를 제외한 직군에게는 매우 어려운 분야였습니다. 하지만 이제는 다릅니다. Figma의 Plug-in, LottieFiles를 이용해 인터렉티브 경험을 누구나 쉽게 사용자에게 전달할 수 있습니다. 예전에는 움직이는 나비의 날개짓을 보여주기 위해서라면 최소 두 명(디자이너, 개발자)를 거쳤다면, 이제는 Figma에서 나비의 각 대표 씬을 만들기만 하면 바로 출시가 가능합니다.

 

GitHub Primer 팀의 사례는 또 다른 흥미로운 지점을 보여주었습니다. 그들은 Figma의 Code-Connect 기능을 활용해 디자인 시스템과 실제 코드 간의 간극을 좁히고 있었습니다.

"예전에는 Figma의 디자인 토큰과 실제 코드의 변수가 따로 놀았어요. 스프레드시트로 매핑 테이블을 관리하는 수준이었죠. 하지만 Code-Connect를 도입한 후, 30분 만에 디자이너도 기초적인 React 컴포넌트를 생성할 수 있게 되었습니다. 디자인 변경이 코드에 자동으로 반영되는 것은 물론이고요."

Lukas Oppermann, GitHub Staff Systems Designer

 

웹 환경에 도입된 OKLCH 컬러 시스템의 도입도 같은 맥락입니다. 5년 전 개발된 이 시스템은 컬러를 더 직관적이고 안전하게 다룰 수 있게 해줍니다. P3 색영역까지 지원하면서도, 접근성을 자동으로 보장합니다. 디자이너가 기술적 제약에 신경 쓰지 않고 창의성에 집중할 수 있게 하는 또 다른 예시입니다.

 

성찰: 더 쉬워진다는 것의 의미

제품을 만드는 것이 쉬워진다는 것은 무엇을 의미할까요?

 

1. 더 많은 실험이 가능해집니다. 실패의 비용이 낮아지니까요.
2. 더 본질적인 것에 집중할 수 있습니다. '어떻게' 만들지보다 '무엇을' '왜' 만들지에 집중할 수 있습니다.
3. 더 다양한 사람들이 자신의 아이디어를 실현할 수 있습니다.

하지만 동시에 경쟁은 더 치열해질 것입니다. 누구나 만들 수 있다면, 정말 좋은 것을 만들어야 살아남을 수 있으니까요.

 

마무리: 새로운 시대의 시작

Figma Config 2025는 단순한 제품 발표회가 아니었습니다. 소프트웨어를 만드는 방식 자체가 바뀌고 있음을 보여준 자리였습니다. 이제 2016년 '디자이너들이 함께 일할 수 있게 하자'는 비전으로 시작한 Figma가, 이제는 누구나 제품을 만들 수 있게 하자는 더 큰 비전을 향해 나아가고 있습니다.

이것이 가져올 변화는 이제 막 시작되었습니다. 여러분도 한번 상상해보세요. 만약 아이디어를 바로 실현할 수 있다면, 무엇을 만들고 싶으신가요?