지마켓의 CSS 레이아웃 적용
site | 2009-04-06
지마켓이 CSS 레이아웃을 적용했습니다. 오픈웹에서 지마켓 사이트를 IE외의 브라우저에서도 사용할 수 있었다는 글을 봤는데, CSS 레이아웃 적용도 또하나의 발전이라고 생각됩니다.
헤더나 푸터와 같이 공용으로 사용되는 부분은 아직 CSS 레이아웃을 적용하지 못했습니다. 그리고 HTML 코드도 헤딩태크(h1~h6)는 사용을 하지 않고 거의 다 div와 ul, li로만 되어 있어서 의미에 맞게 작성되지는 않았습니다. 하지만 CSS로 디자인을 분리한 효과는 확실히 나타난 것 같습니다.
예전에 쇼핑몰들 웹페이지 용량을 살펴봤을 때 지마켓 메인 페이지의 HTML 용량은 425KB, 전송량은 4.48MB였습니다. 몇일 전에 HTML 페이지 용량을 체크해 봤을 때에도 303KB였는데 CSS가 적용되고서 174KB로 줄었습니다. 페이지 라인수도 4000줄이 넘었었는데 2000줄 정도로 줄었고 페이지 전송량도 2MB 정도로 감소하였습니다. 콘텐츠가 많이 줄거나 한 것은 아닌데 이정도면 굉장히 많이 경량화 되었고 그에 따라서 서버트래픽도 감소했을 것으로 예상됩니다.
| 사이트 | 전송량 | 걸린시간 | CSS 적용 |
|---|---|---|---|
| 지마켓 | 2MB | 2.58s | 예 |
| 지에스이샵 | 4MB | 6.45s | 예 |
| 씨제이몰 | 2MB | 1.64s | 예 |
| 디앤샵 | 2MB | 4.31s | 예 |
| 에이케이몰 | 6MB | 6.19s | 예 |
| 인터파크 | 6MB | 3.92s | 예 |
| 에이치몰 | 4MB | 4.92s | 예 |
| 롯데닷컴 | 5MB | 6.3s | 예 |
다른 쇼핑몰들과 비교해 봐도 메인 페이지의 용량이 상당히 작아지고 로딩 속도도 빨라졌습니다. 전에는 지마켓이 느려서 못쓰겠다는 생각을 많이 했었는데 이제 점차 좋아지려나 봅니다. 서브페이지들, 특히 상품페이지도 빨리 적용이 되었으면 좋겠습니다. 다른 페이지들은 거의 적용이 안되었고 메인 페이지만 일단 적용이 된것으로 보입니다.
HTML 유효성 검사를 통과하거나 웹표준을 정말 잘 지켰다고까지는 말하지 못하겠지만, 워낙 규모가 있는 사이트이기도 하고 처음부터 완벽한 모습을 보이기에는 힘든 부분이 있었을 것입니다. 앞으로 더욱더 발전해 나가는 모습이 기대됩니다.
Comments
G마켓은 모바일 전용 사이트도 있다고 들었는데 확인은 못해봤네요.. 앞으로도 많은 쇼핑몰들이 좀 더 쾌적한 환경을 제공해주길 기대해봅니다. :)
메인으로 끝날거라 생각합니다. 상품 페이지 같은 경우는 오픈마켓은 판매자가 자기 마음대로 올리기 때문에 어쩌다보면 레이아웃 자체도 깨질때도 있어서 하려면 아주 큰 작업이 될것 같습니다. 그래서 하나씩 늘어가는 것을 보니 멋지네요.
완전무결함을 바라는 건 무리겠지만 이런 발전하는 모습이 참 반가워요
11번가는 빠졌네요.
디자인은 그대로고 코딩만 바뀌었는데 이렇게 알아봐주시니 그저 감개무량하네요^^; 코드가 적절하지 않은 부분은.. 제가 이번에 처음으로 웹표준이란 걸 접하고 2주만에 코딩을 완료해야했기 때문에.... 완전 햇병아리가 해서 그러려니 하고 이해해주세요ㅠㅠㅋ 사실 아무도 소스 안 열어봤으면 했는데..얼굴이 화끈거려서요..ㅠㅠㅋ 여튼~ 변명은 여기까지;; 그래도 지금은 시작한지 한달 됐는데 조금씩 개선되고 있답니다;ㅂ; 다다음주에도 한 번 관심가져주시면 감사하겠습니당^^ 열심히 하고 있어요!!ㅋ
생각해보니 지마켓에서는 페이팔을 지원하니까 맥이나 리눅스에서도 쇼핑이 가능하겠네요.
전송량 걸린시간 css 적용 표 저런거 어케 알수있나여.. 저두 소싯적에 우체국 쇼핑이랑 장터 했었거든여 ㅋㅋ 맨날 새벽 4~5시 퇴근하고.. 졸면서한거라 큰 기대는 안합니다만... 작년 8월에 오픈시켰으니 꽤오랜시간이 흘렀네요, 결재는 태우지 못하더라도, 아직까지도 파폭으로도 깨지지않는 레이아웃을 보며 나름 흡족해한답니다 ㅡㅡㅋ
가장 간단한 방법은 파이어폭스의 파이어버그를 이용하는 것입니다. 넷(net) 탭에서 확인 하시면 되요.