[Teck Interview] UI/UX 개발 시 고려 사항

Unity에서 UGUI의 성능 병목 현상을 해결하는 방법은?

 

* UGUI (Unity GUI)

- 유니티에서 UI 만들기 위한 시스템

- 게임오브젝트 기반

- Canvas: 모든 UI는 캔버스 위에서 렌더링, 월드 공간에서도 UI 배치 가능

- 레이아웃 시스템: 자동 정렬, 앵커, 피벗, 패딩 등

- 드래그 앤 드롭 방식의 편집

- 이벤트 시스템

 

UGUI는 편리하지만 렌더링 중 성능 병목을 일으킬 수 있음

 

Canvas Rebuild

- UI가 조금만 변경되어도 전체 캔버스 재계산 발생

 

Draw Call

- UI 요소가 많고 batching이 안되면 그만큼 CPU/GPU 부하 오름

 

오버드로우

- 겹치는 UI가 많은 GPU가 동일 픽셀을 여러 번 그림

 

레이아웃 컴포넌트 과용

- Layout Group 등 사용 시 계산 비용

 

Update 호출 과도

- 애니메이터, 스크립트 등에서 매 프레임 UI 접근 시 병목

 

 

병목 해결 방법

Canvas 분리 & Static Canvas

- 변경되지 않는 UI -> 별도의 캔버스로 분리

- 캔버스를 자주 갱신하는 오브젝트와 묶으면 모든 UI 리빌드

 

캔버스 Pixel Perfect 비활성화

- 필요한 곳에만 적용

 

Layout Group / Content Size Fitter 최소화

- 매 프레임마다 계산 발생, 실시간 동적 UI 많을수록 성능 저하 심함

- 스크립트로 수동 위치 조절

- 레이아웃 계산 후 SetAvtive(false) 처리

 

CanvasRenderer.SetMaterial batching 활용

- 같은 스프라이트, 머티리얼, 소팅 레이어 사용 시 자동 배치 가능

- 서로 다른 폰트, 머티리얼 사용 시 드로우 콜 증가

 

오버드로우 줄이기

- UI가 겹칠수록 GPU 오버드로우 심해짐

- 투명한 이미지, 반투명 배경 과다 사용 주의

- 배경 통합 처리

 

 

---

 

 

게임 UI 반응성 개선을 위한 주요 고려사항

 

입력 처리 최적화

- 즉시 반응

- 레이어/블로커 확인: Raycast Target, Canvas Group 등 불필요하게 입력 막고 있는 거 없는지 확인

 

UI Transition 속도 조절

- UI 애니메이션이 너무 느리면 버벅이는 느낌 발생

- 너무 빠르면 시각적 피드백 부족

 

피드백 효과

- 버튼 눌림 애니메이션, 클릭 사운드

- 슬라이더 값 실시간 반영, 사운드 변화

- 탭 전환, 전환 효과 및 탭 활성 표시

 

UI Update 연산 최소화

- 변경된 값이 있을 때만 갱신

- Layout Group, Content Size Fitter 등 자동 배치 컴포넌트 남용 시 프레임 저하

 

UI 풀링, Lazy Load

- 풀링해서 렉 감소시키기

- 무거운 UI 요소는 Lazy Load(즉시 로드하지 않고 필요할 때 로드)

 

드로우 콜, 오버드로우 관리

- UI 요소가 많고 겹치면 GPU 부담이 커짐

- 캔버스 구조 정리

 

비동기 작업 처리

- UI 클릭 시 무거운 작업이 동기적으로 실행되면 UI가 멈춤

- 서버 요청, 데이터 로딩 등은 비동기 처리 + 로딩 표시

 

디바운스, 더블탭 방지

- UI가 느려졌을 때 유저가 반복 클릭하는 경우를 방지

- 버튼 클릭 후 일정 시간 동안 클릭 잠금

 

---

 

 

애니메이션 처리와 UI 이벤트의 충돌 방지?

UI 애니메이션이랑 이벤트랑 충돌하지 않도록 방지

 

유니티를 예시로 들면 애니메이션 중엔

canvasGroup.blocksRaycasts = false;

하면 클릭 이벤트 무시됨

 

인터렉션 잠금 처리

isAnimating 같은 변수 만들어서 이벤트에서 체크

 

애니메이션 클립에서 이벤트 블록 제어

 

Raycast Target 옵션 직접 끄기