올블로그도 문을 닫고 요새는 메타블로그 서비스가 많이 위축된 모습이지만, 그래도 다음 뷰는 아직 서비스를 이어가고 있습니다. 최근에는 다음 뷰 추천위젯을 개편한 모양이에요.
기존의 플래시 embed 방식의 위젯에서 iframe 자바스크립트로 바뀌어, 플래쉬를 지원하지 않는 모바일 장치에서도 쓸 수 있게 되었습니다. 어차피 코드만 바뀐 것이기 때문에 삽입방법 자체는 기존과 같습니다(HTML코드 복사 - 붙여넣기). 자세한 내용은 트윗을 참고하세요.
어라? 다음 뷰가 뭔가 바뀌었다!
— H.F.Kais (@hfkais) June 30, 2013
mixsh inside에 올라온 믹스 업 위젯 업데이트 글에, 몇몇 분들이 ‘blogger에 믹스 업 위젯 다는 법을 모르겠다’ 는 리플을 남기셨더군요. 그러고 보니 믹스 업 위젯 페이지에도 ‘블로그 스킨편집 메뉴에서 본문 하단위치 아래에 아래의 코드를 붙여 넣어 주세요’ 라고 만 쓰여 있고 위젯설치 도움말에도 blogger에 설치하는 방법은 빠져 있더라고요. 그래서 간단하게나마 믹스 업 위젯을 blogger에 설치하는 방법을 소개하고자 합니다. 우선은 신형 ‘레이아웃’ 방식에서 설치하는 방법에 대해 알려 드리겠습니다. 클래식 템플릿에 적용하는 방법도 별반 다르지 않으니 참고하시기 바랍니다.
1. 믹시 가입과 로그인
믹스 업 위젯을 설치해야 하니, 가장 먼저 믹시에 가입해야겠죠? 믹시 홈페이지에 접속한 뒤, 오른쪽 상단의 ‘회원가입’ 링크를 눌러 회원가입 폼을 작성합니다. 아이디, 닉네임, 이메일, 비밀번호만 입력하면 되는 아주 간단한 방식입니다. 회원가입을 마쳤으면 로그인을 합니다.
2. 피드 주소 변경
로그인한 뒤, 다시 오른쪽 상단의 ‘블로그관리’ 링크를 눌러 관리 페이지로 들어갑니다. 블로그를 등록하지 않았다면 자신의 블로그를 등록합니다. 중간에 RSS주소를 입력하는 부분이 있는데, 이 주소는 자신의 블로그에서 확인할 수 있습니다. 블로그 하단을 잘 찾아보면 ‘블로그 피드 : 게시물(ATOM)’ 이라 적힌 부분이 있는데, 여기에 링크된 주소를 따다 쓰면 됩니다. blogger 유저라면 기본적으로
http://(사용자 설정 주소).blogspot.com/feeds/posts/default?alt=rss
형식의 RSS피드 주소를 쓰게 됩니다. 제 블로그 주소는 http://hfkais.blogspot.com 이니, http://hfkais.blogspot.com/feeds/posts/default?alt=rss 주소를 쓰게 되지요. 자신의 블로그 주소를 참조해 알맞게 적어줍니다. 파이어폭스나 사파리를 쓴다면 더욱 쉽게 피드 주소를 복사할 수 있습니다.
3. 블로그 소스코드에 믹스 업 코드 삽입
믹시에서의 설정이 다 끝났으면, 믹스 업 위젯 코드를 받아 설치할 차례입니다. 믹스 업 위젯 페이지에서 코드를 받을 수 있습니다. 위젯을 설치할 블로그를 선택하고, 조회수 표시 옵션을 선택한 뒤, 이용중인 블로그 서비스에서 Blogger에 체크하고 확인 버튼을 누릅니다. 확인 버튼 하단에 생성된 코드를 복사합니다.
다시 Blogger로 돌아와서, 대시보드의 ‘레이아웃’ 링크를 클릭합니다.
상단 메뉴 중 ‘HTML 편집’ 링크를 클릭합니다. 템플릿 수정의 ‘도구 템플릿 확장’ 에 체크한 뒤, 소스를 살펴봅니다. 소스 중에서 <data:post.body/> 태그를 찾습니다(브라우저의 ‘찾기’ 혹은 Ctrl+F 단축키를 사용하면 편함).
이 태그는 게시물의 본문을 표시해주는 태그입니다. 이 태그 바로 아래에, 아까 복사해 둔 믹스 업 위젯 코드를 붙여 넣은 뒤 ‘템플릿 저장’ 버튼을 누릅니다. 별 문제가 없다면 변경사항이 저장되고, ‘블로그 보기’ 링크를 누르면, 새롭게 바뀐 모습을 볼 수 있습니다. 제대로 설치되었다면 글 본문 아래에 믹스 업 위젯이 나타날 것입니다.
만약 ‘이 글은 믹시에 등록되어 있지 않습니다’ 라는 메시지가 나온다면, 아직 RSS피드와 글 주소가 믹시에 수집되지 않은 것입니다. 믹시의 ‘블로그 관리’ 페이지로 가서 수동 수집을 실행하거나, 자동 수집이 완료될 때까지 좀 더 기다리면 믹스 업 위젯이 제대로 나타납니다.
만약 믹스 업 위젯을 인덱스나 아카이브에서는 보이지 않고, 게시물 페이지에서만 보이도록 하려면 아래 태그를 삽입하면 됩니다.
<b:if cond='data:blog.pageType == "item"'>
<믹스 업 스크립트 소스>
</b:if>
이렇게 해두면, 아이템 페이지 즉 ‘게시물 페이지’ 에서만 믹스 업 위젯이 나타나게 됩니다. 인덱스나 아카이브 페이지에서는 나오지 않고요.
4. Blogger 클래식 템플릿을 사용한다면
기본적인 방법은 위와 동일합니다. 다만 몇몇 태그를 다르게 적용해야 하는데, 이는 클래식 템플릿과 신형 레이아웃 형식에서 쓰이는 템플릿 태그가 각각 다르기 때문입니다. 레이아웃에서는 <data:post.body/> 태그를 찾았지만, 클래식 템플릿에서는 <$BlogItemBody$> 태그를 찾아서 써야 합니다. 그리고 믹스 업 위젯 페이지에서도, Blogger(클래식) 을 선택해서 설치 코드를 새로 생성해야 합니다.
Blogger에서 제공하는 기본 템플릿(스킨)이라면 위의 방법으로 쉽게 믹스 업 위젯을 달 수 있습니다. 다른 곳에서 만든 템플릿 또는 직접 만든 템플릿을 쓴다면 방법이 약간 다를 수도 있습니다만, 어차피 템플릿 태그는 같으니 큰 문제는 없을 겁니다.
(전에 ‘구글 Blogger 구형 템플릿에 믹시 mixUP 위젯 달기’ 라는 글을 썼었는데, 이때 쓰인 코드는 믹시에서 업데이트하기 전 코드입니다. 지금은 수정되었으므로 믹시에서 바로 코드를 복사해 써도 문제 없습니다.)
그저께 유니클로 캘린더에 대한 소개 글을 올렸었죠. 블로그의 사이드 바에도 위젯을 추가시켰습니다. 물론 동영상 구경하기에는 블로그 위젯보다 홈페이지에서 직접 보는 게 더 나아 보입니다.
유니클로 캘린더를 멍하니 구경만 하다, 문득 이런 스타일의 동영상을 직접 만들어보면 어떨까 하는 생각이 들었습니다. 시부야나 미나토, 긴자 같은 곳을 직접 찍을 순 없지만 이곳 광화문 사거리는 가능하니까요.
먼저 유니클로 캘린더의 동영상을 자세 살펴봤습니다.
꽤 오랜 시간 촬영한 동영상을 매우 빠르게 재생시키고, 화면의 일부에 블러(blur) 처리를 했네요. 마치 정교하게 만들어진 미니어처를 접사로 촬영한 느낌입니다. 블러 또는 포커스가 안 맞은 부분을 보니 최신 DSLR카메라의 동영상 기능을 이용한 것 같기도 하네요.
그래서 저도 꽤 긴 시간의 동영상을 촬영하고, 재생시간을 빠르게 한 뒤, 블러 처리를 해서 동영상을 만들었습니다. 따로 캠코더나 동영상 기능이 되는 DSLR을 가진 게 없어, 그냥 똑딱이의 동영상 촬영 기능을 이용했습니다(후지 F40fd). 아래 동영상이 그 결과물입니다(재생 시 HQ버튼을 눌러주세요).
…망했네요. 해상도도 낮고 색도 우중충해서 미니어처 느낌이 별로 나질 않아요 ㅠㅠ 아무래도 샤픈 필터를 왕창 먹이던가, HD캠을 사던가 해야 할 것 같네요. 640x480 짜리로는 힘들어요… 휴~
다음에 또 다시 찍어서, 색상 보정도 좀 하고… 그렇게 해서 만들어야 할 것 같습니다….
예쁜 아가씨들이 컬러풀한 의상을 입고 여러 가지 퍼포먼스(?)를 펼치던 플래시 시계, 유니클락을 기억하십니까? 본래 목적인 시계보다는 화면이 넘어갈 때마다 바뀌는 퍼포먼스 영상 때문에 큰 인기를 끌었었죠. 블로그용 위젯(파츠)도 제공되어 많은 분들이 블로그 사이드 바에 추가시켜 두었던 걸로 기억합니다. 또한 유니클락과 비슷한 컨셉트의 광고가 제작되어 전파를 타기도 했었죠.
그런 유니클로에서, 이번에 새로운 플래시 작품을 선보였습니다. 시계에 이어 이번엔 캘린더입니다.
전작인 유니클락과 비슷한 컨셉트의 캘린더입니다. 월/일/요일 표시가 되고, 설정한 지역에 따라 간단하게 날씨도 표시됩니다. 왼쪽에는 일본 내 명소들을 찍은 ‘동영상’ 이 끊임없이 재생되는데요, 블러(blur)처리와 빠른 재생을 통해 마치 미니어처 같은 느낌을 줍니다. 개미만큼 작은 사람들이나 자동차가 우르르 움직이는 걸 보면 엄청 귀엽네요.
물론 이번에도 자사 제품광고는 빠지지 않았습니다. 끊임없이 재생되는 동영상을 클릭하면, 모자이크 모양의 정지영상으로 바뀝니다. 각각의 모자이크는 유니클로 제품의 썸네일로 이루어져 있습니다. 동영상에서 파란 하늘이었던 부분은 파란색 옷으로, 빨간색 기둥이었던 부분은 빨간색 옷으로 표시되는 식이지요. 각 제품의 썸네일을 누르면 큰 사진으로 볼 수 있고, 다시 한 번 누르면 온라인 매장으로 연결됩니다.
아직 스크린세이버는 나오지 않았지만, 블로그에 달 수 있는 위젯(파츠)은 공개되어 있습니다. 간단한 설정을 몇 가지 거쳐 발급받은 코트를 블로그에 넣으면, 멋진 유니캘린더를 블로그에서도 볼 수 있죠.
유니캘린더 블로그 파츠 달기
네 번째 순서에서 위젯의 크기를 지정했는데, 단순히 Large와 Small로 되어 있습니다. 그런데 자신의 블로그 디자인과 사이즈가 맞아 떨어지지 않는다면? 물론 고민할 필요는 없습니다. HTML 코드만 아주 살짝 수정해주면 되니까요.
위 스크린샷은 생성된 코드를 메모장에 붙여넣기한 것입니다. 노랗게 표시된 부분의 숫자만 바꿔주면 됩니다. 앞서 설정한 Large나 Small은 단순히 가로형, 세로형으로 나뉜 것일 뿐이죠. Large(가로형)일 경우 width와 height의 값을 2:1 비율로, Small(세로형)일 경우 width와 height를 1:2로 바꿔주면 됩니다. 위 스크린샷에는 424x212px로 설정되어 있네요. 어차피 플래시 오브젝트이기 때문에 비율만 잘 맞춰서 넣어주면 예쁘게 들어갑니다.
그나저나 이 플래시 위젯, 트래픽도 꽤 먹는 것 같고 시스템 자원도 꽤 차지하는 것 같네요. 역시 잠깐 달아두었다 바로 떼어버릴지도 모르겠습니다.
구글의 블로그 서비스인 Blogger 에는 두 가지 템플릿 모드가 있는데, ‘레이아웃’과 ‘클래식 템플릿’이 바로 그것입니다. 레이아웃은 2006년 이후 Blogger가 구글에 인수된 뒤 개발된 새로운 페이지 구성 방식이고, 템플릿은 이전부터 써오던 HTML 기반의 구형 페이지 구성 방식입니다. 요새는 대부분 쉽고 간편한 레이아웃 방식을 많이 쓰지만, 저는 아직까지도 구형 템플릿 방식을 고수하고 있습니다(절대 게을러서 그런 게 맞습니다 ㅠㅠ).
아무튼 구형 Blogger 템플릿을 쓰는 저는, 예전에 Mixsh의 mixUP 위젯을 블로그에 달려고 했다 포기했던 적이 있었습니다. 처음엔 Blogger 서비스를 지원하지 않아서였고, 나중엔 신형 레이아웃 방식의 Blogger만 지원해서 포기했던 것이죠. 물론 지금도 구형 템플릿 방식의 Blogger는 공식적으로 지원하지 않습니다.
그런데 mixUP 위젯의 설치코드를 들여다보다, 문득 어떤 코드들이 눈에 띄어 그 부분을 수정해줬더니 정상적으로 설치가 되었습니다. 이번 글에선 그 방법을 소개하겠습니다.
mixUP 위젯 페이지에서 설치할 블로그를 선택하고, 조회수 표시 옵션을 선택한 뒤, 자신이 사용중인 블로그를 선택합니다. 저는 Blogger를 사용하고 있기 때문에, Blogger를 선택했습니다. ‘확인’ 버튼을 누르면 코드가 생성됩니다. 어떻게 생긴 코드인지 볼까요?
자바스크립트 코드가 보입니다. post.url 이라고 적힌 문자열과 post.timestamp 등의 문자열이 보입니다. 게시물의 URL주소와 게시 시각을 추출하도록 되어있나 봅니다. blogger에 부여된 플랫폼 구분 숫자는 6이군요.
그런데 이 코드들은 Blogger의 구형 템플릿에서 사용되는 코드들이 아닙니다. 구형 템플릿의 코드들은 <$템플릿용 태그$> 와 같은 형식을 가집니다. 위 스크린샷에 보이는 코드들은 신형 레이아웃에 쓰이는 코드들이네요. 때문에 구형 템플릿을 사용하는 제 블로그에는 이 코드를 적용할 수 없습니다.
참고 삼아, 워드프레스용 mixUP 코드를 살펴볼까요? 외부 사이트의 위젯이나 가젯 등을 설치할 때, 워드프레스용으로 제작된 코드가 있다면 Blogger 구형 템플릿용으로 수정해서 쓸 수 있습니다. 템플릿 태그 방식이 비슷하거든요. 아까 본 코드보다 이쪽이 더 깔끔하네요. URL과 게시 시각 부분을 추출하기 위한 태그가 보입니다. 워드프레스에 부여된 플랫폼 구분 숫자는 5네요.
그럼 이제, 이 코드를 가지고 Blogger 구형 템플릿에서도 동작할 수 있도록 수정해 볼까요? 노랗게 표시된 부분만 수정해주면 됩니다.
Blogger 구형 템플릿에서 ‘게시물의 URL주소’ 를 표시해주는 태그는 <$BlogItemPermalinkUrl$> 입니다. ‘게시물의 게시 시각’ 을 표시해주는 태그는 <$BlogItemDateTime$> 입니다. Blogger 템플릿용 태그는 대/소문자를 구분하기 때문에, 조심해서 써줘야 합니다. 노랗게 표시된 부분을 바꿔주고, 플랫폼 숫자를 다시 6으로 바꿔줍니다. Blogger 구형 템플릿용 태그는 Blogger 도움말 사이트에서 찾아볼 수 있습니다.
완성된 코드를 Blogger 대시보드의 ‘템플릿 - HTML편집’ 에서 추가합니다. 본문 바로 아래에 넣으면 되겠군요. <ItemPage> </ItemPage> 태그를 쓰면, 게시물 페이지에서만 표시되게 할 수 있습니다. <ItemPage>태그와 </ItemPage>태그 사이에 믹시 코드를 넣으면 되겠죠?
드디어 mixUP 위젯이 정상적으로 설치되었습니다. 많이 많이 눌러주세요~
글
전체 댓글
