크리에이티브 전문가를 위한 하이엔드 랜딩 페이지 **"Craft"**입니다. Next.js 15, GSAP, 그리고 Motion/React를 활용하여 세련된 스크롤 기반 애니메이션과 몰입감 있는 사용자 경험을 구현했습니다.
Craft는 현대적인 웹 디자인과 고급 인터랙티브 기술이 결합된 크리에이티브 에이전시 및 인재 매칭 플랫폼의 랜딩 페이지입니다. 이 프로젝트는 단순히 정보를 전달하는 것을 넘어, 브랜드의 프리미엄 가치를 시각적 모션과 정교한 레이아웃을 통해 전달하는 데 집중했습니다.
어두운 테마(#111c14)와 부드러운 오로라 배경, 그리고 타이포그래피의 조화를 통해 웹상에서 예술적인 깊이감을 제공합니다.
- GSAP & ScrollTrigger Animations: 시각적 흐름을 주도하는 정교한 스크롤 기반 패럴랙스 및 요소 제어 시스템.
- Aurora Gradient Background: Motion/React를 활용하여 동적으로 움직이는 프리미엄 오로라 시각 효과.
- Interactive Navigation: 정교한 인디케이터 애니메이션과 부드러운 모달 전환을 제공하는 사용자 중심 내비게이션.
- Bento-style Grid Layouts: 에이전시의 서비스와 성과를 현대적이고 체계적인 그리드 시스템으로 시뮬레이션.
- High-Performance Motion: Next.js 15와 GSAP를 결합하여 끊김 없이 부드러운 하이엔드 인터랙션 구현.
- Responsive & Optimized: 모든 디바이스에서 동일한 몰입감을 유지하는 완벽한 반응형 레이아웃 및 성능 최적화.
| Category | Technologies |
|---|---|
| Languages |     |
| Frontend |     |
| Animation |   |
| Backend & Tools |    |
먼저, 개발 서버를 실행하세요:
npm run dev
# 또는
yarn dev
# 또는
pnpm dev브라우저에서 http://localhost:3000을 열어 결과를 확인하세요.
app: Next.js App Router 기반의 페이지 및 레이아웃 정의 영역.components:Hero,Navbar,AuroraBackground등 재사용 가능하며 애니메이션이 적용된 핵심 UI 컴포넌트.lib: Firebase 클라이언트 및 유틸리티 함수 설정.hooks: 인터랙션 및 상태 관리를 위한 커스텀 React 훅.
창의적인 개발과 디자인의 만남을 통해 시각적 탁월함을 추구합니다.