Lueur — 보태니컬 코스메틱 랜딩 페이지

배경

Lueur는 데모용으로 처음부터 만든 콘셉트 브랜드입니다. 목표는 늘 다루던 영역——SaaS, 대시보드, 다크 인터페이스——에서 벗어나, 제품 마케팅의 언어도 다룰 수 있음을 증명하는 것: 명료하고 에디토리얼하며 감각적인 코스메틱 브랜드.

목표

• 템플릿에서 출발하지 않고, 로고부터 패키지까지 일관된 브랜드 아이덴티티 구축.
• 일상과는 다른 스택 선보이기: 최고의 성능을 내는 정적 사이트를 위해 Next.js가 아니라 Astro.
• 쇼케이스를 넘어서: 제품에서 주문 확인까지 이어지는 진짜 구매 여정 제공.

솔루션

뷰티 매거진처럼 구상한 에디토리얼 랜딩 페이지: 오트 쿠튀르풍 세리프 리드, 포슬린과 보태니컬 그린 팔레트, 정성 들인 제품 사진.

• 리추얼 — 세 가지 핵심 케어를 세 개의 명료한 동작으로 제시.
• 컬렉션 — 라인업의 플랫레이, 이어서 각 제품을 상세히(세럼, 크림, 오일).
• 구매 여정 — 오른쪽에서 미끄러져 들어오는 드로어 장바구니, 수량 관리, 완전한 체크아웃, 그리고 번호가 붙은 주문 확인. 모두 지속되며, 백엔드는 없음.

스택 & 성능

• Astro 정적 렌더링: 표시에는 클라이언트 사이드 JavaScript 프레임워크를 전혀 쓰지 않고, 장바구니에 필요한 만큼만.
• 이미지는 자동으로 WebP로 최적화하고, 화면에 따라 여러 크기로 제공.
• 스크롤 애니메이션, 모바일 내비게이션, 그리고 접근성과 대비에 기울인 주의.

데모 프로젝트이지만, 클라이언트에게 납품하는 사이트와 같은 기준으로 구축: 빠르고, 깔끔하며, 가장 사소한 디테일까지 고민한.