Home | Experience | Guestbook | Admin | About
 
All Articles
  • • 냉풍기는 정말 효과가 있는것인가?
  • • 동반의 강자 VS 터프윈
  • • 확산되는 지자체 부도 그리고 제2의 부자감 .....
  • 90년대 비운의 명마 풀그림
  • • 매직아이(Masic Eye)3DTV
  • • 저역시 반드시 반대를 하는 입장이라기 보단 .....
  • • 저는 전작권 연기에 찬성하고 있었습니다만. .....
  • • 사실 공직자로서의 자질론을 따지자면 제가 .....
  • • 타블로의 악플러는 과연 처벌 대상인가?
  • • 타블로는 경고한다 그 입다물라!
  • IE8 inline-block
  • 지난번 관련포스트에 이어 추가내용이 필요할듯 해서 2탄으로 다시 포스팅을 하게됬다.
    이번 포스트에서는 실제 블로깅시 용량을 상대적으로 많이 차지하는 플래시삽입과 관련된 처리문제와 이미지 처리에 대해서만 집중적으로 알아볼것이다. (참고로 본 내용은 설치형 블로그에 국한된다.)

    1.플래시를 사용할때 flashvars 어트리뷰터로 파라미터값을 던져주자.
    플래시 파일이 보통 블로그안에 사용될경우는 항상 재전송이 필요한 포스트내의 트랙백 복사 부분과 원페이지방식으로 구현된 그외 영역의모든 플래시(본인의 블로그처럼 AJAX로 구현된 블로깅은 예외)들이 이에 해당될것이다.
    트랙백부분에 대한 카피처리를 플래시로 구현하는 이유는 잘알다시피 내용복사시 알림창여부와 관계없이 처리를 하기위함이고 그외 영역에서 플래시가 사용되는 부분들은 통계나 공개된 위젯등일것이다.
    플래시도 브라우져내에서 HTML의 한요소로써 보통 캐싱처리되어 표현된다. 즉 별도의 강제적인 재전송 요구가 없는 한 기본적으로 맨처음 로드한 파일을 기준으로 캐싱처리하거나 HTTP-status304로 표시하여 템프러리에 존재하는 파일을 가져와서 이를 활용하게 된다.
    이들 플래시들은 대부분 플래시가 로드시점에 일반적은 HTML페이지처럼 초기GET변수를 파라미터로 받아서 이를 많이 활용을 하게되는데 문제는 바로 직접 SWF파일네이밍에 GET파라미터로 인자를 부여해주는 방식이다. 이경우 브라우져는 다른 플래시파일로 인식하여 이녀석을 항상 새로 받아들인다.

    만약 다음처럼 코딩이되었고<embed src='test.swf?aaa=1'></embed> 이때 aaa라는 플래시에서 사용될 변수값이 항상 변경이 된다면 브라우져는 해당사이트에서 사용되고 있는 플래시파일을 항상 최신의 것으로 갱신한다.
    이것은 한때 플래시파일을 수정한 후 서버에 업로드했을때 해당사이트를 한번이라도 방문한 유저가 다시 접근했을때 예전플래시파일을 사용함으로 인해 발생할 수 있는 어떤 문제를 사전에 막을때 aaa=getTime()+random() 처럼 항상 동일하지 않는 값을 던져줘서 이를 해결하고자 할때 많이 사용되었던 방식이다.  IE의 경우 기본으로 '자동'으로 컨텐츠를 처리하도록 되어있고 크롬이나 파이어폭스등 대부분의 브라우져들도 자체 캐시된파일을 기본적으로 사용한다.

    하지만 위의방식의 코딩은 해당플래시 용량이 상대적으로 많고(만약 텍스트부분을 표시하는 플래시파일의경우 한글폰트 임베드시) 이를 항상 노출해야할때 매번 페이지뷰가 발생할때 마다 해당용량은 항상 포함되기때문에... 쓸데없는 트래픽이 발생하게된다.
    따라서 최소한 일반적은 홈페이지에 비해 상대적으로 사용자의 유입량이 많은 블로그에서 만큼은 이를 개선시켜야한다.
    그래서 다음처럼 코딩을 변경하자.

    <embed src='test.swf' flashvars='aaa=1'></embed>

    이경우 브라우져에서는 항상동일한 swf 파일을 로드하지만 인자로 던져주는 aaa값은 flashvars라는 어트리뷰터로 값을 직접전송하기 때문에 동일한 결과를 내지만 과부하에 영향을 미치지 않는다.
    아래는 실제 본인블로그에서 사용되고 있는 플래시파일을 기준으로 위설명에 대한 차이점을 보여주는 캡쳐된 이미지이다.


     [flashvars를 사용하지 않을때]


     [flashvars를 사용하여 파라미터를 전달할때]


    2.용량이 큰 플래시파일은 호스팅업체에서 제공하는 CDN (Content Delivery Network) 서비스를 이용하자.
    지난번 포스트에서도 언급했지만 대부분의 호스팅업체는 무료 CDN를 제공하고 있다. 보통 스트리밍서비스와 함께 이 부분을 별도로 제공하고 있는데 두가지 서비스모두 무료지만 관련서비스가 필요할때는 유용하게 사용될 수 있다.
    현재 내가 호스팅받고 있는 C업체의 경우 기본트래픽용양과 동일하게 스트리밍,CDN의 트래픽용량을 제공하고 있다.
    그런데 스트리밍서비스는 보통 파일확장자가 wma, asf, mp3, mpg... 등의 미디어처리와 관련된 확장자에만 국한된다. 그래서 플래시파일의 확장자를 위의 확장자로 바꿔서 올려도 결국 시작 도메인이 http:// 가 아니라 mms:// 로 시작하기때문에 파일을 로드하지 못한다.
    하지만 CDN의 겨우 역시 jpg,gif,png등의 이미지와 관련된 확장자만 허용하지만 이경우 http://로 시작되는 경로를 포함하고 있기때문에... 플래시파일의 확장자를 pngjpg 등으로 변경하여 임의로 올려서 이를 별도로 요청받도록 처리하면 트래픽용량을 상당히 줄일수 있다.
    지난번 포스트에서는 메가패스나,하나라등 무한트래픽을 제공하는 업체를 알아보고 또 네이버등 블로그에서 플래시파일을 이용한 방법을 알아보았는데... 기본적으로 통신업체에서 제공하고 있는 무료계정은 회선라인이 너무느리고 네이버등 포털(네이트,다음)등도 이제 플래시파일도 외부도메인허용을 다 막아두어서 사용할수가 없다.
    따라서 위의 CDN을 이용하면 이런 골치아픈 트래픽 문제가 다 해결된다. 현재 나는 460ktitle.swf 파일을 위의 CDN에 링크하여 일일 400M의 트래픽범주에서 마음대로 사용하고 있다.


    3.용량이 큰 이미지는 구글 피카사웹앨범을 이용하자.
    지난번에 flickr에 대해서 잠깐언급했었는데... 플릭커나 윈도우라이브이미지, 등 무료이미지공유 서비스등을 이용해도 되지만 나는 개인적으로 피카사웹앨범을 추천한다.



    이역시 위의 서비스들과 다를게 없지만 1G라는 용량범위내에서 상대적으로 좀더편하게 이미지 트래픽을 줄일수 있다.
    물론 전송속도 또한 매우중요하다. 현재 구글의 피카사웹앨범이 액세스속도는 가장 빠른듯하다. 또 피카사자체에서 바로 이미지편집후 원클릭으로 웹앨범 게시가 가능하기 때문에 실사용에서도 매우 유용하다. 중요한건 기본블로그에 탑재된 이미지업로드의 편라성에 준하여 복잡한 과정을 거쳐서 이미지를 링크해야 한다면 귀차니즘 발동으로 인해 애시당초 블로깅을 하기가 시러지기 때문이다.  따라서 편리함역시 무시못한다. 단 피카사웹앨범을 이용할때 약간 주의해야할 참고사항만 알아보고 이번 내용을 마무리하겠다.

    즉, 주의점은 피카사로 이미지를 웹앨범에 게시한 후 이제 해당 이미지를 링크하기 위해 마우스로 오른쪽버튼을 클릭한 후 속성창에 나오는 이미지주소를 바로 사용하면 안된다는 것이다. 이것은 브라우져에 따라 이미지가 제대로 표시가 안되는 현상이 발생한다. 중요한건 s144, s800, s1600 처럼 실제 이미지의 사이즈가 정의된 주소가 포함되는 경로라야 문제가 없다는것이다.
    아래 이미지는 실제유효한 경로를 얻는 방법이다.


     [사진에 링크하기 옵션을 통해서 직접 이미지 주소를 취득한다.]


     
    위의 캡쳐된 주소값을 보면 사진에링크걸기로 접근했을대 s800이 추가된 이미지주소를 확인할 수 있다. 즉  실제 이주소를 링크로 사용해야만 X표시가 나타나지 않는다.

    이상으로 블로그 트래픽 줄이기와 관련된 추가 내용을 마무리한다. 실제 사용하는 유저, 운영방법에 따라 필요한 내용들은 조금씩 달라질수도 있지만 약간 크티티컬한 부분만 짚어봤다.
    EDIT | DELETE
    LINK • SUMMARY