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

Submit comment.

  1. Favicon of http://whatauwant.tistory.com BlogIcon 기차니스트 2007.10.07 22:04  comment URL  Edit/Remove  Submit comment.

    와, 이런 부분에서도^^ 뛰어나십니다.
    수정 하고 싶지만, 으레 귀찮네요ㅋㅋ

    • Favicon of http://gongdo.tistory.com BlogIcon 공도 2007.10.07 23:00  comment URL  Modify/Remove

      기차니스트님의 블로그는 카테고리가 트리식으로 되어 있지 않아서 이 문제에 영향 받지 않을 거에요^^

  2. Favicon of https://spinning-around.tistory.com BlogIcon 2007.10.08 02:22 신고  comment URL  Edit/Remove  Submit comment.

    유니클락을 오늘 처음 달았는데 덕분에 문제를 알아채기도 전에 해결했네요. 감사합니다 >.<

  3. Favicon of http://steelleg.tistory.com BlogIcon 무쇠다리 2007.10.11 10:47  comment URL  Edit/Remove  Submit comment.

    오호...
    그랫었군요. 그랬던 거였군요.

  4. Favicon of http://gifarang.com BlogIcon 유노 2007.10.12 14:20  comment URL  Edit/Remove  Submit comment.

    UNIQLOCK 달고나서 이상하길래 찾아봤더니 이런 해결책이 있었군요.
    좋은정보 알아갑니다;.

  5. Favicon of http://gongdo.tistory.com BlogIcon 공도 2007.10.12 19:56  comment URL  Edit/Remove  Submit comment.

    히히 역시 많은 분들이 같은 문제를 겪고 계셨군요 ^^

  6. Favicon of http://www.korweb.net BlogIcon 코웹 2007.10.29 15:32  comment URL  Edit/Remove  Submit comment.

    공도님 주말내내 카테고리로 고민하던 중 검색을 통해 공도님 덕분에 해결할 수 있어서 대단히 감사합니다! 원인이 유니클락에 있을것도 같다는 생각까지는 했으나, 이렇게 쉽게 해결 할 수 있게 해주셨네요^^ 수고하세요!!!

  7. Favicon of http://2s2k.com BlogIcon Uk 2007.11.19 22:27  comment URL  Edit/Remove  Submit comment.

    공도님 좋은 정보 감사드려요~ :)

  8. Favicon of http://gongdo.tistory.com BlogIcon 공도 2007.11.20 01:07  comment URL  Edit/Remove  Submit comment.

    헤에 같은 문제로 찾아오시는 분들이 꾸준히 있네요. 오우 보람보람~

  9. Favicon of https://blog.divershigh.com BlogIcon SUPERCOOL. 2007.12.19 05:27 신고  comment URL  Edit/Remove  Submit comment.

    정말 감사드립니다. 엄청 골치 썪고 있었는데 한방에 해결됬습니다. 감사합니다.

  10. Favicon of https://blog.divershigh.com BlogIcon SUPERCOOL. 2007.12.19 05:28 신고  comment URL  Edit/Remove  Submit comment.

    아 그리고 파이어폭스 유저입니다. 공도님 블로그 깨져서 나옵니다. 사이드바가 지금 이 아래쪽으로 붙어있습니다.-_-;; 즐거운 하루되세요

    • Favicon of http://gongdo.tistory.com BlogIcon 공도 2007.12.19 09:45  comment URL  Modify/Remove

      에고 이거 기본 스킨에서 약간 수정했더니 이모양-_-;
      수정하기가 상당히 귀찮아서 그냥 내버려 두고 있었어요.
      휴우... 언제 한 번 갈긴 해야 하는데. . .

  11. Favicon of https://imanager.tistory.com BlogIcon 아이매니저 2008.03.05 14:58 신고  comment URL  Edit/Remove  Submit comment.

    와우~!!! 님덕분에 오류 알기 전에 제대로 달았네요..

    감사합니다..

  12. Favicon of http://sjin.co.cc BlogIcon 없음 2008.03.10 07:18  comment URL  Edit/Remove  Submit comment.

    UNIQLOCK 없애버릴까 하다가 덕분에 고쳤네요 :)
    감사합니다~^ㅁ^

으하핫 오늘 회사가 한가해서 포스팅 폭발하네요!

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

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

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

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

Submit comment.

  1. 이창연 2007.10.02 15:56  comment URL  Edit/Remove  Submit comment.

    멋진 아이디어 입니다.
    UCC 와 광고의 접목이라.
    번갈아 나오면 사용자들이 부담없이 즐길 수 있겠는데요?

  2. 이창연 2007.10.02 16:45  comment URL  Edit/Remove  Submit comment.

    uniqlock을 한참 보다가 (화면보호기도 설치했습니다.) 문뜩 생각이 들었는데요.
    이게 볼만한건. UI 측면 못지 않게 모델이 한몫 단단히 한다는겁니다.
    모델과 배경이죠. 모델60, 배경 40 정도.
    모델은 얼굴 30, 몸매 30, 동작 40 정도의 비중인듯 합니다. (제 주관에서요)
    결국 이거 UCC 로 하면 못봐줄지도 모른다는 생각이..

    • Favicon of http://gongdo.tistory.com BlogIcon 공도 2007.10.02 17:30  comment URL  Modify/Remove

      인정!
      UCC쪽은 아무래도 저것과 똑같은 동작을 하는게 아니라 뭔가 다른 방향이어야겠죠...
      밑에다가 OME(Oh My Eyes!) 버튼 만들어서 5 OME이상 받으면 자동으로 삭제되게 하는 자정 작용을 만들면 재밌을지도요^^

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


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

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

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

사용자 삽입 이미지

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

사용자 삽입 이미지

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

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

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

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

사용자 삽입 이미지

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

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

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

사용자 삽입 이미지


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

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

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

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


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

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

Submit comment.

  1. 이창연 2007.10.02 15:54  comment URL  Edit/Remove  Submit comment.

    이거 정말 중독성 있군요.

    일단 아가씨들 동작이... (몸매도...)

  2. 이창연 2007.10.02 15:54  comment URL  Edit/Remove  Submit comment.

    모든 메뉴에 걸쳐 기획자의 창의력이 돋보입니다.

    창의적이라는건 이런걸 두고 하는 말인거 같군요.

  3. Favicon of https://gongdosoft.com BlogIcon gongdo 2007.10.02 16:03 신고  comment URL  Edit/Remove  Submit comment.

    이런걸 볼때마다 '역시 세상은 내가 해야 할걸 다 해먹었어 젠장!' 이딴 소리나 할 수밖에 없다니까요. 창연님도 좋은 아이디어 있으면 좀 풀어보시죠 :)

  4. Akari 2007.10.02 16:13  comment URL  Edit/Remove  Submit comment.

    플래시 액션스크립트의 거장이신 유고나카무라가 만든걸로 알고있습니다- ^^

  5. Favicon of http://cafe.naver.com/mssilverlight BlogIcon 패러다임 2007.10.02 17:21  comment URL  Edit/Remove  Submit comment.

    충격적인 UX를 경험했습니다. 덜덜덜

  6. Favicon of http://www.netfighter.pe.kr BlogIcon 테디 2007.10.02 17:41  comment URL  Edit/Remove  Submit comment.

    빠지게 하는 뭔가가 있는것 같습니다.

  7. Favicon of http://cafe.naver.com/mssilverlight BlogIcon 패러다임 2007.10.02 17:47  comment URL  Edit/Remove  Submit comment.

    음악을 계속 듣고 있다가 보니 1시간 정도 지나면 "독도는 일본땅!" 이라고 외치지 않을까 하는 묘한 레드썬이 존재 하는듯.. -_-''

  8. 이창연 2007.10.04 01:34  comment URL  Edit/Remove  Submit comment.

    아 이거...
    시간대 별로 나오는 동영상과 음악이 다릅니다.
    지금 새벽시간에 보니까 음악도 몽롱하고 동영상도 잠자는 여자가 많이 나오고 불도 꺼져 있어요.
    이거 참....

  9. Favicon of https://whatauwant.tistory.com BlogIcon 기차니스트 2007.10.07 02:11 신고  comment URL  Edit/Remove  Submit comment.

    와, 멋진 리뷰입니다.

    저도 얼마전에 이것에 공감하고 글을 하나 써서 트랙백 보냅니다^^

    • Favicon of http://gongdo.tistory.com BlogIcon 공도 2007.10.07 13:07  comment URL  Modify/Remove

      오~ 그런 스토리가 있었군요.
      히야 진짜 보면 볼 수록 걸작이네요.
      여태껏 봤던 어떤 캠페인보다도 멋져요.

  10. Favicon of http://www.luk.kr BlogIcon 예삐 2008.03.06 11:56  comment URL  Edit/Remove  Submit comment.

    영상의 흐름이 예술..예전 어떤 블로그에서 봤다가 링크 따라서 몇시간 동안 감상을 했었지요..반복적인 영상과 음악이 사람을 몽롱하게..시계인지 광고인지.

  11. 윤지송 2008.03.06 20:13  comment URL  Edit/Remove  Submit comment.

    아하... 여기에 글이 있었구나 잘보고 갑니다 ^^