Design

디자인 속으로…

어렸을 때 미술 시간은 언제나 즐거웠다. 그림에 특히 흥미를 가지게 된 건 미술 교과서의 나무 조각상을 똑같이 그려봤을 때부터였다. 처음엔 나무가 거칠게 깎여나간 모습을 도저히 그릴 엄두가 안 났는데, 연필로 그렸다 지우개로 지웠다 하면서 몰입하여 그리다보니 어느새 신기할 정도로 똑같아 보이는 그림이 되어 있었다. 아마도 그림은 열심히 한 만큼 결과를 얻을 수 있다고 그 때 처음 느꼈던 것 같다.

시간이 흘러 시각디자인학과에 입학했지만, 당시에는 디자인이 무엇인지 감이 잘 안 왔었다. 디자인이 뭔지 모르니 당연히 하는 방법도 모르고, 하는 방법을 모르는데 잘 할 수 있을리가 없었다.

디자인이란 뭘까? 이제서야 궁금해졌다. 지금부터 한번 알아보자.

디자인은 설명이자 설득

디자인은 설명이자 설득이라고 할 수 있겠다.

우선 디자인은 설명이라는 기능을 가진다. 웹 디자인을 예로 들자. 이것은 메뉴 버튼입니다, 이것은 사용자 정보 버튼입니다, 일일이 말로 하는 대신, 아이콘 같은 것을 사용하여 한 눈에 알아볼 수 있도록 한다. 디자인은 사용자가 보고 있는 것이 무엇인지 설명하는 기능을 수행하고 있는 것이다. 사전에 따르면 설명이란, 상대방이 잘 알 수 있도록 내용을 쉽게 밝히는 것이라고 한다. 상대방이 더욱 잘 알 수 있도록 하는 디자인이 좋은 디자인이라고 할 수 있겠다.

또, 디자인은 설득이라는 기능도 가진다. 이 그림을 봐주세요, 이 버튼을 눌러주세요, 일일이 말로 하는 대신, 눈에 띄는 곳에 배치하거나 색상 등으로 강조하여 사용자의 행동을 이끌어낸다. 디자인은 사용자가 어떤 생각과 감정을 갖고 어떤 행동을 해야하는지 지시하고 설득하는 기능을 수행하고 있는 것이다. 사전에 따르면 설득이란, 상대방이 이쪽의 이야기를 따르도록 여러 가지로 깨우치는 것이라고 한다. 상대방을 더욱 잘 설득하는 디자인이 좋은 디자인이라고 할 수 있겠다.

이와 같이 디자인 구성 요소와 디자인 구성 원리를 활용하면, 버튼에 적절한 색과 형태를 지정하고 적절한 위치에 배치하여 버튼임을 인지하도록 할 수 있다. 사용자의 시선을 유도하고 마음을 끌어당겨서 버튼을 누르는 것이 중요하고 필요한 행위라고 생각하도록 할 수 있다. 사람들로 하여금 이 이미지가 버튼이라는 것을 알게 하고, 클릭하게끔 만드는 것에는 디자인의 힘이 숨어 있는 것이다.

디자인 목표와 방향을 세우고, 디자인 요소를 선택하여 배치한다.

디자인 목표와 방향을 세우면, 어떤 디자인 요소를 선택해야 하는지, 그리고 어떻게 배치해야 하는지를 정할 수 있게 된다.

예를 들어 어떤 기업의 친환경 홍보 포스터를 만든다고 하자. 처음에는 누군가가 흰 종이에 검은 궁서체로 “친환경 기업 ○○○” 비슷한 문구 하나만 작성하여 포스터를 끝낼 수도 있을 것이다. 이제 디자이너가 디자인 파워를 사용해 이 포스터를 업그레이드할 차례다. 디자이너는 다음과 같은 과정을 통해 디자인 파워를 사용할 것이다.

디자인 목표를 설정한다. 어떤 주제와 의도를 갖는가? 어떤 메시지를 드러내는가?
디자인 방향을 설정한다. 어떤 정보와 감정을 전달할 것인가? 어떤 방식으로 전달할 것인가?
목표와 방향에 맞는 디자인 요소를 선택한다. 어떤 색과 형태를 사용하는 것이 좋은가?
목표와 방향에 맞도록 디자인 요소를 배치한다. 어떤 원리에 따라 어떻게 배치할 것인가?

여기서 1번과 2번에 해당하는 디자인 목표와 방향은 어떻게 보면 스케치북보다는 메모장이 더 필요한 영역이기도 하지만, 이후의 과정에 지대한 영향을 끼치는 부분이므로 매우, 아주 중요한 부분이라고 한다. 어떤 주제와 의도를 가지는지, 어떤 느낌을 전달할 것인지를 명확하게 설정하고 나면, 이후 작업의 지향점으로 삼을 수 있게 된다.

디자인의 1단계 : 디자인 목표 설정

디자인으로 설명과 설득을 하려면 먼저 전달하고자 하는 주제 내지는 의도가 필요할 것이다. 디자인을 통해 드러내려는 메시지가 무엇인지에 대한 고민이 필요한 것이다. 무엇을 설명하고 무엇을 설득할 것인지 디자인 목표를 설정하는 단계이다. 나는 이 포스터에서 자연과 기업이라는 설명, 자연을 아끼고 함께 하는 기업이라는 설득을 디자인을 통해 드러내는 것을 목표로 설정하겠다.

디자인의 2단계 : 디자인 방향 설정

설명과 설득을 위해 디자인이 사용하는 무기는 바로 눈에 보이는 시각 요소들이다. 이러한 시각 요소들은 정보를 전달하기도 하지만 감정을 전달하는 것에도 탁월하다. 2단계는 설명과 설득을 더 잘 하기 위해 어떤 정보와 감정을 어떤 방식으로 전달할 것인지에 대해 고민하는 단계다. 나는 이 포스터에서 녹색의 푸르른 자연 이미지를 메인으로 하여 신선하고 건강한 느낌을 직접적으로 전달하고, 자연 이미지의 비중을 크게 하여 기업이 자연에 큰 가치를 두고 있다는 느낌을 전달하는 것을 디자인 방향으로 설정하겠다.

디자인의 3단계 : 디자인 구성 요소 선택

디자인 목표와 방향이 정해지면, 이를 기준삼아 이제 본격적으로 어떤 색상, 사진, 글꼴 등을 사용할지 고민하는 시간이다. 디자인 목표가 자연과 기업, 자연을 아끼는 기업을 드러내는 것이므로 이와 관련된 사진, 색상 등을 준비하기로 한다. 디자인 방향에 따라 녹색 계열 중 메인으로 사용할 신선하고 건강한 느낌의 색상을 선택하고, 신선함을 더 돋보이게 해 줄 보조색들을 선택한다. 디자인 방향에 맞는 자연 이미지를 선택하고, 여기에 어울리는 기업 이미지를 선택한다. 글꼴 역시 디자인 방향에 따라 선택한다. 디자인 구성 요소들의 특성과 디자인 구성 원리들을 이해하고 있다면 이 단계에서 더 나은 선택을 할 수 있다.

디자인의 4단계 : 디자인 요소 배치

이제 선택한 디자인 구성 요소들을 디자인 목표와 방향에 따라 배치하는 마지막 단계다. 배치가 끝나면 디자인 결과물이 탄생한다. 요소들의 배치를 어떻게 하느냐에 따라 더 좋은 설명과 설득이 될 수도 있고, 더 적절한 감정을 불러일으킬 수도 있다. 마찬가지로, 디자인 구성 요소들의 특성과 디자인 구성 원리들을 이해하고 있다면 이 단계에서 더 나은 배치를 할 수 있다.

디자인의 전체적인 과정을 정리했으니, 이제 더 좋은 디자인을 위한 디자인 구성 요소와 디자인 구성 원리에 대해 알아보자.

디자인 구성 요소

디자인 결과물은 디자인 구성 요소들을 활용하여 만들어진다. 예를 들면 블로그에는 게시물 제목이 있을텐데, 제목을 본문보다 크게 하는 것이 더 눈에 잘 띈다고 생각할 것이다. 이런 것도 디자인 구성 요소를 활용하는 것이라고 할 수 있다.

먼저, 가장 중요한 요소인 색과 형태가 있다. 색은 형태의 특성 중 하나일 뿐이라고 하지만, 디자인에서 가장 중요하고 기초적인 요소이기 때문에 여기서는 둘을 구분하기로 한다. 또, 깊이라는 요소 역시 디자인을 구성하는 요소이다. 이들은 보는 이에게 정보 또는 감정을 전달하기 위한 디자인의 강력한 도구다.

색

색에 대한 연구가 주로 물감을 사용해 이루어지면서, 빨강, 파랑, 노랑이 물감의 3원색이라 불리게 되었다. 인쇄에서 사용하는 시안, 마젠타, 옐로우도 이와 비슷하며, 여기에 검정을 더한 것이 CMYK이다. 웹과 같은 디스플레이 영역에서는 물감 대신 빛으로 색을 표현하기 때문에 빨강, 녹색, 파랑을 3원색이라고 하는데, 바로 개발자들에게 익숙한 RGB다.

원색은 다른 색이 섞이지 않은 색이라서 원색 혹은 1차색이라고 부른다. 원색과 원색을 섞으면 2차색이 만들어진다. 2차색과 원색을 섞으면 3차색이 만들어진다. 색상환은 이러한 여러 가지 색들을 조화롭게 배치한 원형 띠 같은 것으로, 색 계획을 수립할 때 활용하기도 한다. 색상환에서 가까운 거리에 있는 색들을 조합하거나, 마주보고 있는 색을 조합하는 등 여러 전략이 있다. 색상환에서 색을 구별할 수 있게 하는 색의 속성이 바로 색상이다.

색은 또다른 속성도 가지고 있다. 1차색, 2차색, 3차색 같은 색은 흰색이나 검정색이 섞이지 않은 순수한 색이라서 순색이라고 부르는데, 이러한 순색에 흰색, 검정색 같은 무채색을 섞으면, 색이 연해지거나 탁해지면서 순수함을 잃어버린다. 또, 3차색은 2차색보다 탁하고, 2차색은 1차색보다 탁하다고 한다(사실 내 눈으로 잘 구별은 안 된다). 이렇게 연함과 탁함, 순수함에 관한 색의 속성이 바로 채도이다.

색은 또다른 속성이 있다. 색에 다른 색을 섞으면 채도가 변하는 동시에, 밝아지거나 어두워지기도 한다. 가장 밝은 색은 흰색, 가장 어두운 색은 검정색이다. 이러한 밝고 어두움에 관한 색의 속성이 바로 명도이다.

색과 색이 만났을 때, 색의 속성에 따라 두 색이 하나로 묶여 보이기도 하고, 동떨어져 보이기도 한다. 색은 속성에 따라 무게감, 거리감, 분위기 등이 달라진다. 어떤 색은 앞으로 나와있는 것처럼 보이기도 하고, 뒤로 들어가있는 것처럼 보이기도 한다. 예를 들면, 아래 그림에서 배경과 색 속성이 비슷한 양 끝쪽 사각형들은 눈에 잘 띄지 않으며, 가운데 사각형들은 앞으로 나와 있는 것처럼 보인다.

색이 불러일으키는 느낌과 감정은 다양하다. 구글에 color psychology을 검색해보면 다양한 도표들이 나온다. 나라별로 색이 의미하는 바가 다르기도 하고 개인의 경험에 의한 차이도 있겠지만, 많은 이들이 특정 색에서 느끼는 감정이 유사한 모양이다. 색마다 속성에 따라, 다른 색과의 조합에 따라 다양한 감정을 느끼게 한다. 친환경 포스터의 예에서 녹색과 연두색은 보는 이로 하여금 생명과 평온함을 느끼게 하려는 의도로 선택한 색이다. 특히, 빨강은 높은 주목도를 가지고 있어서 도로의 속도 제한 표지판이나 히어로의 복장 등에서 흔히 볼 수 있다.

형태

색 다음으로 볼 것은 형태다. 디자인 이론에서는 형태(form)와 형(shape)를 구분하고 있는데, 형태는 입체적인 전체, 형은 2차원의 모양이라고 보면 될 것 같다. 점, 선, 면은 형태를 만드는 인자라고 하는데, 이들은 각각 다양한 특성을 가지며, 색, 질감, 길이, 폭, 방향, 형, 비례 같은 것들이 있다.

한 마디로 정리하면, 색을 칠할 빈 칸을 형태라고 하겠다. 점을 칠하거나, 선을 칠하거나, 면을 칠하거나, 사진이나 도형 혹은 글꼴에 질감을 입히거나 비례를 변형하는 것들이 모두 형태라는 디자인 구성 요소를 활용하는 예라고 할 수 있겠다.

형태의 특성에 따라 분위기, 정보 등이 드러나기도 하며, 운동감, 깊이감, 입체감 등이 부여되기도 한다. 예를 들면, 아래 그림에서 선과 타이포그래피가 방향, 길이 등의 특성을 가지고 운동감을 주고 있다.

깊이

깊이, 공간, 거리 등의 디자인 구성 요소가 있다. 포토샵의 Drop Shadow가 깊이 요소를 위한 대표적인 도구라고 하겠다. 이 밖에도 중첩이나 위치 등을 이용하여 깊이를 적용할 수 있다.

디자인 구성 원리

는 다음에…

참고

개발자의 디자인 독해력, 길벗
디자인의 개념과 원리, 안그라픽스