부트스트랩 5 티스토리 스킨 만들기 11 튜토리얼 완료 - 스킨 옵션, SVG 태그 아이콘
마지막 튜토리얼
부트스트랩 5 티스토리 스킨 만들기의
마지막 튜토리얼입니다.
그 동안 부트스트랩 5의 티스토리
적용에 대해서 가이드를 작성했는데,
스킨옵션 에 대해서 다루면 이제
기본 튜토리얼은 어느 정도
끝난 것이라 볼 수 있습니다.
부트스트랩 5는 다른 프론트엔드
프레임워크와 함께 사용할 수 있는
일종의 라이브러리이고, 나머지는
스킨 제작자의 재량에 달려 있으니까
기본을 잘 응용하면 프론트엔드
초보자라도 괜찮은 스킨을
만들 수 있을 것이라 봅니다.
개인적으로 프론트엔드에 대해서
그렇게 열심히 파고든 적은 없었고
그래서 별로 아는 것도 많지 않았지만,
이번 기회에 나름적으로 많은 공부가
되었던 것 같습니다. 개발자들이
티스토리 스킨을 만들던 시기는
벌써 꽤 오래이라서 부트스트랩 5가
나왔을 때는 웬만한 스킨이
다 정착한 시절이라 딱히 이걸
사용할 이유는 없었습니다.
다만 부트스트랩의 트렌드로 봤을 때
앞으로 더 많이 쓰여질 것으로 예상해서
티스토리로 한번 만들어 보는 것도
나쁘지 않겠다고 생각했습니다.
부트스트랩 스킨을 만들면서 느낀 건데
한글 블로그는 트래픽 중에 폰트파일이
차지하는 비중이 많은 것 같습니다.
코딩블로그를 운영하다 보면 폰트에
대한 욕심이 생기기 마련인데
한글 폰트 + 코딩을 위한 별도의 폰트
(D2 Coding이나 Hack 등)를 사용하면
물론 좋습니다. 코딩의 멋을 잘 나타내기
위해서 전용의 폰트가 필요한 부분이 있습니다.
하지만 태생적으로 한글 폰트의 크기가
크기 때문에 페이지 로딩과 좋은 폰트
사이에 일종의 트레이드 오프(Trade Off)가
생기게 되는데요. 여기서 올바른 선택을
할 수 있어야 합니다. 제한된 트래픽에서
가성비가 좋은 폰트를 사용하려는
욕심을 100% 채우는 것은 페이지 로딩에
관계되고 SEO를 떨어뜨릴 수 있습니다.
부트스트랩의 기본 CSS와 번들 JS를
다운로드 하는데 약 200KB 이상입니다.
반면 좀 좋은 한글폰트는 1MB에서
많은 경우 8MB나 나가기 때문에
물론 캐시는 되지만 처음 그 사이트를
접속하는 사람들에게는 트래픽입니다.
부트스트랩이나 폰트어썸의 아이콘까지
다운로드 한다면 훨씬 더 많은 트래픽이
필요하고 이는 페이지 로딩에 직결됩니다.
블로그 본문에 이미지를 많이 써야
하는 경우도 있으니까 이런 것들을
절대적으로 판단하는 것은 쉽지는 않습니다.
하지만 어느정도 정리는 필요하다.
특히 스킨이 사용하는 폰트에 따라
의미있는 차이가 날 수 있는 부분입니다.
이 튜토리얼을 작성하면서 스킨을 만들고
몇개 블로그에 아직 테스트 중입니다.
물론 스킨보다 중요한 것은 콘텐츠의
질입니다만, 어쨋든 스킨도 중요하다 -
예전에는 막연히 중요하다는 것을
알았더라면 부트스트랩 5 스킨을
작성하면서는 좀 더 구체적으로
내용을 알게 된 것 같습니다.
구글 SEO는 인공지능이기 때문에
수많은 부트스트랩을 사용한 페이지를
분석해왔을 겁니다. (점유율이 높으니까)
일단 긍정적으로 보고 여러가지
테스트를 더 해볼 생각입니다.
스킨 옵션
자 이제 마지막 내용들을 알아보겠습니다.
스킨 옵션은 블로그 관리자의 스킨 편집
메뉴에서 쓸 수 있는 옵션을 말합니다.
xml에는 variable이라고 하는데
프로그래밍의 변수지만 옵션처럼
제한된 선택을 할 수 있는 기능입니다.
사실 옵션이란 건 html 코딩이 가능하면
별 필요가 없는 기능이기도 합니다.
사람들이 쉽게 사용할 수 있어야
의미가 있는데 옵션을 너무 많이
넣어놔도 다 쓰질 않기 때문에
좀 필요한 것들을 옵션으로 만들면 됩니다
아래 이미지는 xml에 variable을 만들면
나오는 추가설정입니다.
테마 색상, 배경 색상, 로고 사용,
이런 것들은 보통 스킨(테마)에서
흔히 볼 수 있는 것들인데,
워드프레스 같은 경우 테마를
설치하고 매우 새새한 설정이 가능합니다.
아래 이미지 처럼 워드프레스의 테마는
기본적으로 사용자가 커스터마이즈
할 수 있는 범위가 넓습니다.
티스토리는 이런 테마 시스템이 없어서
개인들이 만든 스킨에 옵션을 사용하여
어느 정도 보완할 수 있는데, 당연하지만
워드프레스 기준으로 많이 부족합니다.
그런 것들은 여러 블로그를 다뤄본
사람이라면 이미 알고 있는 사실이니까...
한국의 CMS가 쪼금 해외에 비해
뒤쳐진 것은 사실입니다. 인정할 건
인정하는게 또 발전을 위해 좋으니까;
옵션이 조금 해결책이 되긴 합니다만,
너무 복잡하게 만들면 심플한
스킨의 의미가 퇴색하니까
적당히 구현하도록 합니다.
딱히 배포할 생각이 없다면
옵션을 많이 만들어도 됩니다,
하지만 역시 코드가 복잡해져서
유지보수할 맛이 떨어지겠지요
옵션의 예제는 아래와 같습니다.
index.html의 skin 태그 안에 넣습니다.
티스토리 문서에 보면 다섯 종류의
타입이 있습니다. STRING, SELECT,
IMAGE, BOOL, COLOR 입니다.
이 변수들의 name을 skin.html 파일에서
로 사용합니다.
예를 들어 이름이 custom-theme-color이다
이렇게 불러옵니다.
스킨편집에서 값을 변경할 수 있으니까
사용자는 html 코딩을 몰라도 됩니다.
느낌이 안오면 옵션을 정의한다음에
스킨편집 화면에 가서 이것저것
해보면 이해가 쉬울 겁니다.
<!-- 옵션 정의 s -->
<variables>
<!-- group-1 general-setup -->
<variablegroup>
<!-- 테마생상 변경 옵션 -->
<variable>
<name>custom-theme-color</name>
<label>
<![CDATA[테마 색상]]>
</label>
<description>
<![CDATA[테마 색상 변경 - navbar]]>
</description>
<type>COLOR</type>
<option />
<default>
<![CDATA[#3b7dc9]]>
</default>
</variable>
<!-- 배경색 변경 옵션 -->
<variable>
<name>custom-bg-color</name>
<label>
<![CDATA[배경 색상]]>
</label>
<description>
<![CDATA[배경 색상 변경 - 컴포넌트]]>
</description>
<type>COLOR</type>
<option />
<default>
<![CDATA[#F2F5F7]]>
</default>
</variable>
<!-- 로고 / 텍스트 타이틀 사용 선택 -->
<variable>
<name>custom-img-logo</name>
<label>
<![CDATA[로고 사용]]>
</label>
<description>
<![CDATA[로고 사용하기]]>
</description>
<type>BOOL</type>
<option />
<default>true</default>
</variable>
<!-- image option -->
<variable>
<name>custom-img-1</name>
<label>
<![CDATA[로고 이미지]]>
</label>
<description>
<![CDATA[로고 이미지 파일]]>
</description>
<type>IMAGE</type>
<option />
<default>https://place-hold.it/170x55</default>
</variable>
<!-- string test -->
</variablegroup>
<!-- group-2 -->
<variablegroup>
<!-- 문자열 옵션 테스트 -->
<variable>
<name>custom-string</name>
<label>
<![CDATA[문자열 옵션]]>
</label>
<description>
<![CDATA[문자열]]>
</description>
<type>STRING</type>
<option />
<default>문자열</default>
</variable>
<!-- SELECT 옵션 테스트 -->
<variable>
<name>custom-select</name>
<label>
<![CDATA[SELECT 옵션]]>
</label>
<description>
<![CDATA[SELECT 옵션 테스트]]>
</description>
<type>SELECT</type>
<option>
<![CDATA[
[
{"name":"item-1", "label":"밝은색", "value":"item-1"},
{"name":"item-2", "label":"어두운색", "value":"item-2"}
]
]]>
</option>
<default>item-1</default>
</variable>
</variablegroup>
</variables>
<!-- 옵션 정의 e -->
다음은 skin.html 에 사용하는 예시입니다.
<s_if_var_{VARIABLE_NAME}>
<s_not_var_{VARIABLE_NAME}>
BOOL 옵션에 쓰는 방식입니다.
C언어의 if 문 같은 건데 스킨이다 보니
불편한 문법이긴 합니다. 옵션에는
true나 false가 있을테니 로고는
이미지나 텍스트 둘 중 하나가 선택됩니다.
<a href="/" class="navbar-brand">
<!-- logo 이미지 사용시 -->
<s_if_var_custom-img-logo>
<!-- 스킨 편집의 추가설정, 로고 이미지에 업로드 -->
<img src="" class="custom-logo" alt="logo">
</s_if_var_custom-img-logo>
<!-- 텍스트 타이틀 사용시 -->
<s_not_var_custom-img-logo>
<a href="/" class="navbar-brand">코딩각</a>
</s_not_var_custom-img-logo>
</a>
옵션을 사용하면 더 많은 일을
할 수 있는데 너무 많은 옵션을 쓰면
skin.html 파일이 많이 복잡해집니다.
적당히 구조를 유지하면서 쓰면 좋습니다.
SVG 아이콘(부트스트랩)
부트스트랩 아이콘은 현재 1600개
이상 되고 무료 오픈소스입니다.
폰트어썸 정도는 아니지만 부트스트랩을
쓴다면 꽤 쓸만합니다.
사용방법은 공식사이트를 참고합니다.
여러가지 방법이 있는데 여기서는
svg 태그를 html 파일에 내장하는
방법에 대해 알아보겠습니다
다음은 svg 태그입니다.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>
svg 파일은 다 좋은데 벡터라 사용법이
까다롭습니다. .svg 파일로 다운로드
받아서 img 태그로 넣어도 되는데
조작이 잘 안됩니다. 또 http 요청을
별도로 해야 하기 때문에 그것도
요청시간이 걸리니까 여기서는
내장하는 방법입니다.
*어느 방법이 절대적 옳다고 하기엔
각자 상황이 다르니까 참고만 합니다.
다음은 부트스트랩 svg 아이콘을 skin.html에
넣은다음에 필요한 곳에 불러서 쓰는 겁니다
<!-- 부트스트랩 아이콘 -->
<!-- svg definition s -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
<defs>
<!-- home icon -->
<g id="icon-house-fill">
<title>I'm Home!</title>
<path fill-rule="evenodd" class="house-path1"
d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
<path fill-rule="evenodd" class="house-path2"
d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
</g>
<!-- guestbook icon -->
<g id="icon-book-half">
<title>방명록을 씁니다</title>
<path
d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
</g>
<!-- tag icon -->
<g id="icon-tag-fill">
<title>태그 클라우드를 봅니다</title>
<path d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</g>
</defs>
</svg>
<!-- svg definition e -->
SVG를 필요한 부분에 불러오면 됩니다.
id를 기준으로 use 태그를 씁니다.
<svg viewBox="0 0 16 16">
<use href="#icon-house-fill"></use>
</svg>
이렇게 하면 캐시는 안되지만 http 요청은
줄어듭니다. 역시 상황에 따라 사용하면 됩니다.
일회성 방문이 많은 블로그라면
이 방법도 나쁘지 않다고 봅니다.
반복적으로 방문하는 커뮤니티는
웬만하면 캐시를 많이 쓰는게 좋습니다.
블로그라는게 기본적으로 구글 검색해서
한번 찍 보고 다시 찾아서 가는 사람의
비중이 많지는 않으니까, svg를
내장하는 방식을 써봤습니다.
(다시 말하지만 각자의 상황에 따름)
마무리
옵션과 svg까지 부트스트랩 5 티스토리 스킨
제작에 대한 내용을 마치겠습니다.
용두사미 같긴 한데 책도 그렇지만
원래 앞쪽을 많이 보고 끝까지
보는 사람들의 수가 적습니다.
유튜브도 시리즈 강의 있으면
첫번째 강의가 조회수가 가장높고
뒤로 갈수록 많이 줄어듭니다.
시작은 쉽지만 마치는 건 어려운 법이죠.
뭐든간에,,,
그리고 마지막 강의 까지 도달한
사람들은 그 이상의 것을 깨닫고
본인 스스로 새로운 것을 만드는
사람들입니다. 처음에 쓰윽 보고
마는 것은 그 주제에 대해서
좋은 결과가 나오기 어렵지요.
기본 툴을 익혔으니 응용은 각자의
재량에 달려 있습니다.
딱히 티스토리가 아니라도
부트스트랩 5를 사용하는 분들에
조금이나마 도움이 되면 좋겠습니다.
* 전체 소스코드:
https://github.com/neokayken/tistory_bootstrap_tut/tree/master
