인벤토리 UI 연동 및 Timeline 연출 구현

학습 동기

플레이어가 수집한 자원을 인벤토리에 시각적으로 표현하고, 이를 선택하거나 교환하는 UI를 구현하고자 했다. 자원별 슬롯 UI를 동적으로 생성하고, 클릭 시 색상 변경 및 교환 로직까지 연결하는 구조가 필요했다. 또한 스테이지 클리어 시 우주선이 화면에 등장하고 날아가는 시네마틱 연출을 Timeline으로 제작해 몰입도를 높이고자 했다.

학습 내용

교환창은 슬롯 프리팹을 기반으로 Start() 시점에 동적으로 생성되며, 각 슬롯은 자원 데이터를 바인딩하여 초기화되었다. 클릭 시 이벤트를 연결해 색상이 변경되며 선택 상태가 반영되고, 교환 버튼을 누르면 선택된 슬롯을 기준으로 자원 교환 로직이 실행되도록 구성하였다.

Timeline에서는 우주선이 행성 뒤에서 등장하여 카메라 쪽으로 비행하고, 일정 시점 이후 FadeOut으로 전환되는 연출을 구성했다. Timeline Clip을 구간별로 나누고, Animation, Transform 움직임, Fade 트랙을 병렬로 배치함으로써 간단하지만 효과적인 클리어 연출이 가능했다.

To-do

 

• 슬롯 수에 따라 교환창 UI 자동 리사이징 기능 추가 (ContentSizeFitter 테스트)
• 교환 조건을 자원 개수, 시간 제한 등 다양한 요소로 확장할 수 있도록 구조 개선
• 우주선 Timeline의 Audio 연동 및 이펙트 추가
• 교환 실패/성공 시 별도의 Feedback UI 도입 고려

 

느낀 점

UI 시스템은 단순히 데이터를 보여주는 것을 넘어 사용자의 피드백과 몰입감을 함께 책임진다는 점을 다시 느꼈다. 프리팹을 동적으로 생성하고 이벤트를 바인딩하는 과정이 익숙해지면서 UI 구성에 자신감이 붙었고, Timeline을 통해 연출을 만들 때 에셋 구성과 동기화 타이밍을 조절하는 방식도 점차 익숙해지고 있다. 구조적 접근과 시각적 결과 사이의 균형이 중요함을 알았다.