Google Material Designing 계층 구조

계층 구조 (Hierarchy)

내비게이션이 쉬우면 사용자는 현재 위치와 중요한 요소를 빠르게 이해할 수 있다. 중요도를 강조하기 위해 색상, 형태, 텍스트, 모션 등 다양한 시각·텍스트 요소를 활용해 명확성을 높인다.

 

피드백 유형 (Feedback Types)

라벨, 색상, 아이콘과 같은 시각적 피드백과 터치 피드백은 사용자가 UI에서 무엇을 사용할 수 있는지 보여준다.

 

네비게이션(Navigation)

내비게이션은 최소한의 단계로 구성된 명확한 작업 흐름, 찾기 쉬운 컨트롤, 그리고 명확한 라벨링을 가질 수 있다. 포커스 제어, 즉 키보드 포커스와 읽기 포커스를 제어하는 기능은 자주 사용되는 작업에 적용할 수 있다.

 

추가되는 모든 버튼, 이미지, 텍스트 한 줄은 UI의 복잡도를 증가시킨다. 다음을 통해 UI의 이해도를 단순화할 수 있다:

- 명확하게 보이는 요소
- 충분한 대비와 크기
- 명확한 정보 계층 구조
- 한눈에 식별 가능한 핵심 정보

 

정보 중요도 레벨(Levels of importance)

항목 간 상대적인 중요도를 전달하려면:

• 중요한 액션은 화면의 상단 또는 하단에 배치한다 (단축 접근이 가능하도록)
• 동일한 계층 구조를 가진 관련 항목들은 서로 인접하게 배치한다

 

시각적 계층 구조 (Visual Hierarchy)

2x2 그리드로 구성된 4개의 콘텐츠 카드가 있는 모바일 앱의 예시이다. 읽기 순서는 좌측 상단에서 시작해 우측 상단, 그다음 좌측 하단, 마지막으로 우측 하단 순이다. 화면 내 콘텐츠 계층 구조가 논리적인 읽기 순서로 식별되는 예시로, 스크린 리더와 같은 보조 기술이 정보를 해석하는 방식을 최적화하기 위한 것이다.

스크린 리더가 콘텐츠를 의도한 순서대로 읽을 수 있도록 하려면, 디자이너와 개발자가 협업하는 것이 중요하다. 이는 HTML을 올바른 순서로 작성하는 것과, 스크린 리더가 디자인을 어떻게 해석하는지 이해하는 것을 모두 포함한다. CSS는 페이지의 레이아웃과 시각적 표현을 결정하지만, 스크린 리더는 어떤 플랫폼(모바일 또는 웹)이든 HTML의 위에서 아래로 이어지는 구조에 의존한다. 이 구조는 스크린 리더가 콘텐츠를 읽을 때 따라가는 일종의 경로를 만든다.

• CSS → 보이는 레이아웃 담당
• HTML → 정보 구조(읽는 순서) 담당
• Screen Reader → HTML 구조 기반으로 읽음

터치 타겟 크기(Target sizes)

 

터치 및 포인터 타겟 크기(Touch and pointer target sizes)

터치 타겟은 사용자 입력에 반응하는 화면 영역으로, 요소의 시각적 경계를 넘어 확장될 수 있다. 예를 들어, 아이콘이 24 x 24dp로 보일 수 있지만, 이를 둘러싼 패딩을 포함하면 실제 터치 타겟은 48 x 48dp가 된다.

 

대부분의 플랫폼에서는 터치 타겟을 최소 48 x 48dp로 설정하는 것을 권장한다. 이 크기는 화면 크기와 관계없이 약 9mm의 물리적 크기에 해당한다. 터치스크린 요소의 권장 타겟 크기는 7~10mm이다. 더 다양한 사용자층을 고려하기 위해 더 큰 터치 타겟을 사용하는 것이 적절할 수 있다.

Icons: 24dp, Star icon: 40dp, Touch target on both: 48dp

참고: iOS에서는 44 x 44dp 타겟을 권장한다.

 

포인터 타겟(Pointer targets)

Recommended target size for pointers: 44dp

포인터 타겟은 터치 타겟과 유사하지만, 마우스나 스타일러스와 같은 움직임을 추적하는 포인터 장치를 통해 구현된다.

포인터 타겟의 최소 크기는 44 x 44dp로 설정하는 것을 고려한다.

 

타겟 간 간격(Target spacing)

전체 간격과 각 요소 간 간격을 보여주는 두 개의 아이콘 그룹. Touch target size: 48dp, Padding: 8dp

대부분의 경우, 타겟 사이를 8dp 이상으로 분리하면 정보 밀도와 사용성의 균형을 유지할 수 있다.

 

출처: 구글 Material Desgin