Google Material Design - Hierarchy (정보의 계층화)

 
안녕하세요 찐망고입니다
 
아마 당분간은 머터리얼디자인페이지 관련 포스팅을 할 것 같아요
물론 번역해서 직접 보셔도 편하겠지만...

 

Hierarchy
 
Hierarchy는 우리나라 말로 계층이라는 뜻인데요
계층이란 UI에서 말하는 계층은 정보와 요소들 간의 중요도나 관계를 구조화하는 방식을 의미합니다.
마치 회사 조직도나 가계도처럼, 정보들 사이에도 주종 관계가 있다는 개념입니다.
 
계층을 사용하는 이유가 있겠죠?
 

1. 정보의 우선순위 표현
   • 가장 중요한 정보는 크게, 눈에 띄게
   • 부가적인 정보는 작게, 덜 강조되게
   • 예: 뉴스 사이트의 헤드라인(큼) vs 기사 본문(작음)
2. 관계성 표현
   • 메인 메뉴 → 서브 메뉴 → 세부 항목
   • 상위 카테고리 → 하위 카테고리
   • 예: 쇼핑몰의 의류 → 상의 → 티셔츠
3. 사용자의 인지 부담 감소
   • 많은 정보를 체계적으로 정리
   • 단계별로 정보를 제공
   • 예: 설정 메뉴의 단계별 분류
4. 시각적 가이드 제공
   • 크기, 색상, 위치로 중요도 표현
   • 그룹화를 통한 관련 정보 묶음
   • 예: SNS의 주요 게시물과 댓글 구분

 
즉, '계층'이라는 개념은 복잡한 정보를 사용자가 쉽게 이해하고 탐색할 수 있도록 체계적으로 구조화하는 방법을 의미합니다. 이는 마치 도서관에서 책을 주제별, 분야별로 분류하는 것과 비슷한 원리죠

그래서 사용자는 이러한 계층 구조 덕분에 보고 있는 정보의 맥락을 이해할 수 있고
원하는 정보를 쉽게 찾아갈 수 있으며 전체 구조 속에서 현재 위치를 파악할 수 있습니다.
 
그럼 관련 페이지를 볼까요?
 
계층 (Hierarchy)
사용자가 앱을 쉽게 탐색할 수 있으려면, 현재 위치와 중요한 정보를 한눈에 파악할 수 있어야 합니다.
이를 위해 색상, 형태, 글자, 움직임 등 다양한 시각적 요소와 텍스트를 활용하여
정보의 우선순위를 명확히 보여주는 것이 중요합니다.
 
사용자 피드백의 종류

• 시각적 피드백: 버튼이나 메뉴가 클릭 가능한지, 현재 어떤 상태인지를 라벨, 색상, 아이콘 등을 통해 직관적으로 보여줍니다.
• 터치 피드백: 화면의 어떤 요소들이 터치나 클릭으로 반응하는지 사용자가 자연스럽게 인지할 수 있도록 합니다.

Navigation
사용자가 원하는 기능을 찾아가는 과정은 최대한 단순해야 합니다. 모든 버튼과 메뉴는 찾기 쉬운 위치에 있어야 하며, 그 기능을 정확히 설명하는 이름을 가져야 합니다.
포커스 이동: 키보드나 스크린리더를 사용하는 경우에도 자주 사용하는 기능으로 쉽게 이동할 수 있도록 포커스 이동 경로를 최적화하는 것이 좋습니다.
 
계층 (Hierarchy)
화면에 버튼, 이미지, 텍스트가 많아질수록 사용자가 이해하기 어려워집니다.
더 직관적인 UI를 만들기 위해서는:

• 모든 요소가 명확하게 보여야 합니다
• 글자 크기와 색상 대비를 충분히 주어야 합니다
• 중요한 정보는 더 눈에 띄게 만들어야 합니다
• 핵심 정보는 한눈에 들어와야 합니다

중요한 것을 돋보이게 하려면

• 자주 사용하는 기능은 화면 위나 아래에 배치하고, 단축키도 제공하세요
• 서로 관련된 기능은 가까이 모아두세요

네비게이션 경로(breadcrumb)를 보여주는 부분을 화면 상단에 배치한 예시

Do 
내비게이션 경로(breadcrumb)를 보여주는 부분을 화면 상단에 배치하면 사용자가 바로 찾을 수 있습니다.

다른 요소들 사이에 숨겨두면 사용자가 혼란 스러워하는 예시

Caution 
다른 요소들 사이에 숨겨두면 사용자가 혼란스러워합니다. 마치 책장에서 가장 필요한 책을 구석에 꽂아두는 것과 같죠.
 
 
시각적 계층 구조와 접근성(Visual hierarchy)
스크린 리더가 콘텐츠를 의도한 순서대로 읽어주려면, 디자이너와 개발자의 협업이 매우 중요합니다.
HTML을 올바른 순서로 작성하고, 스크린 리더가 디자인을 어떻게 해석할지 이해하는 것이 핵심입니다.
CSS는 페이지의 레이아웃과 시각적 모습을 결정하지만, 스크린 리더는 모바일이든 웹이든 플랫폼에 관계없이 HTML의 위에서 아래로 이어지는 구조에 의존합니다.
이 구조는 마치 지도처럼 스크린 리더가 콘텐츠를 읽어나갈 때 따라갈 수 있는 길잡이 역할을 합니다.
쉽게 말해서, 예쁘게 보이는 것도 중요하지만 모든 사용자가 쉽게 이용할 수 있도록
HTML 구조를 탄탄하게 만드는 것이 더 중요하다는 의미입니다.
 

시각적순서에 따른 예시 Do

시각적순서에 따른 예시 Caution

 
시각적 순서와 HTML 구조의 관계
HTML은 시각적 계층 구조를 반영하여
왼쪽 상단(1단계)에서 오른쪽 상단(2단계), 왼쪽 하단(3단계)에서 오른쪽 하단(4단계)으로 내용을 읽어나갑니다.
일반 사용자들은 화면을 보면서 자연스럽게:

• 왼쪽 상단(1단계) → 오른쪽 상단(2단계)
• 왼쪽 하단(3단계) → 오른쪽 하단(4단계) 순으로 콘텐츠를 보게 됩니다.

하지만 스크린 리더는 기본적으로 HTML 코드의 위에서 아래로 작성된 순서대로 읽습니다. 그래서:

• 1단계 → 3단계 (왼쪽 열을 위에서 아래로)
• 2단계 → 4단계 (오른쪽 열을 위에서 아래로) 이런 식으로 콘텐츠를 음성으로 전달합니다.

즉, 스크린 리더 사용자를 위해서는 왼쪽 열에 있는 모든 항목을 먼저 읽은 후에
오른쪽 열의 항목을 읽도록 HTML을 구성하는 것이 좋습니다.
이렇게 하면 콘텐츠를 더 논리적인 순서로 전달할 수 있습니다.

 

Focus order (포커스 순서)

웹사이트나 앱에서 키보드 사용자를 위한 포커스 순서는 위에서 아래로, 중요도 순으로 설계됩니다.

주요 특징은:

• 어떤 순서로 요소들이 포커스를 받을지
• 관련된 요소들을 어떻게 그룹으로 묶을지
• 현재 포커스된 요소가 사라지면 다음 포커스가 어디로 갈지

이렇게 설계하면 키보드 사용자와 스크린리더 사용자 모두가 자연스럽게 콘텐츠를 탐색할 수 있습니다.

focus order for 8 sections of clothing commerce UI

 

Grouping (그룹화)

• 연관된 항목들을 의미 있는 제목 아래 모음
• 시각적으로 관련 콘텐츠를 구조화하여 이해하기 쉽게 함

 

Transitions (전환)

 

• 화면 간 자연스러운 포커스 이동이 UX를 개선
• 작업 중단 후 재개 시 이전 포커스 위치로 돌아가면 사용자가 맥락을 쉽게 파악