LT blog

2007년에 태터툴즈 1.1.2.1로 블로그를 개설하면서 자체 스킨을 만들어 사용했었다. 당시 각종 플러그인을 적용했었는데, 이후 서버를 이전하면서 플러그인을 다시 설정할 자신이 없어 텍스트큐브 스킨 게시판 에서 받은 스킨이나 텍스트큐브  기본 스킨인 ‘Coolant’를 수정하여 최근까지 사용해왔다. 이후 텍스트큐브 스킨제작 레퍼런스 를 참고하여 스킨을 준비해왔고, 최근 어느 정도 완성되어 블로그에 적용하였다.

전반적인 디자인

깔끔하면서도 본문에 집중할 수 있으면서 각종 운영체제와 웹브라우저에서 최대한 유사하게 보이는 디자인을 원했다. 오랜 기간에 걸쳐 조금씩 작업을 진행하다 보니 초기 디자인과 비교해 복잡해지기는 했지만 처음 생각했던 것에서 크게 벗어나지 않았다고 생각한다.

블로그에 스킨을 적용한 화면 via 우분투용 Google 크롬.

기본적으로 우분투용 Google 크롬 (이하 ‘크롬’) 5.0.396.0 dev를 기준으로 제작하였고, 우분투용 Google Chromium  5.0.391.0 (45775) Ubuntu, 우분투용 파이어폭스  3.6.3, 우분투용 오페라  10.10, MS 윈도용 크롬 5.0.396.0 dev, MS 윈도용 파이어폭스 3.6.3, MS 윈도용 사파리  4.0.5 (531.22.7), MS 윈도용 오페라 10.53, MS 윈도용 IE  8.0에서 확인하였으며, 아쉽게도 맥 OS에서는 확인하지 못하였다.

우분투용 크롬을 기준으로 제작한 스킨이지만, 우분투용 크롬 자체의 문제 때문에 이 환경에서는 한자와 고정폭 글꼴이 의도와 다르게 보인다. 또한^주1 우분투용 파이어폭스와 오페라에서는 블로그 메뉴 부분을 표현하는 데에 조금 문제가 있고, 기타 시스템 환경에 따라서 사소한 표현의 차이가 있기는 하지만, 대체로 의도한 바와 비슷한 모습을 보여준다. 한글 글꼴은 네이버에서 제작한 ‘나눔글꼴 ’을 적용하였다.

운영체제와 웹브라우저 등 시스템 환경에 따른 블로그 메뉴와 글 제목 표현 비교.

※ 오페라는 운영체제에 관계없이 멋대로 한글 글꼴을 바꾸어 표시하고, 나머지 MS 윈도용 웹브라우저에서는 ‘나눔명조’를 제대로 표현하지 못한다.

스킨 환경 설정

스킨을 수정하거나 서버를 이전할 때마다 플러그인을 다시 설정해야 하는 불편함 때문에 일부 플러그인과 Google AdSense, Google Analytics 등의 코드를 스킨에 추가하였다^주2. 또한, 플러그인의 수정이 필요한 부분 플러그인 소스를 미리 수정하여 적용하였다^주3.

기본 플러그인

기본적으로 텍스트큐브 확장팩에 포함된 플러그인 중에서 꼭 필요한 플러그인을 선택하여 적용하였다. 이중 아래 플러그인은 필요에 의해 소스를 수정하였다. 수정된 기본 플러그인은 추후 확장팩을 업그레이드할 때 새로운 파일로 바뀌므로 따로 복사해두었다.

• JP Thumbnail List / Sidebar / Cover View(JP_ThumbnailListViewTT): 기본 설정 수정.
• 새창으로 열기 링크(NewWindowLink): 소스에서 이미지의 태그를 닫지 않은 부분 수정.
• 팀블로그 설정(ST_TeamBlogSettings): 기본 설정 수정.

추가 플러그인

기본 플러그인으로는 표현하지 못하는 기능을 추가하거나, 부족한 기능을 보완하기 위하여 플러그인을 추가로 적용하였다. 몇몇 플러그인은 소스를 수정하였다.

• Daum View(Textcube1.8) (YP_DaumView)
• 엽기민원 님이 제작한 플러그인으로, Daum View에 글을 보내기 위해 적용.
• Draco Anti Spam (DracoAntiSpam)
• 드라코 (@DracoKr )님이 제작한 플러그인으로, 스팸을 걸러내기 위해 적용.
• Draco BRtoBRslash (DracoBRtoBRslash)
• 드라코님이 제작한 플러그인으로, 텍스트큐브에서 <br /> 태그를 <br>로 변경하는 등의 문제가 있어 이를 일괄적으로 XHTML 표준 형식으로 변형하기 위해 적용.
• Draco Counter (DracoCounter)
• 드라코님이 제작한 플러그인으로, 그래프 형태로 방문자 수 추세를 표시하는 등 유용한 정보를 얻을 수 있어서 적용. 사이드바에 기본적으로 삽입.
• Draco Foot (DracoFoot)
• 드라코님이 제작한 플러그인으로, 카테고리별로 글 아래에 다른 문구를 적기 위해 적용.
• FootNote (FootNote)
• 기본 플러그인을 도아 (@doax )님이 수정한 것으로, 각주 풍선 도움말을 이용해 내용을 쉽게 전달할 수 있도록 하기 위해 적용^주4. 이 블로그에 맞도록 소스 및 설정을 수정하여 기존 FootNote 플러그인 대체.
• PS Image EXIF View (PS_ImagesExifView)
• PICSTORY™ 님이 제작한 플러그인으로, 예전 글 ‘텍스트큐브 1.8.x에 ‘사진 EXIF 정보 표시 플러그인’ 적용하기 ’에서와 같이 소스를 수정하여 적용.
• TAG RELATION(TextCube) (YC_TagRelation)
• 영민C (@YoungminC )님, 혜민아빠 (@hongss )님, 정기 님, 룬룬 님이 제작·수정한 플러그인으로, 태그를 검색해 유사한 주제의 글 목록을 보여주기 위해 적용. 이 블로그에 맞도록 설정을 수정하였고, ul 태그를 닫지 않아 아래쪽 레이아웃이 깨지는 오류 수정.
• 리퍼러 로그 정리 (RefererURLBeautifier)
• 리퍼러 통계에 검색어를 표시하기 위해 적용.
• 최근 댓글 목록 (RecentRP)
• DARKLiCH (@DARKLiCH )님이 제작한 플러그인으로, 방문자의 댓글만을 표시하기 위해 적용. 이 블로그에 맞도록 소스를 수정하여 사이드바에 기본적으로 삽입.
• 페이스북 연결 (FaceBookConnect)
• inureyes (@inureyes )님이 제작한 플러그인으로, 글 아래에 Facebook Like 버튼을 달기 위해 적용.

기타

플러그인 외에 아래 항목들을 스킨에 추가하였다.

• Google AdSense 
• 최대한 조잡하지 않고 글을 읽는 것에 방해되지 않는 수준에서 원하는 곳에 광고 코드를 스킨에 삽입.^주5
• Google Talk chatback badge 
• 방문자가 Google Talk를 통해 대화할 수 있도록 하기 위해 적용.
• Google Apps 계정 사용자는 https://www.google.com/talk/service/a/DOMAIN/badge/New에서 설정 가능.
• Google Analytics , Daum 웹인사이드 
• 웹로그 분석을 위해 두 서비스 코드를 스킨에 삽입.
• IE6 no more 
• IE6 no more 캠페인에 참여하기 위해 IE6(Internet Explorer)에서만 보이는 알림 코드 삽입. 이 스킨은 IE6 환경에서 어떻게 보이는지 전혀 고려하지 않았음.
• SNS 공유 및 RSS 피드 구독 관련
• Twitter , Facebook , Google Buzz , 미투데이  등 SNS에 공유 버튼 추가.
• RSS 피드 구독을 위한 버튼 추가.
• 기타
• Twitter Updates, 설문 링크, 우분투 카운터, 트위터 follower 수 카운터, 피드 구독자 수 카운터 등 추가.

IE6으로 접속했을 때 메뉴 위에 나타나는 알림 화면 via 우분투용 Google 크롬.

글 아래에 나타나는 SNS를 통한 공유 및 RSS 피드 구독 관련 바.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.