inflearn logo
강의

Course

Instructor
inflearn logo
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

164 learners

Level Beginner

Course period Unlimited

Web Design
Web Design
Interactive Web
Interactive Web
Responsive Web
Responsive Web
Lottie
Lottie
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 LottieFiles

2,033

Learners

74

Reviews

4.9

Rating

4

Courses

LottieFiles is a platform that helps designers and developers worldwide easily create, manage, and implement animations. It allows for the rapid application of Lottie-format animations across various environments, including websites, apps, and presentations, while providing a range of tools to enhance efficient team collaboration and motion design workflows.

More

Curriculum

All

9 lectures ∙ (31min)

Published: 
Last updated: 

Reviews

All

4 reviews

4.8

4 reviews

  • ninety25296님의 프로필 이미지
    ninety25296

    Reviews 146

    ∙

    Average Rating 5.0

    5

    100% enrolled

    I enjoyed the lecture. Thank you.

    • 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 773

        ∙

        Average Rating 4.9

        5

        33% enrolled

        Thank you for the great lecture!

        • yesitsme님의 프로필 이미지
          yesitsme

          Reviews 4

          ∙

          Average Rating 4.8

          5

          33% enrolled

          LottieFiles's other courses

          Check out other courses by the instructor!

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

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

          LottieFiles

          Free

          Beginner / Motion Graphic, Web Design, Lottie, ui, ux

          5.0

          (2)

          100+

          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.

          Beginner

          Beginner

          Motion Graphic, Web Design, Lottie

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

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

          LottieFiles

          Free

          Beginner / Motion Graphic, Web Design, Lottie, ui, ux

          5.0

          (2)

          100+
          [Official LottieFiles] Lottie Animation with After Effects (Certificate Issued)Course Thumbnail

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

          LottieFiles

          Free

          Beginner / After Effects, Lottie, 3d

          4.9

          (9)

          400+

          Check out the first official Korean-language course from the global motion design platform LottieFiles, available exclusively on Inflearn! Upon completing the course, you can receive an official LottieFiles certificate.

          Beginner

          Beginner

          After Effects, Lottie, 3d

          [Official LottieFiles] Lottie Animation with After Effects (Certificate Issued)Course Thumbnail

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

          LottieFiles

          Free

          Beginner / After Effects, Lottie, 3d

          4.9

          (9)

          400+
          [Official LottieFiles] Figma to Lottie: Motion Animation Created in Figma (Certificate Issued)Course Thumbnail

          [Official LottieFiles] Figma to Lottie: Motion Animation Created in Figma (Certificate Issued)

          LottieFiles

          Free

          Beginner / Motion Graphic, Animation, Figma, No-code, UIUX

          4.9

          (59)

          1,200+

          Check out the first official Korean-language course from the global motion design platform LottieFiles, available exclusively on Inflearn! Upon completing the course, you can receive an official LottieFiles certificate.

          Beginner

          Beginner

          Motion Graphic, Animation, Figma

          [Official LottieFiles] Figma to Lottie: Motion Animation Created in Figma (Certificate Issued)Course Thumbnail

          [Official LottieFiles] Figma to Lottie: Motion Animation Created in Figma (Certificate Issued)

          LottieFiles

          Free

          Beginner / Motion Graphic, Animation, Figma, No-code, UIUX

          4.9

          (59)

          1,200+

          Similar courses

          Explore other courses in the same field!

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

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

          Masocampus

          $61.60

          Beginner / Web Design, Character Design, Mobile App Design, Midjourney, product design

          4.6

          (34)

          200+

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

          Beginner

          Beginner

          Web Design, Character Design, Mobile App Design

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

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

          Masocampus

          $61.60

          Beginner / Web Design, Character Design, Mobile App Design, Midjourney, product design

          4.6

          (34)

          200+
          Sketch App Master Course [Sketch App]Course Thumbnail

          Sketch App Master Course [Sketch App]

          agilelabs

          $42.90

          Basic / Web Design, Sketch, Mobile App Design

          4.4

          (7)

          You may know the basics of how to use the Sketch app, but if you aren't utilizing its symbols and prototyping features, you can't say you know Sketch well!

          Basic

          Basic

          Web Design, Sketch, Mobile App Design

          Sketch App Master Course [Sketch App]Course Thumbnail

          Sketch App Master Course [Sketch App]

          agilelabs

          $42.90

          Basic / Web Design, Sketch, Mobile App Design

          4.4

          (7)

          UIUX Portfolio Part.2 - Getting a job as a UIUX designerCourse Thumbnail

          UIUX Portfolio Part.2 - Getting a job as a UIUX designer

          lizb

          $58.30

          Basic / Figma, Content Creation, clone design, Web Design, Mobile App Design

          4.8

          (4)

          If you have studied the basics, it is now time to create your own portfolio and move on to employment!

          Basic

          Basic

          Figma, Content Creation, clone design

          UIUX Portfolio Part.2 - Getting a job as a UIUX designerCourse Thumbnail

          UIUX Portfolio Part.2 - Getting a job as a UIUX designer

          lizb

          $58.30

          Basic / Figma, Content Creation, clone design, Web Design, Mobile App Design

          4.8

          (4)

          Designing my product detail page with CanvaCourse Thumbnail

          Designing my product detail page with Canva

          codingai

          $68.20

          Beginner / canva, Web Design

          3.8

          (5)

          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.

          Beginner

          Beginner

          canva, Web Design

          Designing my product detail page with CanvaCourse Thumbnail

          Designing my product detail page with Canva

          codingai

          $68.20

          Beginner / canva, Web Design

          3.8

          (5)

          Creating a portfolio using GSAP's ScrollTriggerCourse Thumbnail

          Creating a portfolio using GSAP's ScrollTrigger

          jyoung

          $51.70

          Basic / HTML/CSS, scrolltrigger, gsap, Portfolio, Responsive Web

          5.0

          (41)

          300+
          Active Replies
          Active Replies

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

          Basic

          Basic

          HTML/CSS, scrolltrigger, gsap

          Creating a portfolio using GSAP's ScrollTriggerCourse Thumbnail

          Creating a portfolio using GSAP's ScrollTrigger

          jyoung

          $51.70

          Basic / HTML/CSS, scrolltrigger, gsap, Portfolio, Responsive Web

          5.0

          (41)

          300+
          Active Replies
          Active Replies
          Vanilla JavaScript & Tailwind CSSCourse Thumbnail

          Vanilla JavaScript & Tailwind CSS

          Michael Kwon

          $26.40

          Basic / JavaScript, vanilla-javascript, frontend, TailwindCSS, Web Design

          5.0

          (1)

          Mission
          Mission

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

          Basic

          Basic

          JavaScript, vanilla-javascript, frontend

          Vanilla JavaScript & Tailwind CSSCourse Thumbnail

          Vanilla JavaScript & Tailwind CSS

          Michael Kwon

          $26.40

          Basic / JavaScript, vanilla-javascript, frontend, TailwindCSS, Web Design

          5.0

          (1)

          Mission
          Mission
          Learning CSS Through StoriesCourse Thumbnail

          Learning CSS Through Stories

          sarc

          $15.40

          Beginner / css, Responsive Web, Flex, css-grids, Web Design

          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.

          Beginner

          Beginner

          css, Responsive Web, Flex

          Learning CSS Through StoriesCourse Thumbnail

          Learning CSS Through Stories

          sarc

          $15.40

          Beginner / css, Responsive Web, Flex, css-grids, Web Design

          Creating a Movie Ticket Booking Site: DesignCourse Thumbnail

          Creating a Movie Ticket Booking Site: Design

          webstoryboy

          Free

          Basic / Photoshop, Responsive Web

          4.9

          (7)

          1,100+

          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.

          Basic

          Basic

          Photoshop, Responsive Web

          Creating a Movie Ticket Booking Site: DesignCourse Thumbnail

          Creating a Movie Ticket Booking Site: Design

          webstoryboy

          Free

          Basic / Photoshop, Responsive Web

          4.9

          (7)

          1,100+

          Free