디자인 안목 기르는 법 4가지

목차

1. 타이포그래피, 기본으로 돌아가기
2. 여백을 활용하여 균형 조절하기
3. 사이즈를 활용하여 시각적 위계질서 설계하기
4. 컬러를 사용하여 의미 전달하기

지난 주, 독자가 질문 하나를 보내왔다.

“더 좋은 디자이너가 되려면 어떻게 해야 할까요?”
 

이 질문에 어떻게 답해야 할지 고민하던 중, 중국어를 배웠던 경험이 떠올랐다. 최근에 중국어를 독학하기로 했기 때문이다. 새로운 언어를 배우기 위해서는, 기초부터 시작해야한다. 명사, 대명사, 동사 좀 더 복잡한 생각들을 전달하기 위한 기초적인 형태들 말이다.

언어란 사람들이 다른 사람에게 어떤 개념을 전달하기 위한 방법이다. 시각 디자인은 시각 언어이다. 그리고 시각 디자인을 배우는 것은 새로운 언어를 배우는 것과 다르지 않다.

좋은 시각 디자인은 저절로 뿅 하고 나타나지 않는다. 만들어지는 것이다. 좋은 디자이너가 되는 것은 매우 어려운 일이다. 당신은 의식적인 노력을 할 때에만 시각 디자이너로서 성장할 것이다.

이제 당신의 디자인을 한 단계 레벨 업 시켜줄 기초 지식들을 알아보자.

기초 지식 1: 타이포그래피, 기본으로 돌아가기 

당신은 타이포그래피 작업을 보고 그 디자이너에 대해 많은 것을 말할 수 있을 것이다. 이것이 바로 타입이 디자인에 있어 기초적인 기반이 되어야 하는 이유이다.

당신은 타입 하나만으로도 전체적인 디자인을 할 수 있다. 폰트에서 줄 몇 개를 수정함으로써 기본적인 디자인을 해볼 수도 있다.

타입을 표현하기 위한 언어를 개발해보자. 트래킹, 커닝, 리딩이 무엇을 의미하는 용어인지 배워보자. 아티클 <당신이 알아야 할 아름답게 묘사된 타이포그래피 용어>은 이러한 용어를 배우기 위한 매우 좋은 리소스이다.

기초 지식 2: 여백을 활용하여 균형 조절하기

여백은 디자인에서 수직/수평적 율동감을 설계하는 데에 도움이 된다. 이는 시각적 위계질서를 구축하는 것과 요소들 간의 상관 관계를 형성하는 데에 중심적인 역할을 한다.

여백을 어떻게 다루는지 보려면 비핸스나 드리블같은 사이트를 참고하여 영감을 얻는 것도 좋다. 하지만 중요한 것은 균형을 맞추고 시각적인 조화를 구성하기 위해 여백을 사용하는 당신만의 직관을 기르는 것이다.

기초 지식 3: 사이즈를 활용하여 시각적 위계질서 설계하기

시각적 위계질서를 만들 때, 크기 조절은 가장 중요한 요소다. 요소들 간의 시각적 관계를 전달하기 위해 사이즈를 조절함으로써, 흐름을 설계할 수 있다.

크기 조절은 그리드가 중요한 이유 중 하나이다. 비율을 활용하여 사이즈를 조절할 수 있는 그리드로 요소간의 중요성을 부여할 수 있다.

요소의 크기를 결정한 이후에는 해당 요소의 모든 사례에서 똑같은 사이즈를 유지해야 한다. 디자인은 일관성이 생명이다.

크기 조절에 대한 안목을 기르는 훈련 방법을 알아보자.
:비결은 피드백을 요청하는 것이다.

랜딩페이지를 스케치하거나 와어어프레이밍해보자. 그리고 친구에게 디자인을 봐달라고 부탁하고, 눈에 띄는 요소들에 동그라미 쳐달라고 하자. 그 후에, 중요도 순으로 동그라미 쳐진 요소에 숫자를 매겨달라고 하자. 결과가 당신이 기대한 것과 동일한가?

이 훈련을 할 때, 다음 질문들을 고려하자.

• 이 랜딩 페이지의 전환 목표는 무엇인가? 그 목표를 달성하기 위해 어떻게 최적화할 수 있는가?
• 요소들은 어떤 관계인가? 어떤 요소를 강조하고 싶은가?
• 레이아웃이 독자들을 잘 안내하는 형태인가?

기초 지식 4: 컬러를 사용하여 의미 전달하기

컬러는 많은 역할을 해낼 수 있다. 의미를 전달하고, 감정적인 반향을 일으키고, 디자인 통일성을 가져다준다.

컬러를 철저하게 분석하기 위해서, 내가 쓴 <컬러로 디자인하기>를 읽어보자. 글의 핵심 요소는 다음과 같다.

• 컬러 팔레트를 찍기 전에 디자인의 목표를 확실하게 정하자. 좋은 디자인은 컬러 팔레트를 그것의 목표에 맞게 맞춘다.
• 타깃을 정하자. 사람들은 저마다 컬러를 다르게 받아들인다. 컬러는 그들의 개인적인 선호, 문화적인 인식, 경험에 따라 다른 효과를 나타낸다.
• 컬러 팔레트를 고를 때, 가장 중요한 것은 단순함이다. 뉴트럴한 배경색을 고르자. 그 다음, 제 1/제 2 강조색을 고르자. 마지막으로, 다른 컬러들에 맞춰서 오류 및 긍정(success)을 나타내는 색을 고르자.

컬러에 대한 안목을 기르는 훈련 방법을 알아보자.

당신이 좋아하는 사진, 잡지, 혹은 전시나 공연 등을 보고 컬러 팔레트를 만드는 데에 시간을 보내자. 그러고 나서 기존에 했던 디자인을 가져다가 새로운 컬러 팔레트를 적용해보자.

그 디자인의 무드와 톤이 어떻게 바뀌었는지 메모하자. 의미도 함께 바뀌었나?

당신의 작업을 작품으로 대하면, 항상 발전할 여지를 찾을 수 있습니다. 더 나은 디자이너가 되도록 스스로에게 동기를 부여하세요. 디자이너로서 성장하기 위해서 어떤 전략을 사용하고 있으신가요? 트위터로 메시지를 남겨주세요.

이 글을 재미있게 읽으신 분께 추천하는 글
<CSS in JavaScript: The future of component based styling>

저는 미디엄에서 매주 글을 쓰고 있습니다. 혹은 트위터에서 디자인에 대한 아무말을 하기도 해요.

1. 본 레스토프 효과
   :중요한 정보는 다른 것과 다르게, 눈에 띄게 표시하자.
2. 듀얼 코딩 이론
   :텍스트+이미지를 적절하게 섞어 함께 사용하자.
3. 서열 위치 효과
   :중요한 정보는 (중간이 아닌)처음과 끝에 배치하자.
4. 핵심 위치 효과
   :중요한 정보는 중앙(가운데)에 배치하자.
5. 단순성의 법칙
   :6~10번의 법칙을 통틀어 단순성의 법칙이라 일컫는다.
6. 폐쇄성의 법칙
   :인간은 구멍을 보면 메우려는 습성이 있으므로, 여백을 활용하여 오브젝트를 만들 수 있다. 
7. 그림-배경의 법칙
   :(전경만 신경 쓰지말고)전경(그림)과 배경의 관계를 고려하면 재치있는 디자인을 할 수 있다.
8. 근접성의 법칙
   :정보를 체계적으로 정리하고 싶으면 비슷한 것들끼리 묶어두자.
9. 유사성의 법칙
   :비슷한 특징을 가진 오브젝트들은 그룹으로 여겨지는데, 이때 '비슷한'느낌을 줄 수 있는 가장 강력한 속성은 '색깔'이다.
10. 공통 영역의 법칙
    :비슷한 요소를 그룹핑하고 싶다면 테두리를 쳐서 영역을 표시하자.