디자인 시스템 없이 AI로 화면 만들면 벌어지는 일

바이브코딩으로 화면을 만들면 속도는 문제가 아닙니다. 문제는 만든 화면을 나란히 놓고 볼 때 나타납니다.

기능은 모두 정상인데, 화면마다 미묘하게 다릅니다. 버튼 모양이 제각각이고, 같은 의미의 상태 표시에 서로 다른 색이 칠해져 있습니다.

그리고 그 차이가 쌓이면, 화면을 본 사람은 만든 과정을 모른 채로도 이렇게 말합니다. AI가 만들었네.

원인을 화면 하나하나에서 찾으면 답이 나오지 않습니다. 개별 화면은 그 자체로 나쁘지 않기 때문입니다.

이 글에서는 'AI 티'가 생기는 구조적 이유와, 그 해법인 디자인 시스템을 정리합니다.

하나. AI 티의 정체는 화면마다 다른 기본값입니다

AI는 요청을 페이지 단위로 처리합니다. "로그인 화면 만들어 줘"라고 하면, 그 화면 안에서 완결된 코드를 내놓습니다.

이때 AI는 요청을 받을 때마다 그 시점에 가장 그럴듯한 기본값을 고릅니다. 색, 모서리 둥글기, 글자 크기, 버튼 모양이 대표적입니다.

공용 규칙이 이미 있는 프로젝트에서도 상황은 같습니다. 기존 공용 코드를 두고, 그 자리에서 새 스타일을 만드는 일이 흔하게 일어납니다.

따르지 않아도 화면이 정상 동작한다면, 규칙이 지켜질 이유가 없습니다. 이것은 사람에게도 마찬가지입니다.

문제는 요청이 거듭될수록 커집니다. 같은 "대기 중" 상태가 어느 화면에서는 주황, 다른 화면에서는 빨강이 됩니다. 페이지가 늘어날수록 화면 사이의 어긋남도 함께 늘어납니다.

둘. 순서를 바꿔 디자인 시스템을 먼저 만듭니다

디자인 시스템은 화면 부품의 규격을 한 곳에 모아 정의한 기준입니다. 색, 글자 크기, 버튼, 입력창, 표, 알림 창이 그 부품에 속합니다.

기존 방식은 화면을 먼저 만들고, 비슷한 조각을 나중에 묶었습니다. 이 순서를 뒤집습니다. 기준을 먼저 정의하고, 화면은 그 기준을 가져다 조합합니다.

규칙은 단순합니다. 새 화면은 기준에 정의된 값과 부품만 사용합니다.

필요한 부품이 없으면 화면 안에서 만들지 않습니다. 기준에 먼저 추가한 다음, 그것을 가져다 씁니다.

이렇게 하면 새로 추가된 부품도 같은 색과 모서리, 글자 크기로 만들어집니다. 화면이 하나 늘 때마다 부품 목록이 자라고, 다음 화면은 그만큼 빨라집니다.

유지보수의 차이는 더 큽니다. 부품 하나를 고치면 그것을 사용하는 모든 화면이 한 번에 바뀝니다. 수십 개 파일을 찾아다니며 같은 수정을 반복하는 일이 사라집니다.

셋. 기준 밖의 값은 구조로 차단합니다

기준을 문서로 적어 두는 것만으로는 부족합니다. 앞에서 확인했듯, 지키지 않아도 동작한다면 규칙은 무시됩니다.

그래서 기준에 없는 값은 화면에 나오지 않게 막습니다. 기준에 없는 색을 지정하면 그 색은 칠해지지 않습니다.

"쓰지 마세요"가 아니라 "쓸 수 없다"로 바꾸는 것입니다. 화면을 열자마자 빠진 색이 보이므로, 어긋남은 즉시 잡힙니다.

AI가 작업할 때 읽는 규칙 문서에도 원칙과 금지 목록을 함께 적습니다. 그라데이션 배지, 카드 그림자, 대문자 라벨 같은 장식이 대표적인 금지 항목입니다.

검증은 둘로 나뉩니다. 잴 수 있는 것은 브라우저 자동화 도구가 화면마다 스크린샷을 찍어 검사합니다. 화면 옆으로 넘치는 요소, 기준 밖의 색, 배경과 구분이 안 되는 흐린 글자가 여기에 해당합니다.

잴 수 없는 것은 사람이 직접 사용해 봐야 보입니다. 동선이 어색한 화면, 눌러야 할지 모호한 요소는 자동 검사의 영역 밖입니다.

시간을 쓸 곳은 화면이 아니라 기준입니다

디자인 시스템이 디자인 감각을 대신하지는 않습니다. 색 배합과 배치의 최종 판단은 여전히 사람의 몫입니다.

다만 순서가 바뀌면 문제가 단순해집니다. 기준을 정의하고, 부족한 부품은 기준에 먼저 추가하고, 화면은 그것을 조합합니다.

이 구조에서 화면을 잘 만드는 일은 요청마다 반복하는 노력이 아닙니다. 기준을 한 곳에서 다듬는 작업으로 모입니다. 기준이 좋아지면 모든 화면이 함께 좋아집니다.

일관성이 유지되면, AI가 만든 화면은 AI처럼 보이지 않습니다.

에그코드는 자체 서비스를 직접 운영하는 개발사입니다. AI 코딩 도입과 화면 개선을 고민 중이시라면, 실무 경험을 바탕으로 함께 고민하겠습니다.

함께 읽어보세요 — UX 뜻과 UI 뜻의 차이, 사용자 경험을 만드는 16가지 요소 · 바이브코딩 실무 순서 8단계 · 어드민 뜻부터 관리자 화면 UX 원칙 10가지 · 에그코드 웹 개발 서비스