탭Tabs

서류철 가장자리에 붙이는 색인 탭에서 온 이름입니다. 라벨 줄 하나와 그 아래 내용 영역 하나. 라벨을 누르면 내용 영역이 통째로 바뀝니다. 이 사이트의 회원 프로필(목표·글)도 탭입니다.

언제 쓰나요

한 주제 안에서 성격이 다른 내용 묶음을 나눌 때 씁니다. 상품 상세의 "설명 / 리뷰 / 문의", 설정의 "계정 / 알림 / 결제". 각 탭이 독립적으로 읽혀야 하고, 사용자가 탭을 오가며 비교할 일은 적어야 합니다.

탭이 6~7개를 넘으면 한 줄에 안 들어가고 모바일에서 잘립니다. 그때는 세로 목록이나 드로어 안 메뉴로 바꿉니다. 탭 라벨은 명사 한두 단어로 짧게 둡니다.

AI에게 시키기

설정 페이지를 탭으로 나눠줘: 계정 / 알림 / 결제.
- 위에 탭 라벨 줄, 아래 하나의 내용 영역. 선택된 탭은 밑줄 또는 채움으로 표시
- URL 에 ?tab=notifications 처럼 반영해서 새로고침·공유해도 같은 탭이 열리게
- 키보드 ←→ 로 탭 이동, role="tablist" / "tab" / "tabpanel" 접근성 속성
- 모바일에서 탭이 넘치면 가로 스크롤

URL 반영을 안 적으면 새로고침할 때마다 첫 탭으로 돌아가는 탭이 나옵니다.

혼동 주의

• 세그먼티드 컨트롤: 같은 데이터를 다른 방식으로 보는 전환(목록/그리드, 주간/월간)입니다. 탭은 내용 자체가 다른 묶음의 전환입니다.
• 내비게이션 바: 페이지 자체를 옮깁니다. 탭은 한 페이지 안에서 바뀝니다. 모바일 하단의 아이콘 줄은 "탭 바"라고 부르지만 실제로는 내비게이션입니다.
• 아코디언(Accordion): 여러 묶음을 세로로 쌓고 각각 펼치고 접는 것입니다. 동시에 여러 개를 펼칠 수 있고 모바일에 잘 맞습니다. 탭은 한 번에 하나만 보입니다.
• 스텝: 순서가 있는 단계입니다. 탭은 순서 없이 자유롭게 오갑니다.