Atomic
스크롤할 때 페이지가 이야기를 전달하도록 구축된 SaaS 분석 제품용 모션 기반 마케팅 사이트입니다.
React 19
Vite
Tailwind CSS 4
GSAP
Locomotive Scroll
Framer Motion
Swiper
개요
Atomic은 '비즈니스에서 일어나는 일을 항상 파악할 수 있다'는 한 가지 약속을 중심으로 구축된 SaaS 분석 제품을 위한 랜딩 페이지입니다. 이 페이지에는 단 하나의 어려운 임무가 있습니다. 방문자에게 단 한 번의 스크롤만으로 이 제품이 현대적이고 가입할 가치가 있다는 확신을 주어야 합니다. 스크롤해 내려갈 때마다 각 섹션이 애니메이션으로 나타나며 전체가 소셜 증명으로 마무리되는 1페이지 경험으로 이 랜딩 페이지를 구축했습니다.
문제점
랜딩 페이지는 처음 몇 초 안에 평가됩니다. 대부분의 마케팅 템플릿은 정적이고 교체 가능해 보이며, 팀이 "프리미엄" 애니메이션에 도달하는 순간 스크롤이 끊기고 로드 시간이 늘어납니다. 요구 사항은 대부분의 사이트가 놓치는 부분을 공략하는 것이었습니다: 방문자와 싸우거나 메시지를 가리지 않으면서도 진정으로 시네마틱한 느낌을 주는 모션.
내 역할 및 접근 방식
저는 레이아웃, 시각 디자인, 카피 구조, 애니메이션을 엔드투엔드로 소유했습니다. 효과를 페이지 전반에 흩뿌리는 대신 전체 스크롤을 안무된 단일 시퀀스로 취급하고 적절한 순간에 각 섹션이 드러나도록 구축했습니다. 제가 계속해서 돌아간 규칙은 모션이 설득에 기여해야 한다는 것이었습니다. 단순히 꾸미기 위한 것이 아니라 시선을 헤드라인으로 먼저 끌고 그다음 제품으로, 그다음에는 소셜 증명으로 끌어야 합니다.
기술 스택
주요 기능
갤러리
도전 과제 및 해결 방안
텍스트 애니메이션 타이밍이 가장 까다로운 부분이었습니다. SplitText는 헤드라인을 측정하고 줄 단위로 나누지만 웹 폰트 로딩이 완료되기 전에 실행되면 레이아웃이 이동하고 분할이 깨집니다. 저는 모든 텍스트 애니메이션을 document.fonts.ready 뒤에 배치하여 실제 글꼴이 적용된 후에만 분할이 발생하도록 했습니다. 이로써 깜박임과 리플로우가 사라졌습니다.
세 가지 애니메이션 시스템을 조율하는 것이 또 다른 과제였습니다. GSAP의 smooth-scroll 엔진, Framer Motion의 진행률 표시줄, Locomotive가 모두 스크롤 위치 제어권을 가지려 했습니다. 이에 GSAP ScrollSmoother를 단일 진실 공급원(single source of truth)으로 삼고, 여기서 생성된 값 위에 다른 시스템들을 얹는 방식으로 레이어링하여 모든 요소를 동기화 상태로 유지했습니다. 터치 디바이스에서는 스크롤이 버벅거리거나 반응이 느리게 느껴지지 않도록 부드러운 스크롤 강도를 의도적으로 낮춰 스마트폰에서도 쾌적하게 반응하도록 했습니다.
결과
그 결과 상용 서비스 수준의 스크롤 연출을 갖춘 빠른 랜딩 페이지가 완성되었습니다. 수많은 마케팅 사이트가 시도하지만 깔끔하게 성공하는 곳은 드문 모션 품질입니다. 실제 제품 랜딩 페이지로 손색이 없으며 성능 저하 없이 고난도 프론트엔드 애니메이션을 구현한 레퍼런스로도 기능합니다.
유사한 프로덕트 문제가 있으신가요?
현재 프로덕트 현황, 필요한 결과, 직면한 제약 사항을 공유해 주세요. 이를 바탕으로 합리적인 첫 번째 마일스톤을 정의해 드립니다.
웹 애플리케이션 개발 서비스