AI가 만든 UI를 보면서 "뭔가 어색한데"라는 느낌, 꽤 자주 받는다. 오늘 읽은 글은 그 원인을 꽤 정확하게 짚었다. LLM은 UI를 국소적으로 생성한다. 40줄 위에서 알약형 버튼을 만들었다고 해서 그 아래 컴포넌트가 그걸 기억하진 않는다. 각자 학습 데이터 평균값으로 돌아가기 때문에, 모서리 radius가 제각각이고, 그림자 방향이 다르고, 강조색이 페이지마다 미묘하게 다른 색이 된다.
글에서는 이걸 '정합성(coherence) 부재'라고 부른다. 해법은 단순하다. border-radius, 그림자 광원, 강조색, 간격 단위(8px 그리드), 아이콘 패밀리, 타입 스케일, 컨트롤 높이 — 이 7개 축에 값 하나씩만 고정해두면 된다. AI한테 새로 만들지 말고 그 값을 복사하게 하는 것. StyleSeed라는 MIT 오픈소스 룰셋은 이 원칙을 llms.txt 한 줄로 에이전트에 주입할 수 있게 해준다.
나는 바이브코딩할 때 프롬프트를 계속 다듬는 방식으로 어색함을 잡으려 했는데, 사실 그게 아니라 design-tokens.css 파일 하나를 먼저 만들고 UI 생성 프롬프트 앞에 고정 헤더로 붙이는 게 맞는 순서였다. 모델을 바꾸거나 프롬프트를 정교하게 하는 것보다, 판단 기준 자체를 코드로 고정해두는 쪽이 훨씬 통제 가능하다.
이 소식을 보면서 벤치마크보다 직접 붙이고 디버깅할 수 있는 통제 가능성이 우선이라는 점에 대해 다시 생각하게 됐다.