카페24 호스팅 용어 NO.13
웹 경량화란?

요즘 인터넷 시장에서는 웹 표준이나 크로스 브라우징(Cross Browsing), 그리고 웹 경량화라는 개념들이 많은 사람들의 관심을 끌고 있는데요. 이 가운데 오늘은 웹 경량화에 대해서 한번 알아보도록 하겠습니다.

웹 표준이 궁금하시다면 ☞ 웹 표준이란?
크로스브라우징이 궁금하시다면 ☞ 웹 표준 VS 크로스 브라우징의 차이점

웹 표준 방식에 맞게 제작된 웹 사이트들은 변화된 환경에 적응하기 위해 기존에 지니고 있는 파일 사이즈를 축소함에 따라 웹 페이지의 크기가 많이 줄어들었는데요. 이처럼 웹 페이지의 크기가 줄어드는 현상을 웹 경량화라고 이야기 합니다.

쇼핑몰 홈페이지를 웹 상에 표현하기 위해서는 기본적으로 컴퓨터 언어와 이미지가 필요한데요. 그 중 대표적인 것들을 꼽자면 HTML, CSS, 자바스크립트, 이미지가 있습니다. 이러한 것들이 여러분들의 쇼핑몰, 즉 웹 사이트를 표현하고 있는 것이죠.



컴퓨터 언어와 이미지는 웹 상에서 자신들만의 공간을 차지하고 있는데요 이러한 공간들의 총 합이 웹 사이트의 공간, 즉 웹 페이지의 크기를 결정하게 됩니다. 이러한 웹 페이지의 크기들이 웹 표준시대가 도래하면서 변화를 맞이 하고 있는데요.

오늘 설명해 드리고 있는 웹 경량화는 웹 표준과 뗄레야 떼어낼 수 없는 개념인데요. 왜냐하면 웹 표준 방식을 만족시키기 위해서는 웹 표준권고안에 맞는 요소 및 속성을 사용해 웹 사이트를 표현해야 하고 웹 표준의 권장사양을 만족시키기 위해서는 기존에 웹 사이트를 표현하기 위해 사용하는 컴퓨터 언어들은 자신들이 차지하고 있던 공간을 줄이거나 수정 또는 불필요한 공간들을 버려야만 하죠. 기존의 웹 사이트를 구성하고 있는 언어들이 줄어들거나 없어지면서 기존의 웹 페이지의 크기가 줄어들게 되는데 이를 웹 경량화라고 이해하시면 되겠습니다.



컴퓨터 용어이다 보니 개념에 익숙하지 않으시는 분들은 이해하기가 조금 어려우시죠? ^^;;

이럴 땐 말로 듣는 것보다 눈으로 직접 보는 것이 더 이해가 빠른 법! 그래서 여러분들을 위해 3D 입체화면을 준비하였습니다. 웹 경량화가 이루어지기 전과 후의 한 쇼핑몰 사이트의 모습을 3D화면으로 보여 드릴 텐데 두 가지 비교된 화면을 보시면 웹 경량화를 쉽게 이해하실 수 있으실 겁니다.




쇼핑몰 홈페이지를 3D로 표현한 화면인데요. 무언가 층층이 많이 쌓여져 있는 것이 보이시죠? 화면에서 표현되는 빨간색 층들은 웹 표준방식에서는 권장하지 않는 컴퓨터 언어들로 작업이 이루어졌다는 것을 뜻합니다. 이렇게 층층이 두껍게 표현된다는 것은 그만큼 웹 상에서 페이지가 구동되는데 걸리는 시간이 길어진다는 의미죠. 설명을 듣지 않아도 무언가 부정적인 기운 느껴지시죠!

웹 경량화가 이루어지고 난 후의 웹 페이지를 3D로 구현한 화면

앞서 살펴본 그림과는 달리 위의 그림은 웹 사이트 층들이 상당히 얇다는 것과 빨간색이 아닌 파란색으로 이루어진 층들이 눈에 들어오는데요. 그만큼 웹 경량화가 이루어지고 웹 표준에서 권장하는 컴퓨터 언어들로 쇼핑몰 홈페이지가 구성되었다는 것을 의미합니다. 쇼핑몰 홈페이지의 가벼워진 몸무게 눈으로 확인 가능하시죠!  


자 이쯤 되면 떠오르는 궁금증 하나! 그럼 여러분의 쇼핑몰 웹 페이지 상태는 어떨까요?

자신의 웹 사이트 상태를 3D로 구현해 보실 수 있는 방법은 웹 브라우저인 파이어폭스(Firefox)에서 지원됩니다. 파이어폭스에서 메뉴를 누르신 후 Add-on을 클릭하세요.





Tilt 라는 어플리케이션을 검색 다운받으신 후 실행해주세요~~





다운 받으신 Tilt가 파이어폭스에서 동작이 되신다면 검사해보고 싶은 쇼핑몰을 검색한 후 Ctrl+ Shift + M 을 누르면 자신의 쇼핑몰 웹 페이지 상태를 확인해보실 수 있습니다.

여러분 쇼핑몰의 웹 경량화 정도 꼭 확인해보세요~


바로가기 ☞ 웹 경량화는 왜 필요한가?