UNIQLOCK을 달고 나서 카테고리 트리의 서브 카테고리가 열리지 않으면서 스크립 오류가 나는 문제가 있었어요.

아마도 UNIQLOCK 스크립트를 달면서 뭔가 오류가 있었겠죠.
UNIQLOCK은 외부의 단일 스크립트이고 그 안에 두 개의 스크립트가 추가로 로드되는데요, 이 중 setLayer.js 라는 파일에 있는 코드가 문제를 일으키네요. 원본 코드는 다음과 같습니다.

function showLayer(layerID,value){
// alert(layerID);
 document.getElementById(layerID).style.visibility = value;
}

평범하죠? 문제는 style.visibility가 설정되어 있지 않은 layer에서는 이 코드가 오류를 발생시킨다는 점이에요. 게다가 showLayer라는 함수는 티스토리의 common2.js 파일에서도 사용하고 있는 이름인데 두 펑션의 정의가 다르니까 당연히 티스토리의 showLayer를 사용할 때 문제가 발생할 거에요. 티스토리의 showLayer 함수는 다음과 같습니다.

function showLayer(id) {
 document.getElementById(id).style.display = "block";
 return true;
}
자바스크립트의 편리한 점이자 문제점은 같은 이름의 펑션을 정의하면 나중에 정의된 내용으로 덮어씌워져 버린다는 건데요, 이걸 한 번 더 이용해서 위의 두 펑션이 공존할 수 있는 형태로 showLayer를 재정의했어요.

function showLayer(id, value) {
 document.getElementById(id).style.display = "block";
 var ele = document.getElementById(id);
 if (ele.style.visibility) {
  ele.style.visibility = value;
 }
 return true;
}
자 그럼 최종적인 수정.
티스토리의 스킨 수정에서 UNIQLOCK를 달 때에는 다음과 같이 스크립트를 붙이시면 돼요.
<script type="text/javascript" src="http://www.uniqlo.jp/uniqlock/user/js/고유ID.js"></script>
<script type="text/javascript">
function showLayer(id, value) {
 document.getElementById(id).style.display = "block";
 var ele = document.getElementById(id);
 if (ele.style.visibility) {
  ele.style.visibility = value;
 }
 return true;
}
</script>
그러면 제 블로그의 오른쪽 상단에 있는 것 처럼 UNIQLOCK도 잘 나오고 카테고리도 이상이 없게 쓸 수 있게 돼요 :D

덧붙이자면, 바로 이런 문제가 자바스크립의 치명적인 문제가 아닐까 싶어요.
이 문제를 해결하려면 티스토리 정도로 범용적인 서비스의 경우 반드시 서비스에서 공통적으로 사용하는 스크립트 코드들을 클래스화 하여 네임스페이스 때문에 생기는 문제가 없도록 해야 할 거에요.

그리고 UNIQLOCK처럼 어디에나 붙여서 쓸 수 있도록 하는 스크립트도 마찬가지로 클래스화 하여 다른 서비스에 영향을 주지 않도록 해야겠죠.

자바스크립트로 클래스를 만들어 쓰는 것은 자바 스크립트를 상당히 잘 하시는 분들도 그 필요성을 잘 이해를 못하는 경우가 많은 것 같아요. 그리고 충분히 알고 있다고 해도 잘 설계되지 않은 자바스크립트 클래스는 그렇지 않은 일반 함수보다 훨씬 디버깅하기 어렵다는 문제도 있죠.

VS 2008에서는 자바스크립트 클래스에 대한 인텔리센스나 디버깅을 지원한다는데 과연 어느 수준으로 될지는 모르겠지만 이런저런 문제로 저는 자바스크립트를 기피하는 편이에요 :(
신고
Posted by gongdo
으하핫 오늘 회사가 한가해서 포스팅 폭발하네요!

아래에서 리뷰한 UNIQLOCK. 지금도 충분히 UNIQLO라는 브랜드를 알릴 수 있는 광고 매체가 되고 있지만 여기에 UCC를 그리고 광고를 접목한다면 굉장히 파격적인 무언가가 나올법도 해요.

좀더 재미있게 사용자들이 직접 찍은 5초 동영상을 업로드 받아서 무작위로 혹은 실시간으로 재생해주는 것도 굉장히 재밌을 것 같아요. UNIQLOCK도 자체적으로 꽤 많은 양의 영상을 확보하여 지루하지 않게 해주지만 5분쯤 보면 거의 다 나오는 것 같거든요. 과연 5초 동안에 보여줄 수 있는 어떤 동영상들이 올라올까요? 되게 기대되는데요? 거기다가 전 세계를 대상으로 서비스 한다면? 와우~

또한 각 시간 중간에 나오는 동영상은 5초로 정확히 제한되어 있기 때문에 광고라고 해도 크게 거슬리지 않을 것 같아요. 뭐 색상이나 이런 가이드 라인도 나오면 좋겠지만요. 광고가 삽입된다면 클릭 했을 때 링크는 해당 사이트로 보내주고 굉장히 짧은 시간이니까 여러번으로 분산시켜 보여주는 것도 괜찮은 방법이겠죠.

비단 웹사이트 배너 뿐만 아니라 윈도의 사이드바 개짓이나 맥의 위젯으로도 개발하면 더 많은 사용자를 확보할 수 있을 것 같아요. 만약 그냥 배너였다면 이런 생각은 힘들었겠지만 기본적으로 사이드바에 많이 설치하는 시계라는 아이템 위에 올라간 거라서 한번 시도해 볼 수 있지 않을까요?
신고
Posted by gongdo

블로그 조선일보 사절에 갈때마다 구석에 붙어있는 저게 뭘까...란 생각을 했어요.


아 시계구나... 란 생각은 했는데 중간에 나오는 아가씨들에 낚여서시간을 확인하기도 전에 화면이 휙휙 바뀌어서 몰랐는데 눌러보니 꽤 재밌는 웹 애플리케이션이더군요!

http://www.uniqlo.jp/uniqlock/
한번 보세요 정말 시간 가는 줄 모르고 보고 있었네요.

사용자 삽입 이미지
5초 동안은 시간이 흘러가다가...

사용자 삽입 이미지

5초 동안은 웬 아가씨들이 춤을 추기도 하고...

사용자 삽입 이미지

또 5초 동안 시간이 흐르다가 5초동안 아무 의미 없이 시간에 맞는 영상이 지나가요.

거기에 매 초마다 똑.똑.똑. 하는 효과음과 함께 배경 음악이 어우러져 굉장히 중독성 있는 동영상을 만들어낸다는거죠.

영상도 준비되어 있는게 엄청 많은 것 같아요 한 3분동안 보고 있었는데도 중복되는게 없네요. 이거 컬렉션 모으는 사람도 분명히 있을 것 같다에 500원 겁니다!

이게 다가 아니라 세계 시간을 보여주는 기능도 있는데 이것도 예사롭지 않네요.

사용자 삽입 이미지

세계 시계가 시작되면 한꺼번에 보여주는게 아니고 다다다닥 하면서 로딩이 되죠.

사용자 삽입 이미지
벌써 이렇게 많은 국가와 사용자들을 확보하고 있어요 oㅁo

사용자 삽입 이미지
마찬가지로 각 국가/도시별 시간을 5초에 한번씩 바꿔가면서 보여주는데 배경에 깔려있는 음악은 계속 유지되고 있어요.

사용자 삽입 이미지


여기에 제작사의 니트 광고도 들어가는데 역시나 멋지네요 우와~
사용자 삽입 이미지

사용자 삽입 이미지
우측 상단에 있는 원형은 초마다 계속 돌고 모델과 의상도 계속 바껴요. 이미지 해상도가 낮은건지 모르겠지만 상당히 자연스럽게 처리했네요.

저도 당장 하나 달아버렸네요. 정말 단순해보이면서도 와우~한 이런 서비스... 역시 미래의 애플리케이션은 개발자보다는 기획자와 디자이너가 훨씬 더 중요할 것 같아요.

이런 걸 만든 곳은 어딘가... 거기까진 모르겠지만 이 서비스를 제공하는 곳은 일본의 UNIQLO라는 브랜드에요. 홈페이지 역시 깔끔하게 잘 만들었고 당연하다는듯이 RSS 피드를 제공하고 있어요.


최근에 개편된 롯데백화점 웹 사이트에 들어가면서 많은 로딩과 메뉴들로 짜증밖에 안났었는데 이렇게 단순하면서 깔끔한 구성... 국내에선 안되는 걸까요?

여튼 실버라이트로도 이런 재밌는 기획과 결과물이 늘어났으면 해요.
혹시 재밌는 기획이 있는데 구현이 어려우신 분 저에게도 얘기해주세요!
신고
Posted by gongdo
TAG uniqlock, UX


티스토리 툴바