다양한 창 크기에 맞춰 디자인하는 방법
구글의 윈도우 크기 클래스 및 사용방법
다양한 창 크기를 갖춘 기기다양한 기기 크기에 따른 레이아웃
기기의 크기와 화면 방향에 따라 레이아웃은 달라져야 합니다. 예를 들어, 뉴스 앱은 모바일 기기에서는 단일 열로 텍스트를 보여주지만, 더 큰 데스크톱 기기에서는 여러 열을 표시할 수 있습니다. 이러한 레이아웃 변화는 기기의 성능과 사용자의 기대를 반영한 것입니다.
본 글에서는 구글이 정의하는 창 크기 클래스와 사용방법을 알아보도록 하겠습니다.
윈도우 크기 클래스
윈도우 크기 클래스는 레이아웃 변경이 필요한 화면 크기를 정의하는 브레이크 포인트입니다. 이 브레이크 포인트는 사용 가능한 공간, 기기 규칙, 인체공학적 요소를 고려하여 설정됩니다.
모든 기기는 머티리얼 디자인에서 정의한 다섯 가지 윈도우 크기 클래스 중 하나에 속합니다. 컴팩트, 미디엄, 익스팬디드, 라지, 엑스트라 라지로 구분되며, Android와 Web에서 사용됩니다. 끊임없이 늘어나는 디스플레이 상태별로 디자인하기보다는 윈도우 크기 클래스에 맞춰 설계하면 다양한 기기에서 레이아웃이 안정적으로 동작합니다.
컴팩트, 미디엄, 익스팬디드 크기의 창소형부터 확장형까지 세 가지 윈도우 크기 클래스는 다음과 같습니다.
Compact (600dp 미만 / 세로 모드의 휴대폰)
Medium (600–839dp / 세로 모드의 태블릿, 펼친 폴더블)
Expanded (840–1199dp / 가로 모드의 휴대폰, 가로 모드의 태블릿, 펼친 폴더블, 데스크톱)
라지, 엑스트라 라지 크기의 창라지와 엑스트라 라지 클래스는 노트북, 데스크톱, 외부 모니터 같은 기기에서 사용됩니다. 이 클래스는 MDC-Android에서 지원되며, Jetpack Compose에서도 곧 지원될 예정입니다.
두 가지 윈도우 크기 클래스는 다음과 같습니다.
Large (1200–1599dp / 데스크톱)
Extra-large (1600dp 이상 / 데스크톱, 울트라 와이드 모니터)
기기가 아닌, 윈도우 크기 클래스에 맞추는 이유
특정 기기가 아닌 윈도우 크기 클래스에 맞춰 디자인해야 하는 이유는 다음과 같습니다.
사용 가능한 윈도우 공간은 멀티 윈도우 모드나 폴더블 기기의 전개와 같은 사용자 행동에 따라 동적으로 달라집니다.
기기는 방향에 따라 서로 다른 윈도우 크기 클래스에 속하게 됩니다.
지금부터 각각의 윈도우 크기 클래스별 사용방법에 대해 알아보겠습니다.
컴팩트 윈도우 크기
컴팩트 윈도우 크기 클래스의 레이아웃은 화면 너비가 600dp 미만일 때 적용됩니다.
메시지 앱이 컴팩트 윈도우 크기에서 동작하는 경우, 레이아웃은 하나의 뷰에 집중합니다.
모바일 앱의 내비게이션 바내비게이션
내비게이션 바 또는 모달 내비게이션 드로어를 사용합니다. 내비게이션 구성 요소는 화면 가장자리에 배치하여 손이 쉽게 닿을 수 있도록 합니다.
단일 패널 레이아웃본문 영역
단일 패널 레이아웃을 사용합니다. 단일 패널은 컴팩트 윈도우의 대부분 영역을 차지합니다.
컴팩트 윈도우 사이즈에서는 16dp 마진을 적용합니다.간격
좌우 여백은 윈도우의 가장자리로부터 16dp로 설정합니다. 컴팩트 윈도우 패널의 좌우 여백은 16dp입니다.
특별 고려사항
컴팩트 레이아웃은 다음과 같은 경우 동적으로 미디엄 또는 익스팬디드 레이아웃으로 전환해야 합니다.
폴더블 기기를 펼쳤을 때
모바일 기기를 세로 모드에서 가로 모드로 회전했을 때
태블릿이 분할 화면 모드에서 벗어났을 때
멀티 윈도우 모드에서 앱 크기를 더 크게 조정했을 때
자유 형태 윈도우를 리사이즈했을 때
미디엄 윈도우 크기
미디엄 윈도우 크기 클래스의 레이아웃은 화면 너비가 600dp에서 839dp 사이일 때 적용됩니다.
전체 화면 모드의 화상통화 앱은 미디엄 윈도우 크기 클래스에 해당합니다.
윈도우 가장자리에 내비게이션 구성 요소를 배치하여 손이 닿기 쉽게 합니다.내비게이션
내비게이션 구성 요소는 손이 닿기 쉬운 윈도우 가장자리에 배치합니다.
1️⃣ 내비게이션 영역
2️⃣ 본문 영역
단일 패널 레이아웃에서는 내비게이션 레일이나 모달 내비게이션 드로어를 사용하고, Two 패널 레이아웃에서는 내비게이션 바를 사용합니다. 기본 목적지에 백 버튼으로 접근할 수 있는 경우, 보조 목적지에서는 내비게이션 레일을 숨길 수 있습니다.
본문 영역
미디엄 윈도우 크기에서는 화면 너비가 제한적이기 때문에 단일 패널 레이아웃을 권장합니다.
단일 패널 레이아웃그러나 설정 화면처럼 정보 밀도가 낮은 콘텐츠의 경우에는 Two 패널 레이아웃도 사용할 수 있습니다.
Two 패널 레이아웃Two 패널 레이아웃에서는 각 패널이 윈도우 너비의 50%를 차지해야 합니다. 커스텀 너비 설정은 피해야 하며, 드래그 핸들을 사용해 패널을 확장하거나 축소하여 윈도우 너비의 100%를 차지하도록 할 수 있습니다.
내비게이션 바가 있는 Two 패널 레이아웃Two 패널 레이아웃에 내비게이션을 추가할 때는 내비게이션 바나 모달 내비게이션 드로어를 사용해야 합니다. 이렇게 하면 각 패널이 윈도우의 전체 너비를 충분히 활용할 수 있습니다.
간격
미디엄 레이아웃의 여백은 24dp입니다. Two 패널 사이의 간격 역시 24dp입니다.
미디엄 크기 레이아웃의 이메일 앱특별 고려사항
미디엄 레이아웃은 다음 상황에서 컴팩트 또는 익스팬디드 레이아웃으로 동적으로 전환해야 합니다.
폴더블 기기를 접었을 때
태블릿이 세로 모드에서 가로 모드로 회전했을 때
앱이 전체 화면에서 분할 화면으로 전환될 때
멀티 윈도우 모드가 실행될 때
자유 형태 윈도우가 리사이즈될 때
손 닿기 영역(Reachability)
가로 모드의 태블릿이나 펼친 폴더블 기기에서는 그립을 조정하지 않는 이상 화면 상단 25% 영역에 손이 닿기 어렵습니다. 기기 크기와 손 크기를 고려하여 상단 25% 영역에는 상호작용 요소를 제한적으로 배치해야 합니다.
가로 모드 미디엄 윈도우에서 상단 25% 영역의 인터랙션 배치는 최소화하는 것이 좋습니다.또한 화면 하단 가장자리에 중요한 인터랙션을 배치하는 것도 피해야 합니다. 특히 손이 큰 사용자는 이 영역을 누르기 어렵습니다. 가로 모드 미디엄 윈도우에서 상단 25% 영역은 손이 닿기 힘든 구간이므로, 이 영역에는 인터랙션 배치를 최소화하는 것이 좋습니다.
화면 하단 가장자리와 모서리에 중요한 요소나 자주 사용하는 요소를 배치하면 손이 닿기 어려워집니다.인체공학적 관점에서 레이아웃을 설계할 때 다음을 고려해야 합니다.
손가락을 뻗어야 닿을 수 있는 영역은 불편합니다.
손이 자연스럽게 닿는 영역은 편리합니다.
기기를 잡은 상태에서 닿기 어려운 영역은 피해야 합니다.
확장된 윈도우 크기
확장형 윈도우 크기 클래스의 레이아웃은 화면 너비가 840dp에서 1199dp 사이일 때 적용됩니다.
Two 패널 모드의 동영상 앱은 확장형 윈도우 크기 클래스에 해당합니다.
내비게이션
내비게이션 구성 요소는 손이 닿기 쉬운 윈도우 가장자리에 배치합니다. 내비게이션 레일이나 지속형 내비게이션 드로어를 사용합니다.
1️⃣ 내비게이션 영역
2️⃣ 본문 영역
기본 목적지에 백 버튼으로 접근할 수 있는 경우, 보조 목적지에서는 내비게이션 레일을 숨길 수 있습니다.
정렬, 필터링 또는 보조 내비게이션을 위해서는 본문 영역에 탭이나 다른 구성 요소를 직접 배치합니다.
단일 패널 레이아웃을 사용하는 확장형 윈도우 크기 클래스본문 패널
단일 패널 레이아웃이나 Two 패널 레이아웃을 사용할 수 있습니다. 확장형 윈도우 클래스에서는 Two 패널 레이아웃이 가장 적합한 경우가 많습니다. 그러나 동영상처럼 시각적으로 밀도가 높거나 정보량이 많은 콘텐츠를 표시할 때는 단일 패널 레이아웃도 적합합니다.
확장형 윈도우 크기 클래스에서의 two 패널 레이아웃고정 패널과 유동 패널 레이아웃을 사용할 때, 고정 패널의 기본 너비는 360dp로 설정해야 합니다.
단일 패널 레이아웃을 사용하는 확장형 윈도우 크기 클래스분할 패널 레이아웃은 두 개의 유동 패널을 사용하며, 기본적으로 구분선을 화면의 중앙에 배치합니다.
24dp 여백과 패널 간 24dp 간격을 가진 two 패널 레이아웃확장형 레이아웃은 좌우 여백이 24dp입니다. 패널 사이의 간격도 24dp입니다.
1️⃣ 패널
2️⃣ 두 번째 패널
확장형 윈도우 크기 클래스에서의 이메일 앱특별 고려사항
확장형 레이아웃은 다음과 같은 경우 동적으로 컴팩트 또는 미디엄 레이아웃으로 전환해야 합니다.
폴더블 기기를 접었을 때
태블릿이 가로 모드에서 세로 모드로 회전했을 때
앱이 전체 화면에서 분할 화면으로 전환될 때
멀티 윈도우 모드가 실행될 때
자유 형태 윈도우가 리사이즈될 때
라지, 엑스트라 라지 크기 클래스
라지 윈도우 크기 클래스의 레이아웃은 화면 너비가 1200dp에서 1599dp 사이일 때 적용됩니다. 엑스트라 라지 윈도우 크기 클래스의 레이아웃은 화면 너비가 1600dp 이상일 때 적용됩니다.
라지 윈도우 크기 클래스에서의 동영상 앱이러한 윈도우 크기 클래스는 주로 노트북과 데스크톱 기기에 맞춘 웹 경험을 만드는 데 가장 유용합니다. 하지만 모든 제품이 라지와 엑스트라 라지 윈도우 크기 클래스를 필요로 하는 것은 아닙니다. 어떤 윈도우 크기 클래스를 설계 대상으로 삼을지는 사용하는 플랫폼의 규칙과 사용자를 고려해 결정해야 합니다.
내비게이션
본문 콘텐츠의 양에 따라 내비게이션 레일이나 지속형 내비게이션 드로어를 사용합니다. 정렬, 필터링 또는 보조 내비게이션을 위해서는 본문에 탭이나 다른 구성 요소를 직접 배치합니다.
1️⃣ 내비게이션
2️⃣ 본문
내비게이션 드로어는 본문 콘텐츠 공간이 충분히 남는 엑스트라 라지 윈도우에서 가장 적합합니다. 공간이 더 필요하거나 페이지 계층 구조의 하위 페이지에 있을 때는 내비게이션 드로어를 내비게이션 레일로 축소하는 것이 좋습니다.
밀도가 높은 콘텐츠나 미디어에는 단일 패널 레이아웃을 사용합니다.본문 패널
라지와 엑스트라 라지 윈도우 크기에서는 two 패널 레이아웃이 가장 적합한 경우가 많습니다.
그러나 동영상처럼 시각적으로 밀도가 높거나 정보량이 많은 콘텐츠를 표시할 때는 단일 패널 레이아웃도 적합합니다.
세로 방향 내비게이션 영역은 화면의 왼쪽에 위치합니다.고정 패널과 유동 패널 레이아웃을 사용할 때, 고정 패널의 기본 너비는 412dp로 설정해야 합니다.
화면 중앙에 배치되는 구분선분할 패널 레이아웃을 사용할 때는 내비게이션 드로어를 사용하더라도 구분선이 기본적으로 화면의 중앙에 배치되어야 합니다.
표준 사이드 시트(세 번째 패널)추가 패널
엑스트라 라지 윈도우 크기 클래스에서는 표준 사이드 시트를 세 번째 패널로 사용할 수 있습니다. 사이드 시트가 있을 때 내비게이션 드로어는 그대로 표시하거나, 내비게이션 레일로 축소하거나, 완전히 숨길 수 있습니다. 세 개 이상의 패널은 사용하지 않아야 합니다.
이 윈도우 크기에서 고정 패널은 412dp를 권장하지만, 사이드 시트의 기본 최대 너비는 400dp입니다.
간격
라지와 엑스트라 라지 레이아웃의 좌우 여백은 24dp입니다. 패널 사이의 간격도 24dp입니다.
특별 고려사항
라지와 엑스트라 라지 레이아웃은 다음과 같은 경우 동적으로 더 작은 레이아웃으로 전환해야 합니다.
앱이 전체 화면에서 분할 화면으로 전환될 때
멀티 윈도우 모드가 실행될 때
자유 형태 윈도우가 리사이즈될 때
또한 라지와 엑스트라 라지 레이아웃에서는 가독성을 보장하기 위해 줄 길이와 같은 타이포그래피 요소에 특별히 주의를 기울여야 합니다.
마치며
윈도우 크기 클래스는 기기의 화면 크기와 방향에 따라 사용자 경험을 최적화할 수 있는 중요한 기준입니다. 컴팩트, 미디엄, 확장형, 라지, 엑스트라 라지로 구분된 클래스는 각각 다른 레이아웃 전략을 요구하며, 이를 통해 사용자는 어떤 기기를 사용하든 일관되고 편리한 인터페이스를 경험할 수 있습니다.
화면 크기뿐 아니라, 콘텐츠 및 정보 밀도를 우선적으로 고려해야 합니다.또한 화면 크기에 맞춰 단순히 패널 수를 늘리는 것보다, 콘텐츠의 성격과 정보 밀도를 우선적으로 고려해야 합니다. 예를 들어, 설정 화면처럼 단순한 정보 구조에는 two 패널 레이아웃이 적합하지만, 영상이나 데이터 시각화처럼 집중도가 필요한 경우에는 단일 패널이 더 효과적입니다.
기기 회전, 멀티 윈도우 모드 전환, 폴더블 기기의 접힘/펼침과 같은 맥락 변화를 실시간으로 대응할 수 있도록 동적 전환 설계를 포함해야 합니다.
창 크기별 클래스에 대한 자세한 내용은 아래 글에서 자세히 확인하실 수 있습니다.
