웹 UI 레이아웃 그리드의 종류

01. 단일 칼럼 레이아웃 (Single column layout)

단일 레이아웃은 가장 기본적인 레이아웃이며, 랜딩 페이지(Landing pages)에 사용된다. 제품이나 브랜드를 향상시키기 위한 큰 이미지들을 사용할 수 있다. 단일 레이아웃 안에 있는 것들은 개별 모듈이며, 모바일로 확장시키기 편리하다. 단일 레이아웃은 감정을 자극하는 데 유용하기 때문에 홈페이지나 소개 혹은 신제품들을 위한 일반적인 레이아웃으로 사용된다. 각각의 모듈에서는 다른 그리드 칼럼으로 분할될 수 있지만, 전체적인 레이아웃은 보통 12개의 칼럼을 사용한다.

 

 

[1] 그리드 사용

 

위의 Wework 예시를 살펴보면 칼럼에 맞게 정렬되어 있는 것을 보아 확실히 단일 레이아웃을 사용하고 있다는 사실을 알 수 있다. 나는 이러한 예시들을 좋아하는 편인데, 단일 레이아웃은 기존의 칼럼을 기반으로 만들면서 흥미로운 방법들로 충분히 페이지를 분할할 수 있기 때문이다.

 

[2] 예시

 

 

 

 

 

---

 

 

 

02. 2 칼럼 레이아웃 (Two column layout)

2 칼럼 레이아웃은 텍스트 폭이 6-8개 이상 되는 것을 원하지 않을 경우, 가장 일반적으로 사용되는 레이아웃이다. 2 칼럼 레이아웃의 장점은 탐색, 광고, 유사 목록 등을 측면에 있는 열을 통해 표현할 수 있다는 점이다. 가운데 기본 내용에는 8개의 칼럼을 사용하고, 측면에는 4개의 칼럼을 사용해야한다. 이렇게 하면 양쪽이 짝수가 되므로 필요하다면 주요 컨텐츠를 분할해 배치할 수 있다.

 

"그런데 잠깐, 여덟 칸? 그러면 나는 디자인할 공간이 너무 적어!"라고 말할지도 모른다. 웹에서는 텍스트가 12개 열을 모두 사용하도록 해서는 안 된다. 이것은 기본적인 타이포그래피 원리로서, 16px에서 편안한 읽기 폭은 약 60~80자이며, 그것은 데스크탑에서 약 8개의 칼럼을 넘지 않는다. 때문에 실제로 공간이 적은 것은 문제가 되지 않는다.

 

이 레이아웃은 다양하고 읽을 텍스트가 많은 웹사이트의 내부 페이지등에 적합하다. 일부 페이지 예로는 블로그, 지침, FAQ, 방법, 탐색 등이 있다.

 

[1] 예시

 

 

 

 

---

 

 

 

03. 3 칼럼 레이아웃 (Three column layout)

3개의 칼럼을 사용하는 경우, 당신은 어떻게 웹 사이트를 선보이고 싶으냐에 따라 몇 가지 선택권을 가지게 된다.

 

[1] 4–4–4 배열

이 배열을 경우, 많은 이미지를 게시해야할 때 사용하기 좋은 레이아웃 방식이다.

 

 

[2] 3-6-3 배열 (불균일한 배열)

3-6-3 배열은 사용자가 강조하고자 하는 긴 내용의 스크롤을 처리해야할 때 사용하는 레이아웃이다. 주요 콘텐츠를 보여주는데 수평 공간이 많이 필요하지 않을 때 가장 적합하다.

 

 

[3] 2-5-3 배열

페이스북과 트위터는 주요 콘텐츠가 긴 피드이기 때문에 이 레이아웃을 사용한다. 아래의 이미지를 보면 페이지의 배열들이 좌우로 균일하지 않다는 사실을 확인할 수 있다. 왼쪽의 경우 내비게이션을, 오른쪽의 경우엔 생일, 하이라이트, 주의사항 등 잡다한 정보들을 제공한다.

 

 

 

 

 

---

 

 

 

04. 스티커식 패널 (Sticky Panels)

스티커식 패널은 사용자가 페이지를 스크롤할 때 스티커 영역을 가지거나 그것이 사용자의 스크롤을 따라가는 경우에 사용하는 방식이다. 스티커식 패널은 경고 메세지 등 처럼 정적이거나, 사용자가 변경하는 정보 업데이트처럼 동적일 수 있다. 레이아웃 자체는 2칼럼 배치와 같지만 스티커식 패널의 내용물 길이는 훨씬 짧다.

 

사용자에게 다음 단계가 어떻게 되어야 하는지를 상기시키고, 사용자의 행동을 반영하기 때문에 효과적이다. 사용자가 취할 수 있는 한 가지 동작을 강조하고자 할 때는 스티커식 패널이 좋지만, 여러 동작에서는 스티커식 패널을 적절하지 않다.

 

 

 

 

 

---

 

 

 

 

05. 웹 앱 (Web app)

일부 사이트에는 화면 가장자리(일반적으로 위와 왼쪽)에 고정되고 지속되는 내비게이션 기능이 있다. 이러한 스티커식 내비게이션 메뉴는 사용자가 앱을 사용하고 있다는 느낌을 받을 수 있도록 도와준다. 이와 같은 디자인은 항상 그 자리에 내비게이션이 있다는 의미이기 때문에 원하는 대로 콘텐츠를 단순화하는데 사용될 수 있다.

 

웹 앱 설계의 경우, 스티커식 내비게이션은 실제로 그리드에 속하지 않는다. 그것은 항상 원래의 자리에 있기 때문에 그리드 밖에 위치한다. 대부분의 웹 앱은 반응형이므로, 브라우저를 늘리면 그리드만을 유동적으로 움직이기 때문에 스티커식 내비게이션은 크기가 변화하지 않는다.

 

 

 

 

---

 

 

 

 

---

글을 마치며

 

해당 글은 Medium의 Christie Tang의 글을 번역 및 일부 각색한 글입니다. 

원문 링크: https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-common-ui-layouts-7073293697f8

Responsive grids and how to actually use them: common UI layouts