웹페이지를 멋지게 꾸미고 싶으세요?

Lottie를 사용하면 웹사이트에 멋진 애니메이션을 쉽게 추가할 수 있습니다. Lottie 애니메이션은 아주 작은 파일 형식이기 때문에 웹사이트를 느리게 만들지 않고 생동감을 불어넣어요. 게다가, 확대하고 축소해도 화질이 떨어지지 않죠.

그럼 Lottie 애니메이션을 어디에서 받을 수 있을까요? 아마 애니메이터가 이미 맞춤 애니메이션을 만들었거나, LottieFiles 플러그인을 사용해 Adobe After Effects에서 애니메이션을 내보냈을 겁니다. 아니면 LottieFiles에서 수 천개의 무료 애니메이션을 찾을 수도 있어요. Lottie Editor나 색상 팔레트 기능으로 애니메이션을 여러분의 브랜드나 디자인에 맞게 커스터마이징해 개인 및 상업적 목적의 프로젝트에 사용해 보세요!

프로젝트에 Lottie 애니메이션을 추가하는 방법은 무궁무진합니다. 코드를 사용하거나, 사용하지 않거나 또는 여러 플랫폼과의 LottieFiles 통합을 통해서 말이죠.

이번 글에서는 하이퍼텍스트 마크업 언어, HTML로 Lottie 애니메이션을 추가하는 방법을 알아보려고 합니다. HTML을 편집할 수 있는 웹페이지, 블로그, 플랫폼이라면 어디에서든 가능합니다. 그럼 다음 내용을 배워 보죠.

  • HTML로 웹페이지에 Lottie 애니메이션을 추가하는 방법
  • Lottie 애니메이션의 배경을 변경하는 방법
  • Lottie 플레이어의 외형을 커스터마이징하는 방법

1. LottieFiles 웹 플레이어 구성요소의 스크립트 태그 추가하기

LottieFiles는 웹페이지 어디에나 Lottie 플레이어를 쉽게 추가할 수 있게 해주는 <lottie-player> 웹 구성요소를 지원합니다. 이 웹 구성요소를 추가하려면 플레이어의 스크립트 URL을 페이지 HTML의 <head> 섹션(또는 페이지의 아무 곳에나)에 추가하면 됩니다.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

2. 애니메이션의 URL 확인하기

애니메이션의 URL을 확인하는 방법은 두 가지예요.

  • 직접 호스팅하기 – Lottie 애니메이션을 생성했거나 다운로드한 후 직접 호스팅하고 싶다면, 웹사이트에 Lottie JSON 파일을 업로드해 해당 파일에 연결되는 URL을 확인할 수 있어요.
  • LottieFiles에서 확인하기 – LottieFiles에서 모든 Lottie 애니메이션의 공개 URL을 확인할 수 있어요.

3. 애니메이션 URL에 연결되는 <lottie-player> 요소 추가하기

URL을 확인했다면 코드를 복사해 웹페이지의 HTML에 붙여 넣습니다.

<URL HERE>를 Lottie 파일의 URL로 바꾸세요. Lottie URL은 아래와 같이 큰따옴표 안에 있어야 합니다.

<lottie-player src="<URL HERE>" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

됐습니다! 이제 페이지를 저장하고 미리 보기해 애니메이션을 확인하세요.

자동으로 HTML 코드 생성하기

아니면, Lottie 웹 플레이어 페이지를 통해 플레이어에 들어갈 코드를 빠르게 생성할 수도 있어요.

Lottie 파일 URL을 입력하기만 하면 됩니다. 플레이어나 애니메이션을 커스터마이징할 수 있는 옵션을 설정할 수도 있죠. 그런 다음 생성된 코드를 복사해 웹사이트의 HTML에 붙여 넣으세요.

애니메이션 페이지에서, ‘<html>에서 애니메이션 사용’(Use animation in <html>)을 클릭해 코드를 자동으로 생성할 수도 있어요.

이번에는 애니메이션이 재생되는 방식과 플레이어 외형을 커스터마이징하는 방법에 관한 자세한 정보를 소개해 드릴게요.

애니메이션이 재생되는 방식 커스터마이징하기

<lottie-player> 웹 구성요소는 페이지에 나타나는 애니메이션을 조정할 수 있는 다양한 옵션을 제공합니다. 다음 속성을 통해 커스터마이징해 보세요.

재생 모드(Play Mode): 바운스(Bounce) 재생 모드를 설정할 수 있습니다. 다시 말해, 애니메이션이 앞으로 재생되다가 마지막 프레임에 도달하면 반대로 재생되는 거죠. 앞뒤로 반복 재생됩니다.

방향(Direction): 애니메이션을 앞으로 재생할지, 뒤로 재생할지 선택할 수 있습니다.

배경(Background): 애니메이션의 배경 색상을 설정할 수 있습니다. 웹사이트의 배경이 보이도록 하려면 배경을 투명으로 설정해 보세요. “white” 같은 유효한 HTML 색상 속성이나 “#FFFFFF” 같은 16진수 색상값으로 설정해 배경 색상을 설정할 수도 있어요.

속도(Speed): 재생 속도를 설정할 수 있습니다. 기본 속도는 1입니다. 값이 1보다 작으면 느리게 재생되죠. 예를 들어 속도값을 0.5로 지정하면 애니메이션이 50%의 속도로 재생됩니다. 값이 1보다 크면 빠르게 재생됩니다. 속도값을 2로 지정하면 애니메이션 두 배 빠르게 재생되겠죠. 0.75나 1.5 같은 소수를 지정해 원하는 속도로 알맞게 조정할 수도 있어요.

반복(Loop): 이 속성을 활성화하면 애니메이션이 무한 반복 재생됩니다. 비활성화하면 애니메이션이 한 번 재생된 후 멈춥니다.

컨트롤(Controls): 이 속성을 활성화하면 플레이어에 애니메이션을 시작, 중단, 일시 정지할 수 있는 탐색기 바가 표시됩니다. 애니메이션을 디자인 요소로 사용하려면 이 속성을 비활성화하는 게 좋겠죠.

호버(Hover): 체크하면 사용자가 애니메이션 위에 마우스 커서를 올릴 때만 애니메이션이 재생됩니다.

자동 재생(Autoplay): 이 속성을 활성화하면 애니메이션이 로딩되자마자 자동으로 재생됩니다. 이 속성을 활성화하지 않을 경우 애니메이션이 재생되도록 하려면 자바스크립트를 사용해야 해요.

플레이어의 외형 커스터마이징

HTML 요소를 사용할 경우, 캐스케이딩 스타일 시트(CSS)를 사용해 요소의 외형을 변경할 수 있습니다. 마찬가지로, CSS를 사용해 웹사이트의 스타일과 디자인에 맞춰 Lottie 플레이어의 외형을 커스터마이징할 수도 있죠.

이미 사용하고 계신 일반적인 CSS 기능 외에도 다음 커스텀 CSS 변수를 사용해 플레이어의 특정 부분을 변경할 수 있어요.

--lottie-player-toolbar-height
툴바 높이를 지정합니다. 기본값은 35px입니다.

--lottie-player-toolbar-background-color
툴바 배경 색상을 지정합니다. 기본값은 투명(transparent)입니다.

--lottie-player-toolbar-icon-color
툴바 아이콘 색상을 지정합니다. 기본값은 #999입니다.

--lottie-player-toolbar-icon-hover-color
툴바 아이콘 호버 색상을 지정합니다. 기본값은 #222입니다.

--lottie-player-toolbar-icon-active-color
툴바 아이콘 활성 상태 색상을 지정합니다. 기본값은 #555입니다.

--lottie-player-seeker-track-color
탐색기 트랙 색상을 지정합니다. 기본값은 #CCC입니다.

--lottie-player-seeker-thumb-color
탐색기 섬(thumb) 색상을 지정합니다. 기본값은 rgba(0, 107, 120, 0.8)입니다.

예를 들어, 탐색기 트랙 및 섬 색상을 주황색으로 바꾸려면,

<style>
    lottie-player {
    --lottie-player-seeker-track-color: #e48509;
    --lottie-player-seeker-thumb-color: #ffcc00;
    }
</style>

이렇게 색상이 바뀝니다!

더 많은 고급 기능과 문서를 확인하시려면 Lottie 웹 플레이어 GitHub 페이지를 확인해 주세요.

웹사이트에 애니메이션 추가하기, 참 쉽죠!

보신 것처럼 HTML을 사용해 Lottie 애니메이션을 추가하는 방법은 간단해요. 자동으로 생성된 코드를 복사하고 붙여 넣는 것만큼 쉽죠.

하지만 이게 다가 아니에요. 이 밖에도 Lottie 애니메이션, HTML, 약간의 자바스크립트로 할 수 있는 일은 정말 많아요. 예를 들면, 애니메이션에 상호작용 요소를 넣어 사용자의 스크롤링에 반응하게 한다든지, 특정 클릭 횟수 이후 여러 애니메이션을 연결하거나 재생한다든지 말이죠. 여기에서 인터랙티브 애니메이션 설정에 관한 자세한 정보를 확인하시거나 Lottie 웹 플레이어 Github 페이지에서 다른 고급 커스터마이징 요소를 확인해 보세요.

그럼 Lottie로 만든 멋진 애니메이션 기대할게요!