Dev Log #4 – UI/UX 완성 및 Spine 애니메이션 연동

『Wizsurvive』 개발이 점점 구체화되면서, 이번 Dev Log #4에서는 UI/UX 시스템 완성과 Spine 애니메이션 연동 작업에 대해 이야기하려 한다.
게임의 시스템이 어느 정도 구축된 이후, 플레이어가 게임을 어떻게 경험하느냐는 UI와 UX에 달려 있다.
특히 이번 프로젝트에서는 Spine 툴을 활용해 UI 애니메이션에도 생동감을 주려고 했기 때문에, 이 과정은 꽤 신경을 많이 쓴 작업이었다.

---

UI/UX 시스템 완성

게임 초기에 제작한 UI는 단순한 버튼과 텍스트 위주였다.
하지만 테스트를 진행하면서 느낀 것은, 플레이어 경험(UX)을 고려하지 않은 UI는 몰입감을 심각하게 해친다는 점이었다.
특히 뱀파이어 서바이벌 장르 특성상, 게임이 빨라질수록 빠른 조작과 정보 파악이 필수적인데, 기존 UI는 이 흐름을 따라오지 못했다.

그래서 전체 UI를 다시 설계했다.

• 로비 화면:
  • 캐릭터 초상화 뷰어 추가 (잠긴 캐릭터는 흑백 처리, 잠금 해제 시 풀컬러)
  • 무기 버튼, 토템 버튼, 상점 버튼, 플레이 버튼을 명확하게 구분
  • 상단에 다이아몬드, 골드, 부활 코인 등을 직관적으로 표시
• 인게임 HUD:
  • 체력 바, 경험치 바, 남은 시간 표시
  • 현재 장착 중인 무기와 토템 상태를 직관적으로 보여주는 아이콘
• 아이템 팝업:
  • 획득한 아이템을 눈에 띄게 보여주고, 등급별로 시각적 효과(광채, 오오라)를 추가

---

Spine 애니메이션 연동

UI의 '살아있는 느낌'을 주기 위해 Spine을 적극적으로 활용했다.
일반적인 언리얼 위젯 애니메이션만으로는 자연스럽고 복잡한 움직임을 표현하는 데 한계가 있었기 때문이다.

Spine을 활용한 UI 요소들

• 상자 오픈 애니메이션:
  가챠 상자를 열 때, 스프링처럼 튀어나오며 반짝이는 연출을 Spine으로 제작했다.
• 캐릭터 뷰어 이펙트:
  캐릭터 선택 시, 배경에 빛나는 원형 이펙트가 부드럽게 회전하는 애니메이션을 Spine으로 적용했다.
• 보상 팝업 효과:
  아이템 획득 시, 보상 창이 튀어나오면서 작은 별빛 이펙트가 퍼지는 연출.

이 애니메이션들은 Spine 에디터에서 작업한 뒤, 언리얼 플러그인을 통해 임포트하고 블루프린트로 연동했다.

---

연동 과정에서의 어려움과 해결

Spine 애니메이션을 언리얼에 연동하는 과정은 생각보다 까다로웠다.
가장 큰 문제는 Spine 애니메이션을 UI 위젯에 자연스럽게 얹는 것이었다.

• Spine 애셋은 3D 공간용 오브젝트처럼 작동하기 때문에, UI 좌표계와 일치시키는 데 어려움이 있었다.
• 애니메이션 재생 타이밍을 수동으로 제어해야 했기 때문에, 버튼 클릭이나 이벤트 발생 시 별도로 Spine 플레이 함수를 호출하는 블루프린트를 짜야 했다.

이를 해결하기 위해,

• Spine 애니메이션을 위한 별도의 캔버스 레이어를 설정하고,
• UI 논리(버튼 클릭 등)와 Spine 재생 로직을 분리해서 관리했다.

이로써 상자 열기, 보상 표시, 캐릭터 선택 화면 등 다양한 곳에서 애니메이션이 자연스럽게 동작하게 만들 수 있었다.

---

최적화와 마무리 작업

Spine 애니메이션이 많아지면서 렌더링 부하도 고려해야 했다.
특히 모바일 버전을 염두에 두었기 때문에, Spine 리소스 최적화를 진행했다.

• 필요할 때만 Spine 오브젝트 활성화
• 재생이 끝난 Spine 애니메이션은 비활성화 처리
• 고해상도 Spine 애셋은 크기를 리샘플링하여 용량 줄이기

덕분에 퍼포먼스 저하 없이 부드러운 애니메이션 효과를 구현할 수 있었다.