디자인·UI

탭Tab

업데이트 2026.10.31 · Qshop Growth Lab

한 줄 정의

탭은 한 자리에 여러 묶음의 내용을 겹쳐 두고, 위쪽에 늘어선 이름표를 눌러 원하는 묶음만 골라 보게 하는 화면 요소예요.

쉽게 말하면

서류철 옆에 붙은 색인표를 떠올리면 쉬워요. 색인표를 집으면 그 칸의 서류가 펼쳐지듯, 화면 위쪽의 '상품 정보 · 배송 안내 · 교환 반품' 같은 이름표 중 하나를 누르면 그 이름표의 내용만 아래에 보여요. 방문자는 페이지를 길게 내리지 않고도 같은 자리에서 내용을 바꿔 가며 볼 수 있어요.

언제 쓰면 좋나요

탭은 요금제별 설명이나 지점별 안내처럼, 방문자가 여러 묶음 중 하나만 골라 보면 되는 내용에 잘 맞아요. 방문자가 모든 내용을 순서대로 읽어야 한다면 탭은 맞지 않아요. 첫 번째 탭만 보고 다른 이름표를 누르지 않은 방문자에게는 뒤쪽 탭의 내용이 전달되지 않기 때문이에요.

검색엔진이 탭 내용을 읽는 방식도 살펴야 해요. 구글은 모바일 화면에서 공간을 아끼려면 내용을 탭이나 아코디언에 넣는 것을 고려하라고 안내해요. 같은 안내에서 구글은 클릭처럼 사용자가 무언가를 해야 비로소 불러오는 내용은 불러오지 않는다고 밝혀요(구글 검색 센터). 그래서 이름표를 누를 때 내용을 새로 불러오는 방식으로 만든 탭은, 구글이 그 내용을 읽지 못할 수 있어요.

큐샵에서는

클래식 에디터와 스튜디오 에디터 모두에서 탭 섹션을 추가할 수 있어요. 클래식 에디터에서는 '섹션 빠른 추가'에서, 스튜디오 에디터에서는 섹션 유형 가운데 탭 섹션을 골라서 사용할 수 있어요.

헷갈리는 말

헷갈리는 말	뜻	탭과 다른 점
브라우저 탭	크롬 같은 인터넷 창 위쪽에 페이지마다 하나씩 생기는 칸	브라우저 탭은 서로 다른 페이지를 나눠 여는 칸이고, 화면 요소 탭은 한 페이지 안에서 내용 묶음을 바꿔 보여 줘요
아코디언	제목을 누르면 그 아래로 내용이 펼쳐지는 목록	탭은 같은 자리에 한 묶음씩 바꿔 보여 주고, 아코디언은 제목이 세로로 늘어서 있어 여러 칸을 함께 펼쳐 둘 수도 있어요

같은 말

아래 이름으로도 불러요. 모두 같은 뜻이에요.

탭 메뉴

디자인·UI 용어 더 보기

CTA 고스트 버튼 내비게이션 바 대체 텍스트 띠배너 링크 버튼 반응형 웹 배너 배지 버튼 스타일 별점 섹션 솔리드 버튼 스티키 헤더 아웃라인 버튼 아이콘 버튼 아코디언 액티브 영상 삽입 입력폼 카드 컴포넌트 태그 탭 토글 팝업 포커스 푸터 햄버거 메뉴 호버 히어로 섹션