2026Interior
Lostgarden
설명
Furniture Design Archive
기간
Dec 2025 - Jan 2026
역할
- UX/UI 디자인: 'LOST GARDEN'의 아이덴티티를 담은 미니멀하고 세련된 전체 웹 디자인.
- 풀스택 개발: Next.js와 Supabase를 활용한 아카이브 시스템 개발 및 API 연동.
- 인터랙티브 모션 개발: GSAP를 활용한 스크롤 기반 인터랙션 및 비주얼 이펙트 구현.
- 인프라 & 보안: Cloudflare 보안 설정 및 커스텀 도메인 연동을 통한 서비스 안정화.
기술
Frontend
Next.js · TypeScript · Tailwind CSS
Animation
GSAP · Framer Motion · ScrollTrigger
Backend
Supabase · Vercel
Infrastructure
Cloudflare
프로젝트 목적
"소음 속의 고요를 빚다." 단순히 사물을 만드는 것을 넘어, 디지털 공간에서 분위기를 조각하는 'LOST GARDEN'의 브랜드 철학을 구현했습니다. 미니멀한 레이아웃과 유기적 애니메이션을 통해 가구의 질감과 조형미를 표현하여, 사용자에게 전시를 관람하는 것과 같은 경험을 제공하는 것을 목표로 했습니다. • 미학적 미니멀리즘: 무채색 톤과 깔끔한 타이포그래피로 가구의 디테일에 집중할 수 있도록 설계했습니다. • 체험형 아카이브: 단순한 목록 나열이 아닌, 사용자의 스크롤에 반응하는 살아있는 아카이브를 구축했습니다.
범위
- · 브랜드 아이덴티티 확립
- · 인터랙티브 웹 디자인
- · 풀스택 개발
- · CMS 구축
주요 기술 특징
다이나믹 컬렉션 갤러리
- · 다양한 크기의 가구 이미지를 예술적으로 배치하고 호버 시 상세 정보가 나타나는 유연한 그리드 레이아웃의 인터랙티브 갤러리를 구현했습니다.
- · 카테고리 기반 필터링으로 방대한 아카이브를 직관적으로 탐색할 수 있도록 설계했습니다.
몰입형 모션 스토리텔링
- · GSAP 스크롤 이펙트로 사용자 스크롤 속도에 따라 이미지와 텍스트가 다른 레이어에서 움직이는 패럴랙스 효과를 적용해 공간적 깊이감을 더했습니다.
- · 브랜드의 세련된 이미지를 유지하기 위한 매끄러운 페이지 전환을 구현했습니다.
고성능 비주얼 에셋 관리
- · Next.js Image Component를 활용한 레이지 로딩(LCP 향상)과 WebP 포맷 최적화로 고해상도 가구 사진을 최적화했습니다.
- · 가구 스펙과 고해상도 이미지를 효율적으로 관리하기 위한 Supabase Storage & DB 기반 백엔드 구조를 설계했습니다.
디자인 포인트
타이포그래피 & 비주얼 위계
'The Archive' 타이틀에 세리프 서체를 적용해 권위와 신뢰감을 전달하고, 본문에는 가독성 높은 산세리프를 배치해 균형을 맞췄습니다.
조각적 인터랙션
가구 이미지를 크게 배치해 오브제 자체가 지닌 힘을 전달하고, 절제된 모션으로 인터랙션이 시선을 방해하지 않도록 했습니다.
문의 연동
아카이브 탐색에서 상담으로 자연스럽게 이어지도록 하단에 간결한 문의 폼을 배치했습니다.
갤러리
클릭하여 확대프로젝트 보기웹사이트 방문 →