📚 대형 화면용으로 디자인하기
태블릿이나 폴더블과 같은 대형 화면용으로 디자인할 때는 사용자의 인체공학과 사용자의 손가락이 화면에 근접한 정도를 고려해야 합니다. 모바일 기기에서는 사용자의 손가락이 화면의 대부분에 쉽게 닿을 수 있으므로 , 탐색 요소와 같은 상호작용 요소의 위치가 그다지 중요하지 않습니다. 그러나 대형 화면에서는 중요한 상호작용 요소를 화면 중앙에 배치하면 손가락으로 닿기가 어려울 수 있습니다.
📚 다양한 화면 크기에 맞게 레이아웃 조정
적응형 앱을 만들려면 화면 크기에 따라 레이아웃이 변경되도록 해야 합니다. 레이아웃 변경이 이루어지는 측정 지점을 중단점이라고 합니다.
✏️ 창 크기 클래스 사용하기
Compose에 도입된 WindowSizeClass API를 사용하면 Material Design 중단점 구현이 간단해집니다.
창 크기 클래스는 너비와 높이에 대해 소형, 중형, 대형의 세 가지 크기 카테고리를 도입합니다.
Bottom Navigation View크기조절 )
테블릿의 경우 화면이 너무 커 사용자가 Bottom Navigation을 클릭하기 쉽지 않으므로 반응형 navigaton을 제공합니다.
-
navigation rail : Material Design의 또 다른 navagation 구성요소로, 앱에서 기본 도착 페이지를 위한 소형 탐색 옵션에 액세스할 수 있도록 지원합니다.
-
persistent navigation drawer : Material Design에 의해 생성되는 또 다른 옵션으로, 대형 화면을 위한 인체 공학적 액세스를 제공합니다.
1) calculateWindowSizeClass 패키지 가져옵니다.
...
import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
...
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ReplyTheme {
val windowSize = calculateWindowSizeClass(this)
ReplyApp()
...2) 윈도우 크기에 따라 표시할 화면을 다르게 설정해줍니다.
when (windowSize) {
WindowWidthSizeClass.Compact -> {
}
WindowWidthSizeClass.Medium -> {
}
WindowWidthSizeClass.Expanded -> {
}
else -> {
}📚 크기 조절 가능한 에뮬레이터로 앱 확인하기
다양한 폼 팩터를 가진 사용자들이 불편함 없이 앱을 사용하기 위해선 개발 초기부터 다양한 폼 팩터에서 앱 테스트를 진행해야 합니다.
다양한 화면 크기의 여러 에뮬레이터를 사용하여 앱을 테스트할 수 있습니다. 하지만 크기별로 에뮬레이터를 다운받아 하나씩 실행하면 시간도 오래걸리고 번거로울 것입니다.
이러한 문제를 해결하기 위해 Android 스튜디오에는 이러한 시나리오를 테스트할 수 있도록 크기 조절 가능한 에뮬레이터가 도입되었습니다.
✏️ 크기 조절 에뮬레이터 사용법
- Android 스튜디오에서 Tools > Device Manager를 선택합니다.
- Device Manager에서 Create device를 클릭합니다.
- Phone 카테고리와 Resizable (Experimental) 기기를 선택합니다.
- Next를 클릭합니다.
- API Level 33을 선택합니다
- Next를 클릭합니다.
- 새 Android Virtual Device의 이름을 지정합니다.
- Finish를 클릭합니다.
이러한 과정을 통해 에뮬레이터를 설치한다면 이 에뮬레이터에서 일반핸드폰, 폴더블폰, 테블릿, 데스크탑과 같은 장치에서 화면이 어떻게 출력되는지 쉽게 볼 수 있습니다.
