디자이너의 스킬업을 위한 Lottie 완벽 이해하기

에어비앤비에서 만든 라이브러리
Lottie를 시작해보세요 🎈

움직이는 이미지 
만들어보실래요?

에어비앤비에서 만든 핫한 라이브러리, Lottie를 아시나요?

Lottie에 대해 먼저 소개하자면, 움직이는 애니메이션에 대한 데이터 값을 JSON 형식으로 출력해서 실제 코드로 웹과 앱에서 적용되게 해주는 기술입니다. 해당 기술을 배우면 더는 Gif, Video에 의존하지 않아도 움직이는 애니메이션을 구현할 수 있게 됩니다.

이 강의를 통해 Lottie에 대해 자세히 배울 수 있습니다. 로티를 사용하기 위한 환경을 먼저 세팅하고, 애프터이펙트에서 제작한 애니메이션을 바디무빈(Bodymovin)을 통해 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요.

Lottie로 구현한
애니메이션 이미지

_{해당 링크에서 lottie로 제작된 예시를 더 많이 볼 수 있습니다.}

_{예제 - 클릭했을 때 로티 애니메이션 실행하는 화면}

_{예제 - 스크롤 정도에 따른 로티 애니메이션 실행}

_{예제 - 에프터이펙트로 제작해서 출력한 애니메이션}

누가 들으면 좋을까요?

_{멈춰있는 것에 
더 이상 
만족 못 하는 
열정만렙 디자이너}

_{본인이 작업한 
애니메이션을 코드로 
웹에 적용하고 싶은 
능력형 디자이너}

_{Lottie.js를 
빠른 시간 안에 
익히고 싶은 
웹 퍼블리셔}

안녕하세요, 
코딩하는 프로덕트 디자이너 
디자인베이스입니다.

저는 코딩을 하는 프로덕트 디자이너입니다. 디자이너 관점에서 어떤 부분을 어려워하며, 어떤 부분을 구현하고 싶어하는지에 대해 매우 공감하고 있습니다.

우리가 배우려는 것은 엄청난 것이 아닙니다. 어려워 보여서 못하고 있었던 것뿐이고 막상 하면 누구나 할 수 있는 것들입니다. 로티를 학습해서 매력적인 디자인을 해보세요.

참고로, 에프터이펙트로 감각적인 애니메이션을 가르쳐주는 강의는 아닙니다. 작업된 애니메이션을 코드로 어떻게 출력하고, 웹에 어떻게 적용하고, 자바스크립트로 어떻게 인터렉션을 구현하는지에 집중한 강의입니다. 짧고 밀도 높은 핵심만 가르쳐드립니다.

순서대로 학습해보세요!

총 9개의 강좌 영상이 준비되어 있고, 기초와 고급 이렇게 2가지 섹션으로 나뉩니다. 
기초에서는 Lottie 코드를 분석하고, 사용하기 편하게 HTML, CSS, JS, JSON 파일로 분리하는 방법을 우선 배웁니다. Lottie에서 기본적으로 제공하는 기능들을 사용하며 작동법을 익힐 수 있어요. 

_{정리 안 된 복잡한 코드를 파일별로 분리}

고급에서는 자바스크립트를 통해 마우스 오버나 스크롤, 클릭 등 다양한 행동에 대한 인터렉션을 구현할 수 있습니다. GIF와는 가장 큰 차이죠. 프레임을 원하는 대로 직접 컨트롤 할 수 있어요.

_{직접 자바스크립트로 인터랙션 코드 구현}

자주 묻는 질문 💬