최근의 블로그 기능 업데이트

구글 Blogger에 처음 둥지를 틀었을 때부터 디자인적으론 큰 변화가 없었다. 내부적으론 몇 번의 변화가 있었는데, 우선 Blogger 템플릿 구조가 변하면서(템플릿 -> 레이아웃 방식) 한번 크게 바뀌었고, 중간중간 타 블로그에서 유행하는 각종 기능들을 추가하는 식으로 업데이트를 적용했다.

최근에도 내부적으로 수정이 있었고, 오늘은 몇몇 기능의 라이브러리가 충돌을 일으켜 과감하게 걷어내고 최신 버전으로 갈아치웠다. 간략히 정리해둔다.

이미지 라이트박스 업데이트

– 오늘 블로그를 보는데, 트위터 카드 글에 삽입해 둔 트위터 임베드가 정상적으로 작동하지 않았다. 트위터 임베드는 blockquote 태그를 이용해 내용을 삽입하고 이를 스크립트로 처리하여 모양을 잡는데, 스크립트가 작동하지 않았던 것. 브라우저의 콘솔 창을 살펴보니 트위터 쪽 스크립트가 오류를 내고 있었다. (어제만 해도 잘 돌아갔던 것 같은데... 요새 이것저것 바꾸고 있는 트위터에서 임베딩 스크립트를 변경한 거 아닐까 추측만 하고 있다.)

– 워낙 이것저것 갖다 붙인 스크립트가 많아 뭐가 문제인지 단번에 찾기 어려웠다. 하나씩 제거해가며 테스트해본 결과 Mootools 1.11 라이브러리가 있으면 트위터 임베드 스크립트가 오류를 일으켰다. 이것은 작년 봄에 이미지 라이트박스 기능을 추가하며 넣은 것이다. Mootools를 기반으로 한 Slimbox라는 플러그인을 썼었다. Blogger에 맞게 커스터마이징 된 것을 다시 내 블로그에 맞춰 약간 손본 것이다. 관련 글 : 블로그에 라이트박스 기능을 적용했습니다.

– 각각의 코드를 살펴보니 꽤 오래되었다. 혹시나 싶어 최신 버전을 찾아보았다. Mootools는 작년 여름에 1.5.1까지 올라왔고, Slimbox는 무려 2년 전에 Slimbox2 버전이 올라왔다. 다행스럽게도(?) Slimbox2는 Mootools 대신 jQuery 기반으로 라이브러리가 변경되었다.
Mootools - http://mootools.net/blog/2014/08/29/mootools-1-5-1-release
Slimbox2 - https://github.com/cbeyls/slimbox

– Slimbox2의 코드가 꽤 바뀌었지만 기본 컨셉은 그대로고 관련 마크업도 그대로여서 기존 게시물을 수정할 필요는 없었다. 여전히 이미지를 감싸고 있는 a 태그에 rel="lightbox-g1" 코드를 추가하는 식으로 작동했다. 그런데 기존 버전은 Blogger에 맞게 커스터마이징 되어 라이트박스의 이미지가 고정적이었으나, 새 버전은 따로 변경되지 않아 이미지 사이즈가 그대로 나왔다. 즉 2048px로 넣은 이미지는 그 사이즈 그대로 나오고 있는 것. 기존 게시물들을 다 수정해야 할 처지에 놓였다.

– 셋업 매뉴얼에도 별다른 항목은 없는 상황. jQuery 코드를 뜯어고치면 될 것 같은데 막 function b, function d 이런 식으로 되어있어 수정이 쉽지 않았다. 다행스럽게도 서포트 그룹에서 라이트박스의 최대 크기에 대한 글을 찾을 수 있었고, 수정된 코드를 얻을 수 있었다. 이 코드를 이용해 이미지를 창 크기에 맞춰 볼 수 있게 되었다. 관련 링크 : https://groups.google.com/forum/#!msg/slimbox-support/pQgbrpQrthI/3v6G80HABD4J

– 이미지 라이트박스는 잘만 ZTVD5000 50인치 풀HD TV 구입 및 사용기 글과  새해맞이 강화도 마니산 일출 사진 글에 적용되었다. 이제 사진도 크게 볼 수 있으니 진짜 사진 좀 많이 올려야겠다.

Syntax Highlighter(문법 강조) 업데이트

– 블로그에 html이나 css 코드 등을 보여주고 싶어 올 초에 Prettify라는 자바스크립트 라이브러리를 적용했다. pre 태그를 사용하고 별도의 클래스를 선언하면, 스크립트가 알아서 코드에 색을 넣어주거나 하는 것. prettyPrint for Blogger 글에서 적용된 모습을 볼 수 있다.

– 근데 너무 안 예뻤다.

– 찾아보니 Prism.js 라이브러리를 많이 쓰는 듯. 적용 방법은 Prettify와 비슷하고, 좀더 예뻤다. 여섯 가지 테마 중 기본도 괜찮았지만, 'OKAIDIA' 라는 테마가 맘에 들었다. 그래서 적용. '구글 Blogger용 트위터 카드 태그' 글에 적용했는데 괜찮은 것 같다.

자잘한 변경

– 메인(인덱스) 페이지와 아카이브(각 월별, 검색결과별 리스트) 페이지에 축약 스타일을 쓰고 있었다. 본문의 윗부분 일부만 보여주고 나머지는 감추는 것. 원래는 본문 아랫부분에 페이드를 넣고 그림자도 보였었는데, 그냥 심플하게 보이기 위해 그림자는 빼버렸다.

– 동시에 전체 내용 보기 버튼도 간략하게 바꿨다. 기존에는 '게시물 내용의 일부입니다. 전체 내용을 보려면 클릭하세요' 식으로 쓰여 있었는데, 뭐 너무 장황한 것 같아 간단하게 '전체 내용 보기' 만 남겨놓고 버튼식으로 테두리를 쳤다.

– 구형 브라우저 지원을 위한 IE7.js 스크립트가 조건부 주석으로 박혀있었는데, 이것도 떼버렸다. 구형 브라우저를 쓸 정도의 사람이 내 블로그에 올 일이 거의 없고, 내 블로그가 포털도 아니고... 먼 옛날 IE6까지도 챙겨주던 시절의 산물이다.

작년엔 32개의 글을 썼는데, 올핸 벌써 30개나 썼다. 가볍게 자주 쓰되 쓸모 없지는 않게 블로그를 써야겠다.