티스토리 스킨 만들기! 친효스킨2 개발 일지

안녕하세요. 친절한효자손입니다. 올해 안으로 친효스킨 두번째 버전을 완성시키기로 올 초에 다짐했는데 12월이 된 지금에서야 슬슬 움직이기 시작했습니다. 예열하는데 무려 11개월이나 걸리다니... 게으름의 극치입니다. 그래도 올해를 넘기지 않은게 어딘가 싶은 마음에 조금은 위안이 됩니다.

이번 친효스킨 - 아트북은 최대한 기본 기능을 활용해서 제작할 예정입니다. 폰트어썸같은 외부 폰트를 최대한 사용하지 않을 생각입니다. 그야말로 티스토리의 기본 기능들을 적극 사용해서 로딩 시간을 최대한으로 단축시킬 생각입니다. 아이콘들은 특수문자로 대체합니다. 아무튼 궁극의 속도를 자랑하는 녀석으로 만들어 보겠습니다.

우선은 사이드바부터 작업을 완료했습니다. 가장 먼저 만들고 싶었던 영역이기도 하고 괜찮은 디자인이 생각났기 때문에 그 즉시 적용을 하고 싶었습니다. 그 결과 계획했던대로 멋지게 완성이 된 것 같아서 뿌듯합니다. 확실히 친효스킨을 만들어본 경험이 있어서 그런지 막히는 부분은 거의 없었습니다. 이래서 경험이 참 중요한 것입니다.

초기 버전

사이드바의 구조는 3개의 영역으로 나뉩니다. 따라서 각 영역에 따라서 사이드바 모듈을 자유롭게 배치할 수 있습니다. 이 영역을 책갈피라고 명시해 놓았는데요, 각 책갈피마다 애드센스를 넣을수도 있습니다. 또한 책갈피라는 텍스트를 자유롭게 편집할 수 있습니다. 색상도 변경 가능하며 포스트잇같은 북마크 스티커의 높이 위치도 스킨편집 화면에서 수정 가능하도록 만들 생각입니다.

그런데 문제에 직면하게 되었습니다. 기존 친효스킨의 경우는 사이드바 콘텐츠가 쌓이면 브라우저의 세로 스크롤바가 자동 생성되는 구조여서 딱히 어려움이 없었습니다. 이번 친효스킨 아트북의 경우는 사이드바가 display: flexd; 로 고정된 상태입니다. 따라서 사이드바 내부의 콘텐츠가 브라우저의 세로 해상도를 초과할 경우 스크롤바가 자동 생성되지 않습니다.

이런 경우에는 overflow-y: auto;를 사용하면 문제는 쉽게 해결됩니다. 허나 이 옵션을 사용하게되면 위의 스크린샷 이미지처럼 세로 스크롤바 기능이 활성화되는 반면 영역을 넘는 부분은 모두 가려버리는 문제가 발생합니다. 때문에 책갈피3의 포스트잇 스티커가 사라지는 문제가 발생합니다. 스티커 영역만 따로 나누려고 해도 사이드바 구조상 불가능에 가깝더군요. 그래서 아예 스티커 디자인을 변경하기로 결정했습니다.

개선 버전

이후에 스티커를 사이드바 영역 안쪽에 들어가도록 구조를 개선했습니다. 또한 텍스트를 세로로 바꾸었습니다. 이렇게하니 좀 더 다이어리에 가까운 느낌이 되어서 상당히 마음에 듭니다.

사이드바 HTML 구조

친효스킨2의 사이드바 구조는 다음과 같습니다.

<!-- 사이드바 시작 -->
<aside>
    <div id="sidebarWrap">
        <div class="sidebar rgySide1">(중략)</div>
        <div class="sidebar rgySide2">(중략)</div>
        <div class="sidebar rgySide3">(중략)</div>
    </div>
</aside>
<!-- 사이드바 끝 -->

크게 이렇게 영역이 나뉘어 있습니다. sidebarWrap이라는 ID명을 가진 div 요소는 전체 사이드바를 관리하고 있습니다. 그리고 각 세 개의 div 영역으로 구성되어있죠. rgySide1 부터 3까지는 어떤 영역인지 감이 오실 겁니다. 위에서 색으로 나눈 바로 그 영역입니다.

<div class="sidebar rgySide2">
    <h1>책갈피2</h1>
    <s_sidebar>
        <s_sidebar_element>
            <div class="category rgySideModule">
                <!--카테고리-->
                <h3>카테고리</h3>
                [샵샵_category_list_##]
            </div>
        </s_sidebar_element>
    </s_sidebar>
    <div class="sticker">책갈피2</div>
</div>

여기에서 두번째 책갈피의 자세한 구조를 살펴보겠습니다. h1 태그는 책갈피2라는 텍스트가 들어가는 영역입니다. 가장 윗 부분이죠. 그리고 바로 이어지는 태그가 티스토리 그룹 치환자인 <s_sidebar> 입니다. 이 태그가 사이드바 영역을 정의하게 됩니다. 총 3개의 div 영역이 있으니 당연히 <s_sidebar> 그룹치환자도 총 세 그룹이 존재합니다.

그렇기 때문에 꾸미기 > 사이드바를 들어가보면 이렇게 총 세 영역의 사이드바가 있습니다. 가장 위의 사이드바1이 제일 위쪽에 위치하는 책갈피1 영역이며 이후부터 순차적으로 적용됩니다.

CSS 특이사항

이번 친효스킨2에서는 사이드바에 세로 스크롤이 적용되었습니다. 따라서 세로 스크롤바를 아예 없애버리는게 관건이었습니다. 디자인을 해치기 때문입니다. 또한 스티커 부분의 텍스트를 세로로 출력되도록 만들어야만 했습니다. 진짜 다이어리처럼 만들고 싶었으니까요. 이 부분에 대한 내용은 아래에 더 자세히 설명되어있으니 궁금하시면 한번 읽어보시기 바랍니다.

[CSS] 고정된 DIV 영역에 세로 스크롤바 생성하기

[CSS] 스크롤바 없애기 (숨기기, 보이지 않게 하기)

또 다시 개선

책갈피1이 슬라이드되면 책갈피2와 책갈피3을 가려버려서 다시 사이드바 영역 밖으로 나간 다음에 재진입을 해야 하는 문제가 있다는걸 깨달았습니다. 책갈피2도 마찬가지죠. 책갈피3을 가리니까요. 그래서 가리지 않도록 호버를 재조정 했습니다. 이게 훨씬 책갈피다운 느낌입니다.

마무리

다른 영역을 만들면서 사이드바의 디자인이 변경될 수 있지만 최대한 이 컨샙을 유지하도록 할 것입니다. 너무 만족스러운 디자인이기 때문입니다. 사실 사이드바보다 더 중요한게 본문 아니겠습니까? 머릿속에 어떻게 구성할지 생각은 해뒀는데 과연 상상대로 잘 표현이 될지는 모르겠습니다. 친효스킨2 개발 일지는 앞으로도 계속 작성해 나가도록 하겠습니다. 끝.