티스토리를 위한 반응형 스킨 'Whiteground 2'를 배포합니다. 티스토리에서도 멋진 반응형 스킨을 이용한 블로그들이 나타나기를 바라는 마음으로 만들었습니다. 옛날에 제가 만들어 배포했던 'Whiteground' 스킨의 느낌을 이어간다는 뜻으로 그 이름을 따서 지었습니다.
* 푸른색 배경 사진이 적용되어 있습니다. 스킨 적용 후 스킨위자드 등을 이용해 배경 사진/배경색을 설정하실 수 있습니다.
* 기본으로 배경 사진을 다른 색상으로 3가지 탑재하고 있고, 적용하는 색상에 따른 CSS 수식이 미리 설정되어 있습니다. (아래 3. 설명 참조)
1. 스킨 업로드 및 적용 과정은 일반적인 티스토리 스킨의 설치 과정과 같으므로, 스킨 설치 경험이 있는 분이라면 바로 2. 스킨 초기 설정부터 보시면 됩니다.
1. 상기 첨부된 스킨 Zip 파일을 다운로드한 후, 아무 곳에나 압축을 풀어 줍니다. (압축을 푼 결과물이 다른 파일들과 섞이지 않아야 업로드할 때 편하겠지요.)
2. 티스토리의 블로그 관리자 메뉴로 들어간 후, 꾸미기-스킨 항목에서 스킨등록을 클릭하세요.
3. 스킨 저장명은 편하신대로 아무 이름이나 입력하시고, 추가 버튼을 눌러서 스킨 파일들을 업로드하시면 됩니다.
위 zip 파일을 압축을 풀어서 나왔던 skin.html, preview.gif, index.xml, style.css과 images 폴더 안에 있는 모든 파일을 추가해 주세요.
4. 파일을 모두 추가하셨다면 약 3.6MB의 용량이 업로드됩니다. 업로드가 끝났다면 저장 버튼을 누르세요.
5. 이제 새로운 스킨이 티스토리 스킨 보관함에 등록되었습니다! 스킨 보관함에서 방금 업로드한 스킨을 적용하시면 됩니다.
6. 이제 새 스킨이 적용되었습니다! 하지만 아직 초기 설정이 되지 않았기 때문에, 내 블로그에 어울리게 멋진 모습으로 바꾸어 주려면 사용하지 않는 사이드바 같은 것들을 비활성화해야겠죠. 이제 다음 항목에 있는 [스킨 초기 설정]을 계속해 읽어 주세요!
* 이 스킨은 반응형 스킨이므로 먼저 관리-꾸미기-모바일웹 스킨에서 모바일웹 스킨을 OFF로 설정하셔야 합니다. (저장 버튼까지마저 눌러주셔야 설정이 저장되겠죠?)
1. 처음 스킨을 적용하고 나면, 모든 사이드바 요소들이 활성화되어 있습니다. 사용하지 않는 사이드바 요소는 비활성화해주세요.
2. 필요없는 요소들을 - 버튼을 눌러서 비활성화해주세요.
3. 사이드바 설정과 더불어, 메뉴 설정 역시 빠트릴 수 없을 것입니다. 꾸미기-화면 설정-메뉴 탭에서, 아래의 예시처럼 블로그 메뉴를 편집하실 수 있습니다.
4. 사이드바와 메뉴를 모두 원하시는대로 설정하시고 저장 버튼을 클릭하셨다면, 이제 초기 설정이 끝났습니다.
그리고 혹시 블로그 아이콘 표시 플러그인을 사용하지 않으신다면, 이걸 사용해 주세요!댓글, 방명록 표시가 좀 더 깔끔해 집니다.
블로그 아이콘을 64x64px로 표시하게끔 플러그인을 설정해 주시고, 기본 정보에서 아이콘을 설정하시면 됩니다.
* 주의사항
현재 티스토리 카테고리 설정에서 [새글 표시] 기능을 사용하실 경우, 이 스킨의 데스크톱 화면 상단 카테고리 드롭다운 기능과 충돌하는 문제가 있습니다. 이는 티스토리의 [새글 표시] 기능이 카테고리 새 글 아이콘을 표시하기 위해 "와 '를 혼용해서 HTML 구문을 표시하는 문제가 있어, 메뉴 아이템들 중 카테고리 글 보기 메뉴가 있다면 드롭다운을 붙여주는 자바스크립트와 충돌하는 문제가 있기 때문입니다. 따라서 일단 [새글 표시] 기능을 사용하지 않으시거나, 혹은 HTML에 대한 이해가 있으시다면 메뉴 출력 부분을 티스토리 메뉴 치환자를 사용하지 않고 직접 HTML로 메뉴 부분 코드를 적어 주시면(자바스크립트의 역할까지 포함해서) 새글 표시 아이콘과 카테고리 드롭다운을 모두 사용하실 수 있습니다. (자바스크립트 코드를 보시면 아시겠지만, 이 문제는 e.innerHTML이 카테고리 목록을 불러오는데, 이 카테고리 목록 치환자가 나타내는 결과물에 카테고리 새글 표시 사용시 '와 "가 혼용되어 나타나 자바스크립트가 오류를 일으키기 때문에 그렇습니다.)
이제 스킨 적용 및 설정이 끝났습니다. 이 스킨의 특징에 대해서는 아래의 내용을 더 읽어 보세요. 그럼, 즐거운 티스토리 블로깅 되세요!
이 스킨은 기본적으로 3가지의 상단 타이틀 배경 사진(검정색 배경, 파란색 배경, 흰색 배경)을 미리 images 폴더 내에 탑재하고 있습니다.
초기 설정은 파란색 배경 사진(1.jpg)이 상단 배경으로 지정되어 있고, skin.html의 위쪽에 보면 <div id="top-bar" class="blue-background">라는 구문이 있습니다. top-bar는 상단 타이틀 부분을 감싸는 div인데, 여기서 blue-background는 파란색 계열의 배경 사진이 쓰이고 있으니 상단 타이틀에 속하는 항목들은 그에 어울리는 글자색을 사용하라는 뜻입니다.
예를 들어, 검정색 배경 사진(2.jpg)으로 설정을 바꾸시려면, style.css에서 #top-bar 항목(첫 번째로 등장하는 #top-bar. @media (min-width: 1025px)으로 수식되고 있는 것)의 background-image에서 1.jpg를 2.jpg로 바꿔주시고, skin.html의 위 blue-background를 black-ground로 바꿔 주세요.
그렇게 하시면,
이렇게 검정색 배경의 상단으로 바뀐 스킨의 모습을 보실 수 있습니다.
마지막으로, 배경사진 3.jpg는 흰색 계열의 상단 배경인데, 이 경우에는 white-background로 써 주시거나 아니면 아예 해당 div class 수식 자체를 없애시면 됩니다. (즉, 기본 배경 CSS는 black-background와 blue-background의 2종류만 지정되어 있습니다. 위 2개 수식이 아니라면, 흰색 배경을 가정한 기본값으로 보여지게 됩니다.) 물론, 직접 원하시는 배경 사진이나 배경색을 설정하실 수도 있습니다. (아래 FAQ 참조)
style.css에서 DA4453 색상 코드로 된 것들을 모두 원하시는 색상 코드로 바꿔 주시면 됩니다.
style.css를 문서 편집기 같은 것으로 여셔서, 모두 바꾸기 기능을 통해 DA4453을 4FC1E9로 바꾸고 style.css를 반영하시면 파란 하늘색으로 빨간 색상들이 모두 바뀌어 있음을 보실 수 있습니다. (사용자가 커스텀하기 좋도록, 미리 한 가지 색상만으로 통일해 놓았습니다.)
카테고리 출력
메뉴 설정에서 카테고리-분류 전체보기 (모든 글 보기) 메뉴를 설정하여 두었다면, 자동으로 데스크톱 화면에서는 해당 메뉴를 마우스 롤오버-드롭다운 형태로 세부 카테고리를 펼쳐서 보여주고, 모바일 화면에서는 오른쪽 메뉴에서 카테고리를 펼친 채로 메뉴를 보여줍니다.
폰트
이 스킨은 한글 웹폰트로 Google Noto Sans CJK KR을 자체 탑재하고 있으며, KS X 1001 표준 서브셋만을 지원함으로써 기본, 굵게 두 가지 두께를 합쳐서도 400KB가 되지 않게끔 경량화되어 있습니다. (WOFF2 기준) 한글 웹폰트 추출에 관해서는 Coderifleman님의 글에서 도움을 받았습니다. 아이콘은 Font Awesome의 아이콘 몇 개를 fontello를 이용하여 따로 떼어낸 것을 자체 탑재해 사용하고 있습니다. Noto Sans와 Font Awesome은 모두 SIL 오픈 폰트 라이센스 1.1을 따릅니다.
블로그 아이콘 등
댓글, 방명록에서는 블로그 아이콘을 보여줍니다. (기본 아이콘이 아닌 사용자들의 아이콘을 나타내기 위해서는 먼저 플러그인 설정에서 블로그 아이콘을 활성화하셔야 합니다.)
이 스킨은 댓글/방명록 블로그 아이콘 플러그인 외에도 카테고리 다른 글 보기 플러그인을 지원합니다. 카테고리 다른 글 보기 플러그인을 사용하실 경우에는 회색 설정을 권장합니다. 그리고 페이스북, 트위터, 구글플러스로의 공유하기 버튼이 게시글 하단에 있습니다.
스킨을 공개하며
ghost를 비롯한 해외의 블로깅 툴을 보면, 가독성이 훌륭하면서도 오늘날의 웹 트렌드에 부응하는 미려한 반응형 디자인들이 많이 있습니다. 그런 느낌을 티스토리에 녹여내면 어떨까 싶었는데, 그 나름의 결과물을 특징 이번 티스토리 반응형 스킨 공모전이 열린 기회에 배포하게 되었습니다. 간결하고 가벼우면서도 기능은 강력한 스킨을 만들고자 해서 jQuery나 Bootstrap 등은 사용하지 않았으며, 웹폰트나 아이콘 역시 모두 최적화를 따로 했고 무엇보다도 직관적인 가독성을 중시했습니다.
예상되는 질문과 답변
스킨위자드를 이용해 편리하게 바꾸실 수 있습니다. 스킨위자드를 사용하지 않으신다면,
관리자 모드-꾸미기-스킨-HTML/CSS 편집에서, style.css의 내용을 수정함으로써 배경사진을 없애거나 변경할 수 있습니다.
사진을 변경하시려면, 먼저 원하시는 사진을 스킨을 업로드할 때와 마찬가지로 파일업로드-추가를 통해 업로드해 주세요.
그리고 style.css에서, 전체의 배경을 설정하시려면 가장 위쪽에 있는 body 항목에서 background-image 항목을 찾으셨나요? 거기서 현재의 파일명 대신 방금 업로드하신 사진의 파일명을 적어 주시고 저장을 누르시면 됩니다. 상단 타이틀 부분만을 설정하시려면, #top-bar 항목에서 background-image 항목을 찾으셔서 작업하시면 됩니다.
배경사진을 없애고 싶으시다면, background-image: none; 로 위 내용을 바꿔 주시고 저장하시면 됩니다.
스킨위자드를 이용해 편리하게 바꾸실 수 있습니다. 스킨위자드를 사용하지 않으신다면, 관리자 모드-꾸미기-스킨-HTML/CSS 편집에서, style.css의 내용을 수정함으로써 배경사진을 없애고 대신 색상을 넣을 수 있습니다.
style.css에서, 전체의 배경색을 설정하시려면 가장 위쪽에 있는 body 항목을 찾으셔서, background-image: url('images/파일명'); 을 background-image: none; 로 고쳐 주시고, background-color: #fff; 를 background-color: 원하시는 색상 코드로 고쳐 주시고 저장을 누르시면 됩니다. 상단 타이틀 부분만을 설정하시려면 #top-bar 항목을 찾으셔서 역시 같은 작업을 해 주시면 됩니다.
애드센스도 당연히 설치하실 수 있습니다. 이 스킨 디자인에서라면, 글 제목 아래쪽과 댓글 위쪽이 적절하지 않을까요?
이런 위치에 애드센스를 설치하실 거라면, 미리 이 스킨에서 .article-adsense 클래스를 정의해 놓고 있어서, 바로 구글 애드센스 코드만 가져오시면 됩니다.
<div class="article-adsense">
<script async~~(이하생략. 구글 애드센스에서 바로 반응형 광고 코드를 만들어 주므로 별도로 손댈 것이 없습니다.)
</script>
</div>
를 skin.html에서 원하시는 위치에 넣으시면 됩니다. 저라면 <div class="article txt-justify">의 바로 앞과, </s_tag_label>의 바로 아래에 넣어 보겠습니다.
티스토리 에디터를 크롬 브라우저를 통해 이용할 경우 발생할 수 있는 버그 때문에 일어나는 문제로 알고 있습니다. HTML 모드로 에디터를 바꿔서 보시면, span style 9pt 어쩌고 하는 것들이 보입니다. <span (이하생략)>, </span> 부분을 직접 지워주시면 해결됩니다. 익스플로러에서는 이 문제가 없는 것으로 알고 있고요. 제기된 지 꽤나 오래된 버그인데, 아직 고쳐지지 않고 있는 것으로 보입니다. 참고로 이 스킨은 반응형 스킨으로 글자 크기 단위로 rem을 사용하며, 본문은 1.25rem을 사용하고 있습니다. rem을 사용하신다면 모바일 화면에 대응하여 글자 크기가 함께 줄어들게 됩니다.
인용구가 가운데에 나타나지 않고 브라우저 기본 여백만 가지고 나타나는 것은 의도된 것입니다. 가운데에 나타나는 것보다 적당한 여백을 갖고 통상의 글처럼 왼쪽에서 나타나는 것이 가독성이 더 높다고 생각해서 그렇게 처리했습니다. 가운데에 나타나게 하시려면 직접 text-align: center; CSS 수식을 추가해 주시면 됩니다.
트랙백 기능을 사용하지 않으신다면, 굳이 글 하단에 댓글 몇 개, 트랙백 몇 개를 모두 표시해 줄 필요가 없겠죠.
skin.html에서 <div class="article-comments">을 찾으신 후, 그 아랫줄에서 </span>, 을 찾으세요. ,에서부터 그 줄 끝까지를 모두 지우시면 됩니다. (2 Comments, 0 Trackbacks에서 , 0 Trackbacks 부분을 삭제하는 것입니다.)
현재 몇몇 티스토리 스킨에서 사용하고 있는 목록에서 사진 미리보기 기능은 티스토리에서 자체적으로 사진 파일의 주소를 제공하고 있지 않아서, 자바스크립트를 이용하여 사용자의 웹 브라우저가 일일이 보이지 않게 각 게시물 본문을 불러온 다음, 거기서 사진 주소를 추출하여 불러오는 방식입니다. 예를 들어, 목록 한 페이지에 게시물 10개가 있다면 웹 브라우저가 게시물 10개 페이지를 다 접속해서 그걸 다 불러오고, 거기서 다시 사진 파일 주소를 또 다 따와서 불러오는 식입니다.
(블로그 서비스는 아니지만) 흔히들 접하시는 XE 기반 게시판 스킨의 경우에는 XE에서 자체적으로 사진 미리보기를 추출할 수 있어서, 바로 리사이즈된 썸네일 주소를 목록 스킨에서 보여줄 수 있습니다만, 티스토리의 경우에는 그런 기능이 없기 때문에 부득이하게 상술한 것처럼 자바스크립트를 이용해 사용자 웹 브라우저에게 그 몫을 넘기고 있습니다.
기능을 구현한다는 측면에서는 어쩔 수 없이 자바스크립트로 만들면 되는 것이긴 한데- jQuery 같은 것을 쓰지 않아도 순수 자바스크립트만으로도 당연히 가능합니다- 개인적으로는 이렇게까지 (티스토리 자체 기능도 아니고, 클라이언트 쪽에 부담을 많이 떠넘기는 것이 아닌지) 이 기능을 만들어야 할 필요가 있을런지는 모르겠기에 굳이 구현하지는 않았습니다. 티스토리에서 자체적으로 스킨 치환자로 게시물 썸네일을 목록 단계에서 지원해주면 좋겠습니다: 사실 이건 스킨 단계에서 할 일이 아니라 서버 단계에서 해 줘야 할 일이라고 생각해서 억지로 만들 생각은 없습니다.
변경내역
1.0.0, 2015-07-31.
- 첫 배포
1.0.1, 2015-08-01.
- 오류 수정 및 3가지 배경 사진과 그에 맞는 색상 CSS 추가
1.0.2, 2015-08-03.
- 오류 수정 및 모바일 화면에서의 상단 디자인 수정
1.0.3, 2015-08-08.
- Noto Sans WOFF2 리패키지
라이센스
CC BY-NC-SA, 저작자표시-비영리-동일조건변경허락. 원작자 표기를 유지하고 2차적 저작물에도 동일한 라이센스를 적용하는 한에서 비상업적 목적의 변경, 재가공을 허락합니다.
감사합니다. 이 스킨에 관한 문의사항이나 오류 제보 등 남기실 말씀이 있으시다면 댓글을 남겨 주세요. 단, 기본적인 HTML/CSS 수정이나 스킨에서 제공하는 기능을 넘어서는 수정 등에 관한 질문에 대해서는 답변을 드리지 않을 수 있습니다.
Whiteground2.1.0.3.zip
