Rive를 활용한 인터랙티브 모션 그래픽 디자인

웹/앱 환경에서 모션 그래픽을 적용한다면??

이런 피드백에 지친 프로덕트 디자이너들을 위한 구세주
Rive 등장

Rive와 함께 수많은 글로벌 기업들이
고객 경험을 혁신하고 있습니다.

글로벌 1위 영어 공부 앱 | 듀오링고

글로벌 인터페이스 디자인 협업 | Figma

글로벌 게임 엔진 | Unreal Engine

글로벌 1위 음료 기업 | 펩시

지금까지 After Effect와 Lottie로만 개발 환경 내에서
모션 그래픽 만들던 디자이너들은 모두 주목!

After Effect & Lottie

Rive

끊김 없이 부드러운 모션 성능을
자랑하는 Rive

인터렉티브한 모션 그래픽
제작이 가능한 Rive

복잡한 인터랙티브 설계도
디자이너가 직접 구현 가능한 Rive

개발 없이 무한한 인터랙티브 모션 그래픽 디자인이 가능한

[ Rive ]

Rive만을 활용해 제작한 쫀득하고 찰진 인터랙티브 모션 제작 노하우,
지금 바로 공개합니다!

강사 Portfolio

웹/앱 환경에서 개발 없이도 복잡한 인터랙티브 모션을
원스톱으로 만들 수 있는 Rive의 세계로 여러분들 초대합니다. 안녕하세요. 디자이너 김태호입니다.
저는 상상력을 표현하기 위한 다양한 툴을 익히는 것을 좋아합니다. 그 중 Rive는 제가 상상만 하던 것을 구현할 수 있는 툴이었어요. 다년간의 크고 작은 모션그래픽 작업을 통해 익힌 모션그래픽 스킬을 앱에 탑재할 수 있는 것이 가장 매력적이었습니다. 영상 파일로 국한됐던 제 작업이 스마트폰 안에서 직접 눌러볼 수 있는 인터랙티브 컨텐츠가 되었을 때의 뿌듯함이 기억납니다. 국내에는 아직 사용 사례가 적지만, 듀오링고를 포함한 세계적인 기업들에서는 앱 내의 인터랙티브를 중요하게 여기고 Rive를 도입하고 있습니다. 머지 않아 국내에서도 Rive의 가볍고도 강력한 기능을 눈여겨보고 도입하는 기업이 많아질 것이라고 생각해요. 저를 포함한 이 강의를 수강하시는 분들이 대한민국의 Rive 1세대가 되어 업계에서 앞서나가는 역량을 갖추게 되리라 믿습니다.

강의 구성
이번 강의에서 우리는
이런 내용들을 학습해 볼 수 있어요!

| After Effect를 몰라도 시작할 수 있는 인터랙티브 모션 그래픽 디자인
기존 모션 그래픽 디자인에서 필수적인 타임라인 작업 구성 없이도 인터랙티브한
기능을 디자인해보는 방법을 학습합니다.

| 터치와 클릭을 따라 움직일 수 있는 모션 디자인 구성해보기
클릭, 스크롤, 제스처 등 유저의 인터랙션을 실시간으로 반응할 수 있게
UI를 구현해볼 수 있는 방법을 학습합니다.

| Rive의 핵심적인 특징인 State Machine을 활용하기
인터랙티브 설계에 가장 핵심적인 State Machine 기능을 활용하여
모션을 자유롭게 움직이는 방법을 학습합니다.

| 점점 더 복잡해지는 인터랙티브 모션 디자인 구성해보기
한 프로젝트 내에서 여러 기능들을 중첩 적용해보면서 유저의 선택에 따른 다양한
시나리오 안에서 인터랙티브한 디자인을 구성해볼 수 있습니다.

강의 요약
개발에 의존하지 않고 복잡한 인터랙션을
바로 구현할 수 있는 5가지 학습 포인트

Point 01
웹/앱 서비스 환경에서 구현할 수 있는
7가지 핵심 모션 그래픽 제작 학습

웹/앱 서비스에서 점점 중요해지고 있는 유저와의 실시간 인터랙티브,
그 첫 출발에 필수적으로 알아야 할 Rive의 핵심 7가지 기능을 직접 구현합니다.

Point 01
실시간 인터랙션을 구현할 수 있는
6가지 프로젝트

베우기만 하면 지금 당장 바로 내 서비스에 적용해볼 수 있는
인터랙티브 모션 그래픽 대표 6가지 스킬을 직접 구현해볼 수 있습니다.

| 다양한 모션 캐릭터들을 한 번에 제어하기
Constraints라는 기능을 학습하면서 여러 캐릭터들의 움직임을 연결해
다양한 움직임을 한 번에 제어하는 방법을 학습합니다.

| 모션 그래픽의 관절이 움직일 수 있는 애니메이션 제작하기
Path의 점과 핸들에 Bone을 설정하여 백터 오브젝트의 움직임을
제어하는 방법을 학습합니다.

| 움직이는 애니메이션 레이어의 순서를 자유롭게 바꾸기
레이어 순서를 바꾸지 않고도 애니메이션 타이밍에 맞춰 레이어를 앞뒤로
자유롭게 변형하며 움직일 수 있는 방법을 학습합니다.

| 회전하는 코인 만들기
오브젝트가 어떤 종류의 그래픽이던 상관 없이 가상의 뼈대를 만들어
움직이는 주축으로 활용하는 방법을 학습합니다.

| 캐릭터들의 모습 바꿔보기
Solo 기능을 활용하여 원하는 오브젝트들을 그룹으로 묶은 후,
해당 그룹의 캐릭터들만 변형시키며 기능을 활성화하는 방법을 학습합니다.

| 캐릭터의 움직임을 자유롭게 제어하기
Joystick이라는 기능으로 캐릭터의 위, 아래, 왼쪽, 오른쪽 컨트롤을
동시에 조정하여 움직임을 제어하는 방법을 학습합니다.

Point 03
State Machine을 활용한
쫀득한 인터랙션 구현

Rive와 After Effect와 가장 큰 차이점인 타임라인 간의 연결을 이해하고
1mb 이하로도 수 백여개의 모션을 한 번에 구현해볼 수 있는 방법을 학습합니다.

SKILL 1

타임라인 작업 없이 모션 만들기

State Machine을 조정하면서 모션 효과를 제작해보는 방법을 학습합니다. 인터랙티브에 몰입감을 더해주는 모션 그래픽 디자인 노하우를 학습할 수 있습니다.

Bar Graph 제작하기

버튼 피드백 만들기

SKILL 2

Dark & Light 모드 토글 버튼 구현하기

State Machine의 Listener와 그 안의 Click 셋팅을 활용하여 그래픽 클릭 시, 반응하는 인터랙티브 구현 방법을 학습합니다.

State Machine을 활용하여 토글 버튼 만들기

타임라인 작업을 추가하여 더욱 쫄깃한 버튼 만들기

SKILL 3

점프볼 만들어보기

모션 그래픽 제작 후 인터랙션 세팅을 추가하여 타임라인 값 내에서 필요한 레이어만 활성화 해 인터랙션으로 처리할 움직임을 분리하는 방법을 학습합니다.

모션그래픽의 기본 예제 점프볼 만들기

Target & Duration 셋팅으로
마우스 동작에 따라 점프하는 점프볼 만들기

∙ Target 셋팅 : 마우스의 동작을 인식하는 범위를 영역 지정
∙ Duration 셋팅 : 각 상태값을 이어서 모션그래픽이 만들어지는 길이를 설정

SKILL 4

코인과 불꽃놀이 구현하기

Nested Artboard 기능을 활용하여 다른 아트보드의 모션과 동시에 인터랙션을 불러오는 방법을 학습합니다.

코인과 불꽃놀이 모션을 동시에 구현해보기

∙ Nested Artboard : 1개의 아트보드를 다른 아트보드 안에 중첩하여 사용할 수 있는 기능

SKILL 5

Pointer Down, Pointer Up 개념 활용하기

유저의 버튼 입력 상태에 따라 다른 모션 값을 세팅하여 생동감 넘치는 인터랙티브를 구현하는 방법을 학습합니다.

Point Down & Up 개념을 활용하여
인터랙티브 모션 구현하기

Point 04
State Machine을 복합적으로 활용하여
웹/앱 서비스 적용이 가능한 3가지 프로젝트

복잡한 개발 과정 없이도 웹/앱 서비스 내에서 바로 적용할 수 있는
3가지 인터랙티브 모션 구현 실습을 진행합니다.

응용 Project 1

랜덤 룰렛 게임 구현하기

매번 새로운 피드백을 제공하거나 예측 불가능한 변화와 유동성을 유저들에게 부여합니다.

응용 Project 2

파일 딱 하나로 반응형 배너와 그래프 만들기

유저가 특정 미션을 완료하였을 때 그래프 애니메이션이 움직이는 반응형 기능을 구현합니다.

응용 Project 3

유저의 입력에 반응하는 챗봇 캐릭터 만들기

유저가 입력하는 내용에 따라 감정 표현을 하거나 손가락과 마우스를 따라다니는 챗봇 캐릭터를 구현합니다. 유저의 취향에 따라 디자인을 변경하는 요소도 구현해봅니다.

Point 05
유저 경험을 고려하여 다양한 모션을 동시에
사용해볼 수 있는 3가지 파이널 프로젝트

유저의 행동 반응을 예상하여 발생할 수 있는 다양한 인터랙티브 모션 효과를
중첩해서 구현하는 대표 3가지 프로젝트 실습을 진행합니다.

Final Project 1.

기상 환경에 따라 변하는 날씨 앱 구현하기

기상/온도 상태에 따라 실시간으로 날씨 화면이 변화하는 인터랙티브 애니메이션을 구현합니다.

Timeline Blend

State Machine

Final Project 2.

입체적으로 카드 디자인을 선택할 수 있는 카드사 앱 기능 구현하기

유저가 웹/앱 환경에서 원하는 형태의 카드를 살펴보고 선택할 수 있는 인터랙션 기능을 구현합니다.

Drag & Drop

Netsed Artboard

Draw Order

Solo

Listener

State Machine

Final Project 3.

나만의 크리스마스 카드 그래픽 구현하기

유저의 선택에 따라 원하는 크리스마스 / 신년 카드를 웹/앱 환경에서 구현할 수 있는 인터랙션 디자인을 구현합니다.

Solo

Inputs

Listeners

Events

Duration

Interpolation

State Machine

강사 소개 및 이력

김태호 디자이너

현) 야나두 YM 서비스실 디자인팀
전) 슬릭코퍼레이션 BX 디자인
전) 더부스 브랜드마케팅팀

이력 및 경력

• 야나두 야핏무브 모바일 앱 인터랙티브 개발
• Lyro TV APP 인터랙티브 모션 그래픽 개발
• iPT TV APP 인터랙티브 모션 그래픽 개발
• 슬릭부스트 TV APP & SNS & 브랜드 모션 그래픽 제작
• 공차 DID 영상 제작

Question 1
어떤 분들이
수강하시면 좋을까요?

개발 직군과 협업하는 모든 디자이너, 디자인을 개발 환경에 맞게 구현하고 싶은 디자이너, 인터랙션 상상력이 풍부하지만 프로토타입 구현만으로 만족하고 있었던 디자이너, 모션그래픽 스킬은 있지만 개발 등 다른 영역까지 확장 해보고 싶은 디자이너

Question 2
해당 주제의 특성과 배워야 하는 이유는 무엇인가요?

일반적인 프로덕트 조직에서와 다르게 개발 없이도 인터랙티브 기능을 구현할 수 있습니다. 상태값에 따라 변화하는 인터랙티브를 구현하는 것이 특징이며, 단순 프로토타입이 아닌 다양한 개발 환경에서 바로 대응이 가능하기에 웹, 모바일 환경부터 유니티 등 게임 개발 환경까지 원활하게 대응할 수 있습니다. 개발자들과 협업하는 디자인 직군이라면 자신의 의도를 구현하는 데 유용한 툴입니다.

Question 3
해당 주제와 관련하여 강사님께서 주실 수 있는
러닝 포인트는 무엇인가요?

여러분들께서 Rive를 배움으로써 개발자들과 더 긴밀하게 협업이 가능하게 되실 것이라 생각합니다. 디자인팀에서 먼저 능동적으로 기능을 제안하고 바로 적용할 수 있는 입장이 되어 전반적인 프로덕트 개발 시간 단축도 가능합니다. 점점 직군과의 경계가 희미해지는 요즘, 프로덕트 디자이너들에게 Rive는 강력한 무기가 될 것이라고 확신합니다.

Question 4
실습 환경

포토샵이나 피그마가 원활하게 구동될 수 있을 수준의 일반적인 PC에서 모두 가능합니다.

Benefit
전문가에게 직접 물어볼 수 있는 기회!
패스트캠퍼스 수강생만 입장 가능한 온라인 라운지

온라인 라운지에 질문을 남겨 주시면, 강사님이 답변을 달아 드립니다.
강의 수강 중 궁금한 점이 생기면, 언제든지 질문하세요.

※ 2024년 12월 13일 ~ 2027년 12월 13일까지
※ 온라인 수강생 전용 디스코드 Q&A 채널이 운영되며 채널 링크는 별도 안내됩니다.

Rive를 활용한 인터랙티브 모션 그래픽 디자인

정가~~499,000원~~

할인 금액(-51%) 259,000원

현재 판매가240,000원

월 20,000원

* 12개월 무이자 할부 시

바로 구매하기

Fast Campus

Rive를 활용한 인터랙티브 모션 그래픽 디자인

강의 정보