TODAY TOTAL
티스토리 반응형 스킨 '빛과 공간' 배포


티스토리를 위한 반응형 스킨 '빛과 공간(Light and Space)'을 배포합니다. 티스토리에서도 멋진 반응형 스킨을 이용한 블로그들이 나타나기를 바라는 마음으로 만들었습니다.

Lightweight and powerful!

스킨 미리보기 페이지 (배경사진 있는) 열기


특징

가독성에 초점을 맞춘 간결한 디자인

반응형 디자인

 - PC, 스마트폰 등 접속 환경에 따라 다양한 모습으로 스킨 구조와 카테고리 목록 등을 보여줍니다.

빠르고 가벼운 구조

 - 400KB 미만의 한글 웹폰트

 - 순수 Javascript/CSS (별도의 라이브러리 등을 사용하지 않습니다.)

편리한 커스텀 설정 및 부가 기능 지원 (단, 스킨위자드로는 배경 설정만 가능)

티스토리 스킨 가이드를 준수합니다.


사양

최신의 웹 브라우저 환경을 권장하며, IE8 등의 낡은 웹 브라우저는 지원하지 않습니다.

- Google Chrome, Microsoft Edge, Internet Explorer 11 등에서 테스트되었습니다.

 

설치 및 초기 설정

 

Light_and_Space.1.0.4.zip


* 배경 사진이 적용되지 있지 않습니다. 스킨 적용 후 스킨위자드 등을 이용해 배경 사진/배경색을 설정하실 수 있습니다.


1. 스킨 업로드 및 적용 과정은 일반적인 티스토리 스킨의 설치 과정과 같으므로, 스킨 설치 경험이 있는 분이라면 바로 2. 스킨 초기 설정부터 보시면 됩니다.

 

 

상세

카테고리 출력

 


모바일 화면에서는 위 사진의 왼쪽과 가운데 모습처럼, 상단메뉴(데스크톱에서는 좌측메뉴)에서 ARCHIVE(글 전체보기) 버튼을 터치할 때, 각 카테고리로 이동할 수 있는 선택 상자가 나타납니다.


데스크톱 화면에서는 위 사진의 오른쪽 모습처럼, 좌측메뉴에서 카테고리를 보여줄 수도 있고, 지금 보시는 이 블로그의 데스크톱 모습처럼 카테고리를 숨길 수도 있습니다. 단, 데스크톱 화면에서 좌측메뉴에 카테고리를 보여줄 때에는 카테고리 안의 카테고리들은 보여주지 않습니다. (위 사진에서 보시면 Test 안의 Test2가 출력되지 않습니다.) 물론 하단 사이드바 카테고리에서는 모든 카테고리들을 보여줍니다.


폰트

이 스킨은 한글 웹폰트로 Google Noto Sans CJK KR을 자체 탑재하고 있으며, KS X 1001 표준 서브셋만을 지원함으로써 기본, 굵게 두 가지 두께를 합쳐서도 400KB가 되지 않게끔 경량화되어 있습니다. (WOFF2 기준) 한글 웹폰트 추출에 관해서는 Coderifleman님의 글에서 도움을 받았습니다. 아이콘은 Font Awesome의 아이콘 몇 개를 fontello를 이용하여 따로 떼어낸 것을 자체 탑재해 사용하고 있습니다. Noto Sans와 Font Awesome은 모두 SIL 오픈 폰트 라이센스 1.1을 따릅니다.


블로그 이미지, 아이콘

좌측메뉴에서는 블로그 이미지를 보여주며, 크롭 후 둥근 이미지를 보여줍니다. 댓글, 방명록에서는 블로그 아이콘을 보여주며 크롭 없이 리사이즈 후 둥근 이미지를 보여줍니다. (기본 아이콘이 아닌 사용자들의 아이콘을 나타내기 위해서는 먼저 플러그인 설정에서 블로그 아이콘을 활성화하셔야 합니다.) 


이 스킨은 댓글/방명록 블로그 아이콘 플러그인 외에도 카테고리 다른 글 보기 플러그인을 지원합니다. 카테고리 다른 글 보기 플러그인을 사용하실 경우에는 회색 설정을 권장합니다.


데스크톱 환경에서 좌측메뉴는 기본적으로 위치가 고정되어 있지만, 브라우저의 세로 해상도가 좌측메뉴를 다 표시하지 못할 만큼 작다면 고정이 풀립니다. (좌측메뉴에서 카테고리 항목을 표시할 경우에 쓰입니다.) 그리고 페이스북, 트위터, 구글플러스로의 공유하기 버튼이 게시글 하단에 있습니다.

 

현재 위 예시 사이트에서 사용하고 있는 배경 사진은 unsplash에서 공개한 자유롭게 이용할 수 있는 사진입니다.


스킨을 공개하며

ghost를 비롯한 해외의 블로깅 툴을 보면, 가독성이 훌륭하면서도 오늘날의 웹 트렌드에 부응하는 미려한 반응형 디자인들이 많이 있습니다. 이 스킨은 그러한 디자인의 영향을 받아 만들던 것인데, 이번 티스토리 반응형 스킨 공모전이 열린 기회에 그동안 사용하던 스킨을 다른 사용자들도 쉽게 적용할 수 있도록 고치고 부가 기능을 더하여 공개하게 되었습니다. 간결하고 가벼우면서도 기능은 강력한 스킨을 만들고자 해서 jQuery나 Bootstrap 등은 사용하지 않았으며, 웹폰트나 아이콘 역시 모두 최적화를 따로 했고, 애니메이션 효과를 지양하고 직관적인 가독성을 중시했습니다.

 

그러고보니 티스토리를 2007년 초부터 계속 사용해 왔으니 꽤 오랜 기간을 쓰고 있습니다. 그러다보니 5년 전에도 티스토리 스킨을 만든 적이 있는데, 이번의 새 스킨도 앞으로 티스토리를 사용하시는 분들에게 도움이 되었으면 합니다.

 

예상되는 질문과 답변

 

변경내역

1.0.0, 2015-07-20.

- 첫 배포

 

1.0.1, 2015-07-21.

- 스킨위자드를 통한 배경색, 배경사진 수정 가능

- 동영상에 대한 편리한 반응형 지원 (사용자가 직접 div 태그 등을 달 필요 없이, 자동으로 동영상에 대한 종횡비 유지 크기 변화를 지원합니다.)

- 각주 등에 대한 CSS 수식 추가 및 사소한 오류 수정

 

1.0.2, 2015-07-24.

- 메뉴 설정 가능 (관리자 모드-꾸미기-화면 설정-메뉴)

- 기본 사이드바 형식의 좌측 메뉴 설정은 이제 더 이상 지원하지 않습니다. 티스토리 자체 기능을 충실히 지원하고자 이를 고칩니다.

- 사소한 버그 수정 및 최적화

 

1.0.3, 2015-07-28.

- 사소한 버그 수정


1.0.4, 2015-08-08

- Noto Sans WOFF2 웹폰트 리패키지


라이센스

CC BY-NC-SA, 저작자표시-비영리-동일조건변경허락. 원작자 표기를 유지하고 2차적 저작물에도 동일한 라이센스를 적용하는 한에서 비상업적 목적의 변경, 재가공을 허락합니다.


감사합니다. 이 스킨에 관한 문의사항이나 오류 제보 등 남기실 말씀이 있으시다면 댓글을 남겨 주세요. 단, 기본적인 HTML/CSS 수정이나 스킨에서 제공하는 기능을 넘어서는 수정 등에 관한 질문에 대해서는 답변을 드리지 않을 수 있습니다.

  Comments