인터랙션 모션 연구소
figma처럼 직관적인 Rive 빠르게 훑어보기 - 2편 본문
1편에 이어서 오늘은 빠르게 Rive로 구현할 수 있는 가장 간단한 버튼 인터랙션을 만들어 보려고 한다.
버튼이 꺼져있을 때에는 빨간색으로 있다가, 버튼을 클릭하면 노란색으로 변하는 인터랙션이다.
1. 버튼 디자인 만들기 (Design 모드)
1️⃣ R 키를 눌러 사각형(Rectangle) 생성한다.
2️⃣ 오른쪽 옵션에서 "Corner" 값을 조정하여 버튼 형태로 변경한다.
3️⃣ T 키를 눌러 텍스트를 써준다.
*인스펙터 창의 Fills and Strokes 옵션에서 컬러를 변경 할 수 있다.
*align을 이용하여 아트보드의 중앙으로 정렬도 시켜주었다.
2. 애니메이션 상태 설정 (Animation 모드 → State Machine)
우측 상단에 애니메이션 탭으로 이동하면, 기본적으로 "상태머신 구조"와 "타임라인"이 셋팅된 것을 볼 수 있다.
상태머신을 선택하면 우측에 노란 영역이 표시되고, 그안에 타임라인을 끌어다가 구조를 짤 수 있다.
타임라인을 선택하면 우측에 에프터이펙트처럼 키를 찍을 수 있는 공간이 나타난다.
우리는 버튼이 클릭되었을 때(on)와 클릭되지 않았을 때(off)의 두 가지 상태를 만들 것!
1️⃣ 타임라인의 이름을 "off"로 바꾼 후 버튼 컬러 키를 기존 빨간색으로 찍어준다.
2️⃣ 타임라인 하나를 더 추가하여 이름을 "on" 으로 바꾼 후 컬러 키를 노란색으로 찍어준다.
이렇게 하면 상태머신 하나와 타임라인 두 개의 설정이 끝났다.
이제 두 타임라인의 관계를 상태머신에서 설정해주면 된다.
3. 상태머신(State Machine) 설정하기
상태머신에는 기본적으로 Entry → Timeline 구조가 셋팅되어 있다.
좀전에 기본으로 있던 타임라인에 이름을 변경했으므로 OFF 노드가 entry 에 연결되어있을 것이다.
이 뜻은 플레이를 시작하면 바로 off 노드가 실행된다는 뜻이고, 우리는 빨간 버튼만 볼 수 있을 것이다.
우리는 여기에 "on"상태의 타임라인을 추가하고, 클릭 시 색이 변하도록 조건을 설정할 것!
🔹 상태 추가 및 연결
우리가 만든 "on" 타임라인을 상태머신 창에 끌어다 놓은 후 OFF노드에서 ON노드로 드래그하면 화살표가 붙은 선이 연결되는 것을 볼 수 있다.
이제 실행버튼을 눌러보면 스테이지에 노란 버튼만 보인다. off 상태가 존재하지 않은 것처럼 보이겠지만,
사실은 실행되자마자 off 상태가 빠르게 지나가면서 바로 노란색(ON상태)이 되어버리는 것이다.
하지만, 우리가 원하는 건 "클릭 시에만" 색이 변하는 것이기 때문에 조건(condition)을 설정해주어야 한다.
4. 상태 조건 추가하기 (Condition 설정)
버튼이 클릭될 때만 색이 변하려면, 인풋(input)과 조건(condition)이 필요하다.
인풋을 먼저 생성해주고 조건에 인풋을 할당해줄 것이다. 천천히 따라해보자.
🔹 Boolean 인풋 생성
나는 이번 예제에서 불(Boolean) 데이터를 사용하고 이름은 Click으로 변경해주었다.
Rive에서는 세가지 데이터타입을 제공하는데 그 차이는 다음과 같다.
인풋 타입역할특징 & 사용 예시
| 🔹 Boolean (불리언) | true or false 상태를 가짐 | - 토글(toggle) 방식의 상태 전환에 사용 - 버튼 On/Off, 스위치 활성화/비활성화 등 |
| 🔹 Trigger (트리거) | 한 번만 실행되는 이벤트 | - 즉시 실행되는 동작에 사용 - 클릭 시 애니메이션 재생, 버튼이 눌릴 때 특정 효과 실행 |
| 🔹 Number (넘버) | 숫자 값을 가짐 (0, 1, 2...) | - 연속적인 값이 필요한 경우 사용 - 슬라이더 값 조정, 프로그레스 바, 속도 조절 |
🔹 조건(Condition) 설정
인풋을 제대로 만들었다면 + 버튼을 눌렀을 때, 우리가 만들었던 불린값이 뜰 것이다.
이렇게 조건 설정까지 마쳤다면 버튼을 한번 더 클릭했을 때 다시 빨간색으로 돌아 올 수 있도록 ON노드에서 OFF노드로도 조건을 추가해주었다.
*entry에서 off로가는 조건은 설정할 필요가 없다. 실행 시 off상태로 계속 있어야하기 때문이다.
1️⃣ off → on 화살표를 클릭 → Condition(조건) 탭에서 + 버튼 클릭
2️⃣ 우리가 만든 불리언 인풋 click을 추가하고, true로 설정
3️⃣ on → off 전환 조건도 동일하게 click = true로 설정
여기까지 작업해도 실행을 누르면 버튼이 클릭되지 않는다.
버튼을 호버만 해도 색이 변할 것인지, 클릭을 해야만 변할 것인지, 버튼을 호버하다가 영역을 벗어날 때 색이 변할 것인지 등 행동을 정해주지 않았기 때문이다.
5. 최종 설정 – 클릭 이벤트(Listener) 추가
버튼이 실제로 클릭되었을 때 동작하도록, 리스너(Listener)를 추가해야 한다.
스테이지에서 버튼이 선택된 채로 Listensers 옆 +버튼을 누르면 자동으로 버튼이 레이어이름 rectangle로 들어온다.
*만약 아무 것도 선택되어있지 않은 상태로 리스너를 하나 만들었다면, 인스펙터 창에서 target을 따로 버튼으로 지정해주면 된다.
🔹 Rive에서 제공하는 기본 리스너 항목
| Pointer Down | 마우스 클릭 or 손가락 터치 (눌렀을 때) |
| Pointer Up | 마우스 클릭 해제 or 손가락 떼기 |
| Pointer Enter | 마우스 or 손가락이 버튼 영역에 들어올 때 |
| Pointer Exit | 마우스 or 손가락이 버튼 영역에서 벗어날 때 |
| Mouse Move | 마우스 or 손가락이 영역 내에서 움직일 때 |
| Click | 클릭 시 (Pointer Down & Up 조합) |
우리는 지금 클릭 시 색이 변하는 인터랙션을 만들고 있으므로, Pointer Down을 선택!
아래 set 에는 우리가 만들어둔 click 인풋을 넣어준다.
이제 실행 버튼을 클릭하면, 버튼을 클릭했을 때 색이 변하는 인터랙션이 정상적으로 작동한다!
🎬 결과: 클릭 시 색이 변하는 버튼 인터랙션 완성!
이제 버튼을 클릭하면 색이 변하는 간단한 인터랙션이 완성되었다.
이 방식으로 다양한 상태 전환과 모션을 추가할 수 있다.
오늘 간단한 예제로 하나의 인터랙션이 나오기까지 한바퀴 프로세스를 돌아보았다.
여기서 좀더 다양한 관계 조건들과 타임라인이 생겨날 뿐 큰 순서는 이런식으로 진행된다.
웹 기반 인터랙션 모션 디자인 툴(Web App) RIVE가 더 궁금하면 구독!
'RIVE' 카테고리의 다른 글
| 차세대 인터랙션 툴 Rive, 실제로 어디서 쓰이고 있을까? (2) | 2025.02.25 |
|---|---|
| Lottie, Figma 작업을 Rive로 불러오는 방법 (0) | 2025.02.10 |
| figma처럼 직관적인 Rive 빠르게 훑어보기 - 1편 (0) | 2025.02.04 |
| Rive란? 프로덕트 디자이너를 위한 인터랙션 모션 툴 소개 (0) | 2025.02.03 |
