icon안동민 개발노트

UI 애니메이션 구현하기


 UI 애니메이션은 사용자 경험을 향상시키고 인터페이스에 생동감을 불어넣는 중요한 요소입니다.

 언리얼 엔진의 위젯 블루프린트를 사용하면 강력하고 유연한 UI 애니메이션을 쉽게 구현할 수 있습니다.

위젯 애니메이션 에디터 사용법

  1. 위젯 블루프린트 열기
  2. 'Animations' 탭 선택
  3. '+ 애니메이션' 버튼 클릭하여 새 애니메이션 생성
  4. 애니메이션 이름 지정 (예 : "FadeIn")

키프레임 설정

  1. 타임라인에서 원하는 시점 선택
  2. 애니메이션을 적용할 위젯 선택
  3. '트랙 추가' 버튼 클릭하여 속성 선택 (예 : 불투명도)
  4. 키프레임 추가 및 값 설정
예: 페이드 인 애니메이션
0s: 불투명도 0
1s: 불투명도 1

다양한 애니메이션 속성 조절

 1. 위치 (Position)

  • X, Y 좌표 변경으로 이동 효과
0s: (X=0, Y=0)
1s: (X=100, Y=50)

 2. 크기 (Scale)

  • 위젯의 크기 변경
0s: (Scale=1.0)
0.5s: (Scale=1.2)
1s: (Scale=1.0)

 3. 회전 (Rotation)

  • 위젯 회전
0s: 0도
1s: 360도

 4. 불투명도 (Opacity)

  • 페이드 인/아웃 효과
0s: 0 (완전 투명)
1s: 1 (완전 불투명)

블루프린트에서 애니메이션 제어

  1. 애니메이션 재생
[Get Animation] --> [Play Animation]
  1. 애니메이션 정지
[Get Animation] --> [Stop Animation]
  1. 역재생
[Get Animation] --> [Play Animation]
                        |
            [Reverse] <-- [True]
  1. 재생 속도 조절
[Get Animation] --> [Set Play Rate]
                        |
            [Play Rate] <-- [0.5] // 절반 속도

이벤트와 연동하여 애니메이션 트리거

  1. 버튼 클릭 시 애니메이션 재생
Event: Button Clicked
      |
[Play Animation (FadeIn)]
  1. 위젯 가시성 변경 시 애니메이션
Event: On Visibility Changed
      |
[Branch: Is Visible?]
      |
[Play Animation (SlideIn)] <-- [True]
      |
[Play Animation (SlideOut)] <-- [False]
  1. 특정 게임 이벤트에 반응
Custom Event: On Score Changed
      |
[Play Animation (ScoreUpdateBounce)]

UI 애니메이션 최적화 기법

 1. 애니메이션 캐싱

  • 자주 사용되는 애니메이션은 미리 로드하여 캐싱

 2. 불필요한 업데이트 방지

  • 화면 밖 요소의 애니메이션은 일시 중지

 3. 프레임 제한

  • 과도한 프레임 수 사용 자제 (보통 30-60 FPS 충분)

 4. 리소스 효율적 사용

  • 복잡한 애니메이션은 여러 간단한 애니메이션으로 분할

 5. GPU 가속 활용

  • 가능한 경우 GPU 가속 옵션 사용
[Get Animation] --> [Set Use GPU Acceleration]
                      |
            [Enabled] <-- [True]

효과적인 UI 애니메이션 사용을 위한 팁

 1. 일관성 유지

  • 유사한 요소에 대해 일관된 애니메이션 스타일 사용

 2. 과도한 사용 자제

  • 필요한 곳에만 애니메이션 적용하여 사용자 집중 유지

 3. 적절한 타이밍

  • 애니메이션 지속 시간은 보통 0.2-0.5초 사이가 적당

 4. 사용자 피드백 제공

  • 버튼 클릭, 항목 선택 등에 미세한 애니메이션으로 피드백

 5. 접근성 고려

  • 과도한 움직임에 민감한 사용자를 위한 옵션 제공

예제 : 메뉴 전환 애니메이션

Widget Blueprint: WBP_MainMenu
 
Animations:
1. SlideInFromLeft
2. SlideOutToRight
 
Function: SwitchToNewMenu
Inputs: CurrentMenu, NewMenu (Widget References)
 
[Play Animation (SlideOutToRight) for CurrentMenu]
    |
[Wait for Animation to Finish]
    |
[Set Visibility of CurrentMenu to Hidden]
    |
[Set Visibility of NewMenu to Visible]
    |
[Play Animation (SlideInFromLeft) for NewMenu]
 
Event: OnMenuButtonClicked
    |
[Get Current Active Menu] --> [Get New Menu Widget]
    |                               |
    +---------------[SwitchToNewMenu]

 이 예제에서는 메뉴 전환 시 현재 메뉴가 오른쪽으로 슬라이드 아웃되고 새 메뉴가 왼쪽에서 슬라이드 인되는 애니메이션을 구현합니다.

고급 애니메이션 기법

 1. 곡선 기반 애니메이션

  • 커스텀 애니메이션 커브를 사용하여 부드러운 움직임 생성

 2. 반응형 애니메이션

  • 화면 크기나 디바이스 방향 변경에 따라 애니메이션 조정

 3. 파티클 시스템 통합

  • UI 요소에 파티클 효과를 추가하여 동적인 시각 효과 생성

 4. 프로그래매틱 애니메이션

  • 복잡한 로직이나 데이터 기반 애니메이션을 위해 코드로 직접 구현
Function: AnimateProgressBar
Inputs: CurrentValue, TargetValue
[Lerp] --> [Set Progress Bar Value]
    |
[Timeline]