프론트엔드 학습 일지 Day 3 - 팝오버(popover) API

이번에는 Chrome 114 에서 팝오버 Popover API 브라우저에서 제공해준다고 하여

 

이 것에 대해 알아볼 계획이다. 새로운 팝오버 API는 어떻게 사용할 수 있을까?

 

Day 3 ㄱㅂㅈㄱ~!

 

 

 

팝오버 Popover 란? What is popover?

---

 

1. 팝오버는 "메뉴, 토글 팁, 대화 상자(dialog)에서 볼 수 있으며, 계정 설정, 정보 표시 위젯, 제품 카드 미리 보기 등의 형태로 나타나는 컴포넌트" 이다.

 

팝오버를 구현하기 위해서는 꽤 많은 것을 신경써야 한다.

"포커스, 열기 및 닫기 상태, 컴포넌트에 액세스 가능한 훅, 진입 및 종료를 위한 키보드 바인딩" 등등..

팝오버 기능을 제공하는 라이브러리나 UI 라이브러리 (Material UI, antd, etc..)가 있긴 하지만,

브라우저에서 이 기능을 직접 제공해준다면 놓칠 수가 없다. 한번 살펴보자.

 

 

2. 팝오버 API에 포함된 사항

- 최상위 레이어로 자동으로 올려줌
팝오버는 모든 레이어 위에 올라와야 하는데 화면 z축 기준으로 최상단에 올리기 위해  z-index를 수동으로 조작할 필요가 없게 된다.

 

- 외부 클릭시 팝오버가 닫힘
팝오버 영역 외부를 클릭하면 팝오버가 닫히는 기능을 제공한다.

 

- 포커스 관리를 지원
팝오버 창을 열면 탭은 팝오버 창 안에서 머물게 된다. 키보드 탭으로 접근이 가능하게 될 것이다.

 

- 키보드 바인딩 지원
ESC키를 누르면 팝오버 창이 닫히고 포커스가 원래 위치로 돌아오게 될 것이다.

- 컴포넌트 바인딩을 지원
팝오버 요소를 팝오버 트리거에 의미적으로 연결한다. 팝오버로 보여줄 컴포넌트와 팝오버를 띄워주기 위한 이벤트가 연결되어있다라고 보면 될 것 같다.

 

 

우리가 흔히 생각하는 Popover UI에 포함된 기능을 모두 제공하는 것 같다.

간단한 사용 방법은 아래 코드와 같다.

 

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
  <p></p>
</div>

- id값이 필요하다.

- id값과 동일한 값을 가진 popovertarget이 팝오버를 여는 요소에 있어야 한다.

- 그리고 팝오버를 띄울 녀석에게 popover 속성을 넣어주면 된다.

 

 

3. 기본값 오버라이드

 

2번에서 다뤘던 바와 같이 popovertarget이 자동으로 팝오버를 열고 닫히는 역할을 수행해줬는데 열리고 닫히는 것을 따로 지정해줄 수도 있다.

 

<button popovertarget="my-popover" popovertargetaction="hide">
  <span aria-hidden="”true”">❌</span>
  <span class="sr-only">Close</span>
</button>

 

어느정도 예상이 되겠지만 popovertargetaction="hide"로 지정하면 해당 버튼은 닫기 동작을 수행하게 될 것이다.

반대는 show 로 설정하면 된다.

 

 

4. popover는 popover="auto"의 생략된 표현

 

popover api에 속성을 안넣고 popover만 썼다면 이는 popover="auto"를 줄여서 쓴 표현이다.

그렇다면 auto가 아닐 경우에는 어떻게 동작할까?

 

popover="manual"으로 설정하는 옵션이 있는데 이걸 설정해주면

외부 클릭을 해도 popover가 닫히지 않게 되고 3번에 소개했던 popovertargetaction="hide" 와 같은 걸로 명시적으로 닫아줘야 닫히게 된다.

 

auto와 manual의 차이를 간단히 정리한 내용을 보면

 

- popover="auto"인 팝오버

• 팝오버가 열릴 때, 다른 팝오버를 강제로 close
• 외부 클릭시 닫힘

- popover="manual"인 팝오버

• 다른 팝오버를 강제로 close하지 않음
• 외부 클릭시 닫히지 않으며 토글 또는 닫기 버튼을 통해 닫아야 함

 

쉽게 이해가 됐으니 다음 항목으로~

 

 

5. Popover Styling 팝오버 스타일링

 

팝오버의 등장과 함께 스타일링도 새롭게 등장한 게 있는 것 같다.

우선 ::backdrop을 사용하면 팝오버 외부 배경색의 변화를 쉽게 줄 수 있는 것 같다.

흔히 Dialog를 띄울 때 배경색이 반투명이 되거나 어두워지는데 이를 쉽게 스타일링할 수 있을 것 같다.

 

<div id="size-guide" popover>
  <button class="close-btn" popovertarget="size-guide" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <p class="sr-only">Close</p>
  </button>
  {/* ... */}
</div>

-----css-----
#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

 

🛑 팝오버 Popover vs 다이얼로그 Dialog

비슷하게 디자인을 하면 거의 똑같다고 생각할 수 있지만 차이점이 있다.

- popover는 외부 클릭으로 닫기를 지원하는데, dialog 모달은 외부 클릭으로 닫기를 지원하지 않음

- dialog는 페이지의 나머지 부분을 비활성 상태로 만들지만 popover는 그렇지 않음

 

 

6. Popover의 Next Step

 

팝오버는 다음 기능으로 팝오버 안에 애니메이션 적용이 가능하게 한다고 한다. 현재는 안되나 보다.

애니메이션이 적용된다면 팝오버가 부드럽게 표시되고 사라지는 효과를 줄 수 있을 듯 하다.

 

앵커 포지셔닝도 가능해질 것이라고 한다.

팝오버는 무언갈 클릭했을 때 그 위나 옆에 overlay로 뜨게끔 하는 UI로도 많이 사용할텐데 (예를 들어 툴팁),

상대적으로 위치를 지정할 수 있게 하는 것이 앵커 포지셔닝이다.

 

<button id="menu-toggle" popovertarget="menu-items">Open Menu</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

 

popover가 적용된 태그에 anchor 속성으로 popovertarget이 되는 id를 넣어보자. 그리고 css 설정을 하면 된다.

 

 

#menu-items {
  bottom: calc(anchor(bottom));
  left: anchor(center);
  translate: -50% 0;
}

 

연결된 요소를 기준으로 잡고 디자인이 가능하게 된 것이다. 아주 좋다!

 

 

 

 

 

 

 

 

새롭게 추가된 팝오버 API에 대해 살펴보았다. 실무에 적용도 한번 해보고 싶은데 기회가 생길지는 잘 모르겠다.

 

늘 좋은 자료를 제공해주는 분들께 감사하다. 꾸준히 공부하자!

 

 

https://ykss.netlify.app/translation/introducing_the_popover_api/
https://developer.chrome.com/blog/introducing-popover-api/