AWS 한국 사용자 모임 - 프론트엔드 Next.js 이미지 최적화 소모임 후기

AWS 한국 사용자 모임에서 프론트엔드 소모임이 열린다고 하여 다녀왔다.

AWS 한국 사용자 모임 링크 : https://www.meetup.com/awskrug/

AWSKRUG - AWS한국사용자모임 (서울, 한국(대한민국))

AWS이지만 인프라나 백엔드뿐만 아니라 프론트엔드, 스타트업 등 다양한 주제의 세미나가 열린다.

 

https://www.meetup.com/awskrug/events/292866390

Login to Meetup | Meetup

내가 들었던 강의는 위의 링크에 있는데 내용은 아래와 같다.

회사에서 Next.js를 쓰고 있어서 도움이 될 것 같아 참여해 보았다.

 

■ 발표주제 🎉
발표자: 안건환 님 (CJ올리브영)
주제 : Next.js의 이미지 최적화는 어떻게 동작하는가?

• 부제: Next.js는 왜 Sharp를 추천하는가
• Next.js를 사용하면서 next/image 컴포넌트를 사용하면 이미지 최적화를 자동으로 해준다고 하는데, 어떤 방식으로 next/image 컴포넌트가 동작하는지를 설명하고 데모로 같이 보려고 합니다.
• 그리고 next.js에서 이미지를 사용할 때 운영 환경에서 sharp 라이브러리를 설치하는 것을 추천하는데 추천하는 이유를 데모를 통해서 살펴보고자 합니다.

겸사겸사 당근마켓 라운지도 구경할 수 있었다.

신논현역의 교보문고 본사 건물에 3층을 차지하고 있었는데

규모가 크고 깔끔한 분위기였다.

야근하시는 분들도 조금 보였다 ㅎㅎ

당근이세요?

소모임 캐릭터가 귀엽다 ㅋㅋ

세미나를 들었던 곳은 이런 분위기

당근마켓이 받은 상패들도 보였는데 간지 나더라

 

이제 세미나 내용에 대한 이야기를 해보겠다.

 

1. 발표의 목적

처음에 왜 발표를 하시는가 궁금하여 목적에 대해 귀 기울여 들었다.

자신이 쓰는 기술을 공부하고 싶어서 발표하신다고 하셨다.

(마지막에 다니시는 올리브영 개발팀 채용 광고도 하셨는데 홍보의 목적도 있으셨던 것 같다.)

발표 목차

2. next/image

next/image 는 런타임 때(유저가 해당 이미지 컴포넌트를 뷰포트 안에서 목격할 때) 이미지 최적화가 발생한다.

dist/cache/images 에 최적화된 이미지가 저장되는 것을 데모로 직접 보여주셨다.

이미지가 최적화되면 webp나 avif로 변환된다

 

3. Sharp vs Squoosh

Sharp와 Squoosh는 이미지 최적화 라이브러리인데 next/image 에서 둘 다 사용 가능하다.

Sharp는 따로 설치해야 사용 가능하고, Squoosh는 설치하지 않아도 바로 사용할 수 있다.

참고로 next/image 에서는 Sharp 사용을 추천하고 있다.

출처 : https://nextjs.org/docs/app/building-your-application/deploying#nodejs-server

발표자 분께서는 Sharp를 설치한 프로젝트와 설치하지 않은 프로젝트에서 각각 next/image를 불러와 속도를 비교하셨다.

동일한 이미지이고, 압축된 용량도 비슷했는데 Sharp를 사용했을 때 응답 속도가 6배 빨랐다.

 

	Sharp	Squoosh
장점	Squoosh보다 6배 빠름	편하게 바로 사용 가능 호환성 이슈 없음
단점	설치할 때 호환성 이슈가 있을 수 있음 (M1 칩에서 설치할 때 문제가 있었는데, 해결했다고 함)	Sharp보다 6배 느림
그외	Next.js 에서 사용하길 권장 특허 관련 문제가 있어서 Squoosh보다 더 성능이 좋지만 built-in 되지 않았다고 함

4. AVIF

Alliance for Open Media에서 개발한 이미지 파일 형식

Edge에서는 사용이 불가능하다.

next/image를 사용하면 Request Header에 avif가 사용가능한지 여부가 있어서 호환성 문제없다. -> next/image의 장점!

 

5. next/image vs CDN

이미지 최적화를 할 때 next/image를 쓸 수도 있고, CDN을 이용할 수도 있다.

	next/image	CDN
장점	Request Header에 브라우저 별로 이미지 확장자 사용 가능 여부를 next에서 알아서 처리해줘서 호환성이 좋다. 예를 들어 WEBP가 ios 13 아래 버전에서는 사용이 불가능한데 next/image가 Request Header에 사용가능한 확장자를 알려줘서 호환성 문제가 해결된다.	next/image 대비 트래픽이 적다.
단점	CDN 대비 트래픽이 많다. 원본 이미지, 최적화한 이미지 트래픽이 발생한다. (쉽게 생각하면 트래픽이 2배)	next/image 대비 호환성이 나쁘다.

 

6. 개발자 모임 이야기

1) 다양한 회사 사람들이 모이면서 개발에 대한 열정을 보게 되니 자극을 받았다.

 

2) 새로운 기술에 대한 열정이 생겼다. 사실 현업에서는 새로운 기술을 적용하기가 현실적으로 힘든데, 그래도 새로운 기술을 적용해 보자고 생각해 보는 계기가 되었다.

 

3) 발표자님을 통해 어떻게 자신이 쓰는 기술을 공부하는지 알게 되었다.

a. nextjs에서 이미지 최적화 어떻게 하는지, Sharp와 Squoosh를 데모로 확인

b. nextjs의 오픈 소스를 확인하면서 기술 공부

→ 나도 내가 쓰는 기술들을 이렇게 공부하면 되겠다 생각이 들었다.

 

4) 강의 시작 전에 다 같이 피자를 먹는 시간이 있었는데, 친목 도모보다는 세미나가 중점인 소모임이었다. 짧은 시간이었지만 다른 개발자분들 이야기를 들을 수 있어서 좋았다.

 

다음번에도 궁금한 세미나가 있으면 또 참여해보려고 한다!

 

강의 PPT : https://docs.google.com/presentation/d/12kpH3kBcj691NH0Z05Yj0Wa--JjMUTDaprf-R_7gN2g/edit?usp=sharing 

[AWSKRUG] Next.js의 이미지 최적화는 어떻게 동작하는가? - 외부 공유용