Design Token 기반 Visual Coherence 확보를 통한 AI UI의 부자연함 해결

Why AI-Generated UIs Look 'Off' — and the One Principle That Fixes It

@kiwibreaksme2026년 6월 16일10분intermediate

AI 요약

Context

LLM의 로컬 생성 특성으로 인한 컴포넌트 간 디자인 불일치(Incoherence) 발생. 개별 요소의 완성도와 무관하게 Radius, Shadow, Spacing 등 설계 축(Axis)의 일관성 결여로 인해 'AI 생성물' 특유의 이질감 형성.

디자인 요소의 원자화: Radius, Color, Spacing 등 주요 축별로 단일 값 또는 Family를 정의한 Design Token 시스템 도입
Local Generation 한계 극복: 모델의 자율적 생성 대신 정의된 Token을 상속받도록 강제하는 Constraint 기반 프롬프팅 적용
Nested Radius 수식 적용: inner radius = outer radius - padding 공식을 통한 기하학적 정렬 및 시각적 왜곡 방지
Coherence Grader 구축: 파일 내 혼용된 디자인 축을 탐지하고 감점하는 정량적 검수 로직을 통한 품질 제어
Axis-based Linting: 디자인 불일치를 스타일 선택이 아닌 Lint Error 수준의 기술적 결함으로 처리하는 워크플로우 설계

실천 포인트

1. 디자인 축(Corner, Shadow, Accent, Spacing, Icon, Type, Motion)별 단일 값 정의

2. 하드코딩된 수치 대신 CSS Variable 등 Token 시스템 기반의 스타일 적용

3. 중첩 요소 설계 시 외곽 반지름과 패딩을 고려한 내부 반지름 계산식 적용

4. UI 생성 결과물에 대해 디자인 일관성을 측정하는 Coherence Score 검증 단계 추가

태그