📌
1. 탭(Tab)
2. 네비게이션 바 (Navigation Bar)
🔗참고 :
https://m3.material.io/components/tabs/overview
https://m3.material.io/components/navigation-bar/overview
탭 (Tab)
같은 위계의 단계에 있는 관련된 컨텐츠들을 그룹으로 정리한다.
📐 주의
아이콘과 텍스트를 포함하고 텍스트 라벨은 짧아야한다.
첫번째 탭은 최상단 앱 바 아래, 컨텐츠의 상단에 위치하며 메인 컨텐츠의 지점을 보여준다.
두번째 탭은 관련 컨텐츠에서 한단계 더 깊이 들어가 컨텐츠 영역 안에서 사용되며 위계를 만든다.
관련 컨텐츠
순서가 있는 컨텐츠가 아닌 관련 컨텐츠를 그룹으로 묶음
어떤 그룹의 컨텐츠인지 명확하게 알 수 있도록 이름을 정해야한다.
구성
- 컨테이너
여러개의 탭들을 포함한다. 관련 내용들은 고정적일 수도 있고 스크롤할 수 있다.
항상 화면의 너비만큼 확장되어야하며, 동일한 섹션들로 나뉘어야한다.
아래 부분의 컨텐츠와 분리시키기 위해 하단 가장자리의 얇은 선 (Divider)으로 표현된다. 컨텐츠는 탭 컨테이너 아래에서 스크롤 될 수 있다.
- 아이콘 (선택)
탭 내부의 컨텐츠 종류를 보여준다. 간단하고 알아보기 쉬워야한다.
복잡한 컨텐츠를 나타내야할 때 아이콘을 단독으로 사용하면 텍스트 라벨만큼 효과적이지 못 하다.
- 라벨
텍스트 라벨은 탭 내부에서 컨텐츠를 설명하기 위해 간단명료해야한다.
탭 라벨은 한 줄에 들어와야하며 라벨들은 필요하다면 두줄이 될 수도 있지만 말줄임 표시를 해야한다. 스크롤이 가능한 탭은 긴 제목을 위한 공간이 가능하다.
- 뱃지 (선택)
알림이 있거나 특정한 탭과 관련하여 업데이트가 있을 때 사용된다.
- 를 포함하여 4글자로 줄여야한다.
사용자가 탭의 관련 컨텐츠를 확인한다면 뱃지 내용이 업데이트 되거나 사라져야한다.
- 활성 표시
활성화 탭과 비활성화 탭을 구분짓기 위해 활성화 탭의 텍스트와 아이콘에 밑줄이나 색상 변화를 적용한다.
- 첫번째, 두번째 탭
첫번째 탭은 한 세트의 탭이 필요할 경우 사용되어야하고 두번째 탭은 화면이 탭의 더 깊은 단계를 필요로 한다면 사용한다.
위치
탭은 컨텐츠를 설명하는 여러개의 탭들이 연결되어 한 줄로 표현된다.
한 세트로서 모든 탭들은 공유되는 주제로 통일되어야한다.
두번째 탭은 첫번째 탭 아래에 위치한다.
반응형 레이아웃
고정된 탭에서, 각 탭의 최대 너비는 가장 넓은 탭의 너비에따라 좌우된다.
탭 그룹은 유동적인 마진을 갖고 중앙 정렬한다.
효과
- 상태
일반적으로 탭은 하나의 활성화된 상태와 가능한 상태를 물려받는다.
비활성과 활성 상태의 탭은 호버, 포커스, 눌린 (pressed) 상태를 물려받을 수 있다.
- 고정 탭
고정 탭은 모든 탭을 동시에 보여준다. 관련된 컨텐츠 사이에서 빠르게 바뀌는데 용이하다.
- 탭하기 (Tap = Touch)
직접적으로 원하는 탭(Tab)을 탭(Tap)한다.
사용자가 아이콘 버튼을 터치한다면 터치 리플 (Touch ripple)이 나타나 상호작용하고 있다는 것을 보여준다.
- 컨텐츠 영역에서 쓸기
탭들 사이를 이동하기 위해 사용자는 컨텐츠 영역 내에서 왼쪽 오른쪽으로 스와이프 할 수 있다.
- 스크롤
탭이 화면에 맞지 않다면 스크롤이 가능한 탭을 사용하면 된다.
더 길고 많은 탭에 사용. 터치 인터페이스에서 빠르게 훑을 때 용이하다.
루프 효과를 사용하면 무한정 스크롤이 되므로 스크린 리더를 사용하여 이동하는 사용자가 못 빠져나오기 때문에 추천하지 않는다.
- 컨텐츠 컨트롤
컨텐츠를 스크롤 할 때 탭은 화면의 상단에 붙어 고정되거나 잠시 사라졌다가 사용자가 다시 스크롤을 할 때 등장할 수 있다.
- 키보드
사용자에게 원하는 요소를 선택했다는 것을 알려주기 위해 포커스 표시를 보여준다.
화살표 키와 탭키를 사용하여 메뉴 아이템들을 이동하고 스페이스와 엔터키를 사용하여 아이템을 선택한다.
그 외 참고
빽빽하게 배치하지 않는다.
시각적 UI가 모호하거나 보이지 않는다면 접근성 라벨은 더 많은 설명을 필요로한다. 접근성 라벨에 아이콘의 의도를 더 명확하게 설명해주 추가적인 정보를 기입한다.
네비게이션 바 (Navigation Bar)
모바일 기기와 같은 작은 사이즈의 화면에서 사용
📐 주의
동등한 중요도의 3-5개의 지점(Destination)에 대한 접근성을 제공하며 꼭 하나의 지점이 활성화 되어있다. (3개보다 적다면 탭 이용)
편리한 접근을 위해 화면의 하단에 위치하고 각각의 지점은 아이콘과 선택적인 텍스트 라벨로 표현된다. (아이콘 혼자 사용이 가능하지만 모호해서는 안 되며 모든 사용자에게 똑같이 접근이 가능해야한다.)
지점은 가장 상위 단계의 지점이며 변하지 않고 어떠한 앱 화면에서도 일관성을 유지해야한다.
항상 고정된 위치에 존재해야 하며 스크롤되거나 수평으로 움직이면 안 된다.
구성
- 컨테이너
아이콘, 라벨 텍스트, 활성 표시를 포함하는 모든 지점들을 포함한다.
내비게이션 바의 너비와 지점의 수를 고려하여 각각의 지점의 너비는 동등하게 나뉘어야한다.
뒤에 있는 컨텐츠와 분리되어 보여야하기 때문에 색상을 적용하지는 않는다.
상충하는 컨텐츠가 뒤에 없다면 배경색과 동일하게 적용해도 된다.
- 아이콘
아이콘을 항상 포함한다. 텍스트 라벨과 아이콘을 짝지어 함께 사용하는 것이 이상적이다.
면이 채워진 아이콘을 활성 지점에 사용하고 아웃라인 아이콘은 비활성 지점에 사용한다.
면이 채워진 아이콘을 사용하기 어렵다면 텍스트 라벨에 굵기를 적용해도 된다.
활성 아이콘과 비활성 아이콘은 충분한 명도 차이를 줘야한다.
- 활성 표시
네비게이션 바의 지점이 현재 보여지고 있음을 알려주는 배경에 위치한 도형
만약 확장되는 모양을 적용할 경우 한 축으로 확장되어야한다.
- 라벨 텍스트
네비게이션 바의 지점들에 대해 명료하고 짧게 설명해야한다.
아이콘과 라벨은 중앙정렬
- 뱃지 (선택)
내비게이션 바의 아이콘은 그들의 우측 상단 모서리에 뱃지를 보여줄 수 있다.
뱃지는 변동되는 정보를 포함한다. (ex. 새로운 메세지 수)
위치
FAB와 짝을 이룰 수 있지만 겹치면 안 된다.
다이얼로그, 내비게이션 서랍, 온 스크린 키보드 등에 의해서 잠시 가려질 수 있다.
반응형 레이아웃
작은 사이즈의 화면에서만 사용
핸드폰과 같은 작은 사이즈의 화면에서는 수평적인 공간이 더 우위에 있다.
따라서 앱의 컨텐츠 영역은 화면의 전체 사이즈를 덮는다.
중간, 큰 사이즈의 화면에서는 네비게이션 레일 혹은 서랍을 사용
행동
- 네비게이션
다른 지점을 선택했을 때 스크롤 위치, 탭 셀렉션 같은 정보를 유지한다.
선택되어있는 네비게이션 바의 지점을 한 번 더 누르면 스크롤 위치 리셋 → 맨 위로 올라간다.
앱의 위계 질서에서 한 단계 더 깊이 들어갈 때, 네비게이션 바는 앱 섹션 사이의 빠른 이동을 위해 지속적으로 남아있는다.
- 스크롤
스크롤에 따라 네비게이션 바가 사라졌다가 나타날 수 있다.
아래로 스크롤 하면 사라지고 위로 스크롤 하면 다시 나타난다.
- 선택
스와이프는 되지 않고 탭만 한다.
그 외 참고
탭 키로 네비게이션 아이템 이동, 스페이스 / 엔터키로 아이템 선택
네비게이션 아이템에 대한 접근성 라벨의 내용은 지점 이름과 같다.
만약 UI 텍스트가 올바르게 연결되어 있다면, 보조 기구는 컴포넌트의 역할 뒤에 UI 텍스트를 읽어줄 것이고 필요에 따라 더 자세한 설명을 요구할 수도 있다.
실습
- 탭
📍만드는 방법
- 텍스트 레이어와 활성 표시를 위한 도형 레이어 생성
- 활성 표시는 항상 아래 와야하기 때문에 프레임으로 한 번 감싸주고 포지션 패널에서 컨스트레인츠를 조정한다.
- 라벨 텍스트와 함께 오토 레이아웃으로 묶어 상하 여백을 적용한 후 한 번 더 오토 레이아웃으로 묶어 좌우 여백을 적용한다. 그 후 컴포넌트로 만들어준다.
- 텍스트 편집이 쉽도록 텍스트 프로퍼티를 적용한다.
- 베리언츠를 추가하여 선택되지 않은 상태도 추가한다.
- 선택되지 않은 상태를 만들기 위해 활성 표시의 눈을 꺼준다.
- 네비게이션 바
⚠️
가이드에는 활성화 되었을 때는 면으로 된 아이콘(Filled Icon)을 사용하라고 나와있지만 난 강의에서 사용한 아웃라인 아이콘을 그냥 사용했다.
📍만드는 방법
- 아이콘, 활성 표시를 위한 도형을 먼저 오토 레이아웃으로 묶어준다.
- 라벨 텍스트를 생성한 후 함께 오토 레이아웃으로 묶어준다. 그리고 컴포넌트로 만들어준다.
- 베리언츠를 추가하여 선택되지 않은 상태도 만들어준다.
- 활성 표시 도형을 꺼주면 된다.
- 위의 사진에서는 3개의 컴포넌트를 각각 만들었지만 아이콘에 인스턴스 스왑을 적용하고 텍스트에 텍스트 프로퍼티를 적용해주면 더 간편하게 사용할 수 있을 것이다. (바보)
- 3개를 복사한 후 오토레이아웃으로 변경, 컴포넌트로 바꿔준 후 네스티드 인스턴스를 적용한다.
