HTML popover 속성, 툴팁·드롭다운 UI에 활용할 수 있을까?

홈페이지를 사용하다 보면 버튼을 눌렀을 때 작은 안내창이 열리거나, 메뉴 아래로 드롭다운 박스가 펼쳐지는 화면을 자주 보게 됩니다. 전체 화면을 막는 모달까지는 아니지만, 사용자가 필요한 정보를 바로 확인할 수 있게 돕는 UI입니다.

이런 작은 팝업 UI를 만들 때 확인해볼 수 있는 HTML 기능이 popover 속성입니다. popover는 툴팁, 드롭다운, 간단한 안내창처럼 페이지 위에 잠시 표시되는 요소를 구성할 때 활용할 수 있습니다.

다만 popover는 모든 팝업을 대신하는 기능으로 보기보다, 모달이 필요하지 않은 가벼운 UI를 다룰 때 적합한 방식으로 이해하는 편이 좋습니다.

popover 속성은 어떤 UI에 적합할까요?

popover 속성은 사용자의 흐름을 완전히 막지 않고, 필요한 정보나 선택지를 잠깐 보여줄 때 잘 맞습니다.

예를 들어 아래와 같은 화면에서 활용할 수 있습니다.

문의 확인, 예약 완료, 삭제 확인처럼 사용자의 결정을 확실히 받아야 하는 화면은 dialog 태그가 더 적합할 수 있습니다. 반대로 메뉴나 도움말처럼 가볍게 열고 닫히는 UI는 popover 속성을 검토해볼 수 있습니다.

HTML popover 기본 구조

popover 속성은 표시할 요소에 적용합니다. 버튼에는 어떤 popover를 열지 popovertarget으로 연결합니다.

<button type="button" popovertarget="infoPopover">
    안내 보기
</button>

<div id="infoPopover" popover>
    <p>이 영역은 버튼을 클릭하면 표시되는 안내창입니다.</p>
</div>

이 구조에서는 버튼을 클릭했을 때 id="infoPopover"를 가진 요소가 열립니다. 별도의 JavaScript를 작성하지 않아도 기본적인 열기와 닫기 동작을 만들 수 있습니다.

간단한 안내창이나 옵션 메뉴처럼 구조가 단순한 UI라면 코드가 훨씬 짧아집니다.

닫기 버튼을 따로 만들고 싶다면

popover 안에 닫기 버튼을 넣을 수도 있습니다. 이때 popovertargetaction="hide"를 사용하면 해당 popover를 닫는 버튼으로 만들 수 있습니다.

<button type="button" popovertarget="menuPopover">
    메뉴 열기
</button>

<div id="menuPopover" popover>
    <ul>
        <li><a href="#">회사소개</a></li>
        <li><a href="#">서비스</a></li>
        <li><a href="#">문의하기</a></li>
    </ul>

    <button type="button" popovertarget="menuPopover" popovertargetaction="hide">
        닫기
    </button>
</div>

이 방식은 드롭다운 메뉴나 작은 안내 박스처럼 사용자가 직접 닫을 수 있는 UI에 적용하기 좋습니다.

popover와 dialog는 어떻게 다를까요?

dialog 태그는 사용자의 행동을 잠시 멈추고 확인을 받는 모달 UI에 잘 맞습니다. 예를 들어 삭제 확인, 예약 확정, 약관 동의 안내처럼 뒤쪽 화면보다 팝업 안의 선택이 중요한 경우입니다.

popover는 그보다 가볍습니다. 페이지 위에 작은 박스를 띄우고, 사용자가 정보를 확인하거나 메뉴를 선택한 뒤 다시 원래 화면으로 돌아가는 구조에 어울립니다.

정리하면 이렇게 볼 수 있습니다.

화면 전체를 막아야 한다면 dialog, 작은 레이어만 띄우면 된다면 popover가 더 자연스러울 수 있습니다.

드롭다운 UI에 활용하는 예시

필터 메뉴나 정렬 메뉴처럼 짧은 선택지를 보여주는 UI에도 popover를 사용할 수 있습니다.

<button type="button" popovertarget="filterPopover">
    필터 선택
</button>

<div id="filterPopover" popover class="filter-box">
    <button type="button">최신순</button>
    <button type="button">인기순</button>
    <button type="button">조회순</button>
</div>

.filter-box {
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

기본 동작은 HTML 속성으로 처리하고, 모양은 CSS로 조정하면 됩니다. 메뉴 위치, 여백, 그림자, 테두리 등을 조정해 템플릿 디자인에 맞게 꾸밀 수 있습니다.

JavaScript가 필요한 경우도 있습니다

popover 속성만으로 기본적인 열림과 닫힘은 만들 수 있습니다. 하지만 모든 상황을 HTML만으로 처리하기는 어렵습니다.

예를 들어 아래와 같은 경우에는 JavaScript 제어가 필요할 수 있습니다.

간단한 안내창은 HTML과 CSS 중심으로 만들고, 기능 처리가 필요한 부분만 JavaScript로 보완하는 방식이 실무에 적합합니다.

적용 전 체크리스트

popover는 편리하지만, 사용자가 내용을 놓치지 않고 닫을 수 있도록 구성해야 합니다. 특히 모바일에서는 작은 박스가 화면 밖으로 밀리지 않는지 확인하는 과정이 필요합니다.

자주 묻는 질문

작은 팝업 UI는 목적에 맞게 나눠야 합니다

팝업 UI라고 해서 모두 같은 방식으로 만들 필요는 없습니다. 사용자의 결정을 받아야 하는 모달은 dialog 태그가 어울리고, 메뉴나 도움말처럼 가볍게 열리는 UI는 popover 속성을 활용할 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 참고하거나 수정할 때도 팝업의 목적을 먼저 확인하는 것이 좋습니다. 문의 확인처럼 중요한 선택이 필요한지, 더보기 메뉴처럼 짧게 열리는 UI인지에 따라 구조를 다르게 잡으면 코드와 화면 구성이 더 명확해집니다.