📌 LIDO - 향수 공방 웹사이트
🔹 프로젝트 개요
🔹 프로젝트 목적
LIDO는 1962년 베네치아 리도 섬에서 시작해 3대째 이어지는 향수 공방입니다. 대표 라인 Eau de Piscine은 여름 하루의 세 시간 — 10:00 Shallow End, 14:00 High Dive, 19:00 Last Swim — 으로 나뉩니다. 사이트는 튜브 위에 누운 그녀의 1인칭 목소리로, 하나의 긴 스크롤 이야기로 흘러가도록 설계했습니다. 3D 글자 사이를 도는 유리병, 그녀의 선글라스 속으로 들어가 보는 수영장, 폰을 꺼내 보여주는 공방의 스토리, 기포가 쏟아지는 마퀴, 그리고 아침 청록에서 저녁 살구빛으로 화면의 빛을 바꾸는 향 세 가지. 제품 소개를 나열하는 대신, 한 오브젝트(병)가 페이지 전체를 끌고 가며 브랜드의 하루를 보여주는 것이 이 프로젝트의 과제였습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
Code-built Glass Bottle (코드로 만든 유리 향수병):
내려받은 모델 없이 회전체 프로필로 병을 만들었습니다. 오목한 바닥과 어깨 단차를 가진 두꺼운 유리, 어깨 아래까지만 채운 액체(수면선·메니스커스), 병을 감싸는 종이 랩 라벨, 황동 칼라와 돔 단추, 줄무늬 구명 튜브 뚜껑과 늘어진 로프까지 각각 재질을 나눴습니다. 유리는 뒤의 3D 글자·마퀴·선화를 실시간으로 굴절시키고, 세로 스트립 조명을 넣은 환경맵으로 가장자리에 긴 반사 띠를 만들었습니다.
Rendering Budget (60fps 렌더링 예산):
굴절은 장면에서 가장 비싼 패스라 CSS 해상도의 절반으로 돌리고, 픽셀 비율을 1~2 사이에서 프레임 시간에 따라 자동 조절합니다. 3D 구간이 화면에 있을 때만 렌더하고 로딩 화면이 덮고 있는 동안은 그리지 않아, 모바일 Lighthouse 성능을 52에서 93으로 올렸습니다. 같은 재질의 부품은 메시 하나로 합쳐 굴절 패스의 그리기 호출을 줄였습니다.
Dive into the Sunglasses (선글라스 속으로):
튜브 위 인물은 레이어로 나뉜 벡터 일러스트입니다. 스크롤하면 viewBox가 왼쪽 렌즈로 곧장 확대되는데, 폭을 로그 스케일로 보간해 일정한 속도로 다가가는 느낌을 주고, 렌즈가 화면을 덮는 순간 그녀가 보는 수영장 풍경이 열립니다. 빠져나오면 인물이 옆으로 비켜 앉고 렌즈에 반사광이 지나갑니다.
Arm, Phone and Stories (팔·폰·스토리 리그):
팔을 어깨·팔꿈치에서 나눠 각자의 축으로 돌리고, 코드로 그린 폰이 손에 나타나 화면 쪽으로 다가옵니다. 폰 화면 안에서는 HTML 스토리 갤러리 4장이 진행바와 함께 넘어가는데, 매 프레임 그려진 화면의 위치·크기·각도를 읽어 맞추기 때문에 인물이 물 위에서 흔들려도 폰에 붙어 있습니다.
Three Scents, Three Lights (향 셋, 빛 셋):
마퀴의 병이 그대로 향 섹션으로 이어집니다. 시간마다 배경색, 헤더를 포함한 글자색, 액체색, 라벨, 유리 뒤 선화가 바뀌고, 병은 스크롤에 따라 돌아 향마다 라벨이 정면에 옵니다. 향마다 병을 끌어 돌려보는 상세 페이지가 있습니다.
Sound and Small Things (사운드와 디테일):
기본 음소거, 켜면 수영장 앰비언트가 흐르고 Web Audio로 합성한 작은 소리 — 호버 때 기포, 마퀴의 물 튀김, 스토리를 넘길 때의 탭 — 가 얹힙니다. 전체 화면 메뉴는 물결을 타고 올라오고, 푸터는 기포를 쏟아내며, 페이지마다 고유의 색을 가집니다. WebGL을 만들 수 없는 기기에서도 3D 없이 사이트가 열리도록 했습니다.
🔹 디자인 포인트
🔹 담당 역할