누리 아틀리에 — 독립 조향 공방 시네마틱 브랜드 사이트

성수동의 독립 조향 공방을 위한 시네마틱 브랜드 사이트입니다. 향수 브랜드는 이커머스 상세페이지로 기울기 쉬운데, 이 프로젝트의 목표는 반대입니다. 한 병을 팔기 전에, 공방의 공기와 시간을 먼저 전달하는 것입니다.

과제

니치 퍼퓸 브랜드는 보통 제품 컷과 노트 나열로 끝납니다. 자체 사이트에서만 할 수 있는 일은 시향의 순서, 소량 조향의 이유, 방문 예약을 하나의 세계관으로 묶는 것입니다. 에비스처럼 스크롤이 필름이 되는 구조를 향수 공방에 맞춰 옮겼습니다.

디자인 접근

버건디와 골드, 잉크 블랙을 기본 팔레트로 두고 영문 세리프 디스플레이와 한글 산세리프를 대비시켰습니다. 홈은 히어로·슬로건·스토리·시크릿 슬라이드·공방·방문 CTA의 6섹션으로, PC에서는 sticky 스크롤 필름으로, 모바일에서는 같은 카피를 세로 스택으로 풉니다.

이미지가 없을 때의 아트 디렉션

실제 공방 촬영본이 없는 가상 브랜드이므로 전 컷을 Grok Imagine으로 생성했습니다. 히어로·시그니처 4병·작업대·시향실·워드마크까지 같은 조명과 앰버 유리의 톤으로 묶었습니다. 실제 인물·장소가 아님을 사이트 하단에 표기했습니다.

핵심 인터랙션

• Lenis 스무스 스크롤 — duration 1, GSAP ScrollTrigger와 같은 루프에서 갱신합니다.
• 슬로건 골드 fill — SplitType으로 라인을 나눈 뒤 스크롤 scrub으로 글자가 채워집니다.
• 시크릿 슬라이드 — PC에서 약 500vh sticky 섹션이 제목을 밀어내고 향 3장이 세로로 스냅됩니다.
• 커스텀 커서 VIEW MORE — 포인터가 정밀한 기기에서만 나타나고, 1024 이하에서는 숨깁니다.
• 시향 예약 폼 — 데모이므로 전송되지 않음을 명시합니다.

기술

Next.js 16 정적 내보내기, React 19, GSAP, Lenis, SplitType. Cloudflare Pages 프로젝트 ononc-nuri-atelier로 배포했습니다. 모션은 transform/opacity만 사용하고, prefers-reduced-motion에서는 자동 재생을 끕니다.

결과물

라이브 데모: ononc-nuri-atelier.pages.dev

본 사이트는 ononc가 제작 역량을 보여주기 위해 만든 가상 브랜드 데모입니다. 실제 사업장이 아니며, 문의 폼은 전송되지 않습니다. 사진은 이 데모 브랜드를 위해 생성형 AI로 만든 이미지이며, 실제 인물·장소가 아님을 사이트 하단에 표기했습니다.