AI 디자인 시스템 자동화: 가능성과 한계

그리고 AI 결과물이 실제로 유효해지기 위한 조건

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

AI는 우리가 미처 필요성을 깨닫기도 전에 어느덧 우리 팀의 일원으로 자리 잡았습니다. 특히 디자인 시스템 구축 분야에서 AI의 활약이 두드러집니다. 과거 몇 주가 걸리던 컴포넌트, 토큰, 문서화 작업을 자동화하여 프로세스를 획기적으로 단축하고 있죠.

하지만 이제 우리는 단순히 ‘속도’에만 감탄하던 단계를 지나가고 있습니다.

이제 중요한 것은 AI 도구가 결과를 몇 초 만에 만들어내느냐가 아니라, 그 결과물이 얼마나 가치 있는가입니다. 결국 몇 분 만에 디자인 시스템을 만든다 해도 실제로 사용되지 않는다면 아무 의미가 없습니다. 디자인 시스템 생성 도구의 진짜 가치는 그 결과물이 실제로 활용 가능한지에 달려 있습니다.

---

AI가 생성한 디자인 시스템이

실효성을 갖추기 위해 필요한 요건은 무엇일까요?

디자이너들에게 선택받는 시스템이 되기 위한 세 가지 핵심 요소를 짚어봅니다.

1. 사용성

팀원들이 시스템을 즉시 이해하고 자신 있게 활용할 수 있어야 합니다. 이는 시스템이 팀의 실제 작업 환경과 맞닿아 있을 때만 가능합니다.

맥락 파악: 여기서 중요한 것이 바로 맥락을 이해하는 능력입니다. 컴포넌트는 실제 제품이 빌드되는 방식을 반영해야 하며, 디자인 토큰은 엔지니어가 이해할 수 있는 언어여야 합니다.

간결함: 팀이 실제로 필요로 하는 요소만 담아야 합니다. 쓰이지 않을 요소로 가득 찬, 지나치게 비대한 디자인 시스템을 만드는 것은 큰 의미가 없습니다.

친숙함: 결국 아무리 완성도 높아 보이는 디자인 시스템이라도, 실제 작업 맥락과 동떨어져 있다면 아무도 사용하지 않습니다.

2. 바로 개발에 연결할 수 있는 결과물 (Build-ready output)

디자인 시스템은 최종 목적지가 아닙니다. 최종 목적지는 결국 제품입니다.

진정한 디자인 시스템은 다음 단계로 자연스럽게 이어질 수 있어야 합니다. 시스템 설계에서 화면으로, 화면을 플로우로, 플로우를 프로토타입으로, 그리고 최종적으로 실제 제품 개발까지 이어져야 합니다.

AI 도구를 평가할 때 단순히 생성된 디자인 자체에만 매몰되지 마세요. 그 결과물을 기반으로 무엇을 할 수 있는지를 봐야 합니다. 그 결과물을 수정하고, 확장하고, 실제로 구현할 수 있는지가 핵심입니다. 단순히 예쁜 라이브러리를 넘어 빌드 가능한 결과물이 필요합니다.

3. 반복 수렴 (Iteration)

디자인은 단발성 과제가 아닙니다. 제품은 진화하고, 브랜드는 변화하며, 접근성 기준은 강화됩니다. 새로운 인사이트도 계속 등장합니다. 버전 1에서 완벽했던 선택이 버전 3에서는 통하지 않을 수 있습니다.

효과적인 디자인 시스템은 제품과 함께 진화하도록 설계되어야 합니다. 마찬가지로, 유용한 AI 기반 디자인 시스템 생성 도구는 이러한 반복적인 개선 과정을 지원해야 합니다. 즉, 변경 사항을 빠르게 테스트하고, 그 변화가 여러 화면에 어떻게 반영되는지 확인하며, 큰 리스크나 불필요한 작업 없이 수정할 수 있어야 합니다.

이러한 기준을 바탕으로, 현재 AI 디자인 도구들이 디자인 시스템을 실제로 어떻게 다루고 있는지 살펴볼 차례입니다. 대부분의 도구는 크게 두 가지 유형으로 나뉩니다.

---

[카테고리 1] 기존 디자인 시스템 기반의 AI 도구

이러한 도구를 사용하면 디자인 시스템을 연결하고 이를 기반으로 디자인을 생성할 수 있습니다.

이 범주에 속하는 잘 알려진 도구로는 Figma Make가 있습니다. 기존 디자인 시스템을 AI 디자인 생성기에 동기화하면, 그 시스템을 기반으로 화면 디자인을 만들어 줍니다.

하지만 이러한 도구에는 한계가 있습니다.

대부분의 경우, 이러한 도구는 우리가 실제로 컴포넌트를 검토하듯이 기존 컴포넌트를 이해하지는 못합니다. 대신 디자인 요소들을 읽어 들인 뒤, 그 요소들과 맞는 레이아웃을 생성합니다. 컬러 토큰, 타이포그래피 스케일, 스페이싱 값 같은 것들은 인식하지만, 이미 만들어 둔 실제 컴포넌트를 그대로 활용하지는 않습니다.

생성된 디자인을 Figma로 가져오면, 기존 디자인 시스템과 생성된 디자인 사이에 어긋남이 있다는 것을 알게 됩니다. 많은 경우, 실제 컴포넌트 구조에 맞추기 위해 결과물의 일부를 다시 만들어야 합니다. 결국 결과물은 출발점 정도의 의미만 가지게 되고, 처음에 절약한 시간만큼 다시 수정 작업이 필요할 수도 있습니다.

[카테고리 2] 디자인 시스템 생성 도구

이 유형의 도구들은 브랜드 개요, 몇 가지 색상, 웹사이트 URL 또는 무드 보드와 같은 입력값을 받아 디자인 시스템을 결과물로 생성합니다. 디자인 시스템 생성 도구는 프로젝트를 완전히 처음부터 시작할 때 특히 유용합니다. 수작업으로 시스템을 구축할 때보다 훨씬 짧은 시간 안에 여러 디자인 방향을 탐색하고, 효과적인 방향을 찾은 뒤 반복적으로 다듬어 나갈 수 있습니다.

이 범주에 속하는 도구의 예로는 Relume과 Moonchild가 있습니다.

이 도구들을 실제로 테스트해 보기 위해, 가상의 플랫폼을 위한 디자인 시스템을 만들어 보았습니다. 각 도구가 어떤 입력을 받아들이는지, 결과물이 실제로 어떤 형태로 나오는지, 그리고 그 결과물을 실제로 어떻게 활용할 수 있는지 순서대로 살펴보겠습니다. 균형 잡힌 관점을 위해 각 도구를 사용하면서 겪었던 한계점도 함께 공유하겠습니다.

두 도구 모두 거의 동일한 프롬프트를 사용했습니다. 핵심 콘셉트를 정의하고 몇 가지 기본적인 디자인 방향을 제시하되, 도구가 자체적으로 창의적인 결정을 내릴 여지도 남겨두었습니다.

"Preloved Fits는 사용자들이 중고 디자이너 의류에 입찰할 수 있는 트렌디한 플랫폼입니다. 주요 고객층은 예산에 맞춰 스타일리시함을 유지하고 싶어 하는 트렌드에 민감한 Z세대 초반에서 중반입니다."

색상: #FFFFFB(배경), #1C1917(기본 텍스트), #A0687A(브랜드 강조, CTA).
서체: Playfair Display - 48px/굵게(디스플레이), DM Sans - 14px/일반(본문), DM Sans - 11px/중간 대문자(레이블).
간격: 12px(작은 간격), 16px(중간 간격), 24px(큰 간격).

이렇게 프롬프트를 구성한 데에는 두 가지 이유가 있습니다.

첫째, 각 도구가 프로젝트의 맥락을 얼마나 잘 이해하는지, 그리고 그 이해가 실제 결과물에 반영되는지를 확인하기 위해서입니다.

둘째, 디자인 방향이 어느 정도 정해져 있을 때 도구가 어떻게 반응하는지를 테스트하기 위해서입니다.

1. Relume

Relume에서 생성한 스타일 가이드

Relume은 꽤 오래전부터 사용되어 온 도구로, 완성도 높은 UI, 사이트맵, 스타일 가이드를 생성하는 기능으로 잘 알려져 있습니다.

Relume에서 스타일 가이드를 생성할 때 따르는 작업 흐름은 다음과 같습니다.

프롬프트 접수 → 사이트맵 생성 → 와이어프레임 생성 → 스타일 가이드 생성 → UI 디자인 생성

1.1. Relume을 사용하면서 느낀 점

[창의적인 자유]

Relume은 제가 프롬프트에서 정의한 방향을 그대로 따르지는 않았습니다. 일부는 반영하고 나머지는 자체적으로 결정했습니다. 원하는 결과가 나올 때까지 결과물을 세밀하게 다듬을 수 있기 때문입니다. 하지만 Relume이 기존 브리프를 정확하게 실행하는 도구라기보다는, 새로운 디자인 방향을 탐색할 때 더 잘 작동하는 도구라는 의미이기도 합니다.

[맥락에 맞지 않는 일반적인 결과물]

Relume이 생성한 스타일 가이드는 깔끔하고 잘 정리되어 있었지만, 어느 이커머스 플랫폼에나 어울릴 수 있는 수준이었습니다. Preloved Fits만의 특색, 즉 Z세대의 에너지, 앞서가는 패션 감각, 고급스러움과 합리적인 가격 사이의 균형 등 그 어떤 것도 결과물에 반영되지 않았습니다.

[Figma 네이티브 플러그인]

Relume은 스타일 가이드를 Figma 안에서 바로 사용할 수 있는 플러그인을 제공합니다. 이미 Figma 중심으로 디자인 워크플로우를 운영하고 있다면 자연스럽게 사용할 수 있습니다.

[Figma에서 더 확장되는 라이브러리]

Relume 인터페이스에서는 컬러, 타이포그래피, 기본적인 UI 스타일 같은 핵심 요소만 제공됩니다. 하지만 Figma로 내보내면 라이브러리가 훨씬 확장됩니다. 타이포그래피, 변수, UI 요소, 보더 라디우스, 그림자, 아이콘 등 다양한 요소를 그 안에서 자유롭게 커스터마이즈 할 수 있습니다. 다만 라이브러리의 범위가 꽤 넓기 때문에 실제로 사용하는 요소는 그중 일부에 그칠 가능성이 높습니다.

[반복 개선보다 탐색에 가까움]

Relume은 버전 관리 기능을 지원하지 않기 때문에 디자인 시스템이 시간에 따라 어떻게 변화했는지 추적할 수 있는 기본 기능이 없습니다. 따라서 이러한 관리는 Figma에서 직접 수동으로 해야 합니다. 대신 프로젝트당 최대 8개의 비주얼 콘셉트를 만들 수 있어, 장기적으로 시스템을 운영하기보다는 초기 디자인 방향을 탐색하는 단계에 더 적합합니다.

[문서화 기능 없음]

스타일 가이드와 함께 문서가 생성되지 않습니다. Relume을 종료한 후 별도로 문서를 직접 작성해야 합니다.

Relume의 스타일 가이드를 사용하여 생성된 디자인

총평

Relume은 빠르게 비주얼 방향성을 찾는 데에는 꽤 좋은 도구입니다. 하지만 방향성이 정해진 이후의 작업은 여전히 대부분 수작업으로 진행해야 합니다. 즉, 디자인 방향에서 실제 제품 개발 단계까지 이어지는 과정은 여전히 디자이너가 직접 해결해야 할 부분입니다.

2. 문차일드

Moonchild가 생성한 디자인 시스템의 일부

Moonchild AI는 비교적 최근 등장했지만, 빠르게 디자이너들의 툴킷에서 자리 잡고 있는 도구입니다. 이 도구의 디자인 시스템 생성기는 파운데이션, 컴포넌트, 레이아웃 시스템, 인터랙션 상태, 문서화까지 디자인 시스템 구축 전반을 다룹니다.

Moonchild가 디자인 시스템을 생성할 때 따르는 작업 흐름은 다음과 같습니다.

프롬프트 입력 → 디자인 시스템 생성 → (필요시) 와이어프레임 생성 → UI 디자인 생성 → 작동 가능한 프로토타입 생성

2.1. Moonchild를 사용하며 느낀 점

[높은 맥락 이해도]

생성된 디자인에는 문서의 방향성이 잘 반영되어 있습니다. 세련된 디자인과 Gen Z 친화적인 접근성 사이의 균형이 유지된 것입니다. 하지만 맥락 이해도를 가장 잘 보여준 부분은 컴포넌트입니다. 카운트다운 타이머, 입찰 기록 타임라인, 가격 차트, 위시리스트 기능 등은 Preloved Fits와 같은 입찰 기반 플랫폼에 특화된 요소들이었습니다.

[논리적 근거에 기반한 의사 결정]

Moonchild는 단순히 완성도 높은 디자인 시스템을 생성하는 데서 그치지 않고, 각 디자인 결정의 이유까지 설명해 줍니다. 이는 이해관계자에게 디자인 의도를 설명해야 하는 상황에서 특히 유용합니다. 단순히 시스템을 제시하는 것이 아니라, 그 시스템을 만든 사고 과정까지 함께 전달할 수 있기 때문입니다.

[탄탄한 디자인 시스템]

처음에는 색상, 스페이싱, 타이포그래피, 아이콘 정도의 기본 요소만 생성될 것이라 예상했습니다. 하지만 실제 결과물은 그보다 훨씬 폭넓었습니다. 카드 컴포넌트, 내비게이션 및 레이아웃 패턴, 데이터 시각화 요소, 피드백 및 빈 상태(empty state), 에러 상태, 모바일 컴포넌트, 그리고 이를 하나로 묶는 명확한 디자인 원칙까지 포함되어 있었다.

[자동 버전 관리]

Moonchild는 디자인 시스템을 수정할 때마다 자동으로 v1, v2, v3 등과 같은 새 버전으로 저장해 주었습니다. 각 버전은 독립적으로 저장되므로 언제든지 이전 상태로 되돌릴 수 있고 작업 내용 손실도 없습니다.

[시스템 문서화]

Moonchild는 색상, 컴포넌트, 그리드, 타이포그래피 등 디자인 시스템의 각 요소에 대한 사용 가이드라인을 자동으로 생성합니다. 각 요소가 무엇인지 설명하는 데서 그치지 않고, 어떻게 사용하고 확장해야 하는지, 그리고 제품 전반에서 일관되게 적용하는 방법까지 함께 안내합니다.

[Vibe 코딩 도구로 내보내기]

Moonchild에서 디자인 시스템을 생성한 뒤에는 이를 코드 형태로 내보낼 수 있습니다. Lovable, Cursor, Figma Make, Claude Code 등 다양한 Vibe Coding 도구에서 활용할 수 있으며, 이 코드는 실제 제품을 구축할 때 기반 구조로 사용됩니다. 이 방식은 디자인 방향이 실제 제품으로 구현되는 과정에서 발생하는 해석 차이(translation loss)를 줄여줍니다.

[Figma 연동 불가]

만약 Figma 중심 워크플로를 사용하고 있고 디자인 시스템을 Figma 내부에서 관리하길 원한다면, 현재로서는 다소 아쉬운 부분입니다. Moonchild는 직접적인 Figma 내보내기 기능을 지원하지 않습니다.

[무료 체험 없음]

Moonchild에는 무료 플랜이 존재하지만, 기본 제공 크레딧이 없습니다. 즉 실제로 도구를 사용하려면 크레딧을 충전해야 합니다. 비용을 지불하기 전에 도구를 충분히 테스트해보고 싶은 사용자에게는 초기 진입 장벽이 될 수 있는 부분입니다.

Moonchild의 스타일 가이드를 사용하여 생성된 디자인

2.2. 총평

단순히 디자인 방향을 탐색하는 것이 아니라 실제로 제품을 개발하고 있다면 Moonchild는 좋은 선택입니다. Moonchild는 문서의 맥락을 이해하고, 디자인 결정의 근거를 설명하며, 작업을 버전 단위로 관리해 줍니다. 또한 생성된 결과물을 Vibe Coding 도구에 바로 활용해 제품 개발까지 이어갈 수 있습니다. 디자인부터 구현까지 이어지는 엔드투엔드 흐름이 비교적 명확하게 갖춰져 있습니다.

하지만 Figma를 선호하는 사용자라면 Figma와의 통합 기능이 부족하다는 점이 (적어도 현재로서는) 큰 단점으로 느껴질 수 있습니다.

워크플로우에 맞는 AI 디자인 도구 선택하기

AI에 대해 이야기할 때 가장 먼저 떠오르는 것은 속도입니다. 하지만 좋은 제품을 만드는 것은 결승선을 향해 달려가는 경주가 아닙니다. 여러분의 프로세스에 맞는 AI 도구는 현재 단계에 적합하고 실제로 앞으로 나아가게 해주는 도구입니다.

이미 디자인 시스템이 구축되어 있고 AI를 이용해 화면을 생성하기만 하면 되는 경우라면 Figma Make 같은 도구가 적합합니다. 하지만 원하는 결과를 얻으려면 출력물을 직접 수정해야 한다는 점을 유념해야 합니다.

만약 아무것도 없는 상태에서 시작해서 빠르게 사업을 확장해야 한다면, Relume은 초기 기반을 다지는 데 있어 든든한 출발점을 제공합니다.

만약 디자인 시스템, 화면, 흐름, 프로토타입을 모두 한 곳에서 통합하는 완벽하게 연결된 디자인 루프를 처음부터 구축하고 싶다면, Moonchild가 바로 그 목적에 맞게 설계되었습니다.

마지막으로

AI는 점점 우리의 일하는 방식을 바꾸고 있습니다. 하지만 결국 AI도 하나의 도구일 뿐입니다.

도끼는 강력한 도구지만, 혼자서 나무를 베어낼 수는 없습니다. 어디를 내려칠지, 얼마나 깊이 파고들지, 언제 멈출지에 대한 판단이 필요합니다. AI 디자인 도구도 마찬가지입니다. 무엇을 만들고 왜 만드는지에 대한 명확한 이해와 함께, 적절한 맥락에서 사용할 때 가장 큰 효과를 발휘합니다.

AI를 최대한 활용하는 것은 수많은 도구를 사용하는 것이 아니라, 어떤 도구를 언제 사용해야 하는지 아는 것입니다.

원문 출처: https://medium.com/design-systems-collective/automating-design-system-creation-what-ai-design-tools-can-and-cant-do-35a84a1a2be9

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.