Pop Up API

Open UI의 목표는 개발자가 더 쉽게 훌륭한 사용자 경험을 만들도록 하는 것이다. 이를 위해, 구글은 개발자들이 직면하는 문제가 되는 패턴을 해결하려고 노력하고 있다.

 

개요

팝업은 그 목적과 효과가 뚜렷하여 많이 사용된다. 그러나 이를 개발하는 것은 마냥 쉬운 일이 아니며, 다음 사항들 때문에 간혹 골치 아픈 일이 생기기도 한다.

• 팝업 위치: 팝업은 다른 모든 요소보다 위에 노출될 것으로 기대된다. 하지만, CSS를 제대로 지정하지 않은 몇몇 웹사이트에서는 팝업이 사이드바 아래로 위치하곤 한다.
• 접근성: 키보드 등으로 팝업 요소에 접근하기 쉬워야 하지만, 종종 이를 놓치곤 한다.
• 숨김/표시 로직: 팝업을 표시하거나 숨기는 로직, 여러 개의 팝업을 표시하는 로직 등 고려해야 할 것이 많다.

Pop Up API는 이런 여러 문제를 해결하면서 팝업 개발의 난이도를 낮추는 등의 목적을 갖고 있다.

 

예시

Pop Up API는 선언적인 순수 HTML만을 통해 팝업이 구현되도록 한다. (물론, js로 제어할 수도 있다.)

가장 간단한 예제는 다음과 같다.

<div id="my-popup" popup>PopUp Content!</div>
<button popuptoggletarget="my-popup">Toggle Pop-Up</button>

popuptoggletarget 속성으로 지정한 엘리먼트와 popup 속성을 가진 엘리먼트가 있다.

 

따라서 현재 브라우저가 Pop Up API를 지원하는 지 확인하는 방법은 다음과 같다. 이 글을 작성하는 현재 크롬 110버전부터 정식으로 지원될 것으로 예상된다.

const supported = Element.prototype.hasOwnProperty("popUp");

 

해당 팝업은 top-layer에 위치하기 때문에, 다른 HTML 요소들과 독립적으로 화면 맨 위에 배치되게 된다. 따라서 개발자는 z-index 등 CSS와 씨름하지 않아도 된다.

 

팝업은 토스트, 사이드바, 드롭다운, 상단 노티 등 여러 엘리먼트로 적용 가능하기 때문에 그 활용도가 매우 높다.

 

다음은 내가 직접 Pop Up API를 사용해 본 예시다. 각각 popup="auto", popup="manual"이 적용되었는데, 전자는 백드롭 혹은 닫기 버튼을 클릭하거나 ESC키를 누르는 등의 행위로 팝업을 닫을 수 있는 반면, 후자는 팝업(토스트) 스스로를 클릭해야만 닫히도록 해두었다.

 

 

<dialog>와의 차이점

• modal <dialog>는 dialog 이외의 요소를 상호작용 불가능(inert)하게 한다. 하지만 popup은 매우 가벼운 요소로, 팝업이 노출된 상태에서도 다른 요소에 상호작용 가능하다.
• non-modal <dialog>는 popup과 다르게 top-layer에 존재하지 않으므로 페이지 최상단에 위치한다고 보장할 수 없다.
• dialog는 항상 role=dialog 속성을 갖지만, popup 속성은 의미상 가장 관련 있는 HTML 엘리먼트(물론 dialog 엘리먼트도 포함해서)에 적용될 수 있다.
• pop-up은 순수 CSS를 통해 표시/숨김 전환을 쉽게 애니메이션화할 수 있다.
• pop-up은 순수 HTML로 선언적으로 표시/숨김할 수 있다.
• pop-up은 표시/숨김 이벤트를 모두 실행하지만, dialog는 표시 이벤트가 실행되지 않는다.

 

참고

https://open-ui.org/components/popup.research.explainer

Pop Up API (Explainer)

https://developer.chrome.com/blog/new-in-chrome-106/#popup-api

New in Chrome 106 - Chrome Developers

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/

Pop-ups: They're making a resurgence! - Chrome Developers