Bootstrap 기반 티스토리 스킨: 첫 작업 기록

처음으로 티스토리 스킨을 만들면서 내가 생각한 컨셉이나 개발 과정 등에 대해 이야기하고자 한다. 시작하기 전에는 "기본적인 front-end 코딩만 잘하면 쉽지 않을까" 라고 생각했었는데, 티스토리의 시스템(치환자)에 맞춰야 해서 마냥 쉽게 되진 않았다. 결국 티스토리의 치환자 페이지를 정독하면서 나름 스터디를 한 셈이 되어서, 여기서 그 정리를 하는 것이 목적이다.

관련 링크

스킨 소개글
스킨 다운로드

0. 개발 동기

블로그를 처음 만들 때부터 적용되어있던 티스토리 스킨 "#1"의 첫 인상은 나에게 꽤 좋았었다. 기술적인 이야기를 담는 내 블로그에겐 "예쁜 것들"이 크게 필요하지 않았고 코드와 내용의 가독성을 높일 수 있는 깔끔함이 중요했기 때문이다. 티스토리가 기본으로 제공하는 여러 스킨들도 구경해봤지만 "#1"만큼 깔끔한 것은 없다고 생각한다. 다만 티스토리에서 직접 만든 스킨이라기엔 납득하기 힘든 부족한 점이 몇 가지가 있었으니...

1. 접근할 수 없는 메뉴가 너무 많다: 공지사항 목록은 어디서 볼 수 있는 것인가, 방명록은 어디에?
   
2. 공지사항에는 댓글을 달 수가 없다.
3. 내가 다는 댓글에 내 프로필 사진이 나타나지 않고 비회원일 때 나오는 회색 티스토리 로고가 뜬다.

이러한 점들을 겪게 되면서 "내가 스킨을 만들어봐야겠다"고 생각하게 되었다. (그리고는 생각보다 많은 나의 밤/주말 시간을 들이게 되었지)

1. 디자인 컨셉

나는 디자이너도 아니고, front-end 기술을 전문으로 하지도 않는다. 따라서 디자인에 있어서는 큰 욕심을 부리지 않았고 다음과 같은 원칙을 세워 따라갔다.

1. 색은 흰검 테마로 정한다. 그 외에 어떠한 색깔도 쓰지 않는다. 비전문가로서 다양한 색상을 추구하는 것은 ... 음 매우 좋지 않다고 생각하기에 검증된 투 톤 테마, 그 중에서도 흰검을 사용한다. (사실 그냥 개취)
   
2. Bootstrap을 사용하고, 초기 세팅을 제외하고는 customizing을 하지 않는다. 즉, Bootstrap의 기능과 디자인을 최선을 다해서 그대로 쓴다.
3. 모바일 / 패드 화면 이렇게 두 가지 반응형 화면 만을 고려한다. 가로로 넓어질 수록 가독성이 떨어진다고 생각하기 때문에 굳이 큰 화면을 위한 디자인을 잡지 않기로 했다. 데스크탑에서는 패드일 때와 같은 화면을 보여준다.
4. 반응형 메뉴는 싫다. 모바일 / 패드 화면에서도 메뉴는 그대로 보이게 한다. (이건 그냥 내 취향임)
5. 버튼을 사용할 시에 구구절절한 텍스트 대신 Font Awesome 아이콘으로 대체한다. 아이콘이 디자인에서 매우 중요한 비중을 차지한다고 생각하기 때문에 효과적으로 대체할 수 있는 부분을 최대한 많이 찾고자 했다.
6. 글씨체는 "#1"이 사용하는 것을 그대로 사용한다. 구글과 어도비의 Noto Sans를 자체적으로 사용할 수도 있지만, 티스토리에서 마련해 놓은 CDN을 굳이 피해갈 이유가 있을까.
   

이 정도가 내가 코딩을 시작하기 전에 생각해 둔 규칙이고, 나름 충실히 지켜서 만든 것 같다.

2. Bootstrap 초기 세팅 (customizing)

내가 아무리 Bootstrap을 벗어나서는 인간 다운 화면을 만들 수 없다지만, 흰검 테마와 좁은 화면 등을 구현하기 위해서는 Bootstrap을 주는 대로 사용할 수는 없었다. 다행히 Bootstrap은 customizing 메뉴를 통해서 세세한 요소들을 내가 직접 조작한 후 이를 반영한 소스를 받을 수 있게 해준다.

Bootstrap customizing의 예: 내가 필요한 부분만 체크해서 사용할 수 있다.

여기서 container 클래스의 폭을 750픽셀로 패드 화면일 때의 폭과 같게 맞추었고, 기본 글씨체도 "#1"에서 사용하는 Noto Sans로 설정했다. 자세한 설정 내용은 내 github 저장소에 업로드 된 config.json 파일을 직접 Bootstrap customization 페이지에 업로드 하면 확인할 수 있다.

여기서 뭔가를 설정한 후 다운로드를 하면 config.json 파일을 같이 주는데, 이 파일을 여기에 업로드하면 그 때 그 설정을 다시 확인할 수 있다.

3. 티스토리 치환자

처음 스킨을 제작하겠다 마음 먹는 분들이 있다면, 티스토리 치환자 가이드를 훑어보고 (시간 여유가 있다면 다 읽어보는 것도 좋다) 본인이 기존에 사용하고 있는 스킨의 skin.html 소스를 보며 이해해보는 것을 추천한다. 나도 이해가 안됐던 점이 skin.html 한 파일에 모든 페이지를 다 넣는다는 것이었다. 티스토리는 치환자를 통해서 첫 화면일 때, 글 화면일 때, 방명록 화면일 때 등 일정 기준으로 상황을 판단해서 알맞는 소스만 보여준다. 따라서 어떤 치환자가 어떤 상황에서 어떻게 작동하는 지를 체험해봐야 스킨을 만들 수 있다. 그래서 내 생각에 가장 도움이 될 방법이 이미 완성된 다른 스킨의 소스를 보는 것이다.

파렴치하게도 간단한 예를 들어보겠다.

<s_article_rep>
    <div id="mArticle" class="article_skin">
        <s_index_article_rep>
            <div class="list_content">
                <a href="[##_article_rep_link_##]" class="link_post">
                    <strong class="tit_post">[##_article_rep_title_##]</strong>
                    <p class="txt_post">[##_article_rep_summary_##]</p>
                </a>
            </div>
        </s_index_article_rep>

        <s_permalink_article_rep>
            <div class="area_title">
                <strong class="tit_category">
                    <a href="[##_article_rep_category_link_##]">
                        [##_article_rep_category_##]
                    </a>
                </strong>
                <h3 class="tit_post"><a href="[##_article_rep_link_##]">
                <!-- 이하 생략 -->

s_article_rep이라는 치환자는 "앞으로 당신이 쓴 모든 글을 여기서 반복해서 뿜어줄거야"라고 얘기한다. 그 안에서 두 가지 치환자가 있는 것을 볼 수 있는데, s_index_article_rep은 "여기 내용은 index 페이지(첫 페이지)에서만 보여줄거야", s_permalink_article_rep은 "이건 글을 눌렀을 때의 진짜 내용을 위한 곳이야" 라고 말한다. 따라서 첫 페이지에서는 글의 제목만 보여주고, 그 제목을 누르면 s_permalink_article_rep의 코드가 뿜어져 나올 것이다. 티스토리의 가이드를 여유롭게 따라가 보시길 바라지만, 그보다는 실제 코드와 함께 이해하면 더 좋을 것이다.

나도 Oreo 스킨을 제작하면서 치환자와 관련해서 해결하지 못한 점이 몇 가지 있다.

1. 공지사항에서 댓글을 썼으면 좋겠는데 못찾겠다.
2. 방명록을 쓴 사람과 답변을 쓴 사람들의 프로필 이미지를 박을 수가 없다.
3. 미디어 로그는 치환자 자체가 무엇인 지 알 수가 없다.

사실 더 이상 치환자를 알아보고 싶지는 않지만, 혹여 뭔가 알아내게 된다면 공유하겠다.

4. 업데이트 계획

제작을 시작한 지 2주일 가량의 날짜가 지나고 난 뒤, 완성도를 위해 스킨 제작을 질질 끌다가는 집중력과 유지력이 떨어질 것 같아서 일단 어느 정도 선에서 마무리하고 공개했지만 아직 부족한 점들이 많다. 지금 당장은 하진 않을 거지만 꼭 업데이트가 필요한 부분을 정리해본다.

1. wysiwyg 에디터를 통해서 쓰여지는 블로그 글의 디자인: 글의 가독성이 떨어지기 때문에 꼭 개선이 필요하다.
2. Font Awesome의 부분적인 아이콘만 가져다 쓸 수 있는 방안: 아이콘 몇 개 쓰자고 전체를 가지고 오는 것은 넘나 비효율적이다.
3. 사이드바 설정 기능: 아직 파악하지조차 못한 기능인데, 내가 만든 사이드바 요소들이 블로그 관리창을 통해서 제어할 수가 없다. 스킨으로서의 기본적인 사항이라고 나는 생각하기 때문에 개선하고 싶다. <s_sidebar>를 넣는 것을 까먹어서 그랬다, 해결.
   

아래는 부족한 부분이지만 개선하자니 귀찮은 점들이다.

1. 카테고리 메뉴가 현재 상위 메뉴만 보이는데, 하위 메뉴까지 효과적으로 나타낼 수 있는 방안을 마련해보고 싶지는 않다.
2. 구현하지 않은 사이드바 요소가 많다. 달력, 링크, 트랙백 등이 있는데, 내가 사용하지 않아서 필요성을 못 느끼고 있다.
3. 구현하지 않은 페이지가 있다. 위치로그, 미디어로그
   

5. 마무리

front-end 기술이 없다는 등 여러가지 이유로 front-end 작업을 싫어하는 편인데, 내 블로그를 직접 디자인하게 되니 타인의 기준과 협상하지 않아도 되고 내 맘대로 할 수 있어서 나름 재미있는 시간이 되었다. 그 결과물 또한 개인적으로는 만족하는 수준이다. 부추트랩 찬양 위에 나열해 놓은 업데이트 계획이라도 충실히 할 수 있는 내가 되었으면 하는 바람이다.

• 카카오스토리
• 트위터
• 페이스북

'Programming > Front-end' 카테고리의 다른 글

효과적인 코드 시각화, highlight.js  (0)	2016.11.28
MathJax: 웹에서 Latex 수식을 쓰자  (0)	2016.09.03
c3.js 여러 종류의 차트 사용법  (0)	2016.08.22
Bootstrap 기반 티스토리 스킨: 첫 작업 기록  (4)	2016.08.21
Bootstrap container 폭 넓이 조정  (0)	2016.07.30
Bootstrap modal 사이즈 및 위치 조절  (17)	2016.03.22