Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
디자이너의 스킬업을 위한 lottie.js 완벽 이해하기
Highest Rated
Rating: 4.1 out of 5(12 ratings)
76 students

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

Lottie.js로 움직이는 애니메이션에 대한 데이터 값을 Json 형식으로 출력해서 실제 코드로 웹에 적용되게 해주는 기술입니다
Highest Rated
Created by디자인베이스 디자인 강좌
Last updated 8/2021
Korean

What you'll learn

  • Lottie로 출력한 JSON 파일을 자바 스크립트를 통해 웹에서 움직임을 구현하는 방법
  • 에프터 이펙트에서 작업한 애니메이션을 Lottie 파일로 출력하는 방법

Course content

2 sections • 9 lectures • 55m total length

  • 로티 강좌 소개3:17

    Lottie.js 강좌를 시작합니다. 로티는 애니메이션을 Json 형식의 코드로 변환해서 제작해서 웹이나 앱에서 사용할 수 있도록 제작된 라이브러리입니다. 사용전 설치부터 간단한 사용법과 javascript를 활용해서 이벤트 제어하는 것까지 알아보도록 할게요.

    *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 이 강좌에서 제가 사용하는 툴은 에프터이펙트와 비주얼 스튜디오 코드(Visual Studio Code)를 사용합니다. 여러분이 VS Code 말고 다른 에디터를 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

  • lottie.js를 사용하기 위한 환경 세팅하기3:17

    로티 두번째 강좌입니다. lottie.js를 사용하기 위해서는 여러가지 설치가 필요합니다.
    우선 에프터이펙트에 lottie를 사용할 수 있도록 출력을 도와주는 Bodymovin이라는 익스텐션 설치하는 방법을 알아볼게요.

    관련 링크는 하단을 참고해주세요.


    ZXP 인스톨러 설치 :

    http://aescripts.com/learn/zxp-installer/
    바디무빈 익스텐션 설치 : https://github.com/airbnb/lottie-web/tree/master/build/extension


    *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 이 강좌에서 제가 사용하는 툴은 에프터이펙트와 비주얼 스튜디오 코드(Visual Studio Code)를 사용합니다. 여러분이 VS Code 말고 다른 에디터를 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

  • 에프터이펙트 Bodymovin 사용법3:27

    저번 강좌에서 설치한 에프터이펙트 익스텐션인 Bodymovin사용 방법을 알아볼게요. Bodymovin은 lottie를 사용할 수 있도록 출력을 도와주는 익스텐션입니다. 출력후 데모 확인해서 제대로 작동하는지 확인까지 해보도록 할게요.


    *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 이 강좌에서 제가 사용하는 툴은 에프터이펙트와 비주얼 스튜디오 코드(Visual Studio Code)를 사용합니다. 여러분이 VS Code 말고 다른 에디터를 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

  • 출력된 코드 분석하기4:35

    이번 lottie 강좌에서는 출력한 코드를 분석하는 시간을 가져볼게요. HTML, CSS, JS, Json 타입으로 나뉩니다. 어떻게 동작하는지 살펴보도록 할게요.


    *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 이 강좌에서 제가 사용하는 툴은 에프터이펙트와 비주얼 스튜디오 코드(Visual Studio Code)를 사용합니다. 여러분이 VS Code 말고 다른 에디터를 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

  • 출력된 코드 간단하게 정리하기6:50

    이번 lottie 강좌에서는 출력한 코드를 효율적으로 작업하기 위해 코드를 분리 및 정리하는 방법을 알아볼게요. HTML, CSS, JS, Json 파일로 다 쪼개서 HTML은 HTML파일에서, CSS는 CSS파일에서, JS는 JS파일에서 나눠서 작성후 연결해서 가독성과 효율성을 높여보도록 할게요!


    *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 이 강좌에서 제가 사용하는 툴은 에프터이펙트와 비주얼 스튜디오 코드(Visual Studio Code)를 사용합니다. 여러분이 VS Code 말고 다른 에디터를 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

Requirements

  • HTML, CSS 기초 지식
  • Javascript 기초 지식
  • After Effect 사용법

Description

이 강좌를 통해 Lottie에 대해 자세히 배울 수 있습니다. Lottie.js에 대해 먼저 소개를 하자면, 움직이는 애니메이션에 대한 데이터 값을 JSON 형식으로 출력해서 실제 코드로 웹과 앱에서 적용되게 해주는 기술입니다. 해당 기술을 배우면 더는 Gif, Video에 의존하지 않아도 됩니다. 로티를 사용하기 위한 환경을 먼저 세팅하고, 에프터이펙트에서 제작한 애니메이션을 바디무빈을 통해 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요.


학습 내용

총 9개의 강좌 영상이 준비되어있고, 섹션은 기초와 고급 이렇게 2가지로 나뉩니다.
기초에서는 Lottie 코드를 분석하고, 사용하기 편하게 HTML, CSS, JS, JSON 파일로 분리하는 방법을 우선 배워보고 기본적으로 제공하는 기능들을 사용하며 작동법을 익힐 수 있어요.
고급에서는 자바스크립트를 통해 마우스 오버나 스크롤, 클릭 등 다양한 행동에 대한 인터렉션을 구현할 수 있습니다. GIF와는 가장 큰 차이죠. 프레임을 원하는 대로 직접 컨트롤 할 수 있어요.


예상 질문 Q&A

Q. 로티를 배우면 뭐가 좋아요?
A. 에펙으로 작업한 애니메이션을 웹, 앱에 적용할 수 있습니다. 디자인의 퀄리티를 높여주는 요소입니다.

Q. 코드를 아예 모르는 디자이너인데 도움이 될까요?
A. Lottie가 무엇인지, 어떻게 작동하는지 원리만 알아도 개발자와 협업할 때 재미난 작업할 수 있습니다.

Q. 강의 듣기 전 준비해야 할 것이 있나요?
A. 강좌에 사용된 툴은 에프터이펙트, 비주얼 스튜디오, 일러스트레이터입니다. 해당 툴들에 대한 사용법을 알고 보는 것이 좋습니다. 그리고 자바스크립트에 대한 기초 지식을 가지고 있어야 고급 강좌를 어려움 없이 들을 수 있습니다.

Q. 예제 파일들은 제공하나요?
A. 당연히 제공합니다. 공부하는 데 최대한 어려움 없도록 예제 파일을 제공합니다.

Q. 에프터 이펙트 사용법이나 애니메이션 제작법도 알려주시나요?
A. 에프터이펙트로 감각적인 애니메이션을 가르쳐주는 강의는 아닙니다. 작업된 애니메이션을 코드로 어떻게 출력하고, 웹에 어떻게 적용하고, 자바스크립트로 어떻게 인터렉션을 구현하는지에 집중한 강의입니다.


강의 특징 ✨

저는 코딩을 하는 프로덕트 디자이너입니다. 디자이너 관점에서 어떤 부분을 어려워하며, 어떤 부분을 구현하고 싶어하는지에 대해 매우 공감하고 있습니다. 우리가 배우려는 것은 엄청난 것이 아닙니다. 어려워 보여서 못하고 있었던 것뿐이고 막상 하면 누구나 할 수 있는 것들입니다. 로티를 학습해서 매력적인 디자인을 해보세요.
참고로, 에프터이펙트로 감각적인 애니메이션을 가르쳐주는 강의는 아닙니다. 작업된 애니메이션을 코드로 어떻게 출력하고, 웹에 어떻게 적용하고, 자바스크립트로 어떻게 인터렉션을 구현하는지에 집중한 강의입니다. 짧고 밀도 높은 핵심만 가르쳐드립니다.

Who this course is for:

  • 애니메이션과 인터렉션에 관심 많은 UI 디자이너
  • 웹 코딩을 잘하는 웹 디자이너
  • 로티 사용법을 익히고 싶은 웹 퍼블리셔

Report abuse