비주얼 스타일과 아름다움

 

비주얼 디자인의 원칙

비주얼 디자인은 단순히 '사용자 인터페이스에 스킨을 입히는 것' 이상의 의미를 갖는다. 완성도 높은 비주얼 디자인과 룩앤필은 디지털 제품을 돋보이게 한다. 비주얼 디자인은 제품 사용성을 높이거나 브랜드 신뢰를 쌓을수도 있고 반대로 무너뜨릴 수도 있다. 심미적으로 즐거움을 주는 비주얼 디자인의 기초 원칙은 7가지가 있다. 

 

1. 시각적 계층 구조

2. 구성

3. 색상

4. 타이포 그래피

5. 가독성

6. 감정 불러일으키기

7. 이미지

 

1. 시각적 계층구조

시각적 계층 구조는 주어진 레이아웃에서 시각 요소가 보여지는 방식을 뜻한다. 시각적 계층 구조에는 명료성, 실행가능성, 행동유도성이 있다.

 

명료성 - 제공하려는 정보를 잘 전달하는 디자인인가?

실행가능성 - 화면에서 해야 할 일을 사용자가 어떻게 알 수 있는가?

행동유도성 - 물체의 겉모습이나 동작하는 방식이 실제 제품의 속성과 일치함

ex) 입체적으로 보이는 버튼은 클릭할 수 있다는 시각적 신호를 줌

 

2. 구성

비주얼 디자인에서 구성은 배치와 비례를 가리킨다. 구성에는 일관성, 정렬이 있다.

 

일관성 - 시각적 요소는 예측 가능하고 일관된 시각적 언어로 나타난다. 인터페이스 디자인에서 아이콘을 사용한다면 동일한 기능을 지칭할 때는 항상 같은 아이콘을 반복해 사용해야 한다.

 

정렬 - 화면이 바뀔 때마다 화면 요소가 이유 없이 변경되는 것만큼 사용자에게 거슬리는건 없다. 화면이 바뀔 때 화면 요소가 이동하지 않도록 해야 한다. 디지털 제품에서는 왼쪽, 오른쪽 , 가운데 정렬이 무작위로 바뀌는  텍스트는 이해하기 어렵고, 가독성을 떨어뜨린다.

 

3. 색상

색상은 즉각적인 경험이다. 디자인을 볼 때 기본 형태나 모양과 함께 가장 먼저 인지하는 것 중 하나다. 하지만 예술과 디자인 분야에서 색상을 적용하는 일은 한없이 섬세한 작업이다. 인터페이스에 적용한 색상 조합을 고민하고 있다면 우선 텍스트 가독성을 떨어뜨리는 요소를 제거해야 한다.

 

- 밝은 배경 전면에 어두운 요소를 쓰거나, 반대로 어두운 배경 전면에는 밝은 요소를 써야한다.

- 빨간색이나 초록색이 중요한 의미라면 색상만으로 의미를 구분하지 말고, 다른 형태나 텍스트로 의미를 강화해야 한다. 색맹인 사람은 색상 차이를 인지하지 못하기 떄문이다.

 

4. 타이포그래피

활자체 - 활자의 특정 디자인 이름을 지칭한다.

폰트 - 활자체의 특정 크기, 굵기, 스타일을 지칭한다.

ex) 헬베티카 볼드 12pt

 

[활자체 분류]

세리프 - 글자 끝 부분에 작은 장식선과 곡선이 있다. 빽빽한 텍스트를 읽을 때 가장 널리 활용한다. 글자에서 다음 글자로 시선을 부드럽게 안내해 눈의 피로감을 줄여준다.

 

산세리프 - 글자 끝에 장식선이 없다. 작은 크기에서도 가독성이 높기 때문에 사용자 인터페이스에서 산세리프를 자주 사용한다.

 

디스플레이 - 아주 큰 크기에서 잘 보이는 활자체로, 세리프 또는 산세리프이다. 주제목이나 로고 용도로 브랜드의 룩앤필을 표현하기에 좋지만, 사용자 인터페이스, UI 컨트롤, 폼, 본문 텍스트에는 적합하지 않다. 과도하게 사용하면 부담스럽고, 작은 크기에서는 가독성이 낮으므로 텍스트가 많을 때는 절대 디스플레이 활자체를 사용하면 안된다.

 

고정폭 - 글자의 실제 가로폭과 상관 없이 각 글자가 동일한 수평 공간을 차지하도록 디자인됐다. 컴퓨터가 개발된 초기에 사용되었으며, LED화면, 숫자가 주요 콘텐츠인 인터페이스나 텍스트를 정교하게 렌더링하지 못하는 화면에서 자주 쓰인다. 자동차 대시보드 디스플레이, 가전기기 인터페이스 등에서도 가끔 볼 수 있다.

 

5. 가독성

텍스트에 적용하는 활자체는 텍스트의 목소리를 결정한다. 시끄럽거나 부드러울 수도, 친근하거나 격식이 느껴질 수도, 구어체이거나 권위적일 수도, 힙하거나 고리타분할 수도 있다. 색상과 마찬가지로 활자체를 고를 때는 인지적인 부분, 즉 가독성을 먼저 고려해야 한다.

 

6. 감정 불러일으키기

활자체는 독특한 목소리를 갖고있다. 화면에서 각 활자체는 특징도, 질감도, 색감도 다르다. 예를 들어 어떤 폰트는 밀도가 높고 어둡지만, 반대로 개방적인 폰트도 있다. 

 

여유로운 화면 디자인은 대체로 경쾌함, 개방감, 조용한, 차분함, 품위가 느껴진다. 빽빽한 디자인은 특정 상황에서 긴급함, 긴장감을 불러일으킬 수 있다. 이유는 텍스트와 다른 그래픽 요소가 숨을 쉴 공간이 부족하기 떄문이다. 요소들이 서로 부딪히거나 화면 가장자리, 모서리에 부딪힐 때 시각적 긴장감이 유발된다. 우리 눈은 물체 주변에 여백을 원한다.

 

딱 맞아 떨어지는 상하 직선과 직각으로 구성된 화면은 전반적으로 대각선으로 구성돼 있거나 사각형이 아닌 형태로 구성된 화면보다 차분하고 고요해 보인다. 마찬가지로 여러 기울기의 선이 있는 화면이 한 기울기만 반복되는 화면보다 역동적이다. 

곡선은 움직임과 생동감을 더할 수 있지만 항상 그렇지는 않다. 원과 원호가 많은 디자인은 차분하고 평화롭다. 화면을 휩쓸고 지나가는 곡선은 전체 디자인이 움직이는 것처럼 보이게 만들고, 단조로운 디자인에서 벗어나 신중하게 선택한 몇 개의 곡선은 정교함과 흥미를 더한다.

 

질감은 디자인을 더 풍성하게 만든다. 시각적으로 흥미를 돋우고, 어떤 질감인지에 따라 따뜻함, 풍성함, 즐거움, 긴장감을 더해 준다. 인터페이스에서 가장 효과적인 질감은 눈이 아픈 화려한 격자무늬가 아닌, 미묘한 질감이다. 부드러운 색채 그라데이션과 아주 작은 디테일을 활용하면 좋다.

 

7. 이미지

사진은 디자인에서 분위기를 설정한다. 웹과 모바일 디지털 제품에서 사진은 브랜드를 표현하는 가장 강력한 도구 중 하나다. 사진을 잘 배치하면 말로 하는 것보다 훨씬 효율적으로 한눈에 이야기를 전달할 수 있다. 사진은 감정을 일으키는 뛰어난 도구이다.

 

- 사진 속 인물의 시선이 어디로 향하는지 주의해야 한다. 사람들은 다른 사람이 보는 곳으로 시선이 향하는 경향이 있다. 심지어 화면 속 사진의 인물이라해도 말이다.

- 상투적이고 진부한 사진을 피해야한다. 브랜드 분위기를 표현하는 데 진부한 시각적 관습에 의존하지 말자

- 스톡아트도 괜찮지만, 가장 효과적인 것은 숙달된 예술 감독과 비주얼 디자이너가 만든 사진과 디자인이다.