논리적 접근을 통한 UI 디자인 팁 2

 

 

 

1. 여러 가지 정렬을 동시에 사용하는 것을 피하세요.

왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 등 다양한 정렬 방식을 동시에 사용하면 인터페이스가 복잡하고 지저분해 보일 수 있습니다. 사용자의 눈은 각각의 정렬을 따라가느라 더 많은 노력을 하게 되고, 특히 작은 컴포넌트나 섹션 내에서 여러 정렬이 섞여 있을 때 그 문제는 더 도드라집니다.

가능한 한 하나의 정렬 방식(또는 최소한의 정렬 방식)을 고수하면 인터페이스가 더 간결하고 정돈되어 보입니다.

예시에서는 탭 메뉴는 가운데 정렬이고, 페이지의 다른 대부분 요소는 왼쪽 정렬입니다. 이러한 정렬 방식의 혼합은 불필요한 복잡성을 더해 사용자에게 약간의 인지 부담(인터페이스를 이해하고 사용하는 데 필요한 뇌의 처리량)을 줍니다. 탭을 왼쪽 정렬로 바꾸면 화면이 더 깔끔하게 정리됩니다.

 

 

 

 

2.  텍스트는 최소 4.5:1의 명도 대비를 확보하세요.

시각에 어려움이 있는 사용자도 텍스트를 명확히 읽을 수 있도록 하려면, 다음의 WCAG 2.1 레벨 AA 기준에 맞는 명도 대비를 충족해야 합니다:

- 작은 텍스트(18px 이하)는 최소 4.5:1의 대비가 필요합니다.
- 큰 텍스트(굵은 글씨의 경우 18px 초과, 일반 글씨는 24px 초과)는 최소 3:1의 대비가 필요합니다.

예시에서는 선택되지 않은 탭의 작은 텍스트가 대비가 부족해 읽기 어렵습니다. 더 어두운 회색을 사용하면 기준을 충족하는 충분한 대비를 확보할 수 있습니다.

 

 

 

 

 

3. 인터페이스를 단순화하기 위해 불필요한 컨테이너는 제거하는 것을 고려하세요.

정보를 관련된 항목끼리 작게 나눠서 그룹화하면 인터페이스를 더 잘 구성하고 정돈할 수 있습니다. 이렇게 하면 사용자들이 정보를 더 빠르게 이해하고 기억하기 쉬워집니다.

관련된 요소들을 그룹화하는 방법에는 다음과 같은 것들이 있습니다.

1) 관련 요소를 같은 컨테이너에 넣기
2) 관련 요소를 서로 가깝게 배치하기
3) 관련 요소를 비슷한 시각적 스타일로 표현하기
4) 관련 요소들을 일렬로 정렬하기

컨테이너를 사용하는 것은 요소를 그룹화할 때 가장 강력한 시각적 단서가 되지만, 동시에 화면을 복잡하게 만들 수도 있습니다. 다른 그룹화 방법을 활용할 수 있는 경우에는 굳이 컨테이너를 쓰지 않아도 되고, 오히려 디자인이 더 간결해질 수 있습니다.

예시에서는 각 기사(article)를 둘러싼 컨테이너가 꼭 필요하지 않습니다. 이미 다른 그룹화 방식(간격, 정렬, 스타일 등)을 사용하고 있기 때문입니다. 컨테이너를 제거하면 콘텐츠를 위한 공간도 더 확보할 수 있습니다.

 

 

 

 

 

4. 글꼴 두께는 일반(Regular)과 굵게(Bold)만 사용하는 것이 좋습니다.

하나의 글꼴에는 다양한 두께(weight)가 있지만, UI 디자인에서 이 모든 두께를 사용할 필요는 없습니다. 여러 가지 글꼴 두께를 혼용하면 화면이 복잡하고 산만해질 수 있으며 각 두께를 일관되게 사용하는 것도 어려워집니다.

디자인 시스템을 더 단순하고 명확하게 유지하려면 **일반(Regular)**과 굵게(Bold) 두 가지만 사용하는 것이 좋습니다. 만약 Bold가 너무 두껍게 느껴진다면, 일부 글꼴에 포함된 Semi-Bold(중간 굵기)를 대체로 사용할 수 있습니다. 이처럼 제한된 두께만 사용해도 충분히 계층 구조를 표현할 수 있으며 시각적 일관성도 높일 수 있습니다.

 

 

 

 

간단한 사용 팁:

- **제목(heading)**에는 굵은(Bold) 글꼴을 사용해 강조하세요.
- 본문이나 작은 텍스트에는 일반(Regular) 글꼴을 사용하세요.
- 매우 얇거나 두꺼운 글꼴을 사용할 경우, 제목이나 큰 크기의 텍스트에만 사용하는 것이 좋습니다. 작은 크기에서는 가독성이 떨어질 수 있기 때문입니다.

예시에서는 기사 정보에 서로 다른 3가지 글꼴 두께가 사용되고 있습니다. "Extra Light"와 "Thin" 글꼴은 명도 대비 기준(4.5:1)을 충족하긴 하지만, 여전히 일부 사용자에게는 읽기 어려울 수 있습니다. 글꼴 두께를 Regular로 높이면 가독성이 개선되고 디자인도 더 단순해집니다. 기사 제목에 Semi-Bold를 사용하면 눈에 더 잘 띄게 할 수 있습니다.

 

 

 

 

글꼴 두께를 **2가지(Regular와 Bold)**만 사용하면 다음과 같은 디자인이 완성됩니다. 지금까지 UI 디자인 팁을 잘 적용해 오면서 상당히 좋은 방향으로 개선되고 있지만, 아직 해결해야 할 몇 가지 문제가 남아 있습니다.

계속해서 남은 요소들도 다듬어 나가면 전체적인 완성도가 더 높아질 것입니다.

 

 

 

 

5. 일관성을 유지하세요.

UI 디자인에서의 **일관성(consistency)**은 비슷한 요소들이 비슷한 방식으로 보이고 작동하는 것을 의미합니다. 이는 제품 내에서뿐만 아니라, 다른 잘 알려진 제품들과 비교했을 때도 마찬가지여야 합니다. 이러한 예측 가능한 동작 방식은 사용성을 높이고, 사용자가 매번 작동 방식을 새로 익히지 않아도 되기 때문에 오류를 줄이는 데도 도움이 됩니다.

예시에서는 기사마다 들어간 사진의 모서리가 날카롭게 처리되어 있는데, 버튼과 아이콘은 부드럽게 둥근 모서리를 가지고 있어 서로 어울리지 않습니다. 사진에도 모서리 둥글기를 적용하면 시각적으로 더 일관된 디자인 언어를 만들 수 있습니다.

이런 사소해 보이는 디테일 하나하나가 모여, 전체 디자인을 더 “정돈되고 완성도 있게” 만들어 줍니다.

 

 

 

 

6. 미니멀리즘을 단순함과 혼동하지 마세요.

‘미니멀(minimal)’하다고 해서 반드시 ‘단순(simple)’한 것은 아닙니다. 디자이너들은 미니멀한 인터페이스를 선호하는 경향이 있는데, 이는 시각적으로 깔끔하고 아름다워 보이기 때문입니다. 미니멀한 인터페이스는 요소와 스타일이 적을 뿐, 꼭 이해하거나 사용하기 쉬운 것은 아닙니다.

오히려 미니멀한 디자인은 중요한 정보나 힌트가 부족해져서 사용자가 혼란스러워하거나 정확한 조작을 어려워할 수 있습니다. 단순함은 단순히 줄이는 것이 아니라, 사용성(usability)을 해치지 않으면서 본질만 남기는 것입니다.

불필요한 것을 제거하는 것은 좋지만, 너무 많이 없애거나 숨기면 오히려 사용성을 해칠 수 있다는 점을 항상 유의해야 합니다. 중요한 정보와 맥락은 반드시 남겨야 합니다.

 

 

 

 

예시에서 하단 내비게이션 아이콘들은 깔끔하고 미니멀하게 보이지만, 그 의미가 모두에게 명확할까요? 그렇지 않을 수도 있습니다.

텍스트 라벨을 아이콘에 함께 추가하면, 아이콘이 무엇을 의미하는지 누구나 쉽게 이해할 수 있도록 도와줍니다. 특히 시각장애인이 사용하는 **스크린 리더(화면의 내용을 음성이나 점자로 읽어주는 보조 기술)**를 고려했을 때도, 텍스트 라벨은 매우 중요합니다.

결론적으로, 미니멀함을 유지하되 사용성을 해치지 않도록 반드시 의미 전달이 잘 이루어져야 하며, 이를 위해서는 아이콘에 텍스트를 함께 제공하는 것이 좋은 접근입니다.

 

 

 

 

 

 

7. 아이콘과 텍스트의 균형을 맞추세요.

아이콘과 텍스트를 함께 사용할 때는 **시각적인 중요도(visual prominence)**가 비슷하게 느껴지도록 조정하는 것이 좋습니다. 그래야 전체적으로 균형 잡히고 통일성 있는 디자인이 완성됩니다.

예를 들어, 아이콘은 너무 크고 텍스트는 작으면 아이콘만 강조되고 텍스트가 묻히게 되고, 반대로 텍스트가 너무 눈에 띄면 아이콘의 의미가 약해질 수 있습니다. 두 요소가 서로 조화를 이루며 동등한 역할을 할 수 있도록 크기, 굵기, 간격 등을 조정하는 것이 핵심입니다.

 

 

 

예시에서 하단 내비게이션의 아이콘과 텍스트 조합은 약간의 불균형이 있습니다. 아이콘과 텍스트는 같은 색상이지만, 아이콘이 더 크고 두껍기 때문에 시각적으로 더 눈에 띄며 강조되어 보입니다.

이러한 불균형을 해소하기 위해 텍스트 색상을 더 어둡게 조정하면 텍스트의 시각적 중요도가 높아져 아이콘과 균형감 있게 보이게 됩니다. 또한, 텍스트 대비를 최소 4.5:1 이상으로 높이면 저시력 사용자도 내용을 쉽게 인식할 수 있어 접근성 면에서도 더 우수해집니다.

즉, 아이콘과 텍스트의 시각적 무게감이 균형을 이루도록 조정하는 것이 중요하며, 이는 디자인 완성도와 사용자 접근성 모두에 긍정적인 영향을 줍니다.

 

 

 

출처:

https://uxplanet.org/14-logic-driven-ui-design-tips-145ee08ea5a5