UI의 탭디자인 방법

 

탭은 콘텐츠를 여러 섹션으로 구성하고 사용자가 섹션 사이를 탐색할 수 있도록 합니다. 

 

일반적인 디자인 권장 사항

탭에는 항상 두 개 이상의 항목이 포함되며 한 번에 하나의 탭만 활성화됩니다. 탭의 시각적 스타일은 다양할 수 있지만 다음은 가장 일반적인 두 가지 스타일입니다.

 

두 가지 인기 있는 탭 스타일링.

 

1. Context(컨텍스트)
탭은 개별 페이지의 컨텍스트에서 콘텐츠 그룹 또는 설정을 구성하는 데 사용되므로 사용자가 작업을 완료하기 위해 특정 페이지에서 다른 페이지로 이동할 필요가 없습니다.

 

개별 페이지의 컨텍스트에서 탭 사용. IBM Carbon 이미지.

 

인터페이스를 디자인할 때는 사용자가 정보를 비교하기 위해 여러 탭 사이를 전환하도록 강요하지 마세요. 탭에는 사용자가 정보에 입각한 결정을 내릴 수 있도록 충분한 정보가 포함되어야 합니다.

2. Text label(텍스트 레이블)
명확하고 구체적인 짧은 탭 레이블을 사용하세요. 라벨은 한 두 단어로 구성되어야 스캔하기 쉽습니다. 텍스트 레이블은 사용자가 탭을 클릭할 때 보게 될 콘텐츠를 명확하게 전달해야 합니다.

3.  States(상태)
탭에는 선택됨, 기본값, 사용 안 함의 세 가지 상태가 있습니다.

 

탭 상태.

 

• 선택됨 : 사용자가 페이지를 로드할 때 기본적으로 탭 중 하나가 선택되어 있어야 합니다. 일반적으로 첫 번째 탭이 선택됩니다. 사용자가 새 항목을 선택하면 이전 탭은 자동으로 선택 해제됩니다.
• 기본값 : 선택되지 않은 다른 모든 탭을 사용할 수 있습니다.
• 비활성화됨 : 비활성화 상태의 탭 항목은 탭 항목이 존재하지만 지금은 선택할 수 없음을 나타냅니다. 이 상태는 나중에 탭을 사용할 수 있게 될 수 있음을 알리는 데 사용할 수 있습니다.

 

4. 탭의 아이콘
아이콘을 사용하면 탭을 더 쉽게 이해할 수 있다면 아이콘과 텍스트 레이블을 함께 사용하는 것이 좋습니다. 소수의 아이콘만 보편적인 의미를 가지므로 아이콘만으로 탭을 디자인하는 것은 피하세요.

 

탭에서 아이콘 사용하기. Material Design 이미지.

 

5. 세로 탭
기본적으로 탭은 가로 탭이지만 가로 공간이 제한되어 있는 경우 세로 탭을 사용할 수도 있습니다. 세로 탭은 페이지의 다른 부분으로 연결되는 앵커 링크(예: 문서의 섹션 바로 가기)로 사용할 수 있습니다.

 

세로 탭. Twilio 이미지 제공.

 

탭 디자인 예시

1. 관련 콘텐츠에 탭 사용
탭은 관련 콘텐츠를 구성는 데 사용됩니다. 탭을 통해 사용자는 같은 맥락에서 표시되는 정보 그룹 사이를 탐색할 수 있습니다.

 

탭에서 서로 다른 성격의 요소를 섞어 사용하지 마세요.

 

탭을 사용하여 관련 콘텐츠를 확인합니다.

 

2. 중첩 디자인하지 않기
여러 레벨의 탭을 만들지 마세요. 두 번째 레벨을 만들어야 하는 경우 아코디언 또는 접을 수 있는 패널을 사용할 수 있습니다.

 

중첩된 탭을 사용하지 마세요.

 

3. 진행률 표시를 위해 탭 표시줄을 사용하지 마세요.
대신 진행률 표시기를 사용하세요.

 

탭을 진행률 표시기로 사용하지 마세요.

 

진행 상황을 알려야 하는 경우 stepper(스테퍼)를 사용하세요. Material Design 이미지.

 

4. 탭 탐색을 올바르게 정렬하기
일반적으로 줄 탭 및 포함된 탭의 첫 번째 레이블은 그리드 및 아래 텍스트와 정렬됩니다.

 

탭 레이블을 그리드에 맞춥니다. IBM Carbon 이미지.

 

 

출처:

https://medium.com/ux-planet/designing-perfect-tabs-2c0aaf835bfc