지크의 팁박스

어제 오픈유어북을 설치한 소감을 간단하게 밝혔는데, 설치에 조금 애를 먹고도 그 방법을 기술치 않아 팁으로서 조금 부족한 감을 느꼈다. 그래서 지금이라도 설치법을 간단히 소개하고자 한다.

일단 오픈유어북을 설치한 화면을 보여주겠다. 아래 화면처럼 [요즘 읽고 있는 책] 과 [최근 읽은 책] 이 썸네일로 표시된다. 기본적으로는 1개씩 표시되지만, 환경설정에서 표시 갯수를 조정할 수 있다.

이제 설치법을 알아보겠는데, 소감글에서도 밝혔지만, 블로그에 책 관련 태그와 함께 ISBN 이 포함된 글을 적으면, 오픈유어북 스크립트가 이를 자동으로 인식, 표시해준다고 한다. 하지만 RSS 전문 공개가 아니면, 제대로 인식하지 못하는 듯 하다. 그리고 [요즘 읽고 있는 책] 과 [최근 읽은 책] 이 어떻게 구분되는지도 약간 애매한 구석이 있다. 그래서 깔끔하게 수동으로 책을 등록하는 법을 살펴보겠다.

기본적으로 오픈유어북에 가입을 하고, 오른쪽 상단의 검색창에 등록하고 싶은 책의 제목을 입력, 검색한다.

그러면 비슷한 제목의 책이 리스트로 나열되는데, 그중 정확한 책의 이름을 클릭하면 아래와 같은 창이 뜬다. 탭 메뉴를 보면 대충 어떤 기능인지 알 수 있을 것이다. 여기서는 책 등록을 하려는 것이기 때문에 [내서재]로 간다.

태그를 2개 이상 입력하고, 독서여부에서 독서중(요즘 읽고 있는 책), 읽은날(최근 읽은 책) 중 적당한 것을 체크한 다음, 밑의 [등록하기] 버튼을 누른다. 나머지 항목은 반드시 입력할 필요는 없다. 그러면 아래 화면처럼 자신의 서재에 책이 등록되는 것을 확인할 수 있다. 물론 스크립트가 제대로 삽입됐다면, 블로그에 책의 표지도 함께 표시된다.

다음은 스크립트의 설치 방법을 살펴보겠다.

스크립트는 오른쪽 상단의 [개인정보수정]을 눌러 나타나는 화면에서 [라이프로그]를 클릭하면, 아래 화면과 같은 표시 설정창이 나타난다.

그다지 어려운 항목은 없으므로, 인코딩과 스타일만 짚고 넘어가겠다.

보통, 인코딩은 국내 웹페이지는 EUC-KR 이 아닌가 싶겠지만, 요즘은 UTF-8 을 쓰고 있는 곳도 많이 있다. 티스토리만 해도 UTF-8 로 되어 있다.

스타일은 여타 스크립트와 달리, 오픈유어북에서 지정한 값과 블로그 스타일에서 지정한 값이 복합돼서 표시된다. 즉, 오픈유어북에서 [폭]과 [스타일] 중 "기본"을 지정하면, 나중에 블로그 스타일에서 아무리 값을 변경하더라도, 반영되지 않는다. 즉, 오픈유어북 스타일이 먼저라는 말이다.

일단은 자신의 블로그와 어울리는 스타일을 원할 것이기 때문에, [폭]은 알맞은 값으로, [스타일]은 "별도 CSS" 로 지정한다. 그러면 오른쪽 미리보기 화면 위에 스크립트 코드와 함께, [스타일 시트에 필요한 클래스] 라는 항목이 표시된다.

- oyb_width : 전체 폭
- oyb_title : 항목설명
- oyb_bottom : 온라인서재

스크립트 코드를 복사해서 자신의 블로그 스킨(HTML) 중 원하는 위치(보통은 사이드 바)에 붙여넣는다. 그리고 오픈유어북의 도움말대로, 아래 내용을 복사해서 자신의 스타일에 붙여넣은 다음, 필요한 항목을 수정하면 된다.

솔직히 전체폭(oyb_width)은 오픈유어북 설정에서 이미 지정했기 때문에 쓸모가 없어 보이고, 기본적인 스타일은 블로그의 스타일을 따라가기 때문에 크게 손봐줄 필요가 없다. 여기서는 [요즘 읽고 있는 책] 과 [최근 읽은 책] 이라는 타이틀을 표시하는 oyb_title 항목만 바꿔주면 될 것 같다. 블로그의 스킨마다 사이드 바의 타이틀을 표시하는 양식이 틀리겠지만, 보통은 스타일 문서에 헤더(#sidebar h3, h4...)로 구분하는 경우가 많다. 즉, 사이드 바 헤더에 지정된 양식을 복사해서 oyb_title 에 지정하면, 오픈유어북의 스타일이 블로그와 자연스럽게 조화되게 할 수 있다.

참고로, 나의 타이틀 양식은 이러하다.

이것으로 필요한 설명은 다 한 것 같다. 만일 오픈유어북이 사이드 바 안에 제대로 들어가지 않고 밑으로 밀려 내려온다면, 폭이 상대적으로 큰 것이므로 조금 줄이면 될 것이다.