Studio Clay - AI Creative Studio
21년차 드라마 감독이 이끄는 AI 영상 제작 스튜디오의 프리미엄 브랜드 랜딩페이지. 골드 & 다크 테마의 럭셔리 디자인과 패럴랙스 애니메이션으로 브랜드 가치를 전달하며, 문의폼은 Google Sheets DB와 연동됩니다.
사이트 방문프로젝트 개요
Studio Clay는 21년차 드라마 감독이 이끄는 AI 크리에이티브 스튜디오의 공식 브랜드 웹사이트입니다. '점토(Clay)처럼 유연하게 창조하고, 완벽하게 구현합니다'라는 철학을 골드 & 다크 테마의 프리미엄 디자인으로 표현했습니다. 10개 섹션(Hero, Philosophy, Promise, Who We Are, Why Studio Clay, Business Areas, AI Advertising, Collaboration, Packages, Contact)으로 구성되어 스튜디오의 전문성과 서비스를 체계적으로 소개합니다. 문의폼은 react-hook-form + Zod 검증 후 Google Sheets API를 통해 자동으로 DB에 저장되어, 별도 백엔드 없이도 문의 데이터를 관리합니다. studioclayai.com에서 실제 운영 중입니다.
주요 기능
히어로 & 내비게이션
전문 촬영 스튜디오 이미지를 배경으로 한 풀스크린 히어로 섹션입니다. 'STUDIO CLAY' 타이틀이 골드 그라디언트로 대형 표시되며, EXPLORE와 CONTACT 두 가지 CTA 버튼을 제공합니다.
상단 내비게이션은 ABOUT, SERVICES, PACKAGES, PROCESS, GET IN TOUCH 5개 앵커 링크로 구성되어 원페이지 스크롤 탐색이 가능합니다.
Philosophy & Promise
'유연하게 창조하고, 완벽하게 구현합니다' — 스튜디오의 핵심 철학을 대형 타이포그래피로 전달합니다. 점토(Clay)처럼 어떤 형태든 빚어내는 유연성과 창의성, 방송 현장 오랜 노하우로 완성하는 실행력을 강조합니다.
하단 Promise 섹션에서는 '전통의 깊이와 혁신의 기술이 만나, 브랜드의 이야기는 스크린 위에서 가장 완벽한 형태로 실현됩니다'라는 인용문으로 브랜드 방향성을 전달합니다.
Who We Are — 21년차 감독 소개
스튜디오를 이끄는 21년차 드라마 감독의 경력과 비전을 소개하는 섹션입니다. 골드 서클 장식 안에 프로필이 배치되고, 경력 21년+, 프로젝트 100+, AI 기술 도입 등 핵심 수치가 카운트업 애니메이션으로 표시됩니다.
'방송부터 AI까지, 이야기를 만들어 내는 크리에이티브 스튜디오'라는 비전을 전달합니다.
Why Studio Clay & 서비스 영역
21년 노하우와 AI 기술의 결합으로 독보적인 솔루션을 제공하는 이유를 설명합니다. Premium Quality(시네마 스탠다드 프로덕션), AI Technology(AI 기반 제작 자동화), Creative(감각적인 크리에이티브) 3가지 차별점을 아이콘 카드로 제시합니다.
Business Areas에서는 Film Production(드라마·영화 제작), AI Advertising(AI 광고 콘텐츠), AI Studio VFX(AI 시각 효과) 3개 서비스 영역을 상세히 소개합니다.
제작 프로세스 & 협업 시스템
패키지별 요금제(SMS Viral, Premium TVC, YouTube Branded) 소개와 함께 Collaboration System 프로세스를 4단계로 시각화합니다. Step 01 기획 & 컨설팅(클라이언트 미팅, 시나리오/콘티 작성), Step 02 촬영/AI 제작(현장 촬영·CG·AI 노하우 최적 비율), Step 03 후반 작업(편집·VFX·사운드·색보정), Step 04 검수 및 납품(4K·UHD 마스터링, 다양한 포맷 납품).
각 단계는 골드 아이콘과 함께 타임라인 형태로 배치되어 진행 흐름을 직관적으로 이해할 수 있습니다.
문의폼 & Google Sheets 연동
GET IN TOUCH 섹션에서 프로젝트 문의를 접수받습니다. react-hook-form으로 이름, 이메일, 연락처, 프로젝트 유형, 예산, 메시지 필드를 관리하고, Zod 스키마로 서버 사이드 검증을 수행합니다. 제출된 데이터는 Google Sheets API를 통해 스프레드시트에 자동 저장되어 별도 데이터베이스 없이도 문의 내역을 체계적으로 관리합니다. 제출 성공 시 sonner 토스트로 피드백을 제공합니다.
패럴랙스 & 스크롤 애니메이션
커스텀 useParallax 훅을 활용한 패럴랙스 스크롤 효과로 깊이감 있는 시각 경험을 제공합니다. 각 섹션은 스크롤 진입 시 fade-in + slide-up 애니메이션으로 등장하며, 골드 그라디언트 배경과 어둡고 고급스러운 톤이 전체 사이트에 일관되게 적용됩니다.
반응형 디자인 & SEO
모바일·태블릿·데스크톱 3단계 반응형 레이아웃을 적용했습니다. Next.js App Router의 메타데이터 API로 OG 이미지, 구조화된 데이터를 설정하여 검색 엔진 최적화를 구현했습니다. Vercel에 배포하여 글로벌 CDN을 통한 빠른 로딩을 제공합니다.
Tech Stack
Highlights
- 골드 & 다크 테마 럭셔리 브랜딩
- 패럴랙스 스크롤 + 섹션별 애니메이션
- 문의폼 → Google Sheets DB 자동 연동
Architecture
Next.js 16 App Router / React 19 / TypeScript 5 (strict) / Tailwind CSS 3.4 + CSS Variables (HSL 다크 테마) / shadcn/ui + Radix UI / 커스텀 useParallax 훅 / react-hook-form + Zod 서버 검증 / Google Sheets API DB 연동 / Lucide React 아이콘 / Vercel 배포 / studioclayai.com 운영 중