AI가 만든 화면은 왜 다 비슷할까...아틀라시안, 구글 'DESIGN.md' 실전 검증 결과 공개...파일 하나로 '브랜드 감각' 입히는 데는 효과, 다만 실제 개발 현장에선 자체 도구보다 토큰 약 92% 더 소모

[한국정보기술신문] 인공지능(AI)에 화면 디자인을 맡기면 결과물이 하나같이 비슷해 보인다는 지적이 이어지는 가운데, 협업 소프트웨어 기업 아틀라시안(Atlassian)이 이 문제를 겨냥한 새 파일 형식 'DESIGN.md'를 직접 시험한 결과를 공개했다. 아틀라시안 디자인 시스템팀의 카일러 홀(Kylor Hall)과 앤드루 캠벨(Andrew Campbell)은 6월 15일 회사 블로그를 통해, 이 형식을 자사가 이미 갖춘 도구들과 나란히 놓고 검증한 내용을 전했다. 결론은 "이식성은 뛰어나지만, 그 대가로 정교함과 효율은 떨어진다"는 것이다. 디자인 시스템은 색과 글꼴, 간격, 버튼 같은 구성 요소 등 제품의 시각 규칙과 재사용 부품을 한데 모아 놓은 것을 말한다.

AI가 사용자 화면(UI)을 만들어 내면 결과물이 서로 닮는 경향이 있다. 그러데이션이 들어간 버튼, 모두 대문자로 쓴 제목, 어디서나 보이는 밋밋한 카드형 배치, 아무도 요청하지 않은 마우스 반응 효과 등이다. 기능은 하지만 특정 브랜드처럼 보이지는 않는다. 디자인 업계는 이렇게 작동은 하되 개성이나 의도가 없는 결과물을 '슬롭(slop)'이라고 부르기 시작했다. 원인은 어렵지 않게 짚을 수 있다. 브랜드와 구성 요소, 패턴에 대한 맥락이 없으면 AI는 자신이 학습한 모든 것의 평균값을 내놓기 때문이다. 평범한 정보를 넣으면 평범한 결과가 나온다는 것이다.

DESIGN.md는 구글이 자사 디자인 도구 '스티치(Stitch)'를 위해 만든 오픈소스 마크다운 형식이다. 마크다운은 간단한 기호로 서식을 넣는 텍스트 작성 방식을 말한다. 이 파일은 한 팀의 브랜드와 UI 패턴을 옮겨 담은 이식형 스냅샷으로, AI에게 주는 지시문에 이 파일을 함께 넣으면 생성되는 결과물이 그 제품처럼 보이기 시작한다는 것이 핵심 발상이다. 슬롭을 손쉽게 바로잡는 방법으로 주목받아 왔다.

파일은 두 부분으로 나뉜다. 앞부분은 기계가 읽는 영역으로, 색과 글꼴, 모양 같은 디자인 값을 정해 놓은 최소 단위인 '디자인 토큰'을 나열한다. 뒷부분은 사람과 AI 에이전트가 함께 읽는 영역으로, 색·간격·배치·입체감·구성 요소 등에 대해 왜 그렇게 디자인했는지를 설명한다. 아틀라시안은 이 형식이 시스템의 '의도'를 담을 뿐, 시스템 전체의 세부 사항이나 실제 운영에 쓰이는 완전한 기술 명세는 아니라고 설명했다. 기존 코드 라이브러리나 코딩 표준을 지키게 하는 검사 도구, 디자인 도구에 담긴 상세 설계 등은 포함하지 않는다는 것이다.

아틀라시안은 그동안 자사 디자인 시스템을 AI가 소화하기 좋게 다듬어 왔다. 에이전트가 필요할 때마다 관련 정보를 불러올 수 있게 해 주는 연결 방식인 'MCP 서버'와, 잘게 나눈 안내서 묶음인 'AI 스킬(skill)'이 그것이다. 그래서 DESIGN.md가 등장했을 때, 이 정적인 파일 하나가 기존 도구들 사이에서 어디에 들어맞을지 확인하고자 했다는 것이 회사 측 설명이다.

시험대는 한 달 전 미국 애너하임에서 열린 자사 행사 '팀 26(Team '26)'의 기조연설 시연에서 마련됐다. 이 시연에서는 디자인 도구 '피그마 메이크(Figma Make)'가 아틀라시안의 데이터 도구 '팀워크 그래프'를 활용해 맞춤형 대시보드를 만들어 냈다. 회사는 이 대시보드가 내부 서버나 도구에 기대지 않고도 단번에 자사 디자인 언어에 맞게 나오기를 바랐고, 이 상황이 DESIGN.md를 시험하기에 적합한 사례였다고 밝혔다.

결과는 대체로 좋았다는 평가다. 아틀라시안에 따르면 DESIGN.md는 생성된 화면을 획일적인 '슬롭'에서 한눈에 알아볼 수 있는 아틀라시안 스타일로 바꿔 놓았다. 색과 간격, 모양, 글꼴에서 회사가 기대하는 값을 썼고, 구성 요소에 입체감을 주는 방식도 자사 시스템과 맞아떨어졌다는 것이다. 회사는 이 파일에 담긴 고수준 지침이 테일윈드(Tailwind)나 셰이드시엔(Shadcn) 같은 널리 쓰이는 라이브러리를 손봐 화면을 처음부터 만들어 내는 데 안성맞춤이라고 설명했다. 이처럼 단발성 시제품(프로토타입)을 만드는 데는 잘 맞았다는 것이다.

문제는 규모가 큰 실제 서비스 개발이었다. 이미 구축된 디자인 토큰과 구성 요소 묶음을 쓰면서, 엄격한 검사 규칙과 형식 점검으로 코딩 표준이 강하게 적용되는 실제 운영 환경(프로덕션)은 처음부터 만드는 작업과는 전혀 다른 조건이다. 이런 환경에서 DESIGN.md는 아틀라시안이 자체적으로 만들어 개발 과정에 심어 둔 MCP 서버·스킬보다 성능이 떨어졌다. 사용자 로그인 화면을 만드는 간단한 작업에서, DESIGN.md만을 디자인 지침으로 쓸 경우 토큰을 약 92% 더 소모했고 결과가 나오기까지 더 오래 걸렸으며, 실행할 때마다 토큰 소비량의 편차도 약 2.7배 컸다. 여기서 토큰은 AI가 글을 처리하는 최소 단위로, 많이 쓸수록 비용과 시간이 늘어난다.

아틀라시안이 공개한 비교 수치를 보면 차이가 뚜렷하다. 아무 맥락도 주지 않았을 때는 디자인 시스템 맥락 확보율이 약 5%에 그쳤고 평균 420만 개의 토큰과 6분 19초, 43번의 처리 과정을 거쳤다. 자사 MCP를 썼을 때는 확보율 약 80%에 토큰 375만 개, 5분 1초, 35.1번으로 가장 효율적이었다. 자사 스킬은 확보율 약 80%에 토큰 443만 개, 5분 23초, 36번이었다. 반면 DESIGN.md는 맥락 확보율이 약 30%에 머물렀는데도 토큰은 721만 개, 시간은 6분 46초, 처리 과정은 45.3번으로 가장 많았다. 다만 아틀라시안은 이 결과가 결정적인 것으로 받아들여져서는 안 되며 이 글은 연구 논문이 아니라고 선을 그었다. 모델과 지시문, 디자인 시스템, 환경, 맥락 자료의 품질에 따라 결과가 달라진다는 것이다.

회사는 DESIGN.md의 한계를 세 가지로 정리했다. 첫째, 맥락을 필요할 때 나눠 주는 것이 아니라 매번 한꺼번에 전달한다는 점이다. MCP 서버는 특정 구성 요소에 대한 지침만 골라 불러올 수 있어, 수백 개의 아이콘이나 방대한 디자인 토큰을 필요하지 않을 때는 실어 나르지 않는다. 반면 DESIGN.md는 언제나 모든 것을 불러온다. 이 때문에 처음부터 비용이 크고 응답이 느리며, 담을 수 있는 분량을 일찍 넘겨 결과의 정확도가 떨어질 수 있다.

둘째, 파일을 짧게 유지하려다 맥락을 잃는다는 점이다. 아틀라시안은 필요할 때 불러오는 MCP·스킬용으로는 약 2.5MB 분량의 지침을 마련해 두는데, DESIGN.md는 한꺼번에 실리는 만큼 훨씬 짧게 줄여야 한다. 그 결과 파일은 80KB, LLM 토큰으로 약 1만 9800개(머리말을 뺀 본문은 약 1만 700개) 수준으로, 업계에서 찾아본 사례들과 비교하면 오히려 큰 편이라는 것이 회사의 설명이다. 이 크기를 맞추려고 50여 개 구성 요소의 사용 지침 상당 부분과 기초 지침을 대폭 덜어냈고, 사용 빈도가 낮은 디자인 토큰도 여럿 잘라냈다. 이렇게 맥락이 빠지면 에이전트는 정확도가 떨어지는 결과를 내놓거나, 부족한 정보를 스스로 찾아 나서게 된다. 실제로 DESIGN.md를 받은 에이전트는 명세에 없는 사용법을 알아내려고 구성 요소의 실제 구현 코드를 뒤지는 경향을 보였다.

셋째, 이 형식이 디자인 시스템의 내부를 드러낸다는 점이다. DESIGN.md는 디자인 시스템을 글로 다시 풀어 쓴 스냅샷으로, 시스템을 처음부터 새로 구현할 수 있도록 원리와 구성 요소 명세를 담는다. 그런데 이미 자리 잡은 운영 환경에서는 이런 정보가 불필요하거나, 심하면 에이전트가 나중에 부담이 될 코드(기술 부채)를 만들어 내도록 잘못 이끌 수 있다. 버튼 하나를 만들 때도, 색과 글자색 등 세부 스타일을 일일이 풀어 쓴 명세를 읽고 해석하기보다는 이미 있는 구성 요소를 가져다 쓰는 편이 낫다는 것이다. 공용 구성 요소를 쓰게 해야 한곳만 고치면 전체 코드에 반영돼 유지·보수가 쉬워지기 때문이다. DESIGN.md는 이런 코드 사용 지침을 일부러 뺀 채 재구현 명세만 주는 탓에, 시험에서 기존 시스템을 쓰기보다 구성 요소를 새로 만들어 내는 경우가 더 잦았다. 아틀라시안은 자사 MCP·스킬이 시스템을 다시 만드는 안내서가 아니라 기존 시스템을 쓰는 사용설명서 역할을 하며, 여기에 토큰을 전혀 쓰지 않고도 코딩 품질을 강제하는 검사 규칙을 곁들여 더 나은 결과를 얻는다고 설명했다.

그럼에도 아틀라시안은 이 형식의 단순함과 이식성이 독특한 강점이라며, 특히 유용한 상황 네 가지를 꼽았다. 시스템의 시각적 방향과 느낌을 정하는 고수준의 예술적 방향 제시, 새 도구를 시험하거나 백지에서 시작하는 신속한 시제품 제작, 미리 만들어진 구성 요소를 브랜드에 맞게 손보는 일부 AI 도구와의 상호 운용, 그리고 고객이 자기 브랜드를 손쉽게 설명해 보고서·차트·대시보드 같은 화면이 고객의 브랜드처럼 보이게 하는 '고객 테마링'이다. 회사는 이들의 공통점이 기존 디자인 시스템의 결과물을 쓸 수 없거나 쓰기 마땅치 않은 환경이라는 점에 있다고 정리했다.

아틀라시안은 자사 DESIGN.md 파일을 홈페이지(atlassian.design/DESIGN.md)에 공개하고, 이 표준을 지지하는 에이전트에 넣으면 생성 결과가 한층 아틀라시안다워질 것이라고 밝혔다. 이 파일은 구성 요소를 어떻게 그릴지 알려 주는 비표준 속성을 일부 포함하고, 현재 표준이 지원하지 않는 어두운 화면(다크 모드)용 변형을 따로 내놓는 등 표준과 조금 다른 부분이 있다. 회사는 개발자 협업 공간인 깃허브에 의견을 냈고, 일부 제안은 이미 표준에 반영됐다고 덧붙였다.

아틀라시안은 DESIGN.md가 더 풍부한 디자인 시스템 도구를 대체하는 것이 아니라 시스템을 옮겨 담는 이식성 스냅샷으로서 유용하다고 결론지었다. 에이전트가 MCP나 스킬을 지원한다면 그쪽이 더 적은 비용으로 더 나은 결과를 준다는 것이다. 다만 서로 다른 환경을 넘나드는 이식성, 고객 테마링, 백지 상태의 시제품 제작에는 잘 짜인 DESIGN.md가 의미 있는 진전이 될 수 있다고 봤다.