강의

N
챌린지

멘토링

N
클립

커뮤니티

Design

/

UI/UX

[LottieFiles Official] LottieFiles for Framer : 200% Utilization of Lottie Animations in Framer (Certificate Issued)

Meet the official first Korean-language course from global motion design platform LottieFiles, exclusively on Inflearn! Complete the course and receive an official LottieFiles certificate of completion.

(4.8) 4 reviews

132 learners

Level Beginner

Course period Unlimited

  • LottieFiles
실습 중심
실습 중심
자격증
자격증
framer
framer
모션
모션
인터랙티브웹
인터랙티브웹
Web Design
Web Design
Interactive Web
Interactive Web
Responsive Web
Responsive Web
Lottie
Lottie
실습 중심
실습 중심
자격증
자격증
framer
framer
모션
모션
인터랙티브웹
인터랙티브웹
Web Design
Web Design
Interactive Web
Interactive Web
Responsive Web
Responsive Web
Lottie
Lottie
Thumbnail

What you will gain after the course

  • How to Import and Control Lottie Animations Directly in Framer

  • Implementation methods for various interactions such as clicks, scrolls, and cursor movements

  • Practical know-how for implementing sophisticated web interactions without complex code

오직 인프런에서만!
LottieFiles 공식 한글화 강의를 수강하고
Framer로 감각적인 웹사이트를 만들어 보세요!

2025-08-113.46.53-ezgif.com-video-to-webp-converter (1)

Framer로 감각적인 웹사이트를 만들고 계신가요?

이제 LottieFiles와 함께라면 더 가볍고 매끄러운 애니메이션을 손쉽게 추가할 수 있어요!
복잡한 설정 없이도 Framer 안에서 바로 Lottie 애니메이션을 불러오고,
인터랙션에 따라 자연스럽게 움직이게 만드는 방법까지 배워보세요.

지금 바로 시작해서, 여러분의 웹 프로젝트에 한층 더 생동감을 더해보세요!

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
Spoon - showcase card kr
gbike-kr card

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

CHECK 4

어떻게 수강해야 할까요?

[MD]언어설정_gif_800_5-9s

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

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

CHECK 5

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

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

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

Recommended for
these people

Who is this course right for?

  • Designer/planner creating websites with Framer

  • Web designers and marketers who want to add sophisticated motion to their websites

  • Frontend beginners who want to implement advanced interactions with no-code

Need to know before starting?

  • Basic Framer usage experience (frame creation, section composition, etc.)

  • Understanding Figma's Basic Features

  • It is structured so that even beginners can sufficiently follow along with hands-on practice by following the flow of the videos.

Hello
This is

1,851

Learners

71

Reviews

4.9

Rating

4

Courses

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

Curriculum

All

9 lectures ∙ (31min)

Published: 
Last updated: 

Reviews

All

4 reviews

4.8

4 reviews

  • yesitsme님의 프로필 이미지
    yesitsme

    Reviews 4

    ∙

    Average Rating 4.8

    5

    33% enrolled

    • dbsrud0065750님의 프로필 이미지
      dbsrud0065750

      Reviews 1

      ∙

      Average Rating 4.0

      4

      100% enrolled

      This is an easy and beneficial lecture! Thank you for providing it in Korean 😊😊

      • jjhgwx님의 프로필 이미지
        jjhgwx

        Reviews 641

        ∙

        Average Rating 4.9

        5

        33% enrolled

        Thank you for the great lecture!

        • ninety25296님의 프로필 이미지
          ninety25296

          Reviews 145

          ∙

          Average Rating 5.0

          5

          100% enrolled

          I enjoyed the lecture. Thank you.

          Free

          LottieFiles's other courses

          Check out other courses by the instructor!

          [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)강의 썸네일

          [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)

          LottieFiles

          Meet the official first Korean-language course from global motion design platform LottieFiles, exclusively on Inflearn. Complete the course and receive an official LottieFiles certificate of completion.

          입문

          입문

          Motion Graphic, Web Design, Lottie

          [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)강의 썸네일

          [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)

          LottieFiles

          [LottieFiles Official] Creating Lottie Animations with After Effects (Certificate Issued)강의 썸네일

          [LottieFiles Official] Creating Lottie Animations with After Effects (Certificate Issued)

          LottieFiles

          Meet the official first Korean-language course from global motion design platform LottieFiles, exclusively on Inflearn! Complete the entire course and receive an official LottieFiles certificate of completion.

          입문

          입문

          After Effects, Lottie, 3d

          [LottieFiles Official] Creating Lottie Animations with After Effects (Certificate Issued)강의 썸네일

          [LottieFiles Official] Creating Lottie Animations with After Effects (Certificate Issued)

          LottieFiles

          [LottieFiles Official] Figma to Lottie: Creating Motion Animations in Figma (Certificate Issued)강의 썸네일

          [LottieFiles Official] Figma to Lottie: Creating Motion Animations in Figma (Certificate Issued)

          LottieFiles

          Check out the first official Korean-localized course from global motion design platform LottieFiles, available exclusively on Inflearn now! Complete the course and receive an official LottieFiles certificate.

          입문

          입문

          Motion Graphic, Animation, Figma

          [LottieFiles Official] Figma to Lottie: Creating Motion Animations in Figma (Certificate Issued)강의 썸네일

          [LottieFiles Official] Figma to Lottie: Creating Motion Animations in Figma (Certificate Issued)

          LottieFiles

          Similar courses

          Explore other courses in the same field!

          [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)강의 썸네일

          [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)

          LottieFiles

          Meet the official first Korean-language course from global motion design platform LottieFiles, exclusively on Inflearn. Complete the course and receive an official LottieFiles certificate of completion.

          입문

          입문

          Motion Graphic, Web Design, Lottie

          [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)강의 썸네일

          [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)

          LottieFiles

          Midjourney Secret Class, Core Summary of Image Prompt Engineering by Current AI Design Expert강의 썸네일

          Midjourney Secret Class, Core Summary of Image Prompt Engineering by Current AI Design Expert

          Masocampus

          Midjourney, the premier tool for image-generating AI! From basic usage to real-world application through practical design projects, all in one go!

          입문

          입문

          Web Design, Character Design, Mobile App Design

          Midjourney Secret Class, Core Summary of Image Prompt Engineering by Current AI Design Expert강의 썸네일

          Midjourney Secret Class, Core Summary of Image Prompt Engineering by Current AI Design Expert

          Masocampus

          [MASTER] Figma UI Design: Learn by Creating강의 썸네일

          [MASTER] Figma UI Design: Learn by Creating

          agilelabs

          If you know how to use Figma but are not familiar with using components, I think this tutorial will be helpful.

          초급

          초급

          Figma, Web Design, Mobile App Design

          [MASTER] Figma UI Design: Learn by Creating강의 썸네일

          [MASTER] Figma UI Design: Learn by Creating

          agilelabs

          Creating a portfolio using GSAP's ScrollTrigger강의 썸네일

          Creating a portfolio using GSAP's ScrollTrigger

          jyoung

          Let's create an interactive, responsive web portfolio that reacts to scrolling using GSAP's ScrollTrigger!

          초급

          초급

          HTML/CSS, scrolltrigger, gsap

          Creating a portfolio using GSAP's ScrollTrigger강의 썸네일

          Creating a portfolio using GSAP's ScrollTrigger

          jyoung

          Designing my product detail page with Canva강의 썸네일

          Designing my product detail page with Canva

          codingai

          This is an introductory course that teaches you how to design product detail pages used in online courses, shopping malls, etc. using Canva, a popular design tool.

          입문

          입문

          canva, Web Design

          Designing my product detail page with Canva강의 썸네일

          Designing my product detail page with Canva

          codingai

          Creating a Movie Ticket Booking Site: Design강의 썸네일

          Creating a Movie Ticket Booking Site: Design

          webstoryboy

          If you have followed the web standards and responsive site creation lectures well, it is now time for practical training! We will learn about creating a movie ticket reservation site divided into design and coding parts.

          초급

          초급

          Photoshop, Responsive Web

          Creating a Movie Ticket Booking Site: Design강의 썸네일

          Creating a Movie Ticket Booking Site: Design

          webstoryboy

          Learning CSS Through Stories강의 썸네일

          Learning CSS Through Stories

          sarc

          This is a hands-on project course that beautifully styles a cafe homepage made with HTML using CSS. You can naturally learn all the CSS fundamentals from colors, layouts, and typography to Flexbox, Grid, animations, and responsive design by following the story of Minji and Teacher Code. With 4 hours of learning, even beginners can complete professional web design.

          입문

          입문

          css, Responsive Web, Flex

          Learning CSS Through Stories강의 썸네일

          Learning CSS Through Stories

          sarc

          Vanilla JavaScript & Tailwind CSS강의 썸네일

          Vanilla JavaScript & Tailwind CSS

          Michael Kwon

          Practical web UI development using AI and component-centric UI creation, An essential course for Designers + Developers!

          초급

          초급

          JavaScript, vanilla-javascript, frontend

          Vanilla JavaScript & Tailwind CSS강의 썸네일

          Vanilla JavaScript & Tailwind CSS

          Michael Kwon