Unity 게임에 손쉬운 사용 추가

Unity 게임에 손쉬운 사용 추가

오픈 소스인 손쉬운 사용 플러그인을 사용하여 Apple 플랫폼에서 Unity 게임에 액세스할 수 있도록 지원하는 방법을 알아보세요. 샘플 Unity 게임 프로젝트에 VoiceOver 및 스위치 제어와 같은 보조 기술에 대한 지원을 추가하는 과정도 확인해 보시기 바랍니다. Dynamic Type을 통해 텍스트를 자동으로 확장하고, 투명도 감소 또는 대비 증가와 같은 인터페이스 조절을 지원하는 방법을 보여드리겠습니다.

리소스
관련 비디오

WWDC22
- 플러그인 및 플레이: Unity 게임 프로젝트에 Apple 프레임워크 추가
♪ ♪
안녕하세요 제 이름은 Eric입니다 Unity 게임에 접근성을 추가하는 방법을 알려드리게 되어 기쁩니다
접근성은 모든 사람이 제품을 사용할 수 있게 하는 거죠 오늘은 Unity 개발자를 위한 Apple 손쉬운 사용 플러그인으로 접근성 높은 게임에 큰 진전이 있는 날입니다 게임의 접근성을 높일 수 있는 Apple의 기술 3가지를 소개하죠
VoiceOver는 시력이 없거나 나쁜 사용자를 위한 화면 독음기입니다 화면의 항목들을 읽고 맞춤형 몸동작을 제공하여 사용자가 컨트롤과 상호작용할 수 있죠
스위치 제어는 운동 능력이 제한된 사용자가 기기와 상호작용할 수 있는 외부 스위치입니다 동적 서체는 사용자의 읽기 능력에 따라 텍스트 크기를 설정할 수 있죠
시작하려면 저장소를 복제하여 Apple의 모든 플러그인을 빌드하는데 저장소의 루트에 있는 빌드 스크립트를 사용하세요 이를 통해 생성되는 빌드 폴더는 Unity 프로젝트에 통합할 수 있죠 이제 손쉬운 사용 플러그인을 프로젝트에 추가할 때 Unity 패키지 관리자를 이용하세요 자세한 사항은 저장소의 문서를 살펴보거나 Apple의 Unity 플러그인에 관한 영상인 'Apple의 프레임워크를 Unity 게임에 추가하기'를 보십시오 플러그인이 있으니 3개 영역에 관해 안내해 드리죠 첫째는 접근성 요소입니다 이를 통해 VoiceOver나 스위치 제어와 같은 보조 기술에 대한 지원을 여러분의 게임에 추가할 수 있죠 다음은 동적 서체입니다 사용자의 선호에 따라 텍스트의 크기를 바꿔 쉽게 사용할 수 있는 기능이죠 그리고 UI 고려 사항입니다 다른 사용자의 선호를 읽을 수 있는 기능이죠 먼저 접근성 요소부터 살펴보겠습니다
이 개념을 설명하기 위해 간단한 카드 게임을 만들었죠 여러분은 '뒤집기' 버튼을 탭 하면 카드 2장을 뒤집히는 걸 볼 수 있죠 하지만 VoiceOver가 화면의 텍스트를 읽지 않고 외부 스위치도 버튼을 탭 하지 않습니다 이건 화면 위의 픽셀에 불과하기 때문이죠 어떤 상호작용이 가능한지 시스템이 이해해야 합니다 손쉬운 사용 요소는 지원 기술이 상호작용하는 요소들을 정의하죠
텍스트와 카드, 화면의 버튼은 손쉬운 사용 요소가 되어야 합니다 모든 요소는 라벨로 묘사할 수 있죠 VoiceOver가 각 라벨을 읽으면 사용자가 화면 요소를 이해합니다
만약 게임이 여러 언어를 지원한다면 라벨도 현지화해야겠죠
VoiceOver가 화면의 요소를 설명하지만 탭 할 수 있는 버튼이 있다는 걸 알지 못합니다 그럴 때는 '특성'이라는 다른 속성을 이용하여 시스템에 요소의 유형을 알려 주죠 여기에는 '버튼' 특성을 추가해야 합니다 이제 VoiceOver가 '뒤집기 버튼'이라고 읽고 외부 스위치가 이 버튼을 제어할 수 있죠
또한 '정적인 텍스트' 특성을 텍스트에 추가할 수도 있습니다 '정적인 텍스트' 특성은 라벨과 텍스트 영역에 부여하죠 그러면 VoiceOver가 더 나은 텍스트 상호작용을 제공합니다
'버튼'과 '정적인 텍스트' 외에도 더 많은 특성이 있죠
카드에는 어떤 특성을 사용해야 할까요? 모든 손쉬운 사용 요소에 특성을 쓸 필요는 없습니다 카드는 특성이 필요하지 않죠 하지만, 각 카드의 일부를 VoiceOver는 알지 못합니다 바로 앞면의 값이죠 이런 때는 '값'이라는 특성을 사용하면 됩니다
각 카드에 '값'을 추가하면 VoiceOver가 이렇게 읽죠 '카드 1의 값은 3 클로버입니다' '카드 2의 값은 에이스 클로버입니다' 이제 됐습니다 기초를 이해하셨으니 Unity를 열어 프로젝트에 추가하는 법을 보죠
게임의 Unity 에디터에 들어왔습니다 이미 Apple 손쉬운 사용 플러그인을 프로젝트에 추가했죠
먼저 카메라, 직접 조명 UI 캔버스와 같은 신 오브젝트들이 있군요 캔버스 밑에 2개의 텍스트 요소와 버튼이 있습니다 그리고 카드를 위한 2개의 게임 오브젝트가 있죠
각 오브젝트는 2개의 메시 요소로 구성됐으며 각각 카드의 앞면과 뒷면의 텍스처를 렌더링합니다 먼저 우리의 접근성 요소부터 정의하죠 이를 위해 플러그인의 손쉬운 사용 노드가 필요합니다
접근성이 필요한 모든 오브젝트를 선택한 뒤
손쉬운 사용 노드를 추가하여 접근성 요소로 만드십시오
이제 라벨을 추가합시다 카드 오브젝트를 선택하고 오른쪽의 '손쉬운 사용 노드' 요소로 가서 '라벨' 영역을 찾아보세요
맞춤형 라벨을 위해 라벨 영역의 체크 박스를 확인하십시오
그리고 '카드 1'이라고 입력하고
카드 2도 똑같이 입력하세요
텍스트와 버튼은 라벨도 필요하지만 Unity UI의 기본적인 컨트롤을 사용한다면 이를 위한 명시적인 접근성 라벨을 제공할 필요는 없습니다 플러그인에 기본 적용 값이 설정돼 있죠
다음은 버튼에 특성을 추가해야 합니다
뒤집기 버튼을 선택하고 '특성'을 '없음'에서 '버튼'으로 바꾸십시오
2개의 텍스트 요소를 선택하고
'특성'을 '정적인 텍스트'로 수정하세요
좋습니다 마지막으로 카드 면의 값을 접근성을 위해 설정해야 하죠 카드는 무작위로 뽑기 때문에 동적으로 값을 설정하는 스크립트를 추가해야 합니다
카드 2장 선택 후 AccessibleCard 스크립트를 추가하십시오
다른 C# 파일 중 하나에 모든 카드 면에 PlayingCard라는 이넘 값이 있습니다 새로운 AccessibleCard MonoBehavior 스크립트에 카드 유형에 관한 변수와 카드가 앞면인지 뒷면인지에 관한 불리언 값이 있죠
이제 이 카드에 accessibilityValue를 추가합시다 먼저 accessibilityNode 요소를 gameObject에 연결합니다
이후 accessibilityValue 대리자를 함수로 설정하여 동적으로 카드 앞면의 값을 반환하도록 하세요
이 함수 안에는 카드가 가려져 있을 때 accessibilityValue로 '가려져 있음'을 반환하죠 만약 앞면이 나와 있으면 모든 카드 앞면을 열거하고 '에이스 스페이드'와 같은 각 카드의 설명을 반환합니다 이제 끝났습니다 프로젝트를 빌드하고 실제로 어떻게 되는지 보죠 우리의 게임입니다 VoiceOver를 켤게요
VoiceOver가 켜졌습니다 에릭의 게임입니다 카드 2, 가려져 있습니다 오른쪽으로 스와이프하여 다음 요소로 넘어갈게요 카드 1, 가려져 있습니다
에릭의 카드 게임입니다
카드를 뒤집으세요
뒤집기, 버튼 5개의 오브젝트가 VoiceOver로 접근이 가능한데 정말 놀랍습니다 VoiceOver가 켜져 있을 때 버튼을 탭 하려면, 더블 탭 하세요 뒤집기 이제 카드를 확인합시다
카드 1, 2 클로버
카드 2, 에이스 클로버 VoiceOver가 뒤집힌 카드를 정확하게 읽습니다 멋지네요 이제 수백만의 VoiceOver 사용자가 게임에 접근할 수 있고 게임에 빠져들 수 있죠 외부 스위치 컨트롤 사용자도 우리 게임을 할 수 있어요 지금까지 접근성 요소를 다뤘습니다 이제 동적 서체에 관해 이야기해 보죠
게임의 텍스트가 너무 작아 읽을 수 없어서 플레이할 수 없는 사람이 많습니다 iOS와 tvOS에서는 모든 사람이 설정에서 읽기 능력에 맞게 텍스트 크기를 선택할 수 있죠
손쉬운 사용 플러그인으로 이 설정을 인지하여 게임 내 텍스트를 설정 크기로 표시할 수 있습니다
게임을 예로 들어 동적 서체를 어떻게 사용할 수 있는지 보죠
DynamicTextSize.cs라는 MonoBehavior 스크립트를 만드세요 Start 함수에 기본 텍스트 크기를 변수로 저장하고 OnEnable의 AccessibilitySettings .onPreferredTextSizesChanged로 settingsChanged 이벤트를 구독하십시오 사용자가 테스트 설정을 바꾸면 바로 UI를 업데이트합니다
다음은 settingsChanged 함수 안에서 PreferredContentSizeMultiplier를 먼저 읽으십시오 그리고 기본 텍스트의 크기로 곱한 뒤 다시 텍스트 요소로 할당하세요 Unity Editor에서 텍스트 요소가 있는 모든 게임 오브젝트를 선택하십시오 그리고 방금 만든 DynamicTextSize 요소를 추가하세요
이제 우리 게임은 동적 서체 지원 준비가 끝났죠 직접 결과를 확인하기 전에 동적 서체를 빠르게 테스트할 수 있는 비법을 소개하겠습니다 설정을 열고 제어 센터를 선택하세요
텍스트 크기가 나올 때까지 내려서 제어 센터에 추가하십시오
이제 제어 센터를 열어서 텍스트 크기를 빨리 바꾸고 텍스트 크기 옵션도 바꿀 수 있습니다
좋습니다, 텍스트 크기를 바꾸면 폰트 크기가 실시간으로 조정되죠
제어 센터에 나오는 텍스트 비율 값은 우리가 승수에서 읽는 값과 일치합니다 텍스트가 아닌 오브젝트에도 이 설정을 채택할 수 있죠 예를 들어 크기를 키웠을 때 카드 앞면의 애셋을 큰 활자로 바꿀 수 있습니다
먼저 DynamicCardFaces라는 스크립트를 생성합니다 이전과 같이 TextSizeChanged 이벤트를 구독하죠
승수를 읽는 대신 텍스트 크기 이넘을 읽는데 이는 제어 센터 슬라이더의 눈금에 매핑되어 있습니다 누군가 큰 텍스트를 선택하면 언제든 애셋을 바꿀 수 있죠
일반 머티리얼과 큰 활자 머티리얼 사이에서 고르기만 하면 됩니다 정말 큰 사이즈를 선택했다면
큰 활자 버전의 카드를 보게 되는데 시력이 나쁜 사람이 더 쉽게 볼 수 있죠
마지막으로 UI 고려 사항 설정에 관해 얘기하겠습니다 이 플러그인으로 사용할 수 있는 기능이죠
첫 번째 설정은 투명도 줄이기입니다 이 설정을 켜면 배경이 불투명해지며 블러나 투명 효과가 사라지죠 이 효과로 글을 읽기 힘들 때 가독성을 올려 줍니다 이 설정을 넣으려면 AccessibilitySettings.IsReduce TransparencyEnabled를 호출하세요
다음 설정은 대비 증가입니다 스위치가 더 짙은 회색으로 강조되어 기기 전반에 걸쳐 컨트롤을 쉽게 알아볼 수 있죠
이 기능이 켜졌을 때 여러분의 UI 대비도 높이려면 이 설정을 사용하면 됩니다 AccessibilitySettings. IsIncreaseContrastEnabled죠
다음 설정은 동작 줄이기입니다 카드 뒤집기 애니메이션처럼 일부 사람은 동작에 예민하죠
동작 줄이기가 켜졌을 때는 이 애니메이션을 제거해야 합니다
이 작업을 하는 코드를 살펴보죠
CardController 스크립트에 Flip 함수가 있습니다 일단 사용자의 동작 줄이기가 켜져 있는지 확인하죠 꺼져 있으면 Coroutine을 통해 애니메이션을 재생합니다 그렇지 않으면 애니메이션 없이 회전만 설정하죠 그러면 됩니다 이제 동작에 예민한 사람도 게임을 즐길 수 있죠 되짚어 보죠, 먼저 Apple 손쉬운 사용 플러그인을 이 세션의 자원에 링크된 GitHub 저장소에서 복제하세요
접근성 요소를 추가하여 사용자들이 VoiceOver와 스위치 제어를 게임에서 제공하십시오
동적 서체로 텍스트 크기를 조절하고
UI 고려 사항을 확인하여 모두가 여러분의 게임을 즐기도록 하세요
함께해 주셔서 감사합니다 멋진 접근성 경험으로 모든 사람이 할 수 있는 게임을 만드시는 걸 기대하겠습니다

public enum PlayingCard
{
    AceOfSpade,
    AceOfClubs,
    AceOfDiamonds
}

7:53 - AccessibleCard class

using Apple.Accessibility;
public class AccessibleCard : MonoBehaviour 
{
    public PlayingCard cardType;
    public bool isCovered;
    void Start()
    {
        var accessibilityNode = GetComponent<AccessibilityNode>();
        accessibilityNode.accessibilityValueDelegate = () => {
            if (isCovered) {
              return "covered";
            }
            if (cardType == PlayingCard.AceOfSpades) {
              return "Ace of Spades";
            }
        }
    }
}

10:35 - DynamicCardFaces

public class DynamicCardFaces : MonoBehaviour
{
    public Material RegularMaterial;
    public Material LargeMaterial;
    void OnEnable()
    {
        AccessibilitySettings.onPreferredTextSizesChanged += _settingsChanged;
    }

    void _settingsChanged() 
    {
        var shouldUseLarge = AccessibilitySettings.PreferredContentSizeCategory >= 
            ContentSizeCategory.AccessibilityMedium;
        GetComponent<Renderer>().material = shouldUseLarge ? RegularMaterial :
            LargeMaterial;
    }
}

10:36 - Dynamic Type

using UnityEngine.UI;
public class DynamicTextSize : MonoBehaviour
{
    int originalSize;
    void Start()
    {
        originalSize = GetComponent<Text>().textSize;
    }

    void OnEnable()
    {
        AccessibilitySettings.onPreferredTextSizesChanged += _settingsChanged;     }

    void _settingsChanged() 
    {
        GetComponent<Text>().textSize = (int)(originalSize *
            AccessibilitySettings.PreferredContentSizeMultiplier);
    }
}

14:54 - Reduce motion

using Apple.Accessibility;
public class CardController : MonoBehaviour
{
    public void Flip() 
    {
        var reduceMotionOn = !AccessibilitySettings.IsReduceMotionEnabled;
        if (!reduceMotionOn)
        {
            StartCoroutine(Animate());
        }
        else 
        {
            transform.rotation = Quaternion.identify;
        }
    }
    IEnumerator Animate()
    {
    } 
}

리소스

관련 비디오

WWDC22