레이아웃을 한마디로 정의한다면, 제작물의 큰 아이디어(idea 이자, 조화를 이룬 독특한 형태(form)라 할 수 있습니다. 즉, 타이포그래피 사진 및 일러스트레이션, 색상, 여백 등의 각 구성요소를 제한된 공간 안에 배열하는 것을 말합니다.

레이아웃의 주 목적은 대중들이 의식적인 노력 없이도 시각적

구성요소를 수용할 수 있도록 전달하는데 있습니다.

또한 필요한 부분을 쉽게 찾도록 도와줄 수 있어야 하는데, 일반

적으로 디자인에서 레이아웃이란 주어진 공간 안에서 시각적

구성요소들을 보기 좋게 배치, 구성하는 일련의 과정이라 할 수

있습니다.

여기서 시각적 구성요소란, 타이포그래피, 사진, 일러스트레이

션, 색상, 여백 등을 말하며, 통일, 변화, 균형, 율동, 강조 등의 구

성 원리도 중요한 사항입니다.

더불어 주목성, 가독성, 명쾌성, 조형성, 창조성 등도 고려해야

할 기본 조건입니다.

9호 14/04/30

01

http://blog.naver.com/cestlart/50192029318

이미지와 타이포가 조화롭게 배치되어 균형을 이루고 있음. ▶

타이포를 쓸 때에는 차분함도 중요하지만 적절한 강조

도 필요합니다.

타이포그래피에서 강조란 '어느 한 요소‘ 또는 '특정한

몇 개의 요소'가 다른 요소와 달라 보이도록 하는 것이

며 대비란 요소들과의 차별화 뿐 아니라 이를 넘어서

그 이상의 '전체적 강조' 또는 조화를 이끌어 내는 것을

의미합니다. 즉 대비는 상이함을 통해 두 요소의 시각

적 에너지를 강화시켜 전체적 강조를 의미합니다.

한 종류의 서체/ 한 종류의 크기/ 한 종류의 중량으로

도 강조가 가능하므로 또 다른 크기나 중량을 굳이 사

용할 필요가 없습니다. 지나친 강조는 메시지의 본질

을 호도할 뿐 아니라 어수선한 인상을 줍니다.

02

1. 타이포그래피

효과적인 레이아웃을 위한 구성 요소

http://onrepeat.net/2011/03/quebra-ruas/

http://designspiration.net/image/61074576527/

▲ 적절한 배치와 폰트를 사용하여 감각적인 레이아웃을 완성.

▲ 다양한 폰트를 잘 짜인 그리드 안에 넣음으로서 조화를 이룸.

합리적인 서체와 스타일의 사용은 디자인에 관련된 모든 요소, 즉 이미지 타입, 그래픽 요소, 색상, 레이아웃, 디자인

포맷, 마케팅 등, 디자인과 관련된 모든 행위를 총체적으로 관리하는 시각 디자인의 근본이라 할 수 있습니다. 주제에

부합하는 서체를 사용하는 것이 가장 좋고, 본문은 두 가지 정도의 서체로 차분한 느낌을 주는 것이 좋습니다.

레이아웃에서 이미지 자체는 글의 내용을 보충해주기

도 하지만, 동시에 독자들의 시선을 사로잡게 만드는

매우 중요한 요소입니다. 이미지가 주는 비언어적인

요소들은 구도와 시선의 이동, 여백, 색상 등에 따라 전

체적인 레이아웃에 생동감을 줄 수도 있으며, 메시지

전달에 효율적일 수 있습니다.

a. 일러스트레이션

일러스트레이션은 과장된 표현을 하거나 특징을 강조

하는 등 극적인 효과를 내는데 적합합니다. 따라서 추

상적인 개념을 전달하고자 할 때나, 사실보다 다른 요

소들을 강조하고 싶은 경우에 유용할 수 있습니다. 물

론 때에 따라서는 둘 다 적재적소에 활용하는 것도 좋

습니다.

b. 사진

사진은 레이아웃에서 보는 이의 관심을 집중시키는데

효과적으로 사용될 수 있어야 합니다. 좋은 사진의 조

건으로는 글의 핵심을 정확하게 전달해야 하며, 무엇

보다도 독자들의 감정적인 동요를 유도할 수 있어야

한다는 점입니다.

02

2. 이미지

따라서, 좋은 이미지들을 선택하기 위해서는 글의 내용을 충분히 대신할 수 있으며, 전달하고자 하는 핵심을 명확

하게 보여주는 이미지, 그리고 공간감과 안정감은 물론 글의 내용과도 조화를 이룬 짜임새 있는 이미지가 좋습니

다. 또한 기본적으로는 해상도가 높고 이미지 자체로 흥미로운 것이면 더할 나위 없이 좋습니다.

http://blog.naver.com/cestlart/50192029318 http://blog.naver.com/cestlart/50192029318

http://blog.naver.com/cestlart/50192029318

▲ 사진으로 시선을 집중시키고 텍스트를 사진의 각도에 따라 맞춘 레이아웃 이미지에 생동감을 줌.

▲ 바둑판식 그리드에 사진과 텍스트를 적절히 사용하여 조화로운 레이아웃을 보여줌.

▲ 바둑판식 그리드에 사진과 텍스트를 적절히 사용한 조화로운 레이아웃.

색상은 시선을 유도하고 은연중에 그룹핑(grouping)하

게 만들어주는 효과를 지니는 중요한 요소입니다.

레이아웃 디자인 시 색으로 정보를 분류하여 원하는 정

보를 쉽게 찾을 수 있게 해 줍니다.

색상 분류를 사용한 레이아웃 디자인은 아이콘과 마찬가

지로 글 또는 색만 사용했을 때보다 훨씬 많은 정보를 전

달해 줍니다.

기본적으로 색 '상징주의(color symbolism)'에 따라서 사

물을 인식하는데 우선순위를 정하게 할 수 있습니다.

명심해야 할 점은, 일부에 국한된 아름다움에만 취해 색

상을 선택했다가 처음 전체의 맥락을 저해하는 결과를

낳을 수 있으니 늘 전체 디자인 콘셉트를 유념해 두어야

합니다.

02

3. 색상

▲ 색상에 아이콘을 결합.

또한 색상만으로도 정보 체계를 파악할 수 있습니다.

성격에 맞는 색상을 사용하여 크고 대담한 필치로 긴

텍스트 중간에 문득 한 호흡 쉬어가는 공간을 만들거

나 다음에 이어질 내용에 대한 흥미를 유발할 수도 있

습니다.

http://canvas.is/#/difference

http://theblack7.blog.me/100161792575

http://www.cresyn.com/main.php

▲ 색상을 전면에 사용하여 정보를 분류한 레이아웃.

▲ 별다른 아이콘 등의 요소가 없이 색상으로 분류하여 주목도를 높임.

꾸미지 않은 디자인은 보는 이의 시선을 곧장 사진이나

일러스트레이션으로 유도합니다. 즉, 독자는 아무런 방해

없이 가장 중요한 볼거리에 빠져들게 됩니다.

여백을 창조하는 법

언제나 디자이너는 작품의 내용에 따라 텍스트와 이미지

를 공간에 배치합니다. 텍스트가 사진이나 예술 작품, 도

표를 언급한다면 그 옆에 해당 이미지를 배치하는 것이

당연합니다. 글을 읽다가 그 내용에 맞는 사진을 찾아 페

이지를 앞뒤로 넘겨봐야 한다면 독서 효과가 떨어질 수

밖에 없습니다.

아울러 작품의 비율도 중요합니다. 작품의 상세한 부분

까지 잘 알아볼 수 있게끔 이미지를 확대하면 화면이 매

우 강렬해집니다. 독자의 시선을 끌고자 한다면 이미지

주위에 다른 요소들을 배치하기보다는 그 주변을 비워놓

는 편이 좋습니다.

02

4. 여백

http://www.tm-research-archive.ch/issue/1979-1/ http://designspiration.net/image/391187497990/

http://blog.naver.com/bonomv/207467165

▲ 여백을 이용하여 이미지의 주목도를 높인 레이아웃 디자인.

언제나 비례를 염두에 두고 디자인 페이지 아래의 요소

까지도 넉넉한 여백을 두고 배치하는 게 좋습니다.

황금비율

디자이너들은 보통 자신의 눈과 느낌에 따라 가장 균형

잡힌 비율을 찾아냅니다. 그런데도 공간을 설계하는 예술

가들 모두가 비슷한 비례와 비율을 사용하여 비슷한 결

과를 보여줍니다. 수천 년 동안 화가와 건축가들은 ‘황금

비율’을 즐겨 사용해 왔습니다. 이 황금비가 사람으로 하

여금 안정감과 균형 감은 물론 가장 아름답다고 느끼게

한다고 알려져 있기 때문에 황금비율이라 말하는 것인데

요. 실제로 세계적으로 알려진 유명한 예술작품에서도 황

금비율을 활용하였으며, 근래에 들어서는 기업들이 황금

비율을 사용하여 제품을 개발하고 디자인하며 마케팅을

펼치기도 합니다.

02

5. 비례

▲ 단순해 보이는 로고지만 레이아웃 분석 시 황금비율로 로고의 모양이 결정된 것을 볼 수 있음.

▲ 사진이 주가 되는 상단과 맞추기 위해 넉넉한 여백을 두고 배치하여 비례를 맞춤.

http://designspiration.net/image/2532205579256/ http://designbyforest.tistory.com/entry/피보나치-비율

수치로 나타내면 약 1 : 0.618로, 쉽게 말해 가로가 짧고

세로가 길 때, 즉 가로 : 세로 = 세로 : 가로+세로입니다.

디자이너들은 대부분 황금 비율을 의식적으로 사용하거

나 거론하지는 않지만, 많은 디자인 서적에서 황금 비율

을 주요하게 다루고 있으므로 알아두면 좋을 것 같습니

다.

본 리포트는 원문 http://blog.naver.com/invisibleimp/30149847363,http://blog.naver.com/sharon0208/80211102784,

http://blog.naver.com/buddy1358/70177029538, 레이아웃 불변의 법칙 100가지(베스 톤드로 지음)의 내용을 가지고 재 편집한 글 입

니다.

a. 다양한 그리드, 타이포의 활용

그리드를 포기함으로써 성공하는 그리드도 있습니다.

글자 크기와 형태 두께 등을 이용해서 주목을 끌 수 있습

니다. 물론 명확하고 계획적인 판면을 구성하기 위해서는

특정 요소를 반복적으로 나타내는 것이 중요하지만, 아무

런 변화 없이 같은 요소를 반복해서는 독자를 지루하게

할 뿐입니다. 이미지에 변화를 주어 답답한 구성을 피해

효과적으로 내용을 표현할 수 있습니다.

b. 색다른 요소의 첨가

성격이 명확한 단 그리드가 필요한 작업에서는 실루엣을

삽입하거나 혹은 그래픽 요소를 전혀 예상 밖의 방식으로

배치하여 디자인의 품격을 높일 수 있습니다.

모든 디자인의 가장 첫 번째는 레이아웃 구성입니다.

처음에 콘텐츠 성격에 따라 레이아웃을 어떤 식으로 잡을지 방향을 잘 결정하는 것이 디자인의 프로세스를 원활하게 만듭

니다. 그동안 여러 가지 작품을 만들면서 디자인을 하기 전에 레이아웃이 약간 불안정한 디자인은 항상 중간에 레이아웃을

콘텐츠에 따라서 다시 바꾸게 되는 상황이 발생했습니다. 그렇게 되면 작업 시간도 늘어나고 처음에 의도와 맞지 않는 디

자인이 만들어질 가능성이 높습니다. 그렇기 때문에 콘텐츠의 성격을 제대로 파악하고 레이아웃을 확실히 구성하는 것이

중요합니다.

▲ 절제된 타이포그래피에 사진을 끼워 넣음으로써 이미지에 생명력을 더함.

http://designspiration.net/image/4912550879/

▲ 타이포를 설명하고자 하는 내용에 맞춰 자유로운 배치로 효과적인 레이아웃을 완성.

http://designspiration.net/image/4912550879/

6. 기타요소

기획, 편집 : 황인택, 김다영 발행처 : 디자인실