hELLO. 티스토리 스킨을 소개합니다.

hELLO.

hELLO. 티스토리 스킨은 특별한 기능이 없는 티스토리 스킨입니다. 지극히 단순한 기능만을 포함하고 있고, 덧글이 없습니다. 티스토리를 사용하면서 사실 덧글로 무언가를 했던 기억은 많이 없어서 그냥 과감하게 제거해버리기로 하였습니다. 개인적으로는 단순히 알맹이없이 그저 소통을 위한 덧글 놀이는 그다지 좋아하지 않기도 하고.

Hello 를 치려다가 실수로 hELLO 를 쳤는데, 꽤 마음에 들어서 그냥 이름으로 정했습니다.

단순, 그러나 가득

hELLO 2.0 에 들어서면서 다크 모드, 사이드바, 댓글, 태그 클라우드, 방명록 등 많은 기능이 추가되었습니다. 그러나 해당 스킨은 티스토리의 기본적인 기능을 충실하게 제공하기 위해 사용자가 직접 소스 코드를 수정해야 한다거나 하는 사용상의 불편함을 최소화 하고자 노력하였습니다. 따라서 스킨의 설정만으로 커스터마이징을 할 수 있습니다. 또한 포스트를 작성함에 있어서도 HTML 모드를 켜고 수정해야 할 일은 거의 없습니다.

어떤 기능을 제공합니까?

현재 제공하는 기능은 아래와 같으며 제목을 의미하는 h2 ~ h4 와 강조의 의미로 사용한 code 는 현재 보이는 포스트와 같고, 또한 스크롤을 인식하여 글을 읽는 것에 도움을 주는 Scrollspy 기능은 오른쪽 옆에서 보는 바와 같습니다. 패치 내역에 따라 지속적으로 변할지도 모릅니다! 추가적으로 무한 스크롤링, 모바일 버전을 지원합니다.

다크 모드

요즘 대세죠. 사용자의 눈을 위해 다크 모드를 지원합니다. 스킨 설정에서 조절하거나, 블로그를 보는 사용자가 임의로 설정할 수 있도록 구성합니다. 우선 순위는 다크 모드에서 수동 설정 > OS > 스킨 설정이며, 라이트 모드에서는 수동 설정 > 스킨 설정 > OS 로 구성합니다.

사이드바

사이드바는 다음과 같은 기능을 제공합니다. 참고로 스킨 설정에서 사이드바를 Off(접힘) 상태로 놓으면, 기준해상도 1600px 보다 큰 해상도에서 사이드바가 바로 표시되지 않고, 네비게이션의 프로필을 눌러야 나타나게 됩니다. 1600px 보다 작은 해상도에서는 모바일 및 태블릿으로 취급되어 On, Off 설정과는 상관없이 기본적으로 사이드바가 나타나지 않습니다.

인용 문구

인용 문구는 현재 티스토리 에디터에서 두 개를 제공하나, 놀랍게도 한 가지는 아직 미구현 상태인 것으로 보입니다. blockquote 에서 data-ke-style 이 일부 구현되어 있지 않은 것을 확인하고 해당 스킨에서 구현하였습니다. 이는 티스토리 에디터에서 인용 문구를 사용할 경우 기본적으로 붙는 옵션입니다.

data-ke-style=style1

이 스타일은 티스토리 에디터에서 "아직" 미구현된 옵션입니다. 인용 문구를 작성하고 HTML 모드를 켠 뒤, data-ke-style 옵션에 style1 을 부여해주세요.

What is Lorem Ipsum?

게다가 이 부분은 티스토리 앱에서도 올바르게 표시되기 때문에 이후 티스토리에서 별도로 에디터에 추가해줄 가능성이 높습니다. 미래에 티스토리 에디터에서 공식적으로 추가 된다면, 패치가 있을 수 있습니다.

data-ke-style=style2

이 스타일은 티스토리 에디터에서 인용 1 에 해당합니다.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

data-ke-style=style3

이 스타일은 티스토리 에디터에서 인용 2 에 해당합니다.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

코드 하이라이팅

이 스타일은 티스토리 에디터에서 코드블럭 에 해당합니다. 개발자인 저에게 빼놓을 수 없는 기능은 코드 하이라이팅 기능입니다. highlightjs 를 사용하여 코드 보다 예쁘게 표기할 수 있습니다. 아래의 경우는 go 언어를 표시한 것입니다.

package main

import "fmt"

func main() {
    fmt.Println("hELLO")
}

이미지 

이미지가 중앙 정렬인 경우, 크기가 유지* 되도록 설정되도록 구성하였습니다. 따라서 이 설정은 중앙 정렬인 경우만 적용되고 나머지는 일반적인 옵션과 같습니다. 그 외에는 특별히 설정해줄 것이 없습니다.

*이미지의 가로사이즈 1100px 까지만 크기가 유지됩니다.

스킨 옵션

hELLO 2.0 부터는 스킨을 구성하고 있는 요소들이 모듈화되어 편의에 맞게 커스터마이징 할 수 있습니다. 끄고 싶은 기능은 끄고, 켜고 싶은 기능은 켜보세요. 사이드바와 댓글 등을 끄게 되면, hELLO 1.0 처럼 바꿀 수도 있습니다.

컨텐츠 너비

각 컨텐츠에 따라 *너비를 설정할 수 있습니다. 홈(인덱스)는 홈, 카테고리, 태그, 검색에 관한 페이지 너비 설정이며, 글(퍼머링크)는 포스트, 공지사항을 이야기합니다.

*모든 컨텐츠는 상한선과 하한선이 있습니다. 320 ~ 1100 사이에서 설정하십시오. 소스코드를 수정하여 하한선 미만, 상한선 초과로 설정하면 레이아웃이 깨질 수 있으니 주의바랍니다.

테마 설정 및 기능

스킨에서 제공하는 테마를 설정하고, 일부 기능을 사용하거나 사용하지 않도록 On/Off 처리할 수 있습니다.

메타 태그, 구글 애드센스는 어디서 설정하나요?

메타 태그와 구글 애드센스와 관련된 설정은 티스토리 플러그인의 형태로 제공하고 있습니다. 따라서 스킨 옵션으로 별도로 제공하지 않습니다. 플러그인에 대해서는 아래의 글을 참고하면 좋을 것입니다.

https://pronist.tistory.com/26

이 스킨은 얼마입니까?

도대체 얼마를 받고 유저에게 이 스킨을 제공해야 할까요? 이 스킨은 이미 무료 스킨의 범위를 벗어났습니다. 그런데 저는 사실 가격 측정 같은 것은 잘 하지 못합니다. 그래서 고민을 한 결과 다음과 같은 결론에 이르게 되었습니다.

공짜

그렇습니다. 이 스킨은 공짜입니다. 그렇지만, 여러분이 한 가지 해주었으면 하는 것이 있습니다. 바로 개발자에게 힘을 주는 일입니다. 어떻게 하면 제게 힘을 줄 수 있을까요?

개발자 커뮤니티인 Github 에서 주어지는 별은 개발자에게 큰 힘이 되어주고 프로젝트에 대한 가치를 나타냅니다! 이 스킨은 무료 스킨이고, 별이 많아질 수록 빛납니다. 스킨이 반짝반짝 해질 수 있도록 여러분께서 별을 쏴주시는 것이 제게는 큰 도움이 됩니다. 또한 하트를 마음껏 뿜뿜 남겨주세요 :)

여러분, 스킨의 오른쪽 상단에 있는 것은 구독 버튼입니다.

https://github.com/pronist/hELLO

스킨 다운받기

스킨 다운로드는 다음의 링크를 통해 할 수 있습니다.
https://github.com/pronist/hELLO/archive/dist.zip

무엇으로 제작되었습니까?

이 스킨은 티도리 프레임워크로 작성되었습니다. 티도리 프레임워크는 본인이 직접만든 티스토리 스킨 개발 프레임워크입니다. 어떤 것인지 알아보려면 아래의 링크에 방문해보세요!

티스토리 스킨 제작 프레임워크, 티도리를 소개합니다.

버그와 개선사항

버그와 개선사항에 대한 피드백은 언제나 환영입니다. 이는 티스토리 스킨이 조금 더 발전할 수 있는 길입니다. 버그는 언제나 있을 수 있습니다. 버그가 없는 프로그램은 세상에 있을 수 없습니다. 이 스킨에는 덧글 기능이 없으므로 추가적인 문의에 대한 것도 남겨주시면 감사하겠습니다.

스킨에 버그가 발생하면 수시로 코드가 갱신 될 수 있습니다. 혹시나, 버그가 있다면 다시 다운 받아보거나 아직 해결이 안 된 버그가 있다면 이슈를 남겨주세요.

https://github.com/pronist/hELLO/issues

호환성

이 스킨은 인터넷 익스플로러는 배제하였습니다. 아래의 그래프를 참고하여 인터넷 익스플로러의 점유율을 살펴보십시오. 2020년 2월기준 1.63% 라는 처참한 점유율을 보유하고 있습니다. 이 시대에 IE 를 논하는 것은 그다지 좋은 접근이라고 볼 수는 없을 것입니다.

https://gs.statcounter.com/

이 스킨에 대한 저작권

이 스킨은 사용자가 직접 개작하고 그에 대해 재배포하는 것을 허용합니다. 단, 원저작자가 누구인지를 표기해야하며, 스킨의 코드가 담겨있는 주소인 https://github.com/pronist/hELLO 를 남길 필요가 분명히 있습니다.