NEW

디자인 · 아트

UX/UI

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

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

16명 이 수강하고 있어요.

LottieFiles

실습 중심

자격증

framer

모션

인터랙티브웹

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

이런 걸 배울 수 있어요

Framer 안에서 직접 Lottie 애니메이션을 불러오고 제어하는 방법
클릭, 스크롤, 커서 이동 등 다양한 인터랙션 구현법
복잡한 코드 없이 감각적인 웹 인터랙션을 구현하는 실전 노하우

이런 분들께
추천드려요

학습 대상은
누구일까요?

Framer로 웹사이트를 제작하고 있는 디자이너/기획자
웹사이트에 세련된 모션을 더하고 싶은 웹디자이너 및 마케터
노코드로 고급 인터랙션을 구현하고 싶은 프론트엔드 입문자

선수 지식,
필요할까요?

기본적인 Framer 사용 경험 (프레임 생성, 섹션 구성 등)
Figma 기본 기능에 대한 이해
초급자도 영상 흐름을 따라가며 충분히 실습 가능하도록 구성되어 있습니다.

안녕하세요
입니다.

1,178

명

수강생

개

수강평

4.9

점

강의 평점

개

강의

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

커리큘럼

전체

9개 ∙ (31분)

섹션 1. Lottie 애니메이션 만들기

3개 ∙ (8분)

1. Figma에서 Lottie 애니메이션 만들기
03:30
2. Lottie Creator에서 애니메이션 만들기
02:36
3. AI 도구를 활용한 Lottie 애니메이션 제작
02:41

섹션 2. Framer에 Lottie 애니메이션 적용하기

2개 ∙ (7분)

4. Framer 웹사이트에 Lottie 애니메이션 삽입하기
04:46
5. dotLottie 애니메이션 파일 이해하기
02:27

섹션 3. Framer에서 Lottie 애니메이션에 인터랙션 추가하기

4개 ∙ (15분)

6. 인터랙티브 애니메이션: 호버 및 클릭 트리거 적용
02:20
7. 인터랙티브 애니메이션: 스크롤 효과 적용
02:50
8. Lottie로 페이크 3D 효과 만들기
04:16
9. 인터랙티브 애니메이션: 커서 움직임에 반응하게 만들기
05:37

강의 게시일:

마지막 업데이트일:

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!

무료

LottieFiles님의 다른 강의

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

[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

[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

[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

비슷한 강의

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

Sketch App Master Course [Sketch App]

agilelabs

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!

초급

Web Design, Sketch, Mobile App Design

Sketch App Master Course [Sketch App]

agilelabs

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

masocampus

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

jyoung

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

lottiefiles

입문

After Effects, Lottie, 3d

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

lottiefiles

Vanilla JavaScript & Tailwind CSS

csslick

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

csslick

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

codingai

Decorate your smart store like a designer without outsourcing

speedydesign

If you follow this course, you can quickly and easily learn the essentials and create a sophisticated smart store. Create a smart store with the feel you want through 1:1 free design coaching!

초급

SmartStore, Photoshop, Web Design

Decorate your smart store like a designer without outsourcing

speedydesign

Creating a Movie Ticket Booking Site: Design

webs

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

webs