📌 SOMOS - 데킬라 브랜드 웹사이트
🔹 프로젝트 개요
🔹 프로젝트 목적
SOMOS는 (주)쏘모스의 데킬라 아네호 오리지널 브랜드입니다. 한정 수량으로 배정되는 제품이라 "지금 구매"가 성립하지 않는 조건이었고, 그래서 사이트의 목표는 판매가 아니라 브랜드 세계관의 체험과 대기 명단으로의 전환 두 가지였습니다. "I belong to U — We becomes SOMOS"가 새겨진 석조 모놀리스를 어둠 속에 두고, 사용자의 커서가 곧 광원이 되어 그 표면을 직접 비추게 했습니다. 보는 사람이 빛을 들고 움직여야만 브랜드가 드러나는 구조입니다. 스크롤을 내리면 아가베·꿀·오크·체리 네 가지 원물이 차례로 깨어나고(Earth awakens the Senses), 마지막에 병이 놓인 석조 받침으로 도착해 구매 대기 신청으로 이어집니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
Cursor-as-Light Interaction (커서 광원 인터랙션):
어두운 석조 위에 밝은 원본을 정확히 겹쳐 놓고, 커서 위치를 따라가는 radial-gradient 마스크로 그 부분만 드러냅니다. 광원 반경은 화면 중앙도(中央度)와 포인터 속도에 따라 실시간으로 커지고, 보간 계수로 한 박자 늦게 따라와 손전등의 관성을 만듭니다. 48ms 간격으로 최대 16개의 잔광이 궤적을 따라 남습니다.
Trail Rendering Optimisation (잔광 렌더링 최적화 · 27.2 → 39.7fps):
잔광을 매번 생성·삭제하던 CSS animation 방식을 스테이지당 16개 span 풀 재사용 + WAAPI로 교체하고, 최대 600px 원 16개에 매 프레임 다시 걸리던 가우시안 블러를 제거했습니다. 그라디언트가 이미 72% 지점에서 투명으로 끝나 육안 차이는 없으면서 포인터 이동 중 프레임이 46% 개선됐습니다. 연출 기준값(간격 48ms·개수 16개·반경 계수)은 그대로 유지했습니다.
Scroll-driven World Sequence (스크롤 기반 세계관 시퀀스):
position:sticky 스테이지 위에서 히어로 320svh·세계관 1400svh 구간을 진행률(0~1)로 환산해, 원물 4종의 등장·발광·퇴장과 석조 부조 전환을 한 축으로 제어합니다. "인터랙션이 너무 빨리 지나간다"는 발주처 피드백에 대해 연출 수치는 건드리지 않고 스크롤 거리만 늘려, 같은 애니메이션이 3.6~4.7배 긴 거리에 걸쳐 흐르도록 재배분했습니다.
Allocation Waitlist System (구매 대기 명단 시스템):
원본 테이블은 RLS로 anon 접근을 전면 차단하고, 공개 게시판은 대기번호·마스킹된 이름·작성시간만 노출하는 별도 뷰를 통해서만 읽습니다. 신청 폼은 필수 검증·300자 제한·개인정보 동의·레이트리밋을 거쳐 저장되고 Resend로 담당자에게 즉시 알림이 갑니다. 관리자 페이지(비공개 경로 + 미들웨어·서버 액션 이중 인증 + 유휴 자동 로그아웃)에서 문의 상태 관리와 CSV 내보내기를 지원합니다.
Performance & Korean SEO (성능·한국어 SEO):
원본 21MB 이미지를 해상도별 AVIF/WebP로 잘라 <picture> 폴백 체인으로 서빙해 모바일 첫 화면을 0.85MB까지 줄였습니다. 메타·OG·JSON-LD(@graph: Organization + WebSite, 브랜드 표기 3종 alternateName)·sitemap·robots를 정리하고 구글·네이버 소유확인을 적용했습니다.
🔹 디자인 포인트
🔹 담당 역할