다음 디자인 권장사항은 다양한 기기와 플랫폼에서 YouTube로 게임을 플레이하는 사용자에게 최적의 환경을 제공하는 데 도움이 됩니다.
운영체제 구성요소를 제외하고 Playables 환경은 주로 다음 세 가지 구성요소로 구성됩니다.
- 게임 룸 작업
- 게임 캔버스
- 메뉴 및 대화상자
이러한 게임 디자인 권장사항은 게임 캔버스용 게임을 빌드하는 방법을 권장합니다.
게임 크기 조절
이러한 사례를 고려하여 게임이 다양한 화면 크기와 방향에 적절하게 적응하는지 확인하세요.
게임의 크기를 조절하고 UI를 캔버스의 크기와 가로세로 비율에 맞게 조정합니다.
게임이 게임 캔버스 크기와 가로세로 비율에 완전히 반응할 수 없는 경우 필러박싱 또는 레터박싱을 사용합니다.
스크롤바가 트리거되지 않도록 합니다. 스크롤바는 게임플레이와 일반 탐색 모두에 부정적인 영향을 미칩니다. 캔버스 내에서 게임이 스크롤되지 않도록 캔버스를 채웁니다. 스크롤바는 의도적인 스크롤에 적합합니다. 예를 들어 게임 UI 내에서 긴 세로 목록을 스크롤할 때입니다. 게임이 뷰포트에 완전히 반응하는 것이 좋습니다.
게임 확장
여러 화면 해상도에서 흐리거나, 모자이크 처리되거나, 늘어지지 않고 명확하게 렌더링됩니다.
해상도가 낮은 화면 (예: 360x800 모바일 기기)과 해상도가 높은 화면 (예: 3840x2560 데스크톱 모니터)에 렌더링할 때 게임 UI (텍스트, 아이콘)가 적절하게 조정되는지 확인합니다.
큰 화면으로 확대될 때 흐리게 표시되는 저해상도 래스터화된 애셋을 사용하지 마세요.
서체
여러 기기 및 화면 크기에서 읽을 수 있어야 합니다.
버튼, 메뉴, 말풍선과 같은 게임 내에 표시되는 텍스트는 다양한 기기와 화면 크기에서 읽을 수 있어야 합니다. 텍스트를 자동으로 조정하고 적응시키거나 사용자에게 글꼴 크기를 조정하는 설정을 제공하면 됩니다.
텍스트가 18pt보다 작거나 텍스트가 굵고 14pt보다 작으면 색상 대비율을 4.5:1 이상으로 설정하세요.
다른 텍스트의 경우에는 모두 색상 대비율을 3:1 이상으로 설정합니다.
일반적인 내용은 WCAG2.1을 참고하세요.
 |
 |
| 가독성을 위해 충분한 두께와 대비가 있는 큰 글꼴 크기를 사용합니다. 이 예에서 대비율은 4.48:1입니다. | 작은 글꼴 크기와 대비가 낮은 색상은 피하세요. 이 예에서 대비율은 3.07:1입니다. |
상호작용
이 섹션에서는 사용자 상호작용 및 관련 요소에 관한 권장사항을 다룹니다.
터치 영역
터치 대상을 더 쉽게 상호작용할 수 있을 만큼 크게 만드세요.
더 쉽게 상호작용할 수 있도록 터치 영역이 48x48dp 이상이고 영역 간 공간이 8dp 이상인지 확인합니다 (Material Design 가이드라인 참고).
이 예에서 시각적으로 렌더링된 버튼은 24dp이고, 보이지 않는 터치 영역에는 아이콘 주변에 12dp가 포함되어 48x48dp 터치 영역이 됩니다.
터치 영역 크기를 늘리기 위해 아이콘과 버튼 주변에 패딩을 추가합니다.
버튼
각 버튼 상태에 고유한 스타일을 사용합니다.
- 사용 설정됨
- 사용 중지됨
- 마우스 오버 (터치가 아닌 입력 기기용)
- 집중력이 높아진
- 누름
계층 구조별로 버튼을 구분하는 것도 좋습니다. 예를 들어 시작 메뉴의 기본 작업 버튼과 보조 작업 버튼이 있습니다 (Google Material 2 디자인 가이드라인의 버튼 참고).
각 버튼 상태를 구분하는 고유한 스타일
키보드 입력
기기와 사용자 간 게임의 접근성을 높이려면 터치 및 마우스 입력 외에도 모든 게임플레이 컨트롤과 화면 탐색에 키보드 입력을 지원하세요.
키보드 입력을 지원하는 게임의 경우 사용자가 Esc 키를 사용하여 게임 내 메뉴와 대화상자를 닫을 수 있도록 허용합니다. 이는 시각적 닫기 버튼 (예: 상단 모서리의 X 아이콘)이 있는 것 외에 추가로 적용됩니다. 모달 또는 대화상자의 일반적인 예로는 설정 메뉴, 일시중지 메뉴, 오류 메시지, 도움말 정보 팝업이 있습니다.
Esc 키의 길게 누르기에 작업을 매핑하지 마세요. 데스크톱 웹브라우저에서 전체 화면 모드를 종료하는 데 사용되기 때문입니다.
키 누름 리스너가 등록된 게임의 경우 Esc 키 이벤트와 함께 preventDefault()를 사용하지 마세요. Safari에서 전체 화면으로 전환하면 전체 화면을 종료하지 않고 게임에서 키 누름 이벤트를 사용합니다.
햅틱
적절한 경우 햅틱 반응 (진동)을 사용하여 게임을 더 재미있고 몰입감 있게 만드는 것이 좋습니다.
주요 경기 순간
이 섹션에서는 플레이어에게 훌륭한 경험을 제공하는 게임의 주요 순간을 다룹니다.
튜토리얼
신규 플레이어를 위해 간단한 튜토리얼이나 온보딩 레벨을 포함하세요.
온보딩을 통해 사용자는 게임을 진행하고 즐기기 위한 기본적인 게임플레이와 게임 필수 요소를 배울 수 있습니다.
플레이어블은 사용자가 빠르게 시작할 수 있도록 설계되었으므로 온보딩을 최대한 간소화하는 것이 좋습니다. 모든 게임에 튜토리얼이 필요한 것은 아니지만 대부분의 게임은 온보딩을 통해 이점을 얻을 수 있습니다. 플레이어가 게임을 성공적으로 플레이하고 즐기기 위해 알아야 하는 주요 메커니즘, 규칙, 기술을 고려하세요.
튜토리얼은 다음 형식일 수 있습니다.
- 게임 시작 시 표시되는 화면 세트 (또는 게임 전반에 걸쳐 적절한 경우 상황에 맞게 표시)
- 사용자가 플레이하는 실제 튜토리얼 레벨
일시중지
사용자에게 게임 상태를 명확하게 전달합니다.
게임이 일시중지된 시점과 사용자가 게임을 재개할 수 있는 방법을 사용자에게 명확하게 전달해야 합니다. 사용자가 게임이 멈추거나 비정상 종료되었다고 생각하지 않도록 합니다.
게임 상태를 '일시중지됨'으로 명확하게 라벨을 지정하고 게임을 재개하는 명확한 작업 (버튼)을 제공합니다.
경기 종료
사용자에게 마지막 레벨을 완료했거나 게임을 완료했다고 알립니다.
게임에 명확한 종료가 있는 경우 (예: 레벨 수가 제한됨) 사용자에게 이 사실을 명확하게 전달합니다. 이렇게 하면 사용자가 게임이 깨졌거나 멈췄다고 생각하지 않습니다. 게임이 플레이어의 게임 완료를 축하하는 것이 좋습니다.
오디오
게임에는 효과, 음성, 배경 음악을 위한 별도의 볼륨 컨트롤이 포함될 수 있습니다. 컨트롤은 볼륨을 조정하는 슬라이더 또는 각 슬라이더의 음소거 전환 버튼으로 구성될 수 있습니다.
접근성
디자인의 접근성을 높이면 다양한 능력을 가진 사용자가 게임을 플레이하고 즐길 수 있습니다.
웹 및 소프트웨어 디자인과 달리 게임 디자인에는 업계 표준 접근성 가이드라인이 없습니다. 포용적인 게임 디자인에 관한 추가 가이드라인이 포함된 유용한 리소스는 게임 접근성 가이드라인을 참고하세요. 이 가이드라인을 게임 디자인에 적용하는 방법을 고려하는 것이 좋습니다.