트리즈컴퍼니 웹사이트 리뉴얼
스크롤에 맞춰 사업 구조를 풀어내는 마케팅 회사 웹사이트
Overview
ZERONINEZ에서 트리즈컴퍼니 웹사이트 리뉴얼의 프론트엔드 개발을 맡았습니다. 마케팅과 프로덕션을 중심으로 비즈니스를 펼쳐나가는 회사인만큼 동적이고 친근한 분위기의 모션과 인터랙션을 많이 활용한 웹사이트로 기획되었습니다.
Sections
섹션 단위로 끊기는 스크롤
메인은 섹션마다 다른 모션이 재생되는 구조라, 스크롤이 섹션 경계에서 멈춰야 했습니다. 각 섹션의 높이를 100dvh로 잡고 CSS scroll-snap을 걸었습니다. 모바일 주소창이 접히고 펼쳐질 때 100vh가 튀는 문제를 dvh가 해결합니다.
모션 트리거는 IntersectionObserver로 처리했습니다. 섹션이 화면 중앙에 들어오면 재생되고, 벗어나면 초기 상태로 되돌아갑니다. 되돌리도록 한 이유는 스크롤을 올려 다시 봤을 때도 같은 모션을 볼 수 있어야 해서입니다.
Horizontal
세로로 스크롤하면 가로로 흐르는 구간
어바웃 페이지에서는 회사의 사업 구조를 모션으로 설명해야 했습니다. 발굴, 교육, 마케팅, 판로확대 네 단계가 연대표를 따라가듯 순서대로 나타났다 지나가는 형태였습니다.
사용자는 평소처럼 세로로 스크롤하지만 콘텐츠는 좌에서 우로 흐르게 만들었습니다. 이 구간의 높이를 뷰포트의 다섯 배로 잡고, 안쪽 콘텐츠를 sticky로 고정한 뒤 스크롤 진행도를 가로 이동량으로 변환했습니다. 구간을 벗어나면 다시 평범한 세로 스크롤로 돌아갑니다.
const progress = clamp01(-rect.top / (rect.height - viewportHeight))
const maxShift = trackWidth - viewportWidth
setOffset(progress * maxShift)네 단계는 진행도 구간을 나눠 배정했습니다. 각 단계마다 등장과 퇴장 구간이 겹치도록 설계해서, 하나가 사라지는 동안 다음이 들어오도록 했습니다. 배경 반전은 진행도에 따라 원이 커지면서 화면을 덮는 방식으로 구현했습니다.
Header
배경에 따라 색이 바뀌는 헤더
헤더는 배경이 없는 투명 헤더입니다. 페이지 내용에 따라 로고와 메뉴가 배경과 겹쳐 안 보이는 경우가 생겼습니다.
처음에는 mix-blend-mode: difference를 썼습니다. 하지만 브랜드 컬러인 민트 그린이 반전되면서 원래 색을 잃었고, 이 사이트는 배경이 검정과 흰색이 아니라 베이지와 옅은 검정이어서 반전 결과가 보기 좋지 않았습니다.
블렌드 모드를 걷어내고 밝은 배경 영역을 직접 감지하는 방식으로 바꿨습니다. 밝은 배경을 가진 요소에 표시를 해두고, 그 요소가 헤더 높이만큼의 띠에 걸치는지를 관찰합니다.
// 화면 상단, 헤더 높이만큼의 띠만 감시 영역으로 남긴다
const observer = new IntersectionObserver(update, {
rootMargin: `0px 0px -${viewportHeight - headerHeight}px 0px`,
threshold: 0,
})
document
.querySelectorAll('[data-header-theme="light"]')
.forEach((el) => observer.observe(el))밝은 배경이 그 띠에 걸쳐 있으면 어두운 글자로, 아니면 밝은 글자로 전환됩니다. 반전에 결과를 맡기는 대신 각 상태의 색을 직접 지정할 수 있게 됐습니다.
:root {
--header-fg: #F2EFE9;
--header-accent: #3DDC97;
}
[data-header-state='dark'] {
--header-fg: #1A1A1A;
--header-accent: #000;
}Motion
프로토타입을 프레임 단위로 옮기기
모션은 디자이너가 프로토타이핑으로 만들어 전달했습니다. 결과는 볼 수 있지만 각 요소가 언제 어떤 속도로 움직이는지는 파악하기 어려웠습니다.
전달받은 프로토타입을 영상으로 녹화한 뒤 프레임 단위로 잘라 확인했습니다. 요소별 이동 방향과 시작 시점, 겹치는 구간을 직접 그려가며 구조를 파악하고 코드로 옮겼습니다.
트리즈컴퍼니는 상생의 가치를 실현하는 통합 IMC 마케팅 컴퍼니로 기업 및 기관과의 전략적 파트너십을 기반으로한 ESG 종합 컨설팅 기업입니다.
https://www.trizcompany.com/
