개발자

Next.js 이미지 최적화 방식에 대해 질문이 있습니다.

2024년 03월 14일조회 195

안녕하세요! Next.js 14를 사용해 프로젝트를 진행하던 중 이미지 최적화에 관해 궁금한 점이 생겨서 이 곳에 질문을 남깁니다. 프로젝트를 하며 약 500개의 이미지를 랜덤으로 추천해서 렌더링하는 기능을 구현했습니다. 현재 작업 방식은 프로젝트에서 페이지에서 이미지를 업로드 하는 기능은 필요가 없기에 MongoDB에 이미지 'URL'을 모두 저장하고 클라이언트에서 서버로 요청하면 서버에서 DB에 있는 URL을 리턴해주면 그걸 <img> 태그를 이용해서 화면에 띄우는 방식으로 구현했습니다. 하지만, 이렇게 구현하니 이미지 렌더링 속도가 조금 늦는 현상이 발생해 이를 최적화하고 싶습니다. 제가 생각했던 방법들은 다음과 같은데 어떤 방법이 좋은지, 혹은 더 나은 방법이 있는지 아시는 분이 있으면 추천해주시면 감사하겠습니다. 1. 이미지를 모두 다운받아 public 폴더에 넣고 Next/Image를 사용한다. -> 이 방법을 하려니 사진이 500개가 되고 사진마다 png,jpg 형식도 달라서 적용하는 것도 어려울 것 같고 무엇보다도 프로젝트 파일 사이즈가 커지는게 문제가 될 것 같다는 생각을 했습니다. 만약 사진이 500개가 아니라 1000개 2000개가 된다면 더더욱 그럴 것 같아서요. 이 부분에서 추가로 생각해본 방식이 파일 형식을 모두 avif로 바꾸는건데 그런 접근도 괜찮은건가요? 2. 서버에서 URL 넘어온 그대로 Next/image를 사용한다. -> 모든 파일의 url 형식이 달라서 일일이 next.config.ts에서 설정해주는 게 쉽지않을 것 같다고 생각했습니다. 그래서 모든 파일을 AWS S3에 올려놓으면 URL 주소가 같을테니 그렇게 하는 게 맞는지 궁금했습니다. 아직 제 지식이 짧아서 생각해본 방식은 위와 같은데, 추가로 좀 더 좋은 방식이나 현업에서 사용하는 방식이 있다면 알려주시면 감사하겠습니다. 긴 글 읽어주셔서 감사합니다!!!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

포크코딩님의 프로필 사진

제일 속편한 방법은 CDN을 쓰시면 됩니다. 손은 좀 가지만 필요한 이미지 최적화를 해주는 프로세서가 돌아가는 서버를 중간에 하나 두세요. C++이나 Rust로 작성하면 t4g.medium정도 인스턴스면 잘 돌아 갈겁니다.

이지헌님의 프로필 사진

이지헌

작성자

삼성청년SW아카데미(SSAFY) 웹 개발2024년 03월 18일

답변이 늦어서 죄송합니다 ㅠㅠ 알려주신 방법 한 번 알아보겠습니다. 진심으로 감사합니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 03월 14일

Next.js의 Image 컴포넌트와 image optimization를 활용하면 효과적인 이미지 처리가 가능합니다. 본질적으로 Next.js는 자동으로 이미지의 사이즈를 조절하고, 필요한 경우 웹P 또는 AVIF 같은 최신 형식으로 변환할 수 있습니다. 당신이 제시한 두 가지 방법 중에서, 1. 모든 이미지를 다운로드해서 프로젝트 내에 include하는 방법보다, 2. 서버로부터 URL을 받아서 Next/Image를 이용하는 것이 좀 더 원활하게 작업할 수 있는 방법일 가능성이 큽니다. 왜냐하면 첫 번째 방법은 프로젝트의 크기가 너무 커질 우려가 있으며, 관리도 어렵습니다. 많은 이미지들을 관리하는 것은 번거롭고, 만약 여러분의 서비스가 상당히 많은 이미지 데이터를 다루게 된다면 그 양이 엄청날 수 있습니다. Next.js Image 컴포넌트와 함께 AWS S3 등 외부 저장소를 사용하는 것을 추천합니다. 이렇게 하면 이미지 저장과 관리 부분을 외부에 위임할 수 있으며, Next.js는 각 요청마다 개별적인 이미지 URL에 대해 동적으로 최적화를 처리할 수 있습니다. 단순히 AWS S3에 이미지를 저장하고, 그 URL을 사용하여 Next.js의 Image 컴포넌트에서 렌더링하는 방식으로 접근해보세요. 이렇게 하면 별도의 백엔드 구축 없이 클라우드 기반의 스토리지를 활용해 이미지 파일을 효과적으로 관리할 수 있습니다. 나아가 하나 팁을 드리자면, next.config.js 파일 내에 domains 배열을 수정하여 여러분의 AWS S3 버킷 주소를 추가하실 수 있습니다. 저 이외에 remote 이미지들을 사용하기 위한 추가 설정이 필요하다는 점 유념하세요. 다만, 어떤 방법이든 간에 언제나 최적의 방법은 없으며 자신의 상황에 따라 적합한 해결책을 찾는 것이 중요합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!