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公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

lottiefiles

グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます。講座をすべて受講するとLottieFiles公式修了証を受け取ることができます。

입문

Motion Graphic, Web Design, Lottie

[LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

lottiefiles

[LottieFiles公式] After Effectsで作るLottieアニメーション（修了証発行）

lottiefiles

グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます！講座をすべて受講するとLottieFiles公式修了証を受け取ることができます。

입문

After Effects, Lottie, 3d

[LottieFiles公式] After Effectsで作るLottieアニメーション（修了証発行）

lottiefiles

[LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)

lottiefiles

グローバルモーションデザインプラットフォーム LottieFiles の公式初の韓国語化講座が、今 Inflearn で独占受講できます！講座をすべて受講すると、LottieFiles 公式修了証を受け取れます。

입문

Motion Graphic, Animation, Figma

[LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)

lottiefiles

비슷한 강의

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

スケッチアプリマスターコース[Sketch App]

agilelabs

スケッチアプリの基本的な使い方を知っていますが、スケッチアプリのシンボルとプロトタイピング機能をうまく活用していない場合は、スケッチアプリをよく知っているとは言えません！

초급

Web Design, Sketch, Mobile App Design

スケッチアプリマスターコース[Sketch App]

agilelabs

Midjourney秘訣クラス、現職AIデザイン専門家のイメージプロンプトエンジニアリング核心整理

masocampus

画像生成AIの代表的なツール、ミッドジャーニー！基本的な使い方から、実際のデザインプロジェクト実習を通して実務への応用まで、一度に！

입문

Web Design, Character Design, Mobile App Design

Midjourney秘訣クラス、現職AIデザイン専門家のイメージプロンプトエンジニアリング核心整理

masocampus

GSAPのScrollTriggerを活用したポートフォリオ制作

jyoung

GSAPのScrollTriggerを活用して、スクロールに反応するインタラクティブなレスポンシブウェブポートフォリオを作ってみましょう！

초급

HTML/CSS, scrolltrigger, gsap

GSAPのScrollTriggerを活用したポートフォリオ制作

jyoung

[LottieFiles公式] After Effectsで作るLottieアニメーション（修了証発行）

lottiefiles

입문

After Effects, Lottie, 3d

[LottieFiles公式] After Effectsで作るLottieアニメーション（修了証発行）

lottiefiles

バニラ JavaScript & Tailwind CSS

csslick

AI活用とコンポーネント中心UI制作で学ぶ実務型Web UI開発、デザイナー＋開発者必須コース！

초급

JavaScript, vanilla-javascript, frontend

バニラ JavaScript & Tailwind CSS

csslick

Canva（キャンバ）で私の商品詳細ページをデザインする

codingai

この講義は、人気のデザインツールであるCanva（キャンバ）を使用して、オンライン講座、ショッピングモールなどで使用される商品詳細ページをデザインする方法を教えてくれる入門講義です。

입문

canva, Web Design

Canva（キャンバ）で私の商品詳細ページをデザインする

codingai

外部委託なしでデザイナーのようにスマートストアをデザインする

speedydesign

この講義に従えば、スマートストアの核となる部分を素早く簡単に学び、洗練されたスマートストアを構築できます。1:1 無料デザインコーチングで、希望の雰囲気のスマートストアを作成しましょう。

초급

SmartStore, Photoshop, Web Design

外部委託なしでデザイナーのようにスマートストアをデザインする

speedydesign

映画前売りサイトを作る：デザイン編

webs

ウェブ標準とレスポンシブサイト作り講義によく従ってきたら今は実戦練習番！映画前売サイト制作をデザイン編とコーディング編に分けて学習します。

초급

Photoshop, Responsive Web

映画前売りサイトを作る：デザイン編

webs