스킨 레이아웃

티스토리 스킨 제작

이전에 부트스트랩5로 티스토리 스킨 제작하는 내용을 포스팅한 적이 있는데 부트스트랩은 의외로 티스토리와 사용하기에 나쁘지 않은 프레임워크입니다. 다만 순수한 HTML/CSS 로 만들어 쓰는게 더 만족감이 있긴 합니다.

티스토리 블로그는 역사가 오래되다 보니 개발자나 혹은 디자이너들이 직접 블로그도 운영하면서 오랜기간에 걸쳐서 코딩한 스킨들이 많이 있습니다. 워드프레스 같이 다양성은 주기 어렵지만서도 오래 가지고 갈것이니까 기왕이면 조금 시간이 걸려도 하드코딩을 하며 조금씩 수정하는 사람들도 있는 듯 합니다.

리뉴얼 계획, 친효 스킨의 사용

필자도 이번 기회에 이 블로그의 스킨을 리뉴얼 할 계획인데요. 코딩 사이트를 운영하면서도 친효님 스킨을 오래 사용한 이유가 있습니다.

첫번째 이유는 그분은 개발자는 아닌 것 같지만 디자인 쪽을 좀 하셨던 것 같고 무엇보다 본인 스스로 블로그를 오래 운영하면서 책도 쓰신 분이라서 검증된 부분이 있기 때문입니다. 친효스킨은 지금은 무료 공개는 아닌 걸로 아는데 티스토리 중수 정도 블로그들이 꽤 사용하고 성능도 괜찮은 것으로 알려졌습니다. 조회수야 뭐 스킨 보다는 내용이 좋아야 나오는 건데 잘 사용하는 분들이 꽤 있는 것으로 봤습니다. 친효님이 옛날에 블로그 롤모델이었죠. 지금도 조회수 자체가 아주 많은 건 아닌데 알리 익스프레스나 이런 상품 쪽 컨텐츠 쪽에서 독보적이라고 생각합니다. 또 지금도 스킨을 업그레이드 하기 위한 연구를 많이 하시는 걸로 알고 있습니다. 티스토리 블로그 에서는 친효님이 선망의 대상이지요.

두번째는 어느 시점에 가면 조회수도 많아지고 블로그에 글이 많이 쌓여서 스킨을 바꾸기가 부담스럽습니다. 섣불리 바꿨다가 구글 SEO에 안좋은 영향을 미치는 경우가 있다고 하는데 그 이유는 잘 알기 힘듭니다. 현재의 구글 SEO 레벨이나 네이버 노출 레벨이 있는데 스킨을 잘못 바꿔서 불이익이 있지 않을까 - 에 대한 두려움입니다. 블로그는 처음에 돈을 들이더라도 좋은 스킨을 쓰는게 좋습니다, 그런데 당시에는 이 IT블로그가 이 정도로 클지를 몰랐기 때문에 아~ 뭐 스킨에 그렇게 많이 신경쓰고 돈까지 쓸 필요가 있을까? 라고 생각했기 때문이지요.

세번째 이유는 프론트엔드 만드는 법을 잘 몰라서 입니다. 반응형 페이지나 자바스크립트는 연구를 많이 해야 하는 분야인데 이 블로그의 포스팅을 보면 WEB에 대한 내용보다는 C계열, Java같이 정적인 프로그래밍 언어(데스크탑)의 비율이 높습니다. 실제로 조회수에 있어서도 C언어 링크드 리스트 이런게 의외로 조회수가 많습니다.

그렇다고 티스토리 스킨이 뭐 아주 많은 지식(리액트 같은)이 필요한 건 아니지만 이것도 마감을 잘 하려면 어느 정도 디자인 감각도 필요하고 꽤 코드양이 깁니다. HTML 이긴 하지만 그래도 몇천줄은 되는 것 같은데 웹에 그 정도로 노력을 투자한 적이 별로 없어서 그냥 친효 스킨을 조금씩 수정하며 사용하고 있습니다.

그러던 중 최근에 부트스트랩5로 스킨을 제작하고 서브 블로그에 적용하면서 어느 정도 티스토리 치환자 사용법도 알게 되었고 또 이제는 좀 장기적으로 직접 관리하는 스킨을 만들고 싶다는 생각에 조금씩 하다가 직접 제작하려는 결심을 합니다.

*이 포스팅 시리즈에서는 티스토리 스킨 제작 과정을 공유하려고 합니다. 블로그로 정리 하다보면 몇개가 될지는 모르겠는데 부트스트랩 스킨도 10개 이상 포스팅을 하고 완결했으니 그 정도가 되지 않을까 싶습니다.

부트스트랩 5 티스토리 스킨 제작하기

부트스트랩 5 티스토리 스킨 제작 글 모음입니다. 시리즈로 포스팅해서 순서대로 참고할 수 있습니다. bootstrap 5 grid 시스템 - bootstrap 5 기초 1 (tistory.com) bootstrap 5 grid 시스템 - bootstrap 5 기초..

digiconfactory.tistory.com

그럼 서론은 이만하고 스킨 레이아웃에 대해 알아보겠습니다.

전체 페이지의 레이아웃(와꾸)를 짜는 것 부터 시작해보겠습니다. 블로그를 운영해본 분들은 아시겠지만 레이아웃이 복잡해 보이지만 단순합니다. 예전에는 다 PC로 봤기 때문에 뭘 덕지덕지 붙이는 블로그도 있었던 것 같은데 모바일 시대로 접어들고 심플한 디자인을 선호하지요. 제가 생각하는 좋은 레이아웃은 스크린이 커도 한눈에 들어오는게 좋습니다. 블로그는 검색을 통한 유입중심이기 때문에 포스팅 페이지에 집중할 수 있는 레이아웃이 좋다고 봅니다.

그리고 모바일로 가면 다 똑같아지기 때문에 단순한게 좋습니다. 단순하다는 건 포스팅 페이지 안에서 웬만하면 해결이 다 되야 하고 반응형도 그런 방식으로 적용해야 합니다.

그럼 다음의 와꾸 디자인을 한번 보겠습니다. 이 안에 티스토리 블로그 콘텐츠 등 모든 것이 다들어갑니다. 헤더, 반응형 메뉴(네비), 세컨드 메뉴, 본문 글, 사이드 바 요소, 푸터를 다 넣을 수 있습니다. grid와 flex 레이아웃을 활용하고 미디어쿼리로 반응형 레이아웃을 만들 겁니다.

색상을 칠해놓은 건 시각적으로 좀 더 와닿게 하기 위해서 입니다. 포함관계라던가 잘 나타나고 있지요? 색상을 입힌 부분은 나중에 레이아웃 작업이 완료되면 통일성 있게 바꿀 것 입니다.

처음부터 세부적인 내용을 만들어 가는게 아니라 전체 구조를 완성시키고 세부적인 기능들을 하나씩 채워가는 방식으로 하면 좀 시간은 걸리지만 나중에 관리가 편합니다.

skin.html 파일은 다음과 같습니다. clr- p1 이런게 유틸 클래스입니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="./src/app.js" defer></script>

    <title>스킨 레이아웃 - 티스토리 스킨 제작하기 (HTML/CSS/JavaScript) 1</title>
</head>

<body id='tt-body-page'>

    <h2>Hello World (최상단)</h2>
    <!-- master container -->
    <div class="container clr-lsb p1">
        <b>마스터 컨테이너</b>
        <!-- primary header -->
        <header id="header" class="primary-header clr-gd p1 mb1">
            프라이머리 헤더
            <div class="logo clr-sn p1">블로그 로고</div>
            <!-- primary nav -->
            <nav id="nav" class="primary-nav clr-cn p1">
                프라이머리 네비
            </nav>
        </header>
        <!-- secondary nav -->
        <nav class="secondary-nav clr-bg p1 mb1">
            세컨더리 네비
        </nav>
        <!-- main contents -->
        <main id="main" class="main-contents clr-kk p1 mb1">
            <b>메인 컨텐츠</b>
            <article id="article" class="contents clr-yg p1">
                콘텐츠(블로그 포스팅 등)
            </article>
            <aside id="aside" class="sidebar clr-cr p1">
                사이드바(플러그인)
            </aside>
        </main>
        <!-- primary footer -->
        <footer id="footer" class="primary-footer clr-am p1">
            프라이머리 푸터
        </footer>
        <!-- secondary footer -->
        <footer class="secondary-footer clr-dgr p1">
            세컨더리 푸터
        </footer>
    </div>
</body>

</html>

초기 세팅 코드라 별거 없습니다. 유틸리티를 사용하는 건 나중에 CSS코드 정리를 위해서입니다. 배경색상도 필요한 것만 남겨두고 스킨 옵션에서 테마 색상을 선택할 수 있도록 할 겁니다. 초기에 이런 러프한 과정을 거치는 과정을 공유하는 겁니다. 사람마다 또 팀마다 스타일 차이가 있기 때문에 각자에게 맞는 방식을 선택하면 될겁니다.

CSS는 조금만 작업하다 보면 코드가 길어지는데 막상 보면 별 내용도 아닌데 코드만 길어지는 경우가 많아서 스스로 방법으로 관리를 해야 합니다. (그 코드가 길어지는게 싫어서 SASS가 나온게 아닌가...)

root {
    --gap: 1rem;
}

/* Google Webfont */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

/* css basic reset */

* {
    box-sizing: border-box;
    font-size: 100%;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
body {
    background-color: rgb(202, 202, 202);
    font-family: 'Noto Sans KR', sans-serif;
}


/* ================= */
/* utilities for dev */
/* ================= */

.clr-yg {
    background-color: yellowgreen;
}

.clr-am {
    background-color: aquamarine;
}

.clr-bg {
    background-color: beige;
}

.clr-cn {
    background-color: cyan;
}

.clr-lsb {
    background-color: lightskyblue;
}

.clr-cr {
    background-color: coral;
}

.clr-gd {
    background-color: gold;
}

.clr-dgr {
    background-color: darkgoldenrod;
}
.clr-sn {
    background-color: snow;
}
.clr-kk {
    background-color: khaki;
}


.p1 {
    padding: 1rem;
}

.mb1 {
    margin-bottom: 1em;
}

이것들을 어떻게 요리할 것이냐? grid와 미디어쿼리를 사용할 겁니다.

스크롤압박으로 다음 포스팅에서 이어가겠습니다.

*깃허브 리포지토리:

https://github.com/neokayken/npm-project/tree/master/tistory-basic