Design Excellence
AI로 만든 앱을 인간이 만든 것처럼 보이게 만드세요. 일반 템플릿 없음. 눈에 띄는 패턴 없음.
<core_principle>
장인 정신의 기준
누군가가 AI가 만들었다는 것을 알아차리면 우리는 실패한 것입니다.
좋은 디자인은 보이지 않습니다. 사용자는 앱이 프로페셔널하다고 느껴야 하며, 템플릿을 따른다는 것을 알아차리지 못해야 합니다. </core_principle>
<color_system>
색상 철학
AI 색상 선택의 문제점
AI는 주로 다음을 선택하는 경향이 있습니다:
- 흰색 배경에 보라색 그라디언트 (Lovable 기본 스타일)
- 지나치게 채도가 높은 강조 색상
- 하나의 인터페이스에 너무 많은 색상
- 단색이 더 잘 어울리는 곳에 그라디언트 사용
우리의 접근 방식: 절제
기본 팔레트 (기본값)
/* 중립 색상에는 Tailwind의 슬레이트 스케일 사용 */
--background: slate-50 /* 페이지 배경 */
--surface: white /* 카드, 모달 */
--border: slate-200 /* 구분선, 테두리 */
--text-primary: slate-900 /* 제목 */
--text-secondary: slate-600 /* 본문 */
--text-muted: slate-400 /* 플레이스홀더, 힌트 */
강조 색상 (앱 당 하나만 선택)
/* 기본값: 파란색 (전문적, 신뢰감) */
--accent: blue-600
--accent-hover: blue-700
--accent-light: blue-50
/* 앱 유형별 대안: */
/* 금융/뱅킹 → 초록색 (돈) */
/* 건강/웰니스 → 청록색 (차분함) */
/* 음식/레스토랑 → 주황색 (식욕) */
/* 창의적/디자인 → 보라색 (창의성) */
/* 긴급/알림 → 빨간색 (주의) */
규칙
- 앱 당 하나의 강조 색상만, 예외 없음
- 강조 색상은 아껴서 사용 - 버튼, 링크, 하이라이트에만
- 기본 버튼에 그라디언트 사용 금지
- 배경은 흰색 또는 흰색에 가까운 색상, 색상 배경 금지
- 다크 모드: 적절하게 반전시키고, 단순히 회색으로 만들지 않음 </color_system>
<typography_system>
타이포그래피 규칙
폰트 스택
/* 모든 곳에 Inter를 지정하지 말고 시스템 폰트 사용 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* 모든 플랫폼에서 네이티브처럼 보입니다 */
타입 스케일 (Tailwind 클래스)
페이지 제목: text-2xl font-semibold (24px)
섹션 제목: text-lg font-medium (18px)
카드 제목: text-base font-medium (16px)
본문: text-sm (14px)
작은 글씨/캡션: text-xs text-slate-500 (12px)
안티패턴
❌ 모든 것에 font-bold 사용 금지
❌ 하나의 카드에 너무 많은 폰트 크기 혼용 금지
❌ 긴 텍스트에 모두 대문자(ALL CAPS) 사용 금지
❌ 본문 단락을 가운데 정렬 금지
❌ 순수 검정(#000) 사용 금지 - slate-900 사용
좋은 패턴
✅ 제목: semibold 또는 medium, 보통(regular)은 금지 ✅ 본문: 보통 굵기, 적절한 줄 높이(1.5-1.6) ✅ 계층 유지: 컴포넌트 당 최대 3개 크기 ✅ 대부분의 텍스트는 왼쪽 정렬 (가운데 정렬 레이아웃의 제목 제외) </typography_system>
<spacing_system>
간격 및 레이아웃
간격 스케일
Tailwind의 기본 스케일을 일관되게 사용:
4 (1rem/16px) - 작은 간격, 인라인 요소
6 (1.5rem/24px) - 중간 간격, 컴포넌트 사이
8 (2rem/32px) - 큰 간격, 섹션 사이
12 (3rem/48px) - 특대 간격, 페이지 섹션
페이지 레이아웃
// 표준 페이지 컨테이너
<div className="p-4 md:p-6 lg:p-8">
{/* 페이지 제목 */}
<h1 className="text-2xl font-semibold mb-6">대시보드</h1>
{/* 일관된 간격의 콘텐츠 섹션 */}
<section className="mb-8">
{/* 섹션 콘텐츠 */}
</section>
</div>
카드 내부 간격
<Card>
<CardHeader className="pb-4"> {/* 기본 패딩 줄이기 */}
<CardTitle>제목</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* 수직 간격이 있는 콘텐츠 */}
</CardContent>
</Card>
안티패턴
❌ 일관성 없는 패딩 (여기는 p-3, 저기는 p-5) ❌ 너무 적은 여백 (답답한 느낌) ❌ 너무 많은 여백 (분리된 느낌) ❌ 같은 수준의 요소에 다른 간격 크기 사용 </spacing_system>
<animation_system>
모션 및 애니메이션
철학
애니메이션은 다음을 지향해야 합니다:
- 화려하지 않고 자연스러울 것
- 방해가 아닌 피드백을 제공할 것
- 느리지 않고 빠를 것 (150-300ms)
- 드라마틱하지 않고 미묘할 것
표준 트랜지션
// 호버 상태 - transition-colors 또는 transition-all 사용
<div className="transition-colors hover:bg-slate-50">
// 카드 호버 - 미묘한 상승
<Card className="transition-shadow hover:shadow-md">
// 버튼 호버 - shadcn에 내장되어 있음, 오버라이드 금지
<Button>이미 애니메이션 적용됨</Button>
Framer Motion 패턴
// 페이지 트랜지션
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
// 목록 지연 효과
<motion.div
variants={{
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
}}
initial="hidden"
animate="show"
>
{items.map(item => (
<motion.div
key={item.id}
variants={{
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}}
>
{item.content}
</motion.div>
))}
</motion.div>
// 마이크로 인터랙션 - 버튼 탭
<motion.button whileTap={{ scale: 0.98 }}>
클릭하세요
</motion.button>
애니메이션 타이밍
- 호버 효과: 150ms
- 작은 트랜지션: 200ms
- 페이지 트랜지션: 300ms
- 복잡한 애니메이션: 400-500ms 이하
안티패턴
❌ 바운스 효과 (싸구려 느낌) ❌ 느린 애니메이션 (>500ms는 답답함) ❌ 모든 요소에 애니메이션 적용 (압도적) ❌ 모든 곳에 회전 로더 사용 (대신 스켈레톤 사용) ❌ 과장된 등장 애니메이션 </animation_system>
<component_patterns>
컴포넌트 디자인 패턴
카드
// 깔끔한 카드 - 과도한 장식 없음
<Card className="bg-white border shadow-sm">
<CardContent className="p-4">
{/* 콘텐츠 */}
</CardContent>
</Card>
// 사용 금지: rounded-3xl, 무거운 그림자, 그라디언트 테두리
버튼
// 기본 동작
<Button>저장</Button>
// 보조 동작
<Button variant="outline">취소</Button>
// 위험 동작
<Button variant="destructive">삭제</Button>
// 아이콘 버튼
<Button variant="ghost" size="icon">
<Settings className="h-4 w-4" />
</Button>
// 사용 금지: 그라디언트 버튼, 3D 효과, 기본 버튼 내 아이콘 (일반적으로)
폼
// 깔끔한 폼 레이아웃
<div className="space-y-4">
<div className="space-y-2">
<Label>이름</Label>
<Input placeholder="이름 입력" />
</div>
<div className="space-y-2">
<Label>이메일</Label>
<Input type="email" placeholder="[email protected]" />
</div>
</div>
// 사용 금지: 인라인 레이블, 플로팅 레이블 (요청 시 제외), 입력 필드 내 아이콘
테이블
// 깔끔한 테이블
<Table>
<TableHeader>
<TableRow className="bg-slate-50">
<TableHead>이름</TableHead>
<TableHead>상태</TableHead>
<TableHead className="text-right">액션</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="hover:bg-slate-50">
<TableCell>홍길동</TableCell>
<TableCell><Badge>활성</Badge></TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm">편집</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
// 사용 금지: 얼룩말 줄무늬 (구식), 두꺼운 테두리, 가운데 정렬 콘텐츠
</component_patterns>
<anti_patterns_detail>
AI 생성 레드 플래그
"Lovable 스타일" (피해야 함)
- 기본 색상으로 보라색/바이올렛 사용
- 흰색 카드에 그라디언트 배경
- 모든 것에 rounded-3xl 사용
- 헤더에 이모지 사용
- "어서 오세요, 사용자님! 👋"
- 일반적인 스톡 사진 스타일 일러스트레이션
"Bootstrap 스타일" (피해야 함)
- 과도한 그림자
- 둥근 알약 버튼
- 모든 것에 파란 링크
- 동일한 높이의 카드 덱
- 점보트론 스타일 헤더
"Material 스타일" (요청 시 제외하고 피해야 함)
- 플로팅 액션 버튼
- 모든 곳에 돌출된 카드
- 모든 것에 리플 효과
- 데스크톱에서 햄버거 메뉴
"인간이 만든" 느낌을 주는 요소
- 절제 - 모든 기능이 강조되지 않음
- 계층 - 명확한 1차, 2차, 3차 요소
- 여백 - 숨 쉴 공간
- 일관성 - 동일한 패턴 반복
- 미묘한 디테일 - 과시하지 않는 작은 터치
- 실제 콘텐츠 - 보이는 플레이스홀더 텍스트 없음 </anti_patterns_detail>
<review_checklist>
디자인 리뷰 체크리스트
색상 체크
- 하나의 강조 색상만 사용됨
- 흰색 배경에 그라디언트 없음
- 순수 검정 텍스트 없음
- 접근성을 위한 충분한 대비
타이포그래피 체크
- 컴포넌트 당 최대 3개 폰트 크기
- 적절한 계층 (semibold 제목, 보통 본문)
- ALL CAPS 단락 없음
- 줄 높이가 읽기 쉬움 (1.5 이상)
간격 체크
- 전체적으로 일관된 패딩
- 섹션 사이에 충분한 여백
- 콘텐츠가 답답하지 않음
- 모바일 간격이 비례적임
애니메이션 체크
- 트랜지션이 미묘함 (150-300ms)
- 바운스/스프링 효과 없음
- 로딩에 스피너 대신 스켈레톤 사용
- 호버 상태가 피드백을 제공함
컴포넌트 체크
- 카드에 과도한 장식 없음
- 버튼이 계층을 따름 (기본/보조)
- 폼이 깔끔하게 배치됨
- 테이블이 읽기 쉽고 인터랙티브함
최종 체크
- 사용자가 이 앱이 AI로 만들어졌다는 것을 알 수 있나요? (아니요여야 함)
- 실제 제품처럼 보이나요? (네여야 함)
- 현대적인 SaaS 앱과 일관성이 있나요? (네여야 함) </review_checklist>