어느 스타트업 기술면접에 갔을 때, 웹 사이트를ㄹ 구성하는 수많은 리소스들이 있는 경우 어떻게 최적화하는가에 대한 질문을 받은 적이 있다.
예를 들어, 수십개의 이미지로 구성되어 있을 경우, 그 용량이 상당하므로 동일한 웹 서버에 요청해서 이를 가져오면 로딩 속도가 매우 느려진다.
나의 경우 이미지 최적화에선 사용자가 보이는 이미지 부분만 로딩하는 지연로딩 기법을 언급했지만, 면접관이 요구한 기술은 CDN이었다.
정의
CDN은 컨텐츠 전달 네트워크의 약자 말 그대로, 컨텐츠를 전달하는 네트워크를 구성하는 것이다.
보통 웹사이트를 로드할 때는 웹 서버에 HTTP 요청을 하여 리소스를 가져오지만 웹 서버가 아니라 현재 사용자가 접속한 위치에서 가장 가까운 서버에 리소스를 캐싱해놓고 보다 빠르게 가져오는 기법이다.
물론 CDN 네트워크를 구축하기 위해서 해당되는 지역의 ISP(인터넷 제공 업체, Internet Service Provider), 네트워크 사업자, 이동통신 사업자에게 서버의 호스팅 비용을 지불해야 한다.
이렇게 네트워크를 구축하게 되면 정적 리소스를 더욱 빠른 속도로 서비스할 수 있게 되는 것이다.
(Next.js의 CDN을 이용한 SSG 방식을 사용하고 있다. 정적 페이지를 미리 캐싱해놓고 가져오면 매우 빠를 것이다.)
장점
•
리소스를 캐싱해놓기 때문에 로딩 속도가 빨라진다.
•
1개의 웹서버에서만 리소스를 가져오지 않기 때문에 서버의 부하가 줄어든다.
•
보통 1개의 도메인이 10개의 병렬 연결을 허용하는데 CDN을 사용하면 병렬 연결이 늘어난다.
단점
•
서버 구축 비용이 들게 된다.
•
사용자가 해당 CDN을 막아놓으면 리소스 로딩이 막힌다.
•
배포 과정이 다소 복잡해질 수 있다.
•
보통 CDN 서비스 회사는 각 나라별로 구축하지만, 해외 CDN을 사용하게 되면 느릴 수 있다.
