아코디언(Accordion)

아코디언(Accordion)은 악기 아코디언처럼 접었다 펼쳤다 할 수 있는 형태의 UI 컴포넌트입니다. 수직으로 배치된 여러 개의 헤더를 클릭하면, 그 아래 숨겨져 있던 세부 내용이 나타나거나 사라지는 방식이죠. UX/UI 디자이너이자 개발자의 관점에서, 이 컴포넌트가 왜 중요하고 어떻게 설계해야 하는지 정리해 드립니다.

아코디언 이미지 예시

아코디언의 핵심 UX 목적: "점진적 정보 공개"

사용자가 모든 내용을 한꺼번에 읽어야 할 필요가 없을 때, 아코디언은 가장 강력한 도구가 됩니다.

공간 절약: 긴 텍스트를 페이지에 그대로 나열하면 스크롤이 끝도 없이 길어집니다. 아코디언은 이를 깔끔하게 숨겨서 페이지의 가독성을 높입니다.
사용자 주도권: 사용자는 자신이 관심 있는 제목만 클릭하여 내용을 확인하므로, 불필요한 정보에 압도되지 않습니다.
계층 구조: 전체적인 목차를 먼저 보여주고, 세부 내용은 필요할 때만 보여줌으로써 사용자가 정보를 구조적으로 파악하게 돕습니다.

디자인 설계 시 주의사항

시각적 힌트(Visual Cues)

가장 중요한 부분입니다. 사용자가 클릭할 수 있다는 것을 알게 해야 합니다. 보통 우측에 + 아이콘이나 화살표(▼, ▲)를 배치합니다.

단일 확장 vs 다중 확장

단일 확장: 하나를 열면 이전에 열려 있던 것이 자동으로 닫히게 설정합니다. (FAQ 페이지에 적합)
다중 확장: 사용자가 여러 섹션을 동시에 열어두고 비교하며 읽을 수 있게 합니다. (설명서나 설정창에 적합)

초기 상태

특별한 이유가 없다면 첫 번째 섹션만 열어두거나, 모든 섹션을 닫아두어 사용자가 선택하게 하는 것이 일반적입니다.

실전 코드 예시 (HTML/CSS/jQuery)

아코디언은 jQuery의 .slideToggle() 메서드를 활용하면 아주 간단하게 만들 수 있습니다.

HTML

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">자주 묻는 질문 1 <span class="icon">▼</span></div>
    <div class="accordion-content">여기에 답변 내용이 들어갑니다.</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">자주 묻는 질문 2 <span class="icon">▼</span></div>
    <div class="accordion-content">여기에 답변 내용이 들어갑니다.</div>
  </div>
</div>

CSS

.accordion-header {
  padding: 15px;
  background: #f4f4f4;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}

.accordion-content {
  padding: 15px;
  display: none; /* 기본적으로 숨김 */
  background: #fff;
  border-bottom: 1px solid #ddd;
}

jQuery

$(document).ready(function() {
  $('.accordion-header').on('click', function() {
    // 클릭한 헤더의 다음 요소(content)를 부드럽게 토글
    $(this).next('.accordion-content').slideToggle(300);
    
    // 아이콘 회전 효과 (선택 사항)
    $(this).find('.icon').toggleClass('rotate');
  });
});

실제 데모

자주 묻는 질문 1 ▼

자주 묻는 질문 2 ▼

자주 묻는 질문 3 ▼

아코디언 vs 탭(Tabs) vs 모달(Modal)

언제 무엇을 써야 할지 고민될 때 이 가이드를 참고하세요.

아코디언: 수직 확장 - FAQ, 제품 상세 제원, 긴 텍스트 분할
탭(Tabs): 수평 전환 - 서로 다른 범주의 내용 분리 (예: 상품설명, 후기)
모달(Modal): 별도 레이어 - 사용자의 완전한 집중이 필요한 정보

교수님의 실전 팁

"아코디언의 핵심은 '사용자가 읽고 싶어 하는 것을 숨기지 않는 것'입니다. 만약 사용자가 반드시 알아야 하는 핵심 내용을 아코디언 깊숙한 곳에 숨겨두면, 사용자는 그 정보를 절대 보지 않을 확률이 높습니다. 중요도는 낮지만 알아두면 좋은 부가 정보를 숨길 때 가장 효과적입니다."