레이아웃 요소 싹 다 파헤치기
구글이 레이아웃을 사용하는 방법
기본적인 레이아웃 요소와 영역을 알아봅니다.마진, 패딩, 컬럼의 차이를 아시나요?
화면은 단순히 요소들이 나열된 공간이 아니라, 사용자가 어떤 행동을 취할지 유도하는 구조를 담고 있습니다. 버튼이나 카드가 어디에 배치되고, 내비게이션이 어떤 위치에 자리 잡는지는 모두 레이아웃(layout)의 원칙에 따라 결정됩니다.
구글에서 정의하는 레이아웃의 구성 요소는 윈도우, 내비게이션 영역, 바디 영역, 패널(pane), 열(column), 간격(spacer), 마진(margin), 드래그 핸들(drag handle) 등으로 이루어집니다. 각각은 단순한 배치 요소가 아니라, 콘텐츠의 관계와 위계를 드러내며 사용자의 주의를 자연스럽게 흐르게 하는 장치입니다.
Material 3의 레이아웃은 상당히 많은 내용으로 정의되지만, 이번 글에서는 기본적인 레이아웃의 요소들을 중심으로 알아보도록 하겠습니다.
구글이 정의하는 레이아웃 용어1️⃣ Column (컬럼)
하나의 패널 안에서 세로 방향으로 나뉘는 콘텐츠 블록을 의미합니다. 예를 들어 뉴스 앱의 기사 목록처럼, 한 패널 안에 여러 개의 컬럼이 있을 수 있습니다. 컬럼은 콘텐츠를 분할하고 정렬하는 역할을 하며, 그리드 시스템처럼 시각적 질서를 만들어 줍니다.
2️⃣ Fold (폴드)
폴더블 기기에서 화면이 접히는 영역을 가리킵니다. 단일 화면에서는 유연하게 구부러지는 부분을, 듀얼 스크린 기기에서는 두 디스플레이를 구분하는 힌지 영역을 뜻합니다. 이 영역은 실제로 콘텐츠가 표시되지 않기 때문에, 레이아웃 설계 시 주의 깊게 고려해야 합니다.
3️⃣ Margin (마진)
화면의 가장자리와 콘텐츠 사이의 여백을 의미합니다. 마진은 요소들이 화면 끝까지 밀착되지 않도록 공간을 제공하고, 콘텐츠의 가독성과 시각적 안정감을 높입니다. 특히 모바일 환경에서는 손가락 터치를 고려해 마진이 중요한 역할을 합니다.
4️⃣ Pane (패널)
하나의 앱 화면 안에서 콘텐츠와 컴포넌트를 담는 컨테이너입니다. 패널은 고정형(fixed), 유동형(flexible), 부유형(floating), 반영구형(semi-permanent) 등 다양한 형태로 사용할 수 있습니다. 예를 들어 메일 앱에서는 왼쪽 패널에 목록, 오른쪽 패널에 상세 내용을 배치하는 식으로 구성됩니다.
5️⃣ Drag handle (드래그 핸들)
패널의 크기를 조절할 수 있도록 제공되는 인터랙션 요소입니다. 보통 두 패널 사이의 구분선에 배치되며, 사용자가 이를 드래그하면 패널의 너비가 즉시 조정됩니다. 직관적인 조작을 위해 커서 변화, 호버 시 시각 효과 등과 함께 제공됩니다.
6️⃣ Spacer (스페이서)
두 패널 사이에 들어가는 빈 공간을 뜻합니다. 스페이서는 단순한 간격을 확보하는 기능 외에도, 경우에 따라 드래그 핸들이 들어가는 영역으로 활용됩니다. 이를 통해 패널 간의 구분이 명확해지고, 레이아웃의 균형이 유지됩니다.
7️⃣ Window (윈도우)
하나의 앱 또는 화면을 감싸는 가장 큰 단위의 틀입니다. 윈도우는 내비게이션 영역과 바디 영역으로 나뉘며, 앱 전체의 콘텐츠를 담아내는 공간이 됩니다. 멀티 윈도우 모드에서는 여러 앱이 동시에 하나의 화면을 공유할 수도 있습니다.
그룹핑 (Grouping)
만두 사진 아래에 "이 지역의 식당"이라는 캡션을 배치하면, 이 구성은 명시적 그룹을 보여줍니다.그룹핑은 같은 맥락을 공유하는 관련 요소들을 연결하는 방법입니다. 예를 들어 이미지와 캡션을 함께 배치하면 두 요소가 시각적으로 연결되어 서로 관련이 있음을 보여줍니다. 이렇게 그룹핑은 요소 간의 관계를 드러내고, 관련 없는 요소들을 구분하는 경계를 설정합니다.
카드 안의 요소들은 명시적으로 그룹핑되어 있습니다.명시적 그룹핑 (Explicit grouping)
명시적 그룹핑은 아웃라인, 구분선, 그림자와 같은 시각적 경계를 사용해 관련 요소들을 하나의 영역 안에 묶는 방식입니다. 이를 통해 요소들이 서로 연결되어 있음을 명확히 드러낼 수 있습니다. 또한 명시적 그룹핑은 상호작용 가능성을 나타내기도 합니다. 예를 들어 구분선 사이에 배치된 리스트 아이템이나, 이미지와 캡션이 함께 담긴 카드 컴포넌트가 이에 해당합니다.
이미지들은 가까이 붙어 배치되어 있어 암시적으로 그룹핑됩니다.암시적 그룹핑 (Implicit grouping)
암시적 그룹핑은 선이나 그림자 같은 경계를 사용하지 않고, 근접성(proximity)과 빈 공간(open space)을 통해 관련 아이템을 묶는 방식입니다. 예를 들어, 제목 바로 아래에 부제목과 썸네일 이미지를 가까이 배치하면 세 요소가 서로 관련됨을 자연스럽게 보여줍니다. 이 그룹은 다른 제목·부제목·썸네일 그룹과는 충분한 여백으로 분리되어 있습니다.
마진은 화면의 가장자리와 그 안의 요소들을 분리합니다.마진 (Margins)
마진은 윈도우 영역의 가장자리와 그 안에 배치된 요소들 사이의 공간을 의미합니다.
마진의 너비는 윈도우 크기 클래스별로 고정값이나 비례값으로 정의됩니다. 윈도우 크기에 더 잘 적응하기 위해, 마진 너비는 특정 브레이크포인트에서 달라질 수 있습니다. 큰 화면에서는 콘텐츠 주변에 더 넓은 여백을 만들어 주는 것이 적절합니다.
각 윈도우 클래스(컴팩트, 미디엄, 익스팬디드, 라지, 엑스트라 라지)별 마진 측정값을 참고할 수 있습니다.
스페이서는 두 패널을 시각적으로 구분합니다.스페이서 (Spacers)
스페이서는 레이아웃 안에서 두 개의 패널 사이에 위치하는 공간을 의미합니다.
드래그 핸들의 터치 영역스페이서 안에는 패널 크기와 레이아웃을 조정할 수 있는 드래그 핸들이 포함될 수 있습니다. 이때 핸들의 터치 영역은 패널과 약간 겹칩니다.
패딩은 이미지와 그 아래의 제목을 분리합니다.패딩 (Padding)
패딩은 UI 요소들 사이의 공간을 의미합니다. 패딩은 세로, 가로 방향 모두 측정할 수 있으며, 레이아웃 전체 높이나 너비에 걸칠 필요는 없습니다.
대부분의 레이아웃은 두 가지 영역으로 나뉩니다레이아웃 영역의 구분
레이아웃은 크게 내비게이션과 본문 영역으로 나눌 수 있습니다.
1️⃣ 내비게이션(Navigation)
2️⃣ 본문(Body)
윈도우는 내비게이션 영역과 본문 영역으로 나뉩니다.윈도우 (Windows)
윈도우는 제품을 담고 감싸는 프레임입니다. 윈도우는 기본적으로 내비게이션 영역과 본문 영역의 두 가지 주요 영역으로 나뉩니다.
내비게이션 영역의 요소들 (드로어, 레일, 바)내비게이션 영역 (Navigation region)
내비게이션 영역은 주요 내비게이션 컴포넌트와 요소들을 담습니다.
내비게이션 드로어(Navigation drawer)
내비게이션 레일(Navigation rail)
내비게이션 바(Navigation bar)
이 영역의 요소들은 사용자가 앱 내 목적지 간을 이동하거나 중요한 작업에 접근할 수 있도록 돕습니다. 내비게이션 컴포넌트는 손이 닿기 쉬운 윈도우의 가장자리에 배치해야 합니다. 왼쪽에서 오른쪽(LTR) 언어 환경에서는 왼쪽에, 오른쪽에서 왼쪽(RTL) 언어 환경에서는 오른쪽에 두는 것이 적절합니다.
다양한 콘텐츠를 담는 본문 영역본문 영역 (Body region)
본문 영역은 앱의 대부분 콘텐츠를 담는 공간입니다. 이미지, 텍스트, 리스트, 카드, 버튼, 앱 바(App bar), 검색 바(Search bar) 등이 포함됩니다. 본문 영역의 콘텐츠는 하나 이상의 패널(pane)로 그룹화됩니다.
모든 콘텐츠는 반드시 패널 안에 있어야 합니다.패널 (Panes)
현실에서 창문이 여러 장의 유리로 이루어진 것처럼, Material Design에서 패널은 윈도우의 본문 영역을 구성하는 단위입니다. 하나의 레이아웃은 1~3개의 패널을 포함할 수 있으며, 이 패널들은 윈도우 크기나 언어 설정에 따라 동적으로 적응합니다.
고정형 패널과 유동형 패널로 구분할 수 있습니다.사용자는 패널 안에서 혹은 패널 간을 탐색할 수 있으며, 여러 패널을 동시에 보여주면 앱의 효율성과 사용성이 높아집니다.
고정형(Fixed): 고정된 너비
유동형(Flexible): 사용 가능한 공간에 맞춰 크기가 늘어나거나 줄어듦
모든 레이아웃에는 최소한 하나의 유동형 패널이 있어야 윈도우 크기에 유연하게 대응할 수 있습니다.
패널은 표시/숨김, 부유, 재배치와 같은 방법으로 동작할 수 있습니다.패널의 반응형 동작 (How panes adapt)
패널은 단순히 크기만 조정되는 것이 아니라, 다음과 같은 전략으로 변화할 수 있습니다.
1️⃣ 표시/숨김(Show and hide): 보조 패널이 공간에 따라 나타나거나 사라짐
2️⃣ 부유(Levitate): 한 패널이 다른 패널 위에 겹쳐짐
3️⃣ 재배치(Reflow): 패널의 위치나 방향이 바뀜
2D 패널에서는 암시적 그룹핑을 통해 위계를 표현할 수 있습니다.컨테인먼트 (Containment)
컨테인먼트는 요소들을 하나의 영역 안에 가둬서 구분하는 것을 의미합니다. 요소들끼리 관계를 보여주는 그룹핑과는 구분되는 개념입니다.
대부분의 기기에서는 패널이 배경과 자연스럽게 어우러지며, 필요에 따라 다른 색상을 사용해 강조할 수도 있습니다. 이는 암시적 그룹핑(Implicit grouping)이라 불리며, 패널 간의 관계를 보여줍니다.
XR 환경에서는 명시적 컨테인먼트를 사용하는 것이 권장됩니다.XR 환경처럼 공간적 맥락에서는 패널을 주변 환경과 구분하기 위해 별도의 컨테이너 색상을 사용하는 명시적 그룹핑(Explicit containment)이 권장됩니다.
앱 바는 패널 내부에 배치됩니다.앱 바 (App bars)
패널 안에는 상단 앱 바(Top app bar)와 하단 앱 바(Bottom app bar)를 포함할 수 있습니다.
작은 윈도우에서는 두 가지 액션만 표시됩니다. 확장된 윈도우에서는 다섯 가지 항목이 표시됩니다.앱 바에 들어가는 액션은 사용 가능한 너비에 따라 숨겨지거나 드러납니다.
작은 화면에서는 2개의 액션만 보임
큰 화면에서는 최대 5개 이상의 액션 표시 가능
윈도우 클래스가 전환될 때, 요소를 다른 UI 객체로 이동하지 않아야 합니다.레이아웃이 한 패널에서 두 패널로 전환될 때, 요소들을 다른 패널로 옮기는 것은 피해야 합니다.
하나의 패널 안에서 여러 개의 컬럼을 사용해 레이아웃을 구성컬럼 (Columns)
패널 안의 콘텐츠는 여러 개의 컬럼으로 나뉘어 표시될 수 있습니다. 컬럼은 콘텐츠를 세분화하고 정렬하는 데 사용됩니다.
중요한 점은 컬럼은 패널 내부에서만 사용되며, 윈도우 단위에서는 사용되지 않는다는 것입니다.
드래그 핸들은 목록-세부(list-detail) 레이아웃에서 패널 크기를 조정하는 데 활용됩니다.Drag handle (드래그 핸들)
드래그 핸들을 사용하면 레이아웃에서 패널의 크기를 즉시 조절할 수 있습니다. 유동형 패널의 너비를 조정하거나, 고정형 패널을 완전히 접거나 펼쳐 단일 패널 레이아웃과 두 패널 레이아웃 사이를 빠르게 전환할 수 있습니다.
핵심 정보와 행동을 더욱 분명하게 드러내는 레이아웃마치며
레이아웃은 단순히 화면을 나누는 틀이 아니라, 정보의 구조를 드러내고 사용자의 흐름을 안내하는 중요한 수단입니다. 내비게이션과 본문, 패널과 컬럼, 간격과 그룹핑 같은 요소들이 유기적으로 결합해 사용자에게 자연스럽고 일관된 경험을 제공합니다.
하지만 레이아웃을 과도하게 복잡하게 구성하면 오히려 사용성을 해칠 수 있습니다. 너무 많은 패널이나 지나친 구분은 콘텐츠에 대한 집중을 방해하고, 다양한 화면 크기에서의 일관성을 잃게 만들 수 있습니다.
Material 3가 정형화된 레이아웃 패턴과 간결한 원칙을 제시하는 이유도 여기에 있습니다. 기본적인 구조만으로도 충분히 효율적이고 확장 가능한 화면을 만들 수 있기 때문입니다.
따라서 콘텐츠의 위계를 가장 단순하게 표현할 수 있는 구조인지, 다양한 기기와 환경에서 무리 없이 확장되는지, 그리고 마진·패딩·스페이서와 같은 간격 요소를 통해 적절한 여백과 균형을 제공하는지를 살펴야 합니다. 결국 좋은 레이아웃은 불필요한 장식을 더하는 것이 아니라, 핵심 정보와 행동을 더욱 분명하게 드러내는 데 있습니다.
구글 레이아웃에 대한 자세한 내용은 아래에서 자세히 확인하실 수 있습니다.
