디자인 시스템을 AI-Ready(AI 대응 가능)하게 만드는 방법

**AI 생성 프로토타입 (AI-generated prototypes)**은 디자인 시스템 전반에 흩어져 있는 아주 작은 불일치들 때문에 일관되게 괜찮은 결과를 내놓지 못하는 경우가 많습니다. 이는 결정이 내려졌으나 문서화되지 않았거나, 정리되지 않은 하드코딩된 값(hard-coded values), 또는 목업(mock-ups)이나 디자인 흐름을 AI가 스스로 파악하도록 AI에 너무 많이 의존하는 문제 때문입니다.

어제 저는 Atlassian의 Hardik Pandya가 작성한 유용한 실무 가이드를 우연히 발견했습니다. 이 가이드는 드리프트(drifts)를 줄이고, 실수를 최소화하며, 컨텍스트(context)를 유지하고, AI 생성 프로토타입의 품질을 향상시키는 방법에 대해 다룹니다. 어떻게 작동하는지 살펴보겠습니다.

디자인 결정은 인프라입니다

당연하게도, 더 나은 AI 프로토타입은 더 나은 데이터로부터 나옵니다. 하지만 더 나은 인간의 가이드(human guidance)로부터도 나옵니다. 우리는 AI가 적절한 컴포넌트(component)를 선택하는 방법이나 접근성(accessibility)을 고려하여 디자인하는 방법을 알고 있다고 가정해서는 안 됩니다. AI에게는 우선순위, 우리가 결정을 내리는 방식에 대한 명확한 경로, 디자인 원칙, 예시, 권장 사항(do's) 및 금지 사항(don'ts)이 필요합니다.

사실, 우리는 디자인 결정을 **인프라(infrastructure)**로 취급해야 합니다. 이는 우리가 결정을 내릴 때마다 — 단순히 디자인 결정뿐만 아니라, 업무의 우선순위를 정하는 방식이나 이곳에서 결정을 내리는 방식에 대한 결정까지 포함하여 — 그 결정이 AI가 소비할 수 있는 스펙 파일(spec file)에 반영되는 경로를 반드시 찾아야 함을 의미합니다.

감사(Auditing): FigmaLint

디자인 시스템의 품질을 감사하기 위한 유용한 도구 중 하나는 FigmaLint입니다. 이는 토큰(tokens), 상태(states), 접근성(accessibility), 토큰 바인딩(binding tokens), 레이어 이름 변경, 분리된 인스턴스(detached instances) 감지, 누락된 인터랙티브 상태(interactive states) 및 하드코딩된 값(hard-coded values)을 감사하고 디자인 문서화를 준비하는 데 유용한 무료 Figma 플러그인입니다.

자신들의 디자인 시스템과 컴포넌트 라이브러리(component libraries)를 제공하는 **벤더(vendors) 및 제3자(third parties)**와 자주 협업해야 한다면, 이 도구는 곁에 두어야 할 훌륭한 조력자입니다. 특히 프로토타입, AI 생성 코드, 그리고 AI가 작성한 문서의 품질을 높이고 싶다면 더욱 그렇습니다.

세 가지 계층: 스펙 파일(Spec Files) + 토큰 계층(Token Layer) + 감사(Auditing)

품질을 보장하기 위해, 우리는 "스펙 파일 (spec files)"의 형태로 디자인 원칙, 가이드라인 및 규칙을 수립합니다. 이는 간격 규칙, 색상 선택, 컴포넌트 사용 가이드라인, 우선순위 등을 포함하는 구조화된 마크다운 (Markdown) 파일입니다. AI는 프로토타입 (prototype)을 생성할 때마다 이 스펙 파일을 읽고 재사용하게 됩니다.

스펙 파일은 텍스트 파일이기 때문에 훨씬 더 **비용 효율적 (cost-effective)**일 뿐만 아니라 훨씬 더 정확합니다. 그 이유는 AI가 목업 (mock-up)에서 패턴을 인식하거나 해독하는 것에 의존하는 대신, 구체적인 가이드라인을 전달받기 때문입니다. 실제로 코드를 확장하는 것이 목업으로부터 코드를 생성하는 것보다 더 효과적인 경우가 많습니다.

**토큰 계층 (token layer)**은 디자인 시스템 전체에서 사용되는 모든 토큰을 나열하고 최신 상태로 유지합니다. AI는 임의로 그럴듯한 값을 만들어내는 대신, 이름이 지정된 폐쇄된 변수 집합 내에서 항상 선택을 수행합니다.

**감사 스크립트 (audit script)**는 AI가 잘못한 부분을 잡아냅니다. 이는 프로토타입을 스캔하여 모든 하드코딩된 (hard-coded) 값을 찾아내고, 필요에 따라 플래그 (flag)를 표시합니다. 이는 일반적인 소프트웨어가 해당 작업을 수행할 수 있으며, AI는 그 피드백이 돌아오기를 기다리는 방식으로 작동할 수 있습니다.

마지막으로, 디자인 시스템이 **업데이트를 배포 (ships updates)**할 때, 동기화 루틴이 어떤 스펙 파일을 업데이트해야 하는지 표시합니다. 목표는 AI가 구버전에 맞춰 작성된 스펙이 아니라, 항상 최신의 정확한 스펙을 읽도록 만드는 것입니다.

AI-Ready 디자인 시스템 사례

마치며

궁극적으로, AI는 적절한 가이드라인 없이는 기술 부채 (technical debt)나 디자인 부채 (design debt)를 마법처럼 해결할 수 없습니다. AI는 명확한 결정, 확립된 우선순위, 그리고 잘 정의된 원칙에 크게 의존합니다.

디자이너가 AI를 가이드할 때 더 의도적이고 정밀할수록 (deliberate and precise), 전반적인 결과물은 더 좋아질 것입니다. 이는 단순히 디자인 시스템 (design systems)을 정리하고 개선하는 것뿐만 아니라, 결정 사항들이 Markdown 파일로 흘러 들어가 유지될 수 있도록 지속적으로 관리하는 것을 의미합니다. 우리는 앞으로 몇 년 동안 매우 바쁘게 지내게 될 것입니다.

“AI 인터페이스를 위한 디자인 패턴 (Design Patterns For AI Interfaces)”을 만나보세요

Design Patterns For AI Interfaces를 소개합니다. 이는 Vitaly의 새로운 **비디오 강의 (video course)**로, 사람들이 실제로 사용하는 AI 기능을 설계하기 위한 수백 가지의 실제 사례와 UX 가이드라인을 제공합니다. 또한 올해 말에 라이브 UX 트레이닝 (live UX training)도 진행될 예정입니다. 무료 미리보기로 이동하기.

인터페이스 디자인 및 UX에 관한 Vitaly의 비디오 강의, Design Patterns For AI Interfaces를 만나보세요.

비디오 + UX 트레이닝 (Video + UX Training)

$ 450.00 $ 799.00 비디오 + UX 트레이닝 구매하기

30개의 비디오 레슨 (10시간) + 라이브 UX 트레이닝 (Live UX Training).
100일 환불 보장.

비디오 전용 (Video only)

$ 275.00 $ 395.00

비디오 강의 구매하기

30개의 비디오 레슨 (10시간). 매년 업데이트됨.
3개의 비디오 강의가 포함된 UX 번들 (UX Bundle)로도 이용 가능합니다.

유용한 리소스 (Useful Resources)

FigmaLint, by TJ Pitre
Atlassian AI-Ready Design System Example, by Atlassian
Carbon AI-Ready Design System Example, by IBM
CMS Design System AI-Ready Example, by Centers for Medicare & Medicaid Services
Nordhealth AI-Ready Design System Example, by Nordhealth

디자인 시스템을 AI-Ready(AI 대응 가능)하게 만드는 방법

요약

핵심 포인트

비디오 + UX 트레이닝 (Video + UX Training)

비디오 전용 (Video only)

댓글