2단 레이아웃에 대해

2단 레이아웃에 대해

메인 콘텐츠와 서브 콘텐츠로 나뉜 2단 레이아웃은 웹페이지에서 자주 사용하는 구성입니다.

어떤 유형이 있는지 알아봅니다.

---

 

2단레이아웃이란

2단으로 구성된 레이아웃에는 좌우 너비를 다르게 설정해 넓은쪽에 메인 콘텐츠를

좁은쪽에 내비게이션 메뉴 등을 두어 메인 영역과 서브영역으로 나누는 방법이 있습니다.

블로그, 뉴스 등 정보의 양이 많은 웹사이트에 효과적입니다.

 

2단 레이아웃의 장점

웹사이트 내 사용자의 편의성 상승

메인 콘텐츠를 표시하는 영역과 부가정보를 보여주는 사이드 칼럼을 나란히 배치해 화면 내 공간을 효율적으로 활용할 수 있습니다.

 

사이드 칼럼에는 다른 페이지로 가는 링크나 검색폼, 공지사항 등을 올리고 

사용자는 메인 콘텐츠를 집중해서 읽을수 있으면서도 다른 페이지로도 쉽게 이동할 수 있게 됩니다. 

보통 사이드 컬럼은 메인 영역과 함께 스크롤 되지만 일부를 고정시켜서 표시하는것도 가능합니다. 

사용자가 꼭 보았으면 하는 정보가 있다면 사이드 칼럼에 고정시켜서 주의를 끄는 방법도 있습니다. 

 

높은 공간 활용도

블로그나 뉴스처럼 문장 위졸 작성된 웹사이트는 콘텐츠 영역의 가로폭이 너무 길어지면 글자를 따라서 읽기가 힘들어서 가독성이 떨어집니다.

쉽게 읽을수 있도록 메인 콘텐츠의 너비를 설정하면 데스크톱에서 볼때는 좌우 공간이 남습니다.

이때 2단으로 구성하면 공간 활용은 물론 개발자와 사용자 모두 다루기도 보기도 쉬운 레이아웃이 됩니다. 

 

---

 

2단 레이아웃에서 주의해야 할점

 

메인 콘텐츠에 대한 떨어지는 집중력

1단 레이아웃에 비해 화면에 표시되는 정보가 많아 사용자가 메인 콘텐츠에 집중하기 어려울수 있습니다.

용도에 따라서 한 콘텐츠에 제대로 포커스를 맞추고 싶다면 1단으로, 

메인 콘텐츠 외 정보를 함께 표시하고 싶다면 2단으로 나누어 구성하는것이 중요합니다. 

 

작은 화면에서의 읽기 어려움

스마트폰처럼 작은 화면에서 2단 레이아웃으로 구성된 웹페이지를 보면 각 콘텐츠가 꽉 차서 읽는것은 물론 조작하는것도 어렵습니다.

스마트폰과 같은 모바일 디바이스에서는 1단으로 전환할수 있도록 구성하는것이 좋습니다. 

 

 

웹사이트 개발시 사용할 수 있는 다양한 레이아웃

 

1. 타일형 레이아웃

사각형 모양의 요소를 규칙적으로 나열한 레이아웃을 타일형 레이아웃 또는 카드형 레이아웃이라고 합니다.

많은 정보를 한번에 보여줄수 있어 깔끔하고 단정한 이미지의 웹사이트를 만들때 사용합니다. 

반응형 디자인에도 잘 어울려 이미지 갤러리나 인터넷 쇼핑몰의 상품 목록 등에도 쓰입니다. 

 

2. 모자이크 레이아웃

크기가 다른 사각형을 배치한 타일형 레이아웃을 모자이크 레이아웃 또는 메이슨리 레이아웃(Masonry Layout)이라고 합니다.

여백이나 좌우에 선을 넣으면 크기가 달라도 아름답게 표현할수 있습니다. 

 

3. 다단 레이아웃

여러 컬럼을 조합한 레이아웃입니다.

데스크톱에서 스크롤 하지 않아도 많은 정보를 표기할 수 있어 쇼핑이나 뉴스 사이트에서 주로 사용합니다. 

다만 콘텐츠가 분산 배치되어 사용자에게 가장 어필하고자 하는 정보로 유도하기는 어렵습니다. 

 

4. 프리 레이아웃

화면 전체에 자유롭게 배치하는 레이아웃입니다.

웹사이트의 콘셉이나 세계관을 표현하기에 좋은 레이아웃입니다.

요소 사이에 명확하게 여백을 주지 않고 늘어놓기만 한다면 이상한 디자인이 될 수 있으니 주의해야 합니다.

요소를 중첩하거나 랜덤으로 배치할수도 있으나 반응형 디자인을 적용하기는 번거로우니 설계할때 제대로 구성해야 합니다.