[UE5] ProjectFT#6 컴퓨터 UI 구조 설계

컴퓨터 UI를 구현하게 된 이유

허브 시스템의 다양한 기능(메일, 상점, 중고거래, 창고 등)을 하나의 UI에서 제공하기 위해 컴퓨터 형태의 인터페이스를 설계하였다.

단순히 여러 Widget을 띄우는 방식이 아니라, 실제 운영체제처럼 앱을 실행하고 창을 전환하는 구조를 목표로 리팩터링을 진행하였다.

---

바탕화면 UI 구성

컴퓨터 UI는 크게 두 영역으로 구성하였다.

Desktop

├─ 바탕화면
│   ├─ 메일
│   ├─ 상점
│   ├─ 중고거래
│   └─ 종료
│
└─ Window 영역

바탕화면은 앱 아이콘을 표시하는 역할만 담당하고,

실제 기능은 Window 영역에서 실행하도록 구성하였다.

---

앱 아이콘 시스템

각 기능은 하나의 앱 아이콘으로 표현하였다.

Desktop

├─ Mail
├─ Shop
├─ Used Market
└─ Exit

아이콘을 클릭하면 해당 기능을 직접 실행하는 것이 아니라,

UI에 실행 요청을 전달하도록 설계하였다.

이 구조를 사용하면 새로운 앱을 추가하더라도 기존 코드를 크게 수정하지 않고 확장할 수 있다.

---

WidgetSwitcher 기반 앱 실행

앱 실행은 WidgetSwitcher를 이용하여 구현하였다.

Desktop
        │
        ▼
WidgetSwitcher
        │
        ├── Mail
        ├── Shop
        ├── Used Market
        └── Storage

기존처럼 여러 Widget의 Visibility를 직접 변경하는 대신,

WidgetSwitcher의 Active Widget만 변경하여 화면을 전환하도록 개선하였다.

이를 통해

• 화면 전환 로직 단순화
• 패널 추가 용이
• UI 관리 코드 감소

효과를 얻을 수 있었다.

---

창(Window) 구조 설계

각 앱은 하나의 Window로 동작하도록 설계하였다.

Window

├─ Title Bar
├─ Content
└─ Close Button

모든 Window가 동일한 구조를 사용하도록 하여

• 열기
• 닫기
• 애니메이션
• 화면 전환

등을 공통 방식으로 처리할 수 있도록 구성하였다.

또한 창을 닫으면 Widget을 제거하는 것이 아니라,

Window만 비활성화하고 WidgetSwitcher를 통해 다른 앱으로 전환하는 구조를 사용하였다.

---

리팩터링 후 UI 흐름

최종적으로 컴퓨터 UI의 흐름은 다음과 같이 정리하였다.

Desktop
        │
앱 아이콘 클릭
        │
        ▼
WidgetSwitcher
        │
        ▼
Window
        │
        ▼
ViewModel
        │
        ▼
Subsystem

Desktop는 입력만 담당하고,

Window는 화면 표시,

ViewModel은 데이터 가공,

Subsystem은 실제 게임 로직을 담당하도록 역할을 분리하였다.

---

느낀 점

이번 컴퓨터 UI를 설계하면서 단순히 화면을 만드는 것이 아니라 UI 자체도 하나의 시스템으로 설계해야 한다는 점을 배웠다.

WidgetSwitcher를 중심으로 앱 실행 구조를 통일하고, Window의 형태를 공통화하면서 새로운 기능을 추가하기 쉬운 구조를 만들 수 있었다.

앞으로 메일, 상점, 중고거래, 창고 등 다양한 앱이 추가되더라도 기존 구조를 유지하면서 확장할 수 있는 기반을 마련했다.