자바스크립트로 탭 기능 만들기 (tab)

 

 

🧭 웹 UI를 다루는 기본기 – 탭 기능부터 탄탄하게

웹사이트를 처음 방문한 사용자가 가장 먼저 접하는 UI 요소 중 하나가 탭 메뉴입니다.

정보가 많을수록 사용자에게 복잡하게 느껴지기 쉬운데,

탭은 이런 내용을 주제별로 나눠 가독성과 경험을 동시에 잡을 수 있는 훌륭한 도구예요.

 

오늘은 순수 바닐라 자바스크립트로 탭 기능을 만드는 방법과 함께

접근성(Accessibility)까지 챙기는 팁을 소개합니다.

 

 

🎯 탭 UI란?

탭 메뉴는 여러 정보 블록을 겹쳐두고, 사용자가 클릭하는 탭에 따라 해당 콘텐츠를 보여주는 구조입니다.

FAQ, 제품 사양, 멤버 프로필, 카테고리 구분 등 다양한 상황에 활용되죠.

 

 

🧱 HTML 구조부터 준비하기

먼저 탭 버튼과 콘텐츠 영역을 HTML로 구성합니다.

<div class="tabs">
  <ul class="tab-buttons">
    <li class="active">탭 1</li>
    <li>탭 2</li>
    <li>탭 3</li>
  </ul>
  <div class="tab-contents">
    <div class="tab-content active">내용 1</div>
    <div class="tab-content">내용 2</div>
    <div class="tab-content">내용 3</div>
  </div>
</div>

 

🎨 CSS 스타일링으로 시각적 피드백 주기

.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-buttons li.active { font-weight: bold; }

 

🧠 자바스크립트로 탭 동작 구현

const tabButtons = document.querySelectorAll('.tab-buttons li');
const tabContents = document.querySelectorAll('.tab-content');

tabButtons.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    tabButtons.forEach(b => b.classList.remove('active'));
    tabContents.forEach(c => c.classList.remove('active'));

    btn.classList.add('active');
    tabContents[index].classList.add('active');
  });
});

 

🛠 자바스크립트 탭에도 의미 있는 HTML 구조 쓰기

• <button> 요소를 사용하면 접근성에 더 유리합니다.
• 각 콘텐츠에 aria-labelledby, role="tabpanel" 같은 속성을 사용해 검색엔진과 스크린리더도 내용을 인식할 수 있게 만드세요.
• 탭 이름에 키워드를 넣어 콘텐츠 가시성을 높이는 것도 팁입니다.

 

접근성을 고려하면 더 많은 사용자,

특히 스크린 리더 사용자나 키보드만 사용하는 사람들에게도

탭 기능을 편리하게 제공할 수 있어요.

 

 

♿ 접근성도 챙기자 – 누구나 쓰기 쉬운 UI 만들기

기능 구현만큼 중요한 것이 모두가 사용할 수 있는 환경입니다.

키보드만 쓰는 사용자, 화면 낭독기 사용자에게도 완벽하게 작동하려면 아래 요소들을 고려해야 합니다:

• 시맨틱한 HTML 사용 (<button> 요소, role="tablist" 등)
• ARIA 속성 추가 (aria-selected, aria-controls, aria-labelledby 등)
• 키보드 탐색 지원 (keydown 이벤트, 방향키 이동)
• 포커스 스타일 추가 및 tabindex="0" 지정

 

✅ 왜 접근성이 중요할까요?

모든 사용자가 동등한 정보 접근과 웹 사용 경험을 누리도록 하려면 웹 요소에 의미와 구조를 잘 전달해야 합니다. 탭 기능도 예외는 아니에요. 스크린 리더나 키보드만 사용하는 사용자도 각 탭이 뭘 나타내는지 쉽게 이해할 수 있어야 합니다.

 

🧱 HTML 구조: 시맨틱 요소 & ARIA 속성 추가

<div class="tabs" role="tablist" aria-label="정보 탭">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">탭 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">탭 2</button>
  <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">탭 3</button>

  <div id="panel-1" role="tabpanel" aria-labelledby="tab-1">내용 1</div>
  <div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>내용 2</div>
  <div id="panel-3" role="tabpanel" aria-labelledby="tab-3" hidden>내용 3</div>
</div>

 

🎯 자바스크립트 접근성 대응: aria-selected와 hidden 처리

const tabs = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => {
      t.setAttribute('aria-selected', false);
      t.classList.remove('active');
    });
    panels.forEach(p => p.hidden = true);

    tab.setAttribute('aria-selected', true);
    tab.classList.add('active');
    panels[index].hidden = false;
  });
});

 

💡 키보드 사용자도 고려하면 완성도 업!

• 방향키(←, →)로 탭 이동 가능하게 하려면 keydown 이벤트도 추가하면 좋아요.
• focus() 메서드를 활용해 키보드 포커스를 다음 탭으로 이동시킬 수 있어요.

이렇게 하면 접근성 표준(WCAG)도 충족해요. 웹사이트 신뢰도와 사용자 만족도를 모두 높일 수 있죠.

 

 

 

📌 마무리하며

자바스크립트로 탭 UI를 구현하는 과정은 단순히 버튼을 누르면 내용이 바뀌는 수준을 넘어,

사용자 중심 설계와 웹 표준에 대한 이해를 넓힐 수 있는 좋은 기회입니다.

여기에 접근성까지 챙기면 진짜 실무에 강한 UI 컴포넌트를 만들 수 있어요.

 

다음 포스트에서는 드롭다운, 모달 창, 애니메이션 등 더 다양한 UI 구성 방법을 소개할 예정입니다.

UI 하나하나에 숨은 설계의 재미를 함께 배워가요! 😊

구독과 좋아요는 개발자에게 큰 힘이 됩니다. 🙌