AI가 만든 UI가 어딘가 '어색한' 이유 — 그리고 그걸 고치는 한 가지 원칙

겪어보셨을 겁니다. AI한테 대시보드를 만들어 달라고 하면, 나오긴 나와요. 그런데… 묘하게 어색합니다. 컴포넌트 하나하나는 멀쩡해요. 버튼은 버튼답고, 카드는 카드답죠. 그런데 전체를 보면 "생성된 티" 가 납니다. UI를 찍은 스톡 사진 같달까요.

저도 한동안은 "컴포넌트를 더 잘 만들면" 또는 "프롬프트에 감각을 더 넣으면" 해결될 거라 생각했습니다. 아니더군요. 실제 디자인 문헌 — Refactoring UI, Material Design 3, Apple HIG, IBM Carbon, WCAG, Financial Times의 시각 어휘집 — 을 파고들수록 진짜 원인엔 이름이 있었습니다.

정합성(coherence)의 부재.

부품들이 서로 안 맞는 겁니다. 그리고 한번 보이기 시작하면, 다시는 안 보이게 할 수가 없어요.

전에 디자이너 없이 바이브코딩으로 토스급 UI 만드는 법을 다뤘는데, 이번 글은 그 아래의 '왜' — "어색함"의 실제 메커니즘과 그걸 고치는 한 가지 원칙을 팝니다.