강의

N
챌린지

멘토링

N
클립

로드맵

디자인 · 아트

/

UX/UI

[LottieFiles 공식] After Effects로 만드는 Lottie 애니메이션 (수료증 발급)

글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요! 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

(4.9) 수강평 9개

수강생 543명

난이도 입문

수강기한 무제한

  • LottieFiles
  • 인프런
애프터이펙트
애프터이펙트
Lottie
Lottie
그래픽디자인
그래픽디자인
모션그래픽
모션그래픽
After Effects
After Effects
3d
3d
애프터이펙트
애프터이펙트
Lottie
Lottie
그래픽디자인
그래픽디자인
모션그래픽
모션그래픽
After Effects
After Effects
3d
3d
Thumbnail
라인
SK그룹
카카오엔터테인먼트
카카오
하이브랩

하이브랩

임직원들도 이 강의를 듣고 있어요!

라인
SK그룹
카카오엔터테인먼트
카카오
하이브랩

하이브랩

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

4.9

5.0

전윤서

38% 수강 후 작성

무료로 좋은 강의 감사합니다.

5.0

lemonida

50% 수강 후 작성

생초보인 제가 들어도 따라 할수 있네요 감사합니다!

5.0

Jang Jaehoon

50% 수강 후 작성

좋은 강의 감사합니다!

수강 후 이런걸 얻을 수 있어요

  • LottieFiles 플러그인 설치 & 셋업

  • After Effects ↔ Lottie(JSON·dotLottie) Import·Export 워크플로우

  • Expressions 스크립팅으로 애니메이션 자동화 & 호환성 체크

  • Lottie Optimizer 활용한 파일 용량 최소화

  • 배치 렌더링(Bulk Render) & 2.5D(패럴랙스·익스트루전) 입체감 연출

오직 인프런에서만!
LottieFiles 공식 한글화 강의를 수강하고
업무에 바로 적용해보세요!

After Effects와 LottieFiles로 배우는 쉽고 가벼운 모션 애니메이션 실전 가이드

웹과 앱에 바로 적용 가능한 실용적인 모션 애니메이션을 만들어보고 싶으신가요?
이번 강의에서는 After Effects와 LottieFiles를 활용해
쉽고 가볍게 애니메이션을 제작하는 방법을 알려드립니다.

이번 강의에서 알려드려요!

기본 모션 원리부터 캐릭터 애니메이션 제작까지

Faux 3D(페이크 입체감) 연출법

워크스페이스를 활용한 협업 및 핸드오프까지

<After Effects로 만드는 Lottie 애니메이션>에서
핵심만 모아 단 40분 만에 익혀보세요.

CHECK 1

Lottie란 무엇일까요?

Lottie는 JSON 기반의 애니메이션 파일로

Lottie를 활용해 애니메이션을 이미지만큼 쉽게 옮길 수 있어요.

용량이 적고 어느 기기에서나 작동 가능하며

크기를 조정해도 해상도가 낮아지지 않는 것이 Lottie의 강력한 장점이에요.

CHECK 2

왜 Lottie를 사용해야 할까요?

자유로운 크기 조정

해상도의 영향을 받지 않고
확대하거나 축소할 수 있어요.

작은 크기
GIF나 MP4 같은 형식에 비해
품질은 같으면서 훨씬 더 작아요.

상호작용성
Lottie에는 애니메이션 요소가 드러나 있어
상호작용하도록 수정할 수 있고 스크롤링, 클릭,
호버링 같은 상호작용에 반응할 수 있어요.

다양한 플랫폼 지원과 라이브러리
개발자에게 Lottie를 핸드오프하기 정말 쉬워요. Lottie 애니메이션을 iOS, 안드로이드, 웹, React Native에서 수정하지 않고 바로 사용할 수 있어요.

CHECK 3

세계적인 최고의 웹과 앱 서비스가
Lottie를 사용하고 있어요

현업에서 활발히 사용되는 Lottie의 사용 케이스를 확인해보세요.

cashbag - showcase card
Gmarket - showcase card(kr) (1)
Qcells - showcase card (2)
showcase card (1)
showcase card (2)
showcase card_kr
showcase card
KR - riid - showcase card
showcase card_toss
gbike-kr card
Spoon - showcase card kr

그밖에 다양한 활용 케이스는 이곳에서 확인하실 수 있어요.

CHECK 4

어떻게 수강해야 할까요?

[MD]언어설정_gif_800_5-9s

인프런 강의는 다양한 음성 언어와 자막을 지원하고 있어요.

수강 화면 하단에서 톱니마퀴 아이콘(설정)을 누른 뒤,
원하는 음성 언어와 자막을 자유롭게 선택해보세요.

CHECK 5

LottieFiles가 인증하는
수료증을 받아보세요!

강의를 모두 수강하고 마지막 퀴즈까지 제출하면,
LottieFiles 수료증과 인프런 수료증을 모두 받을 수 있어요!
받은 수료증은 링크드인이나 포트폴리오에 자유롭게 활용해보세요.

인프런 수료증은
마이페이지 > 내 학습 > 수료증 메뉴에서 바로 확인하실 수 있습니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 브랜드 경험을 강화하고 싶은 UI/UX 디자이너·프로덕트 디자이너

  • 생산성을 극대화하고자 하는 모션 디자이너·애니메이터

  • 협업 효율을 높이고 싶은 프론트엔드 개발자

  • JSON 애니메이션 워크플로우를 배우고 싶은 디자이너

선수 지식,
필요할까요?

  • After effect 기초 지식이 필요해요.

안녕하세요
입니다.

2,149

명

수강생

79

개

수강평

4.9

점

강의 평점

4

개

강의

로티파일즈(LottieFiles)는 전 세계 디자이너와 개발자들이 손쉽게 애니메이션을 만들고, 관리하고,적용할 수 있도록 도와주는 플랫폼이에요. Lottie 포맷 기반의 애니메이션을 웹, 앱, 프리젠테이션 등 다양한 환경에 빠르게 적용할 수 있으며,효율적인 팀 협업과 모션 디자인 워크플로우 향상을 위한 다양한 도구를 제공합니다.

공동 지식공유자

커리큘럼

전체

8개 ∙ (40분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

9개

4.9

9개의 수강평

  • dmax님의 프로필 이미지
    dmax

    수강평 146

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    고맙습니다^^

    • Jang Jaehoon님의 프로필 이미지
      Jang Jaehoon

      수강평 845

      ∙

      평균 평점 4.9

      5

      50% 수강 후 작성

      좋은 강의 감사합니다!

      • lemonida님의 프로필 이미지
        lemonida

        수강평 4

        ∙

        평균 평점 5.0

        5

        50% 수강 후 작성

        생초보인 제가 들어도 따라 할수 있네요 감사합니다!

        • 전윤서님의 프로필 이미지
          전윤서

          수강평 9

          ∙

          평균 평점 5.0

          5

          38% 수강 후 작성

          무료로 좋은 강의 감사합니다.

          • LottieFiles님의 프로필 이미지
            LottieFiles

            수강평 1

            ∙

            평균 평점 5.0

            5

            38% 수강 후 작성

            무료

            LottieFiles님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            [LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)강의 썸네일

            [LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요! 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            모션그래픽, 애니메이션, Figma

            [LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)강의 썸네일

            [LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)

            LottieFiles

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요. 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            모션그래픽, 웹 디자인, Lottie

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)

            LottieFiles

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요! 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            웹 디자인, 인터랙티브 웹, 반응형 웹

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)

            LottieFiles

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요. 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            모션그래픽, 웹 디자인, Lottie

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)

            LottieFiles

            After Effects 실무 원리를 찾아서강의 썸네일

            After Effects 실무 원리를 찾아서

            strikeapple

            After Effects 중급 이상, 실무에서 활용할 수 있는 기술을 설명합니다. CC2023으로 설명하지만 버전에 상관없이 기본 원리를 위주로 했습니다. 도구 설명으로 시간을 버리지 말고 능동적인 연구를 할 수 있는 꺼리를 만들어 놓았습니다.

            중급이상

            중급이상

            모션그래픽, After Effects, 영상제작

            After Effects 실무 원리를 찾아서강의 썸네일

            After Effects 실무 원리를 찾아서

            strikeapple

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.2강의 썸네일

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.2

            soobaksee

            이제부터 '진짜' 제품 모델링 시작! 디테일한 제품 모델링 + 서피스 모델링 기법이면 초급자 완벽 탈출! 👌ㅤㅤㅤㅤ답답한 온라인 강의는 NO! 알찬 수업자료, 피드백으로 실력향상 OK! 👍🙆‍♂

            초급

            초급

            Rhino, 3d-modelling, 3d

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.2강의 썸네일

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.2

            soobaksee

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.1강의 썸네일

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.1

            soobaksee

            입문하기 어려운 3D 모델링..? 막혀서 진행이 안되는 모델링..? 첫 입문을 위한 '꿀팁' 라이노면 실력향상 OK! 답답하고 피드백 없는 수업..? 👉 온라인 강의에 피드백을 더하다! (고민하지 말고 질문하세요!)👍🙆‍♀

            입문

            입문

            Rhino, 3d-modelling, 3d

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.1강의 썸네일

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.1

            soobaksee

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요! 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            웹 디자인, 인터랙티브 웹, 반응형 웹

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)

            LottieFiles

            초보자를 위한 블렌더 필수 가이드: 트랜스폼과 기즈모 기초강의 썸네일

            초보자를 위한 블렌더 필수 가이드: 트랜스폼과 기즈모 기초

            3D Tudor

            물체가 엉뚱한 곳으로 튀거나, 이상한 방향으로 회전하거나, 말도 안 되는 방식으로 크기가 조절되는 것을 본 적이 있다면 여러분만 그런 것이 아닙니다. 이는 블렌더 초보자들이 가장 흔히 겪는 좌절 중 일부이며, 대개 트랜스폼(transforms), 오리진(origins), 오리엔테이션(orientation), 스케일(scale)이 어떻게 상호작용하는지 완전히 이해하지 못해서 발생합니다.

            입문

            입문

            Blender, 3d, modelvisual3d

            초보자를 위한 블렌더 필수 가이드: 트랜스폼과 기즈모 기초강의 썸네일

            초보자를 위한 블렌더 필수 가이드: 트랜스폼과 기즈모 기초

            3D Tudor

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

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

            디자인베이스

            더 이상 Gif, Video에 의존하지 않아도 됩니다. 에프터이펙트에서 제작한 애니메이션을 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요. 여러분도 매력적인 웹사이트를 만들 수 있습니다.

            초급

            초급

            Lottie, 웹 디자인, JavaScript

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

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

            디자인베이스

            (English) Build a First-person View 3D Website with Three.js강의 썸네일

            (English) Build a First-person View 3D Website with Three.js

            1분코딩

            In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

            초급

            초급

            Three.js, 인터랙티브 웹, 3d

            (English) Build a First-person View 3D Website with Three.js강의 썸네일

            (English) Build a First-person View 3D Website with Three.js

            1분코딩

            블렌더 입문 : UX/UI 디자이너를 위한 3D 아이콘으로 배우는 블렌더!강의 썸네일

            블렌더 입문 : UX/UI 디자이너를 위한 3D 아이콘으로 배우는 블렌더!

            BBoDX

            블렌더 입문 과정입니다. 3D 아이콘을 만들며 배우는 입문자용 3D 블렌더 강의입니다!

            입문

            입문

            Blender, 3d-modelling, 3d

            블렌더 입문 : UX/UI 디자이너를 위한 3D 아이콘으로 배우는 블렌더!강의 썸네일

            블렌더 입문 : UX/UI 디자이너를 위한 3D 아이콘으로 배우는 블렌더!

            BBoDX

            Three.js로 1인칭 3D 웹사이트 만들기강의 썸네일

            Three.js로 1인칭 3D 웹사이트 만들기

            1분코딩

            데스크탑과 모바일에서 모두 동작하는 1인칭 3D 웹사이트를 만들어 보는 강의입니다.

            초급

            초급

            인터랙티브 웹, Three.js, 3d

            Three.js로 1인칭 3D 웹사이트 만들기강의 썸네일

            Three.js로 1인칭 3D 웹사이트 만들기

            1분코딩