WakaWaka AI 영상 편집기 - 마케팅 랜딩 페이지 구축

WakaWaka AI 영상 편집기 - 마케팅 랜딩 페이지 구축 프로젝트 소개 AI 기반 영상 편집 SaaS 플랫폼 "WakaWaka"의 서비스 소개 및 고객 전환을 위한 마케팅 랜딩 웹사이트입니다. AI 숏폼 자동 생성, 대화형 편집, 클라우드 스페이스, 브랜드 템플릿 등 6가지 핵심 기능을 시각적으로 소개하고, 요금제 비교 및 고객센터 연결까지 원스톱으로 제공하는 반응형 멀티 페이지 랜딩을 기획 참여부터 배포까지 단독 리드하여 구축하였습니다. 주요 작업 내용 1. Next.js 15 App Router + FSD(Feature Sliced Design) 아키텍처 설계 프로젝트 초기 구조를 app → pages → widgets → features → shared 계층으로 설계하여 관심사 분리 및 단방향 의존성 규칙을 적용. 팀 내 공통 디자인 시스템(@crabs-ai/ds-react)과 아이콘 라이브러리(@crabs-ai/web-icons)를 연동하여 일관된 UI 컴포넌트 체계를 구성 2. 스크롤 기반 인터랙션 및 애니메이션 시스템 구현 Zustand 스크롤 스토어를 활용한 scrollY 추적 기반으로 메인 페이지 수평 카드 캐러셀(6개 기능 카드)의 translateX · scale · opacity 연동 애니메이션 구현. CSS @keyframes 무한 루프 캐러셀, 스크롤 진행률 기반 sticky 전환, 뷰포트 근접도에 따른 카드 확대/축소(0.92x↔1.0x) 등 다수 인터랙션 직접 개발 3. next-intl 기반 다국어(한/영) 라우팅 및 번역 시스템 구축 next-intl 4.0과 미들웨어를 활용한 /ko, /en 로케일 라우팅 설정, 800+ 키 규모의 번역 JSON 관리, 타입 세이프 커스텀 훅(useTranslatedT) 구현. Appbar 내 언어 전환 드롭다운과 URL 동기화 처리 4. 반응형 UI/UX 및 다크모드 전체 대응 next-themes + class 전략 기반 라이트/다크/시스템 3모드 테마 시스템 구현. 모든 섹션에 테마별 이미지 분기(_dark.png / _light.png) 적용. 모바일 햄버거 메뉴 ↔ 데스크톱 드롭다운 네비게이션 반응형 전환, Embla Carousel 기반 요금제 카드 슬라이더 등 전 구간 모바일 최적화 5. 6개 핵심 기능 탭 소개 페이지(Introduce) 구현 WakaShorts · WakaChat · CloudSpace · Editor · ExportList · BrandManagement 6개 탭 기반 기능 소개 페이지 구축. URL 쿼리 파라미터(?tab=)와 탭 상태 동기화, 탭 전환 시 해당 섹션 스무스 스크롤, Segmented 컨트롤을 활용한 서브 기능 전환 UI 구현 6. 요금제(Price) 페이지 및 FAQ 구현 월간/연간 토글(Segmented), 4개 요금제 플랜 카드(Starter·Standard·Premium·Enterprise) 캐러셀, 결제·환불·해지 관련 아코디언 FAQ 섹션 구현. Embla Carousel + 인디케이터 도트 네비게이션 적용