Angular로 이미지 중단점 관리하기

게시 됨: 2022-03-10
빠른 요약 ↬ BreakPoint Observer라는 내장 Angular 기능은 반응형 이미지를 처리하기 위한 강력한 인터페이스를 제공합니다. 클라우드에서 이미지를 제공, 변환 및 관리할 수 있는 서비스를 살펴보겠습니다. 이러한 강력한 도구를 사용하면 방문자를 잃지 않고 몰입형 시각적 웹 경험을 만드는 데 도움이 됩니다.

웹 개발자로서 우리는 미디어가 풍부할 뿐만 아니라 반응이 빠른 애플리케이션을 만들어야 하는 경우가 많습니다. 이러한 요구 사항이 있다는 것은 최종 사용자에게 최상의 경험을 제공하기를 원하기 때문에 이미지 중단점과 미디어 쿼리로 작업해야 함을 의미합니다. 요구 사항 목록에 추가하면 SPA 및 기타 애플리케이션 유형을 만드는 데 유용한 Angular와 같은 프런트 엔드 프레임워크를 사용해야 할 수도 있습니다.

이 기사에서는 이미지 중단점, 사용 사례 및 실습 예제 전체를 살펴보겠습니다. Angular의 자체 BreakPoint Observer를 사용하여 Angular 애플리케이션에서 구현합니다. 이 접근 방식을 사용하는 동안 이 인기 있는 프레임워크가 앞서 언급한 기술을 원활하게 사용하는 데 도움이 되는 이유도 강조합니다.

이미지 중단점 및 반응형 이미지

반응형 레이아웃의 시대(뷰포트 크기에 따라 중단점을 캡처하고 중단점에 따라 페이지 레이아웃 변경)에서는 레이아웃 후에도 이미지가 올바른 크기로 표시될 수 있는지 확인해야 합니다. 변화. 최신 반응형 웹사이트에서 올바른 이미지를 선택하는 것은 매우 어렵습니다.

개발자가 현재 활용할 수 있는 두 가지 옵션에 대해 논의해 보겠습니다.

점프 후 더! 아래에서 계속 읽기 ↓

srcset

srcset 을 사용하면 렌더링된 <img> 크기와 디스플레이 밀도에 따라 브라우저가 전환하는 이미지 목록을 정의할 수 있습니다.

예를 살펴보겠습니다.

 <img src="tuscany.jpg" />

위에서 w 는 이미지의 픽셀 너비를 나타내는 3개의 이미지를 지정합니다. srcset 과 함께 위의 것을 사용할 때 우리는 또한 sizes 속성을 지정해야 합니다(이것은 사양에 따라 srcset 과 w 를 사용하는 경우 크기 속성도 있어야 하기 때문에 필요합니다). 이 속성의 목적은 무엇입니까? 브라우저는 페이지를 레이아웃하기 전에 소스 세트에서 로드할 리소스를 선택해야 합니다(이미지의 크기를 알기 전에). sizes 는 레이아웃 후에 이미지가 뷰포트 너비의 100%를 차지할 것이라는 브라우저에 대한 힌트로 생각할 수 있습니다( vw 가 참조하는 것). 브라우저는 로드 시간에 실제 뷰포트 너비(이미지의 DPR뿐 아니라)를 알고 있으므로 필요한 리소스 크기를 파악하고 소스 세트에서 하나를 선택하는 수학을 할 수 있습니다.

<picture> 및 <source media=""> 요소 조합을 사용하면 레이아웃 중단점에 있는 것과 같은 미디어 쿼리에 대한 응답으로 이미지 리소스를 전환할 수 있습니다.

이에 대한 예도 살펴보겠습니다.

 <picture> <source media="(min-width: 1440px)"> <source media="(min-width: 900px)"> <source media="(min-width: 600px)"> <img src="../assets/images/tuscany-sm.jpg" /> </picture>

위의 코드를 작은, 중간 및 큰 크기의 원하는 이미지로 로컬로 변경하십시오. 브라우저의 크기를 조정하여 다른 이미지를 얻는 방법에 주목하십시오.

위의 모든 것에서 중요한 점은 특정 중단점에서 이미지를 교체하려는 경우 <picture> 요소를 사용하여 미디어 쿼리를 마크업에 바로 넣을 수 있다는 것입니다.

참고 : <picture> 와 srcset + sizes 의 차이점을 알아보는 데 관심이 있다면 Eric Portis의 훌륭한 기사인 srcset and sizes 를 읽는 것이 좋습니다.

지금까지 순수한 HTML 환경에서 미디어 쿼리와 함께 이미지 중단점을 사용하는 방법에 대해 논의했습니다. 미디어 쿼리를 전혀 지정하지 않고도 이미지 중단점과 해당 중단점에 대한 해당 이미지를 생성하는 편리하고 거의 반자동화된 방법을 사용하는 것이 훨씬 낫지 않을까요? 운 좋게도 Angular에는 우리를 돕는 내장 메커니즘이 있으며 타사 서비스를 사용하여 특정 조건에 따라 적절한 이미지를 동적으로 생성하는 방법도 살펴볼 것입니다.

각도 레이아웃 모듈

Angular는 CDK(Component Dev Kit) 도구 세트에 있는 레이아웃 모듈과 함께 제공됩니다. Angular CDK에는 구성 요소 개발을 지원하기 위해 잘 테스트된 도구가 포함되어 있습니다. CDK의 한 부분은 BreakpointObserver 를 포함하는 레이아웃 모듈입니다. 이 도우미는 미디어 쿼리 중단점에 대한 액세스를 제공합니다. 즉, 브라우저 크기(화면 크기)가 직관적으로 변경될 때 구성 요소(및 해당 콘텐츠)가 변경 사항에 적응할 수 있습니다.

추천 자료 : 레이아웃 모듈

이제 이론을 정리했으므로 비즈니스에 착수하여 반응형 이미지 중단점을 구현하는 응용 프로그램을 만들어 보겠습니다. 이 첫 번째 반복에서는 Angular CLI: ng new bpo 를 통해 애플리케이션의 셸을 만들고 필요한 옵션을 선택합니다.

BreakpointObserver 를 사용하려면 Angular의 CDK 레이아웃 모듈도 설치해야 합니다. npm: npm i @angular/cdk 를 통해 수행할 수 있습니다.

설치 후 원하는 구성 요소에 필요한 import 문을 추가할 수 있습니다.

 // app.component.ts import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

BreakpointObserver 를 사용하여 뷰포트 너비의 변경 사항을 구독할 수 있고 Angular는 편리한 접근자를 제공하므로 미디어 쿼리를 전혀 사용할 필요가 없습니다! 다음을 시도해 보겠습니다.

 // app.component.ts constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle XSmall breakpoint } if (result.breakpoints[Breakpoints.Small]) { // handle Small breakpoint } if (result.breakpoints[Breakpoints.Medium]) { // handle Medium breakpoint } if (result.breakpoints[Breakpoints.Large]) { // handle Large breakpoint } if (result.breakpoints[Breakpoints.XLarge]) { // handle XLarge breakpoint } }); }

앞서 언급했듯이 위의 접근자 속성은 다음과 같은 방식으로 미디어 쿼리를 반영합니다.

  • Breakpoints.XSmall : 최대 너비 = 599.99px
  • Breakpoints.Small : 최소 너비 = 600px 및 최대 너비 = 959.99px
  • Breakpoints.Medium : 최소 너비 = 960px 및 최대 너비 = 1279.99px
  • Breakpoints.Large : 최소 너비 = 1280px 및 최대 너비 = 1919.99px
  • Breakpoints.XLarge : 최소 너비 = 1920px

이제 모든 것이 준비되었으므로 적절한 이미지 생성을 시작할 수 있습니다.

이미지에 대한 반응형 중단점

반응형 이미지를 생성하는 몇 가지 옵션이 있습니다.

  1. 반응형 이미지 중단점 생성기
    이 도구를 사용하여 이미지를 업로드하고 다양한 옵션(예: 생성하려는 이미지 수)을 설정할 수 있습니다. 도구를 실행한 후 생성된 이미지에 대한 시각적 표현을 갖게 되며 앞서 언급한 <picture> 요소를 사용하는 일부 생성된 코드와 함께 zip 파일로 다운로드할 수 있습니다.
  2. 또 다른 솔루션은 gulp-responsive 또는 grunt-responsive-images 와 같이 NPM 리포지토리에서 사용 가능한 일부 패키지를 통해 중단점을 생성하는 프로젝트의 빌드 단계를 만드는 것입니다. 둘 다 운영 체제에 설치해야 하는 추가 라이브러리에 따라 다릅니다. (추가 정보는 해당 저장소를 확인하십시오.)
  3. 또 다른 솔루션은 Cloudinary와 같은 서비스를 사용하여 이미지를 저장하고 요청된 리소스의 URL을 수정하기만 하면 필요한 크기와 형식으로 이미지를 제공하는 것입니다. 이것이 우리에게 가장 유연성을 제공하기 때문에 이것이 우리의 접근 방식이 될 것입니다.

추천 자료 : Eric Portis의 반응형 이미지 중단점 생성기로 아트 디렉션 자동화

원본 이미지를 Cloudinary 계정에 업로드했습니다. 즉, 다음 URL을 통해 해당 이미지에 액세스할 수 있습니다.

 https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg

이것은 우리가 작업할 원본 크기의 원본 및 변경되지 않은 이미지입니다.

훨씬 더 작은 버전을 생성하기 위해 이미지의 URL을 수정할 수 있습니다. 예를 들어 너비가 600픽셀인 이미지를 갖고 싶다면 Cloudinary URL*을 다음과 같이 업데이트할 수 있습니다.

 https://res.cloudinary.com/tamas-demo/image/upload/w_600/breakpoints-article/tuscany.jpg

* URL에 w_600 이 추가되었습니다.

바라건대, 이 시점에서 이 모든 것이 어디로 가고 있는지 알 수 있을 것입니다. 위의 접근 방식을 기반으로 올바른 중단점에 대한 올바른 이미지 생성을 매우 빠르게 시작할 수 있습니다.

Cloudinary를 사용한다는 것은 동일한 이미지의 여러 버전을 생성, 저장 및 관리할 필요가 없다는 것을 의미합니다. Cloudinary에서 즉석에서 수행합니다.

코드를 업데이트해 보겠습니다.

 <!-- app.component.html --> <div> <h1>Current breakpoint: {{ breakpoint }}</h1> <img [src]="imagePath"> </div>
 // app.component.ts import { Component, OnInit } from '@angular/core'; // ... export class AppComponent implements OnInit { imagePath; constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ ... } }

앞에서 언급한 목록에서 관찰할 중단점을 원하는 수만큼 선택할 수 있으며 관찰자가 있으므로 변경 사항을 구독하고 조치를 취할 수 있습니다.

 this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle this case } });

Cloudinary에서 다양한 이미지에 대한 옵션을 처리하기 위해 따라하기 매우 쉬운 접근 방식을 활용합니다. 각 경우에 대해 옵션 변수를 만들고 최종 Cloudinary URL을 업데이트합니다.

구성 요소 정의 상단에 다음을 추가합니다.

 // app.component.ts imagePath; breakpoint; cloudinaryOptions; baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

그리고 첫 번째 if 문에 다음을 추가합니다.

 // app.component.ts let url = this.baseURL.split('/'); let insertIndex = url.indexOf('upload'); const options = 'c_thumb,g_auto,f_auto,q_auto,w_400'; url.splice(insertIndex + 1, 0, options); this.imagePath = url.join('/'); this.breakpoint = Breakpoints.XSmall;

결과는 업데이트된 Cloudinary URL이 됩니다.

 https://res.cloudinary.com/tamas-demo/image/upload/c_thumb,g_auto,f_auto,q_auto,w_400/breakpoints-article/tuscany.jpg

여기서 설정하는 옵션은 무엇입니까?

  • c_thumb (이미지의 썸네일 생성);
  • g_auto (가장 흥미로운 부분에 초점을 맞춥니다. 축소판에서 대성당을 볼 수 있음);
  • f_auto (주어진 브라우저, 즉 Chrome용 WebP에 가장 적합한 형식 제공);
  • q_auto (시각에 영향을 주지 않으면서 이미지의 품질과 전체 크기를 줄입니다);
  • w_400 (이미지 너비를 400px로 설정).

호기심을 위해 원본 이미지 크기를 새로 생성된 이미지와 비교해 보겠습니다. 2.28MB 대 29.08KB!

이제 간단한 작업이 수행되었습니다. 다른 중단점에 대해 다른 옵션을 만들어야 합니다. 즉시 테스트할 수 있도록 StackBlitz에서 샘플 애플리케이션을 만들었습니다(여기에서 미리보기도 볼 수 있음).

결론

데스크탑 및 모바일 장치의 다양성과 오늘날 웹에서 사용되는 미디어의 양은 놀라운 수치에 도달했습니다. 웹 개발자로서 우리는 모든 장치에서 작동하고 시각적 경험에 영향을 미치지 않는 웹 응용 프로그램을 만드는 데 앞장서야 합니다.

올바른 이미지가 올바른 장치(또는 장치의 크기를 조정할 때)에 로드되도록 하는 많은 방법이 있습니다. 이 기사에서는 반응형 이미지를 처리하기 위한 강력한 인터페이스를 제공하는 BreakPoint Observer라는 내장 Angular 기능을 활용하는 접근 방식을 검토했습니다. 또한 클라우드에서 이미지를 제공, 변환 및 관리할 수 있는 서비스도 살펴보았습니다. 이처럼 매력적인 도구를 사용하면 방문자를 잃지 않고 몰입형 시각적 웹 경험을 만들 수 있습니다.