‘불편했던 상세페이지 뜯어보기’ 시리즈를 작성했었습니다. 3편에서 gif파일 크기와 관련해 트래픽을 언급했는데요. 트래픽을 우리가 내는 휴대폰 데이터 요금으로 비유했었습니다. 원래 포스팅에서 설명하려니 길어져서 따로 글을 분리하였습니다.

상세페이지 뿐만 아니라 호스팅을 받아서 사이트를 만들 때도 적용되는 문제입니다. 인하우스 디자이너로 홈페이지를 관리하시나요? 워드프레스로 개인 포트폴리오를 만드셨나요? 그럼 꼭 알고 계셔야 합니다. 기본적인 개념이라 크게 어렵지는 않습니다. 그럼 가볼까요?

닷홈 호스팅 계정을 받아서 조그만 포트폴리오 사이트를 막 구축했을 때였습니다. 사이트 전체 구조를 보고 이것저것 고치는데, 갑자기 사이트에 접속이 되지 않았습니다. 한 페이지에 있던 큰 이미지가 계속 로딩되면서 트래픽 한도를 초과했던 것이었는데요. 레이아웃을 손보려고 css파일을 수정하면서 F5키를 연타한 것이 원인이었습니다.

에러 페이지가 채용 담당자를 반갑게 맞이하는 망상에 잠시 빠졌습니다. 링크를 전달했다면 아찔한 상황이었습니다. 저를 들었다 놨다 짜릿하게 했던 트래픽. 웹을 처음 다루는 디자이너 분들께 이 트래픽 개념과 과부하 예방 방법을 알려드립니다.

트래픽이 뭐죠? 알기 쉽게 설명해드릴게요!

이 시각 서버상황, ‘데이터 정체가 예상됩니다’

🚗 고속도로가 있습니다. ①여러 사람들이 함께 이 도로 위를 오가고 있습니다. ②한 번에 지나갈 수 있는 차선이 정해져 있습니다. 어김없이 명절 시즌이 돌아옵니다. ③다른 날보다 차가 유독 몰리면서 병목 현상이 일어납니다. 줄이 끝없이 늘어납니다. ④뒤쪽에 있는 차는 계속 기다리기만 합니다. ‘맨 앞차는 대체 뭘 하고 있는 건지…’

🌐 서버도 이와 비슷합니다. ①pc와 서버 사이에 여러 데이터가 드나들 수 있는 회선(통로)가 있습니다. ②한 번에 지나갈 수 있는 대역폭(최대 데이터 양)이 정해져 있습니다.어김없이 수강 신청 기간이 돌아옵니다. ③많은 사람들이 홈페이지 서버로 몰리면서 느려집니다. 또 다시 줄이 끝없이 늘어납니다. ④새로고침을 아무리 눌러도 접속할 수 없는 사람이 생깁니다. 우리는 이런 상황을 보고 ‘서버가 터졌다’고 합니다.

차이점이 있다면, 서버에는 오고 가는 데이터 총량(트래픽)에 한도가 있을 수 있습니다.

컨텐츠가 좋다고 긁어서 퍼가면 안 되는 이유

사이트 A가 사이트 B 서버에 업로드된 영상을 퍼갔습니다. 사이트 A의 글이지만 사이트 B 서버의 자원을 사용합니다. 그 영상이 이슈가 되어 조회수가 높아집니다. 그럼 어떤 일이 일어날까요? 사이트B에 연결된 영상이 나오지 않는 것은 물론이고, 사이트 B 자체에 접속할 수 없게 됩니다.

오래 전에는 이렇게 내용을 긁어서 복사해가는 ‘펌’이 잦았습니다. 트래픽이 어떤 원리로 움직이는지 설명할 예시로 적합할 것 같습니다. 요즘은 이런 경우가 적긴 합니다.

나는 파일 올릴게, 비용은 누가 낼래?

데이터를 주고받으면 어떤 식으로든 비용을 지불하게 되어있습니다. 꼭 내가 아니라도요. 내가 귀찮다고 큰 파일을 그대로 업로드한다면 누군가에게 그 비용을 전가하는 셈입니다.

누군가는 돈, 누군가는 데이터, 누군가는 시간을 냅니다

1. 운영자가 비용을 부담합니다

개인이 호스팅을 사용하면 보통 트래픽 한도가 정해져있습니다. 똑같은 내용을 5번 전달할 수 있는데 용량 때문에 1번만 전달할 수 있다면 손해입니다. 보통 밤 12시에 트래픽 한도가 리셋됩니다. 이전에 한도 초과를 리셋해야 한다면 소액을 결제해야 합니다.

2. 방문자가 비용을 부담합니다

휴대폰 요금은 종량제를 사용하는 경우가 많습니다. 내가 쓴 만큼 내는 방식입니다. 방문자의 휴대폰과 홈페이지 서버가 데이터를 주고 받을 때, 내 트래픽이 깎이는 만큼 고객은 ‘데이터 요금’을 냅니다. 똑같은 내용을 전달할 때 이미지가 불필요하게 크다면? 이 비용과 로딩 시간을 방문자도 함께 부담하는 셈입니다.

무제한 트래픽이라고 다 무제한이 아니에요

운동하는 남자 여섯이서 무제한 고기뷔페에 가서 고기를 모두 쓸어온다고 생각해보세요. 무제한 리필도 다같이 나눠 먹을 때 얘깁니다. 독점하면 주인에게 호온납니다.

트래픽 용량을 무제한으로 두는 곳도 많습니다. 많은 쇼핑몰 솔루션이 트래픽 무제한을 약속합니다. 하지만 사실은 같은 파이로 아주 많은 쇼핑몰이 나눠 씁니다. 한 곳에서 트래픽이 몰리면 관리자가 셔터를 내려버립니다. 쇼핑몰 전체가 마비되면 안 되니까요. (물론 아주 많은 사람들이 갑자기! 한번에! 들어온다는 전제이긴 합니다.)

파일 크기를 줄이면 트래픽을 확보할 수 있어요

서버 트래픽을 최대한 덜 줄일 수 있는 방법이 있을까요? 이미지의 용량을 줄이면 됩니다. 별도의 첨부파일을 제외하면 보통 이미지가 높은 비중을 차지합니다.

그래픽 프로그램으로 저장할 때 이미지 크기를 줄이는 방법은 이후에 상세히 다룰 예정입니다. 사용하는 그래픽 프로그램이 없다면 아래 사이트를 이용해보세요. 별도의 프로그램 없이도 손쉽게 파일 크기를 줄일 수 있습니다.

• 이미지프레소 – 사진 용량 줄이기
• Adobe Express (mp4) – gif를 mp4로 바꾸기

마치며

트래픽까지 굳이 신경써야 하나요?

트래픽 개념은 서버 쪽에서 주로 쓰입니다. 디자이너는 상세페이지만 잘 만들면 되는 거 아닐까요? 서버 관련된 것까지 알아야 할 필요가 있을까요? 사실 몰라도 됩니다. 신경 안 써도 됩니다. 오히려 여기까지 생각하는 사람이 드물 겁니다.

그래도 저는 계속 공부하고 싶습니다. 이런 디자인 외의 지식들이 저를 ‘디자이너’로 만들어줍니다. 제가 디자인한 상세페이지가 고객에게 잘 전달되었으면 합니다. 제가 만든 페이지로 불편하지 않았으면 좋겠습니다. 이 일을 대하는 지극히 개인적인 방식입니다. 더 많이 알고 싶고, 더 잘하고 싶네요.

아참, 제 디자인 포트폴리오는 여기에서 확인 가능합니다.😉