팝오버 우수사례

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

팝오버는 Baseline Newly Available의 일부입니다.

브라우저 지원

  • 114
  • 114
  • 125
  • 17

소스

팝오버는 흔히 대화상자와 혼동됩니다. 그러나 이러한 동작에는 몇 가지 주요 차이점이 있습니다. 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에 곧 출시)와 결합하여 다른 요소를 기준으로 팝오버를 배치해 보세요. 이는 메뉴 및 팁 등을 만들 때 유용합니다.

자료

이 시리즈의 다른 문서에서 스크롤 기반 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 전자상거래 회사가 어떤 이점을 얻었는지 살펴봅니다.