팝오버는 웹 어디에나 있습니다. 계정 설정, 공개 위젯, 제품 카드 미리보기와 같은 기능에 사용되는 메뉴, 토글팁, 대화상자에서 팝오버를 볼 수 있습니다. 이러한 구성요소가 얼마나 널리 퍼져 있는지에도 불구하고 브라우저에서 이러한 구성요소를 빌드하는 것은 여전히 놀라울 정도로 번거롭습니다. 이 문제를 해결하기 위해 팝오버를 빌드하기 위한 새로운 선언적 HTML API 세트가 브라우저에 제공될 예정이며, 그중 첫 번째는 팝오버 API입니다.
팝오버는 대화상자와 혼동되는 경우가 많습니다. 하지만 동작에는 몇 가지 중요한 차이점이 있습니다. dialog 요소는 dialog.showModal
(모달 대화상자)로 열린 모달을 닫기 위해 명시적인 사용자 상호작용이 필요한 환경입니다. popover는 light-dismiss를 지원합니다. 모달 dialog는 지원하지 않습니다.
모달 대화상자는 페이지의 나머지 부분을 비활성 상태로 만듭니다. popover는 그렇지 않습니다.
차이점에 관해 자세히 알아보세요.
이 도움말은 전자상거래 회사가 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선한 방법을 설명하는 시리즈의 일부입니다. 이 도움말에서는 Tokopedia가 팝오버 API를 구현하고 활용한 방법을 알아봅니다.
Tokopedia
팝오버 속성을 사용하면 React에서 최대 70% 의 코드 줄이 줄어들었습니다. 모달은 JavaScript에서 이벤트 처리가 필요하고 모달 DOM을
document.body끝으로 이동하기 위해React.createPortal을 사용하는 대신 HTML로 기본적으로 제어할 수 있습니다. 또한@starting-style을 사용하여 팝오버의 열고 닫기를 애니메이션화할 수 있습니다.—Andy Wihalim, 선임 소프트웨어 엔지니어, Tokopedia.
Tokopedia의 제품 세부정보 페이지 (PDP)에는 각 제품에 여러 제품 이미지가 포함되어 있습니다. 제품 썸네일을 클릭하면 모달이 열려 확대된 이미지가 표시됩니다. 이는 이커머스 웹사이트에서 사용되는 일반적인 패턴입니다.
코드
Tokopedia는 프런트엔드 개발에 React를 사용합니다. 이 모달에 팝오버 API를 구현하기 전에 DOM 모달과 버튼을 사용했습니다. 버튼은 React 상태를 변경하여 모달을 열었습니다. 팝오버 API를 사용하면 팝오버를 여는 요소에 팝오버 요소의 ID와 동일한 값을 가진 popovertarget 속성을 지정합니다.
이 기본 구현을 사용하면 팝오버가 작동하지만 애니메이션 없이 나타나고 사라집니다. 팝오버의 부드러운 진입 및 종료 애니메이션을 만들려면 :popover-open 및 @starting-style을 사용하고 개별 속성의 애니메이션을 허용합니다.
다음 코드 예에서는 팝오버가
transform: 'scale()' 속성을 사용하여 확대 및 축소됩니다.
이 코드 예에서는 팝오버 API의 진입 및 종료 애니메이션을 구현하는 방법을 보여줍니다.
<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />
export const cssModalWrapper = css({
background: NN0,
border: 'none',
borderRadius: '.625rem',
width: 1024,
padding: 24,
'&::backdrop': {
opacity: 0,
transitionProperty: 'opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
},
transitionProperty: 'transform, opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
transform: 'scale(0.8)',
opacity: 0,
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
'&:popover-open': {
transform: 'scale(1)',
opacity: 1,
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
},
});
팝오버 API를 지원하지 않는 브라우저를 지원하기 위해 Tokopedia는 팝오버 폴리필을 oddbird에서 구현했습니다. gzip 압축으로 3.2KB에 불과합니다. 폴리필은 잘 작동하고 성능 회귀를 일으키지 않으므로 만족스러웠습니다. 전반적으로 팝오버 API를 사용하여 React에서 최대 70% 의 코드 줄을 줄일 수 있었습니다.
팝오버 API를 사용할 때 고려해야 할 사항
Tokopedia는 React를 사용하며, 팀은 팝오버 구성요소를 사용하지 않는 페이지의 팝오버 구성요소를 마운트 해제한 다음 팝오버 콘텐츠에 코드 분할을 실행하여 코드 분할을 달성했습니다. 이렇게 하면 초기 요청의 크기가 줄어듭니다.
팝오버를 CSS 앵커 포지셔닝 (Chrome에 곧 제공 예정) 과 결합하여 다른 요소를 기준으로 팝오버를 배치하는 것이 좋습니다. 예를 들어 메뉴와 툴팁에 유용합니다.
리소스
- 팝오버 API 소개
- 팝오버와 대화상자의 차이점
- 버그를 신고하거나 새로운 기능을 요청하시겠어요? 여러분의 의견을 기다립니다.
스크롤 기반 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택자와 같은 새로운 CSS 및 UI 기능을 사용하여 이커머스 회사가 얻은 이점을 설명하는 이 시리즈의 다른 도움말을 살펴보세요.