7-3. 접근성 구현 | UE5 UI Deep Dive

01

UE5 접근성 프레임워크

엔진 내장 접근성 기능 개요

UE5는 Slate Accessibility Framework을 통해 스크린 리더, 하이 콘트라스트, 네비게이션 보조 기능을 기본 제공합니다. 이 프레임워크는 위젯에 접근성 메타데이터를 부여하여 외부 보조 기술과 통신합니다.

C++ - 접근성 활성화
// 프로젝트 설정에서 접근성 활성화
// Project Settings > Engine > Accessibility
//   > Enable Accessibility = true

// DefaultEngine.ini
[Accessibility]
bEnabled=true

// Slate 위젯에 접근성 텍스트 설정
SNew(SButton)
.AccessibleParams(FAccessibleWidgetData(
    EAccessibleBehavior::Custom,
    EAccessibleBehavior::Auto,
    FText::FromString("설정 메뉴 열기 버튼")))
[
    SNew(SImage)
    .Image(SettingsIconBrush)
]

// UMG에서 접근성 텍스트 설정
// Widget Blueprint > Details > Accessibility
//   > Override Accessible Text = true
//   > Accessible Text = "설정 메뉴 열기 버튼"

접근성이 중요한 이유

Microsoft, Sony, Nintendo 모두 콘솔 인증 시 접근성 가이드라인을 강화하고 있습니다. Xbox Accessibility Guidelines(XAG)에는 텍스트 크기, 색각 이상 대응, 스크린 리더 등이 포함됩니다. 접근성을 초기부터 고려하면 나중에 대규모 리팩토링을 피할 수 있습니다.

02

색각 이상 대응

색맹 모드와 색상 접근성

C++ - 색맹 시뮬레이션 및 보정
// UE5 내장 색맹 시뮬레이션
// Window > Developer Tools > Color Blindness Simulation
//   > Deuteranopia (적녹 색맹 - 가장 흔함)
//   > Protanopia (적색맹)
//   > Tritanopia (청황 색맹)

// 포스트 프로세스 기반 색맹 보정
// Project Settings > Engine > Rendering
//   > Color Deficiency Correction

// UI 색상 접근성 가이드라인:
// 1. 색상만으로 정보를 전달하지 말 것
//    → 아이콘/패턴/텍스트를 함께 사용
// 2. 적-녹 조합 대신 적-청 또는 패턴 사용
// 3. 충분한 명도 대비 확보 (4.5:1 이상)

// 실전 패턴: 색맹 모드별 컬러 팔레트
UCLASS(Blueprintable)
class UColorAccessibilitySettings : public UObject
{
    GENERATED_BODY()
public:
    enum class EColorBlindMode
    {
        Normal,
        Deuteranopia,  // 적녹 색맹
        Protanopia,    // 적색맹
        Tritanopia,    // 청황 색맹
    };

    FLinearColor GetDangerColor(EColorBlindMode Mode)
    {
        switch (Mode)
        {
        case EColorBlindMode::Normal:
            return FLinearColor::Red;
        case EColorBlindMode::Deuteranopia:
        case EColorBlindMode::Protanopia:
            return FLinearColor(1.f, 0.5f, 0.f); // 주황
        case EColorBlindMode::Tritanopia:
            return FLinearColor(1.f, 0.f, 0.5f); // 분홍
        }
        return FLinearColor::Red;
    }
};

03

UI 스케일링

텍스트 크기, UI 스케일, 해상도 독립적 레이아웃

C++ - UI 스케일 시스템
// DPI 스케일링 (프로젝트 설정)
// Project Settings > Engine > User Interface
//   > DPI Scaling > DPI Curve 설정

// 런타임 UI 스케일 조정
void UAccessibilitySettings::SetUIScale(float Scale)
{
    // 0.5 ~ 2.0 범위로 제한
    Scale = FMath::Clamp(Scale, 0.5f, 2.0f);

    // 에디터 DPI 스케일이 아닌 커스텀 스케일 적용
    UWidgetLayoutLibrary::SetPlayerScreenScaleFactor(
        GetOwningPlayer(), Scale);
}

// 텍스트 크기 접근성 옵션
void UAccessibilitySettings::SetTextSizeMultiplier(float Mult)
{
    // 모든 TextBlock에 적용할 전역 폰트 스케일
    TextSizeMultiplier = FMath::Clamp(Mult, 0.75f, 2.0f);

    // 브로드캐스트하여 모든 UI가 갱신
    OnTextSizeChanged.Broadcast(TextSizeMultiplier);
}

// HUD 위젯에서 텍스트 크기 적용
void UMyHUD::ApplyTextScale(float Multiplier)
{
    FSlateFontInfo Font = TitleText->GetFont();
    Font.Size = FMath::RoundToInt(BaseFontSize * Multiplier);
    TitleText->SetFont(Font);
}

해상도 독립적 설계

UI를 특정 해상도에 고정하지 마세요. 앵커와 상대 크기를 활용하고, DPI Scaling Curve를 적절히 설정하면 720p부터 4K까지 자동으로 스케일됩니다. 텍스트 크기 옵션(소/중/대/특대)을 제공하여 사용자가 선택할 수 있게 하세요.

04

자막과 청각 접근성

자막 시스템과 시각적 사운드 피드백

C++ - 자막 시스템
// UE5 내장 자막 시스템 활성화
// Project Settings > General Settings > Subtitles
//   > Enable Subtitles = true

// 커스텀 자막 위젯 (확장 기능)
UCLASS()
class USubtitleWidget : public UUserWidget
{
    GENERATED_BODY()
public:
    UPROPERTY(meta = (BindWidget))
    URichTextBlock* SubtitleText;

    void ShowSubtitle(const FText& Speaker,
        const FText& Text, float Duration)
    {
        // 화자 색상으로 구분
        FString Formatted = FString::Printf(
            TEXT("<Speaker>%s:</> %s"),
            *Speaker.ToString(), *Text.ToString());
        SubtitleText->SetText(FText::FromString(Formatted));

        // 자막 배경 반투명 패널 표시
        SetVisibility(ESlateVisibility::SelfHitTestInvisible);

        // Duration 후 자동 숨김
        GetWorld()->GetTimerManager().SetTimer(HideTimer,
            [this]()
            {
                SetVisibility(ESlateVisibility::Collapsed);
            }, Duration, false);
    }
};

// 사운드 시각화 (청각 장애 지원)
// 총소리 방향 → 화면 가장자리 표시기
// 발소리 → 미니맵 파문 효과
// 음악 변화 → 화면 분위기 색조 변경

접근성 체크리스트

- 텍스트 크기 조절 옵션
- 색맹 모드 지원
- 자막 및 시각적 사운드 피드백
- 게임패드 완전 네비게이션
- 버튼 리매핑 지원
- 충분한 색상 대비

참고 가이드라인

- Xbox Accessibility Guidelines (XAG)
- WCAG 2.1 (웹 콘텐츠 접근성)
- Game Accessibility Guidelines
- AbleGamers Includification

SUMMARY

핵심 요약

UE5의 Slate Accessibility Framework은 스크린 리더, 접근성 텍스트 등 보조 기술 지원을 내장합니다
색상만으로 정보를 전달하지 않고, 아이콘/패턴/텍스트를 병행하여 색각 이상 사용자를 지원합니다
UI 스케일과 텍스트 크기 옵션을 제공하고, DPI Scaling Curve로 해상도 독립적 레이아웃을 구현합니다
자막 시스템과 사운드 시각화로 청각 접근성을 보장합니다
접근성을 프로젝트 초기부터 고려하면 콘솔 인증과 사용자 기반 확대에 유리합니다

PRACTICE

도전 과제

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

실습 1: 스크린 리더 지원 설정

프로젝트의 접근성 설정을 활성화하고, 주요 UI 위젯에 AccessibleText와 AccessibleSummaryText를 설정하세요. Windows Narrator로 게임 UI를 탐색하며 스크린 리더 호환성을 검증합니다.

실습 2: 색맹 모드 구현

UE5의 Color Vision Deficiency 시뮬레이션(r.ColorDeficiency)을 활용하고, UI 색상 팔레트를 색맹 친화적으로 조정하세요. 적록색맹/청황색맹 모드를 게임 설정에서 전환할 수 있도록 구현합니다.

심화 과제

UI 스케일링(0.5x~2.0x), 자막 시스템(크기/배경/색상 조절), 키 리매핑, 텍스트 음성 변환(TTS)을 포함하는 종합 접근성 설정 메뉴를 구현하세요. CVAA/WCAG 가이드라인을 참고합니다.