Android 앱이 있고 시각적 스타일을 유지하려면 Android XR에서 해당 디자인 언어를 유지하면 됩니다. 새 앱 또는 디자인 변경의 경우 UI 크기, 접근성, 서체, 색 구성표, 구성요소에 관한 Material Design 가이드라인을 따르는 것이 좋습니다.
2D 모바일 또는 대형 화면 Android 앱은 추가 개발 작업이 거의 없이 전체 공간 기능을 활용할 수 있습니다. XR 효과가 큰 경우 패널을 공간화하고 공간 UI를 만드는 것이 좋습니다. 몰입도 높은 사용자 여정을 위해 3D 모델 및 환경을 추가해 보세요.
Unity, Open XR 또는 WebXR 앱을 보유하고 있거나 빌드하는 경우 원하는 디자인 언어를 자유롭게 따를 수 있습니다. Material Design에서 제공하는 디자인 권장사항을 사용하면 색상, 간격, 크기, 버튼, 서체를 적용하는 데 도움이 됩니다.
앱의 시각적 디자인을 테스트하는 방법
편안하고 접근하기 쉬운 사용자 환경을 보장하려면 앱의 시각적 디자인을 테스트하는 것이 중요합니다. 다음은 다양한 XR 플랫폼과 환경에서 테스트하는 방법입니다.
에뮬레이터, 시뮬레이터, 실제 기기 사용
- Android 앱을 개발하는 경우 Android XR 에뮬레이터에서 앱을 테스트하세요. 이렇게 하면 잠재적인 문제를 파악하고 실제 기기 없이 빠르게 반복할 수 있습니다.
시각적 디자인 테스트 체크리스트
- 움직임이나 애니메이션이 멀미를 유발하지 않는지 테스트합니다. 원활한 전환, 안정적인 프레임 속도, 예측 가능한 모션을 확인합니다.
- 실제 환경에서 패스스루를 사용해 가상 요소가 실제 주변 환경과 조화를 이루는지 확인하세요.
- 밝은 환경과 어두운 환경을 비롯한 다양한 조명 조건에서 앱을 테스트합니다.
- 다양한 거리와 각도에서 텍스트 가독성을 확인합니다.
- 접근성과 편안함을 위해 색 구성표를 평가합니다.
사용자 의견 수집하기
사용자 테스트를 실시하여 개선이 필요한 부분을 파악합니다. 포괄적인 관점을 위해 다양한 수준의 XR 경험과 시각적 능력을 가진 사용자를 포함합니다.
Android XR의 타겟
XR 앱에서 타겟은 사용자가 상호작용하는 탭 가능 영역 또는 포인터 가능 영역입니다. 타겟이 클수록 정확도, 편안함, 사용성이 향상됩니다. 앱을 액세스 가능하게 만들려면 Material Design 타겟 가이드라인을 따르세요. Android, Unity, OpenXR, WebXR 앱에서 작동합니다. 앱이 이미 Material Design 권장사항을 준수하는 경우 대상 크기가 최소값을 충족하지만 56dp가 최적입니다.
모든 양방향 UI 요소는 다음을 고려해야 합니다.
- 권장 타겟: 56dp x 56dp 이상
- 시각적 어포던스: 48dp x 48dp 이상
- 타겟과 시각적 어포던스 간의 오프셋: 4dp
- 정확한 상호작용을 위해 서로 다른 UI 요소의 포인터 타겟이 겹쳐서는 안 됩니다.
마우스 오버 상태를 추가해야 합니다.
접근성을 높이려면 대화형 구성요소의 기본 상호작용 상태 외에 마우스 오버 및 포커스 상태를 통합하세요. 마우스 오버 상태는 모든 사용자에게 유용할 수 있으며, 특히 포인터 입력을 사용하여 UI 요소를 선택하는 사용자에게 중요합니다.
호버 상태는 시스템 내에서 시선 추적 기능을 사용 설정하는 데 중요한 역할을 합니다. 그러나 시선 추적이 사용 설정된 경우 애플리케이션은 사용자 개인 정보를 보호하고 데이터 공유를 방지하기 위해 마우스 오버 상태에 액세스할 수 없습니다. 시스템은 상호작용할 수 있는 UI 구성요소를 전달하기 위해 사용자에게만 표시되는 강조 표시 상태를 그립니다.
타겟 간 거리
Material Design에서는 버튼을 포함한 타겟 간에 최소 8dp의 공간을 두는 것이 좋습니다. 이렇게 하면 사용자가 상호작용 요소를 쉽게 구분하고 의도치 않게 선택하는 것을 방지할 수 있습니다.
버튼 사이의 구체적인 거리는 컨텍스트와 크기에 따라 다를 수 있습니다. 고려해야 할 몇 가지 요소는 다음과 같습니다.
- 버튼 크기: 버튼이 클수록 시각적 선명도를 유지하기 위해 버튼 간에 더 많은 공간이 필요할 수 있습니다.
- 버튼 그룹화: 기능적으로 밀접하게 관련된 버튼은 더 가까이 그룹화할 수 있지만 관련 없는 버튼은 더 분리해야 합니다.
- 레이아웃: 화면의 전체 레이아웃이 버튼 간 간격에 영향을 줄 수 있습니다. 예를 들어 툴바의 버튼은 대화상자의 버튼보다 간격이 좁을 수 있습니다.
패널 크기 및 크기 조정
Android XR은 다양한 사용자가 앱을 편안하고 읽기 쉽게 액세스할 수 있도록 설계되었습니다. 최적의 환경을 위해 Android XR은 0.868 dp-to-dmm을 사용합니다.
패널을 사용하는 경우 XR 앱이 실제 화면보다 사용자와 더 멀리 떨어져 있을 가능성이 큽니다. 사용자가 헤드셋을 착용한 상태라고 가정해 보겠습니다. 최적의 편안함을 위해 사용자가 상호작용하기 위해 머리를 움직이지 않아도 되도록 주 콘텐츠를 41° 시야에 배치합니다.
권장사항
- 패널의 모서리는 32dp 둥글게 처리됩니다. 이 기본값을 재정의할 수 있습니다.
패널 깊이 동작
- Home Space: 앱이 사용자로부터 1.75m 떨어진 위치에서 실행되며 개발자는 이를 재정의할 수 없습니다.
- 전체 스페이스: 기본적으로 앱은 홈 스페이스에 있던 위치에서 실행됩니다. 공간 로직을 사용하여 사용자의 위치를 기반으로 패널을 배치할 수 있지만, 시작 거리는 1.75m를 사용하는 것이 좋습니다.
앱이 사용자로부터 1.75m 떨어진 경우:
- 1024dp는 1556.24mm로 인식됩니다.
- 720dp는 1,093.66mm로 인식됩니다.
- 실제 현실의 1미터 = XR의 1미터
버튼 및 아이콘
기존 Android 앱이 있는 경우 Android XR용 특수 구성요소를 설계할 필요가 없습니다. 버튼 및 아이콘에 관한 Material Design 가이드라인을 따릅니다. Unity, OpenXR 또는 WebXR 앱이 있는 경우 버튼과 아이콘을 있는 그대로 유지하거나 Material Design에서 아이디어를 얻을 수 있습니다.
직접 버튼이나 아이콘을 만들기로 한 경우 간단한 도형, 선명한 선, 기본 도형, 제한된 색상 팔레트를 선택하세요. 지나치게 세부적인 디자인은 피하세요. 다양한 해상도와 시청 거리에서 확장 가능하고 읽기 쉬워야 합니다. 접근성의 경우 구성요소와 배경 간에 충분한 대비를 유지하고 스크린 리더 또는 기타 보조 기술을 사용하는 사용자를 위해 텍스트 설명이나 도움말을 제공합니다.
색상
Android XR은 머티리얼 디자인의 색상 시스템을 준수하여 일관되고 시각적으로 매력적인 인터페이스를 제공합니다. XR에 맞는 몰입도 높은 시각적 스타일을 만들려면 충분한 대비를 사용하여 디자인하고, 균형 잡힌 팔레트를 선택하고, 색맹인 사용자가 이용할 수 있는 색상을 사용하고, 눈의 피로나 방향 감각 상실을 유발할 수 있는 불편한 조합을 피하세요.
XR의 어두운 테마 및 밝은 테마
Android 모바일 앱에서와 마찬가지로 어두운 테마와 밝은 테마를 사용하세요. 사용자는 Android XR에서 어두운 테마와 밝은 테마 간에 전환하여 개인 환경설정에 가장 적합한 시각적 스타일을 선택할 수 있습니다.
Material Design 색 구성표 자세히 알아보기
XR 서체
글꼴 가독성은 XR에서 편안한 사용자 환경을 제공하는 데 중요합니다. 가독성을 높이려면 글꼴 크기가 14dp 이상이고 글꼴 두께가 일반 이상인 typescale 옵션을 사용하는 것이 좋습니다.
사용하기 쉬운 앱을 만들려면 Material Design의 서체 가이드를 따르세요.
XR의 서체 권장사항
- 가변 거리에 맞는 크기: 사용자는 다양한 위치에서 이동하면서 텍스트를 보게 됩니다. 글꼴 크기가 멀리서도 읽을 수 있을 만큼 커야 합니다.
- 사용자의 자연스러운 시야에 텍스트 배치: 이렇게 하면 과도한 머리 움직임과 목의 긴장을 방지할 수 있습니다.
- 깊이 및 크기 고려: 깊이 신호와 크기를 사용하여 3D 공간에 계층 구조를 만듭니다.
- 사용자의 배경에 비해 텍스트가 읽기 쉬워야 함: 글꼴이 더 두꺼울수록 대비가 더 높아집니다. 환경의 색상, 조명, 복잡도에 따라 조정합니다.
- 조정 가능한 서체 사용: 패널이 너무 가깝거나 너무 멀거나 사용자의 시야각이 불편할 수 있습니다.
- 움직이는 물체에 텍스트 첨부 제한: 멀미를 유발할 수 있습니다.
XR의 접근성 있는 서체
- 가독성을 위해 글꼴 선택: 작은 크기와 먼 거리에서도 선명한 글꼴을 우선 선택합니다.
- 첫 글자를 대문자로 표기: 첫 글자를 대문자로 표기하면 대문자 텍스트보다 읽기 쉽습니다.
- 줄 길이 제한: 가독성을 높이기 위해 줄 길이를 짧게 유지합니다.
- 접근 가능한 색상 선택: 색각 이상이 있는 사용자가 읽을 수 있는 색상 조합을 사용합니다.
- 과도한 텍스트 사용 피하기: 텍스트에 여유 공간을 충분히 둡니다.
- 텍스트 크기 조정 허용: 사용자가 개별적인 필요에 따라 텍스트 크기를 조정할 수 있습니다.