UI 애니메이션 구현하기
아무리 기능이 잘 작동하는 UI라도, 정적이고 밋밋하게 나타난다면 사용자 경험은 크게 저하될 수 있습니다. UI 요소들이 부드럽게 나타나고 사라지거나, 크기가 변하고 색상이 바뀌는 등의 애니메이션은 UI의 미적인 완성도를 높이고, 사용자에게 시각적인 피드백을 제공하여 몰입감을 향상시킵니다.
이번 절에서는 위젯 블루프린트에서 UI 애니메이션을 구현하는 기본 개념과 활용법에 대해 알아보겠습니다.
UI 애니메이션이란 무엇이며 왜 필요한가?
UI 애니메이션은 위젯 블루프린트 내의 UI 요소들(버튼, 텍스트, 이미지, 패널 등)의 속성(위치, 크기, 회전, 투명도, 색상 등)을 시간에 따라 변화시키는 것을 말합니다.
UI 애니메이션이 중요한 이유는 다음과 같습니다.
- 시각적 피드백 제공: 버튼을 클릭했을 때 잠깐 커졌다가 돌아오거나, 아이템을 획득했을 때 아이콘이 톡 튀어 오르는 등, 사용자 행동에 대한 즉각적이고 명확한 피드백을 제공합니다.
- 정보 흐름 가이드: 새로운 UI 패널이 스르륵 나타나거나, 중요 메시지가 번쩍이는 등의 애니메이션은 사용자의 시선을 유도하고 정보의 중요도를 강조합니다.
- 미적인 완성도 향상: UI에 생동감을 불어넣어 더 세련되고 전문적인 느낌을 줍니다. 이는 전반적인 게임의 품질을 높이는 데 기여합니다.
- 사용자 경험(UX) 개선: 전환이 부드럽지 않고 갑작스럽게 나타나는 UI는 사용자를 혼란스럽게 할 수 있습니다. 애니메이션은 이러한 전환을 자연스럽게 만들어 사용자 경험을 향상시킵니다.
위젯 블루프린트에서 UI 애니메이션 생성
위젯 블루프린트에서 UI 애니메이션을 생성하는 과정은 타임라인을 사용하는 시퀀서(Sequencer)와 유사합니다.
-
애니메이션 추가
- 위젯 블루프린트 에디터를 엽니다.
- 디자이너(Designer) 탭으로 이동합니다.
애니메이션(Animations)패널(일반적으로 좌측 하단에 위치)에서+ 애니메이션(+ Animation)버튼을 클릭합니다.- 새 애니메이션 이름을 지정합니다. (예:
FadeInAnim,ButtonPulse)
-
트랙 추가 및 키프레임 설정
-
새로 생성된 애니메이션을 선택합니다.
-
타임라인 뷰에서
+ 트랙(+ Track)버튼을 클릭합니다. -
애니메이션을 적용할 위젯을 선택합니다. (예:
StartGameButton위젯 변수) 이 위젯은 반드시Is Variable이 체크되어 있어야 합니다. -
선택된 위젯에 대한 트랙이 추가됩니다. 이제 이 트랙의 오른쪽에 있는
+버튼을 클릭하여 애니메이션을 적용할 속성을 선택합니다.Render Transform: 위치(Translation), 회전(Rotation), 크기(Scale), 기울기(Shear) 등 위젯의 시각적 변형을 조절합니다.Color And Opacity: 위젯의 색상과 투명도(Alpha)를 조절합니다. (Text나 Image 위젯에 유용)Cliping: 스크롤 박스 등에서 콘텐츠 클리핑을 조절합니다.Custom: 커스텀 속성을 애니메이션에 사용할 수 있습니다.
-
키프레임(Keyframe) 설정
- 타임라인 헤드를 시작 지점(예: 0초)으로 옮깁니다.
- 선택한 속성(예:
Render Transform의Translation) 옆의 키프레임 추가 버튼(+아이콘) 을 클릭합니다. 이때 현재 위치의 속성 값이 키프레임으로 기록됩니다. - 타임라인 헤드를 끝 지점(예: 1초)으로 옮깁니다.
- 디테일 패널에서 해당 위젯의 속성 값(예:
Translation의 Y값을 -100에서 0으로 변경)을 변경하고 다시 키프레임 추가 버튼을 클릭합니다. - 이제 0초부터 1초까지 위젯이 지정된 속성 변화를 통해 움직이는 애니메이션이 생성됩니다.
-
-
애니메이션 미리보기: 타임라인의 재생 버튼을 클릭하여 애니메이션을 미리 볼 수 있습니다.
UI 애니메이션 재생 및 제어 (그래프 탭)
애니메이션을 만들었다면, 이제 블루프린트 로직에서 이 애니메이션을 재생하거나 제어해야 합니다.
-
그래프(Graph) 탭으로 이동합니다.
-
애니메이션 변수 사용:
애니메이션패널에 있는 애니메이션 에셋(예:FadeInAnim)을 그래프 탭으로 드래그하면, 해당 애니메이션에 대한 참조 변수(Get 노드)가 생성됩니다. -
애니메이션 재생 노드: 이 애니메이션 변수 핀에서 드래그하여 다음과 같은 노드들을 검색하고 연결하여 애니메이션을 제어합니다.
Play Animation: 애니메이션을 한 번 재생합니다. 가장 기본적인 재생 노드입니다.In Animation: 애니메이션 변수를 연결합니다.Play Mode:Forward(정방향),Reverse(역방향) 선택.Playback Speed: 재생 속도 조절 (1.0이 기본).Num Loops To Play: 반복 횟수 (0은 무한 반복).
Play Animation (To Start)/Play Animation (To End): 애니메이션을 처음부터/끝까지 재생합니다.Pause Animation: 애니메이션을 일시 정지합니다.Stop Animation: 애니메이션을 완전히 중지합니다.Is Animation Playing: 현재 애니메이션이 재생 중인지 확인합니다.
-
애니메이션 이벤트 활용
Play Animation노드의 출력 핀에는On Animation Finished와 같은 이벤트 핀이 있습니다. 이 핀에서 드래그하여Event를 선택하면 애니메이션 재생이 완료되었을 때 실행되는 커스텀 이벤트가 생성됩니다. 이를 통해 애니메이션이 끝난 후 다른 로직을 이어서 실행할 수 있습니다.
활용 예시: 메뉴가 나타날 때 페이드 인 애니메이션 재생
WBP_MainMenu위젯 블루프린트를 엽니다.- 디자이너 탭에서
Canvas Panel자체 또는 그 안에 있는Vertical Box같은 메인 패널을 선택하고 디테일 패널에서Is Variable을 체크하여 이름을RootPanel이라고 지정합니다. - 애니메이션 패널에서
+ Animation을 눌러FadeInAnim이라는 애니메이션을 추가합니다. FadeInAnim을 선택하고+ 트랙버튼을 눌러RootPanel위젯을 선택합니다.RootPanel트랙의+버튼을 눌러Color And Opacity속성을 추가합니다.- 키프레임 설정
- 타임라인 헤드를 0.0초에 두고,
Color And Opacity옆의 키프레임 추가 버튼을 클릭합니다. (기본값인 투명도 1.0으로 기록) Color And Opacity속성의Alpha값을 0.0으로 변경합니다. (이 상태로 0.0초의 키프레임을 추가하면, 애니메이션 시작 시 패널이 완전히 투명하게 됩니다.)- 타임라인 헤드를 1.0초에 두고,
Color And Opacity의Alpha값을 1.0으로 변경합니다. (다시 불투명하게) - 키프레임 추가 버튼을 클릭합니다.
- 이제 0초부터 1초까지 패널이 투명했다가 불투명해지는 애니메이션이 완성됩니다.
- 타임라인 헤드를 0.0초에 두고,
- 그래프 탭으로 이동합니다.
Event Construct(위젯이 생성되어 화면에 추가될 때 발생하는 이벤트) 뒤에FadeInAnim변수(Get 노드)를 가져와Play Animation노드를 연결합니다.
이제 게임을 플레이할 때 메인 메뉴가 갑자기 튀어나오는 대신, 부드럽게 페이드 인되는 것을 확인할 수 있습니다.
UI 애니메이션의 고급 기능
- 트랙 그룹: 여러 속성을 동시에 애니메이션할 때, 관련 속성들을 그룹화하여 관리할 수 있습니다.
- 보간 곡선(Interpolation Curve): 키프레임 간의 속성 변화 방식을 조절하여 더욱 자연스러운 움직임을 만듭니다. (Linear, Ease In/Out, Custom Curve 등)
- 노티파이(Notify): 애니메이션 특정 지점에서 이벤트를 발생시켜 블루프린트 로직을 트리거할 수 있습니다. (예: 애니메이션 재생 중 특정 프레임에서 사운드 재생)
- 애니메이션 시퀀스 활용: 복잡한 UI 애니메이션은 여러 개의 짧은 애니메이션을 조합하여 만들 수 있습니다.
UI 애니메이션은 게임의 시각적 품질과 사용자 경험을 크게 향상시키는 중요한 요소입니다. 단순히 움직이는 것을 넘어, 사용자와 게임 간의 소통을 원활하게 돕는다는 점을 이해하고 적극적으로 활용하는 것이 좋습니다.
이번 절에서는 위젯 블루프린트에서 UI 애니메이션을 구현하는 기본 개념과 생성, 제어 방법에 대해 알아보았습니다. UI 애니메이션은 게임의 몰입도와 사용자 경험을 높이는 데 필수적인 요소입니다.