탭

정의

탭은 서로 관련 있는 여러 묶음의 콘텐츠를 한자리에 두고, 라벨을 눌러 그중 하나씩만 바꿔 보여 주는 방식입니다. 화면 위쪽에 여러 개의 제목이 나란히 놓이고, 그 아래에는 지금 선택된 탭에 해당하는 내용만 나타납니다. 새 페이지로 이동하지 않고 같은 자리에서 내용만 교체되기 때문에, 사용자는 문맥을 잃지 않은 채 가볍게 정보를 오갈 수 있습니다. 상품 상세의 '설명 / 리뷰 / 배송 정보'처럼, 하나의 대상에 대한 여러 측면을 나눠 담을 때 특히 잘 어울립니다. 물리적인 서류철의 색인표에서 온 은유라, 처음 보는 사람도 무엇을 누르면 무엇이 바뀌는지 자연스럽게 짐작합니다.

왜 중요한가

한 화면에 담아야 할 정보가 많을 때, 탭은 그것을 억지로 한 번에 늘어놓지 않고 사용자가 필요한 조각만 골라 보게 해 줍니다. 덕분에 화면이 짧아지고 스크롤 부담이 줄며, 각 탭이 하나의 명확한 주제를 가지므로 정보 구조도 또렷해집니다. 무엇보다 페이지를 새로 부르지 않아 전환이 즉각적이라, 사용자가 이것저것 비교하며 살펴보기에 심리적 문턱이 낮습니다. 같은 대상을 여러 각도에서 훑어봐야 하는 상황에서 이 가벼움은 큰 장점이 됩니다. 다만 탭은 선택하지 않은 내용을 숨기는 구조라, 사용자가 다른 탭 안에 무엇이 있는지 미리 알기 어렵다는 약점도 함께 가집니다. 그래서 어떤 정보를 탭 뒤에 감출지, 어떤 것을 늘 보이게 둘지를 신중히 골라야 합니다.

흔한 실수

• 서로 관련 없는 내용을 한 탭 묶음에 억지로 몰아넣는 경우입니다. 탭 안의 항목들은 같은 대상의 다른 면이어야 자연스러운데, 층위가 제각각이면 사용자는 무엇을 기준으로 나눈 건지 혼란스러워하고, 원하는 정보가 어느 탭에 있을지 매번 짐작해야 합니다.
• 탭을 지나치게 많이 만드는 것입니다. 개수가 늘면 라벨이 좁아지거나 가로 스크롤이 생겨 뒤쪽 탭은 아예 눈에 띄지 않고, 사용자는 원하는 항목을 찾느라 헤매게 됩니다. 화면 밖으로 밀려난 탭은 없는 것이나 다름없습니다.
• 지금 어떤 탭이 선택됐는지 표시가 약한 경우입니다. 현재 위치가 흐릿하면 사용자는 자기가 어디를 보고 있는지 확신하지 못해 같은 탭을 반복해서 누르거나, 내용이 바뀌지 않는다고 오해합니다.

실무 팁

• 현재 선택된 탭은 밑줄이나 색으로 분명하게 강조하세요. 탭은 보통 2~5개가 적당하며, 그보다 많아지면 드롭다운이나 세로 목록 같은 다른 방식을 함께 고려하는 편이 낫습니다. 개수를 줄이는 것 자체가 좋은 정리입니다.
• 탭 라벨은 짧고 예측 가능한 단어로 쓰세요. 안에 무엇이 들었는지 이름만 보고도 짐작할 수 있어야, 사용자가 헛클릭 없이 원하는 탭으로 곧장 갑니다. 애매한 단어보다 구체적인 명사가 언제나 낫습니다.
• 가장 중요하거나 자주 보는 내용을 첫 번째 탭에 두세요. 처음 열었을 때 기본으로 보이는 탭이므로, 여기에 핵심을 배치하면 대부분의 사용자가 추가 조작 없이 필요한 정보를 만납니다.

관련 개념