웹사이트 모션 효과, 무료로 넣는 법 — 레퍼런스 7곳 정리

웹사이트 모션 효과는 대부분 무료 오픈소스로 해결됩니다. 스크롤에 반응하는 3D, 살아 움직이는 배경, 애플 OS 같은 유리 질감까지 이미 공개된 라이브러리가 있어서 직접 만들 필요가 없어요. 나모 사이트빌더 블로그가 해외 디자이너들이 실제로 쓰는 레퍼런스 7곳을 한 페이지에 정리했습니다. 7곳 중 4곳은 깃허브에 코드가 공개된 무료 라이브러리고, 3곳은 그 라이브러리로 만든 결과물을 볼 수 있는 곳입니다.

여기서 말하는 모션 효과는 화면이 가만히 있지 않고 스크롤·마우스·시간에 따라 변하는 움직임을 뜻해요. 배너가 자동으로 넘어가는 슬라이드와는 다릅니다.

웹사이트 모션 효과, 코딩 없이도 넣을 수 있나요?

절반은 맞고 절반은 아니에요. 아래 라이브러리들은 복사해서 붙이면 되는 수준까지 정리돼 있어서 코드를 직접 짤 일은 거의 없습니다. 다만 붙여 넣을 자리는 있어야 해요. 그래서 내 사이트에 코드를 넣을 수 있는지부터 확인하는 게 먼저입니다.

코드를 직접 넣기 어렵다면 레퍼런스를 다른 방식으로 쓰면 됩니다. 나모 사이트빌더처럼 AI 채팅으로 페이지를 만들고 고치는 도구에서는 원하는 화면을 말로 설명하게 되는데, 이때 레퍼런스 링크를 모아 두면 "이 사이트 느낌으로"라고 한 줄로 전할 수 있어요. 만들기 전에 원하는 모습을 정리하는 재료로 쓰는 거예요.

무료로 쓸 수 있는 모션 라이브러리는 어디서 찾나요?

세 곳만 알아도 웬만한 건 다 됩니다. 움직임 전반은 GSAP, 배경은 Paper Shaders, 유리 질감은 liquid-glass-js예요. 셋 다 깃허브에 공개돼 있고 상업적으로 써도 비용이 들지 않습니다.

01. GSAP — 웹 애니메이션의 표준 라이브러리 (github.com/greensock/gsap)

스크롤·텍스트·SVG·WebGL 움직임을 타임라인 하나로 다루는 자바스크립트 라이브러리입니다. 공식 문서 기준으로 Webflow 후원 이후 상업적 사용을 포함한 모든 용도에 무료이고, 의존성이 없어 어떤 프레임워크에도 붙습니다.

플러그인이 기능별로 나뉘어 있어 필요한 것만 골라 쓰면 됩니다. ScrollTrigger는 스크롤 위치에 맞춰 애니메이션을 재생하고, SplitText는 문장을 글자 단위로 쪼개 하나씩 등장시킵니다. Flip은 요소가 자리를 옮길 때 그 사이를 자연스럽게 이어 주고, MorphSVG는 도형이 다른 도형으로 변하게 합니다. Draggable은 끌어서 움직이게 만들어요.

02. Paper Shaders — 배경이 살아 움직이는 셰이더 묶음 (github.com/paper-design/shaders)

HTML 캔버스 위에서 도는 애니메이션 셰이더 모음입니다. 셰이더는 그래픽카드가 직접 픽셀을 그리는 작은 프로그램이라 영상 파일보다 가볍고, 색·왜곡·속도를 값으로 바꿀 수 있어요. 공식 저장소 기준 의존성이 없고 라이선스는 Apache 2.0, 깃허브 별은 3.6천 개입니다.

파스텔 덩어리가 서로 섞이는 MeshGradient, 점이 궤도를 도는 DotOrbit 같은 효과가 들어 있고, 리액트용 패키지가 따로 있어 컴포넌트처럼 씁니다.

03. liquid-glass-js — 애플 OS 느낌의 유리 효과 (github.com/dashersw/liquid-glass-js)

카드·버튼·메뉴를 유리처럼 만들어 뒤 배경이 비치고 굴절되게 하는 라이브러리입니다. 둥근 사각형, 원, 알약 모양을 지원하고 가장자리 세기·테두리 빛·블러 반경·색조를 조절판에서 실시간으로 바꿔 볼 수 있어요. 데모는 dashersw.github.io/liquid-glass-js 에서 바로 확인됩니다.

모션 감각은 어떤 사이트를 보고 배우나요?

라이브러리를 아는 것과 잘 쓰는 것은 다릅니다. 같은 기능이라도 어디에 얼마나 쓰느냐에서 차이가 나기 때문에, 잘 만든 사이트를 직접 보는 게 가장 빠릅니다.

04. PORTO ROCHA — 대담한 브랜드 비주얼 (portorocha.com)

뉴욕과 런던에 사무실을 둔 전략·디자인 에이전시입니다. 사이트에서 스스로를 "global strategy and design agency"라고 소개하고, 비주얼 아이덴티티·타이포그래피·공간 그래픽·인터랙티브·모션 디자인을 함께 다룹니다. 공개된 작업에 Nike, Google, Netflix, Robinhood, W Hotels, 그리고 상파울루 미술관(MASP) 같은 문화기관이 있어요. 색과 글자만으로 브랜드를 세우는 방식을 보기 좋습니다.

05. Instrument — 브랜드와 디지털 경험을 함께 (instrument.com)

스스로를 "a digital-first design agency where creativity meets technology"라고 소개하는 곳입니다. 브랜드·마케팅·제품 세 영역을 묶어 브랜드, 제품, 웹사이트, 캠페인을 만든다고 밝히고 있고, 공개 작업에 Nike, Google, Netflix, Spotify, Microsoft, Patagonia, Uber, Stripe가 있습니다. 케이스 스터디가 기획 의도부터 화면까지 이어져 있어 웹사이트 구성을 참고하기에 좋아요.

스크롤이 부드러운 사이트는 뭘 쓴 건가요?

스크롤 전용 라이브러리를 쓴 경우가 많습니다. 마우스 휠이 끊기듯 움직이는 기본 스크롤 대신, 멈출 때까지 미끄러지듯 이어지는 움직임을 만들어 주는 코드예요.

06. Lenis — 부드러운 스크롤 (github.com/darkroomengineering/lenis)

Darkroom Engineering이 만든 스크롤 라이브러리입니다. 공식 설명은 "a lightweight, robust, and performant smooth scroll library"이고, 라이선스는 MIT, 깃허브 별은 1.6만 개입니다. 스크롤 위치를 WebGL 장면과 맞추거나 요소마다 속도를 다르게 주는 패럴랙스에 쓰이고, 리액트·뷰·프레이머와 연결됩니다.

스크롤 속도에 따라 화면이 살짝 기울거나 이미지가 뒤늦게 따라오는 사이트는 대부분 이 계열을 쓴 결과입니다.

3D 요소는 어떻게 가져다 쓰나요?

이미 만들어 둔 것을 골라 쓰는 게 빠릅니다. 3D를 직접 만들려면 모델링과 셰이더를 둘 다 다뤄야 해서, 완성된 걸 가져다 쓰는 쪽이 현실적이에요.

07. ThreeUI — 3D 웹 요소 저장소 (threeui.com)

Three.js 기반의 컴포넌트와 통째 템플릿을 모아 둔 곳입니다. Three.js는 브라우저에서 3D를 그리는 자바스크립트 라이브러리예요. 랜딩 페이지, 히어로 섹션, Three.js 장면, 3D 오브젝트, 배경, 버튼, 모션 디자인, UI 요소로 나뉘어 있고 복사해서 바로 쓰는 형태를 내세웁니다.

쓰는 방법은 브라우즈 화면에서 원하는 칸을 고르고, 코드를 복사하고, 내 프로젝트에 붙여넣는 순서입니다. MCP 연결도 제공해 AI 코딩 도구에서 바로 불러올 수 있어요. 무료와 유료가 섞여 있어 PRO 표시를 확인하고 고르면 됩니다.

모션을 넣을 때 자주 놓치는 것은?

크게 세 가지예요. 첫째는 속도입니다. 첫 화면에 무거운 3D를 올리면 화면이 뜨는 데 시간이 걸리고, 구글이 보는 Core Web Vitals의 LCP(가장 큰 요소가 그려지는 시각) 점수가 떨어집니다. 첫 화면은 가볍게 두고 아래로 내려갈수록 무거운 장면을 두는 편이 안전해요.

둘째는 접근성입니다. 운영체제에서 동작 줄이기를 켠 사용자에게는 움직임을 멈춰야 하는데, CSS의 prefers-reduced-motion 미디어 쿼리로 처리합니다. 움직임에 어지럼증을 느끼는 사용자가 실제로 있습니다.

셋째는 과용입니다. 한 화면에서 움직이는 것이 셋을 넘어가면 시선이 흩어져 정작 버튼이 안 눌립니다. 모션은 여기를 보라는 신호인데, 신호가 많아지면 신호 구실을 못 해요.