brunch

You can make anything
by writing

C.S.Lewis

by 루크의 IT이야기 Jul 07. 2020

일일 제한 전송량, 웹 트래픽에 대한 이해

무료 홈페이지 계정을 이용하는 데 있어 여러 조건들이 있는데, 그 중 가장 중요한 것이 바로 일일 전송량 제한이라는 것이다.


일일 전송량이라는 것은 운영하고 있는 웹사이트에서 다운로드 받을 수 있는 파일의 용량이라고 생각하면 아주 쉽다. 일일 전송량 제한이 300Mbyte 라는 이야기는 1Mbyte자료를 300명이 받게 되면 일일 전송량 제한이 되며 10M 용량의 파일의 경우는 30명이 받을 수 있다는 이야기이다.


서비스를 제공하는 업체마다 정책이 다르지만 일반적으로 일일전송량 제한이 초과되면 과감히 일일 전송량 제한이라는 메시지와 함께 더 이상 웹사이트에 접속이 불가하게 된다. 일일 전송량 제한은 다운로드 받는 페이지뿐만이 아니라 각 웹페이지가 브라우저의 화면에 보여지는 모든 것(텍스트, 이미지 등)에 대한 용량을 포함하게 된다.


요즘은 사실 일일 전송량 제한을 두지 않고, 일일 전송량 제한을 넘어설때는 과금을 하는 경우가 대부분이긴하다. AWS 의 경우도 사용하는 서비스에 따라 다르지만 기본적으로 월 100Gbyte 정도의 네트워크 트래픽을 기본으로 제공하고 제한 트래픽을 넘을때마다 일정비용을 청구하게 된다.

따라서, 웹사이트 트래픽에 대한 기본적인 이해는 좀더 저렴한 비용으로 웹서비스를 운영하는데 있어서 아주 중요한 지식이 된다.


웹 서비스 기획자 혹은 PO 가 이런것도 알아야 되냐고 반문할수도 있겠지만, 알아서 나쁜 지식은 없다고 생각한다.


HTML 페이지의 용량이 10Kbyte이고
페이지에 보여지는 모든이미지들의 용량이 50Kbyte,
일일 전송량 제한이 300Mbyte라면
HTML (10Kbyte) + 이미지 용량(50Kbyte) = 60Kbyte
300Mbyte / 60Kbyte = 5,000명


즉, 만들어진 웹 페이지 하나의 총용량이 60Kbyte라면 하루 방문할 수 있는 최대 유저수는 5,000명이라는 이야기가 된다.


그런데 여기에 1Mbyte 자료를 업로드하고 이를 300명의 유저가 1번씩 다운로드 하게된다면? 당연한 이야기지만 하루 최대 가능 유저수는 300명이 될 것이다.


우리가 만드는 대부분의 웹 페이지의 경우 이미지를 포함하게 되면 한 페이지에 대한 용량이 늘어나게 되고 이는 일일 전송량 제한의 문제로 인해 사이트의 접속이 되지 않는 심각한 문제가 발생되게 된다. 따라서 홈페이지를 제작할 때는 한 페이지의 용량을 최소화 해야 하며, 한 페이지의 용량을 최소화 하는 방법은 이미지 사용을 최소화하고 자료는 최대한 압축해서 업로드해야 하는 것이 무료 홈페이지에서 제한 전송량 제한을 해결하는 유일한 방법이다.

일일 제한 전송량의 경우는 모든 무료 홈페이지뿐만이 아니라 웹 호스팅이나 서버 호스팅을 제공하는 모든 서비스에서 적용되는 이야기이다. 요약하면, 일일 전송량 제한, 즉 웹 트래픽은 홈페이지 운영을 위한 비용이 된다.


저렴한 비용 혹은 무료로 일일 제한 전송량에 대한 추가적인 대처 방안은 추후 웹 호스팅의 시대 부분에서 다룰 것이다.


이미지 용량 줄이기, GIF와 JPEG에 대한 이해


과거 플래시가 한창 유행하던 때에는 SWF가 유행하기도 했지만 보통 웹 페이지에서 보여지는 이미지는 대부분 GIF 포맷과 JPEG 포맷과 png 포맷 3가지 형태가 주를 이룬다.


이미지 용량 줄이기의 핵심은 먼저 두 가지의 이미지 포맷에 대한 특성을 이해하고 이를 적절히 활용해야 한다는 것이다.


먼저 각 이미지들의 특징들에 대해 알아보자

위의 이미지들의 특징들을 살펴보면 GIF와 같은 이미지는 버튼이나 로고 또는 제목과같은 다양한 색이 사용되지 않는 곳, 그리고 배경색을 투명하게 만들 필요가 있을 때 사용하고 JPEG와 같은 포맷의 이미지는 사진과 같은 다양한 색이 들어간 이미지에 사용 하는 것이 효과적이다.


그럼 똑같은 이미지를 JPEG와 GIF로 포맷을 다르게 가져갈 때의 용량과 품질을 비교해보자.

위에서 보이는 것처럼 gif 포맷의 경우는 로고와 같이 색을 많이 사용하지 않는 포맷에 서는 품질은 유지되면서 용량은 줄어들지만 배너와 같이 다양한 색이 들어가 있는 이미지의 경우는 품질도 떨어지면서 동시에 용량도 늘어나게 된다. 따라서, 이미지의 특성에 따라 적절히 사용되는 이미지 포맷을 통해 사이트의 용량을 줄일 수 있게 되는 것이다. 


간단히 이미지에 대한 특징을 요약해 보자면

GIF 이미지는 256가지 색으로만 이미지를 표현하게 되고, 애니메이션 효과를 이용할수 있다는 특징이 있고, JPEG 이미지의 경우는 압축율(또는 해상도)에 따라 용량이 달라지게 되는데, 일반적으로 사진등의 용량을 좀더 줄이고 싶을때 많이 활용되는 이미지 포맷이다.


우리가 운영할 사이트에는 하나의 이미지만 존재하는 것이 아니라 수백, 수천 개의 이 미지가 존재하며 적절한 포맷을 활용하게 되면 이미지의 용량을 줄여 전체적인 사이트 의 용량을 줄일 수 있고 이는 결국 웹 트래픽이라는 결과로 나타나고 이는 결국 비용과 직결되게 된다.



홈페이지 용량 줄이기, 프레임을 이용한 웹 페이지


요즘의 홈페이지 제작은 과거와 다르게 프레임을 나눠 홈페이지 정보를 제공하지는 않는다. 프레임 웹사이트가 현재 현격하게 줄어든 이유는 네트워크 트래픽 비용의 감소와 UI의 개선이나 다양한 웹 페이지 캐싱 기술로 없어지긴 했지만 아직까지도 프레임을 이 용한 웹사이트는 홈페이지의 네트워크 트래픽을 줄이는 데 있어서는 어느 정도 도움이 된다.


그럼 지금부터


왜 프레임을 이용한 웹사이트가 웹 트래픽에 도움이 되는지에 대해 알아보도록 하자. 1990년도 초창기의 웹사이트들은 대부분 프레임을 이용하여 웹사이트를 제작하였다. 프레임으로 웹사이트를 제작한 가장 큰 이유 중 하나는 제작의 편리성과 더불어 느린 회선속도였다. 


프레임을 이용한 웹사이트와 프레임 이용하지 않은 웹사이트를 브라우 저가 어떻게 받아들이는지에 대해 간략히 설명해 보도록 하자.



프레임을 이용한 웹사이트의 경우 “Contents 부분”, “Header 부분“, ”Bottoms 부분“은 고정된 형태로 되어 있으며 각 부분에서 메뉴를 선택했을 경우 Detail 부분에 내용만 변경되어 보이게 된다.

이를 다른 말로 설명하면 위와 같은 구성으로 되어있는 프레임 웹사이트의 경우 첫 번째 웹 페이지가 로딩될 때 header 부분, detail 부분, Contents 부분, Bottoms 부분, 프레임정보 부분 총 5개의 웹 페이지가 로딩된다. 각각의 페이지는 이렇게 5개의 페이지가 로딩된 후 새로운 메뉴를 선택하게 될 경우 detail 부분의 페이지만 변경이 되게 되는 것이다.




프레임을 이용한 웹사이트와는 다르게 프레임이 없는 웹사이트의 경우는 두번째 로딩 될 때도 전체 콘텐츠를 다시 한번 로딩하기 때문에 프레임 웹 페이지에 비해 좀더 많은 네트워크 트래픽을 유발하게 된다. 프레임과 프레임이 없는 웹 페이지를 자세히 비교해보면 아래와 같다.



위에서 작성된 표와 마찬가지로 첫번째로 페이지를 로딩했을 때에는 프레임으로 된 웹 사이트가 조금 큰 용량이 보이지만, 두번째로 페이지를 로딩했을 때에는 프레임이 있는 웹 페이지가 더 적은 용량의 네트워크 트래픽을 유발하게 된다. 이러한 이유로 과거 느린 회선이나 고비용의 회선일 때에는 대부분의 웹사이트에서 프 레임을 이용하여 웹사이트를 제작했었다. 하지만 시간이 흐르고 인터넷 회선 및 회선 이용료의 감소, 초고속 인터넷의 도입, 컴퓨터의 속도 향상과 다양한 캐싱 기능의 개발 등으로 위에서 언급한 네트워크 트래픽의 차이가 프레임을 이용한 웹 페이지와 프레임 을 이용하지 않는 웹 페이지와의 차이를 거의 없게 만들었다.


네트워크 트래픽 비용을 생각하면 프레임이 있는 사이트가 더 유용하지만 좀더 멋진 UI 를 가진 웹사이트를 제작하기 위해서는 아무래도 프레임이 없는 웹사이트가 유리하다.


또한 프레임이 있는 웹사이트의 경우 반응형 웹이나 나뉘프레임으로 인해 온전히 하나의 페이지를 모두 사용할 수 없다는 단점이 존재한다. 따라서 특별히 네트워크 트래픽에 대한 이슈가 존재하지 않는다면 프레임이 없는 웹사이트를 제작하는 것이 현재의 트랜드에 맞는 방법이다.

매거진의 이전글 FTP 이용하기

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari