이번 MS AI School 프로젝트를 하면서 생성형 AI 플랫폼 서비스의 프론트엔드를 담당해 구현을 했는데요!생성형 AI 로 만들어진 여러 콘텐츠를 제공하는 서비스인만큼 이미지도 다루고 있었는데그 과정에서 이미지 최적화를 한 경험에 대해 정리하고자 합니다. 문제 상황사실 저는 Next.js 를 기반으로 프론트엔드를 개발하고 있었지만 처음에는 컴포넌트를 사용하지는 않았습니다.그 이유는 Next.js 에서 제공하는 컴포넌트는 자체적으로 최적화를 제공하기 위해 이미지의 크기를 지정을 해줘야 하는데AIDO 서비스에선 사진첩 형태의 Masonry 레이아웃과 반응형 UI로 이미지를 보여주고 있어 크기를 일일이 지정하기 번거로워일단 기본 태그를 사용해보고 개선하기로 했습니다!!개선하지만... 위 gif에서 보..
