SOMOS
설명
Tequila Añejo Brand Web with a Cursor-Driven Light Source
기간
Aug 2026
역할
- 브랜드 아이덴티티에 맞춘 웹사이트 전체 기획 및 UI/UX 디자인.
- Next.js 기반 반응형 프론트엔드 퍼블리싱, 광원·스크롤 인터랙션 구현과 렌더링 성능 최적화.
- Supabase 대기 명단 시스템·RLS 보안 설계·관리자 CMS·문의 알림 자동화 풀스택 개발.
- 이미지 최적화 파이프라인, 한국어 SEO·구조화 데이터, Vercel 배포와 도메인 연결.
기술
Next.js 16 · React 19 · TypeScript · Tailwind CSS v4
Lenis · WAAPI · CSS mask-image
Supabase (Postgres, RLS, Auth) · Resend
Vercel · Sharp (AVIF, WebP) · Playwright
프로젝트 목적
"I belong to U — We becomes SOMOS." SOMOS는 (주)쏘모스의 데킬라 아네호 오리지널입니다. 한정 수량으로 배정되는 제품이라 "지금 구매"가 성립하지 않았고, 사이트의 일은 두 가지였습니다 — 브랜드 세계관을 체험시키는 것, 그리고 대기 명단으로 전환시키는 것. 브랜드 각인이 새겨진 석조 모놀리스를 거의 완전한 어둠 속에 두고, 사용자의 커서가 그것을 드러내는 광원이 되게 했습니다. 가리키는 자리에만 브랜드가 존재합니다. 스크롤을 내리면 "Earth awakens the Senses" 아래로 아가베·꿀·오크·체리 네 원물이 차례로 깨어나고, 병이 놓인 석조 받침에 도착하면 남은 선택지는 구매가 아니라 배정 명단에 이름을 올리는 것뿐입니다.
범위
- · 인터랙티브 웹 디자인 및 프론트엔드 개발
- · 커서 광원 인터랙션·스크롤 세계관 시퀀스 구현
- · 구매 대기 명단(Allocation Waitlist) 시스템·관리자 CMS
- · 이미지 최적화 파이프라인·한국어 SEO·배포
주요 기술 특징
커서 광원 인터랙션
- · 어두운 석조 위에 밝은 원본을 정확히 겹쳐 놓고, 포인터를 따라가는 radial-gradient 마스크로 빛이 닿는 부분만 드러냅니다.
- · 광원 반경은 포인터가 화면 중앙에 얼마나 가까운지와 얼마나 빠르게 움직이는지에 함께 반응하고, 보간 계수가 빛을 한 박자 늦게 도착시켜 손전등을 든 무게를 만듭니다. 48ms 간격으로 최대 16개의 잔광이 궤적에 남습니다.
잔광 렌더링 최적화 — 27.2 → 39.7fps
- · 48ms마다 잔광 요소를 만들고 지우던 방식을, 16개 span을 돌려 쓰는 풀과 WAAPI로 교체했습니다.
- · 진짜 비용은 최대 600px 원 16개에 매 프레임 다시 걸리던 가우시안 블러였습니다. 그라디언트가 이미 72% 지점에서 투명으로 끝나기 때문에 블러를 걷어내도 육안 차이가 없었고, 포인터 이동 중 프레임이 46% 돌아왔습니다. 연출 기준값(48ms·16개·반경 계수)은 그대로 뒀습니다.
스크롤 기반 세계관 시퀀스
- · 히어로 320svh·세계관 1400svh가 position:sticky 스테이지 위에서 돌고, 스크롤을 0~1 진행률로 환산해 원물 4종의 등장·발광·퇴장과 석조 부조 전환을 한 축으로 제어합니다.
- · "인터랙션이 너무 빨리 지나간다"는 피드백에는 애니메이션 값을 하나도 건드리지 않고 스크롤 거리만 늘렸습니다. 같은 시퀀스가 3.6~4.7배 긴 거리에 걸쳐 흐릅니다.
구매 대기 명단 시스템
- · 원본 테이블은 RLS로 익명 접근을 전면 차단하고, 공개 게시판은 대기번호·마스킹된 이름·작성시간만 노출하는 별도 뷰를 읽습니다.
- · 신청은 필수 검증·300자 제한·동의·레이트리밋을 거쳐 저장되고 Resend로 담당자에게 알림이 갑니다. 관리자 영역(비공개 경로, 미들웨어와 서버 액션 이중 게이트, 유휴 자동 로그아웃)에서 상태 관리와 CSV 내보내기를 처리합니다.
성능·한국어 SEO
- · 원본 21MB 이미지를 해상도별 AVIF/WebP로 잘라 <picture> 폴백 체인으로 서빙해, 모바일 첫 화면을 0.85MB까지 내렸습니다.
- · 메타·OG·JSON-LD(@graph: Organization + WebSite, 브랜드 표기 3종을 alternateName으로)·sitemap·robots, 구글·네이버 소유확인까지 적용했습니다.
디자인 포인트
어둠 속의 모놀리스
화면 대부분을 검정으로 비우고 민트(#68C7BA)·탄(#C9A67A)·아이보리만 남겼습니다. 정보를 먼저 보여주는 대신, 사용자가 빛을 움직여 읽어내야 하는 어두운 화면 자체를 첫인상으로 삼았습니다.
벡터 우선 헤더
워드마크는 원본 AI 파일에서 뽑은 SVG, 내비게이션은 실제 텍스트입니다. 처음엔 2048px 비트맵 한 장을 100vw로 늘려 쓰던 자리라 고해상도 화면에서 최대 2.5배 확대돼 글자가 뭉개졌는데, 벡터는 어떤 배율에서도 버팁니다.
의식(儀式)으로서의 배정
구매 버튼 자리에 "구매 대기 신청"과 실시간 공개 명단을 두어, 기다림 자체를 브랜드 경험의 일부로 만들었습니다. 이름은 마스킹하고 대기번호와 시간만 남겨 신뢰와 프라이버시를 한 테이블에서 지킵니다.
접근성 가드레일
prefers-reduced-motion 사용자에게는 관성 스크롤과 광원 연출을 아예 띄우지 않고, 터치 디바이스에서는 커서 광원을 꺼서 모바일에서 의미 없는 연산이 돌지 않게 했습니다.