웹 애니메이션 – GSAP, Lottie를 활용한 인터랙션 디자인

2025. 3. 19.

by. kkwako

1. 개요

현대 웹사이트에서 애니메이션은 단순한 시각적 요소를 넘어 사용자 경험(UX)을 향상시키는 중요한 요소로 자리 잡고 있다. 웹 애니메이션은 페이지 전환, 버튼 인터랙션, 로딩 효과 등 다양한 곳에서 활용되며, 사용자의 주의를 집중시키고 브랜드 아이덴티티를 강화하는 데 기여한다.

특히 GSAP(GreenSock Animation Platform) 과 Lottie는 웹 애니메이션을 쉽게 구현할 수 있는 대표적인 도구이다. GSAP는 강력한 JavaScript 기반 애니메이션 라이브러리이며, Lottie는 애프터 이펙트(After Effects)에서 제작한 애니메이션을 웹에서 가볍게 구현할 수 있도록 도와주는 라이브러리이다.

이번 글에서는 GSAP와 Lottie를 활용한 웹 애니메이션 구현 방법과 각각의 장단점을 살펴보겠다.

2. GSAP을 활용한 애니메이션 구현

✅ GSAP이란?
GSAP(GreenSock Animation Platform)는 JavaScript 기반의 애니메이션 라이브러리로, CSS, SVG, Canvas, WebGL 등 다양한 요소에 애니메이션 효과를 적용할 수 있다.

✅ GSAP의 주요 특징

고성능: 브라우저 최적화가 잘 되어 있어 부드러운 애니메이션 구현 가능
광범위한 지원: CSS, SVG, WebGL 등 다양한 요소 애니메이션 가능
타임라인 제어: 애니메이션 순서를 세밀하게 조정 가능
스크롤 연동 가능: ScrollTrigger 플러그인을 사용하면 스크롤 애니메이션 구현 가능

✅ GSAP 기본 코드 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        gsap.to(".box", { x: 500, duration: 2, ease: "power2.out" });
    </script>
</body>
</html>

✅ 설명

.box 요소가 왼쪽에서 오른쪽으로 2초 동안 이동
ease: "power2.out"을 적용해 부드러운 감속 효과 추가

✅ GSAP ScrollTrigger 활용 예제

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<script>
    gsap.to(".box", {
        x: 500,
        duration: 2,
        scrollTrigger: {
            trigger: ".box",
            start: "top 80%",
            end: "top 20%",
            scrub: true
        }
    });
</script>

✅ 설명

사용자가 스크롤을 내리면 애니메이션이 실행되도록 설정
scrub: true를 사용하면 스크롤 속도에 따라 애니메이션 속도 조절 가능

3. Lottie를 활용한 애니메이션 구현

✅ Lottie란?
Lottie는 JSON 기반 애니메이션을 실행할 수 있는 라이브러리로, Adobe After Effects에서 만든 애니메이션을 가볍게 웹에서 렌더링할 수 있도록 도와준다.

✅ Lottie의 주요 특징

고퀄리티 애니메이션: 벡터 기반이라 해상도 저하 없이 선명한 애니메이션 제공
파일 크기 최적화: GIF나 비디오보다 훨씬 가벼운 JSON 형식
코드 한 줄로 구현 가능
앱, 웹, React, Vue 등 다양한 환경 지원

✅ Lottie 기본 코드 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"></script>
</head>
<body>
    <div id="lottie-container"></div>

    <script>
        lottie.loadAnimation({
            container: document.getElementById("lottie-container"), 
            renderer: "svg",
            loop: true,
            autoplay: true,
            path: "https://assets7.lottiefiles.com/packages/lf20_UJNc2t.json"
        });
    </script>
</body>
</html>

✅ 설명

Lottie 애니메이션을 #lottie-container 안에 로드
loop: true 설정으로 애니메이션이 무한 반복
path 속성에 JSON 파일 경로 입력하여 애니메이션 적용

✅ Lottie의 장점

After Effects와 연동 가능
SVG 기반으로 고해상도 유지
파일 크기가 작아 웹 성능에 영향이 적음

✅ Lottie의 단점

복잡한 애니메이션 제작 시 After Effects 필요
애니메이션 JSON 파일을 직접 수정하기 어려움

4. GSAP vs. Lottie – 언제 사용해야 할까?

기능	GSAP	Lottie
애니메이션 방식	JavaScript로 직접 애니메이션 구현	After Effects에서 제작한 JSON 애니메이션 실행
복잡한 인터랙션	가능	제한적
성능	최적화된 성능	벡터 기반으로 가벼움
파일 크기	코드 길이에 따라 증가 가능	JSON 파일로 가볍게 유지
사용 사례	웹 인터랙션, 스크롤 애니메이션	로고 애니메이션, 로딩 화면, 아이콘 애니메이션

✅ GSAP 추천 사용 사례

페이지 전환 효과, 버튼 애니메이션, 스크롤 연동 인터랙션
SVG, Canvas, WebGL 등 다양한 요소를 애니메이션할 경우
세밀한 애니메이션 컨트롤이 필요할 때

✅ Lottie 추천 사용 사례

로고 애니메이션, 로딩 애니메이션, 아이콘 모션 그래픽
After Effects에서 제작된 고퀄리티 애니메이션을 웹에 적용할 때
GIF, 비디오보다 가벼운 애니메이션이 필요할 때

5. 결론

웹 애니메이션은 사용자 경험을 향상시키고 브랜드 아이덴티티를 강화하는 중요한 요소이다.

✅ GSAP은 복잡한 인터랙션이 필요한 경우 적합하며, JavaScript로 직접 애니메이션을 제어할 수 있어 세밀한 조정이 가능하다.
✅ Lottie는 After Effects 애니메이션을 JSON으로 변환하여 쉽게 웹에서 실행할 수 있는 도구로, 고퀄리티 애니메이션을 가볍게 구현할 수 있다.

각각의 도구가 가진 장점을 활용하여, 더 매력적이고 효과적인 웹 애니메이션을 구현해보자!

'IT & 웹개발' 카테고리의 다른 글

서버리스(Serverless) 아키텍처 – AWS Lambda, Firebase Functions 활용 (0)	2025.03.19
Prisma ORM – MySQL, PostgreSQL, MongoDB를 쉽게 관리하는 방법 (0)	2025.03.19
다크 모드(Dark Mode) 구현하는 다양한 방법 (0)	2025.03.19
웹 접근성(Accessibility) 개선을 위한 필수 체크리스트 (0)	2025.03.18
최신 CSS 기능 – CSS Grid, Flexbox, Subgrid 완벽 가이드 (0)	2025.03.18

꽈코 님의 블로그