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

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

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

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

이미지 최적화 문제 및 기회

이미지는 성능뿐만 아니라 비즈니스에도 영향을 미칩니다. 페이지의 이미지 수는 웹사이트 방문 사용자의 전환을 가장 크게 예측한 값이었습니다. 사용자가 전환한 세션은 전환하지 않은 세션보다 이미지가 38% 더 적었습니다. Lighthouse는 권장사항 감사 과정에서 이미지를 최적화하고 웹 바이탈을 개선할 수 있는 여러 기회를 제시합니다. 이미지가 코어 웹 바이탈 및 사용자 환경에 영향을 줄 수 있는 몇 가지 일반적인 영역은 다음과 같습니다.

크기가 지정되지 않은 이미지가 CLS를 손상시킴

크기를 지정하지 않고 게재된 이미지는 레이아웃이 불안정해지며 레이아웃 변경 횟수 (CLS)가 높아질 수 있습니다. img 요소에 width 및 height 속성을 설정하면 레이아웃 변경을 방지할 수 있습니다. 예를 들면 다음과 같습니다.

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

너비와 높이는 렌더링된 이미지의 가로세로 비율이 자연스러운 가로세로 비율에 가까워지도록 설정해야 합니다. 가로세로 비율의 차이가 크면 이미지가 왜곡되어 보일 수 있습니다. CSS의 가로세로 비율을 지정할 수 있는 비교적 새로운 속성은 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 프레임워크를 사용하여 이미지 구성요소를 설계하고 implement했습니다. 다음과 같이 Next.js 앱에서 기존 <img> 요소의 드롭인 대체로 사용할 수 있습니다.

// 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" />
}

개발자는 크기가 지정되지 않은 이미지 구성요소를 사용할 수 없으므로 디자인에 따라 이미지 크기 조정을 고려하고 레이아웃 변경을 방지할 수 있습니다.

신속한 대응

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

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

이미지가 레이아웃 모드 반응형 또는 채우기로 요청되면 Next.js는 페이지를 요청하는 기기의 크기에 따라 제공할 이미지를 식별하고 이미지에 srcset 및 sizes를 적절하게 설정합니다.

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

기본 제공 지연 로드 제공

이미지 구성요소는 기본 제공되는 뛰어난 성능의 지연 로드 솔루션을 기본 제공합니다. <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은 이미지 최적화 자동화에 권장되며 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를 제공하는 기본 제공 이미지 서버로 이미지 최적화 도구를 사용합니다. 옵티마이저가 서버에 설치된 경우 프로덕션 이미지 변환에 선명하게를 사용합니다. 이 라이브러리는 자체 이미지 최적화 파이프라인을 빌드하려는 모든 사용자에게 적합합니다.

프로그레시브 로드 지원

프로그레시브 로드는 일반적으로 실제 이미지가 로드되는 동안 품질이 훨씬 낮은 자리표시자 이미지를 표시하여 사용자의 관심을 유지하는 데 사용되는 기법입니다. 인지된 성능을 개선하고 사용자 환경을 향상합니다. 스크롤해야 볼 수 있는 부분의 이미지 또는 스크롤 없이 볼 수 있는 부분에 있는 이미지의 지연 로드와 함께 사용할 수 있습니다.

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

영향

위의 모든 최적화가 통합됨에 따라 프로덕션 환경에서 Next.js Image 구성요소를 성공적으로 사용할 수 있었으며 유사한 이미지 구성요소에 관한 다른 기술 스택과도 협력하고 있습니다.

Leboncoin은 기존 JavaScript 프런트엔드를 Next.js로 마이그레이션할 때 Next.js 이미지 구성요소를 사용하도록 이미지 파이프라인도 업그레이드했습니다. <img>에서 다음/이미지로 이전된 페이지의 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 Image 구성요소에 관심을 유도했습니다.

도입을 촉진하기 위한 기능 로드맵 설정

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

실제로 이 전략은 컴포넌트 디자이너의 목표와 상충하는 것으로 나타납니다. 개발자가 성능상의 이점을 누리기 위해 구성요소를 채택하기를 원합니다. 이전할 수 없는 사용자가 있고 대화에서 소외감을 느끼는 경우 조치를 취하기가 어렵습니다. 이러한 소비자는 실망을 표출할 가능성이 높기 때문에 도입에 영향을 미치는 부정적인 인식으로 이어질 수 있습니다.

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

결론

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

Google에서는 각 앱이 매번 복잡하게 만드는 대신 개발자, 프레임워크, 기타 기술 스택이 자체 구현을 위한 참조로 사용할 수 있는 권장사항 템플릿을 만들었습니다. 이 경험은 다른 프레임워크를 이미지 구성요소에서 지원할 때 실질적으로 가치 있는 것으로 입증될 것입니다.

Next.js 이미지 구성요소는 Next.js 애플리케이션의 성능 결과를 성공적으로 개선하여 사용자 환경을 향상시켰습니다. Google은 이 모델이 광범위한 생태계에서 잘 작동할 훌륭한 모델이라고 믿고 있으며, 프로젝트에 이 모델을 도입하려는 개발자들의 의견을 듣고자 합니다.