5-3. 게임패드 UI | UE5 UI Deep Dive

01

게임패드 네비게이션 기초

D-Pad/스틱으로 UI를 탐색하는 기본 구조

게임패드에서 UI를 조작하려면 포커스 네비게이션이 핵심입니다. D-Pad 또는 왼쪽 스틱의 상하좌우 입력으로 포커스를 이동하고, A 버튼(Accept)으로 선택합니다.

C++ - 게임패드 UI 기본 설정
// 게임패드 사용 시 포커스 관리 패턴
void UMyMenu::NativeConstruct()
{
    Super::NativeConstruct();

    // 첫 번째 버튼에 초기 포커스
    if (IsUsingGamepad())
    {
        PlayButton->SetKeyboardFocus();
    }
}

bool UMyMenu::IsUsingGamepad() const
{
    UCommonInputSubsystem* InputSys =
        GetOwningLocalPlayer()->GetSubsystem<UCommonInputSubsystem>();
    return InputSys &&
        InputSys->GetCurrentInputType() == ECommonInputType::Gamepad;
}

02

Analog Cursor

게임패드 스틱으로 마우스 커서를 에뮬레이션

CommonUI의 Analog Cursor는 게임패드 스틱 입력을 가상 마우스 커서로 변환합니다. 포커스 네비게이션이 어려운 복잡한 UI(인벤토리 그리드, 맵 등)에서 유용합니다.

C++ - Analog Cursor 설정
// CommonUI Analog Cursor는 프로젝트 설정에서 구성
// Project Settings > Game > Common Input Settings
//   > Analog Cursor Settings
//     > Cursor Speed: 커서 이동 속도
//     > Acceleration: 가속도
//     > Dead Zone: 데드존

// CommonUI는 게임패드의 A 버튼을 Left Mouse Click으로,
// 오른쪽 스틱을 마우스 이동으로 변환합니다.

// Analog Cursor를 사용하는 위젯 설정
UCLASS()
class UMapWidget : public UCommonActivatableWidget
{
    GENERATED_BODY()
public:
    UMapWidget()
    {
        // Game And UI 모드에서 Analog Cursor 활성화
        SetInputMode(ECommonInputMode::All);
    }
};

03

플랫폼별 아이콘 전환

Xbox/PlayStation/Switch 버튼 아이콘 자동 전환

C++ - CommonUI 입력 아이콘 관리
// CommonInputBaseControllerData 에셋에서 플랫폼별 아이콘 설정
// Project Settings > Game > Common Input Settings
//   > Controller Data (Map)
//     > Xbox: 키 → 아이콘 텍스처 매핑
//     > PlayStation: 키 → 아이콘 텍스처 매핑
//     > Switch: 키 → 아이콘 텍스처 매핑

// UCommonActionWidget: 자동으로 현재 디바이스의 아이콘 표시
UPROPERTY(meta = (BindWidget))
UCommonActionWidget* ConfirmActionWidget;

// 설정:
// ConfirmActionWidget의 InputAction에
// CommonInputActionDataBase 에셋 지정
// → 마우스/키보드 사용 시: "Enter" 또는 "LMB" 아이콘
// → Xbox 게임패드 시: "A" 버튼 아이콘
// → PlayStation 시: "X(Cross)" 버튼 아이콘

// CommonButtonBase도 자동 아이콘 전환 지원
UPROPERTY(meta = (BindWidget))
UCommonButtonBase* ConfirmButton;
// 버튼에 TriggeringInputAction을 설정하면
// 버튼 옆에 해당 플랫폼 아이콘이 자동 표시됨

아이콘 에셋 관리 팁

플랫폼별 버튼 아이콘은 텍스처 아틀라스로 관리하면 Draw Call을 줄일 수 있습니다. CommonUI의 CommonInputBaseControllerData 에셋은 키 이름과 아이콘 텍스처의 매핑을 Data Asset으로 관리하므로, 새 플랫폼 추가 시 코드 수정 없이 에셋만 추가하면 됩니다.

04

콘솔 인증 체크리스트

콘솔 플랫폼 인증을 위한 UI 요구사항

포커스 요구사항

- 모든 UI 화면에 초기 포커스 위젯 존재
- 포커스가 "빠져나가는" 상황 없음
- 모든 인터랙션 가능 요소에 도달 가능
- 포커스 시각적 표시 명확

입력 요구사항

- B 버튼으로 항상 뒤로가기 가능
- 올바른 플랫폼 아이콘 표시
- 트리거/범퍼로 탭 전환
- 마우스/게임패드 전환 시 UI 적응

SUMMARY

핵심 요약

게임패드 UI는 포커스 네비게이션이 핵심이며, 모든 UI 화면에 명확한 초기 포커스가 필요합니다
CommonUI의 Analog Cursor는 게임패드 스틱을 가상 마우스로 변환하여 복잡한 UI 조작을 지원합니다
UCommonActionWidget과 UCommonButtonBase는 입력 디바이스에 따라 플랫폼별 아이콘을 자동 전환합니다
콘솔 인증을 위해 포커스 접근성, B 버튼 뒤로가기, 올바른 플랫폼 아이콘이 필수입니다

PRACTICE

도전 과제

배운 내용을 직접 실습해보세요

실습 1: 게임패드 네비게이션 메뉴 구현

게임패드 D-Pad와 스틱으로 탐색 가능한 메인 메뉴를 구현하세요. 버튼 포커스 시 시각적 하이라이트, A 버튼으로 선택, B 버튼으로 뒤로가기가 동작하도록 합니다.

실습 2: 플랫폼별 입력 아이콘 전환

CommonInputActionDataBase를 활용하여 키보드/Xbox/PlayStation 각 플랫폼에 맞는 버튼 아이콘을 자동 표시하는 시스템을 구현하세요. 입력 디바이스 전환 시 실시간으로 아이콘이 교체되어야 합니다.

심화 과제

게임패드 아날로그 스틱으로 마우스처럼 UI를 조작하는 Analog Cursor를 구현하세요. AnalogCursor 플러그인을 활성화하고, 커서 속도/가속도를 조절하며, 버튼 위에서 자동 스냅 기능을 추가합니다.