[UI] 탭메뉴

[Sleepingoff]

어떤 UI를 구현하나요?

• 탭메뉴:하나의 메뉴 안에서 카드 형태로 나타낼 때 사용하는 수평적인 UI
  

주로 어디에, 왜 쓰이나요?

• 카드의 내용이 많고 양은 적을 때, 카드의 내용을 한 화면에 다 보여주면서도 url 이동없이 보여주기 위해 사용.
• 주로 관련되어 있어 하나의 메뉴에 있으면서 다른 내용을 보여줄 때 사용.

비슷한 UI와의 차이점

• GNB: 주로 URL 이동을 하는 메뉴들을 모아놓은 global navigation bar
  탭 메뉴는 이런 메뉴들의 내부에서 url 이동없이 사용하는 것이 일반적이다.

• Accordion [UI] 아코디언 #2 : 수직적으로 내용을 열었다 닫았다하는 아코디언과 비슷하지만, 탭의 경우 수평적이다. 또한, 리스트가 많지 않을 때 주로 사용하며, 항상 하나의 탭이 열려있어야 한다는 점에서 차이가 있다.

어떤 UX를 가지고 있나요?

• 클릭: 클릭하면 해당 탭의 메뉴가 보이는 구조
• disabled: 내용이 없거나 접근 불가한 탭 메뉴
• active: 활성화된 탭 메뉴로 active-line을 통해 활성화되었다고 시각적인 표현을 해주는 편이다.
• 보통 탭과 내용이 있는 카드가 연결되어 있는 것으로 활성화표시를 해주지만, 강조를 위해 active-line을 사용한다.

장점

• 수직 스크롤의 양을 줄일 수 있다.

단점

• 탭과 카드가 별도로 떨어져 있거나, 어떤 탭이 활성화되었는지 알 수 없는 경우를 피해야 한다.
• 탭 간 전환 시 상태 유지에 신경써야 한다.
• 탭 메뉴의 title을 간단하게 써야한다. 2개 단어 이하 작성을 권장.

추가적으로

• active-line에 애니메이션을 주어 시각적인 강조를 더 줄 수 있다.
• 탭 내부에 중첩된 탭이 있을 수 있다.
• 탭을 수평적으로 사용할 수 있다. ex) 블로그의 목차
  
• 탭으로 인해 수평 스크롤이 생기는 걸 지양한다.
  • 수평 스크롤이 생길만큼 탭의 양이 많으면 More 옵션을 두어 수평 스크롤을 없앨 수 있다.
    

어떻게 접근성을 높일 수 있을까요?

https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-tabs

---

레퍼런스
https://www.bbc.co.uk/gel/features/tabs
https://component.gallery/components/tabs/
https://boltdesignsystem.com/pattern-lab/?p=viewall-components-tabs

[Sleepingoff]

Farmer-Kim#2