v0.dev나 Cursor로 대시보드를 뚝딱 만들어본 경험이 있다면 이 느낌을 알 것이다. 버튼은 버튼답고, 카드는 카드답다. 그런데 화면 전체를 보면 뭔가 어색하다. 마치 스톡 사진처럼, '생성된 것'의 냄새가 난다. 오랫동안 이 문제의 원인을 '프롬프트의 디테일 부족'이나 '컴포넌트 품질'에서 찾으려 했는데, dev.to에 올라온 분석 아티클을 보고 생각이 바뀌었다. 진짜 원인은 Incoherence, 즉 부품들이 서로 합의하지 않은 상태다.
구체적으로 상상해보자. 한 화면에 2px 직각 모서리 카드, 알약 모양 버튼, 파란색 주요 액션 옆에 보라색 '업그레이드' 링크, Lucide 아이콘(outline)과 채워진 이모지가 뒤섞여 있고, 그림자 광원은 제각각이다. 각각의 선택은 개별적으로 방어할 수 있다. 하지만 디자이너는 절대 같은 화면에서 이 모든 결정을 동시에 내리지 않는다. 디자이너는 코너 스타일 하나, 액센트 컬러 하나, 아이콘 세트 하나, 광원 방향 하나를 정하고 그걸 반복한다. 그 반복이 '한 사람의 머리에서 나온 것'이라는 신호를 만든다.
왜 AI는 이걸 못할까? 언어 모델은 UI를 국소적으로 생성한다. 카드를 쓰고, 버튼을 쓰고, 모달을 쓴다—각각을 독립적인 그럴듯한 스니펫으로. 40줄 위에 pill 버튼을 썼다는 사실을 '기억'하며 다음 버튼을 생성하지 않는다. 각 컴포넌트는 학습 데이터의 평균으로 회귀하고, '버튼의 평균'과 '카드의 평균'은 처음부터 조율된 적이 없다. 인간 디자이너는 머릿속에 작은 결정 묶음을 들고 다닌다—이 제품은 soft-corner, blue-accent, 8px 그리드—그리고 모든 새 요소가 그걸 상속받는다. 결정이 끈적하게(sticky) 유지된다.
해법은 모델을 더 '취향 있게' 만드는 게 아니다. 끈적한 결정을 문서화하고, 모델이 새로 발명하는 대신 그걸 복사하게 만드는 것이다. 해당 아티클이 제시하는 핵심 원칙은 하나다: 각 디자인 축마다 정확히 하나의 값 또는 패밀리를 선택하고, 토큰으로 인코딩한 뒤, 모든 곳에 적용하라. 일관성이란 모든 화면이 동일하다는 뜻이 아니다. 같은 결정이 반복된다는 뜻이다.
실무에서 통제해야 할 디자인 축은 크게 일곱 가지다. 코너 반경(sharp/soft/pill 중 하나), 그림자(단일 광원, 단일 색조), 액센트 컬러(강조는 하나만), 스페이싱 단위(8px 그리드), 아이콘 스타일(한 패밀리, 한 가지 fill 모드), 타입 스케일(모듈러 스케일, 폰트 패밀리 최대 2개), 모션(duration 세트와 easing 패밀리 하나). 이 중 하나라도 혼용되면 린트 에러처럼 취급해야 한다—스타일 선택이 아니라 일관성 위반으로.
코너 반경 하나만 봐도 실수가 쌓인다. 반경을 매직 넘버로 쓰지 말고 토큰으로 정의해야 한다. --radius-sm: 8px, --radius-md: 12px, --radius-lg: 16px 식으로 스케일을 만들고 전체에 참조시키면, AI가 rounded-none 패널과 rounded-full 버튼을 조합하는 실수를 막을 수 있다. 여기에 놓치기 쉬운 두 번째 규칙이 있다: 중첩된 둥근 요소는 공통 중심을 공유해야 한다. inner radius = outer radius − padding 공식을 적용하지 않으면 안쪽 요소의 모서리가 컨테이너 곡선 밖으로 튀어나온다. Apple의 Liquid Glass 시스템이 이 동심원 수학을 공식화한 것도 같은 이유다.
그림자와 컬러도 마찬가지다. box-shadow 하나로 뚝딱 처리하면 깊이가 가짜처럼 보인다. 여러 레이어를 쌓되 순수 검정 대신 표면 색조로 물들인 저불투명도 레이어를 쌓고, 광원은 관례상 왼쪽 위 하나로 고정한다. 고도가 높아질수록 offset과 blur는 키우고 opacity는 낮춘다. 컬러는 더 단순하다—액센트 하나, 브랜드 색조로 살짝 물든 회색 램프, 의미 전달용 semantic 4색(success/warning/error/info). 새 요소를 강조할 때마다 새 색을 꺼내는 '무지개 UI'는 이 규칙을 어긴 결과다.
이 모든 것이 AI 워크플로우에 주는 시사점은 명확하다. v0.dev나 Cursor로 프로토타입을 빠르게 뽑는 것과, 그걸 실제 제품 수준으로 고도화하는 것 사이에는 디자인 토큰 레이어가 반드시 들어와야 한다. 프로토타이핑 단계에서는 어색함을 눈감을 수 있지만, 컴포넌트 수가 늘어날수록 불일관성은 기하급수적으로 쌓인다. 빠른 생성이 오히려 기술 부채를 만드는 아이러니다.
실용적인 처방은 이렇다. AI에게 UI를 요청하기 전에 디자인 축별 결정을 CSS 커스텀 프로퍼티나 Tailwind 설정으로 먼저 문서화하라. 그리고 AI에게 '새로 발명하지 말고 이 토큰을 참조하라'는 제약을 시스템 프롬프트나 컨텍스트로 전달하라. 토큰이 없으면 모델은 매번 평균으로 회귀하고, 부품들은 서로를 모른 채 조립된 채로 남는다. AI의 한계가 아니라, 설계자가 끈적한 결정을 쥐고 있지 않은 탓이다.
AI 도구가 UI 생성의 속도를 획기적으로 높인 것은 사실이다. 하지만 일관성은 속도가 아니라 결정의 반복에서 나온다. 앞으로 디자인 시스템과 AI 프롬프트 엔지니어링의 결합—토큰을 AI가 참조할 수 있는 구조화된 컨텍스트로 제공하는 방식—이 더 정교해질수록, AI 생성 UI의 품질도 따라서 올라갈 것이다. 지금 당장은 사람이 먼저 설계 축을 정의하고, AI는 그 결정 안에서만 자유로워야 한다.