saas-design

# SaaS Design Skill

독창적이고 프로덕션 수준의 SaaS UI/UX를 설계하기 위한 디자인 철학과 가이드입니다.

## 핵심 원칙

> "의도적인 것이 강렬한 것보다 중요하다. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 작동한다 - 핵심은 의도성이다."

## Design Thinking 프로세스

코드 작성 전, 맥락을 이해하고 **대담한 미적 방향**을 결정:

### 1. Purpose (목적)
- 이 SaaS가 해결하는 문제는?
- 타겟 사용자는 누구인가?
- 사용자의 감정적 상태는? (급함? 여유? 전문적?)

### 2. Tone (톤)
극단적인 미적 방향 중 선택:

| 스타일 | 설명 | 적합한 SaaS |
|-------|------|------------|
| Brutally minimal | 극도로 절제, 여백 중심 | 생산성, 노트 |
| Maximalist chaos | 풍부하고 레이어드 | 크리에이티브, 게임 |
| Retro-futuristic | 복고 + 미래 | 테크, AI |
| Organic-natural | 유기적 곡선 | 웰니스, 환경 |
| Luxury-refined | 고급스러운 | 프리미엄, 금융 |
| Playful-toy-like | 재미있고 친근한 | 교육, 소셜 |
| Editorial-magazine | 잡지 스타일 | 미디어, 콘텐츠 |
| Brutalist-raw | 거칠고 원시적 | 개발자 도구 |
| Art deco-geometric | 기하학적 대칭 | 부동산, 럭셔리 |
| Industrial-utilitarian | 기능적, 산업적 | B2B, 엔터프라이즈 |

### 3. Constraints (제약)
- 기술 요구사항 (반응형, 접근성)
- 성능 목표 (로딩 시간, Core Web Vitals)
- 브랜드 가이드라인 (있는 경우)

### 4. Differentiation (차별화)
- 무엇이 이것을 **잊을 수 없게** 만드는가?
- 경쟁사와 어떻게 다른가?
- 한 가지 기억에 남을 요소는?

---

## 피해야 할 것 (AI Slop)

### ❌ 타이포그래피
- Inter, Roboto, Arial, system-ui
- 모든 SaaS가 똑같이 보이는 폰트

### ❌ 컬러
- 흰색 배경 + 보라색 그라데이션
- #6366f1 (indigo-500) 남용
- 과도하게 균등한 색상 분배

### ❌ 레이아웃
- 예측 가능한 hero → features → pricing
- 좌우 대칭의 모든 것
- 동일한 카드 그리드 반복

### ❌ 패턴
- 떠다니는 보라색 블롭
- 동일한 그라데이션 버튼
- 과도한 둥근 모서리 (rounded-2xl 남용)

---

## 지향해야 할 것

### ✅ 타이포그래피
```
디스플레이 폰트 (헤딩):
- 영문: Space Grotesk, Clash Display, Cabinet Grotesk, Instrument Sans
- 한글: Pretendard, SUIT, Wanted Sans, 본고딕

본문 폰트:
- 영문: Geist, Söhne, Satoshi
- 한글: Pretendard, SUIT, Noto Sans KR
```

전략: 개성 있는 디스플레이 폰트 + 읽기 쉬운 본문 폰트 조합

### ✅ 컬러
```css
/* 예시: 지배색 + 날카로운 악센트 */
:root {
  --color-bg: #0a0a0a;
  --color-text: #fafafa;
  --color-accent: #00ff88;  /* 예상치 못한 악센트 */
  --color-muted: #737373;
}
```

전략:
- 지배색이 80% 이상 차지
- 악센트는 5-10%만
- 예상치 못한 컬러 조합

### ✅ 레이아웃
- 비대칭 배치
- 요소 오버랩
- 대각선 흐름
- 그리드를 깨는 요소
- 넉넉한 여백 OR 의도적인 밀도

### ✅ 모션
```css
/* 순차적 등장 */
.item { animation: fadeIn 0.5s ease-out forwards; }
.item:nth-child(1)