306 lines
8.9 KiB
Markdown
306 lines
8.9 KiB
Markdown
# CastAD SaaS UI/UX 전체 리디자인 계획
|
|
|
|
## 개요
|
|
POC 상태의 펜션 쇼츠 자동 생성 웹사이트를 프로페셔널한 SaaS 서비스로 전환
|
|
|
|
## 기술 스택 결정
|
|
|
|
| 항목 | 현재 | 변경 후 |
|
|
|------|------|---------|
|
|
| CSS Framework | Tailwind CDN | Tailwind npm + PostCSS |
|
|
| UI Components | 직접 구현 | shadcn/ui (Radix 기반) |
|
|
| Icons | lucide-react | lucide-react (유지) |
|
|
| Design System | 없음 | CSS Variables 기반 토큰 |
|
|
| Animations | index.html 인라인 | tailwind-animate + CSS 파일 분리 |
|
|
|
|
## 디자인 방향
|
|
|
|
### 컬러 팔레트 (다크 테마)
|
|
- **Background**: `#09090b` (zinc-950)
|
|
- **Card**: `#18181b` (zinc-900)
|
|
- **Border**: `#27272a` (zinc-800)
|
|
- **Primary**: `#a855f7` (purple-500) → `#9333ea` (purple-600)
|
|
- **Accent**: `#06b6d4` (cyan-500)
|
|
- **Success**: `#22c55e` (green-500)
|
|
- **Destructive**: `#ef4444` (red-500)
|
|
|
|
### 타이포그래피
|
|
- **Display**: Inter (600-700)
|
|
- **Body**: Inter (400)
|
|
- **Mono**: JetBrains Mono
|
|
|
|
### 레이아웃 원칙
|
|
- 최대 너비: 1280px (7xl)
|
|
- 섹션 패딩: 24-32px
|
|
- 카드 둥글기: 12px (rounded-xl)
|
|
- 일관된 8px 그리드 시스템
|
|
|
|
---
|
|
|
|
## 단계별 구현 계획
|
|
|
|
### Phase 1: 인프라 설정 (기반 작업)
|
|
|
|
#### 1.1 Tailwind CSS npm 전환
|
|
- [ ] `tailwindcss`, `postcss`, `autoprefixer` 설치
|
|
- [ ] `tailwind.config.js` 생성 (커스텀 컬러, 폰트, 애니메이션)
|
|
- [ ] `postcss.config.js` 생성
|
|
- [ ] `src/styles/globals.css` 생성 (Tailwind directives)
|
|
- [ ] index.html에서 CDN 제거
|
|
|
|
#### 1.2 shadcn/ui 초기화
|
|
- [ ] `npx shadcn@latest init` 실행
|
|
- [ ] components.json 설정 (경로, 스타일)
|
|
- [ ] `src/components/ui/` 디렉토리 구조 설정
|
|
|
|
#### 1.3 디자인 토큰 설정
|
|
- [ ] CSS variables 정의 (colors, radius, spacing)
|
|
- [ ] 다크 테마 기본값 설정
|
|
- [ ] 폰트 로딩 최적화 (Google Fonts → next/font 스타일)
|
|
|
|
---
|
|
|
|
### Phase 2: 기본 컴포넌트 구축
|
|
|
|
#### 2.1 shadcn/ui 컴포넌트 설치
|
|
```bash
|
|
npx shadcn@latest add button card input label select textarea
|
|
npx shadcn@latest add dialog sheet tabs toast sonner
|
|
npx shadcn@latest add dropdown-menu avatar badge separator
|
|
npx shadcn@latest add progress skeleton scroll-area
|
|
npx shadcn@latest add form (react-hook-form + zod)
|
|
```
|
|
|
|
#### 2.2 커스텀 컴포넌트 생성
|
|
- [ ] `PageHeader` - 페이지 제목 + 설명
|
|
- [ ] `PageContainer` - 일관된 레이아웃 래퍼
|
|
- [ ] `FeatureCard` - 기능 소개 카드
|
|
- [ ] `PricingCard` - 가격표 카드
|
|
- [ ] `StatCard` - 통계 카드
|
|
- [ ] `VideoPlayer` - 영상 재생기 (기존 ResultPlayer 리팩토링)
|
|
- [ ] `LoadingSpinner` - 로딩 인디케이터
|
|
- [ ] `EmptyState` - 빈 상태 표시
|
|
|
|
#### 2.3 레이아웃 컴포넌트
|
|
- [ ] `MainLayout` - 전체 앱 레이아웃
|
|
- [ ] `DashboardLayout` - 대시보드용 사이드바 레이아웃
|
|
- [ ] `AuthLayout` - 로그인/회원가입 전용 레이아웃
|
|
|
|
---
|
|
|
|
### Phase 3: Navbar 리디자인
|
|
|
|
#### 현재 문제점
|
|
- 모바일 메뉴 없음
|
|
- 언어 선택 UI 투박함
|
|
- 사용자 메뉴 단순함
|
|
|
|
#### 개선 사항
|
|
- [ ] 반응형 모바일 메뉴 (Sheet 컴포넌트 활용)
|
|
- [ ] 언어 선택 드롭다운 개선
|
|
- [ ] 사용자 아바타 + 드롭다운 메뉴
|
|
- [ ] 네비게이션 링크 호버 효과
|
|
- [ ] 스크롤 시 배경 blur 효과
|
|
|
|
---
|
|
|
|
### Phase 4: Landing Page 리디자인
|
|
|
|
#### 4.1 Hero 섹션
|
|
- [ ] 더 절제된 타이포그래피 (text-4xl → text-5xl)
|
|
- [ ] 애니메이션 최적화 (framer-motion 고려)
|
|
- [ ] CTA 버튼 개선 (그래디언트 보더)
|
|
- [ ] 신뢰도 지표 리디자인
|
|
|
|
#### 4.2 Features 섹션
|
|
- [ ] FeatureCard 컴포넌트로 통일
|
|
- [ ] 아이콘 + 제목 + 설명 구조
|
|
- [ ] 호버 시 미묘한 상승 효과
|
|
|
|
#### 4.3 How It Works
|
|
- [ ] 스텝 카드 (번호 + 아이콘 + 설명)
|
|
- [ ] 연결선 또는 화살표 그래픽
|
|
|
|
#### 4.4 Success Cases
|
|
- [ ] 캐러셀 개선 (자동 재생 + 수동 조작)
|
|
- [ ] 후기 카드 디자인 개선
|
|
|
|
#### 4.5 Pricing 섹션
|
|
- [ ] PricingCard 컴포넌트 활용
|
|
- [ ] 인기 플랜 하이라이트
|
|
- [ ] 기능 비교표 추가 고려
|
|
|
|
#### 4.6 Footer
|
|
- [ ] 링크 구조화
|
|
- [ ] 소셜 미디어 아이콘
|
|
- [ ] 저작권 정보
|
|
|
|
---
|
|
|
|
### Phase 5: Generator Page 리디자인
|
|
|
|
#### 5.1 InputForm 분할 (47KB → 6개 컴포넌트)
|
|
- [ ] `BusinessInfoSection` - 비즈니스 기본 정보
|
|
- [ ] `ImageUploadSection` - 이미지 업로드
|
|
- [ ] `AudioSettingsSection` - 오디오 설정
|
|
- [ ] `VisualSettingsSection` - 비주얼 설정
|
|
- [ ] `CategorySection` - 카테고리 선택
|
|
- [ ] `FormActions` - 제출 버튼
|
|
|
|
#### 5.2 폼 UI 개선
|
|
- [ ] shadcn Form + react-hook-form + zod 적용
|
|
- [ ] 실시간 유효성 검사
|
|
- [ ] 섹션별 접기/펼치기 (Collapsible)
|
|
- [ ] 진행 상태 인디케이터
|
|
|
|
#### 5.3 Loading 상태 개선
|
|
- [ ] 스켈레톤 UI
|
|
- [ ] 단계별 진행 표시 (Stepper)
|
|
- [ ] 취소 기능
|
|
|
|
---
|
|
|
|
### Phase 6: Result Player 리디자인
|
|
|
|
#### 6.1 ResultPlayer 분할 (38KB → 5개 컴포넌트)
|
|
- [ ] `VideoPreview` - 영상 미리보기
|
|
- [ ] `AudioControls` - 오디오 컨트롤
|
|
- [ ] `TextOverlayPreview` - 텍스트 오버레이
|
|
- [ ] `DownloadOptions` - 다운로드 옵션
|
|
- [ ] `SharePanel` - 공유 기능
|
|
|
|
#### 6.2 UI 개선
|
|
- [ ] 탭 UI 개선 (Tabs 컴포넌트)
|
|
- [ ] 진행률 표시 개선
|
|
- [ ] 토스트 알림 (Sonner)
|
|
|
|
---
|
|
|
|
### Phase 7: Dashboard 리디자인
|
|
|
|
#### 7.1 사용자 대시보드
|
|
- [ ] 사이드바 레이아웃 적용
|
|
- [ ] 통계 카드 (생성 횟수, 저장 공간 등)
|
|
- [ ] 최근 생성물 그리드
|
|
- [ ] 필터링 + 검색 기능
|
|
- [ ] 페이지네이션
|
|
|
|
#### 7.2 관리자 대시보드
|
|
- [ ] DataTable 컴포넌트 (정렬, 필터, 페이지네이션)
|
|
- [ ] 사용자 관리 UI 개선
|
|
- [ ] 통계 차트 (선택적)
|
|
|
|
---
|
|
|
|
### Phase 8: Auth Pages 리디자인
|
|
|
|
#### 8.1 Login/Register
|
|
- [ ] AuthLayout 적용
|
|
- [ ] 폼 유효성 검사 개선
|
|
- [ ] 소셜 로그인 버튼 (UI만, 추후 구현)
|
|
- [ ] 비밀번호 강도 표시
|
|
|
|
---
|
|
|
|
### Phase 9: 반응형 및 접근성
|
|
|
|
#### 9.1 반응형
|
|
- [ ] 모든 페이지 모바일 테스트
|
|
- [ ] 터치 타겟 크기 확인 (44x44px 최소)
|
|
- [ ] 가로 스크롤 제거
|
|
|
|
#### 9.2 접근성
|
|
- [ ] ARIA 라벨 추가
|
|
- [ ] 키보드 네비게이션 확인
|
|
- [ ] 색상 대비 검사 (WCAG AA)
|
|
- [ ] 포커스 상태 시각화
|
|
|
|
---
|
|
|
|
### Phase 10: 마무리
|
|
|
|
#### 10.1 성능 최적화
|
|
- [ ] 이미지 최적화 (lazy loading)
|
|
- [ ] 번들 사이즈 분석
|
|
- [ ] 불필요한 의존성 제거
|
|
|
|
#### 10.2 코드 정리
|
|
- [ ] 사용하지 않는 코드 제거
|
|
- [ ] TypeScript 타입 정리
|
|
- [ ] 컴포넌트 문서화 (주석)
|
|
|
|
---
|
|
|
|
## 파일 구조 변경
|
|
|
|
```
|
|
/
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ ├── ui/ # shadcn/ui 컴포넌트
|
|
│ │ │ ├── button.tsx
|
|
│ │ │ ├── card.tsx
|
|
│ │ │ ├── input.tsx
|
|
│ │ │ └── ...
|
|
│ │ ├── layout/ # 레이아웃 컴포넌트
|
|
│ │ │ ├── MainLayout.tsx
|
|
│ │ │ ├── DashboardLayout.tsx
|
|
│ │ │ └── AuthLayout.tsx
|
|
│ │ ├── generator/ # Generator 관련 컴포넌트
|
|
│ │ │ ├── BusinessInfoSection.tsx
|
|
│ │ │ ├── ImageUploadSection.tsx
|
|
│ │ │ └── ...
|
|
│ │ ├── player/ # Player 관련 컴포넌트
|
|
│ │ │ ├── VideoPreview.tsx
|
|
│ │ │ └── ...
|
|
│ │ └── shared/ # 공유 컴포넌트
|
|
│ │ ├── PageHeader.tsx
|
|
│ │ ├── FeatureCard.tsx
|
|
│ │ └── ...
|
|
│ ├── styles/
|
|
│ │ ├── globals.css # Tailwind + CSS variables
|
|
│ │ └── animations.css # 텍스트 이펙트 (유지)
|
|
│ ├── lib/
|
|
│ │ └── utils.ts # cn() 등 유틸리티
|
|
│ └── pages/ # 페이지 컴포넌트
|
|
├── components/ # 기존 컴포넌트 (점진적 이전)
|
|
├── tailwind.config.js # 새로 생성
|
|
├── postcss.config.js # 새로 생성
|
|
└── components.json # shadcn/ui 설정
|
|
```
|
|
|
|
---
|
|
|
|
## 예상 작업량
|
|
|
|
| Phase | 작업 내용 | 파일 수 |
|
|
|-------|----------|--------|
|
|
| 1 | 인프라 설정 | 5-6 |
|
|
| 2 | 기본 컴포넌트 | 15-20 |
|
|
| 3 | Navbar | 2-3 |
|
|
| 4 | Landing Page | 5-6 |
|
|
| 5 | Generator Page | 8-10 |
|
|
| 6 | Result Player | 6-8 |
|
|
| 7 | Dashboard | 4-5 |
|
|
| 8 | Auth Pages | 2-3 |
|
|
| 9 | 반응형/접근성 | 전체 수정 |
|
|
| 10 | 마무리 | 전체 검토 |
|
|
|
|
---
|
|
|
|
## 주의사항
|
|
|
|
1. **점진적 마이그레이션**: 기존 기능이 깨지지 않도록 단계별 진행
|
|
2. **텍스트 이펙트 보존**: 11가지 텍스트 이펙트는 유지 (핵심 기능)
|
|
3. **다국어 지원 유지**: i18n 구조 그대로 유지
|
|
4. **백엔드 연동 유지**: API 호출 로직 변경 없음
|
|
|
|
---
|
|
|
|
## 승인 필요 항목
|
|
|
|
진행 전 확인:
|
|
1. 이 계획대로 진행해도 될까요?
|
|
2. 특별히 우선순위를 높이거나 제외할 부분이 있나요?
|
|
3. Phase 1부터 순차적으로 진행할까요?
|