티스토리 추천 블로그 입성

Miscellaneous/Story 2007.07.29 22:43


















사용자 삽입 이미지
요 며칠 동안 블로그의 방문자수가 많이 올라가서 무슨 일인가 싶었는데 쇼곱하기 쇼 CF에 관해 아무 생각 없이 올렸던 글을 검색하여 들어온 사람들이 많았다. 그리고 오늘 티스토리 공식 홈페이지에 방문해 보니 추천 블로그 리스트에 올라가 있었다.

티스토리를 시작할 때 이 추천 블로그 리스트에는 어떻게 올라가는지가 궁금하여 티스토리 관계자에게 물어본 적이 있었는데 대외비라며 활발한 블로그 순으로 리스트에 등록된다는 이야기만을 들었던 기억이다.

티스토리를 시작한지 벌써 반년이 다 되어가는 것 같다. 인터넷 상에서 오픈 되어 있는 공간이기는 하지만 극히 개인적인 이야기와 자료 창고로 활용하고 있는 지금은 방문자가 늘어나는 것보다는 실질적으로 친목을 도모할 수 있는 분들과 친분을 많이 쌓고 싶다.

아무튼 내 블로그가 세상과 소통하는데 예전보다 조금 더 열려 있는 듯 하여 기분은 좋다…^^

    

설정

트랙백

댓글

블로그의 올플래시 페이지 infinite 메뉴 추가

Project/Web 2007.04.15 02:26
예전 방문자 카운터 기능을 추가하면서 생각한 것이 있었다. div로 iframe을 잡고 상위 레이어를 올리면 올플래시 형태의 페이지를 만들 수 있을 거라는 생각에서 시도해 보았다.

이 구조를 넣으면서 여러가지 문제점이 생겼는데 문제점들은 아래와 같다.


1. 자바스크립트에서 플래시로 값을 넘겨주기 위해서는 플래시에서 ExternalInterface 클래스를 사용하게 된다. 이 클래스를 이용하면 html에 삽입된 javascript와 플래시간 상호 지정한 function을 호출할 수 있으며 return값도 전달 할 수 있다.
하지만 배경 화면에 해당하는 플래시에서 티스토리 스킨에 제공하고 있는 skin.html안에 삽입된 자바스크립트를 호출하는 것은 가능하나 그 자바스크립트에서 플래시로 값을 넘겨주지 못하는 문제점이 있다. 아마도 크로스 도메인 문제인 듯 싶다.

하루정도 고민 하다가 결국은 우회하기로 결정했다. 일단 하단에 있는 메뉴플래시에서 infinite 버튼을 클릭할 시에 상위에 있는 레이어를 display = block을 적용하고 플래시의 LocalConnection을 이용하여 레이어 안에 있는 플래시와 통신을 하는 방법이다.
여기도 또다시 문제점이 발생했는데 하위 플래시에서 레이어를 살리는 동시에 상위 플래시와 통신을 할 경우에는 기존에 있던 플래시가 포함된 레이어가 작동을 정지하면서 제대로 호출해주지 않는 문제가 발생했다. Display를 대신해 visibility을 이용해 보았지만 마찮가지였다.

상위 레이어가 살아났을 때 플래시에 레이어가 나타났다는 메시지를 전달함으로써 infinite의 초기 시작 모션을 적용해야 하는데 그 문제가 해결되지 않아서 발생하는 문제점이다.

익스플로러와 파이어폭스 두 브라우저에서 테스트해본 결과 두 브라우저 간의 약간의 차이가 발생했다.

그래서 LocalConnection으로 플래시간 통신을 하되 약간은 딜레이 타임을 적용하기로 하고 레이어를 살리고 초기 시작 모션들 들어가기 전에 0.5초간 로딩바를 보여주는 형태로 LocalConnection의 문제점을 해결했다. 사실 해결이라기보다는 궁여지책이다.


2. 두번째 문제는 익스플로러와 파이어폭스의 호환 문제다. document.all는 IE에서만 먹는 코딩 방식이라는 것을 알게 되었다.
보 통 IE에서 div의 style이나 레이어에 접근하기 위한 접근자 방식을 document.all.ID.style.display이런 형태로 썼는데, 이러한 코딩방식은 파이어폭스나 타 브라우저에서는 먹히지 않는 방식이다. MSDOM에서만 사용하는 것이며 W3C에서도 권하지 않는 방법이라고 한다. 우리나라의 경우는 90% 가량이 IE를 사용하고 있는 상황이기 때문에 IE를 사용하고 있다면 별 문제가 되지 않겠지만 타 브라우저를 사용하는 사용자에게는 치명적인 문제를 발생시킨다. 공든 탑이 이러한 표준 문제에서 무너질 수 있다.

W3C에서 권장하는 표준형은 document.getElementById("ID").style.display 이러한 형태로 접근하는 것이다.


3. 세번째 문제는 티스토리에 로그인한 상태에서 블로그에 접근했을 때는 오른쪽 상단에 티스토리 툴바가 보이게 된다.  테스트 과정에서 레이어의 index값을 아무리 올려도 상위에 있는 레이어보다 티스토리 툴바가 상위에 떠있는 것이다. 그래서 블로그 소스를 뒤져보니 상위에 뜨는 툴바의 index값이 무려 1000000라는 사실… 그래서 상위에 뜨는 레이어의 index 값을 1000001로 잡아서 해결했다.


4. 네번째는 문제라기 보다는 레이어를 올리는 과정에서 생겨난 부가적인 노동이다. 블로그에서 음악이 흘러나오도록 play를 시켜놓은 상태에서 infinite 페이지로 들어갔을 때는 끄고, play되고 있던 사용자라면 다시 나올 때 play를 시켜주는 것이다. 그리고 음악을 듣지 않고 있던 사용자라면 그대로 음악이 흘러나오지 않는 기능을 추가해야 했다. 그리고 블로그의 배경에서 랜덤으로 생겨나는 나비의 움직임이 infinite 페이지를 접근했을 때에 불필요하게 CPU의 낭비를 가져오고 있어서 infinite메뉴로 들어갔을 때는 나비들이 생성하지 않도록 interval을 clear시켜주고 다시 블로그로 나갔을 때는 생성하도록 설정해 놓았다.


Infinite메뉴를 추가하면서 가장 큰 문제는 자바스크립트에서 플래시로 통신하기가 어렵다는 것이 가장 큰 문제였던 것 같다. 일단 지금은 LocalConnection을 이용하여 플래시 간에 주거니 받거니 하고 있으니 나중에 알게 되면 수정해야 겠다.

Infinite 메뉴는 아직 구체적은 내용 구성과 구현 방법에 대해서는 생각해 둔 것은 없다. 일단 블로그에서 새로운 시도를 해본 것이고 캠버스에 어떤 것들을 담아갈지는 앞으로 시간 날 때 고민해 봐야 하겠다.

사용자 삽입 이미지


    

설정

트랙백

댓글

스킨 배경 플래시 업데이트

Design/Web 2007.03.02 15:51
1차로 올려드린 bg.swf 파일을 버전업하여 올립니다.

새로 올려드리는 bg.swf파일은 외부에 있는 이미지를 불러와서 사용하게 만들었습니다. 기본으로 올리는 이미지를 사용하셔도 되고 원하는 이미지를 만들어서 올리셔도 됩니다. 사용 방법은 아래와 같습니다.

기존의 bg.swf 파일과 파일명은 같습니다.




bg.swf -> 배경 플래시 파일
img.jpg -> 배경 플래시에서 사용할 이미지 가로 : 1014 x 세로 : 644 사이즈입니다.

위 두 파일은 images/ 폴더에 업로드 하시면 됩니다.

사용하시는 분이 이미지를 만드실 경우에는 위와 같이 가로와 세로 사이즈에 맞게 "img.jpg" 파일명으로 만들어서 올리시면 됩니다. 이미지는 블로우 처리가 되기 때문에 이미지 퀄리티가 좋은 필요는 없습니다. 플래시에서 로딩하는 시간이 걸리기 때문에 이미지 용량은 최대한 작게 하셔서 올리시기 바랍니다. 참고로 첨부하는 img.jpg 파일은 포토샵에서 퀄리티를 1로 저장했기 때문에 용량이 34k 정도 됩니다.


플래시에서는 검정색(#000000) 부분에는 무비클립을 생성하지 않기 때문에 생성하지 않을 곳은 검은색으로 처리하셔서 이미지를 만드시면 됩니다.

감사합니다.

    

설정

트랙백

댓글

티스토리 스킨자료

Design/Web 2007.02.25 01:07
Jasu's blog에서 사용한 스킨 자료를 올립니다.

익스플로러와 기타 브라우저(파이어폭스)에서의 호환 문제로 인해서 아직도 정리가 제대로 되지 않았지만 기다리시는 분들이 있으신 듯 싶어서 일단 모자른 자료를 올리도록 하겠습니다.

자료는 모두 5개입니다. 사용 방법은 아래와 같습니다.






사용자 삽입 이미지








-------------------------------------------------------------------------
1. 사용자스킨HTML - 이것은 티스토리 스킨->스킨편집에 들어가시면 상단에 있는 텍스트 자료입니다.

2. 사용자스킨CSS - 이것은 티스토리 스킨->스킨편집에 들어가시면 하단에 있는 텍스트 자료입니다.
-------------------------------------------------------------------------
3. bg.swf - 플래시로 만든 배경 파일입니다.

4. logo.png - 로고가 들어가는 이미지입니다. 배경이 투명한 png 파일로 가로 200px, 세로 200px 사이즈로 만들어서 올리시면됩니다. 파일명은 반드시 logo.png로 하시기 바랍니다.

5. flash.js - 플래시를 임베드 스키기 위한 파일입니다. (수정하실 필요없이 그냥 업로드 하시면 됩니다.)
-------------------------------------------------------------------------
위 3, 4, 5번 파일은 스킨->스킨편집에 들어가시면 하단에 파일업로드를 통해서 업로드 하시면 됩니다.



그리고 여기서 주의할 점은 1단 기본스킨은 아래와 같은 것으로 적용한 후에 위 과정을 진행하시기 바랍니다.

사용자 삽입 이미지

이렇게 파일을 수정, 업로드 하시고 티스토리에서 기본적으로 제공하는 환경설정을 변경하셔서 사용하시면 되겠습니다. 스킨 제공자(Designed by JASU)는 표시해 주시면 고맙겠습니다. 그리고 플래시 배경은 시간이 나는대로 주기적으로 제 블로그의 이 포스트를 통해 업로드 해 놓도록 하겠습니다.

감사합니다.

------------------------------------------------------------------------------------------
태터툴즈에서의 적용 방법
http://jasu.tistory.com/80#comment1462574
스킨을 사용해보신 어떤 분이 올려주셨습니다.
간단한 사용팁인데 저는 태터툴즈를 사용하지 않는지라 이분의 글을 링크겁니다. 태터 사용자분들중 자세한 스킨 적용팁을 올려주시면 업데이트 하겠습니다. 감사합니다.

    

설정

트랙백

댓글