HTML details summary로 FAQ 아코디언 만들기
HTML details summary로만 FAQ 아코디언 만들기가 가능하다고?
FAQ 아코디언 만들기는 JavaScript와 CSS로 직접 구현해야 되는 줄로만 알았는데 HTML details summary 태그만 가지고도 만들 수 있다는 사실을 알게 되었습니다. 별도의 JavaScript 없이도 완벽한 아코디언 UI를 구현할 수 있어 개발 시간을 크게 단축할 수 있습니다.
하지만 실무에서는 JavaScript/CSS로 직접 구현한 경우가 더 많이 보입니다.
일단 HTML details summary 태그가 무엇인지 알아보고, 간단한 예제를 통해서 배워보고, 왜 JavaScript/CSS로 직접 구현하는 방식이 더 많이 사용되는지 알아보겠습니다.
HTML details summary는 무엇이며, 언제 생겼나요?
HTML details summary는 웹 콘텐츠의 일부를 접거나 펼치는 기능을 제공하기 위해 만들어졌습니다.는 웹 콘텐츠의 일부를 접거나 펼치는 기능을 제공하기 위해 만들어졌습니다.
HTML5에 새롭게 도입된 태그로, 2011년에 표준으로 제안되었습니다. 모든 주요 브라우저에서 안정적으로 지원된 시점은 2020년 1월부터는 모든 주요 브라우저에서 안정적으로 지원됩니다. 즉, 이제는 마음 놓고 실무에 사용해도 괜찮다는 의미입니다.
기본 사용법과 예제, 브라우저별 호환성 정보는 아래 링크에 아주 잘 나와있습니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/details
HTML details summary로 FAQ 아코디언 만들기 예제
가장 기본적인 아코디언
<details>
<summary>심플 코딩 연구소는 어떤 블로그인가요?</summary>
<p>좋은 블로그입니다.</p>
</details>
<details>
<summary>좋은 블로그인데 방문자가 왜 이렇게 없나요?</summary>
<p>그러게 말입니다.</p>
</details>특정 항목을 처음부터 열어두기
<details open>
<summary>처음부터 열려있는 FAQ</summary>
<p>이 아코디언은 페이지 로드 시 자동으로 열린 상태로 표시됩니다.</p>
</details>
<details>
<summary>닫혀있는 FAQ</summary>
<p>이 아코디언은 페이지 로드 시 자동으로 열린 상태로 표시됩니다.</p>
</details>한 번에 하나만 열리게 만들기
<details name="abc">
<summary>1번 FAQ</summary>
<p>1번 답</p>
</details>
<details name="abc">
<summary>2번 FAQ</summary>
<p>2번 답</p>
</details>아쉽게도 순수 HTML만으로는 ‘하나를 열면 다른 하나는 닫히는’ 전통적인 아코디언 동작을 완벽하게 구현할 수 없습니다. name 속성을 사용하면 비슷한 동작을 흉내 낼 수는 있지만, 일부 구형 브라우저에서는 지원하지 않는 등 한계가 명확합니다.
제가 근무하는 회사의 내부망처럼 크롬 브라우저 버전이 고정된 환경에서는 name 속성이 아예 동작하지 않는 것을 직접 확인했습니다. 이런 호환성 문제가 바로 실무에서 이 방식이 널리 쓰이지 못하는 이유 중 하나입니다.
따라서 이 기능이 꼭 필요하다면, 아래처럼 아주 약간의 JavaScript를 추가하는 것이 가장 확실하고 안정적인 방법입니다.
<div class="faq-accordion">
<details>
<summary>1번 질문</summary>
<p>1번 답변입니다.</p>
</details>
<details>
<summary>2번 질문</summary>
<p>2번 답변입니다.</p>
</details>
</div>
<script>
const details = document.querySelectorAll('.faq-accordion details');
details.forEach(targetDetail => {
targetDetail.addEventListener('click', () => {
details.forEach(detail => {
if (detail !== targetDetail) {
detail.removeAttribute('open');
}
});
});
});
</script>위 3개 예제 정도만 알면 HTML details summary 기본 사용법은 끝이라고 볼 수 있습니다.
JavaScript/CSS로 아코디언 만들기 예제
글이 너무 길어질 것 같아서 예제 소스는 아래 링크로 대신합니다.
https://www.w3schools.com/howto/howto_js_collapsible.asp
HTML details summary 태그만 가지고 만드는 것보다는 훨씬 복잡하구나라는 것만 알아두시면 됩니다. 그마저도 위의 한 개가 열리면 나머지는 닫히는 아코디언 예제는 빠진 상태입니다.
HTML details summary 아코디언 vs JavaScript/CSS 아코디언
일단 실무에서는 아코디언이 포함되어 있는 라이브러리나 프레임워크를 쓴 경우가 제일 많을 것입니다.
직접 구현하는 경우도 있는데 이럴 때는 JavaScript/CSS로 직접 구현한 아코디언이 더 많이 보입니다. HTML 태그만 사용한 아코디언이 훨씬 간편한데 왜 JavaScript/CSS로 직접 구현한 아코디언이 훨씬 많이 보일까요?
- 브라우저 종류별로 모양이나 동작이 차이가 있을 수 있다. (CSS와 Javascript를 이용해 어느 정도 해결이 가능하지만 그렇게 되면 이 방법의 장점인 간편함이 많이 사라짐)
- 디자인 변경이 JavaScript/CSS로 직접 구현하는 거에 비해 자유롭지 못함
전체적으로 두 가지 방법의 차이점을 아래의 표에서 살펴보겠습니다. HTML 태그로만 구현했을 때 단점이 크지만 성능이나 SEO 같은 장점도 가지고 있습니다.
| 구분 | HTML details summary 아코디언 | JavaScript/CSS 아코디언 |
|---|---|---|
| 개발 복잡도 | 매우 간단 (HTML만 작성) | 복잡 (HTML, CSS, JS 모두 필요) |
| 로딩 속도 | 빠름 (추가 스크립트 없음) | 느림 (라이브러리 로딩 필요) |
| 브라우저 지원 | 모든 주요 브라우저 지원 | 구현에 따라 다름 |
| 웹 접근성 | 기본적으로 우수 | 별도 구현 필요 |
| SEO | 매우 우수 (검색엔진이 모든 콘텐츠 읽음) | 제한적 (동적 콘텐츠는 읽기 어려움) |
| 커스터마이징 | CSS로 제한적 | 자유롭게 가능 |
| 애니메이션 | 기본적으로 제한적 | 자유롭게 구현 가능 |
| 유지보수 | 쉬움 | 복잡함 |
선택 기준
- 빠르게 만들고, SEO와 웹 접근성이 중요하다면? -> 단연코 <details> 태그를 추천합니다. (블로그, 간단한 정보 페이지 등)
- 화려한 애니메이션과 복잡한 상호작용이 필요하다면? -> JavaScript 기반 라이브러리나 직접 구현이 더 적합합니다. (브랜드 웹사이트, 웹 애플리케이션 등)
부록: HTML details summary의 못생긴 기본 디자인 CSS로 꾸미기
사실 기본 디자인을 그대로 쓰기는 힘듭니다. 가볍게 딱 3가지 작업만 해서 볼만하게 꾸며보겠습니다.
1. 기본 화살표 제거하기
summary {
list-style: none; /* Firefox */
}
summary::-webkit-details-marker {
display: none; /* Chrome, Safari */
}2. 커스텀 아이콘(🔽, 🔼) 추가하기
summary {
position: relative;
padding-left: 1.5rem; /* 아이콘을 위한 공간 확보 */
cursor: pointer;
}
summary::before {
content: '▶️'; /* 닫혔을 때 아이콘 */
position: absolute;
left: 0;
font-size: 1.2rem;
line-height: 1;
}
details[open] > summary::before {
content: '🔽'; /* 열렸을 때 아이콘 */
}3. 부드러운 애니메이션과 디자인 적용하기
details {
border: 1px solid #e0e0e0;
border-radius: 4px;
margin-bottom: 8px;
}
summary {
padding: 2rem;
font-weight: bold;
background-color: #f7f7f7;
}
details[open] > summary {
border-bottom: 1px solid #e0e0e0;
}
details > p {
padding: 1rem;
background-color: #ffffff;
/* 부드러운 애니메이션을 위한 준비 (max-height) */
overflow: hidden;
transition: max-height 0.3s ease-out;
}완성된 결과물을 비교
결론
HTML details summary에 대해서 자세하게 알아봤습니다. 결론은 두 가지 방법 다 장단점이 다르니 상황에 맞게 써야 한다가 되겠네요.
그래도 FAQ 아코디언 만들기 같은 경우 무조건 복잡한 JavaScript/CSS 직접 구현으로만 되는 줄 알았는데 HTML 태그 만으로도 구현이 가능하다는 사실을 알게 되어서 좋았습니다.
또한 HTML의 기본 기능을 최대한 활용하는 것만으로도 더 나은 웹을 만들 수 있다는 점도 잊지 말아야 하겠네요.
