o2sound
/
CASTAD-v0.1
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
CASTAD-v0.1/PLAN.md

8.9 KiB
Raw Permalink Blame History

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 컴포넌트 설치

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