좋은 UI 디자인을 위해서는 일관성을 유지하는 것이 사용자 편의에 좋으며, 이를 어떻게 디자인에 반영할 수 있는지 살펴봤습니다. 이번에는 위계에 대해 알아봅시다. 위계란 중요한 내용과 그렇지 않은 내용을 잘 드러내서 인터페이스를 더 이해하기 쉽게 만드는 것입니다. 색이나 거리, 크기 등을 조정해서 좋은 위계를 만든다면 사람들이 인터페이스를 더 잘 이해할 수 있게 됩니다. 그렇다면 위계를 디자인에 어떻게 반영하는지 살펴보겠습니다.
1. 정보를 미리 나누는 작업
먼저 위계를 적용하기 위해서는 정보를 적절한 크기로 나눠주는 작업이 필요합니다. 보통 UI를 살펴보면, 다른 페이지로 이동할 수 있는 버튼이 있는 내비게이션 영역과 페이지를 간단하게 소개할 수 있는 배너 영역, 각 품목들을 보여주는 콘텐츠 영역으로 나눌 수 있습니다. 여기서 UI 안에 정보를 어떻게 구분할 수 있을까요? 이전에 배운 괴슈탈트 이론을 적용해봅시다. 먼저 근접성의 원리에 따르면, 상대적으로 가까이 있는 것들은 더욱 연관성이 있어보이고 멀리 있는 것은 연관성이 떨어져보입니다. 따라서 요소들의 간격을 넓히는 것만으로도 영역을 분리하는 느낌을 줄 수 있습니다.
여기에 공통 영역의 원리도 적용해볼 수 있습니다. 말 그대로 같은 요소들이더라도 어떤 형태로든 그것들이 공통된 하나의 영역 안에 들어가 있으면 해당 요소들 간의 연관성이 더 높아보입니다. 배경으로 사각형 영역을 만들어서 블록처럼 묶어주면 요소들이 더 분명하게 분리되는 것을 볼 수 있습니다.
마지막으로 유사성의 원리를 적용해봅시다. 이전에 언급한 일관성과 비슷한 맥락입니다. 유사성의 원리는 유사한 요소들 사이에서 강한 연관성을 부여합니다. 이건 반대로 이야기하면 색이나 형태를 바꿔서 정보를 분리할 수도 있다는 이야깁니다. 콘텐츠 영역과 배너 간의 UI 배치를 조금만 다르게 바꿔도 배너와 콘텐츠 영역을 분리할 수 있습니다. 그 결과 정보가 잘 드러나게 나뉘게 됩니다.
2. UI 디자인에서의 위계
이제 중요도에 따라 구분해보겠습니다. 중요한 정보들은 더 중요하게 보이게, 덜 중요한 정보는 덜 중요해 보이게 만드는 것이 위계의 핵심입니다. 사람들은 기본적으로 UI를 탐색할 때 위에서 아래, 그리고 특정 문화권을 제외하고는 좌에서 우로 시선이 흐르기 때문에 좌측 상단이 위치상으로 가장 강한 위계를 가지고 있습니다. 그래서 다른 것들이 동일할 때, 화면에서 위쪽 혹은 왼쪽에 가까워질수록 요소들이 상대적으로 중요해보입니다.
또한 요소가 주는 시각적인 자극이 클수록 높은 위계를 갖게 되는데요. 이것을 시각적 무게감이라고 표현합니다. 시각적 무게감이 클수록 눈에 더 잘 보이게 됩니다. 예를 들어, 요소의 크기가 크거나, 폰트의 굵기가 굵을수록 시각적인 무게감이 커집니다. 또한 배경과의 대비가 강할수록 무게감이 커집니다. 무채색인 흰색 배경에는 채도가 높거나, 색이 어두울수록 강렬하기 때문에 자극이 더 크고 높은 위계를 가지게 됩니다.
위계를 적용해 정보를 분리하고 어떤 정보가 더 중요한지 명확하게 알려준다면, 사용자들은 전체 사이트를 보지 않고도 전체 사이트의 내용을 더 빠르게 파악할 수 있고, 자신이 방문한 목적을 더 잘 이룰 수 있습니다.
3. 위계를 적용한 인터페이스 디자인하기
회원가입 UI에서 위계를 적용한다고 가정해봅시다. 프로퍼티 패널의 하단에 Effects 라는 기능이 있습니다. 이 기능에서 blur 처리를 하고, 투명도를 조금 높여준다면 전체 배경으로부터 회원가입 UI를 은은하게 띄워줄 수 있습니다. 같은 페이지 안에서도 [제목, 이메일 가입, 간편 가입] 이렇게 묶음 처리가 가능합니다.
우선 영역 간에 여백을 일정하게 줍니다. 보통 여백은 4 혹은 8의 배수로 두고 있습니다. 작업물이 여러 해상도의 화면 크기에서 깨지지 않기 때문에 실무에서 많이 활용하고 있습니다. 여기서 이메일과 간편 가입은 독립적인 기능이라서 조금 더 명확하게 구분할 필요가 있습니다. 이럴 땐 구분선을 그려놓고 선의 위랑 아래로 동일하게 24px를 띄워줍니다.
이번에는 중요도에 따라 요소를 구분해보겠습니다. 회원가입 페이지에서 가장 중요한 것은 제목과 가입하기 버튼입니다. 그 다음엔 이메일, 비밀번호 작성칸, 그리고 간편 가입 버튼입니다. 가장 덜 중요한 것은 각 요소가 어떤 값을 입력해야하는지 설명하는 플레이스 홀더 부분입니다. 위 요소를 분리하기 위해 폰트, 색상, 크기 등을 자유롭게 변경해봅시다.
모든 작업이 끝나면 마지막으로 정렬을 수정해줍니다. 참고로 위계를 줄 때 사용했던 색상이나 폰트, 크기 등을 바탕으로 특정 요소를 강조하거나 약화할 때 사용할 규칙을 만든다면 일관성을 최대한 해치지 않게, 좋은 위계를 적용할 수 있습니다. 예를 들어 중요한 버튼을 보라색으로 강조했다면, 앞으로 중요한 버튼은 보라색으로 색상 변화를 주면서 강조한다는 규칙을 적용해볼 수 있습니다. 이러한 디자인 시스템은 이후에 자세히 알아보겠습니다.
4. 일관성과 위계를 적용한 좋은 예시
지금까지 컬러와 폰트, 여백, 배치 등을 배움으로써 UI 디자인 핵심 원칙을 알 수 있었습니다. 이처럼 일관성과 위계는 UI 디자인의 근본 원칙입니다. 이러한 UI 디자인 규칙을 가장 잘 적용하고 있는 회사는 애플입니다. 아래에서 함께 살펴보도록 하겠습니다.
기본적으로 폰트가 통일되어 있고, 그래픽을 제외한 대부분의 요소에서 무채색을 써서 전체적으로 일관성을 확보하고 있습니다. 그러면서도 버튼이나 클릭하는 버튼에서는 공통적으로 강한 파란색을 사용하여 유저들에게 이 버튼은 클릭할 수 있다는 걸 드러냅니다. 좋은 UI 디자인 덕분에 사람들은 어떤 제품을 좀 더 자세히 살펴보거나 혹은 구매하고자 할 때 어떤 색의 요소를 클릭해야 되는지 훨씬 직관적으로 알 수 있습니다. 그 외에도 홈페이지를 살펴보면, 신상품에는 주황색 텍스트를 사용하는 규칙을 만들어서 일관성을 확보하고 있습니다.
정보의 구분 측면에서는, 다른 페이지로 넘어갈 수 있는 네비게이션들은 다른 색을 가진 별도의 영역 안에 블록으로 넣어서 잘 구분했습니다. 네비게이션 안에서도 서로 다른 것들은 여백을 통해 거리를 줘서 다른 탭이라는 걸 드러내고 있습니다. 비슷한 정보는 유사성, 근접성의 원리를 적용했습니다. 악세서리나 트레이드 인 같은 정보는 이미지로 꽉 찬 별도의 사각 영역으로 구분하고, 서로 여백을 줘서 정보들을 명확하게 나누고 있습니다. 이외에도 <오늘의 집>, <마켓 컬리>, <spotify> 같은 플랫폼이 훌륭한 UI 디자인을 보여줍니다.
※ 해당 글은 코드잇(codeit)의 [UI 디자인 기초] 강의 내용에서 참고하여 작성하였습니다.