웹 UI, 페이지, 대시보드, 랜딩페이지를 만들 때 사용. 디자인 씽킹, 타이포/컬러/모션 가이드라인 적용. AI slop 방지.
UI를 만들기 전에 반드시 미적 방향을 결정한다:
핵심: **의도성(intentionality)**이 중요하지, 강도(intensity)가 아니다. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 좋다 — 일관성 있게 실행하면 된다.
작동하는 코드(HTML/CSS/JS, React, Vue 등)를 만든다. 결과물은:
AI는 학습 데이터에서 가장 빈번한 패턴을 기본값으로 선택한다. 그 결과 "AI가 만든 티"가 나는 제네릭한 결과물이 나온다. 독창성을 위해 이 기본값들을 의식적으로 피한다:
Inter, Roboto, Arial, system-ui (기본 시스템 폰트)
Space Grotesk (AI가 자주 선택하는 폰트)
독특한 디스플레이 폰트 + 세련된 본문 폰트를 페어링한다. 매번 다른 폰트를 선택한다.
보라색 그라디언트 + 흰색 배경 (AI의 대표적 클리셰)
지배적 색상 + 날카로운 액센트가 소심하게 균등 분배된 팔레트보다 효과적이다.
예측 가능한 카드 그리드, 동일한 섹션 반복, 좌우 대칭 히어로
:root {
--color-primary: #...;
--color-accent: #...;
--color-bg: #...;
--color-text: #...;
}
단색 배경을 기본값으로 쓰지 않는다. 분위기와 깊이감을 만든다:
구현 복잡도를 미적 비전에 맞춘다: