접근성 가이드라인 | 설명서 - Roblox 크리에이터 허브

접근성은 장애인을 포함한 모든 사용자가 제품과 서비스를 사용할 수 있도록 설계하는 방법입니다. 최근 통계에 따르면 26% 이상의 사람들이 어떤 형태로든 장애를 가지고 있다고 합니다. 따라서 Roblox 게임의 접근성을 높이는 것은 더 넓은 관객에게 다가갈 수 있는 방법이 될 수 있습니다.

텍스트 크기

플레이어는 작은 텍스트를 읽기 어려워할 수 있습니다. 시각 장애인을 시뮬레이션하기 위해 흐림 효과가 적용된 다음의 게임 내 상점 메뉴를 비교해보세요.

작은 글자 레이블의 크기를 키우면 대부분의 플레이어가 더 잘 볼 수 있습니다.

색상 대비

플레이어는 밝은 배경에 밝은 텍스트나 어두운 배경에 어두운 텍스트를 읽기 어려워할 수 있습니다. 접근성을 높이기 위해서는 적절한 색상 대비를 갖춘 텍스트와 배경 색상을 선택하는 것이 좋습니다.

색상 비의존성

전 세계 인구의 5% 이상이 어떤 형태의 색맹을 가지고 있습니다. 누군가가 오직 흑백으로만 보는 것은 드물지만, 회색조로 게임을 보는 것을 상상해 보세요:

이미지를 색상과 함께 다른 기호를 사용하도록 수정함으로써, 더 많은 플레이어가 게임 내에서 다른 상황에서 차이를 인식할 수 있습니다:

소리 비의존성

사운드는 몰입감 있는 게임에 훌륭한 추가 요소이지만, 청각 장애 플레이어나 소리를 끄고 있는 사람은 오직 사운드로만 전달되는 게임 내 이벤트에 혼란스러워할 수 있습니다.

전화벨이 소리로만 신호되는 다음 장면을 고려해보세요. 그리고 소리 및 시각적 도움이 함께 신호되는 장면을 고려해보세요.

플레이어 선호 설정

Roblox 및 게임 내 설정 메뉴에서 플레이어가 사용할 수 있는 다양한 시각적 설정이 제공됩니다. 여기에는 선호 투명도, 선호 텍스트 크기, 감소된 모션이 포함됩니다. 최적의 접근성을 위해, 귀하의 사용자 인터페이스는 이를 수용해야 합니다.

선호 투명도

배경 투명도 설정은 GuiService.PreferredTransparency 속성에 매핑됩니다. 값이 1이면 사용자가 기본 배경 투명도를 선호하는 것이고, 값이 0이면 사용자가 가독성과 대비를 높이기 위해 완전히 불투명한(비투명) 배경 투명도를 선호하는 것입니다.

UI 요소의 BackgroundTransparency에 PreferredTransparency를 곱하는 것이 이 설정을 사용하는 권장 방법입니다. PreferredTransparency가 0에 가까워질수록 배경은 더 불투명해집니다.

태깅 시스템을 사용하여 TextLabels 또는 Frames와 같은 모든 UI 항목에 TransparentBack 태그를 적용합니다.

다양한 BackgroundTransparency 수준을 가진 네 개의 TextLabel 요소

다음 코드를 LocalScript에 붙여넣습니다. StarterPlayerScripts 내에 위치시킵니다.

선호 투명도에 대한 동적 조정
local GuiService = game:GetService("GuiService")
local CollectionService = game:GetService("CollectionService")

local TAG = "TransparentBack"

local transparentBackObjects = {}

local function onInstanceAdded(object)
	if object.BackgroundTransparency then
		local defaultTransparency = object.BackgroundTransparency
		transparentBackObjects[object] = defaultTransparency
		object.BackgroundTransparency = defaultTransparency * GuiService.PreferredTransparency
	end
end

local function onInstanceRemoved(object)
	transparentBackObjects[object] = nil
end

-- 초기 태그된 인스턴스 저장
for _, object in CollectionService:GetTagged(TAG) do
	onInstanceAdded(object)
end

-- 태그된 인스턴스가 추가되거나 제거되었을 때 감지
CollectionService:GetInstanceAddedSignal(TAG):Connect(onInstanceAdded)
CollectionService:GetInstanceRemovedSignal(TAG):Connect(onInstanceRemoved)

-- 게임 내 설정이 변경되면 태그된 인스턴스 조정
GuiService:GetPropertyChangedSignal("PreferredTransparency"):Connect(function()
	for object, defaultTransparency in transparentBackObjects do
		object.BackgroundTransparency = defaultTransparency * GuiService.PreferredTransparency
	end
end)

게임을 테스트 플레이하고 설정 메뉴를 열어 배경 투명도를 조정합니다. 태그가 지정된 UI 요소는 기본 BackgroundTransparency와 완전 불투명으로 업데이트되어야 합니다.

선호 텍스트 크기

텍스트 크기 설정은 GuiService.PreferredTextSize 속성에 매핑되며 기본값은 Medium입니다. 플레이어는 엔진의 글꼴 렌더링 파이프라인을 통해 텍스트 크기를 Large, Larger, 또는 Largest로 늘릴 수 있습니다.

UI 요소와 작업할 때 다음 동작을 유의하세요:

UITextSizeConstraint를 통해 최소 및/또는 최대 크기로 제약된 텍스트는 사용자의 텍스트 크기 설정과 관계없이 설정된 MinTextSize/MaxTextSize 이하로 줄어들거나 늘어나지 않습니다.
TextScaled가 TextLabel 또는 TextButton에 대해 활성화되면, 요소의 텍스트는 PreferredTextSize 값에 따라 확대되지 않습니다.
AutomaticSize가 활성화된 UI 요소는 PreferredTextSize가 줄어들거나 늘어날 때 함께 줄어들거나 커집니다 (요소 경계가 크기가 조정된 텍스트에 맞추어 변경됩니다).
TextWrapped가 활성화된 TextLabel 또는 TextButton의 경우, 요소의 텍스트는 PreferredTextSize가 증가할 때 추가 줄로 감싸집니다.
TextService:GetTextSize() 및 TextService:GetTextBoundsAsync()가 반환하는 결과는 PreferredTextSize와 관련된 변경 사항을 존중합니다.

감소된 모션

모션 감소 토글은 GuiService.ReducedMotionEnabled 속성에 매핑됩니다. true 값은 사용자가 UI 애니메이션/트윈에서 모션 효과를 줄이거나 완전히 제거하기를 원함을 나타냅니다.

UI 트윈에서 모션을 제거하는 기본 방법은 ReducedMotionEnabled가 true일 때 Time 매개변수를 0으로 설정하여 UI 객체가 즉시 목표로 이동하게 만드는 것입니다.

감소된 모션을 위한 UI 트윈 목표로 스냅하기
local GuiService = game:GetService("GuiService")
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local player = Players.LocalPlayer
local playerGui = player.PlayerGui
local menuUI = playerGui:WaitForChild("MenuUI")

-- 감소된 모션이 활성화되지 않은 경우 0.75초의 트윈 시간을 사용합니다.
local TWEEN_TIME = if GuiService.ReducedMotionEnabled then 0 else 0.75
local tweenInfo = TweenInfo.new(TWEEN_TIME, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)

local tween = TweenService:Create(menuUI.SettingsFrame, tweenInfo, {Position = UDim2.fromScale(0.5, 0.5)})

tween:Play()

즉각적인 스냅 대신, ReducedMotionEnabled를 더 명확한 true/false 로직으로 처리할 수 있습니다. 예를 들어, 다음의 LocalScript는 기본적으로 모션 트윈을 사용하지만, 감소된 모션을 활성화한 플레이어에게는 포지션 이동 없이 더 우아한 전환인 페이드 인으로 전환됩니다.

감소된 모션을 위한 페이드 트윈으로 대체하기
local GuiService = game:GetService("GuiService")
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local player = Players.LocalPlayer
local playerGui = player.PlayerGui
local menuUI = playerGui:WaitForChild("MenuUI")

-- 모든 자식을 균일하게 트윈하기 위한 캔버스 그룹을 생성합니다.
local canvasGroup = Instance.new("CanvasGroup")
canvasGroup.Size = UDim2.fromScale(1, 1)
canvasGroup.BackgroundTransparency = 1
canvasGroup.Parent = menuUI

-- 캔버스 그룹에 자식 추가
menuUI.SettingsFrame.Parent = canvasGroup

local tweenInfo = TweenInfo.new(0.75, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)
local tween

-- 감소된 모션의 경우 페이드 트윈을 사용하거나 그렇지 않으면 모션 트윈을 사용합니다.
if GuiService.ReducedMotionEnabled then
	-- 캔버스 그룹을 완전히 투명하게 설정 (보이지 않음)
	canvasGroup.GroupTransparency = 1
	-- 캔버스 그룹을 페이드 인합니다.
	tween = TweenService:Create(canvasGroup, tweenInfo, {GroupTransparency = 0})
else
	-- 캔버스 그룹을 화면 밖으로 설정
	canvasGroup.Position = UDim2.fromScale(0, -1)
	-- 캔버스 그룹을 화면 안으로 이동
	tween = TweenService:Create(canvasGroup, tweenInfo, {Position = UDim2.fromScale(0, 0)})
end

tween:Play()

볼륨 조절

같은 시간에 재생되는 여러 소리는 압도적이거나 주의가 분산되거나 구별하기 어려울 수 있습니다. 효과음, 음악 및 대화와 같은 다양한 "오디오 그룹"에 대한 볼륨 조절 기능을 제공하면 사용자가 자신의 게임을 맞춤 설정하고 필요한 부분에 집중할 수 있도록 도와줍니다.

사용자가 음악과 효과음의 볼륨을 개별적으로 조정할 수 있는 매우 시끄러운 게임의 예를 고려해 보세요.