AOS란? 스크롤 애니메이션 라이브러리 소개

웹 페이지를 스크롤할 때 자연스럽게 요소들이 등장하거나 움직이는 애니메이션 효과를 본 적 있을 것이다. 이러한 효과는 사용자 경험(UX)을 높여주며 콘텐츠를 더욱 돋보이게 만든다.
AOS(Animate On Scroll)는 이런 스크롤 기반 애니메이션을 손쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리이다.

---

AOS의 특징

• 스크롤 이벤트에 따라 요소에 애니메이션 적용
• 다양한 애니메이션 타입 제공
• delay, duration, offset 등 세부 조정 가능
• React, Vue, Next.js 등 프레임워크에서도 쉽게 적용 가능
• CSS와 JavaScript만으로 구현되므로 가볍고 빠름

---

설치 방법

프로젝트에 AOS를 설치하려면 아래 명령어를 사용한다.

npm install aos

또는

yarn add aos

---

사용 방법 (React/Next.js 기준)

1. CSS 불러오기
   globals.css 또는 컴포넌트 파일에 아래 코드 추가:

import 'aos/dist/aos.css'

2. AOS 초기화
   useEffect 훅으로 AOS를 초기화한다.

import AOS from 'aos'
import { useEffect } from 'react'

useEffect(() => {
  AOS.init()
}, [])

3. HTML에 속성 추가
   애니메이션을 적용할 요소에 data-aos 속성을 추가한다.

<div data-aos="fade-up">
  콘텐츠가 위쪽에서 자연스럽게 나타납니다.
</div>

---

주요 속성

속성	설명
data-aos	적용할 애니메이션 이름 (예: fade-up, zoom-in 등)
data-aos-delay	애니메이션 지연 시간 (ms 단위)
data-aos-duration	애니메이션 지속 시간 (ms 단위)
data-aos-offset	애니메이션이 시작될 스크롤 위치 오프셋
data-aos-anchor-placement	기준점 설정 (top-bottom, center-center 등)

---

자주 사용하는 애니메이션 종류

애니메이션 이름	설명
fade	점점 투명도(0 → 1)가 바뀌며 부드럽게 나타남
fade-up	아래에서 위로 올라오며 서서히 등장
fade-down	위에서 아래로 내려오며 서서히 등장
fade-left	오른쪽에서 왼쪽으로 이동하며 서서히 등장
fade-right	왼쪽에서 오른쪽으로 이동하며 서서히 등장
zoom-in	작게 시작해서 점점 확대되며 등장
zoom-out	크게 시작해서 점점 축소되며 등장
slide-up	아래에서 위로 밀리듯이 등장 (fade보다 더 뚜렷한 움직임)
flip-left	왼쪽 축을 기준으로 회전하며 카드처럼 뒤집히며 등장

전체 목록은 공식 문서에서 확인 가능:
https://michalsnik.github.io/aos/

---

마무리

AOS는 복잡한 JavaScript 코드를 작성하지 않고도 직관적인 방식으로 애니메이션을 추가할 수 있는 매우 유용한 도구이다.
단순한 포트폴리오부터 상업용 웹사이트까지 다양한 프로젝트에 적용해볼 수 있다.