디자인 기초, 배치 (레이아웃) 공식
비율로 보는 연습
디자인 4대 공식
배치, 폰트, 컬러, 이미지
비율로
보는 연습
지금까지 제가 비율로 보는 연습을 해야 한다고 여러 번 강조를 했었습니다. 비율로 보는 연습이란 면적의 대비가 어떤 비율로 이루어졌는지 의식적으로 보는 훈련입니다. 디자인은 조형미를 추구하는 설계 행위이고, 조형미는 곧 비율이 됩니다. 비율에 의해 서로 아름답게 조화를 이룬 상태를 조형미라고 말 할 수 있어요.
위의 이미지에서 동세가 느껴지나요? 시각적으로 주목을 끄는 이미지는 대비를 명확히 함으로써 주제와 부주제를 구분합니다. 가장 쉽게 활용할 수 있는 비율이 6:4(7:3) - 황금 비율입니다. 6:4에서 7:3이라고 어림잡아 이야기하는 이유는 수치의 정합성이 아닌, 하나는 크고 하나는 작은 대비 감 자체가 중요하기 때문입니다.
가장 활용도가 높은 6:4(7:3)을 사용하는 것에 적응이 되면, 다음으로는 안정감을 주는 5:5, 좀 더 강력한 대비 감을 주는 1:9까지 응용해 볼 수 있습니다. 정리하자면, 어떤 비율도 느껴지지 않는 애매하고 복잡한 구성은 피해야 한다는 것입니다.
대각선이나 원, 사각형 등의 도형도 같은 원리의 비례 공식이 적용됩니다. 이제 어떤 사물이나 문서, 인테리어 디자인을 볼 때도 이 비례감을 의도적으로 보는 연습을 해 보시길 바랍니다.
생각보다 일상의 많은 것들이 비례를 통해 조형적인 아름다움을 표현합니다.
주인공 수국 3: 나머지 7
하단부 4 : 상단부 6묶어주고 풀어주고, 모아주고 넓게 퍼뜨리는 대비를 통해 주인공과 조연을 구별하여 전체의 조화로움을 이룹니다.
[영상으로 보면 이해가 더 쉬워요!!]
글자를 읽는
순서
같은 정보끼리 묶어주는 '그룹핑'과 그룹들의 간격을 적절한 여백으로 떨어뜨리는 '배치'를 통해 핵심 메시지를 의도한 순서대로 전달하기 위해서는 독자가 정보를 받아들이는 시선의 흐름이 어떤 방향으로 흐르는지 알아둘 필요가 있습니다.
1) 큰 것부터 작은 것을 읽습니다.
2) 왼쪽에서 오른쪽으로 읽습니다.
3) 위에서 아래로 읽습니다.
다시 말해 핵심 메시지는 크게 왼쪽 상단에 배치할수록 순서대로 읽히는 데 유리합니다. 글의 내용은 왼쪽에서 오른쪽으로, 위에서 아래 방향으로 전개하는 것이 좋습니다. 독자가 정보를 순서대로 받아들일 수 있게 디자인하는 것입니다.
여백과
마진
같은 정보끼리 묶어주는 '그룹핑'과 그룹들의 간격을 적절한 여백으로 떨어뜨려 주는 '배치'가 디자인의 기본 원리라는 설명을 했었습니다. (이 글 참고) 여백과 마진을 얼마나 밸런스 있게 두는지에 따라 디자인 실력을 가늠할 수 있다고 해도 과언이 아닐 정도로 적당한 여백과 마진은 디자인의 전체적인 인상을 결정합니다. 그중 가장 기본적인 규칙 몇 가지만 소개하겠습니다.
첫째, 정렬을 통일해 주세요
왼쪽이면 왼쪽, 중간이면 중간, 오른쪽이면 오른쪽. 정렬을 한 가지로 통일해서 사용하는 것입니다. 보기 좋은 디자인은 잘 된 정리정돈과 같습니다. 눈에 보이지 않는 눈금자인 '그리드'를 통해 통일된 정렬을 사용해 주세요.
둘째, 마진은 좌우나 상하를 통일해 주세요.
마진은 콘텐츠를 감싸고 있는 상하좌우의 여백을 뜻합니다. 마진이 넓어질수록 콘텐츠는 중앙에 몰리게 될 것이고 넓어질수록 가장자리에 가까워지겠죠. 의도적으로 넓거나 좁은 마진을 쓰는 것이 아니라면 적당한 양의 마진을 사용하는 것이 좋습니다. 이때 유의해야 할 점은 좌우를 동일한 사이즈로, 혹은 상하를 동일한 마진으로 잡는 것입니다. 좌/우/상/하가 동일한 마진이 기본 마진입니다.
마진을 어느 정도로 잡는 것이 좋은가는 콘텐츠의 양과 대지 사이즈의 비율을 통해 결정됩니다. 넓은 대지라면 넓은 마진, 좁은 대지라면 좁은 마진을 사용합니다.
셋째, 6:4(7:3) 비율로 변형해 보세요.
항상 상하/좌우 같은 마진을 사용해야 하는 것은 아닙니다. 6:4 (7:3) 비율을 적용해서 보다 리드미컬 한 표현을 시도해 보는 것도 좋습니다. 포스터나 잡지 등 인쇄 디자인을 보면 깨알같이 작은 사이즈의 큰 의미 없는 텍스트 (주로 페이지 넘버나 인덱스, 콘텐츠 목차 등)를 종종 발견할 수 있는데요, 이런 꾸며주는 용도의 텍스트가 있고 없고에 따라 전체적인 균형감이 달라 보입니다. 왼쪽 이미지의 콘텐츠가 붕 떠 있는 느낌이라면 오른쪽은 왼쪽 하단의 꾸밈 텍스트가 떠있는 콘텐츠 더미를 잡아주는 역할을 합니다. 이것은 전체를 안정적으로 보이게 하는 역할을 합니다.
넷째, 단락과 단락 사이는 여백
비슷한 내용으로 나뉜 덩어리들을 서로 충분히 잘 떼어놓아야 두 내용이 서로 다른 내용이라는 즉각적인 인지를 도와줍니다. 단락과 단락은 기본적으로 세로로 구분되지만 1단 칼럼, 2단 칼럼, 3단 칼럼 등 가로로 구분되기도 합니다. 그러나 신문이나 잡지가 아닌 이상 1단 칼럼의 세로 여백만으로도 충분합니다. 특히 블로그나 워드에서 글 쓰기를 할 때 단락 사이에 여백만 주어도 읽는 사람을 배려하는 인상을 줄 수 있습니다.
하나는 크게,
하나는 작게
결국 비율에 의한 배치 공식은 하나는 크게, 하나는 작게 만드는 공식이라고 할 수 있겠습니다. 이제 비율을 파악하는 눈으로 핀터레스트나 비핸스의 디자인을 벤치마킹해 보시면 예전과는 다른 것들이 보일 것입니다. 이 덩어리와 이 덩어리의 비율은 6:4구나, 5:5구나, 1:9구나 하는 식으로 말이죠.
같은 덩어리들끼리 뭉쳐있고 덩어리들 사이는 적당한 여백이 있다는 사실만 기억하셔도 배치 공식이 무엇을 뜻하는지는 아실 수 있을 것이라 생각합니다.
아래 이미지를 통해 실제 디자인된 사례를 보겠습니다.
눈에 보이지 않는 자인 그리드를 켜고 보겠습니다. 여기서 우리가 유의 깊게 볼 것들은 그룹들끼리의 비례감입니다.
-왼쪽과 오른쪽은 5:5의 비율을 가지고 있습니다. (파란색 5:5)
-왼쪽과 오른쪽 모두 마진을 지키고 있습니다.
-왼쪽의 타이틀 그룹과 바탕에 깔린 배경 이미지가 7:3의 비율을 가지고 있습니다. (초록색 7:3)
-오른쪽도 마찬가지로 타이틀 그룹과 바디 텍스트 그룹이 7:3의 비율을 가지고 있습니다. (빨간색 7:3)
-동일한 정렬을 사용합니다. (타이틀은 중앙 정렬 / 바디 텍스트는 양측 정렬을 통한 중앙 정렬)
-왼쪽과 오른쪽은 5:5의 비율을 가지고 있습니다. (파란색 5:5)
-왼쪽과 오른쪽 모두 마진을 지키고 있습니다.
-오른쪽의 마진과 이미지가 7:3의 비율을 가지고 있습니다. (초록색 7:3)
-왼쪽도 마찬가지로 타이틀 그룹과 바디 텍스트 그룹이 7:3의 비율을 가지고 있습니다. (빨간색 7:3)
-동일한 정렬을 사용합니다. (타이틀은 왼쪽 정렬 / 바디 텍스트는 양측 정렬을 통한 왼쪽 정렬)
예시의 전문 디자이너처럼 자유롭게 비율과 밸런스를 추구하기는 어려울 수도 있겠지만
-정렬을 맞춘다
-비슷한 그룹끼리 모아준다
-여백을 활용해서 다른 그룹과 떨어뜨린다
-전체적인 마진을 지킨다
이 네 가지만 기억하셔도 모나지 않은 디자인은 할 수 있습니다. 여기까지 배치 (레이아웃의) 기본 공식을 알아보았습니다. 다음 칼럼에서는 폰트 공식을 알아보도록 하겠습니다.
