이번에는 예뻐 보이는 디자인을 위해 알아두어야 할 개념과 중요 요소 중 하나인 레이아웃에 대하여 알아보고자 한다. 레이아웃을 함에 있어 어떤 것들을 신경 써야 하고 어떻게 다루어야 하는지 살펴볼 것이다.

레이아웃은 디자인에서 도형이나 글자와 같은 요소들을 배치하는 것을 말한다. 전달하고자 하는 메시지를 효과적으로 전달하고 시각적으로 매력을 끄는 것이 예뻐 보이는 디자인이자 성공적인 레이아웃이라 할 수 있다.

먼저 레이아웃이 구성되는 원리인 통일, 변화, 균형, 리듬, 강조를 알아보고 전반적인 흐름 속에서 레이아웃을 적용하는 과정을 소개할 것이다.

레이아웃의 구성 개념

레이아웃 시 고려해야 할 사항은 어떤 것들이 있을까?

1) 통일감

통일은 화면에 구성된 여러 요소들이 일관성을 가지고 크게 봤을 때 하나로 보여야 하는 것을 말한다. 각 요소가 질서 있고 조화롭게 균형이 맞아야 하며, 이를 위해서는 객체, 도형, 글자 등이 반복성 있어야 하고 색채 등의 조화가 잘 이루어져야 한다.

하지만 통일감만 너무 강조하다 보면 밋밋하고 시각적 재미가 떨어지는 느낌이 있으므로 통일성을 바탕으로 적절하게 변화를 주어야 한다.

2) 변화

통일이 안정된 질서를 바탕으로 정확한 메시지를 전달하는 게 주 목적이라면, 변화는 레이아웃에 흥미를 더해주는 역할을 한다. 가장 중요한 것은 절제 있게 시각적 흥미를 더하면서 통일과의 적절한 조화를 이루는 것이다.

변화가 너무 강하면 레이아웃이 혼란스러워지고 산만하게 보일 수 있으니 주의해야 한다.

3) 균형감

균형은 대칭형과 비대칭형으로 구분할 수 있다. 대칭형은 화면을 양분했을 때 좌우가 같은 패턴으로 균형 있게 레이아웃을 구성하는 것이다. 배치가 쉽고 질서 있는 통일감을 줄 수 있지만 보수적이고 단조로워 보는 이의 입장에서 흥미를 느끼기가 어렵다.

비대칭형은 대칭형과 비교했을 때 좌우 레이아웃이 다른 형태를 말하는데, 비록 다른 객체들을 배치했더라도 시각적으로는 균형이 맞아야 하는 개념을 말한다.

즉, 양쪽의 무게감이 같아야 함을 말하는데 한쪽에 텍스트가 무수히 많다면 다른 한쪽에는 큰 이미지나 색이 강조된 이미지를 배치하는 등의 방식으로 양쪽에 균형감을 주는 것이다. 비대칭형은 디자이너의 감각에 따라 성공적인 디자인 여부가 갈리므로 수준 높은 테크닉과 경험이 필요하다.

4) 리듬감

리듬은 통일감 있는 디자인에 생기를 불어 넣는 역할을 한다. 화면에 구성된 요소들의 강약 조절, 점진적인 크기 조절, 각 요소들이 연속성을 가지고 반복되는 움직임 등을 말한다. 감초 같은 역할을 하는 요소이기 때문에 이를 전혀 활용하지 않으면 침체되고 어색한 느낌을 받게 될 수 있다.

5) 강조

강조는 주어진 공간 속에서 메시지를 분명히 하기 위해 특정한 요소를 강하게 하여 다른 요소들과 명확히 구분해 줄 때 사용되는 개념이다. 앞서 다른 개념을 설명할 때 언급했듯이, 역시 중요한 것은 각 객체들이 얼마나 조화롭게 배치되었는가를 고려해야 한다.

강조를 위해서는 주로 크기의 구분, 색채의 구분, 형태의 구분 통해 이뤄낼 수 있으며 이를 통해 시각적 효과와 분명한 메시지 전달이 가능해진다. 다만, 강조 요소가 너무 많으면 힘이 분산되어 오히려 역효과가 날 수 있으니 주의하도록 해야 한다.

레이아웃 활용 방법과 팁

​1) 레이아웃의 목적과 대상 정하기

누가 볼 것이고 무엇을 전할 것인가?

성공적인 레이아웃을 위해서는 목적과 대상을 분명히 정하고 시작해야 한다. 어떤 콘텐츠를 다루고 디자인을 하느냐에 따라 강조해야 할 포인트가 달라지기 때문이다.

교육 콘텐츠를 만들 때는 정보의 계층과 구조가 잘 드러나도록 해야 하며, 홍보 콘텐츠를 만들 땐 전달하고자 하는 메시지와 이미지가 강조되어야 한다.

그리고 디자인을 보게 될 연령은 어떠한지, 성별이나 관심사는 어떻게 되는지 명확히 알아야 이에 맞춰 색상이나, 폰트를 결정할 수 있다.

2) 공간과 비율 적절히 활용하기

제한된 공간 안에서 어떻게 배치할 것인가?

레이아웃을 할 수 있는 공간은 무한하지 않다. 지면이든 화면이든 특정한 범위 내에서 객체들을 배치해야 하기 때문에 이 안에서 어떻게 공간을 효율적이고 조화롭게 활용할 수 있는가를 깊게 고민해야 한다.

이를 위해 활용할 수 있는 개념으로는 적절한 여백 주기, 그리드에 맞춘 레이아웃, 시각적 흐름을 계산한 정렬 등이 있다.

여백은 보는 이에게 시각적인 휴식을 줌으로써 가독성과 통일감 부여하는 역할을 한다. 그리드는 객체들을 조화롭게 배치시키기 위해 수평, 수직으로 공간을 나누는 것으로 객체들이 구조적이고 균형감 있게 만들어주는 역할을 한다. 마지막으로 정렬은 객체들을 어느 쪽으로 위치 시켜 정보에 집중할 수 있도록 할 것인지 조절해 주는 역할을 한다.

그리고 객체들을 레이아웃함에 있어 비율도 고려해야 할 요소 중 하나인데 황금비율만 적재적소에 잘 적용해도 효과적인 배치를 이룰 수 있다. 황금비율은 1:1.618이며 다른 정수를 예로 들면 5:8의 비율 정도라 할 수 있겠다.

3. 색상과 폰트는 신중하게 선택하기

어떤 분위기를 표현할 것인가?

디자인에 있어 색상과 폰트의 사용은 분위기와 인상을 결정하는 매우 중요한 요소이다. 색상은 색채학의 이론을 먼저 어느 정도 숙지한 후에 각 색채가 어떤 이미지를 전달하는지 파악하여 의도성을 갖고 사용해야 한다.

예를 들어 따뜻한 톤의 색상은 친근하고 활기찬 느낌을 주며, 시원한 톤의 색상은 차분하고 신뢰감 있는 이미지를 전달한다. 폰트 또한 마찬가지인데 고딕체는 모던하고 간결한 느낌을, 명조체는 우아하고 감성적인 느낌을 준다.

색상이나 타이포그래피에 대한 부분은 아래 별도의 자료가 있어 본 레이아웃 자료와 함께 읽어두면 유용할 것이다.

색상 배색 방법

​

타이포그래피 썸네일

4. 이미지와 그래픽 효과적으로 사용하기

무엇을 강조하고 전달하고 싶은가?

디자인에서 정보를 보충하거나 강조할 때 이미지와 그래픽도 효과적으로 활용되는 요소이다. 품질이 우수하며 주제와 관련이 있는 이미지를 사용한다면 다른 객체나 메시지를 보조하여 연상작용을 통해 쉽게 이해할 수 있도록 도울 수 있다.

이와 관련하여 적절한 사진이나 배경 선택, 아이콘, 도형, 차트 등의 요소들을 제작하거나 선택하는 것에도 상당한 공을 들일 수 있어야 한다. 이러한 이미지와 그래픽이 더해졌을 때 전달하고자 하는 메시지와 객체를 더욱 돋보이게 할 수 있으며 다양한 분위기와 감성을 전달할 수 있다.

단, 이미지나 그래픽을 준비함에 있어 시간이 많이 소요되기 때문에 인터넷상에서 쉽게 구하는 방법을 택하다 저작권 문제를 일으키기 쉬운데, 저작권 무료 사이트들을 알아두었다가 필요할 때 가져다 쓰도록 하는 것이 좋다.

5. 앞서 언급한 레이아웃 구성 개념들 숙지하여 적용하기

실전 적용을 위해 반복적인 연습이 필요하다.

본 자료에서 레이아웃 구성 개념으로 통일감, 변화, 균형감, 리듬감, 강조를 소개하였는데, 이론적 습득에만 그치지 말고 연습을 통해 실전에 적용하고 익숙해지도록 해야 한다.

디자인은 경험과 감각에서 나오는 것이기 때문에 몸에 배어있지 않으면 아이디어가 잘 떠오르지 않아 창작의 고통에 시달리는 시간이 길어질 것이다.

6. 피드백과 수정 반복하기

피드백을 통해 완성도를 높여가자.

디자인은 주관적인 영역이기 때문에 단번에 완성도 높은 결과물을 도출해 내기 쉽지 않다. 다만 반복된 피드백과 수정을 통해 개선해 나갈 수 있는 영역이며, 이를 두려워하지 않고 다른 사람의 평가나 의견을 들을 수 있는 마음가짐이 필요하다.

피드백은 자신이 디자인한 목적과 대상에 초점을 맞춰 새겨듣고, 수정을 할 땐 이러한 피드백과 디자인 원칙들을 바탕으로 레이아웃을 하나씩 고쳐나가야 한다.

이상으로 예뻐 보이는 디자인을 위해 어떻게 레이아웃을 구성해야 하는지 개념과 원리, 적용 방법 등을 알아보았다. 단어만 놓고 보면 어떻게 ‘배치’하는가이지만 이 배치를 어떻게 하느냐에 따라 시각적인 아름다움과 정보의 전달이 확연하게 달라진다는 것을 명심해야 한다. 본 자료에 담은 레이아웃의 개념과 링크한 색상, 타이포 등의 개념을 조화롭게 사용하여 아름다운 디자인을 도출해 내는 결과가 있기를 바란다.