UI 최적화 가이드

Problem

Implementation

1. 01

   Static UI Hud

   먼저 화면에서 고정적으로 유지되는 HUD 요소를 Static UI로 분류했습니다.

   Static UI는 배치가 거의 변하지 않고, 값 갱신이나 활성화 변경이 적은 영역입니다.
   이 영역은 Dynamic UI와 같은 Canvas에 묶이지 않도록 분리해, 자주 바뀌는 UI의 갱신으로 인해 함께 Rebuild되는 상황을 줄이는 방향으로 정리했습니다.

   대표적으로 고정 배경, 프레임, 장식성 HUD 요소처럼 화면에 유지되지만 자주 변경되지 않는 UI가 여기에 해당합니다.

   

   

2. 02

   Dynamic UI Hud

   체력, 자원, 알림, 상태 표시처럼 값이 자주 바뀌는 UI는 Dynamic UI로 분류했습니다.

   Dynamic UI는 텍스트, 게이지, 아이콘 상태, 활성화 여부가 자주 바뀌기 때문에 Static UI와 같은 Canvas에 있으면 Rebuild 범위가 커질 수 있습니다.

   따라서 변경이 잦은 UI는 별도 Canvas로 분리하고, 같은 Dynamic UI 안에서도 갱신 주기와 화면 위치가 유사한 요소끼리 묶는 기준을 정리했습니다.

   

3. 03

   Static UI Dynamic UI

   조이스틱처럼 화면 위치는 고정되어 있지만 입력 상태에 따라 내부 요소가 움직이는 UI는 Static UI와 Dynamic UI의 성격을 함께 가집니다.

   배경이나 프레임처럼 변하지 않는 요소는 Static 영역에 가깝게 유지하고, 입력에 따라 이동하거나 갱신되는 핸들 / 방향 표시 요소는 Dynamic 영역으로 분리하는 방향을 검토했습니다.

   이렇게 하면 조작 UI 전체가 매번 큰 범위로 Rebuild되는 것을 줄이고, 실제로 변경되는 요소만 갱신 대상으로 제한할 수 있습니다.

   

   

4. 04

   유닛

   유닛 관련 UI는 선택 상태, 체력, 생산 상태, 타겟 표시처럼 게임 상태에 따라 자주 바뀌는 요소가 많습니다.

   이 영역은 풀링과 함께 관리해야 하기 때문에, 단순히 Canvas를 나누는 것뿐 아니라 생성 / 비활성화 / 재사용 흐름까지 함께 고려했습니다.

   유닛 UI는 Static HUD와 분리하고, 전투 상황에서 갱신되는 요소끼리 묶어 별도 Canvas 또는 풀링 그룹으로 관리하는 방향을 정리했습니다.

   

5. 05

   생산

   생산 UI는 큐 상태, 진행률, 버튼 활성화, 비용 표시처럼 값 갱신이 자주 발생할 수 있는 영역입니다.

   이런 UI가 Main HUD와 같은 Canvas에 포함되면, 생산 상태 변경이 전체 HUD Rebuild로 이어질 수 있습니다.

   생산 UI는 변경 빈도가 높은 Dynamic UI로 분류하고, 업데이트 타이밍 별도 Canvas 구성을 검토했습니다.

   

   

Conclusion

Tradeoffs & Future Work

Tradeoffs

• Canvas가 늘어나면 Batch가 분리되고 Draw Call이 증가할 수 있기 때문에, 모든 UI를 무조건 개별 Canvas로 나누는 방식은 적합하지 않습니다.
• 이 작업에서는 화면 위치가 아니라 변경 빈도, 상호작용 여부, 풀링 여부, 업데이트 타이밍을 기준으로 분리했습니다.