팝오버는 웹 어디에나 있습니다. 계정 설정, 공개 위젯, 제품 카드 미리보기와 같은 기능에 사용되는 메뉴, 전환 팁, 대화상자에서 알림을 확인할 수 있습니다. 이러한 구성요소가 널리 사용되었음에도 불구하고 브라우저에서 구성요소를 빌드하는 것은 여전히 복잡합니다. 이 문제를 해결하기 위해 팝오버 빌드를 위한 새로운 선언적 HTML API 세트가 브라우저에 도입됩니다. 그중 첫 번째는 팝오버 API입니다.
팝오버는 Baseline Newly Available의 일부입니다.
팝오버는 흔히 대화상자와 혼동됩니다. 그러나 이러한 동작에는 몇 가지 주요 차이점이 있습니다. dialog.showModal
(모달 대화상자)로 열리는 dialog
요소는 모달을 닫으려면 명시적인 사용자 상호작용이 필요한 환경입니다. popover
는 라이트 닫기를 지원합니다. 모달 dialog
는 그렇지 않습니다.
모달 대화상자는 페이지의 나머지 부분을 비활성 상태로 만듭니다. popover
는 그렇지 않습니다.
차이점에 대해 자세히 알아보기
이 문서는 전자상거래 회사가 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선한 방법을 설명하는 시리즈의 일부입니다. 이 문서에서는 Tokopedia가 Popover API를 구현하고 이점을 얻은 방법을 살펴봅니다.
Tokopedia
팝오버 속성을 사용하여 React에서 코드 줄을 최대 70% 줄였습니다. 모달은 JavaScript에서 이벤트를 처리해야 하고
React.createPortal
를 사용하여 모달 DOM을document.body
의 끝으로 이동하는 대신 HTML로 기본적으로 제어할 수 있습니다.@starting-style
를 사용하여 팝오버 열기와 닫기에 애니메이션을 적용할 수도 있습니다. 앤디 와이할림, Tokopedia 선임 소프트웨어 엔지니어
Tokopedia의 제품 세부정보 페이지 (PDP)에는 각 제품에 대한 여러 제품 이미지가 포함되어 있습니다. 제품 썸네일을 클릭하면 모달이 열려 확대된 이미지가 표시됩니다. 이는 전자상거래 웹사이트에서 흔히 사용되는 패턴입니다.
코드
Tokopedia는 프런트엔드 개발에 React를 사용합니다. 이 모달의 팝오버 API를 구현하기 전에는 DOM 모달과 버튼을 사용했습니다. 버튼으로 모달이 열리도록 React 상태를 변경했습니다. 팝오버 API를 사용하면 요소에 popovertarget
속성을 지정하여 팝오버 요소의 ID와 동일한 값으로 팝오버를 엽니다.
이 기본 구현에서는 팝오버가 작동하지만 애니메이션 없이 표시되고 사라집니다. 팝오버의 매끄러운 시작 및 종료 애니메이션을 만들려면 :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',
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
transform: 'scale(0.8)',
opacity: 0,
'&:popover-open': {
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
transform: 'scale(1)',
opacity: 1,
},
});
Tokopedia는 팝오버 API를 지원하지 않는 브라우저를 지원하기 위해 gzip 압축 사용 시 3.2KB에 불과한 oddbird의 popover-polyfill을 구현했습니다. 폴리필이 잘 작동하고 성능 저하를 일으키지 않았기 때문에 폴리필은 만족했습니다. 전반적으로 React에서 팝오버 API를 사용하여 코드 줄을 최대 70% 까지 줄일 수 있었습니다.
Popover API 사용 시 고려사항
Tokopedia는 React를 사용하며, 팀은 React를 사용하지 않는 페이지의 팝오버 구성요소를 마운트 해제한 후 팝오버 콘텐츠의 코드를 분할하여 코드 분할을 달성했습니다. 이 방법으로 초기 요청의 크기를 줄였습니다.
팝오버를 CSS 앵커 위치(Chrome에 곧 출시)와 결합하여 다른 요소를 기준으로 팝오버를 배치해 보세요. 이는 메뉴 및 팁 등을 만들 때 유용합니다.
자료
- 팝오버 API 소개
- 팝오버와 대화상자의 차이점
- 버그를 신고하고 싶으신가요, 아니면 새로운 기능을 요청하고 싶으신가요? 여러분의 의견을 들려주세요.
이 시리즈의 다른 문서에서 스크롤 기반 애니메이션, 팝오버, 컨테이너 쿼리, has()
선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 전자상거래 회사가 어떤 이점을 얻었는지 살펴봅니다.