<details> — 인터랙티브 태그 도감

올바른 사용

summary와 짝 (summary가 첫 자식)

open 속성으로 기본 펼침

name 속성으로 single-open 아코디언 (2024+)

콘텐츠는 DOM에 항상 존재

기본 FAQ

<details>
  <summary>주문 후 며칠 안에 배송되나요?</summary>
  <p>평일 기준 1-2일 안에 출고됩니다.</p>
</details>

JS 0줄. 키보드·스크린리더·검색 모두 자동.

single-open 아코디언 (name 속성)

<details name="faq">
  <summary>질문 1</summary>
  <p>답변 1</p>
</details>
<details name="faq">
  <summary>질문 2</summary>
  <p>답변 2</p>
</details>

같은 name이면 하나 열 때 다른 게 자동 닫힘. 2024+ 모든 브라우저 지원.

기본 펼침

<details open>
  <summary>가장 중요한 항목</summary>
  <p>처음부터 열려 있음.</p>
</details>

open 속성으로 초기 상태 제어.

자주 보는 안티패턴

summary 누락

조건부 렌더링으로 비활성 콘텐츠 제거

JS 아코디언으로 같은 동작 재구현

FAQPage Schema와 details 콘텐츠 불일치

조건부 렌더링

{open && (
  <details>
    <summary>질문</summary>
    <p>답변</p>
  </details>
)}

닫힌 상태에서 콘텐츠가 DOM에 없음. 검색엔진 인덱싱 손실.

JS 아코디언 재구현

<button onClick={toggle}>질문</button>
{open && <p>답변</p>}

aria-expanded·키보드·자동 펼침 모두 직접 처리. details로 0줄.

해설

JavaScript 0줄로 펼침/접힘이 가능한 disclosure 위젯. FAQ 아코디언, "더 보기" 토글, 약관 펼침 등. 시리즈 #4에서 "가장 짧고 강력한 두 태그"로 다뤘다.

SEO 관점에서 details의 결정적 장점 — 닫힌 상태에서도 콘텐츠가 DOM에 있음. 검색엔진이 FAQ 답변 전체를 인덱싱. JS 아코디언의 조건부 렌더링은 닫힌 콘텐츠가 DOM에서 제거되어 인덱싱 손실.

GEO 관점에서 AI Overviews가 FAQ 답변을 만들 때 질문-답변 시맨틱 쌍인 details가 우선. summary가 질문, 본문이 답변으로 구조 명확. JS 아코디언은 어디까지가 질문이고 답변인지 AI가 추측.

AEO 관점에서 가장 critical. Featured Snippet의 질문-답변 카드가 가장 자주 인용되는 형식이고 — details + summary가 그 표준 시맨틱. FAQPage Schema와 결합하면 시너지 더 큰.

A11y 관점에서 자동 처리되는 동작들: Tab 포커스, Enter/Space 발화, "확장 가능, 접힘" 자동 발화, 펼침 시 "확장됨" 발화, 키보드 호환성 100%. JS 아코디언으로 같은 동작 흉내내려면 aria-expanded 동기화 등 직접 처리.

자주 보는 안티패턴: 조건부 렌더링으로 비활성 콘텐츠 제거(가장 큰 SEO 손실), summary 누락(시맨틱 무효), JS 아코디언 재구현(시간 낭비 + a11y 직접 처리 필요), FAQPage Schema와 details 콘텐츠 불일치(JSON-LD에는 질문 + 답변이 있는데 DOM에는 다른 내용 — 검색엔진의 신뢰 신호 손해).

name 속성 (2024+) — single-open 아코디언. 같은 name을 공유하는 details들은 하나 열 때 다른 게 자동 닫힘. 라디오 그룹과 비슷한 동작. Chrome 120+, Firefox 124+, Safari 17.4+에서 지원. JS로 만들던 single-open 아코디언이 0줄로 가능.

open 속성 — 초기 펼침 상태. React에서 controlled로 쓰려면 onToggle 이벤트로 상태 동기화. 다만 대부분의 경우 uncontrolled로 충분.

Radix Accordion과의 비교 — Radix Accordion이 애니메이션·키보드 단축키(Home/End/방향키)에서 유리. native details는 SEO·zero dependency·Schema 결합에서 유리. FAQ는 details, 풍부한 UI는 Radix.

CSS 스타일링 — summary::marker { content: '+ '; }로 토글 마커 커스텀. details[open] summary::marker { content: '- '; }로 펼친 상태 변경. 시각·시맨틱 모두 자유.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설