2010. 9. 3. 11:03ㆍGUI 가벼운 이야기
- 조형의 요소와 원리 intro
- 조형의 요소와 원리 1 - 조형의 요소란? 조형의 원리란?
- 조형의 요소와 원리 2 - 조형의 원리와 분류
- 조형의 요소와 원리 3 - 통일성(Unity) : 게슈탈트 법칙
- 조형의 요소와 원리 4 - 통일성(Unity) : 근접의 원리
- 조형의 요소와 원리 5 - 반복 (Repetition)
- 조형의 요소와 원리 6 - 조화 (Harmony)
- 조형의 요소와 원리 7 - 리듬 (Rhythm)
- 조형의 요소와 원리 8 - 점이 (Gradiation)
- 조형의 요소와 원리 9 - 대칭 (Symmetry) 1 : 균형에 대하여
지난 시간에는 조형의 원리 중 통일성을 주는 원리로써 게슈탈트 이론을 간략하게 살펴보았습니다.
이번부터는 통일성을 주기 위한 테크닉들을 좀 더 세분화하여 알아보겠습니다.
가장 쉽게 사용할 수 있는 것이 바로 떨어져 있는 요소들을 가까이 놓는.... 바로 근접의 원리입니다.
아래 그림처럼 요소들이 서로 떨어져 있으면 아무런 관계가 없어 보이지만
옆 그림처럼 서로 붙여만 놓아도 그룹핑이 되어 통일성이 있어 보이게 됩니다.
이런 근접의 원리는 통일성을 이루는 가장 간단한 방법으로써 많은 작품들이 이 원리를 이용하고 있습니다.
아래 그림은 토마스 P. 안슈츠(Thomas P. Anshutz)의 철강 노동자들의 정오(Ironworkers' Noontime)라는 작품입니다. 노동자들의 웃통을 벗은 모습이 주변의 어두운 배경과 대비를 이루고 있는데 이 밝은 요소들은 그저 아무렇게나 놓여진 것이 아니라 근접의 원리를 이용해서 교묘하게 배치되어 있다는 점에 주목해야 합니다.
원래 작품을 포토샵으로 불러와서 contrast를 높인 후 밝은 요소들을 쭉 연결시켜보았습니다. 크게 두 파트로 연결되어 있다는 것을 알 수 있습니다.(작가가 그리다보니 노동자들이 우연히 이렇게 배치된 걸까요?^^)
그리고 이 두 파트는 전체적으로 안정적인 수평 구도를 이루고 있어서 노동자들의 휴식의 느낌과도 잘 맞아 떨어집니다.
유사한 사례를 한 가지 더 보겠습니다.
아래 그림은 Thomas Eakins의 Swimming이라는 작품입니다.
총 6명의 벌거벗은 남자가 아무렇게나 배치되어 있는 것이 아니라 근접성의 원리를 이용하여 모두 한 파트로 연결되어 있음을 알 수 있습니다. 작품 아래의 연결된 선을 보시면 크게 삼각형 구도를 이루고 있어서 안정된 느낌을 주고 있습니다.
이렇듯 근접의 원리는 통일성을 주기 위해 고전 회화에서부터 많이 사용되어 온 기법이며 현재의 웹사이트 등의 미디어 화면에서도 무수히 많이 쓰이는 기법입니다.
많은 사례들이 있겠지만 간단하게 하나만 보면...
아래는 국민은행의 가장 최근 메인화면입니다.
다른 사이트에서 많이 쓰는 면이나 선으로 복잡한 그룹핑을 하지 않고
단순히 근접의 원리만 이용해서 유사한 기능을 가진 메뉴들과 리스트들을 그룹핑하고 있습니다.
지금 디자인하고 있는 화면들이 정신없거나 산만해 보이나요?
그렇다면 우선 유사한 요소들끼리 붙여 보세요. 훨씬 통일성있게 보이게 됩니다.
- 2010/07/19 조형의 요소와 원리 intro
- 2010/07/27 조형의 요소와 원리 1 - 조형의 요소란? 조형의 원리란?
- 2010/08/02 조형의 요소와 원리 2 - 조형의 원리와 분류
- 2010/08/09 조형의 요소와 원리 3 - 통일성(Unity) : 게슈탈트 법칙
- 2010/09/03 조형의 요소와 원리 4 - 통일성(Unity) : 근접의 원리
- 2010/09/11 조형의 요소와 원리 5 - 반복 (Repetition)
- 2012/02/23 조형의 요소와 원리 6 - 조화 (Harmony)
- 2012/02/28 조형의 요소와 원리 7 - 리듬 (Rhythm)
- 2013/06/05 조형의 요소와 원리 8 - 점이 (Gradiation)
- 2013/07/19 조형의 요소와 원리 9 - 대칭 (Symmetry) 1 : 균형에 대하여