좋은 UI 디자인의 정의를 생각해보신 적 있나요? 색상이나 폰트를 잘 사용하거나, 배치를 잘했다는 명확한 기준이 있을지 생각해봅시다. 우선 좋은 UI 디자인은 버튼이나 텍스트, 컬러 등이 어떻게 사용될 지 규칙을 만들어서 사용자가 UI를 쉽게 이해할 수 있게 만듭니다. 요소마다 일관성 있는 스타일을 부여하여 사용자는 큰 노력 없이도 인터페이스를 빠르게 이해할 수 있게 됩니다.
좋은 디자인이 반영된 UI는 사용자가 어디에 집중해야 할 지 시각적으로 보여줍니다. 폰트, 색상, 크기, 여백 등 여러 요소를 통해 중요한 부분은 부각되고, 중요하지 않은 것들은 잘 보이지 않게 만들 수 있습니다. 중요한 정보가 정확하게 강조된 인터페이스는 사용자가 빠르게 사이트를 탐색하여 자신의 목적을 효과적으로 달성하는 것을 돕습니다.
1. 좋은 UI 디자인의 원칙
그렇다면 좋은 UI 디자인 원칙은 무엇이 있을까요? 원칙이라는 건 사람마다 정의가 다를 수 있습니다. 하지만 그래도 포기할 수 없는 속성도 반드시 존재합니다. 디자인에는 일관성과 위계가 있어야 합니다. 디자인에는 같아야 하는 것이 있고, 달라야 하는 것이 있습니다. 같아야 하는 걸 잘 보여주는 것이 일관성이고, 달라야 하는 것을 잘 보여주는 것이 위계입니다. 일관성과 위계를 기반으로 UI에 있어서 좋은 디자인을 판단할 수 있습니다. 두 가지 원칙을 잘 이해한다면 깔끔하면서 직관적인 UI 디자인을 볼 수 있는 눈을 기를 수 있습니다.
2. UI 디자인에서의 일관성
우선, 폰트를 하나의 스타일로 통일해봅시다. 폰트가 일정하면 사용자는 글 자체에 집중할 수 있습니다. 그 다음, 특정 행동이나 특정 상태에 있는 인터페이스의 색상을 동일하게 선정합시다. 게슈탈트 이론이라는 것이 있습니다. 이 이론은 사람은 여러 시각적 원리를 통해 사물을 인지한다는 걸 설명합니다. 게슈탈트 이론을 적용한다면, 우리는 유사한 색상이나 원리가 있는 것을 본다면 같은 기능을 연상할 수 있습니다.
예를 들어 봅시다. 하나의 사이트에서 특정된 동작에 일관된 UI를 적용하면 사람들이 UI를 더 쉽게 사용할 수 있습니다. 사람들이 클릭하고자 하는 버튼 기능에 하나의 색상을 적용해봅시다. 만일 보라색을 일관성 있게 사용한다면 이 사이트에서 보라색은 클릭 가능한 요소로 볼 수 있습니다.
이처럼 일관성은 어떤 기능이나 동작을 가진 요소들이 어떤 색상을 가져야 할 지, 또 어떤 폰트를 가져야 할 지, 어떻게 배치되어야 할지 등 규칙을 만들어서 인터페이스에 전체적인 통일성을 부여하는 걸 의미합니다. 일관성에 따라 UI를 디자인 한다면, 사용자는 인터페이스를 어떻게 활용할 지 직관적으로 알게 되어 더 쉽고 빠르게 자신의 목적을 달성할 수 있습니다.
3. 일관성 있는 인터페이스 디자인하기
일관성 있는 디자인을 만들기 위해서 먼저 구현하고자 하는 기능의 목록을 살펴봅시다. 일반적으로 페이지 제목, 페이지 설명이 들어갑니다. 이해를 돕기 위해 예시를 들어봅시다. 구독 페이지를 만든다고 가정해봅시다. 그렇다면 페이지 제목, 페이지 설명, 그리고 구독 요금제 페이지를 생성해야합니다. 구독 요금제 페이지에는 요금제의 제목, 요금제 가격, 가격 부가 설명, 요금제 선택 버튼 등이 필요합니다.
먼저 각 항목의 (1)구조를 고려해봅니다. 이를 위해, (2)폰트와 크기를 먼저 일관성 있게 맞춰줍니다. 이후 같은 기능을 공유하는 항목끼리 (3)색상을 통일시켜 줍니다. 특히 텍스트와 아이콘이 함께 사용된다면 그 사이의 여백을 확인해주면서 텍스트와 아이콘을 그룹으로 묶어서 작업합니다. 마지막으로 각 항목의 (4)정렬 상태를 확인합니다. 정렬에는 왼쪽, 오른쪽, 중앙정렬이 있습니다. 설계의 목적에 맞는 정렬 버튼을 눌러 활용합니다.
※ 해당 글은 코드잇(codeit)의 [UI 디자인 기초] 강의 내용에서 참고하여 작성하였습니다.