Android를 사용하면 광범위한 기기 화면 크기와 폼 팩터에서 원활하게 실행되는 앱을 개발할 수 있습니다. 이렇게 폭넓은 호환성을 통해 타겟팅하는 모든 기기에 광범위하게 배포 가능한 단일 앱을 설계할 수 있습니다.
하지만 각 화면 구성에서 최상의 환경을 제공하려면 다양한 크기에 맞춰 레이아웃과 기타 UI 구성요소를 최적화해야 합니다. ChromeOS에서 UI를 최적화하면 추가 화면 공간을 충분히 활용하여 새 기능을 제공하거나 새로운 콘텐츠를 표시하고 환경을 향상하여 사용자 참여를 높일 수 있습니다.
대형 화면용 레이아웃
핸드셋용 앱을 개발한 뒤 ChromeOS 및 기타 대형 화면 폼 팩터에서 디자인을 개선하려는 경우 레이아웃과 글꼴, 간격을 약간 수정하는 것으로 시작할 수 있습니다. 7인치 태블릿이나 대형 캔버스를 사용하는 게임의 경우 이러한 조정만으로도 충분할 수 있습니다.
대형 디스플레이의 경우 UI의 일부를 다시 디자인하여 '확대된' UI를 효율적인 여러 창 UI, 간단한 탐색, 추가 콘텐츠로 대체할 수 있습니다. Material Design팀의 Material 연구에서 이러한 디자인의 예를 확인할 수 있습니다. 예를 들어 Reply가 다양한 화면 크기에 맞게 조정되는 방식을 확인하세요.
다음은 몇 가지 제안사항입니다.
- 이러한 대형 화면에 맞춤 레이아웃을 제공합니다. 화면의 최단 길이 또는 사용 가능한 최소 너비와 높이를 사용하면 됩니다.
- ChromeOS와 같은 가로 모드 우선 환경에서 UX와 레이아웃이 어떻게 작동하는지 상상해 보세요. 창 크기에 따라 이러한 방향에서 잘 표시되고 작동하도록 레이아웃을 조정하거나, land 리소스 한정자를 사용하여 특정 가로 레이아웃을 제공합니다. 창 관리 페이지에서 동적 창 크기 조절 및 대형 화면 관련 기타 고려사항을 자세히 알아볼 수 있습니다.
- 앱이 넓게 늘어날 때 하단 탐색 메뉴는 잘 확장되지 않습니다. 탐색을 더 쉽게 액세스할 수 있고 더 많은 옵션을 표시할 수 있는 왼쪽 메뉴로 이동하는 것이 좋습니다. Reply 예시를 보면 잘 알 수 있습니다.
- 최소한 대형 화면에 맞게 글꼴 크기, 여백, 간격 등의 크기를 맞춤설정하여 공간 사용과 콘텐츠 가독성을 개선합니다. ChromeOS 기기나 기타 데스크톱 환경과 같이 사용자가 기기에서 약간 떨어져 있을 때 어떻게 표시되는지 고려하세요.
- 마우스를 사용하거나 태블릿을 들고 있을 때 사용자가 UI 컨트롤에 액세스할 수 있도록 컨트롤의 위치를 조정합니다(예: 중앙에서 멀리 떨어진 옆으로 표시).
- UI 요소의 패딩은 일반적으로 핸드셋보다 ChromeOS 및 기타 대형 화면 기기에서 더 커야 합니다. 여백과 거터는 다양한 화면 크기에 맞게 조정되어야 합니다.
- 텍스트 콘텐츠가 화면 가장자리에 정렬되지 않도록 텍스트 콘텐츠의 여백을 알맞게 조정합니다. 화면 가장자리 근처의 콘텐츠 주위에 최소 16dp 패딩을 사용합니다.
특히 레이아웃이 전체 화면에 '확대되어' 표시되지 않도록 해야 합니다.
- 텍스트 줄이 지나치게 길면 안 됩니다. 줄당 영문 기준 최대 100자로 제한하고, 최상의 결과를 얻으려면 50~75자를 사용하여 최적화합니다.
- 목록과 메뉴는 전체 화면 너비를 사용해서는 안 됩니다.
- 패딩을 사용하여 화면에 표시되는 요소의 너비를 관리하거나 대형 화면 기기용 여러 창 UI로 전환합니다 (다음 섹션 참고).
추가 화면 영역 사용
ChromeOS 기기는 앱에 훨씬 더 많은 화면 공간을 제공합니다. 큰 화면용 앱의 UI를 디자인할 때는 추가 영역을 최대한 활용하세요.
Reply 및 Rally 예에서 앱은 증가된 화면 크기를 사용하는 데 서로 다른 접근 방식을 취합니다. Reply는 더 깔끔한 디자인을 위해 공간을 추가하고, Rally는 스크롤과 탭을 줄이기 위해 더 많은 데이터를 표시합니다.
사용자에게 숨겨져 있을 수 있는 항목과 이를 표시하는 방법을 살펴보는 것이 좋습니다. 항목에 대한 자세한 정보를 표시하거나, 마우스 오른쪽 버튼 클릭 또는 길게 누르기 뒤에 숨겨져 있을 수 있는 메뉴를 표시하거나, 이제 더 커진 왼쪽 탐색 영역을 활용하여 다양한 또는 더 심층적인 탐색 옵션을 표시할 수 있습니다. 이러한 기능은 현재 환경을 완전히 재설계하지 않고도 UX를 개선하고 앱에 데스크톱과 같은 느낌을 줄 수 있는 큰 유용성 이점입니다.
앱에 대한 몇 가지 권장사항은 다음과 같습니다.
- 브랜드는 다양한 화면 크기를 고려할 때 따라야 할 방향을 제시합니다. 우선순위를 정하고 사용자에게 표시할 항목은 존재하는 사용자 여정의 유형과 가장 일반적으로 사용되는 기능에 따라 달라집니다. 영감을 얻으려면 Material Studies를 확인하고 각 제품이 대형 화면에 어떻게 다르게 반응하는지 살펴보세요.
- 반응형 그리드 시스템을 사용하여 앱 디자인이 어떻게 작동해야 하는지, 화면 공간이 넓어질 때 콘텐츠, 탐색, 옵션이 어떻게 이동해야 하는지 생각해 보세요.
- 서로 다른 레이아웃을 사용할 화면 크기를 결정한 다음 적합한 창 크기 버킷 (예: large/xlarge) 또는 최소 창 너비 (예: sw600dp/sw720)에서 서로 다른 레이아웃을 제공합니다. 이러한 레이아웃에 도달할 때 사용자가 있던 전체 컨텍스트는 변경되지 않아야 하며 레이아웃 간에 전환하는 동안 모든 사용자 상태 (스크롤 위치, 작성 중인 텍스트 등)를 유지해야 합니다.
높은 밀도와 더 큰 화면을 위해 디자인된 애셋 사용
앱을 가장 돋보이게 표시하려면 ChromeOS에서 일반적으로 지원하는 범위에서 각 밀도에 맞춰 아이콘과 기타 비트맵 애셋을 제공합니다. 특히 아이콘 가이드라인에 따라 앱 바, 알림, 런처에 맞게 아이콘을 디자인하고 벡터 형식으로 제공하여 앱이 표시되는 다양한 화면에 맞게 적절하게 크기를 조정할 수 있도록 해야 합니다.
Android의 VectorDrawable 및 벡터 애셋에 관한 자세한 내용은 Nick Butcher의 블로그 게시물을 참고하세요.
글꼴 크기 및 터치 영역 조정
ChromeOS 및 고밀도 화면에서 앱을 사용할 수 있도록 타겟팅하는 모든 화면 구성에 관해 UI에서 글꼴 크기와 터치 영역을 조정하세요. 글꼴 크기는 스타일 지정 가능 속성 또는 크기 리소스를 통해 조정할 수 있으며 터치 영역은 앞에서 설명한 레이아웃과 비트맵 드로어블을 통해 조정할 수 있습니다.
다음은 몇 가지 고려사항입니다.
- 텍스트는 큰 화면 크기와 밀도에 비해 과도하게 크거나 작지 않아야 합니다. 라벨은 해당하는 UI 요소에 맞게 크기가 적절해야 하며 라벨과 제목, 기타 요소에 부적절한 줄바꿈이 없어야 합니다.
- 화면 내 요소의 권장 터치 영역 크기는 48dp입니다. 대형 화면 UI에서 일부 조정이 필요할 수도 있습니다. 간격 설정 방법을 자세히 읽고 화면 크기가 변경될 때 터치 영역과 항목 간 간격에 대해 알아보세요. 이러한 권장사항은 최소 접근성 가이드라인도 충족합니다.
-
가능하면 작은 아이콘의 경우
TouchDelegate을 사용하거나 투명한 버튼 내에 아이콘을 가운데 배치하여 터치 가능한 영역을 48dp 이상으로 확대합니다.