2012-06-25

Chrome extensions까지 시작해버렸다.

구글 블로그를 커스터마이징하기 위한 첫번째 단계로 템플릿 소스 에디터를 만들고자 결심하였다. 템플릿 소스를 옮겨 붙여서 로컬에서 작업하는 것보다 크롬의 확장 프로그램(Chrome extensions)을 제작하여 크롬에서 바로 수정 작업을 할 수 있도록 하는게 좋겠다는 생각이 들었다. 그리하여 크롬 확장 프로그램 제작을 시작하였다... 의도치 않게 일이 꽤나 커지고 있다...ㅡ.ㅡ;
(덕분에 그동안 미뤄왔던 GIT 사용법을 익혀서 GIT Repository에 소스를 올리고 여러가지 테스트 중이다.)
크롬 확장 프로그램을 만드는 방법은 홈페이지(http://code.google.com/chrome/extensions/index.html)에 있는 내용을 참고로 차근차근 공부하고 있는데, 그리 어렵지 않다. Javascript를 할 줄 아는 사람이라면 누구나 쉽게 제작할 수 있도록 되어 있다. 현재 구글 블로그 HTML 편집 기능으로 템플릿 소스를 확인하는 곳으로 이동하면 URL창에 편집기를 사용할 수 있는 아이콘을 띄우는 작업까지 해두었다. 템플릿 소스를 수정할 수 있는 기능까지만 추가해서 개발소스를 오픈해서 진행하여야 겠다.
주로 평일 밤에만 작업할 수 있다는 제약이 있어서 진도가 빨리 안나가서 답답하지만... 뭔가 쓸만한 아웃풋이 나올 때까지 멈추지 않으리라 ㅋ

2012-06-17

Blogger 템플릿에 대한 공부가 필요하다.

레이아웃의 간단한 변형이나 CSS 수정 등은 쉽게 할 수 있으나, 조금 복합한 스크립트나 모바일 환경에 맞게 커스터마이징 하지 위해서는 템플릿 소스가 어떻게 Generate되는지 확인해보아야 겠다는 생각이 들었다.

일단 기본적으로 템플릿 파일에 대한 백업/복원(Export/Import) 기능을 제공하기 때문에, 웹상에 돌아다니는 Free Template들을 구할 수도 있다. 물론 나는 직접 만들고 싶기 때문에 패스.

지금까지 확인한 바로는 Google Blogger용 템플릿을 쉽게 작성할 수 있는 툴은 따로 없는 것 같다. 웹상에서 일일이 수정하는 것이 번거롭기 때문에 Export 받아서 수정해야겠다는 생각이 들게 되었다.
- 블로거 도움말 : http://support.google.com/blogger/bin/answer.py?hl=en&answer=46870&ctx=cb&src=cb&cbid=1vsolj0ep5s2h

수정시에 블로거에서 제공하는 편집기와 충돌이 나도 안되고 제공되는 위젯도 연동되어야 하기 때문에, 템플릿 코드를 파싱해서 작업할 수 있는 툴을 만들어야 겠다.

왠지 일이 점점 커지는 것 같아, 작심상일이 되지 않을까 하는 걱정이 된다... ㅡ.ㅡ;

p.s. 모바일 뷰에 해당하는 테마를 사용자 지정으로 설정해두면, 템플릿 HTML Edit시에 모바일 관련 코드도 함께 다룰 수 있게 되어 있다. 일종에 IF문으로 모바일 웹페이지에 대한 코드를 작성할 수 있다.

2012-06-16

구글 블로그 커스터마이징 하는중

블로깅 도구로 WordPress를 선택하지 않은 가장 큰 이유는 바로 커스터마이징을 위해서는 돈을 지불해야 한다는 점 때문이었다.

그에 반해 구글 블로그(Blogger)는 CSS와 HTML을 직접 수정할 수 있다. (약간에 제약이 있긴하다.)

다른 건 다 귀찮아도 남이 만들어 놓은 것 활용해서 이것저것 해보는 것이야 말로 프로그래머의 본능 아니겠는가? 게다가 구글에서 만들어 놓은 건데 활용하는 재미가 아주 솔솔하지 않겠는가? (마치 하둡을 활용하는 것마냥. ㅋ)

일단 기본 제공되는 템플릿과 관리도구로 할 수 있는 것을 최대로 활용하여 블로그를 디자인한 후, 템플릿 메뉴에서 'HTML 편집' 버튼을 클릭하면 내부소스를 직접 수정할 수 있다. 시작 전에 고급 사용자만 수정하라는 경고창이 뜨는데, 나는 초급 사용자이지만 과감하게 무시하고 '계속'을 클릭하였다. HTML 소스에서 구글에서 제공하는 XML namespace(b, data, expr)를 사용하는 element를 확인해보면, 대부분 변수 선언과 CSS 정의를 하고 있는 것을 확인할 수 있다. 여기서는 사실상 CSS를 변경하여 스타일에 변화를 주는 정도의 작업을 할 수 있고, 가젯의 위치를 바꾸거나 제거하기 위해서는 상단의 '가젯 코드 펼쳐서 보여주기' 체크박스를 클릭하여야 한다.

이제 블로그의 원본소스와 템플릿의 HTML 편집 화면을 비교해 가면서, 원하는데로 변경시켜보자. 내가 첫번째로 한 것은 글의 최하단에 존재하는 '작성자'를 글제목 밑으로 이동시키고자 하였다. 레이아웃 편집툴에서 위치를 조절할 수 있게 되어 있지만, 버그인지 실제로 페이지에 반영되지 않아 직접 수정하였다. 크롬의 개발자툴(크롬에서 단축키 F12)로 블로그의 원본 소스가 어떻게 생성되었는지 확인하여 '작성자'에 해당하는 element가 "<span class='post-author"로 시작한다는 것을 파악하였다. 그 다음은 HTML 편집 화면에서 해당 요소를 찾아 원하는 위치로 옮겨주면 된다. 물론 글제목 아래에 해당하는 element가 무엇인지도 파악해야 하고 우측정렬이라든지 여러 스타일 요소들도 변경해주어야 하는 번거로운 작업이다. 하지만 하고 나니 뿌듯하군.

결과는 지금 읽고 있는 이 글의 글제목 아래에 '작성자'와 '작성시간'이 옮겨져 있을 것을 보면 알 수 있을 것이다.

구글 블로그에 블로깅하기... 시작은 순조롭구먼... ㅋ

구글 블로그를 시작하다!

요즘 각종 SNS를 비록하여 자신의 생각을 전하기 위한 매체가 부각되고 있는 것 같다.

이제까지의 나는 외부와의 의사소통에는 매우 소극적이었다.

아마도 다수의 프로그래머 또는 IT인들이 그러할 것이라고 생각한다.

하지만 IT적으로도 오픈소스가 대세를 넘어 생활이 된 현재를 비추어 볼 때,

공유한다는 것이 세상을 더 나은 방향으로 이끈다는 것에 동의하는 입장이다.

나는 이제까지의 소극적인 자세의 폐해로 내 생각을 전달하는 것에 부담을 느낀다.

'지식의 공유', '생각의 공유' 라는 것이 매우 거창하게 느껴지기에

공개적인 글을 남기기가 꺼려진다.

이제라도 생각을 표현하기 위해 노력해야겠다고 마음을 먹어 보았다.


처음에는 WordPress를 이용하여 블로그를 시작해볼까 생각도 해보았지만,

템플릿이 너무 훌륭하여 내가 손볼 것이 하나도 없는 것에 오히려 흥미를 잃었다.

사실 블로깅에만 집중하고자 한다면 WordPress를 선택했겠지만,

심플한 페이지에서 나의 손때를 묻혀가며 블로그를 꾸며 나가고 싶은 마음에

구글 블로그에서 첫 발을 내딛기로 결심하였다.


표현의 어색함을 떨쳐내고 계속해서 블로깅을 할 수 있길 기원하며,

아자아자 파이팅!