서론 > Next JS 프로젝트 중 이미지 최적화 과정에서 Next JS에서 제공하는 blurDataURL을 사용해 이미지가 로딩되는 동안 사용자에게 보여줄 플레이스 홀더를 구현하기로 했다. Next JS를 사용해 랜딩 페이지를 제작하는데, 시안에 이미지가 많이 사용되고 있었을 뿐더러 모든 페이지에서 처음 보여지는 화면이 풀페이지 디자인이여서 SSR 임에도 불구하고 첫 페이지 접속시 빈 화면이 보여지는 문제가 있었다. Next JS는 이미지 최적화를 위해 레이지 로딩, 사이즈 최적화 등 여러 기능을 지원하고 있는데, 그 중 이미지가 로딩되기 전까지 블러 이미지를 띄워주는 blurDataURL 속성을 사용해 사용자에게 이미지가 로딩 중임을 알려주고, 원본 이미지를 추측할 수 있도록 개선하기로 했다. Next JS 이미지 플레이스 홀더 데모 → blurDataURL 사