빅테크들의 AI 발표가 휘몰아치고 난 후, 피그마의 Config 2024 발표도 역시 AI를 짜잔하고 내놨습니다. 빅테크 만큼의 범용성은 아니겠지만, IT 바닥에 계신 분들이라면 디자이너 뿐만 아니라 충분히 파급력이 큰 업데이트라고 생각합니다. Waitlist를 미리 걸어둔 사용자들은 지금도 사용해 볼 수 있습니다. 저는 아직인지라 이 또한 나중에 사용해보고 사용 경험에 대해 공유해 드리겠습니다.

이번 글은 피그마의 새로운 AI 기능과 피그마 슬라이드 기능을 살펴보면서, 생성형 AI와 디자인이 만나면 우리에게 어떤 영향을 미치게 될 지 정리해봤습니다. a16z의 아티클을 참고했습니다. 😎

 

🐥 이런 아싸이트를 드릴게요

• 디자인 프로세스에서 발생되는 어려움


• AI는 디자인 문제를 어떻게 해결해줄까


• Figma Config 2024 AI 업데이트 정리


• 1인 개발자의 시대가 왔다?


• 디자이너의 역할은 어떻게 변화될까


• PPT보다 좋은 피그마 슬라이드


• 피그마가 비디자이너를 끌어들이는 이유


• AI + UI의 미래 : Dynamic & Adaptive UI

 

---

디자인 프로세스에서 발생되는 어려움

디자인을 둘러싼 협업은 노이즈가 많습니다.

• "이 디자인대로 하려면 기술적으로 어려운데..."


• "여기에 화면을 하나 더 넣으면 안 될까요?"

창의적 교류를 꿈꾸는 과정은 지라 티켓으로 가득 차고, 시간은 흐르고, 계속 삽질하고 타협합니다. 디자이너의 비전과 개발자의 실행 사이의 괴리로 귀결되곤 합니다. 결과적으론 개발 일정은 자꾸 밀리고, 디자이너의 의도와 개발된 결과물 사이엔 차이가 생기는 거죠.

이상적인 협업은 뒤를 보지 않습니다. 디자이너와 개발자가 수시로 피드백을 주고받으면서 디자인을 발전시켜 나가는 모습이에요.

 

허나 현실이 그렇던가요.

디자이너가 열심히 그린 디자인이, 개발하고 나면 생각만큼 잘 안 나오는 거죠. 화면에 보이는 것과 실제 동작하는 게 다를 때가 많거든요. 디자인과 코드 사이의 간극을 메우는 데 많은 시간과 에너지를 소비하게 됩니다.

특히 기능이 복잡하거나, 예외 케이스를 가지고 있다면 이 문제는 더욱 악화되는데요. 디자이너가 스크린샷을 통해 모든 가능성을 미리 그려내기가 어렵기 때문입니다.

예를 들어 장바구니에 물건을 100개 넣으면 어떻게 보일지, 로그인할 때 비번을 다섯 번 틀리면 어떻게 할지 같은 것들이요.

그래서 기획/디자인 단계에서 해소되지 않은 문제들이 QA나 테스트를 하는 과정에서 문제가 드러납니다. 그러면 디자인을 또 수정하고, 개발을 또 하고... 몇 단계를 뒤로 돌아가는 일이 부지기수인거죠.

 

다행히 지난 10년간 기술이 많이 발전하면서, 디자인 협업에 대한 문제들이 많이 해소되긴 했습니다.

• 포토샵 대신 피그마 같은 브라우저 기반 디자인 도구를 쓰기 시작하면서, 포토샵/일러가 없는 개발자들도 디자인 파일을 바로 브라우저에서 열어볼 수 있게 되었어요.


• Next.js, Flutter, shadcn/ui, Tailwind 같은 최신 프레임워크와 라이브러리들이 나왔어요. 덕분에 디자인에 맞는 UI 컴포넌트를 바로 가져다 쓸 수 있게 되었고, 훨씬 쉽고 빠르게 개발할 수 있게 되었죠.

 

그리고, 이제 생성형 AI 툴까지 가세했습니다. 피그마를 비롯한 AI 디자인 솔루션이 실무단의 이런 현실적인 문제를 많이 해결해 줄 수 있지 않을까 기대하는거죠.

빠르게 프로토타입을 만들고, 코드도 알아서 제안해주지 않을까?

AI 디자인 툴이 꽤 나왔었지만, 그렇게 만족스러운 퀄리티를 가진 서비스는 찾기 어려웠던게 사실입니다. 그리고 이제 피그마에 AI가 붙어서 이 분야에서는 생태계 파괴자가 나오게 된거죠.

 

QA에서 이슈가 발견되면, AI한테 "여기 장바구니에 물건 100개 담겼을 때 UI 좀 만들어줘봐" 하고 요청할 수 있겠죠. 그러면 AI가 알아서 디자인 시안을 내놓고, 거기에 맞는 코드도 뚝딱 만들어 줄 거예요. 개발자는 그걸 바탕으로 빠르게 수정하면 되는 거죠.

디자인 to 개발, 개발 to 디자인으로 돌아오는 과정이 엄청 빨라질 수 있어요. 디자이너와 개발자 사이의 소통도 훨씬 쉬워지고요.

물론 AI가 만든 결과물을 100% 그대로 쓸 순 없겠지만, 적어도 80% 정도는 커버가 되어도 성공입니다. 나머지 20%는 디자이너와 개발자가 직접 손보면 되는 거죠. 그렇게 되면 전체적인 개발 기간과 비용도 많이 줄일 수 있습니다. 지금처럼 회의하고, 시안 그리고, 개발하고, 테스트하고... 이런 과정을 몇 달씩 반복할 필요가 없어지는 거죠. 실제 디자이너, 개발자의 역할은 AI가 만들어준 결과물을 감수하고 다듬는 쪽으로 바뀌지 않을까 싶네요.

 

AI는 디자인 문제를 어떻게 해결해줄까

디자인의 프로세스를 3단계로 나눠서, 생성형 AI가 어떻게 문제를 해결하는 지 한번 살펴보겠습니다.

1. Design Generation


2. Design to Code


3. Code Generation

 

1. Design Generation

 

피그마 AI를 써보고 싶었지만, 아직 사용이 안되는 관계로, 아쉬운대로 Galileo AI라는 서비스를 통해서 한번 제가 진행 중인 사이드 프로젝트인 "AI 타로앱"에 대한 시안을 만들어보라고 했습니다.

당연히 결과로 쓰일만한 레벨은 아니지만, 초창기 아이디에이션을 하기에는 나쁘지 않았습니다. 빨리 아이데이션을 할 수 있다보니, 어떤 방식이 더 좋을 지, 혹은 나쁜지 이것 저것 발산하면서 조금씩 길을 찾아갈 수 있더라구요. 피그마로 불러올 수도 있구요.

"빈 캔버스"에서 갈 길을 잃은 저같은 디자인 뉴비들에게는 엉성한 디자인도 도움이 됩니다.

숙련된 디자이너들의 경우는 어떨까요?

디자인 고수들은 디자인할 제품 기능에 대해 듣자마자 머릿속에 몇 가지 컨셉을 가지고 있는 경우가 많습니다. 그 다음부터는 동료들과 의견을 주고받으면서 생각한 구상을 조율한 다음에 픽셀 단위까지 조정한 파이널 목업을 제작하게 되는데요. 코딩에 능숙한 일부 디자이너들은 디자인 목업을 건너뛰고 대신 코드로 디자인을 구현하기도 합니다.

AI가 여기에 개입되면 디자이너가 머리속에 떠올린 상상을 회의자리에서 바로 구체적인 그림으로 표현하고 조율하는 과정까지 원스톱으로 해결할 수 있습니다. 그 과정에서 생각을 더 구체화하고, 피드백을 주면서 디자인을 전보다 더 빠르게 다듬을 수 있죠. AI가 제안한 예시 중에 디자이너가 미처 떠올리지 못했던 좋은 아이디어가 있을 수도 있구요. 

피그마에서 픽셀을 조절하는 등의 일을 쓰는 시간에 예외 케이스나, 경험적으로 더 좋은 방식을 탐구하는 데 더 많은 시간을 쓸 수 있습니다.

 

2. Design to Code

디자인을 코드로 옮기는 과정이 아무래도 가장 어려운 단계라고 볼 수 있을텐데요. 마치 한 언어에서 다른 언어로 번역하는 것과 같죠. 디자인과 개발은 너무 다른 언어를 구사하기 때문에 변환되는 과정에서 늘 무언가가 어긋나거나 없어지기 마련입니다.

생성형 AI 모델은 다양한 데이터셋을 학습하고 파인튜닝하면서 프로그래밍 언어, 디자인 원칙, UX 가이드라인에 대한 복잡한 이해를 발전시켜 왔습니다. Tailwind와 같은 UI 템플릿과 프레임워크를 적용하는 LLM의 능력과 결합하면서, 그래서 이제 AI가 보기에도 좋고 실제로도 잘 작동하는 UI를 만들어낼 수 있게 된 거예요. 단순히 디자인을 코드로 기계적으로 옮기는 게 아니라, 최신 트렌드와 모범 사례들을 반영하고, 기존 프레임워크를 활용하면서 스마트하게 변환하는 거죠.

그런데 개발자 입장에서는 궁금할 거예요.

과연 AI가 겉모습만 비슷하게 만드는 걸까, 아니면 기능적인 부분까지 제대로 구현해 줄까?" 

현재로서는 대부분의 AI 디자인 솔루션이 시각적인 스타일 복제로 흉내 내는 수준입니다. 

하지만 앞으로 Clerk처럼 인증, 결제 등 특정 기능을 제공하는 컴포넌트 기반 서비스들이 더 발전하고, Devin 같은 AI 코딩 어시스턴트가 널리 쓰이면, 디자인을 온전한 앱으로 만드는 것도 점점 쉬워질 거예요. 특히 문제가 잘 정의되어 있거나, 보편적인 UI 요소를 포함한다면, AI 모델을 파인 튜닝해서 활용할 수도 있겠죠.

인증, 사용자 관리, 이메일 전송, 알림, 문서화, 차트 표시와 같은 사용 사례는 대부분의 비즈니스 애플리케이션에서 공통적으로 들어가는 요소일텐데요. Clerk, Mintlify, Knock, React Email(Resend), Tremor와 같은 툴들이 이런 기능을 모듈화해서 제공하고 있어요. AI 모델이 모듈화된 표준 컴포넌트들을 활용한다면 디자인과 밀접하게 연계된 UI는 물론, 백엔드까지 함께 만들어낼 수 있을 거예요.

예를 들어 쇼핑몰 앱을 만든다고 해볼게요.

• 디자이너가 상품 목록 화면을 시안으로 그려서 AI에게 주면,


• AI는 그걸 보고 Tailwind 같은 UI 프레임워크를 사용해 HTML/CSS 코드를 뚝딱 만들어 낼 거예요.


• 여기에 Clerk로 로그인 기능을 붙이고, Knock으로 구매 알림을 보내고, Tremor로 판매 통계 차트를 그려주는 식이죠.


• 각 화면을 위한 API까지 만들어서 백엔드랑 연결해 주면, 거의 완성에 가까운 앱이 나오는 셈이에요.

물론 아직 어설프겠지만, 이런 흐름이 바로 AI 시대의 앱 개발 방식이 되지 않을까 싶어요. 디자이너와 개발자가 각자 따로 일하는 게 아니라, AI를 매개로 긴밀하게 협업하는 겁니다.

 

3. Code Generation

디자인 시안과 실제 구현된 결과물은 똑같기 어렵습니다. 정적인 그림만으로는 최종 디자인이 어떤 모습일지, 어떻게 움직일지 다 표현할 수 없거든요. 그래서 개발자가 디자인을 코드로 옮길 때는 디자인에 없는 부분을 채우면서 나름의 해석을 하게 됩니다.

• 이 버튼을 누르면 어떤 화면으로 넘어가는 게 자연스러울까?


• 데이터가 없을 때 이 화면은 어떻게 보여줘야 할까?"

이런 어려움 때문에 많은 팀들이 처음부터 코드로 디자인을 하는 방법을 선택하는데요. 특히 대화형 요소가 많은 앱이나 아이디어를 빠르게 실험해봐야 하는 경우에는 더욱 그렇습니다. 디자인 시안 없이 바로 코드로 프로토타입을 만들어 보는 거죠. "일단 만들어보고, 고객 반응을 보고, 수정하고, 또 만들고..." 

당연하게도 이런 방식은 꼼꼼하고 체계적이진 않아요. 스타트업이나 개발자 도구처럼 속도가 생명인 경우에 어울리죠. 여기서 AI가 도움이 될 수 있어요. 디자인 과정을 일부 생략하는 대신, 기존에 만들어 둔 컴포넌트들을 재활용해서 훨씬 빠르게 프로토타입을 만들 수 있거든요.

가령 로그인 기능이 필요하다면, 디자이너가 로그인 화면을 일일이 그리지 않아도 됩니다. 개발자가 AI에게 "Clerk 라이브러리 쓰는 로그인 화면 만들어줘" 하고 주문하면 AI가 알아서 관련 코드를 생성해 주는 식이에요.

물론 아직 개발 중인 기술이라 완벽하진 않아요. "과연 디자인 시안 없이 AI가 바로 코드를 짤 수 있을까?" 하는 의문도 있고요.

하지만 지금 개발되고 있는 코드 변환 서비스(V0, MagicPatterns, RapidPages)들의 발전을 보면, 희망이 보이기도 합니다. 디자이너가 간단한 스케치나 지시 사항만 주면 AI가 그걸 바탕으로 실제 동작하는 코드를 뚝딱 만들어 주는 거죠.

V0의 경우, "햄버거 메뉴 버튼을 누르면 사이드바가 나오는 레이아웃을 만들어줘"라고 요청하면 AI가 그에 맞는 React 컴포넌트 코드를 생성해 줍니다. 개발자는 그걸 토대로 빠르게 앱을 완성할 수 있는 거죠.

 

Figma Config 2024: AI 업데이트 정리

디자인 과정이 가지는 문제점과 해결을 숲으로 살펴봤으니, 드디어 나무를 봅시다. 

이번 피그마 컨퍼런스 Config 2024에서는 CEO인 Dylan Field가 직접 실시간으로 기능을 시연해보였는데요. 텍스트로 실시간으로 목업 디자인을 그리고 수정하는 과정을 연결성 있게 보여주면서 "이게 근본이다"라는 느낌을 많이 주었습니다. 실시간으로 데모를 보여준다는 것은 구현에 대한 자신감이구요. 과반수의 디자이너들이 현업에서 사용하고 있는 툴이니만큼, 실제 디자이너들의 피드백을 잘 수렴해서 디자인 프로세스에서 필요한 부분을 잘 짚었습니다.

1. Make Design : 프롬프트로 디자인

텍스트 프롬프트를 입력하면 기본 디자인 레이아웃을 생성해주는 기능입니다.

프롬프트: A pizza finder app with a map and a card for a selected restaurant

데모에서는 피자 찾기 앱을 디자인 해달라는 프롬프트를 보여주는데요. 지도, 카드와 같은 기본적인 요구사항을 함께 입력하자, 프롬프트에 맞는 레이아웃을 만들어주고, 목업 이미지에 맞는 이미지도 AI로 생성해주는 것을 확인할 수 있습니다.

프롬프트: Add a contact form before the footer

물론 이미 있는 디자인에 대한 수정도 프롬프트로 할 수 있습니다. 피그마에서 요소를 선택하고 Footer 위에 연락처폼을 넣어달라고 하니, 원 디자인의 톤앤매너에 맞춰서 연락처 폼을 삽입해줍니다.

이 기능의 주요 효과는 '빈 캔버스 증후군'을 해소해서 디자인 프로세스의 초기 단계를 크게 가속화하는 것입니다. 금방 다양한 디자인 아이디어를 빠르게 탐색할 수 있구요. 창의력은, 질보다 양이니까요.

피그마가 이 기능을 도입한 이유는 디자이너의 창의적 과정을 지원하고, 비디자이너들의 디자인 접근성을 높이기 위함입니다. 또한, 초기 아이디어 구체화 속도를 높여 전체적인 디자인 프로세스의 효율성을 증대시키고자 했습니다.

대부분의 경우 아이디어 구상 단계를 혁신할 수 있다며 긍정적인 반응을 보였습니다. 그러나 AI가 쉽게 디자인을 하면 AI에 과도하게 의존하게 되고 디자인의 획일화를 초래할 수 있다는 우려도 제기되었습니다. AI도 결국 사람이 만든 디자인을 데이터로 활용하는 것이다보니, AI 디자인이 보편화되면 디자인 퀄리티가 점점 하향 평준화 될 수도 있다는 것이죠. 초보 디자이너들의 기본기 습득을 방해할 수도 있구요.

 

2. Search for Similar : 이미지로 디자인 검색/불러오기

이미지로 디자인을 검색하고 불러올 수 있는 기능입니다. 디자이너들의 고충을 이해하고 생산성을 확실하게 올려줄 수 있는 기능이라고 할까요.

데모에서는 우버 앱의 스크린샷을 업로드하고 비슷한 레이아웃과 디자인 요소를 가진 여러 디자인을 찾아주는 모습을 보여줬습니다. 이 중에서 원하는 디자인을 캔버스에 바로 옮겨올 수 있구요. 또 간단한 동그라미에 십자가 모양의 아이콘을 스케치 했더니, 관련된 다양한 컴포넌트들을 순식간에 추천해줬습니다. 

이 기능의 핵심 효과는 디자인 프로세스의 효율성을 대폭 높여준다는 거예요. 실제 디자인 과정에서도 앱을 사용하면서 레퍼런스를 찾는 일이 정말 많으니까요. 그런데 스크린샷으로 피그마로 변환이 가능하다면 레퍼런스 검색이나 기존 디자인 요소 찾기에 들이는 시간을 획기적으로 줄여줄 수 있습니다. 뿐만 아니라 디자인 팀 내에서 만들어진 디자인 자산을 더 효과적으로 재활용할 수 있습니다. 결과적으로 디자이너들이 반복적인 작업보다는 창의적인 부분에 더 집중할 수 있게 될 거예요.

사용자들의 반응은 대체로 아주 긍정적이었습니다. 많은 디자이너들이 이 기능이 작업 시간을 크게 단축시켜줄 거라며 환영했죠. "이제 레퍼런스 찾는데 시간 낭비 안 해도 되겠다"라는 반응이 많았어요. "복잡한 컴포넌트를 처음부터 만들지 않아도 돼서 좋다"고 평가하기도 했고요.

 

3. Replace Contents : Lorem Ipsum은 안녕

기존의 사용자들이 외부 툴 / 플러그인을 사용해서 가능했던 영역을 피그마 공식 영역으로 끌어들이기도 했습니다. 생성형 AI로 디자인 요소에 들어가는 텍스트나 이미지를 적절하게 채워주는거죠. 실제로는 이 영역이 데이터가 반영되는 영역이다보니, 디자인 할 때는 크게 신경쓰기 어렵기도 합니다. Lorem Ipsum이 전통적으로 많이 들어갔었죠.

데모에서는 레시피 앱을 기반으로 컨텐츠(텍스트, 이미지)를 AI로 대체하는 케이스를 보여줬습니다. 요소를 그냥 선택하고 컨텐츠를 적절하게 채워주는 것은 물론이고, 리스트를 드래그를 하거나 여러개를 선택해서 한번에 채워주는 것도 가능합니다.

리스트를 드래그 할 때 맥락에 맞는 컨텐츠를 자동으로 채워주는 것은 특히 디자이너의 실무를 섬세하게 고민했다고 느껴졌습니다. 빠르게 실제 콘텐츠와 비슷한 퀄리티의 더미 데이터를 쉽게 만들 수 있게 되었으니까요. 특히 다국어 버전의 디자인을 만들 때 엄청난 시간 절약이 될 것 같아요.

이 기능의 경우, 챗GPT나 미드저니 등과 같은 외부 툴을 사용해서도 더미 데이터나 텍스트를 충분히 만들 수 있는 부분이라 놀랍다고 보긴 어려울 수있지만, 사용자들의 작업 흐름을 끊기지 않고 피그마 안에서 모든 것을 해결하게 만들 수 있다는 장점이 있습니다. 외부 도구를 오가며 작업하는 불편함을 없애고, 피그마 안에서 모든 걸 해결할 수 있게 만들어 사용자 경험을 크게 개선하는 거죠.

 

4. Rename Layers : 레이어 이름 자동 바꾸기

개인적으로도 가장 감탄했고, 디자인 실무자들도 가장 환영한 기능이 레이어 이름을 자동으로 바꿔주는 기능입니다. 레이어를 잘 정리하고는 싶지만, 사실 작업을 하다보면 레이어 이름은 작업의 우선순위로 밀려날 수밖에 없고, 레이어 수가 많아지면 필요할 때 맞는 레이어를 찾는데 어려움을 겪기도 하거든요.

레이어들을 선택하고 'Rename Layers' 버튼을 누르자 모든 레이어 이름이 정돈되었고, 현장에서는 박수 갈채가 쏟아졌습니다. 

예를 들어 'Rectangle 285'같은 기본 이름이 'Header Background', 'Profile Picture', 'Navigation Menu' 같은 직관적인 이름으로 바뀌는 겁니다. 버튼 안의 텍스트나 아이콘까지 인식해서 'Login Button', 'Settings Icon'와 같이 정확하게 이름을 지어서 레이어가 복잡해져도 찾기가 편해질겁니다.

레이어 이름이 정리되면 나만 좋은 것이 아닙니다. 협업할 때도 다른 사람이 만든 파일을 쉽게 이해할 수 있을 거예요. 레이어를 찾는 시간도 확 줄어들 테고, 결과적으로 전체적인 작업 효율이 올라갈 겁니다.

 

5. Make Prototype : 원클릭 프로토타입

지금까지 디자이너들은 프로토타이핑 작업에 많은 시간과 노력을 들여야 했습니다. 수십 개의 화면을 일일이 연결하고 각각의 인터랙션을 설정하는 데만 몇 시간, 때로는 며칠씩 걸리기도 했죠. 특히 클라이언트의 요구사항이 바뀌거나 새로운 아이디어가 나왔을 때 프로토타입을 수정하는 과정은 정말 번거로웠겠죠.

때문에 이번에 피그마가 선보인 Make Prototype 기능도 현장에서 박수 갈채를 받았습니다. 레시피 상세 페이지, 리뷰 작성 화면, 검색 기능, 사용자 프로필 등 여러 화면을 나열해 놓고 Make Prototype 버튼을 누르자, AI가 모든 화면을 알아서 자동으로 연결하고 적절한 인터랙션을 적용했어요.

특히 놀라웠던 점은 AI가 앱의 전체적인 구조와 사용자 플로우를 이해하고 있는 것처럼 보였다는 거예요. 레시피 목록에서 특정 레시피를 클릭하면 상세 페이지로 넘어가고, 리뷰 버튼을 누르면 리뷰 작성 화면이 모달로 뜨는거죠. 심지어 탭 전환, 스크롤, 뒤로 가기 같은 기본적인 인터랙션도 자동으로 적용되었습니다. 이는 디자이너가 일일이 설정해야 했던 작업들을 AI가 한 번에 처리해준 것입니다.

이렇게 되면 프로토타이핑에 들이는 시간을 대폭 줄일 수 있을 겁니다. 복잡한 앱이나 웹사이트도 몇 분 만에 기본적인 프로토타입을 만들 수 있으니까요. 이는 디자이너들이 더 많은 아이디어를 빠르게 테스트하고 검증할 수 있게 해줄 거예요. 무엇보다, 클라이언트나 팀원들과의 커뮤니케이션도 훨씬 수월해질 것 같아요. 아이디어를 설명하는 데 그치지 않고, 바로 작동하는 프로토타입을 보여줄 수 있으니까요.

 

1인 개발자의 시대가 왔다?

이번 피그마의 발표를 보면 디자인 영역에 구멍이 좀 있었던 저의 사이드 프로젝트 팀이나, 1인 개발자, 스타트업과 같은 작은 조직들은 이런 생각이 들 지도 모릅니다. 

디자이너 없어도 디자인 할만 하겠네

AI 프롬프트로 UI 디자인이 가능해지면서 디자인 경험이 부족한 사람들도 어느 정도 수준의 UI 디자인을 만들어낼 수 있게 된 것도 같습니다. 하지만 이것이 곧바로 완성도 높은 앱 개발로 이어진다고 보기는 어려울 것 같습니다.

아직까지 AI를 통한 디자인은 가장 보편적인 형태로 정형화된 템플릿을 조합하는 수준이기 때문입니다. 때문에 내가 만들 앱의 경험에 맞는 UI/UX를 기대하기는 어려운 상황입니다. AI로 생성된 디자인은 초안 정도의 역할은 할 수 있겠지만, 세부 요구사항을 반영하고 브랜드 아이덴티티에 맞게 다듬어 마무리하는 것은 여전히 전문 디자이너의 몫일 것입니다.

디자인은 앱 개발의 한 축일 뿐, 그 자체로 완성본이 될 수는 없습니다. 실제 개발로 이어지기 위해서는 사용자 조사, 인터랙션 설계, 프로토타이핑, 개발, 테스트 등 일련의 과정이 필요한데요. 이 모든 걸 초보자가 AI에만 의존해 진행하기란 결코 쉽지 않아 보입니다.

다만 이러한 한계에도 불구하고, 피그마같은 AI 디자인 도구의 잠재력과 파급력은 분명 주목할 만합니다. 제한된 리소스 하에서 최선의 프로덕트를 개발해야 하는 1인 개발자와 작은 조직에게 피그마의 AI 기술은 더없이 강력한 레버리지가 되어줄 것으로 기대합니다. 

우선 AI 기반의 디자인 생성 기능은 초기 컨셉 및 와이어프레임 작업에 상당한 시간을 절약해 줄 겁니다. 프롬프트 입력만으로 다양한 레이아웃과 UI 컴포넌트를 생성할 수 있게 되기 때문에, 아이디에이션 단계에서의 속도와 유연성이 크게 향상될 수 있습니다.

여기에 코드 생성 기능까지 완성도가 높아지면 디자인과 개발 사이의 간극이 해소되면서 보다 매끄러운 프로세스를 기대할 수 있습니다. 단순히 참고용 목업이 아닌 실제 코드로 연결되는 디자인 에셋을 확보할 수 있게 되는 것이죠. 개발 과정에서의 소통 비용과 불필요한 삽질을 줄여주는 효과가 있구요.

또한 Auto Layout, Variant, Interactive Component 등의 기능을 활용하면 디자인 시스템을 효과적으로 관리하고 확장해 나갈 수 있습니다. 향후 디자인 수정이나 기능 추가 시에도 일관성을 유지하면서 신속하게 대응할 수 있게 되는 것입니다.

물론 AI 생성 결과물을 100% 그대로 사용하긴 어려울 것입니다. 디자인 감각을 갖추고 도메인에 대한 이해를 바탕으로 방향을 제시하고 결과물을 다듬는 것은 여전히 디자이너와 개발자의 몫일 것입니다.

 

피그마 슬라이드: PPT 게섰거라

피그마 발표 이후에 AI기능 못지 않게 관심을 받은 것이 바로 피그마 슬라이드입니다. 기존에 디자인 협업 도구로 사용되던 피그마의 역할을 프레젠테이션과 커뮤니케이션 영역으로까지 확장하려는 시도인데요.

 

Config 2024에서는 작년 한 해 동안 무려 350만 개의 프레젠테이션 파일이 피그마 내에서 생성되었다는 점을 언급했습니다. 이미 많은 사용자들이 피그마를 단순한 디자인 툴 그 이상으로 활용하고 있던 현상을 포착한거죠. 

피그마가 본래 프레젠테이션 도구로 설계된 플랫폼은 아닙니다. 프레젠테이션툴로 설계되지 않았기 때문에 불편함도 상당했을 것입니다. PPT에는 기본인 발표자 노트같은게 없죠. 불편함이 존재함에도 불구하고 이미 많은 사용자들이 피그마를 단순히 디자인 툴 이상으로 활용하고 있다는 지점은 참 흥미로운데요. 이는 PowerPoint나 구글 슬라이드로는 채우기 어려운, 피그마가 가진 고유한 장점들 때문이라고 볼 수 있을 것 같아요.

• 피그마는 디자인 툴로서의 강점이 있기 때문에 시각적으로 매력적이고 브랜드 아이덴티티를 잘 반영한 프레젠테이션을 만들기에 용이합니다.


• 디자인 시스템과의 연동을 통해 일관성 있고 통일감 있는 자료를 제작할 수 있습니다.


• 다양한 플러그인과 리소스를 활용해 개성 있고 창의적인 자료를 만들어낼 수 있습니다.


• 실제 디자인과 인터랙션을 바로 녹여낼 수 있어, 생생하고 설득력 있는 프레젠테이션이 가능합니다.


• 위치까지 코멘트를 정확히 남기는 실시간 협업 기능이 협업에 용이합니다.

이런 이유로 특히 디자인 주도 조직이나 크리에이티브 산업 종사자들 사이에서 피그마가 프레젠테이션 도구로 각광받았을 것으로 보입니다.

피그마는 이제 피그마 슬라이드를 통해 프레젠테이션에 특화된 기능과 경험을 제공함으로써, 본인들의 장점을 강화하고 기존 사용자들의 니즈를 정조준 하려했습니다. 동시에 프레젠테이션만을 위해 피그마를 찾는 신규 사용자층도 유입할 수 있는 계기도 만들구요.

 

피그마 슬라이드 기능 요약

사실 저는 이번에 이 글을 쓰면서 피그마로 프레젠테이션을 만드는 사람이 많다는 것을 처음 알았습니다. 저는 이것 저것 써봐도 역시 PowerPoint만한게 없었거든요. 결국 돌고 돌아 순정의 마음이랄까요. PowerPoint 파워 유저 관점에서 이런 기능들은 피그마가 좋다! 라는 기능 몇개만 추려봤습니다.

 

# 실시간 코멘트 협업

실시간으로 위치를 찍고 코멘트를 남길 수 있습니다. 

# 쉬운 색상 변경

색상 테마를 바꾸면 텍스트나 도형 색깔을 알아서 바꿔줍니다.

# 디자인 테마 일관성 확보

프레젠테이션을 만들 때 여러 출처에서 슬라이드를 꺼내 조합하게 되는데요. 스타일이 다른 장표들을 한번에 같은 스타일로 바꿔주고, 색상도 바꿀 수 있습니다.

# 자동 전환 효과 / 애니메이션

개인적으로 가장 탐났던 기능입니다. 자동으로 적절한 애니메이션과 전환 효과를 넣어주는 건데요. PowerPoint에는 유사 기능으로 Morphing이라는 기능이 있었는데, 스마트하진 않아서 자주 쓰는 기능은 아니었는데, 피그마 스마트 애니메이션 기능은 좀 탐났습니다.

# AI 텍스트 톤 조정

장표에 AI로 텍스트 바꿔주는 것들은 이제 하도 많이 봐서 솔직히 신기할 것은 없는데요. 4분면 차원 그래프로 톤을 조정하는 것은 UX가 독특했습니다.

# 프로토타입 넣기

일반적으로 프레젠테이션에 앱 소개가 들어가면 영상을 만들어서 목업을 삽입했을 텐데요. 피그마 슬라이드에는 프로토타이핑 링크를 복사해서 넣으면 자동으로 삽입되고, 협업하는 다른 사람이 작동하게 할 수도 있습니다.

# 실시간 설문 조사

프레젠테이션을 하다 보면 가끔 청중에게 피드백을 받는 일들이 있는데요. 그 때 샤이한 청중들은 보통 아무말이 없습니다. 그래서 실시간으로 피드백을 받는 별도의 플랫폼들을 활용하기도 하는데요. 피그마 슬라이드에는 이런 실시간 설문 조사 기능을 기본 기능으로 탑재했습니다.

 

피그마 슬라이드 런칭의 전략적 의도

피그마가 피그마 슬라이드를 런칭한 전략적 의도는 '올인원 앱 개발 OS'이라는 비전을 구현하는 중요한 행보로 보입니다.

1. 디자인-개발-기획 전 과정의 통합 지원

• 앱 개발에 있어 디자인만큼이나 기획과 의사결정 과정도 중요한 영역입니다. 그 중심에는 프레젠테이션 도구가 있죠. 피그마 슬라이드는 디자인과 프로토타이핑은 물론, 이를 기반으로 한 기획안 발표, 피드백 수렴, 의사 결정 등 전 과정을 아우르는 도구가 될 수 있습니다.


• 피그마의 핵심 가치인 '콜라보레이션'이 프레젠테이션 영역까지 자연스럽게 확장되는 것이죠. 디자인-개발-기획이 하나의 플랫폼 안에서 유기적으로 연결되면서, 보다 효율적이고 통합적인 앱 개발 프로세스를 구현할 수 있을 것입니다.

 

2. 신규 고객 유치 및 락인(lock-in) 강화

• 프레젠테이션 솔루션을 제공함으로써 신규 고객을 유치하는 통로로 활용할 수 있습니다. 피그마 슬라이드를 사용하는 과정에서 자연스럽게 피그마의 다른 기능과 연계되는 경험을 하게 될 테니까요.


• 무엇보다 기획자, CEO, 마케터 등 새로운 피그마 고객층을 확보할 수 있다는 점이 주효할 것으로 보입니다. 한 번 피그마 생태계에 들어온 고객은 이탈하기 어려워질 테고, 이는 곧 락인 효과의 강화로 이어질 수 있을 것입니다.

 

3. 사용자 경험의 일관성 및 편의성 제고

• 피그마 슬라이드는 기존 피그마 사용자들에게 더욱 끊김 없는 경험을 제공할 수 있습니다. 익숙한 인터페이스와 기능들을 프레젠테이션에서도 그대로 사용할 수 있어 학습 비용을 최소화하고, 업무 효율을 높일 수 있죠.


• 또한 피그마에서 작업한 디자인 및 프로토타입을 프레젠테이션에 직접 활용할 수 있다는 점도 큰 장점입니다. 디자인-프레젠테이션 간의 연계가 매끄러워짐에 따라, 사용자 경험의 일관성이 한층 향상될 수 있을 것입니다.

피그마 슬라이드는 단순히 프레젠테이션 기능을 제공하는 데 그치지 않고, 앱 개발 전반을 아우르는 피그마의 플랫폼 전략을 가속화하는 핵심 수단이 될 것으로 보입니다. 디자인 협업을 넘어 기획과 의사 결정의 영역까지 아우르는 확장, 그리고 새로운 시장 잠재력의 발굴이라는 두 마리 토끼를 잡기 위한 피그마의 전략적 행보로 해석할 수 있을 것 같네요.

 

피그마가 비디자이너를 끌어들이는 이유

피그마에 AI가 붙은 것도, 피그마 슬라이드를 런칭한 것도 모두 디자인이라는 경계를 넘고 싶은 피그마의 야심이 드러난 것이라고 봅니다. 디자인툴 시장 1티어는 됐으니, 그 다음은 기업의 프로덕트 개발 프로세스 전반을 아우르는 플랫폼으로 거듭나고 싶은거죠. 디자이너뿐만 아니라 개발자, 기획자, 마케터 등 다양한 직군이 피그마를 활용하게끔 유인하면서, 전사적 협업 인프라로서의 입지를 공고히 하려는 것이죠.

피그마가 디자이너뿐만 아니라 개발자, 프로덕트 매니저 등 다양한 직군을 끌어들이려 하는 데에는 여러 전략적 이유가 있어 보입니다. 크게 세 가지 관점에서 살펴볼 수 있을 것 같네요.

#플랫폼 생태계 확장

• 피그마는 단순한 디자인 툴을 넘어, 앱 개발 전반을 아우르는 협업 플랫폼으로 거듭나고자 합니다. 디자인, 개발, 프로덕트 매니지먼트 등 전 영역에서 사용되는 툴로 자리매김함으로써 플랫폼으로서의 입지를 공고히 하려는 것으로 보입니다.


• 다양한 직군의 사용자를 확보할수록 피그마 생태계 내에서의 협업과 시너지가 활발해질 수 있습니다. 이는 곧 사용자 락인 효과로 이어져, 장기적인 관점에서 피그마의 경쟁력을 높이는 데 기여할 수 있습니다.


• 디자이너, 개발자, PM이 모두 피그마 내에서 소통하고 업무를 진행하게 되면, 자연스럽게 피그마 없이는 업무 자체가 어려워지는 상황을 만드는거죠.

 

#기존 고객 가치 제고

• 다양한 직군의 사용자를 아우를수록, 피그마가 제공하는 가치는 배가 될 수 있습니다. 디자인 관점에 국한되지 않고, 개발 및 프로덕트 관리 측면에서의 통합 솔루션을 제공할 수 있게 되는 것이죠.


• 이는 B2B 관점에서 기존 고객사에 더 많은 가치를 제안할 수 있다는 의미이기도 합니다. 디자인 혁신을 넘어 개발 효율화, 협업 향상, 의사결정 지원 등 종합적인 밸류 패키지를 통해, 고객사의 디지털 트랜스포메이션을 가속화하는 데 기여할 수 있을 것입니다.


• 피그마 입장에서는 이렇게 고객 가치를 높임으로써, 제품 경쟁력을 제고하고 궁극적으로는 수익성 향상으로 이어질 수 있다는 계산이 있을 것으로 보입니다.

 

#시장 확대 및 신규 수익원 발굴

• 디자이너 외의 직군을 사용자로 끌어들임으로써, 잠재적 시장을 확대하고 신규 수익원을 발굴하려는 의도도 엿보입니다.


• 기존에는 디자이너 위주의 과금 모델이 주를 이뤘다면, 앞으로는 개발자나 PM 등을 타깃으로 한 다양한 유료 서비스를 출시할 여지가 생기게 됩니다.


• 예를 들어 개발자를 위한 코드 자동 생성 및 최적화 기능, PM을 위한 데이터 애널리틱스 대시보드 등을 별도의 과금 모델로 제공할 수 있겠죠. 이는 새로운 매출 기회를 의미합니다.


• 또한 장기적으로는 해당 직군을 겨냥한 새로운 제품 카테고리를 론칭할 가능성도 열어둘 수 있을 것입니다. 영역 확장을 통해 시장에서의 입지를 더욱 확고히 다질 수 있는 기회가 될 수 있습니다.

 

AI + UI의 미래 : Dynamic & Adaptive UI

1. 맥락에 따라 바뀌는 Dynamic UI

지금의 화면은 이미 정해진 비즈니스 로직에 따라 동작합니다. 예를 들어 쿠팡에서 "장바구니에 담기" 버튼을 누르면, 우리가 고른 상품이 장바구니에 추가되겠죠. 특정 행동에 따른 결과가 미리 정해져 있는 거예요.

물론 A/B 테스트를 통해 사용자들의 반응을 실험하고 상황에 따라 다른 화면을 제공하기도 합니다. 그러나 A/B 테스트는 번거로운 작업입니다. A/B 테스트를 설정하고 결과를 분석하려면 개발자들이 일일이 코드를 바꾸고 사용자들의 반응을 지켜봐야 하거든요.

AI는 A/B 테스트 보다 사용자의 상황에 따라 달라지는 동적 UI를 만들어 낼 수도 있습니다. 사용자의 상황과 맥락을 이해하고, 그에 맞게 적절한 UI를 노출하는거죠.

Vercel 에서는 AI 기반 프로덕트를 위한 Vercel AI SDK를 제공하는데요. Generative user interface 를 제공하고 있습니다. AI 채팅창에 텍스트가 아니라 UI 형태로 노출될 수 있게 해주는 거죠. 

예를 들어, AI 어시스턴트에 항공편에 대한 질문을 하면, 아래와 같이 알아서 적절한 UI 화면을 노출해 줍니다. 

 

또 소개해 드릴 것이 이미지와 텍스트가 맥락에 따라 바뀌는 Coframe 서비스입니다. 이미지와 텍스트 생성은 LLM의 특기이고, 실시간 데이터를 토대로 알맞은 이미지와 텍스트를 시의적절하게 웹에 노출 시킬 수 있는거죠. 웹사이트의 성능을 최적화 하는 데도 도움이 되구요. 

 

현재 기준으로 AI가 파악하는 맥락의 범위는 1차적인 텍스트와 이미지 수준이 되겠지만, AI가 동적으로 UI를 생성하면 정적인 요소의 조합이었던 기존 웹 인터페이스의 개념을 완전히 바꿔놓을 거예요. 사용자가 누구인지, 어떤 상태이고, 어떤 디바이스를 사용하고, 어떤 제약 조건이 있는 지 등에 따라 앞으로는 인터페이스가 맞춤형으로 바뀌게 될 겁니다.

이렇게 되면 수많은 사용자의 행동 데이터를 분석하고, 애플리케이션의 현재 상태를 파악해서 최적화된 UI를 제공할 수 있습니다. 웹사이트나 앱이 사용자 개개인에게 능동적으로 맞춰지는 거죠. 사용자 입장에선 굳이 복잡한 메뉴를 찾아다닐 필요 없이, 원하는 걸 바로바로 할 수 있게 되는 셈이에요. UI/UX 디자인 패러다임의 큰 변화가 예상되는 대목입니다.

 

사용 패턴에 맞춰 쉽고 편리하게 만들어주는 Adaptive UI

현재 수준에서 제공되는 Dynamic UI는 정확성과 심미성을 보장하기 위해서 여전히 직접 개발자의 개입이 필요합니다. 하지만 적응형 UI(Adaptive UI)는 한 단계 더 진보된 형태입니다.사용자의 요구에 자동으로 맞춰지는 거죠.

 

세일즈포스같은 기업용 소프트웨어를 접해본 사람이라면 복잡한 UI에 익숙하실거에요. 버튼이 너무 많고 복잡해서 어디를 클릭해야 할지 모르겠다고 느끼셨던 적 있으시죠? 그래서 툴에서 기본적인 기능을 쓰는데도 배우고 공부해야 합니다. 기능이 너무 많다보니 B2C툴에 비해서는 사용성을 맞추기 현실적으로 어려운겁니다.  

사용자의 의도에 맞게 바뀌는 적응형 UI의 세계에서는 복잡한 서비스에서 특히 더 사용성이 개선됩니다. 간단한 프롬프트를 통해, 혹은 프롬프트조차 필요 없이 사용자가 무엇을 하려는지 AI가 이해하고 예측해서, 딱 필요한 기능만 알아서 보여준다는 거예요. 메뉴를 일일이 찾아다닐 필요 없이 말이죠.

예를 들어, 세일즈포스 CRM에서 사용자가 "새로운 영업 기회 리드 입력"을 치면 불필요한 필드는 생략해주고 필요한 필드만 보여주는 UI를 보여주면서 절차를 간소화 하는거에요. 

이러한 적응형 UI의 영향은 고객 경험 전반에 아주 크게 작용할 거예요.

• 새로운 사용자는 긴 시간 설명을 듣거나 익히지 않아도, 바로 "어~ 이거구나~" 하면서 쉽게 쓸 수 있어요.


• 능숙한 사용자는 여러 단계로 나뉘어 있던 작업들을 훨씬 더 간단하게 처리할 수 있겠죠

 

디자이너들의 역할은 어떻게 변화될까

AI 기술의 발전으로 디자이너의 역할 변화는 불가피해 보입니다. 일각에서는 AI가 디자이너를 대체할 것이라는 우려도 제기되고 있죠. 하지만 AI 시대에도 디자이너의 가치는 여전할 것이라고 봅니다. 다만 역할의 변화와 새로운 역량 개발이 필요할 뿐이죠. 단순히 새로운 도구를 익히는 차원을 넘어, 디자이너로서의 정체성 자체를 재정립하는 근본적인 고민이 될 것 같아요.

1. 디자인 컨설턴트

우선 가장 큰 변화는 '창조자'에서 '큐레이터'로의 역할 전환이 될 것 같습니다. AI가 빠르고 대량으로 디자인 결과물을 생성해내는 상황에서, 무에서 유를 창조하는 일은 더 이상 디자이너의 고유 영역이 아닐지도 모릅니다. 대신 AI가 만들어낸 수많은 디자인 아이디어 중에서 비즈니스 맥락에 적합한 최선의 대안을 찾아내고, 이를 긴 안목에서 다듬어 나가는 역할이 중요해질 것입니다.

디자이너들이 디자인 초안 생성에 AI를 활용하면, 자신의 역할을 디자인 큐레이션과 컨설팅에 집중하게 될겁니다. 고객과의 커뮤니케이션 과정에서 AI 생성 디자인을 적극 활용하되, 최종적인 의사결정은 인간 디자이너의 감수성과 경험에 기반해 내리는 거죠. 이는 디자이너가 보다 전략적이고 본질적인 역할에 몰입하게 되는 계기가 될 수 있을 것 같아요.

2. 디자인 엔지니어

두 번째로는 기술에 대한 이해와 활용 능력이 그 어느 때보다 중요해질 것 같습니다. 피그마와 같은 디자인 도구에서 제공하는 AI 및 자동화 기능을 충분히 활용하는 것은 물론, AI 기술이 가진 본질적 한계와 윤리적 문제에 대해서도 끊임없이 고민해야 할 거예요. 이는 단순한 도구 활용을 넘어, 기술에 대한 철학과 비전을 갖추는 일이기도 합니다.

인접 분야, 특히 개발 영역과의 협력 능력도 더욱 중요해질 것 같네요. 피그마의 의도대로 디자인과 개발 프로세스가 하나로 통합되는 상황에서, 디자이너에게는 개발 프로세스에 대한 이해와 원활한 소통 능력이 그 어느 때보다 필수적인 스킬이 될 것입니다. 코드에 대한 기본적인 이해, 개발 용어에 대한 학습 등 자기계발의 노력이 필요할 거예요.

3. Human Centered

마지막으로 강조하고 싶은 점은, AI가 아무리 발전한다 해도 '사람'에 대한 깊이 있는 이해만큼은 디자이너의 고유한 역량으로 남을 거라는 사실입니다. 사용자에 대한 공감, 비즈니스 맥락에 대한 통찰, 창의적 문제해결 능력, 그리고 感. 이는 데이터와 알고리즘만으로는 대체할 수 없는, 인간 디자이너만의 강점이에요. 이 부분에 대한 끊임없는 고민과 학습이 더해진다면 AI 시대에도 디자이너의 가치는 오히려 더욱 빛을 발할 수 있을 거라 믿습니다.

디자이너에게 AI의 등장은 단순히 새로운 도구의 등장 그 이상의 의미를 가집니다. 그간 우리가 당연하게 생각했던 역할과 역량에 대한 근본적인 질문을 던지는 계기인 셈이죠.

이에 대한 해답을 찾는 과정은 결코 순탄치 않을 것입니다. 기술의 발전 속도를 따라잡는 것도, 새로운 역할에 적응하는 것도 쉽지만은 않은 도전이 될 테니까요. 그러나 이는 또한 디자이너로서 한 단계 성장할 수 있는 기회이기도 합니다.

We won't lose our job to AI. We will lose our job to the one knowing how to use AI

AI에게 대체되는 것이 아니라 AI를 활용할 줄 아는 사람에게 대체됩니다.