ELIXSOME
설명
플랜트 더마 스킨케어 — 브랜드 웹사이트
기간
Jun 2026 - Jul 2026
역할
- 브랜드 아이덴티티(BI)에 맞춘 웹사이트 전체 기획 및 UI/UX 디자인.
- React 기반 반응형 프론트엔드 퍼블리싱 및 스크롤·WebGL 인터랙션 총괄 구현.
- Supabase 관리자 CMS·상담폼·한국어 SEO/프리렌더·Vercel 배포까지 풀스택 개발.
기술
React 19 · TypeScript · Vite 6 · Tailwind CSS v4
three.js · @react-three/fiber · GSAP · Lenis
Supabase (Auth · Postgres · Storage · RLS)
Vercel · Prerender (SSG)
프로젝트 목적
"From Extreme Nature, Built for Skin Core Resilience." 엘릭솜(ELIXSOME)은 울릉국화 엑소좀(ULL-CHRYSOME™)을 기반으로 한 플랜트 더마 스킨케어 브랜드입니다. 판매가 아니라 브랜드 철학과 무드 전달이 목적이었기에, "건강한 피부는 겉이 아니라 피부 스스로 균형을 유지하는 힘, 스킨 코어에서 시작된다"는 메시지를 중심으로 브랜드 스토리·엑소좀 기술·제품 라인업을 하나의 몰입형 경험으로 설계했습니다. 웜 크림·딥 네이비·보태니컬 그린·소프트 골드 팔레트로, 화장품 스토어보다 모던 아포테카리에 가까운 톤을 만들었습니다.
범위
- · 브랜드 홍보 웹사이트 UI/UX 기획 및 디자인
- · 반응형 프론트엔드 퍼블리싱 (React 19 · Vite · Tailwind v4)
- · WebGL 엑소좀 히어로·스크롤 인터랙션 구현
- · Supabase 관리자 CMS·한국어 SEO·프리렌더링
주요 기술 특징
인터랙티브 엑소좀 WebGL 히어로
- · three.js·@react-three/fiber로 울릉국화 엑소좀을 형상화한 입자 구(球)를 렌더링했습니다.
- · 코드 스플리팅과 IntersectionObserver·visibilitychange·prefers-reduced-motion 게이팅으로 뷰포트를 벗어나면 캔버스를 아예 언마운트해, GPU 부하가 유휴 상태가 아니라 0으로 돌아갑니다.
스크롤 기반 에디토리얼 모션
- · Lenis 관성 스무스 스크롤과 GSAP으로 페이지 페이드 전환, 단어 단위 stagger 리빌, 4-Step 리추얼 가로 핀 쇼케이스를 구현했습니다.
- · prefers-reduced-motion을 전 구간에서 존중해 모션이 깔끔하게 축소됩니다.
Supabase 기반 관리자 CMS
- · Auth·Postgres·Storage·RLS 이중 보안 위에 히어로 배너 슬라이드, 제품 카드·상세·가격·성분, 페이지별 이미지, 상담 문의를 올렸습니다.
- · 코드 수정이나 배포 없이 전부 관리자 페이지에서 바뀝니다.
한국어 SEO·프리렌더링
- · 페이지별 동적 메타·OG(카카오톡·네이버 공유 미리보기)·JSON-LD·robots·sitemap을 적용했습니다.
- · 빌드 후 프리렌더(SSG)로 SPA 본문을 정적 HTML로 구워, 네이버 크롤러가 본문을 인덱싱할 수 있게 했습니다.
디자인 포인트
모던 아포테카리 아이덴티티
웜 크림(#F5F0E8)·딥 네이비(#0E1626)·보태니컬 그린·소프트 골드에 Noto Sans KR과 세리프 디스플레이를 조합했습니다. 더마 사이언스의 신뢰감과 식물 기반 클린 뷰티의 절제를 한 화면에 담기 위한 선택입니다.
실사 기반 에디토리얼
울릉국화·화산석·앰플·랩 그룹샷 등 스튜디오 촬영 실사를 원본 비율 그대로 배치하고, 넉넉한 여백과 타이포 위계가 브랜드를 끌고 가게 했습니다. 크롭과 오버레이로 덧입히지 않았습니다.
시그니처 스킨 코어 서사
"From Extreme Nature, Built for Skin Core Resilience." 히어로 카피가 원료의 출처라는 사실을 브랜드의 중심 이미지로 바꿉니다 — 혹독한 곳에서 온 회복력.