네이버 오픈캐스트(Opencast) 웹 스티커 붙이기 및 오픈캐스트 위젯

요즘 Naver의 서비스 중 하나인 오픈캐스트(OpenCast)라고 하면,
왠만한 사람들은 알 듯 싶다.(뭐 사실 그중에서도 관심있는 사람이랄까..)
혹시 모르고 관심이 있는 분은 아래 링크에서 자료를 참고해 보시기 바란다.

2009/01/22 - [Review/Web] - 네이버 오픈캐스트(OpenCast) Beta Tester 체험기 그리고 2009년 네이버(Naver)의 변화

필자 같은 경우 티스토리를 사용하기 때문에 Naver과의 나름 연동성을 주기 위해 네이버의 오픈캐스트를 따로 운영해서 필자의 글을 연결하고 있다.
(물론 게을러서 오픈캐스트의 발행은 아주 매우 느리다. ㅠ.ㅜ;)

오픈캐스트를 통해서 자신의 글을 발행하게 된다면,
(원래가 이 취지만으로 생긴 서비스는 아니다.!)
네이버를 통한 유입을 늘일 수 있다. 필자도 사용전/후가 꽤나 차이가 났었다고 말할 수 있다.

발행등 관리는 네이버의 오픈캐스트 페이지에서 하면 되고,
이를 자신의 블로그와 연동하는 서비스가 궁금할 것이다.

그 경우 오픈캐스트 위젯을 사용하면 된다.

2009/05/10 - [Review/Web] - Naver OpenCast Widget

위 링크를 따라가면 볼 수 있는 위젯은 네이버 자체에서 제공해주는 위젯은 아니고, 다른 싸이트에서 제공해주는 위젯이다.
처음에 어떻게 설치하나 궁금했는데, 위 링크로 가면 알 수 있다.

저 방식으로 오픈캐스트 위젯을 사용하면,
약간!! 복잡하고 귀찮은 면이 있지만, 비쥬얼이 있고, 직접 보기 편하다. (오픈캐스트에 접속하지 않아도 된다.)
가장 큰 단점으로는 공간을 약간 엉성하게 차지하여 블로그상에 배치하기 애매하다.
완전 긴것도 아니고 넓은 것도 아니고, 크기가 애매하다.

다른 블로그들을 방문하다보면 오픈캐스트 위젯보다는 오픈캐스트 스티커를 더 많이 활용한다.
네이버에서 지원해주고 있으면 만들면 사진파일로 던져주기 때문에 간단하다.

필자의 오픈캐스트 스티커의 경우 위와 같이 생겼다. ^_^
필자의 경우 처음 위 스티커를 설치하고 있는 블로그들을 보면어 어디서 하지 하고 엄청 찾은 적이 있다.
오픈캐스트 메인페이지에서는 이상하게도 볼 수 없었고,
특히 "스티커" 라는 용어를 몰라서 그냥 모르고 오픈캐스트 위젯만 설치하었다.
(스티커 용어를 모르면 검색해도 안나와서 달고 싶어도 못다는 상황이었다 ㅠ.ㅜ)

각자의 개성대로 스티커를 만들 수 있는 곳은 다음과 같다.
(사실 뭐 정도의 자유도를 없고, 어느정도 크기와 디자인 수정이 가능하다.)

오픈캐스트 웹스티커 : http://campaign.naver.com/opencast/sticker/

※ 위와 같은 화면으로 접근하여 자신의 스티커를 생성할 수 있다.
    단 네이버 아이디로 로그인을 해야한다.
    조금 의아한 것은 보통 로그인을 하면 자신의 아이디로 생성된 캐스트를 바로 연결해줘야하는데, 그런것도 없다.
    다 수동이다. -..-;
    또한 클릭시 링크 싸이트도 자신이 설정해 줘야한다.~

스티커 만드는 법은 위 링크로 따라 들어가보면 아주 간단한 방법으로 스티커(사진파일 1장)을 내 컴퓨터에 저장하고, 다른 곳에 올릴 수 있다.

필자는 점점 지저분해지는 공간문제를 해결하기 위해
일단 이 두가지를 합쳐서 하나로 만들었다.

당장 바뀐 화면을 올리자면 위와 같다.
상단 화면이 오픈캐스트 위젯이고, 하단이 오픈캐스트 웹스티커이다.

※ 참고로 오픈캐스트 위젯은 네이버에서 제공하지 않는다. 네이버에서는 웹스티커만 제공하고 있다.

원래대로 라면 웹스티커를 클릭하면 네이버의 오픈캐스트로 날라가야 정상이지만,
필자는 스티커를 클릭하게 되면,
오픈캐스트 위젯 이 나오도록 설정하였다.

즉, 기본화면은 스티커만 존재하고 클릭하게 되면 오픈캐스트 위젯을 통해 화면에 보여진다.
(지금 하단에 있는 웹 스티커를 눌러보면 아실 것이다. ^_^)

일단 위와 같이하려면 그림파일을 클릭시 화면이 접어지고 펴지는 기능이 있어야 한다.~!
그래서 구글신의 힘을 빌려(무척간단한거지만...) 코드를 하나 따왔다.

<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';"
href="javascript:void(0)"> 이부분에 클릭할 그림파일이나 글씨</a>
<div style="DISPLAY: none">
요부분에 보여줄 오픈캐스트 위젯 코드 또는 보여줄 화면
</div>

위방식으로 해당부분에 이미지를 삽입하게 되면,
그 부분을 누르면 오픈캐스트가 나오고,
다시 누르면 없어지게 된다.
즉 html script로 접기/펴기 의 내용이다.~!

위의 스크립트를 삽입하면 끝!

고민하지 말고 스크립트 한방으로 블로그를 깔끔하게 정리합시다요 ^_^~