5가지 UX 비주얼 디자인 원칙
NN그룹의 아티클 번역
5가지 UX 비주얼 디자인 원칙
요약 : 스케일(Scale), 시각적 위계(hierarchy), 균형(Balance), 대비(Contrast) 그리고 게슈탈트(Gestalt). 이 다섯 가지 원칙은 올바르게 적용되었을 때 심미적으로 아름다울 뿐만 아니라 사용성을 높여줍니다. By Kelley Gordon on March 1, 2020
비주얼 디자인을 보았을 때, 우리는 그게 매력적인지 아닌지 보자마자 바로 말할 수 있습니다. 그러나 오직 소수만이 왜 그러한 디자인 레이아웃이 시각적으로 훌륭한지 설명할 수 있을 것입니다. 좋은 비주얼 디자인 원칙을 적용한 그래픽은 참여를 유도하고 사용성을 높입니다.
비주얼 디자인 원칙은 다방면에서 우수하고 깊이 있는 비주얼을 만들기 위해서 라인, 도형, 색상, 그리드, 혹은 면과 같은 디자인 요소들이 어떻게 어우러져야 하는지 알려줍니다.
이 글에서는 UX에 영향을 주는 5가지 비주얼 디자인 원칙을 정의하려 합니다.
스케일 Scale
시각적 위계 Visual hierarchy
균형 Balance
대조 Contrast
게슈탈트 Gestalt
1. 스케일 Scale
이 원칙은 가장 많이 쓰입니다. 대부분의 잘 된 디자인에서는 이 원칙을 차용합니다. 정의를 보겠습니다.
스케일이란?
- 스케일의 원리는 상대적인 크기를 사용하여 구성 내에서 중요성과 순위를 나타내는 것을 말한다.
다른 말로 하면, 이 원칙을 잘 적용한다면 가장 중요한 요소가 덜 중요한 요소보다는 사이즈가 크다는 말이 될 것입니다. 이유는 간단합니다. 어떤 물체가 더 크면, 더 눈에 잘 띄기 때문이죠.
심미적으로 즐거움을 주는 디자인은 3개 이상의 사이즈를 사용하지 않습니다. 요소에 사이즈의 범위를 부여하는 것은 레이아웃 내의 다양성은 물론 시각적 계층을 줄 수 있습니다. 가장 중요한 요소를 크게 키워보세요. 스케일의 원리를 적절히 사용하고 올바른 요소를 강조하면 사용자는 쉽게 화면을 분석하고 사용 방법을 알 수 있습니다.
아이폰에서 보는 메디엄 Medium for iPhone : 인기 있는 아티클이 다른 아티클보다 사이즈가 큽니다. 유저들에게 더 흥미로운 아티클을 강조해 주는 역할을 합니다.
이 주차장의 경우, 가장 중요한 정보는 여기가 zone H라는 것이지요. 그래서 가장 큰 글씨로 표현되었습니다.
2. 시각적 위계 Visual Hierarchy
유저들은 시각적 위계가 잘 드러난 레이아웃을 쉽게 이해할 수 있습니다.
시각적 위계란?
- 시각적 계층의 원칙은 페이지에서 어디를 보아야 할지 안내하여 중요도에 따라 디자인 요소에 주의를 기울이도록 하는 것을 말한다.
시각적 위계는 스케일, 값, 색상, 간격, 배치 및 기타 다양한 신호의 변화를 통해 구현될 수 있습니다. 이런 위계는 경험의 전달에 기여할 수 있습니다. 현재 페이지에서 무엇을 보아야 할지 알아차리기 힘들다면, 그 디자인 레이아웃은 명확한 시각적 위계를 가지고 있지 않은 것입니다.
명확한 시각적 위계를 만들기 위해서는, 2-3개의 타이포 사이즈를 활용하여 유저들에게 가장 최상위의 중요도를 가진 콘텐츠가 무엇인지 알려줘야 합니다. 혹은 중요 요소에 밝은 색을 활용하고 덜 중요한 요소에는 뮤트 톤의 컬러를 적용할 수 있을 것입니다.
스케일도 비주얼 하이라키를 나타내는데 도움이 되기 때문에, 다양한 스케일들을 디자인에 활용해 보세요. 일반적으로는 스몰, 미디엄, 라지 스케일로 설계합니다.
좋은 예
메디움 모바일 앱 : 명확한 위계가 있습니다. 타이틀, 서브타이틀, 그리고 바디 텍스트까지. 각 컴포넌트들은 중요도에 따라 일관적인 타이포 사이즈로 디자인되었습니다.
우버 모바일 앱 : 우버 모바일에서도 비주얼 하이라키가 아주 잘 드러납니다. 화면은 지도와 인풋박스로 나눠져 있는데, 이는 두 요소 모두가 유저에게 중요하다는 점을 강조합니다. 화면을 보면 바로 'Where to?' 필드에 눈이 가는데, 이는 회색 박스로 디자인되어 있기 때문이며, 바로 하단에 있는 주소들은 살짝 작은 폰트로 이뤄진 걸 볼 수 있습니다.
나쁜 예
드롭박스 모바일 앱 : 드롭박스 앱은 다소 위계가 약한 모습입니다. 설명이 파일명 보다 아래 위치해 있지만, 다른 파일들 간의 다름을 분간하기엔 좀 어렵습니다. 이미지 썸네일이 레이어에 또 다른 위계를 주고 있지만, 파일 타입에 따라 썸네일 유무가 다릅니다. 따라서 사용자는 폴더나 파일을 찾을 때 하나하나씩 읽어보고 의미를 파악해야 할 것입니다.
3. 균형 Balance
균형은 시소와 같습니다. 시소가 무게를 맞춰 균형을 맞춰가는 것이라면, 디자이너는 디자인 요소들로 균형을 맞춰야 합니다.
균형이란?
- 균형의 원칙은 설계 요소의 만족스러운 배열 또는 비율을 의미한다.
균형은 화면 중앙을 기준으로 하나의 축이 있다고 했을 때, 양쪽으로 동일하게 분포되어 있을 때 생깁니다. (그러나 항상 대칭일 필요는 없음) 이 축은 수직일 수도, 수평일 수도 있습니다.
무게를 잴 때와 같이, 축을 기준으로 한쪽엔 작은 컴포넌트, 다른 쪽엔 큰 컴포넌트가 있다고 한다면 디자인이 불균형하게 느껴집니다. 디자인 요소의 숫자뿐만 아니라, 그 요소들이 차지하는 면적은 균형을 이루는데 중요합니다.
디자인을 할 때 상상의 축을 기준점 삼아서 레이아웃을 그려나가는 것이 현재의 균형 상태를 체크하고 이해하는데 중요합니다. 균형 잡힌 디자인에는 한 영역에만 눈이 가서 다른 영역을 보지 못하는 경우가 없습니다. (다른 요소들이 굵직한 비주얼을 가지고 있고, 집중되는 점들을 가지고 있다 한들 말이죠.)
균형이란
대청적 : 중앙 축을 기준으로 요소들이 대칭적으로 분포되어 있는 걸 말합니다.
비대칭적 : 디자인 요소들이 중앙 축을 기준으로 비대칭적으로 분포되어 있기도 합니다.
방사형 : 원형 방향으로 중앙의 공통점에서 원을 그립니다.
비주얼에서 전달하고자 하는 것에 따라 사용하는 균형의 종류도 달라집니다.
불균형의 경우 다이내믹하고 시선이 갑니다. 에너제틱하고 동적인 분위기를 연출하기 좋습니다.
균형의 경우 조용하고 정적입니다. 방사형 균형은 언제나 구성요소 중앙에 눈이 먼저 가게 합니다.
허브 스타일의 탐색 : 구성 요소가 안정적으로 느껴지며, 특히나 좋아하는 직업을 찾을 때 적합합니다. 여기서는 대칭적인 균형을 활용했습니다. 화면에 수직으로 가상의 선을 그었을 때, 양쪽이 균등하게 분배되는 걸 볼 수 있습니다.
나이키 : 비대칭 균형의 페이지는 에너지와 움직임과 같은 느낌을 전달하는데 나이키와 같은 브랜드와 잘 어우러집니다. 마찬가지로 중앙에 선을 그었을 때, 축을 기준으로 양 사이드의 디자인 요소 숫자들이 비슷합니다. 하지만, 모두 동일한 것은 아니며 정확히 같은 위치에 놓인 것도 아닙니다. 정확히는 신발 왼쪽에 조금 더 많은 텍스트들이 있지만, 우측 상단의 텍스트가 더 많은 영역과 굵직한 비주얼을 차지하고 있기 때문에 균형감을 가져갈 수 있습니다.
Brathwait의 손목시계 : 이 클래식 시계는 방사형으로 균형적입니다. 시계 정중앙으로 시선이 가게 되고 디자인 무게감이 골고루 분산되어 있습니다. 어느 쪽으로 축을 그어봐도 같습니다.
이 편집 레이아웃은 불균형합니다. 여기서 수직으로 선을 그었을 때, 요소들이 각 축에 동등하게 배치되지 않습니다.
4. 대비 Contrast
대비는 사용자에게 일부 영역의 디자인을 강조해서 전달할 때 자주 사용되는 원칙입니다.
대비란?
- 대비는 서로 비슷해 보이는 요소들이 서로 다르다는 사실을 전달하기 위해 시각적으로 서로 다른 요소들을 병치하는 것을 말한다(예를 들어, 다른 범주에 속하고, 다른 기능을 가지고 있고, 다르게 액션 하는 요소들).
한 마디로, 대비는 같아 보이는 대상을 눈이 구분할 수 있도록 강조해 주는 것을 말합니다. (사이즈나 컬러 등을 활용)
대비의 원칙은 컬러를 통해 자주 적용됩니다. 예로써, UI디자인에서 레드 컬러는 중요한 것을 삭제시킬 때 등장합니다(특히나 iOS에서). 밝은 색상을 통해 레드 컬러가 다른 요소들과는 다르다는 것을 알려주는 기능을 합니다.
iOS 리마인더 : 주변 맥락으로 봤을 때, 다른 요소들 보다 레드컬러가 훨씬 콘트라스트가 높고 삭제라는 의미를 전달한다. 종종 UX에서 "Contrast"라는 단어는 텍스트와 배경 사이의 대조를 떠올리게 합니다. 때로 디자이너들은 텍스트 강조를 위해서 의도적으로 텍스트 대비를 줄이기도 하는데, 이러한 접근은 위험합니다. 텍스트 대비를 줄이면 가독성이 저하되고 콘텐츠를 제대로 읽기 어려워집니다. 색상 대비 검사를 통해 모든 타겟 유저들이 콘텐츠를 볼 수 있도록 해야 합니다.
Greenhouse Juice Co: 병에 담긴 음료의 색상에 따라서 병에 적힌 텍스트의 가독성이 달라집니다. 어떤 주스의 경우에는 대비가 완벽하지만, 흰색이나 밝은 색상의 주스의 경우에는 거의 읽는 게 불가능합니다.
5. 게슈탈트의 원칙 Gestalt Principles
이 원칙은 20세기 초에 게슈탈트 심리학자들에 의해 설립되었습니다. 그들은 인간이 이미지를 어떻게 이해하는지를 알아내었습니다.
게슈탈트 원칙이란?
- 게슈탈트 원리는 인간이 어떻게 여러 요소로 구성된 복잡한 이미지를 단순화시키고 구조화하는지 설명한다. 인간은 복잡한 이미지를 각기 다른 종류의 요소로 인식하는 것이 아니라, 무의식 중에 구조화된 시스템으로 이해하고 그것을 하나로 구조화시켜 이해한다. 다시 말해, 게슈탈트 원리는 인간이 이미지의 전체를 개별적인 요소와 반대되는 것으로 인식하는 경향을 말해준다.
유사성, 연속성, 폐쇄성, 근접성, 공통 영역, 그림/지면, 대칭과 순서를 포함한 몇 가지 게슈탈트 원리가 있습니다. 근접성은 UX에 특히 중요한데, 이는 시각적으로 서로 가까운 항목이 동일한 그룹의 일부로 인식된다는 사실을 의미합니다.
게슈탈트 폐쇄 원리에 의해, 위 피카소 그림이 무작위의 형상이 아니라 두 인물이 키스하는 모습을 볼 수 있게 됩니다. 우리의 뇌는 없어진 조각들을 채우고 두 인물을 만들어 냅니다.
로고에서도 게슈탈트 이론을 볼 수 있습니다. NBC 로고를 보면 하얀색 여백에 실제 피콕이 있는 것이 아니지만 우리의 뇌는 피콕이 있는 것처럼 이해합니다.
우버의 회원가입 포맷도 게슈탈트의 근접성 이론을 따릅니다. 입력 창과 그에 대한 타이틀이 서로 가까이 붙어 있어 어떤 정보를 기입해야 하는지 쉽게 이해할 수 있습니다. 입력창과 타이틀이 멀찍이 떨어져 있었다면, 어떤 칸에 무슨 정보를 써야 할지 헷갈릴 것입니다.
2017 US 세금 포맷 : 기입을 해야 하는 칸 끼리의 간격이 너무 좁아서 매우 성가신 느낌을 줍니다. 두 번째 칸의 Last name가 가리키는 것을 놓치기가 쉽습니다. 게슈탈트 근접성 이론에 따라서 배우자와 분야를 구별했다면 더 좋은 경험을 줄 수 있었겠죠.
비주얼 디자인 원칙이 중요한 이유
왜 우리는 디자인 원칙을 이해해야 할까요? 단지 "예쁘게" 만드는 것을 넘어서, 그 이론들을 이해하고 실제로 적용함을 통해 아래와 같은 기여를 할 수 있습니다.
접근성 향상 - 비주얼 디자인 원칙들을 따르게 되면 사용하기 편리한 레이아웃을 구성할 수 있습니다. 예를 들어, 황금 비율은 아름다운 예술 품을 만들 때 활용되기도 하고, 타이포 그래피 작업 시에 폰트 사이즈나 자간 크기, 줄 간격 등의 관계를 통해 활용되기도 합니다. 그 결과 줄의 길이게 짧아져 웹페이ㅣ에 균형감을 주고 텍스트를 읽게 쉽게 만들 수 있을 것입니다. 강력한 인터랙션 디자인과 함께 디자인하는 경우, 사용자의 참여도를 높이고 태스크 성공률도 높일 수 있습니다.
감정과 기쁨 유발 - 아름다운 것들은 긍정적인 감정을 이끌어냅니다. 좋은 시각적 디자인의 원칙을 따름으로써, 디자이너들은 보기 좋고 따라서 사용자를 기분 좋게 만드는 UI를 만들 수 있습니다.
브랜드 인지도 강화 - 잘 만들어진 비주얼 시스템은 사용자 신뢰와 관심을 형성하고 브랜드를 적절하게 표현하고 강화합니다
NN그룹 홈페이지에서 발견한 중요한 아티클. UX 디자인 시 정말 중요한 기본 지식.
원문은 아래 링크 참조.
https://www.nngroup.com/articles/principles-visual-design/
