📌 LOST GARDEN ARCHIVE 가구 디자인 아카이브 웹사이트

🔹 프로젝트 개요

• 작업 기간: 2025.12 ~ 2026.01
• 작업 범위: 브랜드 아이덴티티 수립, 인터랙티브 웹 디자인, 풀스택 개발, CMS 구축
• 사용 도구:

Frontend: Next.js, TypeScript, Tailwind CSS

Animation: GSAP, Framer Motion, ScrollTrigger

Backend: Supabase (Auth, DB, RLS), Vercel

Infrastructure: Cloudflare (DNS & Security)

🔹 프로젝트 목적

"공간을 조각하는 가구, 그 이상의 침묵 (Crafting Silence in a Noisy World)." 단순히 물건을 만드는 것을 넘어 분위기를 조각하는(We sculpt atmosphere) 'LOST GARDEN'의 브랜드 철학을 디지털 공간에 구현했습니다. 가구가 가진 질감과 조형미를 웹사이트의 미니멀한 레이아웃과 유기적인 애니메이션으로 표현하여, 사용자에게 한 편의 전시를 보는 듯한 경험을 제공하는 것을 목표로 했습니다.

• Aesthetic Minimalism: 가구의 디테일에 집중할 수 있도록 무채색 톤과 정갈한 타이포그래피 설계.
• Experiential Archive: 단순 나열이 아닌, 사용자의 스크롤에 반응하며 살아 움직이는 작품 아카이브 구축.

🔹 핵심 기술 및 구현 기능 (Key Technical Features)

• Dynamic Collection Gallery (동적 컬렉션 시스템)
  • Flexible Grid Layout: 다양한 규격의 가구 이미지를 예술적인 그리드로 배치하고, 호버 시 상세 정보를 노출하는 인터랙티브 갤러리를 구현했습니다.
  • Infinite Scrolling & Filtering: 카테고리별 필터링 기능을 통해 방대한 아카이브를 직관적으로 탐색할 수 있도록 설계했습니다.
• Immersive Motion Storytelling (몰입형 모션 스토리텔링)
  • GSAP Scroll Effects: 사용자의 스크롤 속도에 맞춰 이미지와 텍스트가 서로 다른 층위에서 움직이는 시차(Parallax) 효과를 적용하여 공간감을 부여했습니다.
  • Smooth Navigation: 페이지 전환 시 끊김 없는 트랜지션을 구현하여 브랜드의 고급스러운 이미지를 유지했습니다.
• High-Performance Visual Asset Management (비주얼 자산 최적화)
  • Image Optimization: 고해상도 가구 화보가 포함됨에 따라 Next.js Image Component를 활용한 지연 로딩(LCP 개선) 및 WebP 포맷 최적화를 진행했습니다.
  • Supabase Storage & DB: 가구의 스펙과 고해상도 이미지를 효율적으로 관리하기 위한 백엔드 구조를 설계했습니다.