Back_to_Basics

{3줄 요약}

레이아웃은 요소를 배치하는 일만이 아닙니다. 사용자가 정보를 읽는 순서를 설계하는 일입니다.
레이아웃이 좋으면 화면이 자연스럽게 읽히고, 나쁘면 어디부터 봐야 할지 막힙니다.
구조는 콘텐츠보다 먼저 정하는 편이 낫습니다. 레이아웃이 콘텐츠를 담는 그릇이 됩니다.

많은 사람들이 콘텐츠를 만들고 나서 레이아웃을 결정해요.
"이 텍스트를 어디에 놓을까?"처럼요.

하지만 잘 설계된 제품은 반대예요.
"이 정보를 어떤 구조로 보여줄 것인가"를 먼저 결정해요.

왜냐하면 레이아웃 구조가 사용자의 이해 방식을 결정하기 때문이에요.
같은 내용도 어떻게 배치하느냐에 따라 쉽게 읽히기도 하고 어렵게 읽히기도 해요.

단일 컬럼 (Single Column) - 콘텐츠가 세로로 쭉 이어지는 구조예요.
모바일에서 가장 많이 쓰여요.
읽기 흐름이 단순해서 집중력이 높아요.
뉴스 기사, 블로그 포스트, 설정 화면에 적합해요.

2단 레이아웃 (Two Column) - 본문과 사이드바로 나눈 구조예요.
데스크탑 웹에서 많이 써요.
주요 콘텐츠와 보조 정보를 함께 볼 수 있어요.

카드 그리드 (Card Grid) - 동일한 카드가 격자로 반복되는 구조예요.
제품 목록, 콘텐츠 피드에 적합해요.
사용자가 빠르게 스캔하고 비교할 수 있어요.

대시보드 (Dashboard) - 여러 정보 블록이 화면을 나눠 차지하는 구조예요.
데이터 모니터링, 관리 도구에 써요.
한 화면에서 많은 정보를 동시에 볼 수 있어요.

레이아웃은 시각적인 것 이상이에요.
사용자가 어떤 순서로 행동하게 될지를 결정해요.

네이버 쇼핑 상품 상세 페이지를 보면 - 이미지가 먼저 나오고, 상품명과 가격이 그 아래에, 그 아래에 옵션 선택, 그 아래에 구매 버튼.
이 순서가 사용자의 구매 결정 흐름을 따라가요.

만약 구매 버튼이 이미지 위에 있거나, 가격보다 배송 정보가 먼저 나온다면?
자연스럽지 않아요.
레이아웃이 사용자 행동 흐름과 어긋나는 거예요.

모든 레이아웃에는 계층이 있어야 해요.

어떤 영역이 가장 중요한지, 어떤 영역이 보조인지가 시각적으로 드러나야 해요.
모든 영역이 같은 크기, 같은 비중이면 사용자는 어디를 먼저 봐야 할지 몰라요.

이 계층은 크기, 색, 위치, 여백으로 만들어요.
중요한 영역은 크고 위에, 보조 영역은 작고 아래나 옆에.

1. 목적을 먼저 정해요 - 이 화면에서 사용자가 해야 하는 가장 중요한 일이 뭔가요?

2. 콘텐츠 인벤토리를 만들어요 - 이 화면에 들어가야 할 모든 요소를 나열해요.

3. 우선순위를 매겨요 - 어떤 요소가 가장 중요하고, 어떤 게 보조인지 정해요.

4. 그룹을 만들어요 - 연관된 요소를 묶어요.
같은 그룹은 가까이, 다른 그룹은 여백으로 분리해요.

5. 흐름을 확인해요 - 사용자의 시선이 가장 중요한 것에서 다음 행동으로 자연스럽게 이어지는지 확인해요.

그리드를 활용한 레이아웃 구조화는 Grid System에서 더 자세히 다뤄요.