프로젝트의 시작 — "화면이 곧 무대여야 한다"
NOIR는 모델 및 엔터테인먼트 에이전시 브랜드입니다. 클라이언트의 첫 번째 요청은 명확했습니다. "우리 모델들의 존재감이 사이트에 들어오는 순간부터 느껴져야 한다." 일반적인 이미지 슬라이더로는 이 요구를 충족할 수 없었습니다. 사이트 자체가 하나의 비주얼 무대가 되어야 했고, 방문자가 스크롤할 때마다 새로운 장면이 펼쳐지는 경험을 목표로 잡았습니다.
풀스크린 비디오 캔버스 — 기술적 선택
가장 큰 도전은 배경 영상이었습니다. 단순히 video 태그를 전체 화면에 깔는 방식은 모바일 호환성과 성능 면에서 한계가 뚜렷합니다. NOIR에서는 비디오를 Canvas에 프레임 단위로 렌더링하는 방식을 선택했습니다. 이렇게 하면 스크롤 위치에 따라 영상의 재생 구간을 정밀하게 제어할 수 있고, CSS 필터나 블렌딩 효과도 자유롭게 적용할 수 있습니다.
영상 위로 콘텐츠가 자연스럽게 겹쳐 올라오도록 레이어를 분리했습니다. 배경 비디오는 position: fixed로 고정하고, 콘텐츠 레이어가 그 위를 스크롤하며 지나가는 구조입니다. 반투명한 첫 번째 섹션에서는 영상이 비쳐 보이고, 이후 섹션부터는 솔리드 배경으로 전환되어 콘텐츠에 집중하게 만들었습니다.
스크롤이 연출하는 시네마틱 경험
NOIR 사이트의 핵심은 스크롤 인터랙션입니다. 히어로 영역은 화면 높이의 2배로 설정해, 스크롤하는 동안 타이틀이 Sticky로 화면 중앙에 머물다가 자연스럽게 사라집니다. Bebas Neue 서체로 설정한 대형 타이포그래피는 화면 너비의 18vw까지 커지며, 모델 에이전시 특유의 강렬한 첫인상을 만들어냅니다.
가로 스크롤 갤러리도 중요한 연출 요소였습니다. 세로 스크롤을 하면 갤러리 섹션이 화면에 고정되면서 이미지들이 가로로 흘러가는 구조인데, 이 방식은 모델 포트폴리오를 영화 필름처럼 보여주는 효과를 줍니다. JavaScript의 Intersection Observer와 스크롤 이벤트를 조합해 부드러운 전환을 구현했습니다.
디테일이 만드는 고급스러움
모델 에이전시 사이트에서 디테일은 브랜드의 격을 결정합니다. NOIR에서 신경 쓴 요소들을 정리하면 이렇습니다.
- 모델 카드 호버 효과 — 이미지가 미세하게 확대되면서 오버레이가 페이드인되어 모델 정보가 나타납니다. 과하지 않은 scale(1.08) 값이 핵심입니다.
- 섹션 라벨 시스템 — 각 섹션 상단에 작은 라벨과 큰 헤딩을 배치해, 잡지 레이아웃의 느낌을 살렸습니다.
- 풀스크린 이미지 스플릿 — 화면을 좌우로 나눠 이미지와 텍스트를 배치하는 섹션은 에디토리얼 매거진에서 영감을 받았습니다.
- 패럴랙스 이미지 — 배경 이미지가 스크롤 속도와 다르게 움직이며 깊이감을 더합니다.
성능과 감성 사이의 균형
시각적으로 화려한 사이트일수록 성능 최적화는 필수입니다. NOIR에서는 몇 가지 원칙을 지켰습니다. 비디오 파일은 WebM 포맷으로 압축하고, Canvas 렌더링 시 requestAnimationFrame을 사용해 불필요한 프레임 그리기를 방지했습니다. 이미지는 lazy loading을 적용하고, 모바일에서는 비디오 대신 정적 이미지 폴백을 제공해 데이터 사용량을 줄였습니다.
애니메이션 역시 transform과 opacity 속성만 사용해 GPU 가속을 최대한 활용했습니다. 결과적으로 시각적 풍성함을 유지하면서도 Lighthouse 성능 점수를 합리적인 수준으로 유지할 수 있었습니다.
완성된 무대, 그리고 배운 것
NOIR 프로젝트는 "웹사이트도 하나의 영상 작품이 될 수 있다"는 가능성을 확인한 작업이었습니다. 비디오 캔버스, 시네마틱 스크롤, 에디토리얼 레이아웃이 하나로 어우러지면서, 방문자가 단순히 정보를 읽는 것이 아니라 브랜드를 체험하는 사이트가 완성되었습니다.
이처럼 브랜드의 본질을 디지털로 옮기는 작업은 기술만으로는 부족합니다. 클라이언트의 세계관을 이해하고, 그것을 화면 위에서 어떤 순서와 리듬으로 보여줄지 설계하는 과정이 핵심입니다. CYAN에서는 이런 몰입형 웹 경험 설계를 꾸준히 탐구하고 있으며, 각 브랜드가 가진 고유한 이야기를 웹이라는 무대 위에 올리는 일을 계속해 나가고 있습니다.