# 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부터 순차적으로 진행할까요?