Next.js와 이미지 최적화
D+48
웹앱을 만들기 위해서 다양한 측면에서 최적화가 필요하다. 오늘 배운 내용은 여럿이 있지만, 그래도 이미지 부분이 좀 더 이해가 가서 해당 내용을 적어본다
이미지 최적화와 webp
책에서는 많은 개념을 다루지만, 그래도 가장 와닿는 것은 파일 포맷에 대한 이야기다. 웹앱의 속도를 빠르게 하기 위해서는 최적화된 자원이 필요하다. 특히나 눈으로 보이는 것이 중요하기 때문에 최적화된 이미지, 최적화된 영상 등등 많은 부분들이 최적화되어야 한다.
나는 사진 찍는 취미를 잠깐 가졌고, 건축과로서 여러 이미지를 만드는 작업을 해보았다. 그러다 보니 자연스럽게 jpeg나 png에 대한 이해도 체험적으로 알고 있다. jpeg를 이야기할 때 손실압축 방식이 란느 표현을 많이 쓴다. 사진을 찍으면 실제 원본이라고 부르는 포맷이 존재한다. 각 제조사별로 다른 포맷을 띄고 있지만 본질적으로는 사진 촬영에 포함된 거의 모든 정보를 담고 있는 파일이다. 이런 파일의 장점은 후보정시 유리하다는 것이다. 다만 파일이 우리가 상상하는 파일 사이즈의 거의 10배는 되기 때문에 상당히 크고 무겁다. 그런 문제로 인해 가볍지만 원본의 정보를 어느 정도 담도록 만든 것이 jpeg이다.
png는 마찬가지로 이미지 포맷이다. 여러 문서를 참고해 보면 Jepg보다 더 높은 화질을 보장하면서도 파일 사이즈가 경량화된다고 이야기한다. 내가 주로 png를 쓴 이유는 투명을 표현할 수 있기 때문이다. 건축과에서 포토샵 등의 작업을 할 때가 많은데, 이런 경우 배경을 정리해 준 png이미지가 무척 중요하다. 안 그러면 한 땀 한 땀 모든 기초 자료를 만들고 포토샵작업을 해야 하는데 상당히 귀찮다.
webp는 이번에 조사하면서 좀 더 깊게 알아보았다. 구글에서 만든 포맷으로 jpeg, png, gif를 대체할 용도로 만들었다고 한다. 원래 많이 쓰이는 파일을 대체하는 큰 포부를 지닌 만큼 여러 장점을 가지고 있다. 유사한 화질 기준으로 png보다는 26%, jepg 보다는 25~34% 작은 파일 사이즈를 가지고 있다. 거꾸로 역산하면 같은 인터넷 속도에서 3~4배 빠르게 이미지를 로딩해 주는 파일이라고 할 수 있다.
next.js에서 이미지 최적화를 위해 필요한 설정
next.js에서 설정을 잘하면 최적화된 이미지를 가져올 수 있다. 그 방법을 살펴보면 다음과 같다.
1. next.config.js설정을 해준다
해당 폴더에 들어가 다음과 같이 설정을 해준다. 여기 예제에서는 이미지를 특정 url에서 불러오는 방식을 가정하고 진행했다. 예를 들면 "images.unsplash.com/"에서 이미지를 가져온다면, domain에 해당 url을 추가해줘야 하는 것이다.
2. next.js의 'Image'컴포넌트를 사용한다
뿌리 깊은 나무는 가뭄에 위태롭지 않다고 했다. 하지만 나는 뿌리 깊은 나무가 아닌 것. 새로운 패턴이 나오면 열심히 찾아봐야 한다. next.js에서는 몇몇 자체 컴포넌트를 제공하고 있다. 그중 "Image" component가 존재한다. 해당 컴포넌트를 이용해 이미지를 불러오기 하면 된다.
3. 페이지로 가서 다운로드를 눌러본다
이렇게 간단하게 되기 때문에 이미지가 webp로 되었는지 알기가 어렵다. 확인하는 방법은 웹페이지로 간 후, 해당 이미지를 우클릭해 다른 이름으로 저장을 눌러보면 된다. 그리고 webp로 다운로드가 뜬다면 성공한 것이라고 나는 결론지었다.
next.js를 계속해보며
프로그램을 배울 때 "xxx best practice" 또는 "how to learn xxx"라고 치면 가장 많이 나오는 답변이 있다. 바로 'Learn by doing'이라는 말이다. 직접 해보면 제일 많이 배운다는 뜻이다. 그런 면에서 지금 작업은 다소 안전한 환경 안에서 하고 있기 때문에 약간은 지루한 감도 있다. 항상 이런 포인트가 오면 나는 프로젝트로 뛰어들곤 한다. 하지만 그래도 일단은 책을 완독 해보고 다음 단계로 나아가 보기로 했다. 독자들도 다소 지루하고 나도 지루한 구간이지만 좀 더 버텨보고 그리고 그다음을 기획하고 해 나가야겠다.
