Menu 시스템 구현
메인 메뉴, 일시정지 화면, 설정 메뉴를 체계적으로 구현합니다
메인 메뉴 구현
게임 시작 시 표시되는 메인 메뉴 위젯
WBP_MainMenu
└─ Canvas Panel (전체 스트레치 앵커)
├─ Image (BackgroundImage) // 배경
└─ Vertical Box (중앙 정렬)
├─ Text "Game Title" // 게임 타이틀
├─ Spacer (Height: 60)
├─ Button (NewGameBtn)
│ └─ Text "새 게임"
├─ Spacer (Height: 16)
├─ Button (ContinueBtn)
│ └─ Text "이어하기"
├─ Spacer (Height: 16)
├─ Button (SettingsBtn)
│ └─ Text "설정"
├─ Spacer (Height: 16)
└─ Button (QuitBtn)
└─ Text "종료"
// Event Construct: 입력 모드 설정
[Event Construct]
└──> [Get Owning Player]
├──> [Set Input Mode UI Only]
│ └─ In Widget to Focus: Self
└──> [Set Show Mouse Cursor] = True
// 새 게임 버튼
[OnClicked (NewGameBtn)]
└──> [Open Level] (LevelName: "GameLevel_01")
// 이어하기 버튼
[OnClicked (ContinueBtn)]
└──> [Get Game Instance] ──> [LoadGame]
└──> [Branch: Success]
├─ True ──> [Open Level] (SavedLevelName)
└─ False ──> [Show Error Message]
// 종료 버튼
[OnClicked (QuitBtn)]
└──> [Quit Game]
일시정지 메뉴
ESC 키로 토글하는 게임 내 일시정지 메뉴
// PlayerController에서 일시정지 토글
// Enhanced Input: IA_Pause (Digital, Pressed, Escape Key)
[EnhancedInputAction IA_Pause - Started]
└──> [Branch: Is Game Paused]
│
├─ False (현재 게임 중 → 일시정지)
│ ├──> [Set Game Paused] = True
│ ├──> [Create Widget] (WBP_PauseMenu) ──> [Set PauseWidget]
│ ├──> [Add to Viewport] (Z-Order: 10)
│ ├──> [Set Input Mode Game and UI]
│ └──> [Set Show Mouse Cursor] = True
│
└─ True (현재 일시정지 → 재개)
├──> [Set Game Paused] = False
├──> PauseWidget ──> [Remove from Parent]
├──> [Set Input Mode Game Only]
└──> [Set Show Mouse Cursor] = False
Set Game Paused가 True이면 대부분의 게임 로직이 멈추지만, Enhanced Input의 ESC 키는 계속 감지됩니다. Input Action의 Trigger While Paused가 기본적으로 활성화되어 있기 때문입니다. 특정 Input Action이 일시정지 중에 동작하지 않게 하려면 이 옵션을 비활성화하세요.
설정 메뉴
오디오, 그래픽, 키바인딩 설정 UI
WBP_Settings
└─ Canvas Panel
├─ Text "설정"
└─ Vertical Box
├─ // 오디오 설정
│ ├─ Text "마스터 볼륨"
│ ├─ Slider (MasterVolumeSlider, 0.0 ~ 1.0)
│ ├─ Text "BGM 볼륨"
│ ├─ Slider (BGMVolumeSlider)
│ ├─ Text "SFX 볼륨"
│ └─ Slider (SFXVolumeSlider)
│
├─ // 그래픽 설정
│ ├─ Text "해상도"
│ ├─ ComboBox (ResolutionCombo)
│ ├─ Text "화면 모드"
│ ├─ ComboBox (WindowModeCombo)
│ └─ CheckBox (VSyncCheckBox) "VSync"
│
└─ Horizontal Box
├─ Button (ApplyBtn) "적용"
└─ Button (BackBtn) "뒤로"
Game User Settings 활용
// UGameUserSettings를 사용한 그래픽 설정
[Get Game User Settings]
│
├──> [Set Screen Resolution] (1920, 1080)
├──> [Set Fullscreen Mode] (Fullscreen / Windowed / WindowedFullscreen)
├──> [Set VSync Enabled] (True/False)
├──> [Set Overall Scalability Level] (0=Low, 1=Med, 2=High, 3=Epic)
│
└──> [Apply Settings] (bCheckForCommandLineOverrides: False)
└──> [Save Settings] // GameUserSettings.ini에 저장
// 볼륨 설정 (Sound Mix + Sound Class)
[Set Sound Mix Class Override]
├─ Sound Mix: MasterSoundMix
├─ Sound Class: MasterSoundClass
├─ Volume: SliderValue
└─ Pitch: 1.0
위젯 전환 패턴
Widget Switcher를 활용한 화면 전환
Widget Switcher는 여러 자식 위젯 중 하나만 표시하는 레이아웃입니다. 탭 메뉴, 멀티 페이지 UI에 적합합니다.
WBP_TabbedMenu
└─ Vertical Box
├─ Horizontal Box (탭 버튼)
│ ├─ Button (Tab_Inventory) "인벤토리"
│ ├─ Button (Tab_Stats) "스탯"
│ └─ Button (Tab_Quests) "퀘스트"
│
└─ Widget Switcher (MenuSwitcher)
├─ [0] WBP_InventoryPanel
├─ [1] WBP_StatsPanel
└─ [2] WBP_QuestsPanel
// 탭 전환 로직
[OnClicked (Tab_Inventory)]
└──> [Set Active Widget Index] (MenuSwitcher, 0)
[OnClicked (Tab_Stats)]
└──> [Set Active Widget Index] (MenuSwitcher, 1)
[OnClicked (Tab_Quests)]
└──> [Set Active Widget Index] (MenuSwitcher, 2)
UMG는 키보드/게임패드 네비게이션을 지원합니다. 위젯의 Navigation 설정에서 방향별 이동 대상을 지정하거나 Explicit/Automatic 모드를 사용합니다. Set Keyboard Focus로 특정 위젯에 포커스를 설정할 수 있습니다.
핵심 요약
- 메인 메뉴는 Set Input Mode UI Only로 입력을 UI 전용으로 설정한다
- 일시정지 메뉴는 Set Game Paused와 함께 위젯 생성/제거를 토글한다
- Game User Settings로 해상도, 화면 모드, VSync 등 그래픽 설정을 관리한다
- Widget Switcher로 탭 기반 멀티 페이지 UI를 깔끔하게 구현한다
- 메뉴 열 때 Set Show Mouse Cursor, 닫을 때 커서 숨김을 잊지 않는다
- 설정값은 GameUserSettings.ini에 자동 저장되며 Apply + Save로 적용한다
도전 과제
배운 내용을 직접 실습해보세요
ESC 키 입력 시 게임을 일시정지(Set Game Paused)하고 WBP_PauseMenu를 표시하세요. Resume, Settings, Quit 버튼을 배치하고, 각 버튼의 OnClicked 이벤트에 해당 기능을 연결하세요. Set Input Mode UI Only로 커서를 표시하세요.
Slider(볼륨 조절), ComboBox(해상도 선택), CheckBox(전체화면 토글)를 사용하여 설정 화면을 만드세요. Apply 버튼으로 Execute Console Command를 호출하여 설정을 적용하고, SaveGame에 설정값을 저장하세요.
Widget Switcher를 사용하여 메인 메뉴 → 설정 → 크레딧 화면을 하나의 위젯 안에서 전환하는 메뉴 네비게이션 시스템을 구현하세요. 뒤로가기 기능과 애니메이션 전환 효과(Widget Animation)도 추가하세요.