한 줄 정의
천편일률적인 AI 생성물(AI Slop)과 판에 박힌 폰트·그라디언트 패턴을 배제하고, 대담한 톤 선택과 독창적인 타이포그래피·공간 구성을 통해 프로덕션 등급의 인터페이스를 생성하는 프론트엔드 디자인 가이드라인.
핵심 요지
- AI Slop 미학 탈피: 흔히 사용되는 Inter, Roboto, Arial 폰트 및 흰색 배경 위 보라색 그라디언트 같은 진부한 패턴을 엄격히 금지합니다.
- 11가지 극단적 스타일 톤 선언: Brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft pastel, industrial 등 11가지 미적 톤 중 극단적이고 명확한 방향을 선제적으로 선택합니다.
- 차별화된 타이포그래피 & 공간 구성: 독특한 디스플레이 폰트와 본문 폰트 짝짓기, 비대칭 레이아웃, 대각선 흐름, 그리드를 깨는 조형 요소, 여유로운 여백 또는 통제된 밀도를 활용합니다.
- 모션 및 시각적 깊이 부여: 단순 단색 배경 대신 그라디언트 메시, 노이즈 텍스처, 그레인 오버레이, 커스텀 커서, 시차(staggered) 등장 애니메이션 및 CSS 전용/Motion 라이브러리를 적용합니다.
상세
프론트엔드 디자인 스킬은 AI 코딩 도구가 획일적인 UI 템플릿에 수렴하지 않도록 강제하는 미학 가이드라인입니다. 디자인 씽킹 단계에서 목적(Purpose), 톤(Tone), 제약 조건(Constraints), 차별화(Differentiation)의 4대 관점을 수립한 뒤 코딩을 개시합니다.
대담한 맥시멀리즘(Maximalism)과 정교한 미니멀리즘(Minimalism) 모두 허용하되 핵심은 의도성(intentionality)입니다. 남용되는 시스템 폰트를 피하고, 독창적인 디스플레이 폰트를 매칭하여 시각적 인상을 강인하게 각인시킵니다.
또한 반응형 미세 상호작용(Micro-interaction)과 스크롤 트리거를 잘 연출하여 “누군가가 이 사이트를 방문했을 때 기억할 단 한 가지 요소”를 선명하게 제공합니다.
예시
- Editorial Style 폰트 매칭: Serif 디스플레이 폰트와 고대비 모노스페이스 본문 폰트를 조합하고, 그레인 노이즈 오버레이 텍스처와 비대칭 컬럼 레이아웃을 조합한 인터페이스 생성.
- Brutalist Dark Theme 구성: CSS 변수를 활용한 고대비 기하학적 패널, 장식용 두꺼운 테두리, 커스텀 호버 커서 효과를 정밀 적용.
충돌
- 소심하고 균등한 팔레트 분포: 여러 색상을 어설프게 균등 분배하면 디자인 세련미가 저하되므로 주도적인 메인 컬러와 극명한 악센트 색상으로 명암 대비를 강하게 부여해야 합니다.
- Space Grotesk 등 특정 폰트로의 세대적 수렴: AI가 미학 튜닝을 거치며 무의식적으로 범용 폰트(Space Grotesk 등)로 수렴하는 편향을 차단하고 턴마다 새로운 미학과 테마를 번갈아 채택해야 합니다.