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

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

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

(4.8) 수강평 4개

수강생 144명

난이도 입문

수강기한 무제한

LottieFiles

실습 중심

자격증

framer

모션

인터랙티브웹

실습 중심

자격증

framer

모션

인터랙티브웹

강의 추천하고 성장과 수익을 만들어 보세요!

마케팅 파트너스

강의 추천하고 성장과 수익을 만들어 보세요!

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

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

이런 분들께
추천드려요

학습 대상은
누구일까요?

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

선수 지식,
필요할까요?

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

안녕하세요
LottieFiles입니다.

1,912

명

수강생

개

수강평

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

강의 게시일: 2025. 09. 05.

마지막 업데이트일: 2025. 09. 05.

수강평

전체

4개

4.8

4개의 수강평

richman
수강평 4
∙
평균 평점 4.8
2025. 12. 03.
5
33% 수강 후 작성
dmax
수강평 146
∙
평균 평점 5.0
2025. 10. 06.
5
100% 수강 후 작성
강의 잘 들었습니다. 고맙습니다
dbsrud006
수강평 1
∙
평균 평점 4.0
2025. 10. 17.
4
100% 수강 후 작성
쉽고 유익한 강의입니다! 한국어 제공 감사합니다 ㅎㅎ
Jang Jaehoon
수강평 677
∙
평균 평점 4.9
2025. 10. 10.
5
33% 수강 후 작성
좋은 강의 감사합니다!

LottieFiles님의 다른 강의

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

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

LottieFiles

무료

입문 / 모션그래픽, 웹 디자인, Lottie, ui, ux

5.0

(2)

100+

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

입문

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

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

LottieFiles

무료

입문 / 모션그래픽, 웹 디자인, Lottie, ui, ux

5.0

(2)

100+

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

LottieFiles

무료

입문 / After Effects, Lottie, 3d

4.9

(9)

400+

입문

After Effects, Lottie, 3d

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

LottieFiles

무료

입문 / After Effects, Lottie, 3d

4.9

(9)

400+

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

LottieFiles

무료

입문 / 모션그래픽, 애니메이션, Figma, No-code, UIUX

4.9

(57)

1,200+

입문

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

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

LottieFiles

무료

입문 / 모션그래픽, 애니메이션, Figma, No-code, UIUX

4.9

(57)

1,200+

비슷한 강의

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

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

에릭

₩82,500

입문 / Figma, 웹 디자인, 모바일 디자인, 프로덕트디자인, 지금 베스트

4.9

(495)

3,500+

답변 활발

디자인을 공부해본 적이 없는 비전공자 분들, 이제 막 UX디자인을 공부하기 시작한 학생들, UX 및 UI 디자인 취준생 분들을 위해 준비한 "피그마로 UI디자인하기 A to Z" 수업입니다. 포토샵 등 다른 툴을 전혀 모르는 분도 피그마만 활용해 UI디자인 전문가가 될 수 있도록 기초부터 고급 기능까지 알려드립니다.

입문

Figma, 웹 디자인, 모바일 디자인

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

에릭

₩82,500

입문 / Figma, 웹 디자인, 모바일 디자인, 프로덕트디자인, 지금 베스트

4.9

(495)

3,500+

답변 활발

미드저니 비법 클래스, 현직 AI 디자인 전문가의 이미지 프롬프트 엔지니어링 핵심 정리

Masocampus

₩79,200

입문 / 웹 디자인, 캐릭터 디자인, 모바일 디자인, Midjourney, 프로덕트디자인

4.7

(32)

200+

답변 활발

이미지 생성형 인공지능의 대표 툴, 미드저니! 기초 사용 방법부터 실제 디자인 프로젝트 실습을 통한 실무 적용까지 한 번에!

입문

웹 디자인, 캐릭터 디자인, 모바일 디자인

미드저니 비법 클래스, 현직 AI 디자인 전문가의 이미지 프롬프트 엔지니어링 핵심 정리

Masocampus

₩79,200

입문 / 웹 디자인, 캐릭터 디자인, 모바일 디자인, Midjourney, 프로덕트디자인

4.7

(32)

200+

답변 활발

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

LottieFiles

무료

입문 / 모션그래픽, 웹 디자인, Lottie, ui, ux

5.0

(2)

100+

입문

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

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

LottieFiles

무료

입문 / 모션그래픽, 웹 디자인, Lottie, ui, ux

5.0

(2)

100+

GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

J.영

₩66,000

초급 / HTML/CSS, scrolltrigger, gsap, 포트폴리오, 반응형 웹

5.0

(41)

300+

GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!

초급

HTML/CSS, scrolltrigger, gsap

GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

J.영

₩66,000

초급 / HTML/CSS, scrolltrigger, gsap, 포트폴리오, 반응형 웹

5.0

(41)

300+

Canva로 쉽게! 프로 수준의 웹사이트 & LP 제작 가이드 강좌: LP 템플릿 4종 & 독자 도메인 설정 매뉴얼 포함

UMINO

₩143,000

50%

₩71,500

입문 / 웹 디자인, website, canva

New

초보자도 무료로 세련되고 전문적인 웹사이트나 랜딩 페이지를 제작하고 싶은 분들을 위해. Canva를 사용해서 빠르게 매력적인 웹사이트를 만드는 방법을 배워보세요. 창업·부업 비즈니스용 LP나 프로필 페이지에도

입문

웹 디자인, website, canva

Canva로 쉽게! 프로 수준의 웹사이트 & LP 제작 가이드 강좌: LP 템플릿 4종 & 독자 도메인 설정 매뉴얼 포함

UMINO

₩143,000

50%

₩71,500

입문 / 웹 디자인, website, canva

New

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

₩33,000

초급 / JavaScript, vanilla-javascript, frontend, TailwindCSS, 웹 디자인

5.0

(1)

미션

AI 활용과 컴포넌트 중심 UI 제작으로 배우는 실무형 웹 UI 개발, 디자이너+개발자 필수 코스!

초급

JavaScript, vanilla-javascript, frontend

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

₩33,000

초급 / JavaScript, vanilla-javascript, frontend, TailwindCSS, 웹 디자인

5.0

(1)

미션

영화 예매 사이트 만들기: 디자인편

webstoryboy

무료

초급 / Photoshop, 반응형 웹

4.9

(7)

1,100+

웹 표준과 반응형 사이트 만들기 강의를 잘 따라왔다면 이제는 실전 연습 차례! 영화 예매 사이트 제작을 디자인편과 코딩편으로 나누어 학습합니다.

초급

Photoshop, 반응형 웹

영화 예매 사이트 만들기: 디자인편

webstoryboy

무료

초급 / Photoshop, 반응형 웹

4.9

(7)

1,100+

이야기로 배우는 CSS

소셜아카이브

₩19,800

입문 / css, 반응형 웹, Flex, css-grids, 웹 디자인

HTML로 만든 카페 홈페이지를 CSS로 아름답게 꾸미는 실전 프로젝트 강의입니다. 색상, 레이아웃, 타이포그래피부터 Flexbox, Grid, 애니메이션, 반응형 디자인까지 CSS의 모든 기초를 민지와 코드 선생의 스토리를 따라가며 자연스럽게 배울 수 있습니다. 4시간의 학습으로 초보자도 프로페셔널한 웹 디자인을 완성할 수 있습니다.

입문

css, 반응형 웹, Flex

이야기로 배우는 CSS

소셜아카이브

₩19,800

입문 / css, 반응형 웹, Flex, css-grids, 웹 디자인

Canva(캔바)로 내 상품 상세페이지 디자인 하기

에이크

₩88,000

입문 / canva, 웹 디자인

3.8

(5)

이 강의는 인기 디자인 툴인 Canva(캔바)를 사용하여, 온라인강좌, 쇼핑몰 등에서 사용되는 상품 상세 페이지를 디자인하는 방법을 알려주는 입문용 강의입니다.

입문

canva, 웹 디자인

Canva(캔바)로 내 상품 상세페이지 디자인 하기

에이크

₩88,000

입문 / canva, 웹 디자인

3.8

(5)

외주 없이 디자이너처럼 스마트스토어 디자인 꾸미기

쪽집게 디자인

₩55,000

초급 / 스마트스토어, Photoshop, 웹 디자인, 콘텐츠 제작

5.0

(4)

이 강의대로만 따라 하시면, 빠르고 쉽게 핵심만 배워 세련된 스마트스토어를 꾸밀 수 있습니다. 1:1 무료 디자인 코칭으로 원하는 느낌의 스마트스토어를 만들어보세요!

초급

스마트스토어, Photoshop, 웹 디자인

외주 없이 디자이너처럼 스마트스토어 디자인 꾸미기

쪽집게 디자인

₩55,000

초급 / 스마트스토어, Photoshop, 웹 디자인, 콘텐츠 제작

5.0

(4)

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

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

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

CHECK 1

Lottie란 무엇일까요?

CHECK 2

왜 Lottie를 사용해야 할까요?

CHECK 3

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

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

CHECK 4

어떻게 수강해야 할까요?

CHECK 5

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

이런 분들께
추천드려요

안녕하세요
LottieFiles입니다.

커리큘럼

수강평

LottieFiles님의 다른 강의

비슷한 강의

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

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

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

CHECK 1

Lottie란 무엇일까요?

CHECK 2

왜 Lottie를 사용해야 할까요?

CHECK 3

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

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

CHECK 4

어떻게 수강해야 할까요?

CHECK 5

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

이런 분들께 추천드려요

안녕하세요 LottieFiles입니다.

커리큘럼

수강평

LottieFiles님의 다른 강의

비슷한 강의

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

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

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

이런 분들께
추천드려요

안녕하세요
LottieFiles입니다.