적응형 디자인은 Roblox 게임이 다양한 화면 크기, 방향 및 입력 유형에 걸쳐 보기 좋고 원활하게 작동하도록 보장합니다. 모바일, 데스크탑 및 콘솔과 같은 전통적인 장치 범주를 넘어 오늘날의 장치는 훨씬 더 동적인 기능을 갖추고 있어 서로 다른 입력 및 디스플레이 사이의 원활한 전환이 가능합니다. 다양한 방향(가로 및 세로), 여러 입력 유형(터치, 게임패드, 마우스 및 키보드), 여러 디스플레이 크기(기본 디스플레이 및 대형 TV로 확장되는)를 지원하는 태블릿을 상상해보세요.
이 가이드라인은 다양한 장치와 입력 유형에 지능적으로 적응하여 광범위한 청중에게 도달할 수 있는 최상의 게임을 제공하는 데 도움이 됩니다. 이러한 가이드라인 구현을 지원하는 워크플로 및 API에 대한 자세한 내용은 크로스 플랫폼 개발 가이드를 참조하세요.
다음 적응형 디자인 개념을 보여주는 미리 제작된 게임을 탐색하려면 인터랙티비티 쇼케이스를 확인하세요.
핵심 원칙
모든 게임은 독특하지만 몇 가지 핵심 원칙을 따르면 모든 플레이어와 모든 장치에 직관적이고 다듬어진 게임을 제공하는 데 도움이 됩니다.
- 입력 유동성 — UI가 게임패드, 터치, 키보드 및 VR 컨트롤러와 같은 다양한 입력 유형과 함께 작동하는지 확인하세요. 여기에는 입력 유형에 따라 UI 레이아웃을 변경하고 보조 힌트를 제공하는 것이 포함됩니다.
- 반응형 레이아웃 — 다양한 화면 크기와 방향에 자동으로 조정되는 UI 레이아웃을 설계하세요.
- 동적 크기 조정 — 다양한 화면 크기에 맞게 UI 요소의 크기를 조정합니다.
- 가독성과 시각적 명확성 — 텍스트와 버튼을 포함한 모든 UI 구성 요소가 쉽게 읽을 수 있고 시각적으로 명확한지 확인하세요.
입력 유동성
게임패드, 마우스/키보드, 터치 및 VR 등 다양한 입력 장치에서 게임이 자연스럽게 느껴지도록 하세요.
- 다양한 입력을 위한 제어 및 단축키 설계 — 게임의 모든 동작이 게임패드 버튼/D-패드, 키보드 단축키 및 터치를 사용하여 트리거될 수 있도록 하세요. 제어는 방향 패드나 스틱 탐색을 위해 시각적이고 기능적으로 초점을 맞출 수 있어야 합니다. 각 입력 모드를 테스트하여 게임의 핵심 플레이, 메뉴 및 UI가 장치에 관계없이 접근 가능하고 자연스럽도록 합니다.
- 입력 유형별 시각적 피드백 제공 — 활성 입력 방법을 반영하도록 UI 레이블, 프롬프트 및 툴팁을 업데이트하세요. 예를 들어 게임패드에서는 A 키를 누르세요, 터치에서는 핀치, 키보드에서는 ShiftA를 표시합니다. 각 플랫폼 플레이어에게 익숙한 아이콘과 언어를 사용하세요.
반응형 레이아웃
게임 UI의 레이아웃은 다양한 화면 크기와 방향에 적응해야 합니다. 큰 컴퓨터 모니터에서는 버튼을 한 번에 많이 표시할 수 있는 공간이 있습니다. 하지만 작은 휴대폰 화면에서는 모든 버튼이 비좁아 보이고 지저분하게 보일 것입니다.
- 화면 크기와 방향에 맞게 레이아웃 조정 — UI가 적절하게 재배치되거나 응축되도록 반응형 패턴을 사용하세요. 예를 들어, 작은 화면에서는 덜 중요한 버튼을 접이식 메뉴(버거 메뉴 버튼)로 이동하고, 데스크탑에서는 이를 전체적으로 표시합니다. 게임 UI는 해당 기능을 지원한다면 가로 및 세로 방향 모두에 우아하게 적응해야 합니다.
- 부모 크기에 반응하는 레이아웃 구성 요소 구현 — 부모 컨테이너에 따라 크기나 위치가 조정되는 UI 패널과 위젯을 만드세요. 예를 들어, 측면 패널이 좁은 화면에서는 축소되지만 넓은 화면에서는 확장되는 분할 보기 레이아웃을 사용합니다.
동적 크기 조정
이것은 UI 요소의 크기에 관한 것이며, 단지 위치에 관한 것이 아닙니다. UI는 화면과 함께 확대 또는 축소되어 모든 것이 정확한 크기를 유지하고 항상 조작하기 쉬워야 합니다.
- 콘텐츠 기반 크기 조정 및 자동 줄 바꿈 지원 — 자동 크기 조정 동작을 구현하세요: 텍스트 상자가 콘텐츠에 따라 자라거나 줄어들 수 있도록 허용하고 화면 크기가 변경될 때 레이블이 넘치거나 읽기 어렵게 변하지 않도록 자동 줄 바꿈을 지원합니다.
- 접근성 / 사용자 선호도를 노출하고 존중 — UI가 사용자 지정 텍스트나 UI 크기 조정 설정에 반응하도록 하여 이러한 설정이 UI 요소의 크기에 직접 연결되도록 하고, 증가한 접근성 선호도가 항상 더 크고 읽기 쉬운 UI로 변환되도록 합니다.
가독성 및 시각적 명확성
플레이어가 작은 휴대폰 화면이나 먼 거리에 있는 큰 TV에서 실제로 텍스트를 읽을 수 있습니까? 3D 세계의 배경과 버튼이 쉽게 보이도록 되어 있습니까?
- 작은 화면에 맞는 글꼴 크기 및 스타일 선택 — 항상 모바일 장치에서 읽을 수 있는 글꼴 크기를 선택하고, 데스크탑뿐만 아니라 실제 장치에서 테스트하여 텍스트가 예상하는 가장 작은 크기에서 가독성이 있는지 확인하세요. 지나치게 장식적이거나 얇은 글꼴은 피하는 것이 좋습니다.
- 높은 대비 및 명확한 시각적 계층 구조 보장 — 다양한 게임 내 조명 조건에서 읽을 수 있도록 텍스트와 배경에 충분한 대비를 제공하는 색상을 사용하세요. 강력한 시각적 계층 구조를 사용하고 주요 작업과 레이블이 크기, 색상 또는 위치를 통해 돋보이도록 하세요.
마무리 생각
적응성은 플레이어가 있는 곳에서 그들을 만나는 것입니다. 손에, 책상 위에, 또는 큰 화면에서 모두 말이죠. 이러한 가이드라인으로 구축된 Roblox 제작자는 의미 있고 접근 가능하며 재미있는 크로스 플랫폼 게임을 제공합니다. 오늘부터 적응을 시작하고 당신의 창작물이 번창하도록 하세요!