찰스 왈쉬레거 외 2명
원유홍 역
"디자인의 개념과 원리"
안그라픽스 출판
1998
334p~422p 참조







브루노 무나리
김윤주 역
"예술로서의 디자인"
일지사 출판
1976
38p~41p 참조

여러분 안녕하세요. 두 번째 주입니다.
지난주에는 커뮤니케이션 도구로서 문자매체에서부터 뉴미디어로의 변천과정을 알아보았습니다. 이번 주에는 기초적인 시각디자인의 이론들을 차례로 소개하고 이를 웹 디자인 방법론으로 어떻게 수용할 수 있는지에 대해 말하고자 합니다. 이를 위해서 인간이 형태를 지각하는 심리적 특성과 이를 사용한 디자인 조화의 문제 그리고 구체적 그래픽요소로의 발전에 이르는 과정을 하나씩 살펴봅니다.

형태의 지각

하얀 종이 위에 점을 찍고 어린이들에게 이것이 무엇으로 보입니까? 라고 한다면 얼마간 후에 여러 가지 해석들을 할 것입니다. 벽 위에 앉은 파리라던가 하얀 눈밭에 떨어진 새똥이라던가 뭔가 현실세계에 있는 그 무엇으로 이해하려고 시도하고 나름대로 규정할 것입니다 . 물론 성인들에게는 이러한 질문은 정답이 없으므로 뭔가 음모가 있다는 생각에 대답을 꺼리겠지요. 우선 화면 위에 하나의 점은 비로소 뭔가 있다는 뜻이며 주위를 끄는 기본단위가 됩니다. 어떤 사람이 형태를 마주하게 될 때는 우선적으로 그 형태의 1차적 특성들을 관찰하게 됩니다. 그 형태가 길쭉한가. 각이 있는가. 있다면 몇 개의 각으로 이루어져 있는가 등 아주 기초적인 기하학적 정보를 받아들이고 난 후에 이전에 경험했거나 배웠던 것과 유사한 형태, 혹은 사물들과 연관지어 그 형태를 판단하기 시작합니다. 만약에 익숙하지 않은 형태가 있다면 이것을 관찰하기 위한 추가적인 시간이 필요하고, 마침내 이것을 이름지으려 하거나 묘사하려고 하는 시도가 행해질 것입니다. 만약에 관찰자가 새로 접하는 이미지를 자신의 경험이나 과거에 알고있던 이미지들과 연관 지을 수 있다면 정보에 대한 해석은 명확해지지만, 반면에 어렴풋이 알고 있는 경험이나 이미지와 정보를 연관지을 수 없다면 그 해석은 불분명해질 것입니다.

실험을 통하여 지각 심리학자들은 단순한 형태가 복잡한 것 보다 더욱 정확하게 혹은 쉽게 지각될 수 있다고 합니다. 예를 들어 원, 삼각형, 사각형과 같은 단순한 기하학적 형태들은 타원이나 다면체 혹은 자유곡선에 의한 형태와 같은 복잡한 형태보다는 쉽게 인지된다고 하며 이러한 실험결과는 일반 대중을 상대로 하여 기호나 형태 즉, 빠른 판단을 요구하는 사인이나 쉽게 인식되고 기억되어야 하는 심벌을 디자인하는데 응용됩니다. 우리는 실지로 도로표지판이나 기업 심볼들을 볼 때 이러한 원리를 이해할 수 있으며 빠른 시간 안에 정확히 정보를 전달해야 하는 포스터의 경우에서도 많이 발견할 수 있습니다.

              
 
이 14세 시대의           현재의 도로 표지루
도로굴곡표지
    

기하학적 형태로 표현한 포스터
이코 다나카 작 1981

게슈탈트 심리학자들은 형의 우수성(Figure goodness)을 설명하는 몇 가지 자질로서 단순성, 규칙성, 대칭성, 기억의 용이성을 들고 있으며 이와 함께 형에 있어서의 서로 하나의 형태로 인식되는 여러 가지 그루핑(Grouping) 법칙을 발표했습니다. 사람들이 시각정보를 보고 해석하는 방법을 이해하면 웹페이지 레이 아웃에서 뿐만 아니라 예술가나 건축가에게도 구성과 형에 의미를 부여하는 작업을 하는데 있어 성공할 확률을 높여 줍니다. 게슈탈트 그루핑 법칙에서 가장 일반적인 것에는 유사성(Similarity), 근접성(Proximity), 폐쇄성(Closure), 연속성(Good continuation)이 있습니다.

001.유사성과 근접성
이는 서로 가까이 있거나 비슷한 성격의 물체들을 다 함께 하나의 부류로 보는 경향이 있다는 것입니다. 여기서 이미지의 성격에는 형태뿐만 아니라 색채, 질감, 명암 등도 포함되며 이러한 법칙은 이미지와 문자를 평면 위에서 정보를 몇 개의 종류로 나누어 구성할 때 참고할 수 있습니다.

   OOOO O OOO  물체간의 근접성은      
   OOOO O OOO  하나의 그룹으로     
   OOOO O OOO  보이도록 합니다.  
   OOOO O OOO   
 
   O O T O O   근접성이 같을 경우에는  
   O O T O O   물체의 성격이 닮은 것끼리
   O O T O O   그룹지워져 보입니다.
   O O T O O
 
   OO WW OOOO  유사성과 근접성이 
   OO WW OOOO  함께 적용되면 
   OO WW OOOO  구분은 더욱 
   OO WW OOOO  명확해 집니다.
 
   K  K  K  K  유사성과 근접성은 
   O  O  O  O  그 정도에 따라
   K  K  K  K  어떻게 든 조절 되어질 수 
   O  O  O  O  있습니다.

002. 폐쇄성
폐쇄성은 근접성과 더불어 지각되는 형태에서 나타나는 특성으로 관찰자는 불완전한 형이나 그룹들을 완전한 형태나 그룹으로 완성시키려는 경향이 있다는 것입니다. 이는 문자의 그룹들을 한 화면 안에 어떻게 배치할 것인가에 영향을 미치게 됩니다.

   o         o   형태의 그룹을 인간이 순간적으로 
                 인지 했을때 각 점들을   
                 서로 닫힌 구조로 파악하여 
                 완전한 사각형으로
   o         o   인식하려는 경향을 보입니다. 

003. 연속성
연속성은 어떤 형태나 그룹이 방향성을 가지고 연속되어 있을 때 이것은 형태 전체의 고유한 특성이 될수 있다는 것으로 앞서 설명한 폐쇄성을 의도적으로 사용하는 경우라 하겠습니다.

하나하나의 단위들이 연결되어 있는 전체의 형태는
단위형태 보다도 더 큰 성격으로나타날 수 있습니다.


그밖에 친숙성(Familiarity)등이 있습니다. 이는 불완전한 형태를 관찰자가 이미 알고있는 익숙한 형태로 연관시켜 이해하려는 것입니다만 실지로 편집기법으로 사용되는 예는 적습니다.


알파벳의 획들이 부분적으로 끊어져 있어도
이미 알고 있는 형태로 연결해 보려는
시도를 하게 됩니다.


지금까지 소개한 심리학적으로 해석한 인간의 인지적 특성은 창의성이라는 가정에서는 큰 의미를 가지지 못하겠지만 빠르고 정확한 커뮤니케이션이라는 기능성이 필요한 경우에는 문자, 사진, 그래픽 요소등을 구성하는 기본적인 방법에 대한 아이디어를 제공하며 웹 디자인의 경우에는 특히 그 효용성이 크다고 하겠습니다.

칸딘스키
차봉희 역
"점.선.면"
열화당
17p~30p 참고

디자인에 있어서 음양의 공간.

앞서 종이위에 점에 관한 얘기를 했습니다. 대부분의 경우에는 점에 대해서 집중하여 그 점의 정체를 밝히려 들것입니다. 그러나 누군가는 "거기에 하얀 면이 있습니다." 라고 말할 수 도 있을 것입니다. 사실 꼭 그 점을 지칭하여 묻지 않았다면 더욱 면적이 넓은 종이의 면에 답의 촛점을 맞추는 것도 무리가 아니지요. 그렇지만 역시 우리는 종이 위의 점에 시선을 집중하게 됩니다. 특히 종이의 면적이 넓어진다면 상대적으로 점의 영역이 강조되겠지만 이는 상대적 개념으로 보아야 할 것입니다. 만약 종이의 면적이 한없이 넓어져서 빌딩전체의 면만큼 커지고 점은 불과 직경 1mm에 불과하다면 스케일의 문제에 있어서 전혀 보이지 않을 수 도 있지요. 즉 화면은 의미를 지니는 시각적 요소인 양의 힘과 그 밖의 여백 요소인 음의 힘으로 양분되어 있음을 알 수 있습니다. 또한 이 두 가지 요소는 같은 중요성을 가지고 서로 조화를 이루어 가장 효과적인 시각적 최적상태를 유지할 때 보기에도 좋을 것이며 이러한 고려는 실질적인 웹 디자인 화면에도 동일하게 적용됩니다.

심볼마크는 여러가지 의미를 내포시켜야하는 경우가 많으므로 음과 양의 영역을 적극적으로 사용하는 예가 많습니다.

디스플레이 디자인에서 보이는 상품과 그 상품을 돋보이게 하기 위한 보조요소 디자인의 중요성을 생각해 보면 여백의 중요성을 이해할 수 있습니다. 대부분의 금은방에서 볼 수 있는 쇼윈도우의 안쪽을 가득 메운 수많은 보석들은 하나하나 모두 최고의 디자인 제품일지는 몰라도 결국 소비자의 시선을 끌지 못하는 반면 넓은 전시대 위에 한가지만의 전시품은 보기에도 편안하고 소비자의 관심을 끌게 됩니다. 물론 경제적으로나 효율적인 면에서 많은 아이템을 전시해야만 하는 경우가 있습니다. 웹의 경우에는 웹 매거진이나 웹 데이터 검색 서비스 같은 경우에는 신속한 정보검색을 위해 한 페이지에 많은 양의 문자와 사진정보를 구성해야 할 것입니다. 그러나 이때에도 여백은 있기 마련이며 그 여백의 크기와 위치와 전체적인 형태를 만드는 일은 문자나 그림의 요소 못지 않게 중요합니다. 이러한 시각요소와 여백의 관계는 색과 질감과 형태의 요소들이 추가되면서 무척 복잡한 양상을 띄게 되며 이에 디자인 해결방법이 필요해 지는 것입니다.

충분한 여백은 시각요소를 돋보이게 하며
여백은 나름데로의 역할 하고 있습니다.


많은 시각요소의 사용은 상대적으로 각 요소의 힘을
분산시켜 복잡해 보이는 수가 있습니다.


잘 그룹핑된 시각 요소들과 여백의 구성은
관찰자의 시선을 자연스럽게 유도 합니다.

샘플러(Sampler)는 미술가가 사진을 사용하듯이 작곡가가 자연의 소리를 음악이 요소로 적극적으로 사용할 수 있게 해 주었습니다. 이는 사실 큰 의미를 지닙니다. 예전에 음악은 자연현상의 표현을 위해 악기라는 여과물을 거치지 않을 수 밖에 없었기 때문입니다.




김지현 역
"타이포그래픽
커뮤니케이션"
창지사
1999
p87 ~ p95 참조

시각 디자인은 음악과 같다.

우리는 자연의 소리를 음악이라고 부르지는 않습니다. 일정간격의 음을 위한 공명이 일어 나도록 만들어낸 악기를 가지고 시간상에서 그 음계와 소리의 크기, 떨림 등이 조화롭게 구성되어 졌을 때 그것을 우리는 음악이라고 하며 하나의 예술작품으로서 감상의 대상이 됩니다. 요즘 힙합이나 테크노 음악 제작에 많이 사용되는 샘플러라는 기계를 사용하면 자연의 소리나 여러 가지 생활 속의 소음을 단편으로 쪼개어 디지털 데이터로 바꾸어 건반형식으로 연주할 수 있도록 합니다. 이는 소리를 일정 양으로 쪼개고 음계로 변환 할 수 있기 때문에 비로소 가능한 일입니다. 즉 소리의 높고 낮음과 크고 작음를 마음대로 조절할 수 있게 된 것이죠. 이러한 것들은 시간상에서 소리의 절정을 만들거나 화음을 만들기 위한 기본 조건이 됩니다. 소리들은 높아졌다 낮아졌다, 커졌다 작아졌다 하며 우리의 귀를 통해 마음의 변화를 유도하고 우리는 그것을 즐기는 것이지요. 대중음악에 사용되는 드럼도, 교향곡을 연주하는 오케스트라도 거기에는 저음부분, 중음부분, 고음부분이 적절히 섞여있고 이들은 또한 시간상으로 조화롭게 구성되어 리듬과 화음과 멜로디를 만들어 냅니다. 음악에 대해 이렇게 설명하는 이유는 사실 이 모든 과정이 화면의 구성방법과 너무나 흡사하기 때문입니다. 자연의 이미지들은 그것이 단순화되어 표현되거나 일정부분이 사진으로 바뀌어 커뮤니케이션의 도구가 됩니다. 즉 소리가 음계나 단편으로 구분되는 것과 마찬가지이며 문자와 이미지들은 한 화면 안에서 리듬을 갖추고 고저장단의 멜로디로 표현되게 됩니다. 우리는 조형요소의 이러한 조건을 균형(balance), 조화(harmony), 율동(rhythm), 반복(repetition), 점증(gradation)이라고 표현하고 이러한 구성방법을 위해서는 앞서 언급한 기하학적 형태구조, 여백과 요소의 두 가지 개념, 게슈탈트 그루핑 법칙들을 목적에 맞도록 적절히 사용하여 조화로운 화면을 만들어 내게 됩니다.


왼쪽의 모듈들은 존재는 있으나 어떤 리듬이나 맬로디를 가지고 있지 않습니다. 반면에 오른른쪽의 모듈듈들은 그 위치와 크기와 그루핑 되어있는 영역에 따라 리듬감이 느껴지는데 화면안의 커뮤니케이션 시각물들도 이러한 구성방법을 응용하여 그 효용성을 높일 수 있습니다.


위의 그림은 베에토벤의 제5심포니 (제1음절)를 점으로 표현한 것입니다.
우리는 음악속의 시각적 구성 요소가 있음을 쉽게 알 수 있습니다.