여는글

디자인 분야에서 AI는 어떻게 접목이 되어 어떤 미래가 펼쳐질까요?

이번에 개최된 Figma의 연례 컨퍼런스인 CONFIG에서, 미래의 모습을 잠깐이나마 엿볼 수 있었습니다.

Figma와 (인수한) Diagram이 그려주는 'AI로 디자인 하는 미래'

그중에서 가장 핵심적인 부분만 발췌하여 짧게 보여드리고자 합니다.

핵심 요약

디자인은 문제를 해결하는 것입니다.
그리고, 디자인은 기술과 함께 발전합니다.

이 2가지 가정을 기억하며 AI로 바뀌는 세상을 What we design, How we design, Who we designs 3가지 측면으로 봅시다.

다시 말해 Figma는 Product, Procss, People 3가지 항목으로 AI를 설명합니다.

What we design? (Product)

오늘날에는 앱 기반의, 모놀리식(monolithic) 구조를 가지고 있습니다.

하지만 미래에는 AI를 통해 딱딱한 구조를 벗어나서 Dynamic UI를 구성하고 '유저의 의도와 행동'에 집중할 수 있게 될 것입니다.

그래서 앱 기반이 아닌 Task 기반의 디자인을 할 것입니다.

How we design? (Process)

그럼 어떻게 디자인을 하게 될까요?

기존의 원자(Atomic) 시스템은 아주 작은 요소들을 모두 만들어가며 아주 정교하고 '완벽'한 작업을 위해 애썼습니다. (1px을 맞추기 위한 수많은 피땀눈물...)

이 과정을 AI를 통해 패턴으로 만들어, 유기적으로 구성할 수 있게 됩니다.

최소한의 요소만 만들면, 자동으로 각종 상태(Status)와 변수(Variables)들을 만들면서 디자인 시스템까지 한큐에 적용한다는 것 같습니다.

아주 지루한 작업들은 더이상 할 필요 없이 좀더 문제와 솔루션, 아이디어와 전략에 집중할 수 있게 되는 것이죠.

미친듯한 시간 단축을 이뤄낼 것 같습니다...

Figma에 변수(Variables)에 각종 옵션까지 먹는 것만 해도 얼마나 고마웠는데...
이렇게 된다면... 최고...! 🥳

Who designs? (People)

Figma는 본질적으로 Community-Centered-Company입니다.

AI를 통해 천장을 높여 디자이너는 한계를 벗어나 더 잘할 수 있게,
바닥은 낮추어 다른 직무의 사람들도 디자인에 참여할 수 있게 만들고자 합니다.

그래서 모두가 메이커가 되는 협업 공간이 될 것입니다.

경계를 허물고 협업과 공동의 목표에 집중합니다.
더욱더 활발한 아이디어와 참여를 이끌어내게 될 것입니다.

이렇게 Product, Process, People - 3가지 관점에서 AI를 바라봤습니다.

End-to-End Process

AI는 하나의 제품이 아닙니다. AI는 기술이고 플랫폼입니다.

그래서 AI는 디자인 작업의 모든 과정을 도와줄 수 있습니다.

브레인스토밍, 디자인, 개발까지 모든 과정입니다.

Brainstorm

아이디어를 쉽게 생성하고 비슷한 것끼리 묶어내고(클러스터링) 그리고 요약까지 AI를 통한 브레인스토밍이 가능해질 것 입니다.

데모 영상을 보시면 Figjam에서 AI를 사용하는 모습이 나옵니다.

프롬프트를 입력하자, 여러 아이디어 포스트잇이 생성되고, 이것들을 여러 기준으로 쉽게 모아볼 수가 있네요.

그리고 한번에 요약까지 해주는 장면이 나옵니다.

Design

디자인 실무에서는 어떻게 AI가 도와줄까요?

아이디어를 기반으로 초안을 만들고, 여러 배리에이션을 만들어주면서, 유저 플로우를 완성할 수 있습니다.

정말... 좋네요...

Build

디자이너가 개발자에게 디자인을 전달하는 과정이 상당히 쉬워질 것 같습니다.

이미 개발자 모드가 나와서 VS Code에서 Figma 파일들을 접근할 수가 있는데요.

이를 통해 코드를 자동 생성하고 수정하여 디자인과 코드를 일치시킬 수가 있습니다.

디자인이 결과물에 제대로 반영하기 위한 많은 과정들이 훨씬 수월해지겠네요.

이걸 보고, 역으로 코드를 수정해서 디자인에 반영할 수 없나 라는 생각이 드네요.

양방향이 되면 엄청날 것 같은데...

Collaborate

이 과정에서 Figma는 협업을 중요하게 여깁니다.

조직 내 수십 가지의 파일과 수백 명의 '메이커' 혹은 디자인 파트너들과의 소통

조직 내에서의 코멘트나 여러 활동에 대해 요약해주고 관리해주는 기능들도 AI를 통해 쉽게 가능할 것입니다.

Diagram

이 다음은 Figma가 인수한 Diagram에서 세션을 진행합니다.

Diagram은 Figma에서 사용할 수 있는 각종 AI 플러그인을 개발해온 회사입니다.

Diagram은 (1)Plugin API, (2)Design Systems, (3)LLM 3가지로 AI툴을 만들 수 있게 되었습니다.

Diagram Plugins

Diagram의 제품에는 자동화(Automation)와 Intelligence 툴로 나누어 볼 수 있습니다.

지금도 사용가능한 툴들이라 한번 둘러보시면 좋을 것 같네요.

그중 Magician은 레이어 이름을 알아서 만들어주고, 만들고 싶은 아이콘을 프롬프트 입력하면 생성해주거나 하는 플러그인입니다.

제가 조사한 바에 의하면 이런 GPT 기반 AI플러그인 중에서는 가장 최고인 것 같더군요.

실사용을 해본 것은 아니지만, 나머지 플러그인들이 너무 조잡합니다...

Genius chat

그리고 가장 기대하게 만드는 Genius Chat입니다.

대화형 인터페이스에서 원하는 디자인을 말하면 자동으로 생성해주는 것 같습니다.

이번 세션에서는 현재 어느정도 수준인지만 보여주고 있습니다.

적어도 기존에 만들어둔 디자인을 기반으로 수정한다는 점만으로도 고무적입니다.

지금까지는 Gen-AI를 활용한 디자인은 편집이 불가능하게 만들어주거나 (jpg...) 전혀 관련이 없는 디자인 요소만 뽑을 수 있어 아무짝에 쓸모가 없었기 때문입니다.

그래서 이제 막 시작하는 Diagram과 Figma의 관계가 기대가 되네요.

마지막은 세션 내내 관통하고 있는 문구, "Still, We design"으로 막을 내립니다.

(아마도 AI가 디자이너를 대체하는 것 아니냐 식의 생각들을 의식한 것 같아요.)

닫는글

이렇게 Figma와 Diagram을 통해 디자인의 미래를 잠시나마 엿볼 수 있었습니다.

저도 디자이너로써 정말 기대가 되는 점들이 많네요.

읽어주셔서 감사합니다!