레이아웃기초
웹사이트 레이아웃의 종류와 잘 디자인하는 방법을 알아봅니다
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
레이아웃 기초
Info: CLIQUE에 따르면 웹사이트 첫 노출의 94%는 디자인과 관련이 있다고 합니다. 방문자가 웹사이트에 오래 머물도록 동기를 부여하려면 레이아웃이 잘 정의되고 매력적이어야 합니다.
- Visual - 사용자가 웹사이트에 대한 의견을 형성하는 데는 약 50밀리초가 걸립니다. 사용자의 관심을 끌기 위해서는 레이아웃이 직관적이고 단순하며 보기 좋아야 합니다.
- Navigation - 소비자의 38%는 웹사이트를 처음 방문할 때 탐색 링크를 살펴봅니다.
- Branding - 잘 정의된 레이아웃에 눈에 띄는 로고와 회사 이름이 필요합니다. 소비자의 22%가 웹페이지를 처음 방문할 때 눈길을 사로잡는 색상을 찾습니다.
- Image, Video - 소비자의 40%가 사진과 이미지를 높이 평가하고 21%가 웹 디자인에서 동영상이 가장 중요한 시각적 요소라고 생각합니다.
- Content - 제목, 목록을 사용하여 데이터를 정리하세요. 유용한 데이터만 이해하기 쉬운 형태로 제공하세요.
- Typography - 읽기 쉬운 글꼴을 한두 개 선택하여 모든 미디어 계정에서 사용하세요.
- Web and mobile-friendly layout - 휴대폰은 전 세계 트래픽의 54.4%를 발생시키므로 다양한 기기 사용자를 위해 사이트를 최적화하는 것이 중요합니다.
- Speed optimization - 페이지 로딩 시간이 1~3초인 경우 이탈 가능성이 32%, 최대 5초인 경우 90%까지 증가합니다.
- White space - 여백은 가장 중요한 요소에 시청자의 주의를 집중시키는 데 도움이 됩니다.
레이아웃 종류
단일 열 레이아웃 (Single Column)
단일 열 레이아웃은 콘텐츠가 한 열에 순차적으로 정렬되는 레이아웃으로, 대개 중앙 정렬로 이루어집니다.
모바일 우선 디자인이 오랫동안 권장되는 접근 방식이고 모바일 웹사이트가 크기 제약으로 인해 단일 열에 정렬되는 경우가 많기 때문에 많은 웹페이지 레이아웃이 여기에서 시작됩니다. 랜딩 페이지나 소셜 미디어, 블로그 사이트 등의 피드 기반 콘텐츠에 가장 유용합니다.
2열 레이아웃 (2 Columns)
두 개의 열 레이아웃은 때로는 분할 화면 배열로 콘텐츠를 나란히 표시합니다.
두 요소 사이의 이분법을 강조하는 데 유용합니다. 또한 Z 패턴 읽기를 미묘하게 지원하면서 복사와 그래픽 균형을 맞추는 데에도 유용합니다.
다중 열 레이아웃 (Multi Columns)
다중 열 레이아웃은 흔히 신문 또는 잡지 레이아웃이라고 합니다. 동일한 페이지 내에 무거운 사이트 콘텐츠를 수용합니다.
순서와 계층을 유지하기 위해 그리드를 사용하는 것이 일반적입니다. 회사 홈페이지, 이미지나 동영상이 많은 사이트, 온라인 출판물, 사용자 대시보드, 쇼핑 웹사이트에 유용합니다.
비대칭 레이아웃 (Broken Grid)
의도적으로 웹 디자인 대칭을 무시함으로써 시각적인 흥미를 높이고 역동성을 더하는 레이아웃입니다.
정해진 규칙을 따르지 않고 자유롭게 요소를 활용하기 때문에 특정 부분에 사용자의 시선을 집중시키는 데에 탁월합니다. 주로 개성을 나타내는 포트폴리오나 감각적인 인상을 주는 브랜드를 홍보하는 웹 사이트에 사용됩니다.
전체 화면 이미지 레이아웃 (Fullscreen Image)
전체 화면 이미지 레이아웃에는 하나의 이미지만 포함되며 경우에 따라 슬로건도 포함됩니다.
우리 두뇌가 처리하는 데이터의 90%가 시각적이기 때문에 전체화면 레이아웃은 사용자의 몰입을 유도할 수 있습니다. 그러나 블로그, 온라인 잡지, 쇼핑몰 등 많은 콘텐츠를 배치해야 하는 웹사이트에는 적합하지 않습니다.
가로줄 레이아웃 (Horizontal Stripe)
하나의 주제를 가진 섹션을 전체 화면에 배치하는 방식입니다. 스크롤시 새로운 전체 화면 영역이 표시됩니다.
다양한 배경색으로 소비자의 참여를 유도하고 정보를 섹션으로 구성할 수 있습니다. 콘텐츠 간의 스토리가 연결되지 않은 경우 사용하면 효과적입니다.
Z 패턴 레이아웃 (Z-Pattern)
Z 패턴 레이아웃은 사람들의 스캔 행동(아이트래킹)을 기반으로 합니다.
연구에 따르면 소비자는 작은 정보 조각을 지그재그 형태로 인식한다고 합니다. 대부분의 온라인 서비스는 왼쪽 상단에 로고를 배치하고, 상단에 탐색 메뉴를, 페이지 하단에 클릭 유도 문구를 배치합니다.
F 패턴 레이아웃 (F-Pattern)
F 패턴 레이아웃도 시청자의 스캔 동작에 따라 개발되었습니다.
사용자들은 많은 양의 텍스트 정보를 볼 때 'F' 형식으로 읽는다는 연구결과를 기반으로 합니다. 글자수가 많아 오래 읽어야 하는 게시물에는 이 레이아웃을 사용하는 것이 좋습니다.
분할 화면 레이아웃 (Split Screen)
분할 화면 레이아웃은 중앙에 수직으로 나누어진 두 개의 열로 구성됩니다.
두 가지 다른 제품을 판매하거나 두 가지 다양한 유형의 콘텐츠를 제공하는 회사에 적합합니다. 텍스트를 너무 많이 배치하지 말고, 이미지와 애니메이션 세부정보를 추가하여 웹사이트를 더욱 역동적으로 만드세요.
카드 레이아웃 (Card)
카드 레이아웃은 비슷한 상자에 구성된 여러 콘텐츠로 구성됩니다. 각 카드에는 일반적으로 제목, 이미지, 텍스트 몇 문장이 포함됩니다.
이 레이아웃은 콘텐츠가 많은 웹사이트에 적합합니다. 카드 사이의 공백에 주의하세요. 공백이 없으면 사이트의 가독성에 부정적인 영향을 미칠 수 있습니다.
잡지 레이아웃 (Magazine)
한 페이지에 많은 내용을 담아야 할 경우 매거진 레이아웃이 필요합니다. 모듈형 그리드를 기반으로 합니다.
콘텐츠를 열에 배치하고 시각적 가중치를 추가하여 중요한 정보를 강조할 수 있습니다. 레이아웃은 읽기 쉬운 상태로 유지되어야 하며 요소 사이에 공백을 추가하여 스캔하기 쉽도록 해야 합니다.
고정 사이드바 레이아웃 (Fix Sidebar)
스크롤 위치와 상관없이 사이드바가 고정되어 있는 레이아웃입니다.
항상 같은 위치에 사이드바가 있기 때문에 사용자는 웹 사이트를 쉽게 탐색할 수 있습니다. 콘텐츠가 많고 기다란 웹 페이지에 주로 사용되며 전문적이고 체계적인 인상을 줍니다.
레이아웃을 잘 디자인하는 방법
Tip: 75%의 사람들이 웹사이트를 기반으로 회사의 신뢰성을 판단합니다.
- 목표를 설정하세요 - 웹사이트 레이아웃은 시청자가 특정 행동을 하도록 유도하므로 회사의 목표에 따라 만들어야 합니다.
- 게재할 콘텐츠의 양과 중요성을 고려하세요 - 텍스트, 이미지, 비디오의 크기에 따라 레이아웃 선택이 결정됩니다.
- 와이어프레임을 생성합니다 - 와이어프레임을 통해 공간을 할당하고 필수 요소의 우선순위를 정할 수 있습니다. 소비자의 79%는 페이지만 스캔하므로 데이터를 더 쉽게 인식할 수 있도록 만들어야 합니다.
- 스타일을 식별하고 콘텐츠를 만듭니다 - 색상 팔레트를 선택하고 웹 사이트의 시각적 모양을 결정해야 합니다.
- 성능을 테스트하고 최적화하세요 - 사용자 친화적인 디자인을 최신 상태로 유지하려면 지속적인 개선이 필요합니다.
웹사이트 레이아웃의 예
쇼피파이
단일 열 레이아웃을 기반으로 무료 평가판 페이지를 만들었습니다. 몇 개의 블록에는 소비자가 결정을 내리기 전에 고려하는 모든 요소가 포함되어 있습니다.
리얼스페이스
건축 렌더링 및 3D 애니메이션 서비스입니다. 첫 번째 스크린샷은 분할 화면 레이아웃을 기본으로 디자인을 했으나 이미지를 중앙에 배치해 변형한 모습이고, 두 번째 화면은 카드 그리드입니다.
Wise
돈을 송금해주는 서비스입니다. Z 패턴 레이아웃을 웹사이트 개발의 기초로 삼았습니다. 메인 페이지의 궁극적인 장점은 수수료 계산기와 플랫폼 사용에 대한 팁이 포함되어 있다는 것입니다.
