DARIMA 시네마틱 AI 랜딩페이지
자체 쇼케이스2주기획 · UI/UX · 풀스택 개발 · AI/문의/SEO 구성600만원
Technology
Next.js 16React 19TypeScriptTailwind CSS v4Framer MotionLenis ScrollVercel AI SDKOpenAICloudflare TurnstileAWS SESnodemailerVercel
Key Results
01
시네마틱 히어로 영상과 모바일 전용 영상 소스로 첫 화면 몰입감 구현
02
AI 페르소나 Q&A 게시판으로 정적인 FAQ가 아닌 캐릭터형 인터랙션 제공
03
Cloudflare Turnstile 검증과 AWS SES/nodemailer 문의 메일 라우팅 구성
04
Next Metadata API, JSON-LD, sitemap.xml, rss.xml, robots.txt까지 SEO 기본 구조 완비
05
스킬 액션 영상, 갤러리, 관계/타임라인 섹션을 결합한 게임형 랜딩페이지 UX
Project Details
DARIMA는 시네마틱 영상, 게임 캐릭터 데이터베이스형 정보 구조, AI 페르소나 Q&A, 보안 문의 폼, SEO/RSS/sitemap까지 한 번에 구현한 인터랙티브 랜딩페이지입니다. 단순한 회사 소개 페이지가 아니라 방문자가 스크롤하면서 캐릭터 세계관과 제작 역량을 동시에 경험하도록 설계했습니다. 데스크톱/모바일 분리 영상, 스킬 액션 인터랙션, 게시판형 AI 응답, Cloudflare Turnstile 검증 문의, AWS SES 기반 이메일 라우팅을 포함해 실제 홈페이지 제작문의 전환까지 연결되는 쇼케이스입니다.
Problem
평범한 카드형 홈페이지로는 LUDGI의 인터랙티브 웹 제작 역량과 AI 경험 설계 능력을 한눈에 전달하기 어려웠습니다. 방문자가 첫 화면에서 바로 “이 팀은 다른 것을 만들 수 있다”는 인상을 받도록 만드는 쇼케이스가 필요했습니다.
Process
Next.js App Router 기반으로 시네마틱 히어로, 캐릭터 데이터베이스형 섹션, 스킬 액션 영상, AI 페르소나 Q&A, 문의 전환 모달을 하나의 흐름으로 설계했습니다. 데스크톱과 모바일 영상 소스를 분리하고, Turnstile 검증과 이메일 라우팅을 서버 API로 처리해 실제 운영 가능한 랜딩페이지로 구성했습니다.
Result
방문자는 캐릭터 세계관을 탐색하면서 동시에 홈페이지 제작 역량, AI 인터랙션, 보안 문의 폼, SEO 구조를 확인할 수 있습니다. 포트폴리오와 영업 랜딩페이지 역할을 동시에 수행하는 600만원 규모의 제작 사례로 정리했습니다.
600만원
제작 규모
8+ 섹션
주요 화면
AI Q&A + 문의
운영 기능
비슷한 프로젝트가 필요하신가요?
프로젝트 의뢰하기 →