필자가 운영하는 모든 블로그의 스킨을 변경했습니다. 아직 목표의 80% 정도밖에 수정하지 못했으므로, 틈틈이 시간을 투자하여 수정/개편해 나갈 예정입니다.
필자의 블로그의 뼈대는 티스토리 블로거 'Vanns Kang' 님이 공개하신 'Tirium'을 기반으로 합니다1. 최근 반응형 웹의 이슈로 말미암아 티스토리 플랫폼에 적용할 수 있는 다양한 반응형 스킨이 발표되고 있습니다. 그중에서 2~3가지23를 두고 어떤 스킨을 사용할까 고민하던 중에 'Tirium'을 보게 되었고, 커다란 고민 없이 선택하게 되었습니다.
티스토리(TISTORY)
오래전부터 다음에서 티스토리를 홀대한다는 이야기가 한동안 블로거들 사이에서 소리소문없이 전해졌었습니다. 과거에 티스토리는 최고의 블로그 서비스4였지만, 지금 시점에서 바라보면 최고라고 부르기는 애매한 상황입니다. 다른 블로그 서비스는 시간이 지나면서 다양한 기능으로 무장하고 있는데, 티스토리는 한동안 정체되어 있던 것이 사실이기 때문입니다. 새로운 기능 추가는 고사하고, 사용자가 수정을 요구했던 버그 수정조차 이루어지지 않았습니다.
다행인 점은 다음에서 티스토리에 대해 다시 관심을 가지기 시작한 점입니다. 티스토리 메인 홈의 개편과 더불어 모바일 앱 출시 등 최근 들어 긍정적인 행보를 보이고 있습니다. 앞으로 한 단계 더 발전한 티스토리의 모습을 보고 싶습니다.
티스토리 서비스의 장점
티스토리의 가장 커다란 장점은 사용자가 제어할 수 있는 영역이 많다는 점입니다. 다른 블로그 서비스와는 다르게 스킨 변경 등에 제한이 거의 없으며, 사용자의 입맛에 알맞게 변경하여 사용할 수 있습니다. 이 점이 티스토리의 가장 커다란 매력이라고 생각합니다.
필자의 블로그 스킨은 티스토리에서 지원하는 이런 장점으로 말미암아 변경할 수 있었습니다.
티스토리에 바라는 점
티스토리에 바라는 사항은 여러 가지가 있습니다만, 그중에서 하나를 손꼽으라면 단연 에디터(편집기)입니다. 새로운 에디터로 변경하면서, 편집기에 여러 가지 기능은 추가되었지만 안타깝게도 불편한 부분도 많아졌습니다.
에디터에서 가장 불편한 부분은 이미지 정렬 부분5과 에디터의 모습과 블로그에 반영되는 모습이 다른 영역이 많다는 점입니다. 가장 커다란 문제는 에디터에서 강제로 Style을 바꿔 글을 다 쓰고 난 후, HTML 소스코드를 검사해야 하는 점입니다. 이 부분은 쉽게 재연도 가능하며, 사용자에게 요청도 많이 받았을 텐데 왜 아직도 고쳐지지 않는지 궁금합니다.
블로그 스킨 - Tirium
'Vanns Kang'님이 제작한 'Tirium'은 최근 웹 트렌드를 반영한 스킨입니다. Bootstrap을 기반으로 한 스킨이며, 반응형 웹 페이지를 지원합니다.
Bootstrap
Bootstrap은 트위터(Twitter)의 UI 디자이너인 Mark Otto와 개발자인 Jacob Thornton이 제작한 프런트 엔드 프레임워크입니다. Bootstrap으로 명명한 것에서 알 수 있듯이, 웹 사이트를 구축하는데 도움을 주는 도구로서 HTML, CSS, JavaScript Template, jQuery, 그리고 다양한 UI 컴포넌트 등을 제공합니다.
Bootstrap에 대한 자세한 내용은 Bootstrop의 Official Site에서 알아보시는 것을 추천합니다.
Tirium
'Vanns Kang'님이 명명한 'Tirium'은 <Tirium 비하인드 스토리>라는 글을 통해, 'Tirium'의 명명 과정과 만들게 된 계기를 설명하고 있습니다. 지난 번에 댓글을 통해 인사를 드렸지만, 이렇게 멋진 스킨을 무료로 배포해 주셔서 감사하다는 메시지를 전하고 싶습니다.
'Tirium'의 주요 기능은 <Tirium 티스토리 스킨 공개>에서 확인하실 수 있습니다. 최근 이슈가 되는 반응형으로 블로그를 제작할 수 있을 뿐만 아니라, 'Vanns Kang'님의 아기자기한 아이디어를 내재한 매력적인 스킨이라고 생각합니다. 이뿐만 아니라, 스킨 구조가 매우 단순하면서도 체계화가 잘 되어 있어 블로거의 입맛대로 수정하기가 쉽습니다6. 스킨을 사용하고 수정할 때, 가장 우려스러운 점은 저작권 문제인데, 'Tirium'은 기본적으로 Creative Common 4.0 License를 따르며, 상업적 이용을 제외한 변경/수정이 가능하다고 밝히고 있습니다.
필자가 변경한 Tirium Skin
필자는 'Tirium' 기본 뼈대에서 큰 변화를 주지 않았습니다. 보기에는 크게 변한 것 같지만, 블로그 상단의 이미지 영역을 축소하고, 아이콘의 위치를 조정한 것을 빼면 크게 다르지 않습니다. 다만 블로그의 폰트와 글자의 크기, 줄 간격, 정렬 기준 등을 조정하여, 필자의 입맛에 알맞게 변경했습니다. 이곳저곳을 변경했지만, 대표적인 3부분을 선택하면 다음과 같습니다.
프린트 영역 조정
'Tirium' 스킨에서 가장 아쉬웠던 부분은 인쇄(PRINT) 부분이었습니다. 기본 'Tirium' 스킨에서 인쇄를 하게 되면, 콘텐츠뿐만 아니라 필요하지 않은 다른 영역도 함께 출력되어 인쇄물의 품질이 매우 좋지 않았습니다. 인쇄와 관련된 CSS가 매우 복잡할 것으로 예상하여 쉽지 않은 작업으로 예상했는데, Bootstrap을 기반으로 제작된 스킨이어서 생각보다 매우 쉽게 조정할 수 있었습니다.
블로그에서 글 상단에 위치한 프린트 아이콘을 눌러 보면 아시겠지만, 제목, 작성일자, 콘텐츠 내용, 간단한 저작권 표시만 출력되어 콘텐츠를 읽는 데 큰 불편함 없이 읽을 수 있습니다. 이뿐만 아니라, 글의 상단에 프린트 아이콘을 배치하여, 사용자가 인쇄도 쉽게 할 수 있도록 배려했습니다.
Syntax Highlighter 반영
'Syntax Highlighter'는 'Alex Gorbatchev'님이 제작하여 배포하는 도구로 프로그램 소스코드가 포함된 문서의 가독성을 향상할 수 있는 매력적인 도구입니다. 블로그에 작성하는 콘텐츠에 프로그래밍 소스코드를 기술해야 한다면, 필수적으로 설치해야 할 도구라고 생각합니다. 물론 Bootstrap 자체에서 지원하는 기능도 깔끔하지만, 개인적으로는 'Syntax Highlighter'를 추천합니다.
필자가 블로그 스킨을 변경할 때마다 가장 먼저 설치하는 도구 중 하나입니다. 티스토리에서 'Syntax Highlighter'를 설치 및 사용하는 방법은 어렵지 않으므로 여기에서 별도로 소개하지는 않겠습니다.
Syntax Highlighter를 적용하니, 사이트의 접속 속도가 느려지는 관계로 사용을 잠시 보류하고, Bootstrap에서 제공하는 태그 모음으로 대체하고 있습니다. Syntax Highlighter의 속도 향상 방법에 대해 알아봐야겠습니다.
각주 영역 CSS 조정
필자는 글을 쓸 때, 각주(Footnote)를 많이 활용합니다. 별도로 Reference 영역을 두고 관리하기도 합니다만, 대부분 각주 기능을 활용합니다. 'Tirium'의 기본 스킨에서는 본문 내용과 각주 영역의 구분이 명확하지 않고, 폰트 설정이 마음에 들지 않아 조정하게 되었습니다.
각주 영역에 테두리를 두어 직관적으로 각주 영역임을 표기했으며, 최대한 단순하게 구성하여 'Tirium'의 매력을 훼손하지 않도록 주의를 기울였습니다.
마치면서
기존에 작성했던 블로그의 내용을 새로운 스킨에 알맞게 변경하는 작업을 진행하고 있습니다. 그동안 작성했던 글이 생각보다 많아 시간이 오래 걸리고 있습니다. 물론 이 과정 중에서 오래된 정보를 담은 글은 삭제하거나 새롭게 갱신하는 작업도 병행 중입니다.
새로운 옷으로 갈아입은 필자의 블로그의 첫인상이 어떤지 궁금합니다. 마지막으로 다시 한번 'Vanns Kang'님께 이렇게 멋진 블로그 스킨을 배포해주셔서 감사하다는 메시지를 전합니다.