--- title: "Animator 는 붙어 있는 동안 계속 일한다" description: "UI 를 움직이는 방법은 애니메이션 클립과 코드 두 갈래입니다. Animator 가 매 프레임 하는 일, 무엇을 움직이면 무엇이 다시 도는지, 시안에서 시간과 이징을 어떻게 넘기는지를 그림으로 봅니다." author: "유니얼" pubDate: 2026-09-17 category: "game-dev/unity/ui" tags: ["Unity", "UI", "uGUI"] canonical: https://blog.unialgames.com/posts/unity-ui-animation/ --- 팝업이 아래에서 올라오고, 버튼이 눌리며 살짝 줄었다 돌아오고, 획득한 숫자가 올라갑니다. 시안에서는 "0.2초, 부드럽게" 한 줄이지만 Unity 에서는 **만드는 방법이 두 갈래** 이고 비용도 다릅니다. ## 움직이는 방법은 두 가지입니다

클립과 Animator 로 만드는 방법입니다.

시작 값과 끝 값을 정해 두고 코드가 채우는 방법입니다.

- **애니메이션 클립** 은 시간마다 값을 찍어 둔 것입니다. Animator 가 어떤 클립을 언제 재생할지 관리합니다. 여러 값이 같이 움직이는 복잡한 연출에 맞고, 에디터에서 눈으로 만들 수 있습니다 - **코드로 값을 바꾸는 방법** 은 시작 값과 끝 값, 시간, 이징을 정해 두고 그 사이를 채웁니다. 한 값을 A 에서 B 로 옮기는 단순한 연출에 맞습니다 둘 다 결과는 같습니다. 차이는 **안 움직이는 동안 무엇을 하고 있는가** 입니다. ## Animator 는 값이 그대로여도 매 프레임 일합니다

Animator 가 붙어 있으면 값이 그대로여도 매 프레임 표시가 남습니다.

Unity 문서에 이렇게 적혀 있습니다. **"Animator 는 애니메이션의 값이 바뀌지 않아도 매 프레임 그 요소를 다시 봐야 할 것으로 표시한다."** 그리고 **"한 요소라도 바뀌면 그 캔버스 전체를 다시 분석한다"** 고도 되어 있습니다. 두 문장을 합치면 이렇게 됩니다. - 가만히 있는 화면에 Animator 가 하나 붙어 있으면 **그 캔버스가 매 프레임 다시 계산됩니다** - 그 캔버스에 글자와 이미지가 많을수록 그 비용이 큽니다 - 같은 문서가 **자주 안 변하거나 어떤 일이 있을 때만 변하는 것은 코드나 트윈으로 만들라고** 권합니다 그래서 실무에서는 이렇게 나눕니다. - **연출이 복잡하고 한 번만 재생되는 것** (팝업 등장, 보상 연출): 애니메이션 클립. 끝나면 꺼 둡니다 - **상시 화면에서 값 하나만 움직이는 것** (버튼 눌림, 숫자 올라가기, 페이드): 코드 쪽 - **계속 움직여야 하는 장식** (반짝이는 아이콘 같은 것): 별도 캔버스로 떼어 놓습니다 ## 무엇을 움직이면 무엇이 다시 도는가 - **크기를 바꾸는 것이 가장 비쌉니다.** 메시를 다시 만들고 레이아웃도 다시 계산합니다 - **커졌다 작아지는 연출은 크기 대신 스케일** 로 만들면 레이아웃과 메시를 건드리지 않습니다 - **색을 바꾸면 그 요소의 메시를 다시 만듭니다.** 글자처럼 정점이 많은 것이 매 프레임 물들면 그만큼 일이 늘어납니다 - **페이드는 Canvas Group 의 알파** 로 하면 메시를 다시 만들지 않습니다. 다만 그 값은 배치에 들어가서, 페이드가 도는 동안 그 캔버스는 매 프레임 다시 묶입니다. 요소마다 알파를 내리는 것보다는 낫지만 공짜는 아닙니다 - **레이아웃 그룹 안에서** 자리를 움직이면 그룹이 형제들 자리까지 다시 계산합니다. 움직일 요소는 그룹 밖으로 빼거나, 그룹의 자식이 아닌 자리에 둡니다 ## 버튼 상태를 애니메이션으로 만들 때 버튼의 전환 방식을 애니메이션으로 두면 상태마다 재생할 것을 Animator 가 정합니다. 이때 **상태 이름이 이미 정해져 있습니다.** - 기본 이름은 `Normal`, `Highlighted`, `Pressed`, `Selected`, `Disabled` 입니다 - 버튼마다 Animator 와 클립이 필요합니다. 버튼이 많은 화면이면 그만큼 붙습니다 - 색만 바뀌는 버튼이라면 애니메이션까지 갈 이유가 없습니다. **눌렀을 때 살짝 줄었다 돌아오는 것처럼 움직임이 있을 때** 쓰는 선택입니다 ## 시간과 이징을 시안에서 넘기는 법

가장 많이 쓰는 것은 Ease Out 입니다.

Unity 쪽에서 필요한 값은 네 가지뿐입니다. - **무엇이 움직이는가**: 자리인지 크기인지 투명도인지 - **얼마 동안**: 초 단위로. 0.15, 0.2, 0.3 처럼 - **어떤 곡선으로**: Ease Out, Ease In Out 같은 이름 - **시작 값과 끝 값**: 어디에서 어디로, 얼마에서 얼마로 "자연스럽게", "통통 튀게" 같은 말로는 옮길 수 없습니다. **"아래로 20 만큼 내려간 자리에서 제자리로, 0.2초, Ease Out"** 이면 그대로 만들어집니다. 통통 튀는 느낌이 필요하면 그것도 이름이 있습니다. 끝에서 살짝 넘어갔다 돌아오는 곡선, 늘어났다 줄어드는 곡선 같은 것들입니다. **그 느낌을 참고할 영상이나 예시를 하나 주시면** 제일 빠릅니다. ## 끝난 뒤를 정해 주세요 애니메이션은 시작보다 **끝이 문제가 됩니다.** - 팝업이 닫히는 연출이 끝나면 그 오브젝트를 **끄는지 지우는지** - 반복 연출이 화면을 벗어나면 **멈추는지 계속 도는지** - 연출 중에 같은 버튼을 또 누르면 **처음부터 다시 재생하는지, 무시하는지** - 연출 중에 화면을 나가 버리면 **중간에 끊기는지, 끝까지 재생하고 나가는지** 이건 그림으로 그릴 수 없는 것이라 시안에 한 줄씩 적어 주셔야 합니다. ## 시안을 넘길 때 적어 주면 좋은 것 | 항목 | 적어 줄 것 | | --- | --- | | 무엇이 | 자리, 크기, 투명도, 색 중 무엇이 움직이는지 | | 얼마나 | 시간(초)과 시작 값, 끝 값 | | 어떤 곡선 | Ease Out 처럼 이름으로. 특별한 느낌이면 참고 영상 | | 딜레이 | 여러 개가 차례로 나타나면 몇 초씩 밀리는지 | | 반복 | 한 번인지, 계속 도는지, 몇 번인지 | | 끝난 뒤 | 꺼지는지, 남는지, 다시 누르면 어떻게 되는지 | | 상시 여부 | 화면에 늘 떠 있는 연출인지, 어떤 순간에만 나오는지 | ## 정리 - UI 를 움직이는 방법은 애니메이션 클립과 코드 두 갈래입니다. 결과는 같고 안 움직일 때의 비용이 다릅니다 - Animator 는 값이 그대로여도 매 프레임 그 요소를 다시 볼 것으로 표시합니다. 한 요소가 바뀌면 캔버스 전체를 다시 봅니다 - 복잡한 일회성 연출은 클립, 값 하나짜리 상시 연출은 코드 쪽이 맞습니다 - 크기를 움직이면 메시와 레이아웃을 다시 합니다. 스케일과 Canvas Group 알파는 그 둘을 건드리지 않습니다. 다만 셋 다 캔버스는 다시 묶습니다 - 버튼 상태 애니메이션은 이름이 정해져 있습니다. 색만 바뀌면 애니메이션까지 갈 이유가 없습니다 - 시안에는 무엇이, 얼마 동안, 어떤 곡선으로, 어디에서 어디로를 적어 주세요. 그리고 끝난 뒤를 정해 주세요