맞추기(정렬)
디자인의 실제 제작에서 “맞추기”는 앞에서 설명한 “그룹화” 와 마찬가지로 매우 중요하다.
작은 흐트러짐이 디자인을 망가뜨린다.
레이아웃의 기본은 요소끼리 맞추는 것에 있다. 사람들은 줄이 잘 맞춰진 것을 보면 본능적으로 “아름답다”, “좋다”고 느끼게 된다.
무엇을 맞출 것인가
내용을 이해하고, 우선순위를 분명하게 설정하는 것이 효과적인 그룹화의 중요한 포인트가 된다.
- 사례에서는, 성장률 화살표와 글자의 아랫선을 맞추는 잘못된 정렬의 예시를 보여주고
- 이후에 성장률 화살표와 막대그래프의 아랫선을 맞춤으로서 연관성 있는 통계끼리 위계를 맞춰준 좋은 예시를 보여주고 있다.
어디를 맞출 것인가.
맞추는 위치는 한 곳 만이 아니다. 왼쪽, 오른쪽, 가운데 등 다양하다.
- 여러가지 요소를 결합해서 여러 개를 빼곡히 게재해야 할 경우, 요소 블록 사이의 간격도 맞추는 것이 좋다.
이것도 알아두자! - 가운데 맞추기는 힘들다.
이 방법은 “기준선을 정하기 힘들다” 는 어려운 점이 있으므로 주의해서 적용하길 바란다.
- 잘못된 예시로 막대그래프를 중간정렬(…) 해버리는 예시를 적용하고 있다.
- 일반적인 시선의 흐름의 방향을 고려해 왼쪽에 배치하는 일반적이고 정석적인 배치를 아래에 보여주고 있다.
맞추는 방법 1 - 보조선을 사용한다.
요소끼리 맞추는 방법 가운데 하나로, 도판이나 문자 등 “기준이 되는 요소”에 대해 보이지않는 보조선(가이드라인)을 작성해서 그 보조선에 따라 각 요소를 배열하는 방법이 있다.
- 일반적으로 피그나마 포토샵, 일러스트레이터 같은 경우엔 이 보조선 기능을(Ruler) 웬만해선 제공하고 있다.
이것도 알아두자! - 기울어진 보조선
동세를 강조하고 싶은 특수한 상황이라면 기울어진 사선 보조선을 이용하는 것도 좋다.
맞추는 방법 2 - 그리드를 사용한다.
개별적인 작은 요소끼리 맞추어야 할 경우 보조선을 사용하는 것이 효과적이지만, 지면 전체의 방침에 관한 것처럼 중요하고 커다란 요소를 배열 할 경우에는 앞에서 설명한 그리드가 중요한 역할을 하게 된다.
형태가 다른 요소를 맞추는 방법
형태가 전혀 다른 경우에는, “요소의 끝과 끝을 맞추는 방법”으로는 깔끔하게 맞춰져 보이지 않는다.
- 이런 경우에는, 시각적인 무게(축), 또는 점유 영역을 기준으로 하여 하나하나 수작업으로 맞춰가야만 한다.
맞추기 위한 테크닉
형태가 복잡한 도판의 경우에는 테두리를 만들고 그 테두리를 기준으로 보조선을 그어서 배치 요소를 맞추는 방법도 있다.
사진이나 도판의 표시 범위도 맞춘다.
요소끼리의 위치나 여백을 맞추는 것도 ㅁ루론 중요하지만, 같은 중요도의 사진이나 도판 등을 여러 장 게재할 경우에는 피사체의 크기나 도판의 크기를 맞추는 것도 중요하다.
- 인물 사진을 여러장 게재할 경우에는, 각 인물의 얼굴 크기를 맞춘다.
- 마찬가지로 그래프나 해설도 등을 게재할 경우에는 각 도판의 사이즈를 맞추기 바란다.
쉽게 놓치게 되는 맞춰야 할 요소
상자 안의 상하좌우 여백도 어긋나 있지는 않은지 잘 확인해본다.
- CSS 내부의 상하좌우 마진을 잘 맞추는 것 등이 해당 될 것 같다.