프론트엔드 디자인 스킬

개요

LLM은 기본적으로 "분포 수렴(Distributional Convergence)" 현상으로 인해 Inter 폰트, 보라색 그라데이션, 흰색 배경, 최소한의 애니메이션 등 안전하고 평범한 디자인을 생성합니다. 이 스킬은 이러한 "AI 슬롭(AI Slop)" 미학을 피하고, 창의적이고 독특한 프론트엔드를 만들도록 안내합니다.

핵심 원칙

<frontend_aesthetics> 일반적이고 "분포 중심적인" 출력으로 수렴하는 경향을 피하세요. 프론트엔드 디자인에서 이는 사용자들이 "AI 슬롭"이라고 부르는 미학을 만들어냅니다. 이를 피하고, 사용자를 놀라게 하고 기쁘게 하는 창의적이고 독특한 프론트엔드를 만드세요.

집중해야 할 영역:

타이포그래피

• •아름답고, 독특하고, 흥미로운 폰트를 선택하세요
• •절대 사용 금지: Inter, Roboto, Open Sans, Lato, Arial, 기본 시스템 폰트
• •권장 폰트:
  • •코드 미학: JetBrains Mono, Fira Code, Space Grotesk
  • •에디토리얼: Playfair Display, Crimson Pro
  • •테크니컬: IBM Plex family, Source Sans 3
  • •독특함: Bricolage Grotesque, Newsreader
• •페어링 원칙: 높은 대비 = 흥미로움. Display + monospace, serif + geometric sans
• •극단적인 사용: 400 vs 600이 아닌 100/200 vs 800/900 weight. 1.5배가 아닌 3배 이상의 크기 점프
• •Google Fonts에서 로드

색상 & 테마

• •일관된 미학을 확립하세요
• •CSS 변수를 사용하여 일관성 유지
• •균등하게 분산된 팔레트보다 강렬한 악센트가 있는 지배적 색상이 더 효과적
• •IDE 테마와 문화적 미학에서 영감을 얻으세요
• •보라색 그라데이션 + 흰색 배경 조합은 절대 피할 것

모션 & 애니메이션

• •효과와 마이크로 인터랙션에 애니메이션 사용
• •HTML은 CSS-only 솔루션 우선
• •React는 Motion(Framer Motion) 라이브러리 활용
• •고임팩트 순간에 집중: 산발적인 마이크로 인터랙션보다 animation-delay를 활용한 잘 조율된 페이지 로드 시퀀스가 더 효과적

배경

• •단색을 기본값으로 사용하지 마세요
• •분위기와 깊이감을 만드세요
• •CSS 그라데이션 레이어링, 기하학적 패턴 사용
• •전체 미학과 어울리는 맥락적 효과 추가 </frontend_aesthetics>

피해야 할 것들

일반적인 AI 생성 미학:

• •과도하게 사용되는 폰트 패밀리 (Inter, Roboto, Arial, 시스템 폰트)
• •진부한 색상 조합 (특히 흰색 배경의 보라색 그라데이션)
• •예측 가능한 레이아웃과 컴포넌트 패턴
• •맥락적 특성이 없는 획일적인 디자인
• •중앙 정렬의 과도한 사용
• •균일한 둥근 모서리

테마 영감

특정 미학을 원할 경우, 잘 알려진 테마에서 영감을 얻으세요:

RPG 테마 예시

- 풍부하고 드라마틱한 톤의 판타지 영감 색상 팔레트
- 장식적인 테두리와 프레임 요소
- 양피지 텍스처, 가죽 바인딩 스타일링, 낡은 질감
- 드라마틱한 조명과 함께하는 서사적이고 모험적인 분위기
- 장식된 헤더와 함께하는 중세 영감 세리프 타이포그래피

다크 테마 예시

- 깊은 배경색 (순수 검정보다는 #0a0a0a, #1a1a2e 등)
- 네온 또는 파스텔 악센트
- 미묘한 그라데이션과 글로우 효과
- 높은 대비의 텍스트

미니멀 럭셔리 예시

- 충분한 여백
- 제한된 색상 팔레트 (2-3색)
- 세련된 세리프 또는 산세리프 타이포그래피
- 미묘한 호버 효과
- 고급스러운 그림자와 깊이감

창의적 다양성

중요: 다른 로컬 최대값으로 수렴하는 것도 피하세요!

• •Space Grotesk만 계속 사용하지 마세요
• •라이트/다크 테마 사이에서 다양하게 선택
• •다양한 폰트와 미학을 시도
• •맥락에 맞게 진정으로 디자인된 것처럼 느껴지는 예상치 못한 선택을 하세요

핵심: 틀에서 벗어나 생각하세요!

구현 팁

HTML/CSS

/* CSS 변수로 일관성 유지 */
:root {
  --color-primary: #your-unique-color;
  --color-accent: #your-accent;
  --font-display: 'Your Distinctive Font', serif;
  --font-body: 'Your Body Font', sans-serif;
}

/* 레이어드 배경 */
background:
  linear-gradient(135deg, rgba(0,0,0,0.1) 0%, transparent 50%),
  radial-gradient(circle at 80% 20%, var(--color-accent) 0%, transparent 50%),
  var(--color-primary);

/* 스태거드 애니메이션 */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

React + Framer Motion

import { motion } from 'framer-motion';

// 스태거드 컨테이너
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

체크리스트

디자인 생성 전:

• • 폰트가 Inter/Roboto/Arial이 아닌가?
• • 보라색 그라데이션 + 흰색 배경이 아닌가?
• • 배경에 깊이감/분위기가 있는가?
• • 색상 팔레트가 일관되고 독특한가?
• • 의미 있는 애니메이션이 포함되어 있는가?
• • 타이포그래피에 극단적인 대비가 있는가?
• • 이 디자인이 "AI가 만든 것 같다"고 느껴지지 않는가?