AI에게 디자인 언어를 학습시키기

출처:

작성자:
Eleni Misthos, Senior Developer Content Designer

Kylor Hall, Principal Prompt Engineer

Farid Sabitov, Lead Design Technologist

Julian Fleetwood, Lead Content Designer

발행일: 2026년 06월 02일

AI는 이제 디자인과 개발 과정 전반에서 자연스럽게 활용되고 있습니다. 하지만 AI 도구의 성능은 어떤 정보를, 어떤 방식으로 제공받느냐에 크게 좌우됩니다.

Atlassian 규모의 환경에서는 디자인 언어와 관련된 정보가 문서 사이트, Confluence 페이지, Figma 파일, Loom 영상, 그리고 수백 개의 코드 패키지에 분산되어 있습니다.

일부 자료는 충분한 정보를 제공하지만, 중요한 세부 내용이 누락되어 있거나 최신 상태가 아니며, 이미지와 같은 시각적 정보에 의존해 코드가 이해하기 어려운 경우도 많습니다.

대부분의 자료가 사람이 읽고 활용하는 데 초점을 맞추고 있어, 기계가 효과적으로 읽고 활용하기에는 적합하지 않습니다.

AI 도구가 이렇게 흩어져 있는 정보를 기반으로 Atlassian UI를 생성하면 결과를 예측하기 어려워지고 비용도 불필요하게 증가합니다.

에이전트는 오래된 패턴을 참조하거나 접근성 요구사항을 놓치고, 실제 디자인 시스템에 존재하지 않는 컴포넌트를 만들어내기도 합니다.

이 문제를 해결할 방법을 찾기 위해 다양한 사례를 검토했지만, 대규모 환경에서 이를 효과적으로 해결한 사례를 찾기는 어려웠습니다.

이에 디자인 시스템 콘텐츠를 일관된 스키마로 재구성하고, AI가 Atlassian UI를 생성하는 데 필요한 수준의 컨텍스트를 제공하는 방식을 마련했습니다.

이러한 접근 방식을 "Structured Content"라고 부릅니다.

디자인 시스템에서의 Structured Content 구성 방식

구조화된 콘텐츠(Structured Content)란 넓은 의미에서, 자유로운 서술형 텍스트 대신 일관된 구조를 갖춘 기계가 읽을 수 있는 단위로 콘텐츠를 구성하는 방식을 의미합니다.

예를 들어, 아이콘에 대한 설명은 디자인 시스템 웹사이트, 코드, Figma 라이브러리 등 여러 곳에서 사용됩니다.

이때 동일한 메타데이터를 여러 도구와 위치에서 재사용함으로써, 정보를 중복 관리하다가 시간이 지나면서 서로 다른 내용으로 불일치가 발생하는 문제를 방지할 수 있습니다.

AI의 활용이 확대되면서 이러한 접근 방식을 더욱 발전시킬 필요가 있었습니다.

모든 컴포넌트, 토큰 및 기타 요소의 세부 정보는 일관되고 가벼우며, 기계가 읽을 수 있는 형식으로 관리되어야 합니다.

이를 위해 Atlassian Design System의 컴포넌트, 아이콘, 토큰, lint 규칙, 그리고 기본 가이드라인을 위한 새로운 콘텐츠 스키마를 개발했습니다.

이 스키마는 사용 방법, 코드 예제, props, 콘텐츠 표준, 접근성 요구사항 등을 포괄하는 일관된 형식을 제공합니다.

스키마는 코드와 함께 TypeScript 파일로 관리됩니다.

이 단일 소스를 기반으로 ADS MCP 서버용 콘텐츠, 디자인 시스템 스킬, DESIGN.md 파일 등 에이전트에 필요한 다양한 산출물을 생성할 수 있으며, 향후 필요한 다른 형식으로도 확장할 수 있습니다.

MCP 서버 도입 이전(에이전트가 코드베이스와 비정형 문서를 직접 탐색하던 방식), MCP 서버 도입 이후, 그리고 Structured Content 기반 MCP 서버를 적용한 이후의 AI 출력 결과를 비교하여 그 효과를 측정했습니다.

MCP 없이 작업하는 에이전트와 비교했을 때, Structured Content 기반 ADS MCP를 사용한 경우 코드 정확도는 4.9% 향상되었고, 오류 발생은 11% 감소했습니다.

또한 작업 완료 속도는 34% 빨라졌으며, 토큰 사용량은 16%, 도구 호출 횟수는 26% 감소했습니다.

더 정확하게, 더 빠르게, 더 효율적으로 작업할 수 있게 된 것입니다.

Structured Content를 적용한 경우, 생성된 코드에서 lint 오류가 더 적게 발생했습니다.

이는 AI 에이전트가 회사 전체의 모노레포와 길고 비정형적인 문서를 탐색하는 대신, 처음부터 정확한 컨텍스트를 제공받았기 때문으로 보입니다.

또한 필요한 컨텍스트를 즉시 제공함으로써, 작업은 더 빠르게 완료되었고 토큰 사용량도 줄어들었습니다.

이러한 수치적 성과 뒤에는 Structured Content가 사람과 AI 에이전트의 작업 방식에 실질적인 영향을 미친 사례들이 있습니다.

한 워크플로에서는 제품 개발자가 Cursor에서 ADS MCP를 사용해 카드 컴포넌트에 주요 액션(primary action)을 추가했습니다.

높은 수준의 프롬프트만 제공했음에도, AI는 오류 없이 카드 푸터에 적절한 버튼 변형(button variant)를 추가했습니다.

또 다른 사례에서는 MCP를 디자인 시스템의 Slack 지원 채널에 통합했습니다.

누군가 폼에서 버튼을 비활성화해야 하는지 질문하자, Structured Content는 올바른 가이드라인인 "검증 과정에서도 버튼은 활성화 상태를 유지해야 한다"는 내용을 제공했습니다.