이 페이지는 Cloud Translation API를 통해 번역되었습니다.

팝오버 우수사례

Swetha Gopalakrishnan

Saurabh Rajpal

팝오버는 웹의 어디에나 있습니다. 메뉴, 전환 도움말, 대화상자에서 확인할 수 있으며 계정 설정, 공개 문구 위젯, 제품 카드 미리보기와 같은 기능에 사용됩니다. 이러한 구성요소가 널리 사용되고 있지만 브라우저에서 빌드하는 것은 여전히 매우 번거롭습니다. 이 문제를 해결하기 위해 브라우저에 팝오버를 빌드하기 위한 새로운 선언적 HTML API 세트가 도입됩니다. 그중 첫 번째가 Popover API입니다.

팝오버는 새로 제공되는 기준의 일부입니다.

브라우저 지원

소스

팝업은 대화상자와 혼동되는 경우가 많습니다. 그러나 동작에는 몇 가지 주요 차이점이 있습니다. dialog.showModal(모달 대화상자)로 열리는 dialog 요소는 모달을 닫으려면 명시적인 사용자 상호작용이 필요한 환경입니다. popover는 빛 닫기를 지원합니다. 모달 dialog은 그렇지 않습니다. 모달 대화상자를 사용하면 페이지의 나머지 부분이 비활성화됩니다. popover는 그렇지 않습니다. 차이점에 대해 자세히 알아보기

이 도움말은 전자상거래 회사가 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선한 방법을 설명하는 시리즈의 일부입니다. 이 도움말에서는 Tokopedia에서 Popover API를 구현하고 이 API를 통해 얻은 이점을 알아봅니다.

Tokopedia

팝오버 속성을 사용하면 React에서 코드 줄이 최대 70% 감소했습니다. 모달은 JavaScript에서 이벤트 처리가 필요하고 React.createPortal를 사용하여 모달 DOM을 document.body의 끝으로 이동하는 대신 HTML로 기본적으로 제어할 수 있습니다. @starting-style를 사용하여 팝오버의 열림과 닫힘에 애니메이션을 적용할 수도 있습니다.—앤디 위할림, Tokopedia 선임 소프트웨어 엔지니어

Tokopedia의 제품 세부정보 페이지 (PDP)에는 각 제품의 여러 제품 이미지가 포함되어 있습니다. 제품 썸네일을 클릭하면 모달이 열려 확대된 이미지가 표시됩니다. 이는 전자상거래 웹사이트에서 일반적으로 사용되는 패턴입니다.

코드

Tokopedia는 프런트엔드 개발에 React를 사용합니다. 이 모달에 popover API를 구현하기 전에 DOM 모달과 버튼을 사용했습니다. 버튼이 모달을 열도록 React 상태를 변경했습니다. popover API를 사용하여 popover 요소의 ID와 동일한 값으로 popover을 여는 요소에 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는 gzip 압축으로 3.2KB에 불과한 oddbird의 popover-polyfill을 구현했습니다. 폴리필이 잘 작동하고 성능 회귀를 일으키지 않아 만족스러웠습니다. 전반적으로 팝오버 API를 사용하여 React에서 코드 줄을 최대 70% 줄일 수 있었습니다.

Tokopedia는 React를 사용하며, 팀은 팝오버를 사용하지 않는 페이지의 팝오버 구성요소를 마운트 해제한 다음 팝오버 콘텐츠의 코드 분할을 실행하여 코드 분할을 실행했습니다. 이렇게 하면 초기 요청의 크기가 줄어듭니다.

팝오버를 CSS 앵커 위치 지정(Chrome에서 곧 제공)과 결합하여 다른 요소를 기준으로 팝오버를 배치하는 것이 좋습니다. 이는 메뉴 및 도움말에 유용합니다.

리소스

Popover API 소개
팝오버와 대화상자의 차이점
버그를 신고하거나 새 기능을 요청하고 싶으신가요? 여러분의 의견을 기다립니다.

스크롤 기반 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 이커머스 기업이 어떤 이점을 얻었는지 설명하는 이 시리즈의 다른 도움말을 살펴보세요.

팝오버 우수사례

Tokopedia

코드

Popover API 사용 시 고려사항

리소스