1. 개요

본 프로젝트는 Next.js의 이미지 컴포넌트에서 블러 효과를 구현할 때 필요한 블러 데이터 URL을 자동으로 생성해주는 npm 라이브러리입니다.

Next.js에서 이미지에 placeholder blur 효과를 적용하려면 blurDataURL을 직접 제공하거나 프로젝트마다 해당 URL을 반환하는 함수를 제작하는 과정이 필요한데, 이를 매번 제작하는 것이 번거로웠던 문제를 해결하고자 개발하였습니다.

간단한 내장 함수 호출만으로 이미지 경로를 전달하면 자동으로 적절한 blurDataURL을 생성해주어, 보다 효율적으로 개발자들이 이미지 로딩 UX를 개선할 수 있도록 돕는 것이 이 라이브러리의 핵심입니다.

2. 시스템 구성

next-image-blur는 아래 명령어로 설치할 수 있습니다.

pnpm add next-image-blur

GitHub Workflow를 활용하여 npm 레지스트리에 자동 배포되는 파이프라인을 구성하였습니다.

3. 프로젝트 회고

이 프로젝트의 가장 중요한 의미는 직접 오픈소스 라이브러리를 제작하고 npm에 배포해본 첫 경험이었다는 점입니다.

npm 레지스트리에 배포하는 과정을 경험하면서 라이브러리 개발과 생태계에 대해 조금 더 이해할 수 있었습니다.