1 정의
특정 공간 안에 문자,이미지 등의 구성 요소를 보기 쉽게 효과적으로 배치하는 작업. 인터넷 상의 디자인에서 나아가 금속, 전자, 철도, 건축, 토목 등의 분야에서의 개념도 갖는다.
2 어원
어원은 'Lay something out', 단어 그대로 '~을 보기 쉽게 사용할 수 있도록 펼치다' 에서 유래하여 'Layout' 이라는 명사 자체로 정의되어있다.
3 요소
단순히 공간 안에 모든 요소가 규칙적으로 배치되어 있는 것만으로는 '레이아웃' 이라 칭하기에 부족하다. 기본적으로 '레이아웃' 이라 불리기 위한 요소는 아래와 같다.
3.1 주목성
중요도에 따른 우선 순위가 확실해야 한다.
상식적인 UX(User Experience) 에 기반하여 시선을 의도한 대로 이동할 수 있게 정리한다. 예컨대, 사용자가 필요로 하는 요소들에 대한 우선 순위를 정해 사용 빈도에 따라 중요한 내용이 정리되어있어야 한다. 고속 버스 예매 애플리케이션의 레이아웃이라면 당연히 예매 버튼이 눈에 제일 먼저 띄어야 하는 것이 예이다.
시선의 흐름은 한국 기준으로 왼쪽에서 오른쪽, 위에서 아래로 흐르는 것이 자연스러운데 그렇다, 글을 읽는 흐름 대로인 것이다. 꼭 지켜져야 할 필요는 없어도 이에 따르는 것이 기본적이다.
주목성을 달리 하는 데엔 위치적인 우선 순위도 존재하지만 첨부된 이미지대로 가장 중요한 내용에 다른 색상을 부여하거나 크기를 달리 하는 수도 있다.
3.2 가독성
글은 읽기 쉽고 이미지는 목적에 적합해야 한다.
글이 읽기 쉽다는 것은 내용,문단 정리뿐만 아니라 글꼴이나 폰트, 배경색과 글자색의 대비 등의 시각적인 가독성 그 자체까지를 포함한다. 극단적으로 드래그로 답을 보여주게 하게끔 폰트를 바꾸지 않는 이상 검은 바탕에 어두운 색의 글자를 사용하면 제대로 읽힐리가 없다.
3.3 명쾌성
사용자가 바로 의도를 알 수 있는가?
디자인에 대해 사용자가 그 목적과 상호 작용의 결과를 직관적으로 예상할 수 있는지에 대한 것이다. 이것도 주목성과 같이 UX 에 기반할 수 있다.
3.4 조형성
시각적으로 어떻게 다루어졌는가?
내용이 어떤 느낌으로 와닿도록 하였는지에 대한 것이다. 심미적인 부분이 강하며 간단하게 하자면 '어떤 형태의 레이아웃인가?' 에서부터 출발하여 <심각한 사건의 개요를 다루는 정보글의 레이아웃>과 <유아용 상품 판매를 다루는 글의 레이아웃>이 각자 어떻게 달라야 하는지 범주라 볼 수 있겠다.
3.5 창조성
표현이 얼마나 풍부하며 참신한가?
목적과 위 조건들을 충족하며 얼마나 참신하게 구성되었는가에 대한 것이다. 그러나 어디까지나 위 조건들을 충분히 충족해야 하며, 창조성에 너무 치중하여 주목성이나 가독성 등을 잃게 되어버리면 아무리 참신하고 신박한 구성이라 하여도 사용자들은 시간이 갈수록 불편함을 느낄것이다.
4 구성
위 조건에 맞추어 레이아웃을 구성하기 위해 사용할 수 있는 방식은 아래와 같다.
4.1 통일
일관된 구조와 레이아웃을 사용한다.
만약 특정 컨텐츠를 구성한다면 버튼의 위치나 기능 등이 서로 동일한 것이 좋다. 장면마다 버튼의 위치가 다르다던지 중요성을 알리는 표시 방법이 시시각각 달라진다면 혼돈의 카오스를 연출하게 된다.
4.2 조합
공통점이나 차이가 있는 구성 요소들을 적절히 묶거나 대비시키는 것
요약한 대로이다, 내용들이 서로 상관성이 있도록 정리되어있어야 한다.
4.3 강조
중요한 요소와 그렇지 않은것을 확실히 나눌 것
레이아웃을 구성하는데 초보자가 알면서도 신경 쓰는데에 실패할 확률이 큰 요소중 하나이다. 그 이유는 모두 중요하다는 과욕 보는 이의 관점 을 충분히 예상, 고려하지 못했을 경우가 크다. 중요한 포인트를 독자에게 제공해주고 싶다면 중요 개념을 하나하나 강조하는 것 보다는 전체적으로 보며 인과에 맞춰 한 문장으로 읽힐 수 있도록 짚어내는게 좋다. 또한 이미지도 마찬가지로, 열심히 공들여 여기저기 알록달록 꾸미는 것삽질보다는 확실하게 중요한 부분 위주로 규칙을 간단히라도 정해 강조하는게 좋다.
4.4 균형
크고 작은 요소를 알맞는 위치에 정리할 것
목적에 맞춰 적절하게 내용의 크기나 배열을 정리해주는 것이다, 특히 가독성에도 영향을 많이 준다. 만일 상품의 가격 테이블을 가운데 정렬로 작성하게 된다면 상품명의 길이에 따라 숫자가 한 줄로 정리되지 않고 난잡해질 것이다.