처음으로 티스토리 스킨을 만들면서 내가 생각한 컨셉이나 개발 과정 등에 대해 이야기하고자 한다. 시작하기 전에는 "기본적인 front-end 코딩만 잘하면 쉽지 않을까" 라고 생각했었는데, 티스토리의 시스템(치환자)에 맞춰야 해서 마냥 쉽게 되진 않았다. 결국 티스토리의 치환자 페이지를 정독하면서 나름 스터디를 한 셈이 되어서, 여기서 그 정리를 하는 것이 목적이다.
블로그를 처음 만들 때부터 적용되어있던 티스토리 스킨 "#1"의 첫 인상은 나에게 꽤 좋았었다. 기술적인 이야기를 담는 내 블로그에겐 "예쁜 것들"이 크게 필요하지 않았고 코드와 내용의 가독성을 높일 수 있는 깔끔함이 중요했기 때문이다. 티스토리가 기본으로 제공하는 여러 스킨들도 구경해봤지만 "#1"만큼 깔끔한 것은 없다고 생각한다. 다만 티스토리에서 직접 만든 스킨이라기엔 납득하기 힘든 부족한 점이 몇 가지가 있었으니...
이러한 점들을 겪게 되면서 "내가 스킨을 만들어봐야겠다"고 생각하게 되었다. (그리고는 생각보다 많은 나의 밤/주말 시간을 들이게 되었지)
나는 디자이너도 아니고, front-end 기술을 전문으로 하지도 않는다. 따라서 디자인에 있어서는 큰 욕심을 부리지 않았고 다음과 같은 원칙을 세워 따라갔다.
이 정도가 내가 코딩을 시작하기 전에 생각해 둔 규칙이고, 나름 충실히 지켜서 만든 것 같다.
내가 아무리 Bootstrap을 벗어나서는 인간 다운 화면을 만들 수 없다지만, 흰검 테마와 좁은 화면 등을 구현하기 위해서는 Bootstrap을 주는 대로 사용할 수는 없었다. 다행히 Bootstrap은 customizing 메뉴를 통해서 세세한 요소들을 내가 직접 조작한 후 이를 반영한 소스를 받을 수 있게 해준다.
Bootstrap customizing의 예: 내가 필요한 부분만 체크해서 사용할 수 있다.
여기서 container 클래스의 폭을 750픽셀로 패드 화면일 때의 폭과 같게 맞추었고, 기본 글씨체도 "#1"에서 사용하는 Noto Sans로 설정했다. 자세한 설정 내용은 내 github 저장소에 업로드 된 config.json 파일을 직접 Bootstrap customization 페이지에 업로드 하면 확인할 수 있다.
여기서 뭔가를 설정한 후 다운로드를 하면 config.json 파일을 같이 주는데, 이 파일을 여기에 업로드하면 그 때 그 설정을 다시 확인할 수 있다.
처음 스킨을 제작하겠다 마음 먹는 분들이 있다면, 티스토리 치환자 가이드를 훑어보고 (시간 여유가 있다면 다 읽어보는 것도 좋다) 본인이 기존에 사용하고 있는 스킨의 skin.html 소스를 보며 이해해보는 것을 추천한다. 나도 이해가 안됐던 점이 skin.html 한 파일에 모든 페이지를 다 넣는다는 것이었다. 티스토리는 치환자를 통해서 첫 화면일 때, 글 화면일 때, 방명록 화면일 때 등 일정 기준으로 상황을 판단해서 알맞는 소스만 보여준다. 따라서 어떤 치환자가 어떤 상황에서 어떻게 작동하는 지를 체험해봐야 스킨을 만들 수 있다. 그래서 내 생각에 가장 도움이 될 방법이 이미 완성된 다른 스킨의 소스를 보는 것이다.
파렴치하게도 간단한 예를 들어보겠다.
<s_article_rep>
<div id="mArticle" class="article_skin">
<s_index_article_rep>
<div class="list_content">
<a href="/entry/making-bootstrap-skin-for-tistory" class="link_post">
<strong class="tit_post">Bootstrap 기반 티스토리 스킨: 첫 작업 기록</strong>
<p class="txt_post">처음으로 티스토리 스킨을 만들면서 내가 생각한 컨셉이나 개발 과정 등에 대해 이야기하고자 한다. 시작하기 전에는 "기본적인 front-end 코딩만 잘하면 쉽지 않을까" 라고 생각했었는데, 티스토리의 시스템(치환자)에 맞춰야 해서 마냥 쉽게 되진 않았다. 결국 티스토리의 치환자 페이지를 정독하면서 나름 스터디를 한 셈이 되어서, 여기서 그 정리를 하는 것이 목적이다.관련 링크 스킨 소개글 스킨 다운로드 0. 개발 동기 블로그를 처음 만들 때부터 적용되어있던 티스토리 스킨 "#1"의 첫 인상은 나에게 꽤 좋았었다. 기술적인 이야기를 담는 내 블로그에겐 "예쁜 것들"이 크게 필요하지 않았고 코드와 내용의 가독성을 높일 수 있는 깔끔함이 중요했기 때문이다. 티스토리가 기본으로 제공하는 여러 스킨들도 구경해봤지..</p>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="area_title">
<strong class="tit_category">
<a href="/category/Programming/Front-end">
Programming/Front-end
</a>
</strong>
<h3 class="tit_post"><a href="/entry/making-bootstrap-skin-for-tistory">
<!-- 이하 생략 -->
s_article_rep이라는 치환자는 "앞으로 당신이 쓴 모든 글을 여기서 반복해서 뿜어줄거야"라고 얘기한다. 그 안에서 두 가지 치환자가 있는 것을 볼 수 있는데, s_index_article_rep은 "여기 내용은 index 페이지(첫 페이지)에서만 보여줄거야", s_permalink_article_rep은 "이건 글을 눌렀을 때의 진짜 내용을 위한 곳이야" 라고 말한다. 따라서 첫 페이지에서는 글의 제목만 보여주고, 그 제목을 누르면 s_permalink_article_rep의 코드가 뿜어져 나올 것이다. 티스토리의 가이드를 여유롭게 따라가 보시길 바라지만, 그보다는 실제 코드와 함께 이해하면 더 좋을 것이다.
나도 Oreo 스킨을 제작하면서 치환자와 관련해서 해결하지 못한 점이 몇 가지 있다.
사실 더 이상 치환자를 알아보고 싶지는 않지만, 혹여 뭔가 알아내게 된다면 공유하겠다.
제작을 시작한 지 2주일 가량의 날짜가 지나고 난 뒤, 완성도를 위해 스킨 제작을 질질 끌다가는 집중력과 유지력이 떨어질 것 같아서 일단 어느 정도 선에서 마무리하고 공개했지만 아직 부족한 점들이 많다. 지금 당장은 하진 않을 거지만 꼭 업데이트가 필요한 부분을 정리해본다.
아래는 부족한 부분이지만 개선하자니 귀찮은 점들이다.
front-end 기술이 없다는 등 여러가지 이유로 front-end 작업을 싫어하는 편인데, 내 블로그를 직접 디자인하게 되니 타인의 기준과 협상하지 않아도 되고 내 맘대로 할 수 있어서 나름 재미있는 시간이 되었다. 그 결과물 또한 개인적으로는 만족하는 수준이다. 부추트랩 찬양 위에 나열해 놓은 업데이트 계획이라도 충실히 할 수 있는 내가 되었으면 하는 바람이다.
효과적인 코드 시각화, highlight.js (0) | 2016.11.28 |
---|---|
MathJax: 웹에서 Latex 수식을 쓰자 (0) | 2016.09.03 |
c3.js 여러 종류의 차트 사용법 (0) | 2016.08.22 |
Bootstrap container 폭 넓이 조정 (0) | 2016.07.30 |
Bootstrap modal 사이즈 및 위치 조절 (18) | 2016.03.22 |