[시멘틱 마크업] details활용 팝업창

웹 개발에서 팝업창은 사용자에게 추가 정보를 제공하거나 상호 작용할 수 있는 기회를 제공합니다. 이러한 팝업창을 마크업할 때 시멘틱한 요소인 <details>와 <summary>를 활용하면 웹 접근성과 사용자 경험을 개선할 수 있습니다.

시멘틱 마크업의 중요성

시멘틱 마크업은 웹 페이지의 요소를 의미적으로 구분하여 브라우저와 검색 엔진에 페이지 내용을 더 명확하게 전달합니다. 이는 SEO 최적화에서 중요한 역할을 합니다. 시멘틱 마크업을 사용하면 검색 엔진은 페이지의 내용을 더 잘 이해하고 색인화할 수 있으며, 검색 결과에 노출될 확률이 높아집니다.

1. `<details>` 요소의 기본 기능

<details> 요소는 사용자가 추가 정보를 펼쳐볼 수 있는 토글 메뉴를 제공합니다. 사용자가 요약(summary)을 클릭하면 내용이 펼쳐지고, 다시 클릭하면 숨겨집니다. 이를 활용하여 팝업창을 구현하면 웹 접근성을 향상시키면서 사용자가 필요한 정보에 더 쉽게 접근할 수 있습니다.

<details>
   <summary>자세히 보기</summary>
   <p>팝업창 내용을 설명하는 문장이 들어갑니다.</p>
</details>

2. 웹 접근성을 고려한 디자인

팝업창의 디자인을 구성할 때는 컬러 대비, 텍스트 크기, 키보드 포커싱 등의 웹 접근성 요소를 고려해야 합니다. 특히 <details> 요소 내부의 내용은 스크린 리더 사용자를 위해 명확하게 제공되어야 합니다.

<details>
    <summary aria-label="모달 열기/닫기 버튼" role="button" tabindex="0">
        <span aria-hidden="true">&times;</span>
    </summary>
    <div role="dialog" aria-labelledby="modalTitle" tabindex="0">
        <h2>모달 팝업 제목</h2>
        <p>모달 팝업 내용이 여기에 들어갑니다.</p>
    </div>
</details>

dialog 요소에 의한 팝업은 팝업창 제목을 h1으로 작성하지만 details 요소를 활용한 팝업은 h1이 아닌 h2로 작성하는 것에 주의해야 합니다. 이는 dialog와 details이 갖는 시멘틱의 기능 의미가 다른것에서 오는 차이이므로 명확한 구분을 해주는 것이 좋습니다.

다음은 웹 접근성을 향상시키기 위해 사용되는 몇 가지 중요한 속성과 역할에 대한 설명입니다.

aria-label (ARIA 라벨)
- aria-label 속성은 HTML 요소에 대한 대체 텍스트를 지정하는 데 사용됩니다.
- 주로 시각적으로 표시되지 않는 요소에 대한 설명을 제공하는 데 유용합니다.
- 예를 들어, 아이콘 버튼의 경우, 해당 아이콘의 의미나 기능을 aria-label로 명시할 수 있습니다.
role (ARIA 역할)
- role 속성은 HTML 요소가 수행하는 역할을 정의하는 데 사용됩니다.
- 웹 접근성을 향상시키기 위해 추가 정보를 제공할 때 유용합니다.
- 예를 들어, role="button"은 해당 요소가 버튼의 역할을 수행함을 나타냅니다.
tabindex (탭 순서)
- tabindex 속성은 요소가 키보드 탭 키를 사용하여 포커스를 받을 순서를 지정합니다.
- tabindex="0"은 요소가 일반적인 탭 순서에 따라 포커스를 받도록 합니다.
- tabindex="-1"은 요소가 포커스를 받지 않지만 JavaScript를 사용하여 포커스를 설정할 수 있도록 합니다.
- 양의 정수를 사용하면 요소 간의 포커스 순서를 직접 지정할 수 있습니다.
aria-hidden (ARIA 숨김)
- aria-hidden 속성은 요소가 스크린 리더 등의 보조 기술에 의해 무시되어야 하는지 여부를 나타냅니다.
- aria-hidden="true"로 설정된 요소는 보조 기술에 의해 무시되며 사용자에게 읽히지 않습니다.
- 이를 통해 불필요한 콘텐츠를 스크린 리더 사용자에게 제공하지 않고, 더 나은 접근성을 제공할 수 있습니다.

이러한 속성과 역할은 웹 접근성을 향상시키고 모든 사용자에게 웹 콘텐츠에 대한 더 나은 경험을 제공하는 데 도움이 됩니다.

팝업창 디자인과 스타일링

시멘틱한 요소인 <details>와 <summary>를 사용하여 팝업창의 기본 구조를 구현하고, CSS를 활용하여 디자인과 레이아웃을 조정할 수 있습니다. 이때 팝업창의 크기와 위치, 텍스트 스타일 등을 조절하여 사용자가 편리하게 사용할 수 있도록 해야 합니다.

details 요소를 활용하여 팝업창 스타일링시 주의사항이 있습니다.
페이지 초기에 보여야 하는 경우에만 open 속성을 부여하고 토글이 되는 본래의 기능을 유지하는 것이 좋습니다.
open이 되어 있는 때와 없을 때의 팝업창 디자인을 각각 해주는것이 기본 원리입니다.

details {
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color:rgba(0,0,0,.7); 
    z-index:1
}
details[open] {
    display:block;
}

details는 다른 일반 요소와는 조금 다른 특수성이 있으니 details 요소에 대한 자세한 내용을 보시려면 다음 링크를 참고해보세요.

https://ljj.kr/details-태그의-기본사용법과-주의사항

아래는 스타일링과 자바스크립트 연동으로 팝업창 구현된 전체 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시멘틱 모달팝업 - details 활용편</title>
<style>
	body {padding:20px;}
	.modal-container {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.7); z-index:1}
	[open].modal-container {display:block;}
	.modal-content {display:flex; background-color:#fff; padding:20px; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,.3); position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); flex-direction:column}
	.modal-title {font-size:24px}
	.modal-close {position:absolute; top:20px; right:20px; cursor:pointer; font-size:30px}
	.modal-close:hover {color:#fff}
</style>
</head>
<body>
<h1>시멘틱 모달팝업 - details 활용편</h1>
<p>이 버튼을 클릭하여 모달 팝업을 열 수 있습니다:</p>
<button onclick="toggleModal()">모달 열기/닫기</button>
<details id="myModal" class="modal-container">
	<summary aria-label="모달 열기/닫기 버튼" role="button" tabindex="0">
		<span class="modal-close" aria-hidden="true">&times;</span>
	</summary>
	<div class="modal-content" role="dialog" aria-labelledby="modalTitle" tabindex="0">
		<h2 id="modalTitle" class="modal-title">모달 팝업 제목</h2>
		<p>모달 팝업 내용이 여기에 들어갑니다.</p>
	</div>
</details>
<script>
	const modal = document.getElementById('myModal');
	// 모달팝업창 토글 기능
	function toggleModal() {
		if (modal.hasAttribute('open')) {
			modal.removeAttribute('open');
		} else {
			modal.setAttribute('open', 'open');
		}
	}

	// ESC 키로 모달 닫기
	document.addEventListener('keydown', function (event) {
		if (event.key === 'Escape' && modal.hasAttribute('open')) {
			modal.removeAttribute('open');
		}
	});
</script>
</body>
</html>

details를 활용한 팝업창의 장점

웹 접근성 향상

“details” 요소를 사용하면 웹 접근성을 크게 향상시킬 수 있습니다. 시각 장애인 및 저시력자를 포함한 다양한 사용자 그룹이 콘텐츠를 더 쉽게 이해하고 조작할 수 있습니다. ARIA 역할 및 라벨을 활용하여 각 요소의 역할을 명확하게 설명할 수 있습니다.

시멘틱 마크업

“details” 요소를 사용하면 모달 팝업과 같은 인터랙티브 컨텐츠를 시맨틱하게 표현할 수 있습니다. 이로써 개발자와 브라우저, 검색 엔진 등이 콘텐츠의 의미를 더 잘 이해할 수 있으며, SEO에도 도움이 됩니다.

단순한 구조

“details” 요소를 사용하면 모달 팝업의 구현이 단순해집니다. 자바스크립트가 지원되지 않는 환경에서도 기본적인 팝업토글 기능이 작동합니다. 이로써 코드 유지 보수가 더 쉬워집니다.

키보드 조작 가능

“details” 요소는 키보드로도 조작 가능합니다. 포커스를 이동하고 엔터 키를 눌러 “details” 요소를 열거나 닫을 수 있으므로, 접근성을 높일 뿐만 아니라 키보드 사용자에게도 편의성을 제공합니다.

브라우저 호환성

“details” 요소는 대부분의 주요 브라우저에서 지원되므로 크로스 브라우징 문제를 최소화할 수 있습니다. 특별한 JavaScript 라이브러리나 플러그인을 사용하지 않아도 됩니다.

“details” 요소를 활용하면 모달 팝업과 같은 시멘틱한 팝업 창을 만들고, 이로써 웹 접근성을 개선하고 콘텐츠를 더 명확하게 표현할 수 있습니다.

결론

시멘틱한 마크업을 활용하여 팝업창을 구현하면 웹 접근성과 사용자 경험을 향상시킬 수 있습니다. <details>와 <summary> 요소를 적절히 활용하여 팝업창을 디자인하고, CSS를 사용하여 스타일링하는 것을 권장합니다.
웹접근성을 고려하고 시멘틱 마크업으로 작성함으로 보다 웹표준에 가까운 개발을 하시길 바랍니다.

자주 묻는 질문

<details>와 <summary> 요소는 어떻게 사용하나요?
<details> 요소는 추가 정보를 담고 있는 묶음을 생성하며, <summary> 요소는 토글 메뉴의 요약을 제공합니다. 사용자가 <summary>를 클릭하면 내용이 펼쳐지거나 숨겨집니다.
<details> 요소의 웹 접근성은 어떻게 보장하나요?
<details> 요소 내부의 내용을 명확하게 구성하고 aria-labelledby 속성을 활용하여 접근성을 보장할 수 있습니다.
팝업창의 내용을 동적으로 변경할 수 있나요?
네, JavaScript를 사용하여 <details> 요소의 open 속성을 변경하거나 내용을 동적으로 조작할 수 있습니다.
<details> 요소를 사용하지 않고 팝업창을 구현할 수 있나요?
<details> 요소를 사용하지 않고도 팝업창을 구현할 수 있지만, 시멘틱한 마크업과 웹 접근성을 고려할 때 details 또는 dialog 요소의 활용이 권장됩니다.
팝업창의 디자인은 어떻게 결정하나요?
팝업창의 디자인은 웹사이트의 디자인 가이드에 따라 결정됩니다. CSS를 사용하여 디자인을 구현하면 일관된 스타일을 유지할 수 있습니다.