70-80-90 입시구성디자인으로 설명하는 조형원리 ^^;;

요즘 GUI팀스터디에서 interface내의 화면구성원리들을 공부하고 있습니다.
책 내용이 그래픽 조형원리를 GUI분야에 적용하면서 게슈탈트 인지론에 대한 설명을 주로 하고 있는데 우선 조형원리를 간단하게라도 정리하고 싶었습니다.

스터디 중에 조형원리를 설명하려다 보니 대학입시를 위해 연습했던 기초구성(Basic Composition)을 가지고 설명하는 것이 수월하더군요.^^;
해서.... 70년대부터~90년대 중반까지 행해졌던 '면분할 구성 디자인'을 토대로 조형원리를 정리하여 UI디자이너분들도 그래픽디자인 기본 조형에 대해 이해의 폭을 넓힐 수 있도록 하고자 합니다.  (헹~재미 삼아 봐주시고...)

아래와 같은 거 보신적 있으시죠?  예시가 너무 옛날 것이긴 합니다만, 이런 걸 '입시구성'이라고 합니다.
요즘은 이미지구성이라고 해서 많이 다릅니다만...쿨럭

일본의 입시체계를 그대로 도입한 우리나라는 입시 미술실기에서도 일본식 석고데생과 면분할구성을 그대로 도입하였는데 일본의 구성이란 것이 독일 바우하우스 Basic Composition코스를 일본토착화한 것이라고 생각됩니다.

그럼 본론으로 들어가서,

1. 조형의 기본 요소
   점, 선, 면(형태shape), 색

2. 조형표현의 기본요소
   명암, 양감, 질감, 공간감과 원근감

3. 조형표현의 원리
   통일, 변화, 변형, 강조, 대비, 조화, 균형, 비례와 스케일, 리듬, 점증, 반복, 대칭, 운동감, 색상.. 이외 착시나 긴장 등 정의하기 나름이고 이런 거 다 한번씩은 들어보셨을테구요.

자 이제 708090 입시구성에서 이런 것들이 어떻게 나타나는 지 볼까요.

아래 도화지를 보시죠.
 

빈 화면에는 시선을 둘 곳이 마땅치 않아 보이네요.

흠.. 그렇다면 아래 그림을 보시죠.


그림을 보는 순간 시선흐름이 어땠나요? 혹시 아래와 같지 않았나요?

우리는 후천적인 학습에 의해 왼쪽 상단부터 정보를 읽는데 익숙해져 있어서 위와 같은 시선흐름을 가지는 사람들이 많다고 합니다.
물론 조선시대라면 좀 다르겠죠. 그래서 옛날 한국화를 볼 때 그림보다 화면 왼쪽의 글귀가 먼저 눈에 들어오는 분들이 많을 겁니다.

아무튼 위와 같은 이유로 1번 지점부터 이미지를 읽을 수 있도록 유도합니다.
그렇게 하기 위해 그 부분을 가장 밝게 처리합니다. 가장 밝은 색 - 흰색으로 말이죠.[강조]

흰색덩어리만 있으니 전반적으로 가벼운 느낌이 듭니다. 어두운 덩어리로 전체적인 무게감을 늘리고 [명암대비]를 확실히 합니다.
또한 흰색덩어리는 앞쪽으로 전진해 보이고 검정덩어리는 후퇴해 보여서 [공간감]을 표현하기에도 좋아 보이네요.

 
흰색이 검정보다 가볍기 때문에 검정보다 살짝 위에 배치하여 안정감을 줍니다.
무거운 물건 위에 가벼운 물건을 두어야 안정감이 있듯이 말이죠.

그리고 제1시점이었던 흰색덩어리를 중심으로 (참 예쁜)먼셀의 색상환을 돌려 채색계획을 세웁니다.

적용해보면 아래와 같고 색상의 [점증]효과가 자연스럽게 구현됩니다.

 

왼쪽부분의 채색 계획이 완성되었습니다.
이제 오른쪽을 해야겠죠.

화면 왼쪽부분의 채색계획이 완성되었기 때문에 화면 전반적인 [색상균형]과 [색온도 균형]을 맞출 필요가 있습니다.

그래서 화면 좌측하단의 블루계열을 대각선 방향에 배치할 수 밖에 없겠군요.[대칭 균형]

마찬가지고 좌측상단의 그린계열을 대각선으로 배치합니다.[대칭 균형]

마지막으로 중앙의 Red가 혼자 외로와 보이네요. 우측 하단 외곽에서 약간 보완해 주고 싶네요. 그린과 잘 어울리면서 튀지 않는 브라운으로 말이죠.

지금까지 화면내에서의 [조화]로운 색채계획만으로도 상당히 많은 조형원리들이 설명이 가능했던 것 같죠?
첫번째 그림과 다시 비교해 보시죠.

색채계획이 위와 같이 뻔하니 아주 중요한 것이 깔끔한 도안과 물체간 중첩부분의 면대비입니다.
화면 전반적으로 면분할에 '긴장과 풀어짐'이라는 [리듬]감이 느껴져야 재밌어집니다.  강-약-중-약....중-약-약-강-약...^^

면대비를 잘 살려 물체를 표현하고 색채계획에 따라 깔끔하게 포스터물감으로 칠하면 끝~~ 합격이십니다.
지금까지 정통 7080 일본식 면분할 구성에 대한 설명이었구요.

그런데 이런 리듬감있는 면분할을 잘 하려면 '감각'이 좀 있어야 하는데
뭐.. 미대에 지원하는 모든 학생들이 조형감각이 있었던 것은 아니니까 쉽게 구성을 할 수 있도록 입시구성 강사들이 연구(?)하여 90년대에는 면분할의 리듬감을 미리 확보하기 위한 '패턴구성'이라는 것이 유행합니다.

일단! 무조건 U자를 그린 후, U자 패턴에 걸쳐지도록 물체도안을 하는거죠.

밑에 보시는 S자 패턴도 마찬가지 의도로 만들어진 패턴입니다. 이 밖에도 '쌍U자 패턴','h패턴' 등등이 유행했던 것 같네요.



참 쉽죠?

어떻게... UI디자이너분들한테도 도움이 됐나 모르겠습니다. 문서작성에 한번 응용해 보실 수도 있지 않을까요? 흐

어쨌든, 저에게는 이러한 주입식 입시구성이 지금까지도 나름 도움이 되고 있다는 거죠 쿨럭--;  
우리가 연구하는 GUI에도 이러한 입시구성에서의 조형원리들이 거의 고스란히 적용될 수 있을 거라는 생각입니다.
긴장을 이용한 주목도 높이기, 사용자가 정보를 잘 읽을 수 있도록 시각적인 흐름을 만들어 주어 사용을 원활하게 한다든 지, 균형감 있는 화면구성 등등..

GUI디자인 할 때도 패턴구성처럼, 일단 기본퀄러티 확보하고 시작할 수 있는 방법은 없을까.... 고민 중입니다. 쿨럭쿨럭!--;