다음을 통해 공유


Xbox 접근성 지침 101: 텍스트 표시

목표

XAG(Xbox 접근성 지침)의 목표는 낮은 시야의 플레이어를 포함한 모든 플레이어에 대해 텍스트 가독성이 최적화되도록 하는 것입니다. 이 기능은 텍스트를 최소 기본 크기 및 간격으로 표시하고 구성 가능한 스타일 및 색상 옵션을 제공하여 사용할 수 있습니다.

개요

세상에는 어느 정도의 낮은 시야를 가진 사람이 약 29억이 존재합니다. 저시력이라는 용어는 내용(안경이나 접촉이 있는 경우에도)의 흐림 또는 사람의 시야를 어둡게 하거나 흐리게 하거나 불완전하게 만드는 조건을 포함하여 광범위한 시각적 장애를 나타낼 수 있습니다.

멀리 떨어진 화면에서 플레이하거나 작은 모바일 화면에서 플레이하는 등 텍스트를 읽기 어려운 상황도 있습니다. 때때로 플레이어가 TV 볼륨을 음소거해야 하는 상황에 놓이거나, 반대로 자신의 환경이 매우 시끄러운 경우, 플레이어는 화면 텍스트에 의존하여 들리지 않는 정보를 얻습니다.

플레이어가 메뉴 텍스트를 읽을 수 없는 경우 게임 플레이 체험 자체에 들어가기도 전에 제외될 수 있습니다.

게임의 주요 정보는 액세스 불가능한 경우 플레이어가 게임을 최대한 경험하지 못하도록 차단하는 텍스트 기반 방법을 통해 표현될 수도 있습니다. 여기에는 텍스트를 통해 표현되는 비플레이어 통신, 화면 목표나 지침에 작성된 헤드업 디스플레이(HUD) 요소, 텍스트 채팅을 통한 다른 플레이어와의 통신 등의 환경이 포함될 수 있습니다.

범위 지정 질문

게임에 필요한 텍스트를 읽는 능력이 있나요?

  • 게임 텍스트 기반의 메뉴를 검색할 수 있나요?

  • 게임 중에 텍스트가 화면에 표시될 수 있나요?

    • HUD를 사용 중인가요?

    • 목표 또는 지침이 화면에 나타나나요?

    • 텍스트 기반인 Waypoint, 표식 또는 기타 힌트가 있나요?

    • 플레이어가 아닌 캐릭터의 서면 통신인가요?

  • 게임이 플레이어에게 서로 통신할 수 있는 옵션을 제공하나요?

    • 텍스트 채팅이 제공되나요?

    • 채팅 휠이 제공되나요?

    • 음성-텍스트 전환 및 텍스트-음성 전환 기능과 같은 대체 통신 방법이 제공되나요?

배경 및 기본 정보

텍스트 표시란 무엇인가요?

텍스트 표시는 다음을 비롯한 여러 가지 측면으로 구성됩니다.

  • 크기: 크기 조정 플레이어는 텍스트 크기를 조정할 수 있나요?

  • 형태: 굵게, 기울게 또는 얇게 만들 수 있나요?

  • 두께: 텍스트의 두께를 키울 수 있나요?

  • 스타일: 다른 글꼴 종류를 선택할 수 있나요?

  • 간격: 문자와 단어 사이의 간격을 조정할 수 있나요?

  • 맞춤: 텍스트의 가로 맞춤을 조정할 수 있나요?

  • 사례: 문장이 제시되는 케이스를 선택할 수 있나요?

  • 색: 텍스트의 색상이 배경과 대조되어 잘 보이나요? 액세스 가능한 텍스트 색상에 대한 자세한 내용은 XAG 102: 대비를 참조하세요.

참고 항목

가능한 한 많은 플레이어가 텍스트에 액세스할 수 있도록 하는 가장 좋은 방법은 플레이어에게 UI를 가장 잘 구성할 수 있는 선택권을 제공하는 것입니다.

텍스트 크기 측정

XAG 최소 글꼴 크기 지침에 따라 작업을 평가할 때는 글꼴 크기를 정확하게 측정하는 것이 중요합니다. 글꼴 크기를 측정하는 한 가지 방법은 다음 지침을 통해 Microsoft 그림판을 사용하는 것입니다.

  1. 측정하려는 게임 내 텍스트 이미지를 캡처합니다.
  2. 그림판 애플리케이션을 시작하고 스크린샷을 가져옵니다.

그림판 앱에 붙여넣은 퍼즐 게임의 게임 컨트롤 메뉴 UI 이미지가 있는 Windows 그림판 앱의 스크린샷.

  1. 스크린샷 내에서 표시되는 가장 낮은 디센더와 가장 높은 어센더를 포함하는 단어 또는 문장을 찾습니다.

대문자 H와 소문자 f, g 및 h는 모두 기준선이라는 줄에 있습니다. 소문자 g의 아래쪽 꼬리는 다른 글자보다 아래로 내려가고 아래쪽 끝은 디센더 높이로 표시됩니다. 소문자 h가 가장 크고 높이가 어센더 높이로 표시됩니다. 대문자 H의 상단은 캡 높이로 표시됩니다. 대문자 H와 소문자 f 및 h의 하단에서 소문자 f의 가로 막대 상단과 h의 혹 상단까지의 높이를 x 높이라고 표시합니다.

  • 어센더: “h” 또는 “b” 등의 소문자에서 x 높이를 넘어가도록 수직으로 올려 쓰는 획의 시작 부분입니다.
  • 디센더: “g” 또는 “y” 같은 소문자에서 기준선 아래로 이어지거나 내려가는 부분입니다.
  • 기준선: 기준선은 텍스트의 문자들 아래에 깔리는 가상의 선입니다.

앱의 선택 도구 위에 강조 표시된 Windows 그림판 앱의 스크린샷. 이 도구를 사용하여 단어의 어센더 및 디센더의 가장자리가 각각 상자의 위쪽 및 아래쪽 가장자리에 있도록 이미지의

  1. 시작점을 선택하고 선택 도구를 사용해 전체 단어나 문장을 훑어 가며 대상 텍스트의 가장 높은 지점을 찾습니다. 더 높은 지점을 최고 어센딩 변수로 지정합니다. 이 내용은 다음 텍스트에서 자세히 설명합니다.

가장자리가 단어의 오름차순 및 내림차순 가장자리와 일치할 수 있도록 선택 도구의 사각형 상자가 그려진

기본 텍스트 색과 색이 다른 텍스트의 바깥쪽 가장자리의 픽셀을 기록합니다. 이러한 경우는 일반적으로 텍스트에 색이 지정된 윤곽선이 있는 경우 발생합니다. 이전 이미지에서는 텍스트는 흰색이며 바탕은 회색입니다. 그러나 텍스트 주변에 검정색 윤곽선이 있으므로 어센더의 최고점 근처의 픽셀이나 디센더의 최저점 근처의 픽셀을 포함해 텍스트를 둘러싸고 있는 픽셀이 회색으로 나타납니다.

높이를 측정할 때 어떤 픽셀을 포함시켜야 할 지 결정할 때는 다음 규칙을 적용하면 됩니다.

  • 배경색에 대한 해당 픽셀의 대비 비율이 2:1보다 높은 경우 어센더나 디센더 측정에 포함시킬 수 있습니다.

  • 해당 픽셀의 대비 비율이 2:1보다 낮으면 어센더나 디센더의 일부로 포함시키지 않아야 합니다.

  1. 그런 다음 어센더의 최고점에서 디센더의 최저점까지 상자를 그립니다.

픽셀 비율은 왼쪽 아래 모서리에 나열됩니다. 픽셀 높이(또는 66x30 px(뒤쪽이 픽셀 높이))를 텍스트 크기로 간주합니다. 다음 예제 이미지에서는 30 px이 글꼴 크기입니다.

'오른쪽'이라는 단어에서 어센더와 디센더의 가장자리 주위에 직사각형을 그리는 데 사용되는 선택 도구가 포함된 그림판의 스크린샷. 화살표는 66 x 30픽셀의 픽셀 비율에서 그림판 앱의 왼쪽 하단을 가리킵니다.

접근성 있는 텍스트 표시가 중요한 주요 영역

  • 메뉴 화면의 텍스트:

    예시(확장 가능) 모든 메뉴 화면과 UI 요소에서 텍스트 표시에 액세스할 수 있습니다. 여기에는 모든 레이블, 하위 레이블, 설명자 텍스트 또는 상호 작용 프롬프트가 포함됩니다.

    Grounded 옵션 메뉴. 접근성 하위 옵션 화면. 텍스트는 어두운 갈색 배경에 밝은 노란색입니다.

    Grounded에서 메뉴 화면의 텍스트는 대비 비율 및 최소 기본 글꼴 크기를 충족한다는 점에서 액세스할 수 있습니다.

  • 게임 플레이 환경의 텍스트는 다음과 같습니다.

    예시(확장 가능)

    게임 플레이 중에 나타나는 텍스트도 기본적으로 액세스할 수 있거나 구성할 수 있어야 합니다. 여기에는 HUD 미터, 지침 단서 또는 인벤토리 탐색 키와 같은 요소가 포함될 수 있습니다.

    게임 내 아이템을 수집하려는 플레이어 캐릭터를 보여주는 Fenyx Immortals Rising의 스크린샷. 캐릭터 위에는 Y 버튼 아이콘과

    Fenyx Immortals Rising에서는 가시성을 위해 게임플레이 환경 내부의 텍스트가 어떤 배경색 위에 표시되든 상관 없이 텍스트에 검은 윤곽선을 입혔습니다.

  • 대화 창의 텍스트(입력 필드 텍스트, 자리 표시자 텍스트):

    예시(확장 가능)

    "여기에 메시지 입력 "문자열을 읽을 수 있는 기능은 플레이어에게 다른 플레이어와 의사 소통할 기회가 있음을 알려줍니다. 메시지를 입력한 후 액세스 가능한 텍스트는 플레이어에게 보내기 단추를 누르기 전에 메시지를 다시 읽을 수 있는 기능을 제공합니다. 이러한 시나리오의 텍스트에도 액세스할 수 있어야 합니다.

    Gears 5 채팅 패널 클로즈업. 텍스트 입력란에 글로벌 채팅임을 나타냅니다. 회색 글씨로

    Gears 5에서 플레이어는 파티 대화 상자를 사용하여 로비에 있는 다른 사람에게 메시지를 입력할 수 있습니다.

  • 채팅 창의 텍스트(보내고 받은 메시지):

    예시(확장 가능)

    채팅란과 채팅창도 중요합니다. 플레이어가 파티 채팅의 다른 사용자가 말하는 내용을 읽지 못할 경우 주요 게임 플레이 경험에서 제외될 수 있습니다.

    Halo Wars 2의 기지. 화면 오른쪽의 검은색 상자에 플레이어의 채팅이 표시됩니다. 이 상자는 빨간색 상자로 둘러싸여 음성 텍스트 변환 영역임을 강조합니다.

    Halo Wars 2에서는 플레이어가 음성 대 텍스트(STT)를 활성화하여 이전에 표시된 것처럼 모든 구어 대화를 STT 표시 영역의 텍스트로 변환할 수 있습니다.

  • 채팅 - 채팅 휠 텍스트:

    예시(확장 가능)

    채팅 휠커뮤니케이션 휠이라고도 하며 커뮤니케이션을 위한 중요한 게임 내 인터페이스 도구입니다. 일부의 경우 문자 메시지 입력보다 채팅 휠을 사용하여 문자 메시지에 더 쉽게 액세스할 수 있습니다. 플레이어가 채팅 휠의 텍스트를 읽지 못할 경우 다른 사용자와 의사 소통하지 못할 수 있습니다.

    Sea of Thieves에 있는 채팅 휠입니다.

    Sea of Thieves에서는 플레이어가 채팅 휠을 사용하여 다른 사람과 의사 소통할 수 있습니다.

  • 자막 및 캡션 텍스트:

    예시(확장 가능)

    플레이어가 자막 및 캡션에 대한 텍스트 표시를 읽을 수 없는 경우 게임 스토리라인의 주요 구성 요소 또는 목표 관련 정보를 놓칠 수 있습니다.

    Gears 5에서 활발한 게임 플레이 중에 반투명 배경 위에 나타나는 큰 텍스트가 있는 자막은

    Gears 5에서 플레이어가 자막을 사용하여 캐릭터 대화를 크게 표시할 수 있습니다. 플레이어가 읽을 수 있도록 하려면 이 텍스트에도 액세스할 수 있어야 합니다.

  • 오류 메시지, 토스트 및 기타 알림의 텍스트는 다음과 같습니다.

    예시(확장 가능)

    크기, 무게 및 대비 증가와 같은 조정 가능한 텍스트 설정은 모든 중요 텍스트에 적용되어야 합니다. 여기에는 특히 오류 메시지와 같은 주요 정보가 표시될 때 UI를 오버레이하는 추가 창이 포함됩니다.

    Grounded(게임 미리 보기)에서

    Grounded에서는 오류 대화 상자가 화면에 오버레이됩니다. 플레이어가 읽을 수 있도록 오류 메시지 및 기타 팝업 알림의 텍스트에 액세스할 수 있어야 합니다.

  • 귀중한 정보를 제공하는 화면 로딩에 관한 텍스트입니다.

    예시(확장 가능)

    로딩 화면은 게임 플레이 "팁"과 같은 플레이어에게 유용한 정보 또는 다른 게임 모드에 대한 정보를 제공하는 경우가 많습니다. 이 텍스트에 액세스할 수 있도록 보장하는 것이 "고급 모범 사례"에 가까울 수 있지만, 게임 플레이의 모든 측면을 고려하는 것은 여전히 중요합니다.

    Minecraft Dungeons 로딩 화면. 화면에는 좀비에게 쫓기는 Minecraft 캐릭터가 표시됩니다.

    Minecraft 던전의 로드 화면에는 이동하는 맵의 영역을 플레이어에게 알려주는 텍스트가 포함되어 있습니다.

구현 지침

텍스트 크기

다음 픽셀 측정은 내림차 공간, x-높이 공간 및 내림차 공간의 픽셀 수를 합한 신체 높이를 기반으로 합니다.

예시(확장 가능)

텍스트의 본문 높이가 결정되는 방식을 보여주는 다이어그램입니다. 대문자 H와 소문자 f, g 및 h는 모두 기준선에 있습니다. 어센더 높이, 캡 높이, x-높이 및 디센더 높이가 표시됩니다. 본문 높이는 소문자 g의 디센더 하단부터 소문자 g의 상단(x 높이), 소문자 h의 어센더 상단까지의 픽셀의 합입니다.

참고 항목

다음의 크기는 환경별로 게임을 시작할 때 텍스트가 지켜야 할 최소 기본 크기를 나타냅니다. 개발자는 개별 플레이어의 시나리오, 예를 들어 소파에서 TV까지의 일반적인 거리 등을 고려하고 플레이어에게 마음대로 크기를 늘이거나 줄일 수 있도록 하는 옵션을 제공하는 것이 좋습니다. 다음 섹션에는 텍스트 크기 조정 지침에 대한 자세한 내용이 포함되어 있습니다.

  • 콘솔: 글꼴 크기는 다음보다 크거나 같아야 합니다.

    • 1080p에서 26px

    • 4K에서 52px

  • PC/VR: 글꼴 크기는 다음보다 크거나 같아야 합니다.

    • 1080p에서 18px

    • 4K에서 36px

  • 모바일/Xbox 게임 스트리밍:**

    • 100 DPI에서 18px

    • 200 DPI에서 36px

    • 400 DPI에서 72px

    • DPI가 증가할수록 선형으로 확장

**모바일 장치는 대부분의 TV나 PC 디스플레이보다 DPI가 훨씬 높기 때문에 크기가 비슷한 텍스트는 더 많은 픽셀을 필요로 합니다. 컨텍스트에서 해상도가 1080p인 5.5" 화면은 대략 400DPI입니다.

참고 항목

플랫폼이 제공하는 화면 확대 도구는 작은 텍스트 크기를 줄이는 데 적합하지 않습니다.

아이콘 및 문자 모양 크기

  • 아이콘 및 문자 내의 텍스트는 콘솔이나 PC, VR 또는 모빌리티, Xbox 게임 스트리밍 환경에 맞춰 이미 정의된 최소 기본 텍스트 크기를 충족해야 합니다.

    예시(확장 가능)

    레이블이 있는 B 버튼 아이콘. 전체 아이콘은 아이콘/문자로 레이블이 지정되고 버튼 내부의 B는 아이콘/문자 내부의 텍스트로 레이블이 지정됩니다.

  • 아이콘/문자 모양도 텍스트 크기를 최소 기본 크기의 최대 200%까지 조정해야 합니다.

참고 항목

문자와 아이콘이 텍스트 상자에 알맞게 들어가도록 하려면 텍스트를 집어넣을 문자나 아이콘을 키워야 할 수도 있습니다.

예시(확장 가능)

'확인하려면 x 버튼을 누르세요'라는 문구를 보여주는 좋은 예입니다. 버튼 내의 텍스트는 최소 18픽셀을 충족하고 전체 문자가 텍스트 라인 컨테이너에 맞도록 주변 텍스트 크기가 커졌습니다.

텍스트 크기 조정

  • 플레이어는 내용, 기능 또는 의미의 손상 없이 최소 글꼴 크기의 최대 200%까지 텍스트 크기를 조정할 수 있어야 합니다. 예를 들어 1080p의 콘솔 텍스트는 1080p의 경우 26px에서 52px로 확장할 수 있어야 합니다.

    • 큰 머리글 텍스트는 텍스트가 배율이 조정된 경우 본문과 시각적으로 차별화됩니다.

    • 표시되는 화면 너머로 확장되는 텍스트에는 읽을 방법(스크롤링 텍스트, 텍스트 팝업 창 또는 적절한 약어)이 있어야 합니다.

    • 텍스트 크기가 조정되면 플레이어에서 단일 UI 내에서 텍스트를 읽기 위해 가로 및 세로로 스크롤할 필요가 없습니다. (한 방향으로 스크롤해도 좋습니다.)

    • 사용자의 재량에 따라 텍스트를 기본 최소값보다 축소(작게)하는 것이 허용됩니다.

글꼴 스타일

  • 하나 이상의 산세리프 글꼴 이름 옵션을 포함합니다.

    예시(확장 가능)

    비교를 위해 세리프와 산세리프 글꼴로 쓰여진

  • 스타일이 있는 글꼴(예를 들어 피가 뚝뚝 떨어지는 글꼴)을 사용하는 경우 스타일을 제외한 글꼴 옵션을 제공합니다.

  • 모든 글꼴에 지원되는 모든 언어에 대한 전체 문자 집합이 포함되어 있는지 확인합니다.

텍스트 간격

문자, 단어 또는 문단 줄 사이의 간격이 넓어지면 독자가 단어 간의 분리를 더 쉽게 식별할 수 있기 때문에 텍스트 선명도가 높아질 수 있습니다. 구성 가능한 간격은 텍스트 크기 조정 또는 더 큰 글꼴 크기를 사용하는 플레이어를 지원할 수도 있습니다.

  • 세 줄 이상인 텍스트 블록의 경우 표준 글꼴 크기로 설정된 경우 다음을 사용합니다.
    • 플레이어는 자신의 줄 너비, 줄 간격, 단락 간격, 문자 간격 또는 단어 간격을 구성할 수 있는 옵션이 있어야 합니다.

    • 플레이어에게 이러한 구성 옵션을 제공하지 않는 경우 최소 권장 지침은 다음과 같습니다.

      • 줄 너비: 줄 너비는 80자(또는 중국어/일본어/한국어의 경우 40자)를 넘지 않아야 합니다. 그렇지 않으면 플레이어가 이 요구 사항에 맞게 텍스트를 조정할 수 있습니다. 텍스트 크기가 100%로 조정되고 문자 수에 공백이 포함되지 않을 때 측정해야 합니다.

      • 줄 간격: 텍스트 블록의 줄 간격(선행)은 단락 내에서 최소 1.5 간격이어야 합니다. 그렇지 않으면 플레이어가 이 요구 사항에 맞게 텍스트를 조정할 수 있습니다.

        줄 간격은 텍스트의 첫 번째 줄의 오름차순에서 두 번째 줄의 오름차순까지 측정됩니다.

      • 단락 간격: 단락 간격은 줄 간격보다 2배 이상 크거나 플레이어가 이 요구 사항에 맞게 텍스트를 조정할 수 있습니다.

      • 글자 간격: 글자 사이의 공백이 글꼴 크기보다 0.12배 이상 큽니다.

      • 글자 간격:글자 사이의 공백이 글꼴 크기보다 0.16배 이상 큽니다.

        예시(확장 가능)

        여러 줄의 텍스트가 있는 오류 알림 창. 줄 간격, 줄 너비 및 단락 간격에 대한 레이블이 있습니다. 단락 간격 레이블은 두 글머리 기호 사이에 있습니다. 줄 간격 레이블은 같은 단락 내의 두 줄 사이에 있습니다. 줄 너비 레이블은 다음 줄로 넘치기 전에 텍스트 줄의 길이를 실행합니다.

        PuzzleBlaster의 이 캡처에는 줄 간격, 줄 너비 및 문단 간격 측정을 수행할 수 있는 위치를 정의하는 시각적 표시기가 있습니다.

텍스트 대소문자 및 맞춤

  • 글꼴 대소문자: 전체 대문자 또는 전체 소문자가 아닌 적절한 문장 대/소문자로 텍스트를 표시하는 기능을 제공합니다(사용된 경우).

    참고 항목

    이 요구 사항은 텍스트 줄을 나타냅니다. 한 단어 또는 두 단어로 된 레이블은 이 지침에서 제외됩니다.

  • 맞춤: 텍스트는 플레이어 언어 기본 설정에 따라 왼쪽/오른쪽으로 정렬됩니다(중앙에 배치되거나 완전히 정당화되지 않음). 또는 플레이어가 이 지침에 맞게 텍스트를 조정할 수 있습니다.

잠재적인 플레이어 영향

이 XAG의 지침은 다음 플레이어들의 장벽을 완화하는 데 도움이 될 수 있습니다.

플레이어
시력이 낮은 플레이어 X
색 지각이 거의 없거나 전혀 없는 플레이어 X
청각이 없는 플레이어 X
청각이 제한된 플레이어 X
인지 또는 학습 장애가 있는 플레이어 X
기타: 작은 화면에서 텍스트를 읽거나, 화면에서 멀리 떨어져 앉아있거나, 빛 반사가 있는 화면이나 저대비 디스플레이에서 텍스트를 읽는 게이머 X

리소스 및 도구

리소스 종류 원본 링크
문서 텍스트 지우기(외부)
문서 이 항목과 다른 항목 구분(외부)
문서 글꼴 크기를 조정할 수 있도록 허용(외부)
문서 텍스트 색, 저/고대비 선택권을 최소로 제공(외부)
문서 단순한 일반 텍스트 서식 사용(외부)
Microsoft Game Development Kit API XGameStreamingGetStreamPhysicalDimensions(이 링크에는 NDA Xbox 프로그램에서 제공하는 로그인 자격 증명이 필요합니다.)