관리 메뉴

ksodien의 망상록

[날로 먹는 작업(?)] 블로그 플래시 배너에 PreLoading 과정 추가! 본문

잡담

[날로 먹는 작업(?)] 블로그 플래시 배너에 PreLoading 과정 추가!

ksodien 2012.07.05 14:28

음.. 오늘은 지금까지 사용해온 블로그 상단 배너용 플래시 동영상에 PreLoading 과정을 추가해보았습니다.

현재 저의 티스토리 페이지에는 다수의 플짤들이 들어가있으며, 이 중 절반 이상이 지속적으로 반복 실행되며 블로그 상 각 영영의 일부분으로써 기능하도록 만들어져 있습니다만... 사실 이 플래시 동영상이라는 것이 그 작동 과정에 있어서 결코 적지 않는 수준의 CPU 자원을 소모해버리기 때문에 유저에게 있어서 은근히 부담이 되는 존재이기도 하지요.

더불어, 플래시 동영상의 일반적인 동영상 파일 형식인 SWF의 경우 해당 페이지에 접속한 유저의 PC 혹은 모바일 기기에 실시간으로 임시 저장 파일이 다운로드되면서 동시에 재생이 되는 구조이기에 그 용량의 정도에 따른 체감 상의 차이가 발생할 수있습니다. (즉, 고용량 플짤을 올려놓고 바로 실시간 재생이 되도록 해두었다면 페이지의 로딩 속도가 느려지는 것은 물론, 접속 지연 현상마저 생길 수 있다는 것! )

 

만약 해당 플래시 동영상이 비교적 간단한 내용을 담고 있는 저용량 파일일 경우에는 이러한 문제가 덜한 편입니다만, 그 반대일 경우에는 해당 플짤의 데이터가 100% 다운로드 되기 전까지 아무 것도 없는 공백 상태로 보여지며 해당 사이트나 블로그 등을 방문한 유저에게 의도치않은 불편함마저 줄 수 있다고 하더군요...; (어쩐지, 블로그 스킨을 편집한 제 입장에서도 페이지 접속 시 다소의 버벅임을 느낄 때가 있었으니, 다른 분들 입장에서는 더욱 불편함을 느끼셨을 것이라는 생각이 드네요;; _ _;;; )

저의 블로그에 이러한 불편 사항이 있었음에도 불구하고 지금까지는 그냥 ' 귀차니즘도 있고하니 만들어 둔대로 쓰지 뭐~ 'w';; ' 라고 생각하며 방치해두고 있었습니다만 얼마전에 조슈아님께서 제안해주신 의견을 보고 불현듯 그 필요성을 느끼게 되었다는 것이 참, HAHAHA.... (타앙)

아무튼, 그리하여 나름 PreLoader를 만들어보겠다며 의욕을 가지고 시작하긴 했...는데;

 

결국은 귀차니즘 때문에 기존에 존재하는 소스들 좀 끌어다쓰면서 결과적으로는 날로 먹은 작업물이 되어버렸네요.... ㅡ_-;)a (고용량의 플래시 동영상을 또다른 저용량의 플래시 동영상으로 PreLoad 하려고 하다보니, 구글링해서 얻은 지식만으로는 잘 안되는지라...)

슈타게 로고도 넣고, 예전에 만들어둔 나비 움직임 효과도 재활용하고~

뭐 그래도 추가해놓고 보니 나름 아주 나쁘지는 않네요! :D

아참, 마지막으로 한마디 추가하자면... 광랜이라든가 다소 빠른 인터넷 접속 환경에서는 위의 PreLoading 과정이 순간적으로 스쳐지나가듯이 보여질 수도 있습니다~ ~_~)y=3

p.s - PreLoader용 플짤 소재를 찾는답시고 인터넷 검색을 하다가 잠시(?) 동안 아래와 같은 삼천포에 빠지기도 했네요.

 

그, 그것은 바로 Fate Apocrypha의 쟌다르크 테마 크롬 스킨;; 

으아니 이런 것도 있었구나 하고 낼름 설치해버렸습니다. ㅡ_-)b (파일은 http://randomnessthing.com/tag/fate-apocrypha/ 여기에 올라와 있.... )

11 Comments
  • 프로필사진 Favicon of http://joshua-creat.tistory.com BlogIcon N Joshua 2012.07.05 16:00 신고
    야호, 부동의 소뎐님이!
  • 프로필사진 Favicon of https://ksodien.tistory.com BlogIcon ksodien 2012.07.05 16:34 신고
    문제는 딱히 고용량 플짤 올릴 장소가 없어서 비메오에 올렸더니 동영상이 재생되지 않거나, 혹은 무한 반복 재생되는 현상이 발생해버렸네요;

    으으 티스토리 10mb의 슬픔이여 ;ㅂ; (무한 재생을 막을 수 없다면 로딩 부담 완화라는 목적 달성이 안되기 때문에 일단 롤백해야 하려나 생각 중)
  • 프로필사진 Favicon of https://animesuki.tistory.com BlogIcon 김물컹 2012.07.05 18:22 신고
    멋있긴한데, 한층 더 블로그 프레임잌ㅋㅋㅋㅋ버버버버버벅 블로그로 컨셉 굳히신건가여!?
  • 프로필사진 Favicon of https://ksodien.tistory.com BlogIcon ksodien 2012.07.05 18:39 신고
    아무래도 그런 편이지요;

    어떻게 개선을 좀 해보자고 시도한 것이, 결과적으로는 한층 더 강렬해진 로딩 지연 시간의 압박을 초래하다니... ㅠ0ㅠ)

    일단 이따가 플짤은 이전의 것으로 되돌리고, 나중에 시간 날 때 상단 플짤 간소화에 도전해보려고 합니다~ :D
  • 프로필사진 Favicon of https://ksodien.tistory.com BlogIcon ksodien 2012.07.06 05:48 신고
    으헛, 알고보니 반복 재생 제어 부분의 문제는 비메오 때문이 아니라 스크립트 제어 문구를 제대로 넣어주지 않은 것이 원인이었네요; [...]

    이제 동영상 제어 문제도 해결이 되었으니, 남은 것은 나비 움직임 효과까지 넣기 위해 용량을 더욱 쥐어짜내야겠심! ~( -_-)~

    [b]p.s - 수정 작업 완료![/b]
  • 프로필사진 Favicon of http://nicalodeon.net BlogIcon 니컬 2012.07.07 08:07
    이틀 전에 달덕 관뒀다는 분이 이러시다니....
  • 프로필사진 Favicon of https://ksodien.tistory.com BlogIcon ksodien 2012.07.07 11:31 신고
    ...!?

    아, 앙대!!;
  • 프로필사진 Favicon of https://garamdong.tistory.com BlogIcon 안단테♪ 2012.07.08 08:37 신고
    F5를 누르며 프리로딩을 확인~
    살짝 빠르게 지나갔지만 역시 깔끔하게 멋진 디자인이네요^^
    옆의 살짝 나타났다 사라지는 잔느도 귀여워요~

    조만간 멋과 속도, 둘 다 잡으실 수 있기를~!
  • 프로필사진 Favicon of https://ksodien.tistory.com BlogIcon ksodien 2012.07.08 10:23 신고
    프리 로딩의 경우에는 상대적으로 상당히 가벼운 그래픽 요소를 사용함으로써 그 부담을 최소화하는 것이 일반적인 형태인데...

    저의 경우에는 플짤로 플짤을 읽어들인다는 다소 엽기적(?) 방식을 취해서 그런지 속도 향상에는 별다른 도움이 되지 못한 것 같아서 아쉬운 기분도 드네요.

    그래도 일단은 만든다고 시간을 들인 것이 있으니 이대로 가볼까 합니다~ +_+


    아, 그리고 페이지 우측 하단에 뜨는 쟌 다르크 캐릭터의 경우 원래는 이브님 블로그에서처럼 샤방 샤방한 말풍선이 함께 떠야 정상인데...

    제가 무엇인가 적용에 실수를 한 것인지 불완전하게 출력되고 있네요.

    일단은 임시 방편으로 캐릭터만 뜨도록 바꿔볼까 하는 생각도 하고 있습니다! (... 어흐흙 Orz)
  • 프로필사진 Favicon of https://ksodien.tistory.com BlogIcon ksodien 2012.07.08 11:34 신고
    음, 아무튼 하단 캐릭터 사이드 바의 경우에는 현재 저의 적용상 미숙 때문인지

    1. 말풍선이 아랫 부분만 제대로 나옴

    2. 게시물 클릭 시 제목이 표시되지 않고 '현재 게시글 상태가 아닙니다' 라는 메시지만 출력됨

    이 2가지 문제가 발생하고 있네요;

    분명 둘다 경로 설정 상의 문제인 듯 싶은데... =_=)
  • 프로필사진 Favicon of https://ksodien.tistory.com BlogIcon ksodien 2012.07.08 22:08 신고
    이제 사이드 바 기능까지 대강 활성화하기는 했는데... 게시물 링크를 클릭하여 이동할 경우 그 제목을 알려주는 Menu 기능은 어떻게 연결하여 활성화시키는 것인지 모르겠네요.

    어쨌든 이정도면 대강 목표의 80%는 해결한 셈! [... 나머지 20%가 문제야; Orz ]
댓글쓰기 폼