2023년 10월 11일

medium-zoom으로 img 태그에 활력을 불어넣기

kidow

@kidow

태그

NPM

설명

Medium에서 이미지를 클릭해본 적 있나요?

배포

수정일

Oct 26, 2023 11:17 AM

생성일

Oct 11, 2023 02:57 PM

Medium에서 이미지를 클릭해보신 적 있으신가요? 이미지를 클릭하면 이미지가 마치 현실에서 손으로 종이를 집어 눈에 가까이 대는 것처럼 붕 뜨면서 줌이 되는 애니메이션이 실행되는데요,

어떻게 하면 이것을 구현할 수 있는 건지 궁금했었는데 자바스크립트 라이브러리가 있더라구요. 그래서 소개해보려고 합니다.

medium-zoom

medium-zoom이라는 npm 라이브러리를 통해 미디움의 이미지 줌 기능을 사용할 수 있습니다.


npm install medium-zoom

사용법이 여러가지이지만 가장 간단하게 적용할 수 있는 방법이 있습니다. React를 기준으로 다음과 같이 적용하면 끝입니다.


import mediumZoom from 'medium-zoom'

useEffect(() => {
	mediumZoom('[data-zoomable]')
}, [])

<img data-zoomable />

img 태그에 data-zoomable 이라는 속성을 적용한 뒤 mediumZoom 함수 안에 해당 요소 선택자를 지정하면 자동으로 해당 속성이 적용된 모든 img 태그에 마법을 적용합니다.

요소 선택자뿐만 아니라 요소 그 자체를 넣을 수도 있습니다. 배열로도 가능합니다.


// CSS selector
mediumZoom('[data-zoomable]')

// HTMLElement
mediumZoom(document.querySelector('#cover'))

// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'))

// Array
const images = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-zoomable]'),
]

mediumZoom(images)

두 번째 인자로는 줌의 오버레이 스타일을 지정할 수 있습니다.


mediumZoom('[data-zoomable]', { background: 'rgba(0,0,0,0.5)' })

그 외에도 인스턴스를 생성해 동적 메소드로 활용하는 것 또한 가능합니다.


const zoom = mediumZoom('[data-zoomable]')
zoom.open()
zoom.close()
zoom.toggle()

그 외에도 많은 기능들이 있으니 링크를 통해 참고해 보시기 바랍니다. 만든 개발자의 블로그에 가보면 무려 7년 전인 2016년부터 이 라이브러리를 만들고 있었더라구요. 저는 가급적이면 이미지를 보여줄 때 이 라이브러리를 무조건 사용해 보려구요.

참고 링크

npm 라이브러리 : https://www.npmjs.com/package/medium-zoom