레이아웃과 그리드로 시선을 사로잡아라
콘텐츠마다 상대적인 중요도가 있어 이에 따라 분류하고 배치해야 합니다. 주요 콘텐츠를 강조하는 레이아웃으로 시선을 사로잡는 방법을 알아보겠습니다.
레이아웃과 그리드 시스템
콘텐츠를 배치할 때는 위에서부터 순서대로 배치하지 않습니다. 무엇보다 가장 중요한 요소는 '내용'이므로 중요도에 따라 내용을 나누고 나서 가장 중요한 콘텐츠를 먼저 배치합니다.
다단 그리드는 웹 사이트처럼 광범위한 정보를 동시에 처리하는 데 사용합니다. 계층 그리드는 화면을 가로로 나눈 후 정보의 덩어리를 수평으로 정렬하며, 대표적으로 쇼핑몰 상품 상세 페이지에 사용합니다. 나눠진 영역은 모듈이라 하며 각각의 모듈에는 글과 이미지, 영상을 함께 배치합니다.
12단 그리드
많은 콘텐츠를 하나의 페이지에서 소화해야 하는 웹 사이트는 계층 그리드 구조 안에서 다양하게 단을 나눕니다. 페이지를 12단으로 나누게 되면 2, 3, 4, 6으로 나눌 수 있기 때문에 여러방법으로 활용이 가능합니다. 그리드는 자유롭게 흩어져 있는 레이아웃에서도 시각적으로 화면을 정리하고 일관성을 만듭니다.
레이아웃을 그리는 순서
전체 레이아웃을 구성하는 헤더와 바디, 푸터 영역을 구성한 다음 각 모듈에 콘텐츠의 중요도에 따라 제목, 설명, 이미지를 구성합니다.
콘텐츠에 계급 매기기
콘텐츠는 물론 네비게이션도 중요하지만, 브랜드 아이덴티티를 알리는 것이 더 중요하므로 로고 영역을 넓고 크게 배치합니다. 상대적으로 덜 중요한 요소(로그인, 회원가입)들의 영역은 좁고 작게 배치합니다. 결국 레이아웃은 심미성(보기 좋음)과 기능성(사용 편리) 사이의 적절한 조화가 필요합니다.
모듈 레이아웃
제목과 소제목, 설명 그리고 이미지를 어떤 레이아웃으로 구성할 것인지 계획하는 단계입니다. 텍스트만 나열할 수 있지만 제목이나 소제목을 더하면 콘텐츠를 읽기 한결 수월해집니다. 여기에 콘텐츠와 관련된 이미지를 첨부하면 더욱 멋진 콘텐츠를 만들 수 있습니다. 하지만 모든 콘텐츠에 제목, 설명, 이미지가 추가된다면 복잡해지므로 콘텐츠의 중요성에 따라 구성을 바꿔야 합니다.
화면에 리듬감 만들기
자연스러운 리듬감
화면에 '리듬감'을 부여한다는 것은 강조하는 디자인과 덜 강조하는 디자인을 조화롭게 구성하는 것을 말합니다. '강-약-중강-약'으로 디자인의 강도를 조절하며 리듬감을 부여하면 고객에게 호감을 불러일으킵니다.
여백의 미
여백의 배율과 크기로 인해 컨텐츠가 더욱 빛을 발할 수 있습니다. 웹 사이트의 그리드에 '여백'의 정도를 확인하고 디자인에 흐름을 만듭니다. 여백에 적절한 흐름을 만들어 숨통을 틔우면 디자인이 한층 새로워집니다.