[번역]형태와 여백의 관계
Design Principles
게슈탈트 이론 중 형태와 여백의 관계(Space and the figure relationship)이 디자인에 어떻게 적용될 수 있는지에 대한 포스트입니다. 빈 여백을 요소들이 차지하고 남은 공간이라고 여기지 말고 콘텐츠를 구분짓고, 시선의 흐름을 유도하며 주제를 커뮤니케이션 할 수 있는 중요한 디자인 요소로써 사용할 것을 말하고 있습니다. 여백을 잘 활용한 디자인은 고급스럽고 깨끗한 느낌을 준다고도 하네요. 여러가지 웹 디자인의 예를 들며 여백의 역할에 대해 이야기해주고 있어 쉽게 이해할 수 있을 것 같습니다. 여백은 보통 더 이상 채울 것이 없을 때 어색하지 않게 남겨놓는 대상이였던 것 같습니다. 이 포스팅를 보니 여백을 커뮤니케이션의 도구로써 사용하는 방법에 대해 좀더 고민을 해봐야 할 것 같습니다.
(이 글은 Smashing Magazine에 Steven Bradley가 올린 Design Principles: Space And The Figure Ground Relationship을 번역한 글입니다.)
그래픽 디자인을 캔버스 위에 나열된 형태들로 이루어진 것으로 보고 있다면, 절반밖에 보고 있지 않은 것이다. 캔버스의 여백(negative space)도 캔버스 위에 놓인 요소들만큼 중요하다.
디자인은 형태와 여백의 조합이다. 여백을 가지고 좀 더 효율적으로 작업을 하려면, 여백을 인식하고 보는 방식 - 여백이 만들고있는 형태와 여백이 커뮤니케이션하는 방법 - 에 대하여 알아야 한다. 이것은 초보자를 위한 디자인 이론 중 두 번째 시리즈이다. 첫 번째 파트는 게슈탈트 이론에 대해 소개하였다. 이 포스트를 포함한 나머지 시리즈들도 게슈탈트 이론에 근거한 내용들이며, 우리가 디자이너로서 알고 있는 수많은 근본 원리들이 대부분 게슈탈트 이론에 근거해서 나왔다는 것을 보여줄 것이다.
형태와 여백의 관계
게슈탈트 이론 중 여백에 대해 가장 잘 다루고 있는 이론은 형태와 여백 이론이다. 당신이 디자인하는 모든 것은 형태 또는 여백으로 보일 것이며, 그들의 관계는 서로 배타적이다. 형태와 여백은 서로의 관계를 통해서만 인식될 수 있고, 다른 하나를 바꾸지 않은 채 하나만 바꾸는 것은 불가능하다.
형태와 여백의 관계는 또한 상호보완적이다. 형태와 여백은 서로를 강화하거나 방해할 수 있으며, 두 가지를 조화롭게 조직하는 것은 디자인에서 가장 중요한 작업 중 하나다. 형태와 여백은 디자인이 커뮤니케이션하고 해석되는 맥락을 결정한다.
"여백은 단순한 배경이 아닌, 살아있는 요소로 간주되어야 한다." - 얀 치홀트
형태와 여백의 관계 Figure Ground Relationship. (Image credit: “Elements of Graphic Design”, Alex White)위의 세 가지 패널을 보자. 좌측의 것은, 사이사이의 흰색 여백과 같은 두께를 가지고 있는 검은 줄을 볼 수 있다. 검은 줄과 흰색 여백은 회색 을 형성하는데 서로 동일한 역할을 하고 있다. 여백을 없애면(두 번째 패널) 패널 영역은 검은색으로 채워진 형태로 완전히 바뀌어 버린다. 여백만 없어진 것이 아니고, 각각의 검은선들이 하나의 요소로 변경된 것이다.
세 번째 패널을 보면, 두 개의 검은 라인이 제거되었다. 이 것은 회색 영역 위에 놓인 듯 보이는 여백을 형성하고 있다. 여백이 형태가 되면서 디자인에 깊이를 만들고 있다.
여백여백안정된, 반대의, 모호한 형태와 여백의 관계 Stable, reversible and ambiguous figure ground relationships.형태와 여백의 관계에는 세 가지 타입이 있다.
안정된 Stable (좌측 이미지)
무엇이 형태이고, 무엇이 여백인지 분명하게 구분이 된다. 형태 또는 여백이 뚜렷이 차이가 나게 보인다.
반대의 Reversible (가운데 이미지)
형태와 여백이 보는 사람의 주의를 동일하게 이끌고 있다. 하나가 다른 하나를 따라가는 긴장감을 형성하면서 다이내믹한 디자인을 만든다.
모호한 Ambiguous (우측 이미지)
요소들은 형태로 보일 수도 있고 동시에 여백으로 보일 수도 있다. 형태와 여백 모두 흥미로운 형태를 이루고 있으며, 보는 사람 나름대로 형태와 여백을 구분 지을 수 있다.
형태와 여백에 대한 관계를 어떻게 정의하고 밸런스를 맞추느냐에 따라, 보는 사람에게 디자인을 다른 관점으로 보게 할 수 있고 다른 맥락에서 디자인을 해석하게 할 수 있다.
형태와 여백 이론은 게슈탈트의 공간에 대한 유일한 이론은 아니다. 아래 두 가지 이론이 더 있다.
근접 Proximity
근접의 원리는 공간에서 요소들을 둘러쌈으로써 서로를 연결하고 분리한다. 페이지 안의 문단의 형태를 쉽게 접할 수 있는 예로 들 수 있다. 문단들 사이의 간격은 문단 안의 문장들 사이의 간격보다 넓게 함으로써 문단을 구분하고 있다.
폐쇄 Closure
이 이론은 요소들 사이의 공간을 끊어진 부분으로 이용한다. 보는 사람은 전체적인 형태를 완성시키기 위해 그들이 갖고 있는 정보로부터 공간을 매우려고 한다. 공간이 너무 크면 끊어진 부분을 매울 수 없다. 공간이 너무 작아도 폐쇄의 이론은 필요 없게 된다. 공간과 형태가 적절한 균형을 이루고 있을 때 공간이 끊어진 부분을 매울 수 있다.
폐쇄 Closure디자인 요소로서의 여백
잠시 음악에 대해 생각해보자. 모든 음이 동시에 연주된다면, 소음으로만 들릴 뿐, 음악이 만들어지지 않는다. 음악은 소리와 정적이 대비를 이룰 때 만들어지는 것이다. 소리와 정적의 패턴을 다양화하여 리듬과 멜로디를 만든다. 정적 없이는 음악도 없다.
시각적으로 여백이 정적과 같은 역할을 한다. 여백은 요소들이 숨 쉴 수 있는 여지를 마련해 준다. 공간은 눈이 디자인을 훑어보면서 찾고자 하는 요소들을 발견할 수 있도록 해 준다. 포지티브는 네거티브와의 대비를 통해서만 보일 수 있다. 여백 없이는 디자인이 성립되지 않는다. 시각적인 잡음만 있을 것이다.
잡음을 커뮤니케이션하려고 하는 것일지라도, 여백이 있어야 한다. 사람들은 여백이 너무 많을 때 보다 너무 적을 때 더 불평을 한다.
여백은 아래와 같은 역할을 할 수 있다.
대비를 이루며 강조를 하고 계층구조를 만든다.
극적인 느낌과 긴장감을 만든다
요소의 그룹들 사이에 시각적인 여유를 준다.
형태와 여백의 관계는 무언가가 존재할 경우에만 여백이 생긴다는 것을 의미한다. 어떤 요소가 존재하기 전에는 여백이 정의될 수 없다. 형태와 여백의 관계는 여백이 존재하고 커뮤니케이션이 시작되기 전에 수립해야 한다.
여백에 대한 더욱 중요한 기능은 가독성을 향상한다는 것이다. 큰 여백(Macro-space)은 텍스트를 더욱 눈에 띄게 만들고, 작은 여백(Micro-space)은 더욱 읽기 쉽게 만든다.
작은 여백(Micro-space)
글자, 단어, 문단 사이의 여백과 같은 그룹핑된 요소들 안에 있는 여백을 의미한다.
큰 여백(Macro-space)
큰 요소들 사이의 여백을 말한다. 요소들 또는 그룹을 분리하고 시선이 이동하는 길목이나 쉬어갈 공간을 만들어 준다.
여백은 퀄리티와 관련이 있다. 여백이 많다는 것은 요소가 적거나 희박하다는 것을 의미한다. 명품샾과 할인매장을 비교해 보자. 어느 곳이 여백이 많은가? 그리고 어느 곳이 모든 여백에 제품을 쌓아두는가? 여백이 당신에게 무엇을 말하고 있는가?
여백은 퀄리티뿐만 아니라 아래와 같은 것들을 전달한다.
교양(sophistication)
단순함(simplicity)
고급스러움(luxury)
깨끗함(cleanliness)
고독(solitude)
개방성(openness)
여백의 성격을 고려하지 않고 사용한다면 단순히 여백을 낭비하게 될 것이다. 그리고 필요 이상으로 채우더라도 여백을 낭비하는 것이다. 요소들 사이에 갇힌 여백이 다른 여백으로 연결이 되지 않아도 여백을 낭비하는 것이라고 볼 수 있다.
디자인은 궁극적으로 형태들을 배열하는 것이고, 여백을 통해 형태를 형성하는 것이기도 하다. 여백을 사용하는 것을 두려워하지 말라. 당신이 제어할 수 있는 중요한 디자인 요소라고 생각하자.
웹사이트에서의 여백에 대한 예
여백을 더 잘 사용하기 위해, 당신은 의식적으로 그것을 인식하고 있어야 한다. 여러 가지 디자인에서 여백을 인식하는 법을 배워라. 여백이 형성하는 형태를 알아차려라. 그리고 그 여백이 무엇을 전달하는지 생각해 보아라. 몇 가지 웹사이트들에서, 여백이 어떻게 사용되는지 살펴보도록 하자.
OLD GUARD
존슨의 Old Guard는 텍스트와 다른 요소들에게 숨실 공간을 만들어주기 위해 빈 여백을 많이 사용하고 있다. 무엇이 형태이고 무엇이 여백인지 확실히 구분이 된다.
Old Guard는 텍스트와 다른 요소들에게 숨실 공간을 만들어주기 위해 빈 여백을 많이 사용하고 있다.여백이 그룹핑된 요소들을 구분 지으면서 정보를 담거나 분리하고 있다.(근접의 원리를 생각해보자). 포스트 사이의 여백만으로도 하나의 포스트가 끝나는 지점과 다음 포스트가 시작되는 지점을 쉽게 알아차릴 수 있다.
메인 콘텐츠는 양쪽의 충분한 여백과 함께 페이지 중앙에서 약간 벗어나 있다. 이 공간은 중간중간 포스트들에 의해 채워지며, 여백과 포스트들이 만드는 공간이 시선을 끌고 있다.
HEROKU'S STATUS PAGE
아래의 이미지는 대부분이 여백으로 이루어진 히로쿠의 상태 페이지이다.
요소들은 플랫폼에서의 이슈들을 리포팅하고 있다. 여백이 많을수록 서비스에 문제가 없다는 것을 의미한다.
여백이 꼭 흰색일 필요는 없다. 페이지에서 여백이 꽤 많지만, 사용자가 여백이 많다고 불평을 하지는 않을 것 같다. 중요한 정보(상태 업데이트와 이슈 리포트)만이 여백을 차지하고 있다.
INTRODUCING THE NOVEL
Introducing the Novel의 상단 여백은 비대칭적이고 활동적인 느낌을 주고 있다.
Introducing the Novel의 상단 여백은 비대칭적이고 활동적인 느낌을 주고 있다.밝은 색의 얇은 라인이 블록을 구분하며 그룹핑을 하고 있다. 라인은 눈에 잘 띄지 않으며 공간이 콘텐츠를 둘러싸며 다른 여백들로 연결되고 있다. 라인은 여백이 합쳐지는 것을 방지하고 있다.
ELLIOT JAY STOCKS
Elliot Jay Stocks 웹사이트는 매우 친근해 보일 것이다. 웹사이트의 비대칭적인여백은 활성화된 공간으로 시선을 이끈다.
웹싸이트의 비대칭적인 여백은 활성화된 여백으로 시선을 이끈다.페이지 상단의 큰 이미지는 이미지 하단의 콘텐츠에 접근하기 위한 용도의 영역으로 적용되었을 수도 있다. 그러나 이미지 다음에 오는 충분한 여백은 시선이 머물 수 있는 넓은 공간을 제공하고 있다. 좌측의 사이드바가 메인 콘텐츠 영역과 같은 색상이었다면, 이미지 주위에서 시선이 머물기 더 쉬웠을 것이지만, 컬러가 다르다고 해서 큰 영향은 없을 것이다.
위의 웹사이트처럼, 여백은 구분되는 정보의 그룹을 묶거나 분리하여 각각의 그룹을 눈에 띄게 함으로써 시선이 원하는 것을 찾거나 빈 공간에 머물도록 한다.
PHIL COFFMAN
Phil Coffman의 웹사이트의 콘텐츠들은 넓은 여백 안에서 단일한 형태로 이루어져 있다. 요소들이 거의 없어 존재하는 요소들의 중요성을 부각하고 있다.
콘텐츠들은 넓은 공간 안에서 단일한 형태로 이루어져 있다.여러 가지 색상의 사각형 배경 안에 있는 텍스트도 쉽게 읽히고 다른 카테고리들과 혼동되지 않기 위해 주변에 충분한 여백을 가지고 있다.
요소들은 여러 브라우저의 너비에 반응하여 맞춰지지만, 넓은 여백에 둘러싸인 하나의 큰 형태의 패턴은 계속 유지된다.
NEW ADVENTURES IN WEB DESIGN
소개된 많은 웹사이트들처럼, NEW ADVENTURES IN WEB DESIGN의 2013년 웹사이트는 요소들 주변에 충분한 여백을 가지고 있다. 구분되는 정보의 그룹은 여백에 의해 나뉘어 있고, 디자인 전체적으로 여백이 살아있는 느낌이다.
New Adventures 웹싸이트는 요소들 주변에 충분한 여백을 가지고 있다.주목할만한 것은 좌측 상단 이미지와 우측 메인 콘텐츠 사이의 회색의 둥근 화살표이다.
이 화살표가 여백의 흐름을 방해하고 있는가? 화살표들이 여백의 흐름을 제한하는 것처럼 보여도 여백에 걸쳐있는 부분은 점선으로 되어 있기 때문에 여백이 화살표에 방해받지 않고 흐를 수 있다.
밝은 회색의 색상이 화살표를 튀어 보이지 않게 하고 여백이 화살표 너머로 흐른다는 느낌을 주고 있다.
이 스크린샷을 찍은 브라우저는 폭이 넓어서 화살표가 메인 콘텐츠를 덮지 않았지만, 폭이 1280px 이하로 줄었을 때는 디자인이 단일 칼럼으로 변하면서 화살표가 메인 콘텐츠를 덮게 된다. 화살표가 없으면 좀 나았겠지만, 전반적으로 여백의 흐름이 방해받지는 않는다.
로고의 몇 가지 예
여백이 디자인의 한 부분으로써 적용된 몇 가지 로고를 보여주려고 한다. 각각의 디자인에서 여백이 어떻게 사용되었는지 설명해주는 대신에, 기본적인 언급만 할 테니 여백은 직접 찾아보길 바란다.
아래의 로고들이 형태와 여백의 관계를 어떻게 적용하고 있는지 찾아보자. 어떤 로고에서는 형태와 여백을 발견하기 전에는 전체 로고의 형상을 알아차리지 못할 것이다. 형태와 여백 모두 커뮤니케이션을 위해 필수적인 요소들이다.
아래의 로고 중 많은 로고들이 폐쇄의 법칙을 보여주고 있다. 그 부분을 보여주려는 것은 아니지만, 어쩔 수 없이 보게 될 것이다. 몇몇의 로고는 형태와 여백의 법칙을 보여주고 있다. 전체 로고에서 봐야 할 것은 여백이 그 안에 담긴 작은 형태로 인해 형태가 된다는 것이다. 이 형태와 여백의 뒤집힌 관계가 커뮤니케이션할 내용의 중심을 이루고 있다.
다양한 로고가 여백을 잘 활용하고 있다.요약
이 포스트를 통해 두 가지 중요한 점을 알았으면 좋겠다. 첫 번째는 디자인에서 여백을 사용하는 방법과 형태와 여백에 대한 게슈탈트 이론의 관계이다. 게슈탈트 이론은 우리가 디자이너로서 하는 작업의 많은 부분에 깔려 있는 이론이다.
두 번째는, 아마도 더욱 중요한 점으로, 디자인에서 여백이 어떻게 사용되었는지 관찰하려고 더욱 노력을 하라는 것이다. 여백을 요소들이 차지하고 남은 부산물로 만들지 말아라. 요소들을 디자인하는 방법 이상으로 여백을 디자인하는 방법을 배워라. 페이지의 모든 레이아웃은 여백으로써 구성된 형태라고도 볼 수 있다.
여백에 대해 깊이 있게 분석하고, 더욱 나은 디자인을 위해 신중히 사용하여라. 그저 남겨진 부분으로 여기지 말아라. 디자인의 필수적인 요소로 보고, 여백과 요소의 관계를 당신이 만드는 디자인의 한 요소로서 다루어라.
원문 출처 :
https://www.smashingmagazine.com/2014/05/design-principles-space-figure-ground-relationship/
