한 끗 차이로 좋아보이는 UI 법칙 16가지
사소한 UI 법칙으로 유저 인터페이스를 더 좋게 만들자.
이 게시글은 Adham Dannaway의 '16 little UI design rules that make a big impact' 아티클을 번역한 내용입니다. 오역이 있을 수 있으니, 지적은 언제든 환영합니다.
유저 인터페이스 디자인은 어렵습니다. 레이아웃, 간격, 타이포그래피, 색상과 관련해 선택할 수 있는 옵션이 너무 많기 때문에 결정하는 게 부담스러울 수 있기 때문이죠. 여기에 사용성, 접근성, 심리학까지 고려하면 난이도는 더욱 올라갑니다.
다행히도 UI 디자인은 그렇게 어렵지 않습니다. 20년 가까이 제품 디자이너로 일하면서 저는 대부분의 시각 및 인터랙션 디자인 결정이 논리적 규칙 체계에 의해 좌우된다는 사실을 알았습니다. 예술적 감각이나 마법 같은 직관이 아니라 단순한 규칙이죠.
논리적 규칙 체계가 있으면 정보에 입각한 디자인 결정을 효율적으로 내리는 데 도움이 됩니다. 논리적 시스템이 없으면 직감에 의존하여 예쁘게 보일 때까지 오브젝트를 왔다갔다 해야 합니다.
저는 규칙과 논리를 좋아하지만 디자인 결정에 '반드시'는 거의 없습니다. 반드시 지켜야 하는 엄격한 규칙이라기보다는 대부분의 경우에 적합한 유용한 가이드라인이라고 생각하세요.
가장 빨리 배우는 방법은 직접 해보는 것이니 이제 시작해보겠습니다.
논리적 규칙을 사용하여 아래 예제를 수정해보겠습니다.
다음 두 가지 디자인은 숙박 예약 앱에서 숙소 상세페이지 부분입니다. 첫 번째(왼쪽) 이미지가 원래 디자인이고, 두 번째(오른쪽)는 몇 가지 논리적 규칙이나 가이드라인을 적용한 결과입니다.
시각 디자인이나 인터랙션 디자인 경험이 많지 않더라도 원래 디자인이 지저분하고 복잡하며 사용하기 어렵다는 걸 느낄 수 있을 것입니다. 이는 사용성에 위험을 초래하는 디자인 요소들이 포함되어 있기 때문입니다. 아래 내용을 읽기 전에 당신은 몇 가지를 발견할 수 있나요?
다음과 같은 논리적 규칙 또는 가이드라인을 사용해 원본 디자인의 문제점을 하나씩 수정해보겠습니다.
1. 공백을 사용해 관련 요소 그룹화하기
정보를 관련 요소끼리 작은 그룹으로 나누면 인터페이스를 구성하고 정리하는 데 도움이 됩니다. 이렇게 하면 사람들이 더 빠르고 쉽게 이해하고 기억할 수 있습니다. 아래와 같은 방법을 사용해 관련 요소를 그룹화할 수 있습니다.
1) 관련 요소를 같은 컨테이너에 배치하기
2) 관련 요소를 서로 가깝게 배치하기
3) 관련 요소를 비슷하게 보이게 만들기
4) 관련 요소를 나란한 선으로 정렬하기
유의할 점이 있습니다. 컨테이너를 사용하는 것은 인터페이스 요소를 그룹화하는 가장 강력한 시각적 단서이지만, 불필요한 혼란을 가중시킬 수 있습니다. 다른 그룹화 방법도 사용해보세요. 디자인을 단순화하는 데 도움이 되는 경우가 많습니다.
특히 공백을 사용하는 것은 관련 요소를 그룹화하기에 매우 효과적이고 간단한 방법입니다. 다른 방법과 함께 그룹화 방법을 쓰면 그룹을 더 명확하게 표시할 수도 있습니다.
이 예시에서는 콘텐츠 사이에 공간이 부족하여 디자인이 어수선해 보이고 이해하기 어렵습니다. 간격을 늘리면 콘텐츠를 명확하게 그룹화할 수 있어 보다 체계적이고 이해하기 쉽게 만들 수 있습니다.
2. 일관성 유지
UI 디자인의 일관성이란 비슷한 요소들이 비슷한 방식으로 보이고 작동하는 것을 의미합니다. 이는 제품 내에서뿐만 아니라 잘 알려진 다른 제품과 비교할 때도 마찬가지입니다. 이렇게 예측 가능한 기능은 사람들이 작동 방식을 계속 배울 필요가 없기 때문에 사용성을 개선하고 오류를 줄입니다.
예시에서는 아이콘 스타일이 일관되지 않아 일부 아이콘은 채워져 있고 일부 아이콘은 채워져 있지 않습니다. 채워진 아이콘은 종종 요소가 선택되었음을 나타내므로 일부 사람들에게 혼란을 줄 수 있습니다. 모든 아이콘의 윤곽선을 2pt 획 굵기와 둥근 모서리로 설정하면 일관성이 향상되고 각 아이콘의 시각적 무게가 비슷해집니다.
3. 비슷해 보이는 요소가 비슷하게 작동하도록 만들기
요소가 비슷해 보이면 사람들은 비슷한 방식으로 작동할 거라 기대합니다. 따라서 동일한 기능을 가진 요소에는 일관된 시각 효과를 사용하세요. 반대로 기능이 다른 요소는 다르게 보이도록 하세요.
이 예시에서 아이콘 컨테이너는 '지금 예약하기' 버튼과 비슷한 시각적 스타일을 사용합니다. 따라서 실제로는 그렇지 않은데도 대화형(상호작용이 가능한 요소) 요소처럼 보이게 됩니다. 아이콘에서 파란색 버튼 스타일을 제거하면 아이콘이 대화형 요소로 오인되는 것을 방지할 수 있습니다.
4. 명확한 시각적 계층 구조(하이라키) 만들기
인터페이스의 모든 정보가 동일한 수준의 중요성을 갖는 건 아닙니다. 더 중요한 요소를 더 눈에 띄게 표시하여 중요도에 따라 정보를 표시하는 것을 목표로 합니다.
명확한 중요도 순서, 즉 시각적 계층 구조는 사람들이 정보를 빠르게 스캔하고 관심 있는 영역에 집중하는 데 도웁을 줍니다. 또한 정돈된 느낌을 주어 심미성 역시 향상됩니다. 크기, 색상, 대비, 간격, 위치, 깊이를 다양하게 변경하여 명확한 시각적 계층 구졸르 만들 수 있습니다.
다음은 시각적 계층 구조가 명확하지 않은 웹사이트 히어로 배너와 중요도에 따라 요소가 명확하게 표시된 배너입니다.
시각적 계층 구조가 명확한지 빠르고 쉽게 테스트할 수 있는 방법은 'the Squint Test'를 사용하는 것입니다. 눈을 가늘게 뜨고 디자인을 보기만 하면 됩니다. 또는 화면에서 더 멀리 이동하거나 디자인을 흐리게 만들어놓을 수도 있습니다. 그래도 가장 중요한 요소가 무엇인지 구분하고 인터페이스의 용도를 인식할 수 있어야 합니다.
the Squint Test를 예시에 적용해보겠습니다. 원본 이미지에서는 비슷하게 눈에 잘 띄는 요소가 주의를 끌기 위해 경쟁하고 있음을 알 수 있습니다. 반면 왼쪽 하단의 CTA 버튼은 전혀 눈에 띄지 않죠.
CTA 버튼은 일반적으로 인터페이스에서 가장 눈에 띄는 요소여야 합니다. 대비가 높은 배경색과 굵은 글꼴 굵기를 사용하면 이를 달성하는 데 도움이 됩니다. 이렇게 하면 나중에 살펴볼 저대비 버튼의 접근성 문제도 해결할 수 있습니다.
the Squint Test를 업데이트된 디자인에 적용해보면, 가장 눈에 띄는 요소는 단연 CTA 버튼입니다.
이제 시각적 계층 구조가 더 명확해졌지만, 여전히 개선할 부분은 있습니다. 예를 들어 본문 텍스트 블록은 중요도에 비해 눈에 너무 잘 띕니다. 시각적 계층 구조를 수정하는 데 도움이 될 몇 가지 간단한 타이포그래피 가이드라인을 곧 배우게 될 것입니다.
5. 불필요한 스타일 제거하기
불필요한 정보와 시각적 스타일은 주의를 산만하게 하고, 인지 부하(인터페이스 사용에 필요한 두뇌 활동량)를 증가시킬 수 있습니다. 불필요한 선, 색상, 배경, 애니메이션을 피하여 더 단순하고 집중할 수 있는 인터페이스를 만드세요.
이 예시에서는 이미지 주변의 공백과 테두리가 불필요한 시각적 복잡성을 더하고 있습니다. 정보를 전달하거나 요소를 그룹화하는 데 필요하지 않으므로 제거하여 디자인을 단순화해봅시다.
6. 목적에 맞는 색상 사용
색상은 목적에 맞게 아껴 사용하세요. 혼란스럽고 산만할 수 있으므로 장식용으로만 색상을 사용하는 건 피해야 합니다. 흑백으로 시작해 의미를 전달해야 하는 곳에만 색상을 쓰세요.
간단하고 효과적인 접근 방식은 텍스트 링크 및 버튼과 같은 인터랙티브 요소에 브랜드 색상을 적용하는 것입니다. 이렇게 하면 사라들에게 인터랙티브 요소와 그렇지 않은 요소를 구분하는 데 도움이 됩니다. 비대화형 요소에는 브랜드 색상을 사용하지 않도록 주의하세요.
일부 인터랙티브 요소에는 이미 인터랙티브임을 나타내는 시각적 단서가 있으므로 모든 인터랙티브 요소에 색상을 추가할 필요는 없습니다. 예를 들어, 다음 예시의 카드는 파란색 링크가 있든 없든 여전히 대화형 요소로 느껴집니다.
원래 예제에서는 파란색 제목이 보기에는 좋지만 텍스트가 대화형 요소인 것처럼 보입니다. 혼동을 피하기 위해 제목에서 파란색은 제거했습니다.
별점 평가와 같은 다른 비대화형 요소에서도 파란색을 제거합니다. 이렇게 하면 대화형 요소와 비대화형 요소를 훨씬 쉽게 구분할 수 있습니다.
7. 인터페이스 요소의 명암비가 3:1인지 확인합니다.
명암비는 두 색상 간의 인지된 밝기 차이를 측정하는 척도입니다. 1:1에서 21:1 범위로 표시할 수 있습니다. 예를 들어 검은색 배경에 검은색 텍스트는 비율이 1:1로 가장 낮고, 흰색 배경에 검은색 텍스트는 21:1로 가장 높습니다. 어떻게 색상 간 명암비를 확인할 수 있냐고요? 다양한 색상 간의 대비 비율을 측정하는 데 도움이 되는 온라인 도구가 많이 있습니다.
시각 장애가 있는 사용자가 인터페이스 세부 정보를 명확하게 볼 수 있도록 하려면 최소한 웹 콘텐츠 접근성 지침(WCAG) 2.1 레벨 AA 색상 대비 요구사항을 충족하는 걸 목표로 하세요. 즉, 양식 필드 및 버튼과 같은 사용자 인터페이스 요소는 최소 3:1의 대비 비율을 가져야 합니다.
이 예에서는 화살표 아이콘의 대비가 너무 낮습니다. 아이콘에 그림자를 추가하고, 이미지의 상단 1/3에 그라데이션 오버레이를 추가해 아이콘이 놓인 이미지에 관계없이 충분히 3:1 대비를 얻을 수 있습니다.
원본 이미지의 CTA 버튼 대비도 너무 낮습니다. 앞서 시각적 계층 구졸르 다룰 때 이 문제를 해결했지만, 여기에서도 언급할 필요가 있습니다.
대비가 낮은 버튼의 위험은 저시력자는 버튼 모양을 볼 수 없기 때문에 버튼임을 식별하지 못할 수 도 있다는 것입니다. 버튼 대비 비율을 3:1 이상으로 높이면 버튼에 대한 접근성을 높이고 시각적 계층 구조를 수정하는 데 도움이 됩니다.
화살표와 버튼 대비 비율을 3:1 이상으로 높이면 다음과 같은 디자인이 됩니다. 조금씩 나아지고 있지만 아직 해결해야 할 문제가 더 많습니다.
8. 텍스트 대비 비율이 4.5:1인지 확인합니다.
시각 장애가 있는 사용자(저시력자 포함)가 텍스트를 선명하게 읽을 수 있도록 하려면 다음과 같은 WCAG 2.1 레벨 AA 대비 요구 사항을 충족해야 합니다.
작은 텍스트(18px 이하)는 최소 4.5:1의 대비가 필요합니다. 큰 텍스트(Bold 18px 이상 / Regular 24px 이상)는 최소 3:1의 대비가 필요합니다.
이 예에서는 사진 개수에 대한 작은 텍스트의 대비가 충분하지 않습니다. 회색 컨테이너의 불투명도를 높이고 텍스트 그림자를 추가하여 대비 비율을 4.5:1 이상으로 높였습니다.
위치 텍스트의 대비도 너무 낮습니다. 글꼴 두께가 얇아 읽기 더욱 어렵습니다. 더 어두운 회색 음영을 사용하면 텍스트의 접근성을 높이는 데 도움이 됩니다. 조만간 텍스트를 추가로 업데이트하여 개선할 예정입니다.
9. 색상에만 의존하지 마세요.
색맹에는 다양한 유형이 있으며 주로 남성에게서 많이 나타납니다. 일반적으로 색맹인 사람들은 빨간색과 녹색을 구분하는 데 어려움을 겪지만, 일부는 전혀 색을 볼 수 없습니다.
색맹이 인터페이스를 사용할 수 있도록 하려면 색에만 의존하여 의미를 전달하거나 시각적 요소를 구분해서는 안 됩니다. 인터페이스 요소를 구분하기 위해 추가적인 시각적 단서를 사용해야 합니다.
이 예에서는 '리뷰' 텍스트에 파란색을 사용해 링크임을 나타냅니다. 색상을 제거하면 링크 텍스트가 다른 텍스트와 동일하게 보이므로 색맹은 링크인지 알 수 없습니다. 색상이 없는 경우, 링크 텍스트에 밑줄을 그으면 다른 텍스트와 명확하게 구분할 수 있습니다.
10. 단일 산세리프 서체 사용
서체는 스타일이나 미학이 비슷한 관련 글꼴의 집합입니다. 예시에서는 헬베티카 서체를 사용했습니다. 글꼴은 서체 내에서 가중치나 크기와 같은 변형입니다. 예를 들어 헬베티카 볼드체와 헬베티카 레귤러체는 헬베티카 서체 내에서 서로 다른 두 가지 서체입니다.
인터페이스 디자인에는 일반적으로 가장 가독성이 높고 중립적이며 단순한 단일 산세리프 서체를 사용하는 것이 가장 안전합니다.
이 예제에서는 제목에 세리프 서체를 사용했는데, 약간 읽기 어렵고 산만해보일 수 있습니다. 또한 강한 개성이 이 숙박예약 앱의 일부 사진과 어울리지 않을 수 있습니다. 산세리프 서체를 사용하여 단순화하면 사용성과 심미성을 개선하는 데 도움이 될 수 있습니다.
11. 소문자가 큰 서체 사용
일반적으로 소문자는 작은 크기에서 가독성이 높으므로 소문자 높이가 크고 글자 간격이 넓은 서체를 선택하세요. 서체에서 소문자의 높이를 X 높이라고 합니다.
이 예시에서는 상대적으로 가로 높이가 낮은 Gill Sans 서체를 사용했습니다. Lato와 같이 X 높이가 더 큰 서체로 변경하면 가독성을 높이는 데 도움이 됩니다.
서체를 Gill Sans에서 Lato로 업데이트 한 후의 예는 위와 같습니다.
12. 대문자 사용 제한하기
사람들에게 소리를 지르는 경우가 아니라면 대문자를 사용해야 할 타당한 이유가 많지 않습니다. 시끄럽고 읽기 어렵습니다.
글을 읽을 때 각 글자를 보는 것이 아니라 단어의 모양을 보게 됩니다. 모양이 단어를 더 빨리 인식하는 데 도움이 됩니다. 대문자 단어는 모두 같은 직사각형 모양입니다. 따라서 각 글자를 하나씩 읽어야 합니다.
이 예제에서는 위치 텍스트에 대문자를 사용합니다. 첫 단어와 고유명사(사람, 장소 또는 사물의 이름)만 대문자로 사용하는 문장 대소문자로 변경하면 가독성을 높이는 데 도움이 됩니다.
13. 레귤러 / 볼드 두께의 가중치만 사용하기
서체에서 사용할 수 있는 글꼴 가중치가 많다고 해서 디자인에 모든 글꼴 가중치를 사용해야 하는 것은 아닙니다. 다양한 글꼴 가중치를 많이 사용하면 인터페이스에 노이즈와 복잡함이 더해질 수 있습니다. 또한 각 글꼴 가중치를 일관되게 사용하기가 더 어려워집니다.
레귤러 혹은 볼드 글꼴 가중치만 사용해 디자인 시스템을 단순하고 간결하게 유지하세요.
✅사용 팁
1) 제목에 볼드 글꼴 굵기를 상요해 제목을 강조하세요.
2) 다른 작은 텍스트에는 레귤러 글꼴 굵기를 사용합니다.
3) 매우 얇거나 두꺼운 글꼴 굵기를 사용하기로 결정한 경우, 작은 크기에서는 읽기 어려울 수 있으므로 제목과 큰 텍스트에만 사용하세요.
이 예제에서는 위치 텍스트에 가벼운 글꼴 가중치를 사용했습니다. 명암비를 필수 명암비인 4.5:1 이상으로 높였음에도 불구하고 얇은 글자는 일부 사람들에게 여전히 읽기 어려울 수 있습니다. 글꼴 굵기를 일반으로 높이면 가독성이 향상되고 디자인이 단순화됩니다.
14. 순수한 검은색 텍스트 피하기
UI 디자인의 경우, 일반적으로 흰색과 대비가 매우 높은 순수한 검은색은 피하는 것이 안전합니다. 이러한 높은 대비는 텍스트를 읽을 때 눈의 피로와 피로를 유발할 수 있습니다.
검은색은 색상 밝기가 0%이고 흰색은 색상 밝기가 100%입니다. 색상 밝기의 차이가 크면 눈이 더 많은 일을 하게 됩니다. 흰색과ㅏ 대비되는 순수한 검은색은 피하고 대신 짙은 회색을 선택하는 것이 가장 안전합니다.
이 예시에서는 여러 요소에 순수한 검정색을 사용했습니다. 이를 짙은 회색으로 변경하면 가독성을 높이는 데 도움이 됩니다. 이전에는 시각적 계층 구조를 볼 때 속성 설명 텍스트가 너무 두드러진다는 점을 지적했습니다. 인터페이스 요소가 중요한 순서대로 표시되도록 하기 위해 속성 설명 텍스트에 더 밝은 회색을 사용해 눈에 잘 띄지 않도록 했습니다.
15. 텍스트 왼쪽 정렬
영어는 왼쪽에서 오른쪽, 아래쪽으로 F자 모양으로 읽습니다. 따라서 최적의 가독성을 위해 텍스트를 왼쪽으로 정렬하는 것이 가장 좋습니다. 긴 본문 텍스트의 경우, 가운데 정렬 또는 맞춤 텍스트를 피하는 것이 가장 안전합니다. 특히 인지 장애가 있는 사람은 읽기 더 어렵습니다.
중앙 맞춤은 제목과 짧은 텍스트에는 빠르게 읽을 수 있으므로 적합할 수 있습니다. 그러나 중앙 정렬은 각 줄의 시작점이 계속 바뀌기 때문에 긴 본문 텍스트를 읽기 어렵게 만듭니다. 각 줄의 시작점을 찾기 위해 눈이 더 많은 노력을 기울여야 합니다.
이 예시에서는 속성 설명 텍스트가 가운데 정렬되어 있습니다. 텍스트를 왼쪽으로 정렬하면 가독성이 향상되고 위의 왼쪽으로 정렬된 테스트와도 일관성이 유지됩니다.
16. 본문 텍스트에 최소 1.5 line height(줄 높이) 사용하기
줄 높이는 두 줄의 텍스트 사이의 수직 거리를 말합니다. 줄 사이의 간격은 사람들이 같은 줄의 텍스트를 다시 읽는 것을 방지하는 데 도움을 줍니다. 또한 보기도 더 편안하게 느껴집니다.
특히 긴 본문 텍스트의 경우, 접근성과 가독성을 높이려면 줄 높이가 1.5(150%) 이상이 되도록 하세요. 일반적으로 줄 높이를 1.5에서 2 사이로 유지하는 것이 좋습니다.
이 예시에서는 줄 높이가 1(100%)에 불과합니다. 1.6(160%)으로 높이면 가독성을 개선하는 데 도움이 됩니다.
드디어 완성!
간단하지만 강력한 몇 가지 UI 디자인 가이드라인을 통해 예시 디자인에서 여러가지 문제를 발견하고 빠르게 수정했습니다.
UI 디자인이 그렇게 어렵지 않다는 것을 알게 되셨기를 바랍니다. 마법처럼 보일 수도 있지만 많은 부분이 방금 배운 것과 같은 논리적 규칙이나 가이드라인으로 구성되어있기 때문입니다. 주관적인 의견이 아닌 객관적인 논리를 사용하면 직관적이고 접근성이 뛰어나며 아름다운 인터페이스를 더 빠르고 쉽게 디자인할 수 있습니다.
