/
KST
브랜드의 철학을 몰입도 높은 디지털경험으로 만드는 웹 스튜디오입니다.디자인만큼 그 과정을중요하게 생각합니다.
이메일:info@alephstudio.art
문의
인테리어

Lostgarden

설명

가구 디자인 아카이브

기간

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' 타이틀에 세리프 서체를 적용해 권위와 신뢰감을 전달하고, 본문에는 가독성 높은 산세리프를 배치해 균형을 맞췄습니다.

조각적 인터랙션

가구 이미지를 크게 배치해 오브제 자체가 지닌 힘을 전달하고, 절제된 모션으로 인터랙션이 시선을 방해하지 않도록 했습니다.

문의 연동

아카이브 탐색에서 상담으로 자연스럽게 이어지도록 하단에 간결한 문의 폼을 배치했습니다.

갤러리

클릭하여 확대

자주 묻는 질문

3D 인터랙티브 웹사이트는 일반 홈페이지와 무엇이 다른가요?

Three.js와 WebGL을 사용해 브라우저에서 3D 오브젝트가 움직이고 마우스와 스크롤에 반응하는 웹사이트입니다. 일반 홈페이지가 정보를 정리해 보여준다면, 3D 인터랙티브 웹은 브랜드의 인상을 체험으로 전달합니다. 패션, 뷰티, 건축, 전시처럼 브랜드 경험이 중요한 분야에서 효과가 큽니다.

웹사이트 제작 기간은 얼마나 걸리나요?

랜딩페이지는 7일, 5페이지 기업 웹사이트는 15일, 10페이지 3D 인터랙티브 웹은 30일을 기준으로 합니다. 자료를 전달받은 시점부터 기산하며 디자인 시안 확인과 피드백 일정에 따라 조정됩니다. 급한 일정이 있으시면 상담 시 말씀해 주시면 가능 여부를 먼저 확인해 드립니다.

호스팅, 도메인, 서버 비용은 따로 드나요?

SSL 보안 인증서 설치, 호스팅 세팅, 데이터베이스 구축은 무상으로 제공해 드립니다. 도메인 구입 비용만 의뢰인이 부담하시며 연 2~3만원 수준입니다. 계정은 처음부터 의뢰인 명의로 생성하므로 이후 담당자가 바뀌어도 서비스가 끊기지 않습니다.

완성 후 제가 직접 내용을 수정할 수 있나요?

관리자 페이지를 함께 구축해 드리므로 개발 지식 없이도 텍스트, 이미지, 게시물을 직접 수정하실 수 있습니다. 납품 시 관리자 사용 매뉴얼을 함께 전달해 드립니다. 화면 구조를 바꾸거나 새로운 기능을 추가하는 작업만 별도 개발이 필요합니다.

프로젝트 보기
웹사이트 방문 →문의하기 →

다음 프로젝트

Studio Gonggan

인테리어 에이전시

→

계속 스크롤하세요