위계

정의

위계(hierarchy)는 화면 속 요소들의 중요도 순서를 눈에 보이는 형태로 드러내는 것입니다. 크기를 다르게 하고, 굵기를 바꾸고, 색과 간격에 차이를 주어서 사용자가 무엇을 먼저 보고 무엇을 나중에 볼지 그 순서를 자연스럽게 정해 주는 일입니다. 같은 페이지라도 위계가 분명하면 제목, 요약, 본문, 부가 정보가 층층이 구분되어 한눈에 구조가 읽히고, 위계가 없으면 모든 것이 같은 무게로 다가와 어디서부터 봐야 할지 막막해집니다. 위계는 앞서 배운 크기, 굵기, 색, 간격을 목적을 가지고 함께 엮는 개념이라고 볼 수 있으며, 이 요소들을 왜 그렇게 조절하는지에 대한 답이기도 합니다.

왜 중요한가

사용자는 화면을 꼼꼼히 읽지 않고 처음 몇 초 동안 빠르게 훑으며 어디에 집중할지 결정합니다. 좋은 위계는 바로 이 순간에 작동해서, 사용자가 0.1초 만에 훑을 순서를 스스로 정하도록 도와줍니다. 가장 중요한 것이 가장 크고 진하게 보이면 눈이 자연히 거기서 출발하고, 다음으로 중요한 것들이 차례로 이어지며 시선이 흐릅니다. 반대로 모든 요소가 같은 크기와 색으로 평평하게 놓이면, 사용자는 무엇이 핵심인지 스스로 찾아 헤매야 하고 결국 피로해져 이탈합니다. 위계는 단순히 예뻐 보이기 위한 것이 아니라, 정보를 빠르고 정확하게 전달하기 위한 실용적인 장치입니다. 잘 짜인 위계는 사용자가 화면을 스스로 해석하는 수고를 대신 덜어 주는 배려라고도 할 수 있습니다.

흔한 실수

• 모든 것을 강조하는 것입니다. 여기저기 다 굵게, 다 크게, 다 색을 넣으면 강조가 서로 경쟁해 결국 아무것도 두드러지지 않고, 위계가 없는 것과 다름없어집니다.
• 한 가지 수단에만 기대는 것입니다. 크기만 조금씩 다르게 해서 위계를 만들려 하면 차이가 약해 잘 안 보입니다. 크기, 굵기, 색, 간격을 함께 써야 대비가 또렷해집니다.
• 중요도와 시각적 강조가 어긋나는 것입니다. 정작 중요한 행동 버튼은 흐릿한데 부가 안내가 더 진하고 크면, 사용자의 시선이 엉뚱한 곳으로 먼저 향해 정작 해야 할 행동을 놓치게 됩니다.

실무 팁

• 좋은 위계는 사용자가 0.1초 안에 훑을 순서를 정하게 해 줍니다. 화면을 만들면 눈을 가늘게 뜨고 흐릿하게 봤을 때 무엇이 먼저 보이는지 확인하세요. 가장 먼저 보여야 할 것이 실제로 먼저 보이면 위계가 제대로 잡힌 것입니다.
• 단계는 서너 개로 제한하세요. 제목, 소제목, 본문, 부가 정보 정도로 층을 나누고 각 층의 차이를 뚜렷하게 벌리면, 층이 많을 때보다 오히려 구조가 선명해지고 사용자가 읽어야 할 순서도 한결 명확해집니다.
• 강조하고 싶은 것을 늘리기보다 나머지를 눌러 보세요. 부가 정보의 색을 흐리게 낮추거나 크기를 줄이면, 중요한 요소를 더 키우지 않고도 상대적으로 도드라지게 만들 수 있어 화면이 과해지지 않습니다.

관련 개념