AOS 스크롤 애니메이션 완벽정리! 설치부터 오류해결까지

작성일자 글쓴이

AOS(Animate On Scroll)는 HTML 태그에 data-aos 속성만 추가하면 스크롤 시 요소가 자연스럽게 나타나는 효과를 구현할 수 있는 자바스크립트 라이브러리입니다. CDN 스크립트 두 줄과 AOS.init() 한 줄만 넣으면 복잡한 코드 없이 바로 적용됩니다.

AOS란 무엇인가

AOS는 스크롤 위치에 따라 요소를 fade / flip / slide / zoom 형태로 나타나게 해주는 CSS 기반 애니메이션 라이브러리입니다. 자바스크립트를 깊이 몰라도 HTML 태그에 속성 하나만 붙이면 동작하기 때문에, 퍼블리셔부터 프론트엔드 개발자까지 진입장벽 없이 쓸 수 있다는 게 가장 큰 장점인데요. 실제로 사이드 프로젝트 랜딩페이지를 급하게 꾸며야 했을 때 AOS 하나로 30분 만에 스크롤 연출을 끝낸 적이 있는데, 그만큼 투입 시간 대비 결과물이 확실한 라이브러리입니다.

설치 방법 (CDN vs npm)

빠르게 테스트만 해보고 싶다면 CDN 방식이, 프로젝트에 정식으로 포함시킬 거라면 npm 설치가 더 적합합니다.

CDN 방식

html

<head>
    <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css">
    <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
</head>

npm 방식

bash

npm install aos --save

js

import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();

기본 사용법

라이브러리를 불러왔다면 body 태그 안에서 초기화 스크립트를 실행하고, 애니메이션을 주고 싶은 요소에 data-aos 속성을 추가하면 끝입니다.

html

<body>
    <div data-aos="fade-up">
        스크롤하면 아래에서 위로 서서히 나타납니다
    </div>

    <div data-aos="zoom-in-right" data-aos-duration="1200">
        확대되면서 오른쪽에서 등장합니다
    </div>

    <script>
        AOS.init();
    </script>
</body>

data-aos 옵션 속성 총정리

옵션설명기본값
data-aos사용할 애니메이션 효과명–
data-aos-offset애니메이션이 시작될 스크롤 위치120
data-aos-delay재생 대기 시간 (0~3000, 50단위)0
data-aos-duration애니메이션 재생 시간 (0~3000, 50단위)400
data-aos-easing재생 속도 곡선ease
data-aos-once최초 1회만 재생할지 여부FALSE
data-aos-anchor-placement애니메이션이 시작되는 기준 위치top-bottom

애니메이션 효과 종류 총정리

  • Fade 계열: fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left
  • Flip 계열: flip-up, flip-down, flip-left, flip-right
  • Slide 계열: slide-up, slide-down, slide-left, slide-right
  • Zoom 계열: zoom-in, zoom-out, zoom-in-up/down/left/right, zoom-out-up/down/left/right

효과별로 느낌 차이가 은근히 커서, 코드만 보고 판단하기보다 공식 데모 페이지에서 직접 눈으로 비교해보고 고르시는 걸 추천드립니다.

AOS 안 될 때 원인 & 해결법

CDN을 분명히 넣었는데 스크롤해도 애니메이션이 안 나타난다는 문의가 정말 많습니다. 대부분 아래 세 가지 중 하나가 원인입니다.

  1. AOS.init() 누락 — 스크립트만 불러오고 초기화 함수를 실행하지 않은 경우입니다. body 최하단에 <script>AOS.init();</script>가 들어있는지 확인해야 합니다.
  2. CSS 파일 미로드 — js만 불러오고 aos.css를 빼먹으면 속성은 인식돼도 스타일이 적용되지 않아 그냥 처음부터 다 보이는 상태가 됩니다.
  3. 부모 요소의 overflow 충돌 — 부모 태그에 overflow: hidden이나 overflow: auto가 걸려 있으면 AOS가 스크롤 위치를 제대로 감지하지 못해 애니메이션이 씹히는 경우가 많습니다.

동적으로 로딩되는 요소(예: Ajax로 불러온 리스트)에 AOS를 적용했는데 반응이 없다면, 요소가 추가된 시점에 AOS.refresh() 또는 AOS.refreshHard()를 호출해줘야 합니다.

React / Vue에서 AOS 사용하기

React나 Vue 같은 SPA 환경에서는 컴포넌트 마운트 시점에 초기화해줘야 합니다.

React

jsx

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function App() {
  useEffect(() => {
    AOS.init({ duration: 800, once: true });
  }, []);

  return (
    <div data-aos="fade-up">React에서도 잘 동작합니다</div>
  );
}

Vue

js

import AOS from 'aos';
import 'aos/dist/aos.css';

export default {
  mounted() {
    AOS.init({ duration: 800, once: true });
  }
}

라우팅으로 페이지가 바뀌면서 요소가 새로 렌더링될 때는 AOS.refresh()를 함께 호출해줘야 애니메이션이 끊기지 않습니다.

AOS 대안 라이브러리 비교

라이브러리특징학습 난이도
AOSdata 속성만으로 적용, 가장 간단낮음
ScrollReveal세밀한 커스터마이징 가능중간
GSAP ScrollTrigger고급 인터랙션 구현 가능, 무겁고 강력높음

단순히 요소를 나타나게 하는 정도라면 AOS로 충분하고, 스크롤에 맞춰 정교한 인터랙션까지 구현하고 싶다면 GSAP ScrollTrigger 쪽을 검토해보시는 걸 권해드려요.

자주 묻는 질문 (FAQ)

Q1. AOS 스크립트를 넣었는데 아무 효과도 안 보여요.

A. AOS.init() 호출 누락, CSS 미로드, 부모 요소의 overflow 충돌 세 가지를 순서대로 확인해보시면 대부분 해결됩니다.

Q2. 스크롤을 위로 올렸다가 다시 내리면 애니메이션이 왜 또 재생되나요?

A. 기본값이 반복 재생이기 때문입니다. 한 번만 재생되게 하려면 data-aos-once="true" 옵션을 추가하면 됩니다.

Q3. Ajax로 나중에 추가된 요소에는 왜 적용이 안 되나요?

A. AOS는 초기화 시점의 DOM을 기준으로 동작하기 때문에, 요소가 추가된 후 AOS.refreshHard()를 호출해줘야 합니다.

Q4. 모바일에서는 애니메이션을 끄고 싶은데 가능한가요?

A. AOS.init({ disable: 'mobile' })처럼 옵션을 설정하면 특정 디바이스에서 애니메이션을 비활성화할 수 있습니다.

마무리

AOS는 코드 몇 줄만으로 스크롤 애니메이션을 완성할 수 있는 가성비 좋은 라이브러리입니다. 설치와 기본 사용법만 알아도 충분히 활용할 수 있지만, 실제로는 초기화 누락이나 overflow 충돌 같은 사소한 이유로 막히는 경우가 많으니 오류가 생기면 이 글의 트러블슈팅 항목부터 다시 확인해보시길 추천드립니다.

함께 보면 좋은 글

파워포인트 무료설치 방법 3가지! 정품인증까지 총정리 (2026)

올림픽대로 교통상황 CCTV 실시간 사고 여의도 확인

컴퓨터활용능력 자격증 조회 – 인터넷 발급 방법

배드뱅크 신청 방법 대상자 조회 │ 조건·서류·절차·주의사항