WebGL에서 UI/UX 최적화 - 반응형 디자인 만들기

WebGL에서 UI/UX 최적화 - 반응형 디자인 만들기

🎨 WebGL UI/UX 최적화가 중요한 이유

유니티 WebGL 프로젝트에서 UI/UX는 중요한 요소임. 게임이든 웹 애플리케이션이든, 브라우저에서 **화면 크기에 따라 유연하게 조정**되어야 함.

---

📏 1. 반응형 UI 설정

✅ Canvas Scaler 설정하기

유니티에서는 `Canvas Scaler`를 활용하면 UI가 다양한 화면 해상도에서도 정상적으로 표시됨.

1. Canvas 오브젝트 선택
2. Canvas Scaler 컴포넌트 추가
3. UI Scale Mode를 Scale With Screen Size로 변경
4. Reference Resolution을 1920x1080로 설정
5. Screen Match Mode를 Match Width or Height로 변경

이 설정을 적용하면 **화면 크기가 변해도 UI 요소가 비율을 유지**하면서 조정됨.

---

🖼 2. WebGL에서 UI 성능 최적화

✅ 불필요한 UI 업데이트 방지

void Update() {
    scoreText.text = "Score: " + playerScore.ToString(); // ❌ 매 프레임 UI 업데이트 비효율적
}

📱 3. 모바일과 데스크탑 UI 최적화

✅ 디바이스별 UI 조정**

void Start() {
    if (Screen.width < 768) {
        mobileUI.SetActive(true);
        desktopUI.SetActive(false);
    } else {
        mobileUI.SetActive(false);
        desktopUI.SetActive(true);
    }
}

- **모바일 & 데스크탑 레이아웃을 따로 관리**하여 최적화 - `Screen.width` 값을 기반으로 UI 요소를 변경

📱 💾 4. 웹 페이지 내에서 WebGL UI 조정

유니티 WebGL 빌드를 HTML 페이지에 임베드할 경우, CSS와 JavaScript로 반응형 스타일을 적용 가능

✅ CSS에서 WebGL 캔버스 크기 조정**

canvas {
    width: 100%;
    height: auto;
    max-width: 1920px;
    max-height: 1080px;
}

✅ JavaScript에서 동적 크기 조절**

window.addEventListener('resize', function() {
    var canvas = document.querySelector("canvas");
    canvas.style.width = window.innerWidth + "px";
    canvas.style.height = window.innerHeight + "px";
});

- CSS와 JavaScript를 활용하면 **WebGL 캔버스를 동적으로 조절** 가능 - 브라우저 크기가 변할 때 자동으로 조정하여 반응형 UI 구현

🎯 결론**

- `Canvas Scaler`를 활용하여 화면 크기에 맞게 UI 조절 - UI 업데이트를 **이벤트 기반 처리**하여 성능 최적화 - 모바일과 데스크탑 UI를 별도로 관리하여 **사용자 경험 향상** - CSS와 JavaScript를 활용하여 **WebGL 캔버스를 반응형으로 조절**