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

효과적인 이미지 구성요소 빌드

이미지 구성요소는 성능 권장사항을 캡슐화하며, 이미지 최적화를 위한 즉시 사용 가능한 솔루션을 제공합니다.

Leena Sohoni

Kara Erickson

Alex Castle

이미지는 웹 애플리케이션에서 성능 병목 현상의 일반적인 원인이며 최적화의 핵심 영역입니다. 최적화되지 않은 이미지는 페이지 부풀림에 기여하며 90번째 백분위수(^th)에서 총 페이지 크기(바이트)의 70% 이상을 차지합니다. 이미지를 최적화하는 다양한 방법으로 성능 솔루션이 기본으로 포함된 지능형 '이미지 구성요소'가 필요합니다.

Aurora팀은 Next.js를 사용하여 이러한 구성요소 하나를 빌드했습니다. 웹 개발자가 추가로 맞춤설정할 수 있는 최적화된 이미지 템플릿을 만드는 것이 목표였습니다. 이 구성요소는 좋은 모델이 되며 다른 프레임워크, 콘텐츠 관리 시스템 (CMS), 기술 스택에서 이미지 구성요소를 빌드하기 위한 표준을 설정합니다. Google은 Nuxt.js용과 유사한 구성요소를 공동으로 개발했으며 향후 버전의 이미지 최적화를 위해 Angular와 협력하고 있습니다. 이 게시물에서는 Next.js 이미지 구성요소를 설계한 방법과 그 과정에서 얻은 교훈을 설명합니다.

이미지의 확장으로서의 이미지 구성요소

이미지 최적화 문제 및 기회

이미지는 실적뿐만 아니라 비즈니스에도 영향을 미칩니다. 페이지의 이미지 수는 웹사이트 방문 사용자의 두 번째로 전환을 예측하는 요인입니다. 사용자가 전환한 세션에는 전환하지 않은 세션보다 이미지가 38% 적었습니다. Lighthouse는 권장사항 감사의 일환으로 이미지를 최적화하고 웹 바이탈을 개선할 수 있는 여러 기회를 나열합니다. 이미지가 핵심 웹 성능 및 사용자 환경에 영향을 줄 수 있는 일반적인 영역은 다음과 같습니다.

크기가 조정되지 않은 이미지로 인해 CLS가 저하됨

크기가 지정되지 않은 이미지를 게재하면 레이아웃이 불안정해지고 누적 레이아웃 변경 (CLS)이 커질 수 있습니다. img 요소에 width 및 height 속성을 설정하면 레이아웃 전환을 방지하는 데 도움이 됩니다. 예를 들면 다음과 같습니다.

<img src="flower.jpg" width="360" height="240">

너비와 높이는 렌더링된 이미지의 가로세로 비율이 자연 가로세로 비율에 근접하도록 설정해야 합니다. 가로세로 비율에 큰 차이가 있으면 이미지가 왜곡될 수 있습니다. CSS에서 aspect-ratio를 지정할 수 있는 비교적 새로운 속성을 사용하면 CLS를 방지하면서 이미지 크기를 반응형으로 조절할 수 있습니다.

큰 이미지는 LCP에 손상을 줄 수 있습니다.

이미지의 파일 크기가 클수록 다운로드하는 데 시간이 더 오래 걸립니다. 큰 이미지는 페이지의 '히어로' 이미지이거나 최대 콘텐츠 렌더링 시간 (LCP)을 트리거하는 표시 영역에서 가장 중요한 요소일 수 있습니다. 중요한 콘텐츠의 일부이며 다운로드하는 데 시간이 오래 걸리는 이미지는 LCP를 지연시킵니다.

많은 경우 개발자는 더 나은 압축과 반응형 이미지를 사용하여 이미지 크기를 줄일 수 있습니다. <img> 요소의 srcset 및 sizes 속성을 사용하면 다양한 크기의 이미지 파일을 제공할 수 있습니다. 그러면 브라우저에서 화면 크기와 해상도에 따라 적합한 이미지를 선택할 수 있습니다.

이미지 압축이 잘못되면 LCP가 저하될 수 있습니다.

AVIF 또는 WebP와 같은 최신 이미지 형식은 일반적으로 사용되는 JPEG 및 PNG 형식보다 더 나은 압축을 제공할 수 있습니다. 압축을 개선하면 동일한 이미지 품질로 파일 크기가 25~50% 줄어드는 경우도 있습니다. 이렇게 하면 데이터 소비량이 줄어들고 다운로드 속도가 빨라집니다. 앱은 이러한 형식을 지원하는 브라우저에 최신 이미지 형식을 제공해야 합니다.

불필요한 이미지를 로드하면 LCP가 저하됨

스크롤을 내려야 보이는 이미지 또는 표시 영역에 없는 이미지는 페이지가 로드될 때 사용자에게 표시되지 않습니다. LCP에 기여하지 않고 지연시키지 않도록 지연시킬 수 있습니다. 지연 로드를 사용하면 사용자가 이미지를 향해 스크롤할 때 나중에 이러한 이미지를 로드할 수 있습니다.

최적화 문제

팀은 앞서 나열된 문제로 인한 성능 비용을 평가하고 이를 극복하기 위한 권장사항 솔루션을 구현할 수 있습니다. 그러나 실제로 이러한 경우는 자주 발생하지 않으며, 비효율적인 이미지로 인해 계속해서 웹 속도가 느려집니다. 여기에는 다음과 같은 여러 이유가 있을 수 있습니다.

우선순위: 웹 개발자는 일반적으로 코드, JavaScript, 데이터 최적화에 중점을 둡니다. 따라서 이미지 관련 문제나 이미지를 최적화하는 방법을 인지하지 못할 수 있습니다. 디자이너가 만들었거나 사용자가 업로드한 이미지는 우선순위 목록에서 높지 않을 수 있습니다.
즉시 사용 가능한 솔루션: 개발자가 이미지 최적화의 미묘한 차이점을 알고 있더라도 프레임워크 또는 기술 스택에 사용할 수 있는 올인원 즉시 사용 가능한 솔루션이 없으면 주저하게 될 수 있습니다.
동적 이미지: 애플리케이션의 일부인 정적 이미지 외에도 사용자가 업로드하거나 외부 데이터베이스 또는 CMS에서 동적 이미지를 가져옵니다. 이미지 소스가 동적일 때 이러한 이미지의 크기를 정의하기 어려울 수 있습니다.
마크업 오버로드: 이미지 크기 또는 다양한 크기의 srcset를 포함하는 솔루션에는 모든 이미지에 대한 추가 마크업이 필요하며 이는 지루할 수 있습니다. srcset 속성은 2014년에 도입되었지만 현재 26.5%의 웹사이트에서만 사용되고 있습니다. srcset를 사용할 때 개발자는 다양한 크기의 이미지를 만들어야 합니다. just-gimme-an-img와 같은 도구를 사용할 수 있지만 모든 이미지에 수동으로 사용해야 합니다.
브라우저 지원: AVIF 및 WebP와 같은 최신 이미지 형식은 더 작은 이미지 파일을 생성하지만 이를 지원하지 않는 브라우저에서는 특별한 처리가 필요합니다. 개발자는 이미지가 모든 브라우저에 게재되도록 콘텐츠 협상 또는 <picture> 요소와 같은 전략을 사용해야 합니다.
지연 로드 정보 표시: 스크롤해야 볼 수 있는 부분의 이미지에 지연 로드를 구현하는 데 사용할 수 있는 여러 기법과 라이브러리가 있습니다. 가장 적합한 방법을 선택하는 것은 쉽지 않을 수 있습니다. 또한 개발자가 지연된 이미지를 로드하기 위한 '접힘'에서의 최적 거리를 알지 못할 수도 있습니다. 기기의 뷰포트 크기가 다르면 더욱 복잡해질 수 있습니다.
환경 변화: 브라우저에서 성능을 개선하기 위해 새로운 HTML 또는 CSS 기능을 지원하기 시작하면 개발자가 각각의 기능을 평가하기 어려울 수 있습니다. 예를 들어 Chrome에서는 오리진 트라이얼로 가져오기 우선순위 기능을 도입하고 있습니다. 페이지에서 특정 이미지의 우선순위를 높이는 데 사용할 수 있습니다. 전반적으로 이러한 개선사항은 구성요소 수준에서 평가되고 구현되면 개발자가 더 쉽게 사용할 수 있습니다.

솔루션으로 이미지 구성요소 사용

이미지를 최적화할 수 있는 기회와 모든 애플리케이션에 개별적으로 구현하는 데 따르는 어려움으로 인해 이미지 구성요소라는 아이디어가 떠올랐습니다. 이미지 구성요소는 권장사항을 캡슐화하고 적용할 수 있습니다. <img> 요소를 이미지 구성요소로 대체하면 개발자가 이미지 성능 문제를 더 잘 해결할 수 있습니다.

지난 1년 동안 Google은 Next.js 프레임워크를 사용하여 이미지 구성요소를 설계하고 구현했습니다. 다음과 같이 Next.js 앱의 기존 <img> 요소를 대체하는 일시적인(drop-in) 교체용으로 사용할 수 있습니다.

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

이 구성요소는 다양한 기능과 원칙을 통해 이미지 관련 문제를 전반적으로 해결하려고 합니다. 또한 개발자가 다양한 이미지 요구사항에 맞게 맞춤설정할 수 있는 옵션도 포함되어 있습니다.

레이아웃 변경으로부터 보호

앞서 설명한 대로 크기가 지정되지 않은 이미지는 레이아웃 변경을 일으키고 CLS에 기여합니다. Next.js 이미지 구성요소를 사용할 때 개발자는 레이아웃 전환을 방지하기 위해 width 및 height 속성을 사용하여 이미지 크기를 제공해야 합니다. 크기를 알 수 없는 경우 개발자는 layout=fill를 지정하여 크기가 지정된 컨테이너 내에 있는 크기가 지정되지 않은 이미지를 게재해야 합니다. 또는 정적 이미지 가져오기를 사용하여 빌드 시 하드 드라이브의 실제 이미지 크기를 가져와 이미지에 포함할 수 있습니다.

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

개발자는 크기가 지정되지 않은 Image 구성요소를 사용할 수 없으므로 이미지 크기를 고려하고 레이아웃 전환을 방지하는 데 시간을 할애하게 됩니다.

응답성 촉진

개발자는 기기 전반에서 이미지가 반응형이 되도록 <img> 요소에 srcset 및 sizes 속성을 설정해야 합니다. Google은 Image 구성요소를 사용하여 이러한 작업을 줄이고자 했습니다. Next.js Image 구성요소는 애플리케이션당 한 번만 속성 값을 설정하도록 설계되었습니다. 레이아웃 모드를 기반으로 Image 구성요소의 모든 인스턴스에 적용합니다. YouTube는 다음과 같은 세 가지 솔루션을 마련했습니다.

deviceSizes 속성: 이 속성을 사용하면 애플리케이션 사용자층에 공통적인 기기를 기반으로 일회성으로 브레이크포인트를 구성할 수 있습니다. 중단점의 기본값은 구성 파일에 포함되어 있습니다.
imageSizes 속성: 기기 크기 브레이크포인트에 해당하는 이미지 크기를 가져오는 데 사용되는 구성 가능한 속성입니다.
각 이미지의 layout 속성: 각 이미지에 deviceSizes 및 imageSizes 속성을 사용하는 방법을 나타내는 데 사용됩니다. 지원되는 레이아웃 모드 값은 fixed, fill, intrinsic, responsive입니다.

레이아웃 모드 responsive 또는 fill로 이미지가 요청되면 Next.js는 페이지를 요청하는 기기의 크기를 기반으로 게재할 이미지를 식별하고 이미지에서 srcset 및 sizes를 적절하게 설정합니다.

다음 비교는 레이아웃 모드를 사용하여 다양한 화면에서 이미지 크기를 제어하는 방법을 보여줍니다. Next.js 문서에 공유된 데모 이미지를 사용했으며 휴대전화와 표준 노트북에서 확인했습니다.

다른 레이아웃에 맞게 렌더링된 이미지
노트북 화면	휴대전화 화면
레이아웃 = 기본: 작은 표시 영역에서 컨테이너 너비에 맞게 축소됩니다. 더 큰 뷰포트에서는 이미지의 고유 크기를 초과하여 확대되지 않습니다. 컨테이너 너비가 100%임

레이아웃 = 고정: 이미지가 반응하지 않습니다. 너비와 높이는 렌더링되는 기기와 관계없이 `` 요소와 비슷하게 고정됩니다.

Layout = Responsive(레이아웃 = 반응형): 가로세로 비율을 유지하면서 다양한 표시 영역의 컨테이너 너비에 따라 축소 또는 확대합니다.

레이아웃 = 채우기: 상위 컨테이너를 채울 수 있도록 확장된 너비와 높이입니다. (이 예에서는 상위 `<div>` 너비가 300*500으로 설정됨)

기본 제공 지연 로드

이미지 구성요소는 성능 기준에 맞는 지연 로드 솔루션을 기본으로 제공합니다. <img> 요소를 사용할 때 지연 로드에는 몇 가지 옵션이 있지만 모두 사용하기 어려운 단점이 있습니다. 개발자는 다음과 같은 지연 로드 접근 방식 중 하나를 채택할 수 있습니다.

loading 속성을 지정합니다. 이 속성은 모든 최신 브라우저에서 지원됩니다.
Intersection Observer API 사용: 맞춤 지연 로드 솔루션을 빌드하려면 노력과 사려 깊은 설계 및 구현이 필요합니다. 개발자에게는 항상 이 작업을 할 시간이 있는 것은 아닙니다.
이미지를 지연 로드하기 위해 서드 파티 라이브러리 가져오기: 지연 로드에 적합한 서드 파티 라이브러리를 평가하고 통합하는 데 추가 작업이 필요할 수 있습니다.

Next.js 이미지 구성요소에서 로드는 기본적으로 "lazy"로 설정됩니다. 지연 로드는 대부분의 최신 브라우저에서 사용할 수 있는 Intersection Observer를 사용하여 구현됩니다. 개발자는 이 기능을 사용 설정하기 위해 별도로 취해야 할 조치는 없지만 필요한 경우 사용 중지할 수 있습니다.

중요한 이미지 미리 로드

LCP 요소는 이미지인 경우가 많으며 큰 이미지는 LCP를 지연시킬 수 있습니다. 브라우저가 해당 이미지를 더 빨리 발견할 수 있도록 중요한 이미지를 미리 로드하는 것이 좋습니다. <img> 요소를 사용하는 경우 다음과 같이 HTML 헤더에 미리 로드 힌트가 포함될 수 있습니다.

<link rel="preload" as="image" href="important.png">

잘 설계된 이미지 구성요소는 사용되는 프레임워크와 관계없이 이미지 로드 시퀀스를 조정하는 방법을 제공해야 합니다. Next.js 이미지 구성요소의 경우 개발자는 이미지 구성요소의 priority 속성을 사용하여 미리 로드하기에 적합한 이미지를 나타낼 수 있습니다.

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

priority 속성을 추가하면 마크업이 간소화되고 사용이 더 편리해집니다. 이미지 구성요소 개발자는 특정 기준을 충족하는 페이지의 스크롤 영역 위 이미지의 미리 로드를 자동화하는 휴리스틱을 적용하는 옵션을 살펴볼 수도 있습니다.

고성능 이미지 호스팅 권장

이미지 최적화를 자동화하려면 이미지 CDN을 사용하는 것이 좋습니다. CDN은 WebP 및 AVIF와 같은 최신 이미지 형식도 지원합니다. Next.js 이미지 구성요소는 기본적으로 로더 아키텍처를 사용하여 이미지 CDN을 사용합니다. 다음 예는 로더가 Next.js 구성 파일에서 CDN 구성을 허용하는 것을 보여줍니다.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

이 구성을 통해 개발자는 이미지 소스에서 상대 URL을 사용할 수 있으며, 프레임워크는 상대 URL을 CDN 경로와 연결하여 절대 URL을 생성합니다. Imgix, Cloudinary, Akamai와 같은 인기 이미지 CDN이 지원됩니다. 이 아키텍처는 앱에 맞춤 loader 함수를 구현하여 맞춤 클라우드 제공업체의 사용을 지원합니다.

자체 호스팅 이미지 지원

웹사이트에서 이미지 CDN을 사용할 수 없는 경우가 있을 수 있습니다. 이 경우 이미지 구성요소는 자체 호스팅 이미지를 지원해야 합니다. Next.js 이미지 구성요소는 이미지 최적화 도구를 CDN과 유사한 API를 제공하는 내장 이미지 서버로 사용합니다. 옵티마이저는 서버에 설치된 경우 프로덕션 이미지 변환에 Sharp를 사용합니다. 이 라이브러리는 자체 이미지 최적화 파이프라인을 빌드하려는 사용자에게 적합합니다.

점진적 로드 지원

프로그레시브 로드는 실제 이미지가 로드되는 동안 일반적으로 훨씬 낮은 품질의 자리표시자 이미지를 표시하여 사용자의 관심을 유지하는 데 사용되는 기법입니다. 인지된 성능을 개선하고 사용자 환경을 향상시킵니다. 화면 아래 이미지 또는 화면 위 이미지의 지연 로드와 함께 사용할 수 있습니다.

Next.js 이미지 구성요소는 placeholder 속성을 통해 이미지의 점진적 로드를 지원합니다. 이는 실제 이미지가 로드되는 동안 저화질 또는 흐리게 처리된 이미지를 표시하기 위한 LQIP (저화질 이미지 자리표시자)로 사용할 수 있습니다.

영향

이러한 최적화가 모두 통합된 결과, 프로덕션에서 Next.js 이미지 구성요소가 성공을 거두었으며 유사한 이미지 구성요소에서 다른 기술 스택과도 협력하고 있습니다.

Leboncoin은 기존 JavaScript 프런트엔드를 Next.js로 마이그레이션하면서 Next.js 이미지 구성요소를 사용하도록 이미지 파이프라인도 업그레이드했습니다. <img>에서 next/image로 이전한 페이지에서 LCP가 2.4초에서 1.7초로 감소했습니다. 페이지에 대해 다운로드된 총 이미지 바이트 수가 663KB에서 326KB로 감소했으며, 이 중 레이지 로드된 이미지 바이트는 약 100KB였습니다.

교훈

Next.js 앱을 만드는 모든 사용자가 최적화를 위해 Next.js 이미지 구성요소를 사용할 수 있습니다. 하지만 다른 프레임워크나 CMS에 유사한 성능 추상화를 빌드하려는 경우 다음은 그 과정에서 얻은 몇 가지 유용한 교훈입니다.

안전 밸브가 도움이 되기보다는 해가 될 수 있습니다.

Next.js 이미지 구성요소의 초기 출시에서는 개발자가 크기 요구사항을 우회하고 지정되지 않은 크기의 이미지를 사용할 수 있는 unsized 속성을 제공했습니다. 이미지의 높이나 너비를 미리 알 수 없는 경우에 이 기능이 필요하다고 생각했습니다. 하지만 CLS를 악화시키지 않는 방식으로 문제를 해결할 수 있는 경우에도 GitHub 문제에서 크기 요구사항 관련 문제의 해결 방법으로 unsized 속성을 추천하는 사용자를 발견했습니다. 이후 unsized 속성이 지원 중단되고 삭제되었습니다.

유용한 불편함과 무의미한 불편함 구분

이미지 크기 조정 요구사항은 '유용한 불편함'의 예입니다. 구성요소 사용을 제한하지만 그 대신 상당한 성능 이점을 제공합니다. 사용자는 잠재적인 성능 이점을 명확하게 파악하면 제약 조건을 기꺼이 수용합니다. 따라서 구성요소에 관한 문서 및 기타 게시된 자료에서 이러한 절충점을 설명하는 것이 좋습니다.

하지만 성능 저하 없이 이러한 문제를 해결하는 방법을 찾을 수 있습니다. 예를 들어 Next.js 이미지 구성요소를 개발하는 과정에서 로컬에 저장된 이미지의 크기를 조회하는 것이 불편하다는 불만이 접수되었습니다. Babel 플러그인을 사용하여 빌드 시간에 로컬 이미지의 크기를 자동으로 검색하여 이 프로세스를 간소화하는 정적 이미지 가져오기를 추가했습니다.

편의 기능과 성능 최적화 간의 균형 유지

이미지 구성요소가 사용자에게 '유용한 불편함'만 주는 경우 개발자는 이를 사용하고 싶어 하지 않을 것입니다. 이미지 크기 조정 및 srcset 값의 자동 생성과 같은 성능 기능이 가장 중요하다는 사실이 확인되었습니다. 자동 지연 로드 및 기본 제공 흐리게 처리된 자리표시자와 같은 개발자 대상 편의 기능도 Next.js 이미지 구성요소에 대한 관심을 불러일으켰습니다.

채택을 유도하기 위한 기능 로드맵 설정

모든 상황에 완벽하게 작동하는 솔루션을 빌드하는 것은 매우 어렵습니다. 75% 의 사용자에게 잘 작동하는 디자인을 만든 후 나머지 25% 의 사용자에게 '이 경우 이 구성요소는 적합하지 않습니다'라고 말하고 싶을 수 있습니다.

실제로 이 전략은 구성요소 디자이너로서의 목표와 상충하는 것으로 나타납니다. 개발자가 구성요소의 성능 이점을 누리도록 구성요소를 채택하도록 유도하려고 합니다. 이전할 수 없고 대화에서 소외감을 느끼는 사용자가 있는 경우 이를 실행하기는 어렵습니다. 실망감을 표현할 가능성이 높아 채택에 부정적인 인식을 줄 수 있습니다.

장기적으로 모든 합리적인 사용 사례를 다루는 구성요소 로드맵을 만드는 것이 좋습니다. 또한 구성요소가 해결하려는 문제에 대한 기대치를 설정하기 위해 문서에서 지원되지 않는 항목과 그 이유를 명시하는 것이 좋습니다.

결론

이미지 사용 및 최적화는 복잡합니다. 개발자는 뛰어난 사용자 환경을 보장하면서 이미지의 성능과 품질 사이에서 균형을 찾아야 합니다. 따라서 이미지 최적화는 비용이 많이 들고 효과가 큰 작업입니다.

Google에서는 각 앱이 매번 똑같은 작업을 반복하지 않도록 개발자, 프레임워크, 기타 기술 스택이 자체 구현의 참고 자료로 사용할 수 있는 권장사항 템플릿을 마련했습니다. 이 경험은 Google에서 이미지 구성요소에 다른 프레임워크를 지원할 때 매우 유용하게 활용될 것입니다.

Next.js 이미지 구성요소를 통해 Next.js 애플리케이션의 성능 결과가 개선되어 사용자 환경이 개선되었습니다. 이 모델은 더 광범위한 생태계에서 잘 작동하는 훌륭한 모델이라고 생각하며, 이 모델을 프로젝트에 도입하고자 하는 개발자의 의견을 기다리고 있습니다.