> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# XAG 113: UI 포커스 처리

> 플레이어가 어떤 UI 요소가 입력 포커스를 가지고 있는지 알 수 있도록, 절대 사라지거나 화면 밖 요소로 이동하지 않는 매우 잘 보이는 포커스 표시기를 항상 보여주세요.

## 목표

저시력이 있는 플레이어를 포함한 플레이어가 게임 UI에서 어떤 요소가 포커스를 가지고 있는지 항상 인지할 수 있도록 합니다.

## 개요

포커스 표시기는 현재 어떤 UI 요소가 입력 포커스를 가지고 있는지 보여주는 시각적 마커입니다. 어떤 인터랙티브 입력(예: "press A to select")이든 포커스가 있는 요소에 적용됩니다. 미묘하거나 간헐적으로 보이는 포커스 표시기는 저시력 플레이어, 인지 장애가 있는 플레이어, 보조 기술 사용자, 게임을 처음 하는 플레이어에게 장벽입니다. 포커스가 숨겨져 있거나 화면 밖 요소로 이동하면 플레이어가 계속 진행하지 못할 수 있습니다.

## 범위 질문

* 포커스를 어떤 방식으로 표시합니까(색상, 외곽선, 둘 다)?
* 그 방식이 저시력이나 색맹이 있는 플레이어에게 보입니까?
* 어떤 컨트롤이 포커스를 가지고 있는지에 대한 표시가 항상 존재합니까?
* 표시기가 게임의 **모든** UI 배경(색상, 이미지, 애니메이션)에서 보입니까?
* 게임에 다른 UI 위에 오버레이되는 대화 상자가 포함됩니까(포커스 표시기가 자주 잃어버리는 흔한 곳)?

## 구현 가이드라인

### 매우 잘 보이는 포커스 표시기

모든 UI 요소는 포커스를 받으면 매우 잘 보이는 포커스 표시기를 표시해야 합니다. 기법에는 다음이 포함됩니다.

* 포커스된 요소 주변의 테두리
* 포커스 시 요소 크기 또는 폰트 굵기 증가
* 요소 뒤에 대비되는 블록 채우기 추가
* 중복을 위해 여러 기법 결합

**예시:**

* *The Outer Worlds* — 포커스 표시기가 요소를 외곽선으로 두르고, 대비되는 블록 채우기를 추가하고, 폰트 굵기와 색상을 변경합니다.
* *Fallout 76* — 일시정지 메뉴는 고대비 노란색 배경과 왼쪽에 작은 애니메이션 캐릭터로 항목을 강조 표시합니다.

### 항상 보이며, 절대 화면 밖으로 나가지 않음

* 시각적 포커스 표시기는 항상 화면에 보여야 합니다.
* 포커스 표시기는 어떤 포커스 가능한 요소에서도 보이지 않게 되어서는 안 됩니다.
* 포커스는 보이지 않거나 화면 밖 요소로 이동해서는 안 됩니다.
* 대화 상자가 나타날 때(예: Forza Horizon 4의 "Unsaved Changes" 경고), 포커스가 대화 상자의 첫 상호작용 가능한 컨트롤로 이동해야 하며, 대화 상자가 열려 있는 동안 포커스를 그 밖으로 이동할 수 없어야 합니다.

## 잠재적 플레이어 영향

| 플레이어                 | 영향 받음 |
| :------------------- | :---: |
| 시력이 없는 플레이어          |   ✓   |
| 저시력 플레이어             |   ✓   |
| 인지 또는 학습 장애가 있는 플레이어 |   ✓   |
| 팔길이와 힘이 제한된 플레이어     |   ✓   |
| 손 조작 능력이 제한된 플레이어    |   ✓   |
| 의족/의수를 사용하는 플레이어     |   ✓   |
| 캐주얼 플레이어, 어린 플레이어    |   ✓   |

## 리소스

* [Designing for Accessibility: Focus States — DockYard](https://dockyard.com/blog/2020/04/28/designing-for-accessibility-focus-states)
* [WCAG 2.2 SC 2.4.11: Focus Appearance (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html)


## Related topics

- [XBOX Accessibility Guidelines (XAG)](/ko/build/game-principles/accessibility/xbox-accessibility-guidelines.md)
- [XAG 112: UI 탐색](/ko/build/game-principles/accessibility/xag-deep-dives/xag-112-ui-navigation.md)
- [XAG 120: 커뮤니케이션 경험](/ko/build/game-principles/accessibility/xag-deep-dives/xag-120-communication-experiences.md)
- [창 표시 모드와 title-callable UI 다이얼로그](/ko/build/gdk-and-engines/guides/window-display-modes-tcui.md)
- [XAG 106: 스크린 내레이션](/ko/build/game-principles/accessibility/xag-deep-dives/xag-106-screen-narration.md)