AI를 위해 design.md를 만들었습니다. 그런데 AI는 디자인을 제대로 하지 못했습니다

최근 세일즈맵 design.md를 공개했습니다.

고객분들이나 세일즈·CX팀이 MCP나 바이브 코딩으로 페이지를 만들 때, 에이전트에게 링크 하나만 전달해도 세일즈맵다운 화면을 만들 수 있도록 하는 게 목표였어요.

그런데 만드는 과정에서 예상과 다른 결과를 마주했습니다.

첫 번째 버전은 무려 998줄이었습니다.

컬러 토큰, 간격, 컴포넌트, 안티패턴까지 AI가 알아야 할 내용을 최대한 상세하게 담았죠.

이 문서를 바탕으로 사내 대시보드를 개선하도록 했습니다.

 

결과는 실망스러웠습니다.

 

색상과 간격은 정확하게 바뀌었지만, 정작 사용자가 어떤 정보를 중요하게 봐야 하는지는 전혀 고려하지 않았습니다.

 

디자인의 일관성은 확보했지만, 화면의 목적에 맞는 개선까지 이어지지는 못한 거죠.

사실 정보의 우선순위를 정하는 규칙도 있었습니다. 다만 문서의 10번째 챕터에 있었어요.

앞부분에 색상과 컴포넌트 설명이 집중되어 있다 보니, AI가 화면의 구조를 개선하기보다 스타일을 변경하는 데 집중한 게 아닐까 싶었습니다.

 

그래서 design.md의 구조를 완전히 바꿨습니다.

AI가 화면의 목적에 맞게 정보의 우선순위와 레이아웃을 결정할 수 있도록, 디자인 의사결정 원칙을 271줄의 메인 문서에 먼저 배치했습니다. 구체적인 디자인 토큰은 4개의 파일로 분리했고요.

같은 작업을 다시 요청하자 결과가 달라졌습니다.

이번에는 AI가 필요한 문서를 스스로 찾아 읽고, 단순히 스타일을 바꾸는 데 그치지 않았습니다. 정보의 우선순위를 재정리하고, 불필요한 요소를 제거하면서 그 이유까지 설명했습니다.

 

물론 시행착오도 있었습니다.

'카드가 너무 많다'는 피드백을 받고 카드 사용을 금지하는 규칙을 추가했더니, 다음 결과물에서는 카드가 아예 사라져 버렸습니다 ㅜ.ㅜ

AI가 상황에 맞게 디자인하려면, 무조건 따르는 금지 규칙보다 맥락에 따라 적용할 수 있는 원칙이 필요하다는 것도 알게 됐습니다.

결국 이번 작업에서 중요했던 건 디자인 토큰과 규칙을 더 많이 알려주는 게 아니었습니다.

 

사용자가 원하는 화면의 목적을 AI가 이해하고, 그에 맞는 디자인 결정을 내릴 수 있도록 기준을 제공하는 것이었습니다.

 

세일즈맵 design.md: https://salesmap.kr/design.md

사용하시는 AI 에이전트에 넣어보시고, 예상과 다르게 동작하는 부분이 있다면 편하게 알려주세요!