AI로 만든 화면이 다 비슷해 보이는 이유 — 디자인 시스템과 Design.md로 통제하기

AI 코딩 도구로 앱 하나를 한 시간 만에 만드는 일이 흔해지면서, 제품 간 차이는 코드보다 화면의 완성도에서 드러나게 됐습니다. 그런데 AI에게 기준 없이 화면을 맡기면 결과는 늘 가장 평균적인 모양으로 수렴합니다. 이 자료는 그 해법으로 디자인 시스템을 먼저 정하고, 그 규칙을 Design.md라는 문서로 AI에 반복해 읽히라고 제안합니다.

이 문서는 NotebookLM(노트북 LM)으로 자료를 조사해 만든 문서입니다.

• 코드 생산이 쉬워질수록 차별점은 UI/UX의 느낌으로 옮겨 갑니다
• 기준이 없으면 AI는 평균값을 냅니다. 통일감 없는 색상, 제각각인 모서리가 그 증상입니다
• Design.md는 기계가 읽는 값(YAML)과 AI가 판단할 때 쓰는 이유(마크다운)를 함께 담습니다
• 색상 5~6개, 폰트 크기 6단계, 8px 간격처럼 선택지를 좁게 제한할수록 일관성이 생깁니다
• 대화가 길어지면 AI가 규칙을 잊으므로 틀어질 때마다 문서를 다시 넣어 줍니다

코드가 흔해진 뒤의 차별점

"손 빠른 신입"이라는 비유가 정확합니다. 일은 빠른데 회사의 기준을 모르니, 화면마다 버튼 모서리와 회색 톤이 조금씩 다릅니다. 이는 모델 성능의 문제가 아니라 기준을 주지 않은 쪽의 문제입니다. 사용자가 0.5초 만에 품질을 판별한다는 수치는 자료 기준입니다.

Design.md와 기본 도구

Design.md 구조에서 중요한 것은 아래 칸, 즉 이유입니다. 값만 주면 AI는 정해진 색을 쓰긴 하지만, 목록에 없는 상황에서는 다시 임의로 고릅니다. "이 색은 신뢰를 주려고 쓴다"는 이유가 있으면 새 화면에서도 비슷한 판단을 합니다. 자간·행간 수치는 자료가 제시한 값이며, 글꼴과 화면 크기에 따라 조정이 필요합니다.

제약이 일관성을 만든다

"티셔츠 사이즈 법칙"은 AI와 일할 때 특히 효과가 큽니다. 선택지가 50개면 AI는 그중 아무거나 고르고, 6개면 틀려도 크게 틀리지 않습니다. 레퍼런스에서 규칙을 뽑는 방법은 출발점을 잡는 데 쓸모가 있지만, 추출한 것은 간격 체계나 위계 같은 원리에 그쳐야 합니다. 다른 서비스의 화면을 그대로 복제하면 상표·저작권 문제가 생길 수 있으므로 브랜드 요소는 반드시 자기 것으로 바꿔야 합니다. 도구와 모델 이름은 자료 작성 시점 기준입니다.

디자이너의 역할 변화

"2명이 50명의 결과물"이라는 비교는 자료의 주장이고, 실제로는 제품 범위에 따라 크게 다릅니다. 그보다 현실적인 변화는 디자이너가 화면 하나하나보다 규칙을 만드는 데 시간을 쓰게 된다는 점입니다. 규칙이 잘 서 있으면 개발자가 AI로 만든 화면도 같은 제품처럼 보입니다.

자주 묻는 질문

Design.md는 어디에 두고 어떻게 쓰나요? 프로젝트 저장소 루트에 두고, 작업을 시작할 때마다 AI에 먼저 읽히는 방식입니다. 화면이 틀어지면 다시 넣어 줍니다.

디자이너가 없어도 디자인 시스템을 만들 수 있나요? 자료는 무료 컴포넌트, 아이콘 세트, 기본 폰트를 조합해 비디자이너도 시작할 수 있다고 봅니다. 핵심은 선택지를 줄이는 것입니다.

색상은 몇 개가 적당한가요? 자료는 5~6개로 제한하라고 권합니다. 무채색 몇 단계와 강조색 하나로 시작해 필요할 때만 늘리는 편이 일관성을 지키기 쉽습니다.

레퍼런스 사이트를 분석해도 괜찮나요? 간격·위계 같은 원리를 참고하는 것은 일반적이지만, 화면을 그대로 복제하면 권리 문제가 생길 수 있습니다. 브랜드 요소는 직접 정해야 합니다.

저희가 이 이야기를 하는 이유

에버스톤은 앱과 웹을 만들면서 AI 코딩 도구를 쓰고, 이 사이트도 색상과 간격을 토큰으로 정해 두고 작업합니다. 규칙 없이 AI에 화면을 맡겼을 때 페이지마다 톤이 흩어지는 문제는 저희도 겪는 일이라, 기준을 문서로 먼저 세우라는 이 자료의 순서에 공감합니다.

인용한 수치·도구·사례는 원 자료 기준이며, 저희가 검증한 내용이 아닙니다.