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

hELLO.

hELLO 스킨은 본래 기능의 많이 없었다가, 최근 반응이 나쁘지 않아서 여러 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기능과 품질 향상이 있었습니다. hELLO 스킨은 역사는 짧지만 유무료를 모두 포함한 모든 스킨을 통틀어 탑티어 안에 드는 스킨임을 자부합니다. 

아래의 블로그는 hELLO 스킨의 데모를 보여주기 위한 블로그입니다.

https://hello-skin.tistory.com/

반짝 반짝!

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

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

https://github.com/pronist/hELLO

티스토리 스킨 분야에서 가장 많은 별을 받은 프로젝트입니다!

hELLO. 스킨이 깃허브― 티스토리 스킨 분야에서 가장 많은 별을 받은 스킨이 되었습니다. 많은 분들이 사랑해주신 것 같아 개발자로서도 기쁩니다. :)

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

단순, 그러나 가득

패치노트

3.2.0

hELLO 3.2 버전이 업데이트 되었습니다. 일부 버그가 수정되었으며 새로운 커버도 추가되었습니다. 버그, 개선사항이 있을 경우에는 덧글로 남겨주세요. 간단한 것이라면 금방 반영 될 것입니다.

• 갤러리, 그리드 커버와 같이 이미지가 주로 표시되는 목록에서 이미지에 포스트 링크가 추가 되었습니다.
• 코드 하이라이팅이 다크모드에서도 적용됩니다.
• 다크모드에서 Gist 처럼 외부기능에 대해서 스타일이 문제가 발생하던 것이 일부 수정되었습니다. 다만 모든 외부기능이 정상적으로 나타날 것이라고는 보장할 수 없습니다.
• 기본적으로 대댓글이 숨김 상태로 바뀌었습니다. 원 댓글에서 댓글보기를 누르면 대댓글이 나타납니다.
• TOC(Table Of Contents)에서 Bold 가 올바르게 적용되지 않던 버그가 해결되었습니다.
• 이제 폰트를 스킨 자체의 CSS 에서 강제하지 않으며 다른 외부기능에 의해 덮히는 경우, 그것을 우선순위로 적용됩니다.
• 갤러리 커버의 글자 등장 방식이 변경되었습니다.
• 카테고리의 다른 글이 스킨 자체 기능으로 내장되며 플러그인에서 독립되었습니다.
• 슬라이더, 슬라이더 (스크린) 커버가 추가되었습니다.
• 커버에서 테이프와 스크린의 용어가 바뀌었습니다. 테이프는 슬라이드쇼, 스크린은 슬라이드쇼 (스크린) 으로 변경됩니다.
• 사이드바에서 최신글과 인기글에 썸네일이 표시됩니다.
• 좋아요, 구독, SNS, 신고버튼의 디자인이 변경되었으며 댓글 창을 On/Off 할 수 있는 버튼이 추가되었습니다.
• figure, img, ol, li, p 태그 등 일부 여백이 변경되었습니다.
• 이제 포스트에서 자체적으로 글자의 색상을 변경하거나 수정한 것도 올바르게 적용됩니다.
• 일부 요소에서 CSS 코드가 여러 번 중복되어 나타나던 것이 수정되었습니다.
• 댓글 On/Off 기능의 동작이 바뀌었습니다. 본래 이 기능을 Off 하면 댓글 자체가 사라졌으나, 이제는 댓글을 숨김처리하여 이번 버전에서 추가한 댓글 버튼을 누르면 볼 수 있도록 변경됩니다.
• a 태그, 작성자, 댓글 등 일부 디자인이 변경되었습니다.

3.2.1

• ol, ul 태그에 대해 깊이가 적용될 경우 적용이 안 되던 문제가 수정되었습니다.
• 코드 하이라이트 테마를 수동으로 설정할 수 있습니다. (스킨옵션 - 글 (퍼머링크) - 코드 하이라이팅)
• skin.html 코드 내 head 태그의 외부에서 인라인으로 script, style 태그가 존재하던 것을 제거하여 스킨의 구조가 개선되었습니다.
• TOC(Table of Content)의 최대 세로사이즈가 620px 으로 변경됩니다. 해당 사이즈를 넘어가면 스크롤이 가능해집니다.
• TOC(Table of Content)가 위치를 올바르게 잡지 못하던 문제가 해결되었습니다.
• TOC(Table of Content)의 디자인이 변경되었습니다.

티스토리 공식 블로그에서 구독을 누르고 도망갔습니다

왠지는 모르겠지만 티스토리 공식 블로그에서 구독을 누르고 사라졌습니다. 근데 정작 바로 구독취소를 해버려서 구독자 목록에는 없군요. 아무일도 안 일어나겠지만 어쨌거나 흥미로운 해프닝인걸로.

어떤 기능을 제공합니까?

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

다크 모드

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

사이드바

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

코드블럭 폰트는 D2Coding 을 사용합니다. 하지만, 일반 본문은 Noto Sans KR 을 씁니다

이미지 및 슬라이드쇼

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

글 목록 스타일

글 목록 스타일은 리스트(오리지널), 리스트, 그리드, 갤러리를 지원합니다. 글 목록 스타일은 스킨 커버의 그것과 똑같은 스타일로 적용됩니다.

카테고리 관리에서 글 목록 스타일을 카테고리에 따라 지정할 수 있습니다. 이는 얼마 전에 티스토리에 추가된 신기능입니다. 여기서 기본 스타일 유지라는 것은 스킨 편집에서 설정한 글 목록 스타일을 의미합니다.

스킨 옵션

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

컨텐츠 너비

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

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

커버

커버에 대한 설정은 갤러리, 그리드, 슬라이드쇼 커버에 대한 일부 설정을 조절할 수 있도록 구성되었습니다. 갤러리 열 수 및 갤러리 아이템 높이와 그리드 열 수는 스킨 커버 이외에도 글 목록 스타일의 갤러리, 그리드에 영향을 줍니다. 다만, 슬라이드쇼 높이 옵션은 글 읽기, 글 목록 이미지 모드의 테이프의 높이에는 영향을 주지 않습니다.

공통

여기서는 공통적인 설정을 조절합니다. 스킨의 기본 색 테마를 설정할 수 있으며 네비게이션을 표시하거나 사이드바를 숨길 수 있습니다.

홈 (인덱스)

해당 섹션에는 옵션이 하나밖에 없습니다. 카테고리 편집 - 관리에서 설정할 수 있는 카테고리 이미지가 존재하는 경우 이미지가 나타나는 형태를 결정합니다. 기본, 테이프, 스크린 모드가 있으며 각각 이미지를 나타내는 형태가 다릅니다만, 카테고리에 따라 모드를 다르게 할 수 없습니다.

글 (퍼머링크)

기본 글 읽기, 글 읽기에서 표시할 수 있는 각종 요소들에 대해 설정합니다. TOC(Table Of Contents)라는 것은 글 오른쪽에 나와있는 네비게이션을 의미합니다. 글 읽기 또한 글 목록 이미지 처럼 기본, 테이프, 스크린 모드가 있습니다.

코드 하이라이팅 테마는 hELLO 3.2.1 버전부터 설정 가능합니다.

설정에서 하는 것은 디폴트 상태(글 읽기의 기본(default)를 의미하는 것이 아님)를 말하며,글 읽기 모드는 글 마다 다르게 자그마치 수동으로 설정가능합니다. 포스트에 다음과 같은 HTML 코드를 추가하며, data-mode 의 값에 screen, tape, default 중 하나를 입력하면 수동으로 변경됩니다.

<div class='h' data-mode='screen'></div>

이 기능은 비공식 기능입니다. 티스토리 스킨의 공식 기능으로 제공하면 UI 상으로 사용자가 직접 글을 쓸 때 글 읽기 모드를 선택할 수 있기 때문에 굳이 이런식으로 하지 않아도 될텐데 정말 아쉽습니다. 얼른 공식적으로 제공되었으면 좋겠네요 :(

스크린과 테이프 모드는 기본적으로 썸네일 이미지가 있어야 처리됩니다. 따라서 썸네일이 없다면 기본모드로 자동으로 변경합니다.

공지사항

공지사항의 글 목록 스타일을 지정할 수 있습니다. 리스트 스타일과 동일한 옵션을 제공합니다. 글 읽기는 글 (퍼머링크) 설정에 있는 글 읽기 옵션을 따릅니다.

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

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

스킨 커버

hELLO 3.0 에서 스킨 커버가 추가되었습니다. 스킨 커버는 리스트(오리지널), 리스트, 그리드, 갤러리, 슬라이드쇼, 슬라이드쇼 (스크린), 슬라이더, 슬라이더 (스크린) 까지 8종류로 정의하였습니다. 리스트(오리지널)은 hELLO 2.0 까지 사용하던 리스트입니다.

갤러리, 슬라이드쇼, 슬라이더와 같이 썸네일 기반의 커버, 글 목록 스타일을 사용하실 때에는 주의해주시기 바랍니다. 썸네일이 없으면 빈 화면이 나오거나 예상하지 못한 출력이 나올수도 있습니다.

스킨 다운받기

이 스킨은 공짜입니다. 돈 같은건 지불하지 않아도 됩니다. 요즘 같이 힘든 세상에 그럴 수는 없죠. 단지, 깃허브 레포에 별만 주시면 됩니다!(중요) 스킨 다운로드는 다음의 링크를 통해 할 수 있습니다.

https://github.com/pronist/hELLO/archive/dist.zip

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

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

https://tidory.com

hELLO. 스킨은 어떻게 적용할 수 있나요?

티스토리 스킨을 적용시키는 방법은 어떤 스킨이나 공통적으로 구성됩니다. 이 부분에서 가장 많이 겪는 문제는, images 폴더를 업로드 하지 않아서 문제가 발생하는 경우입니다. 따라서 images 폴더의 파일들이 반드시 업로드 되었는지 체크해야 합니다. 이것이 지켜지지 않는 경우, 해당 스킨에서는 무한 로딩이 발생할 수도 있습니다.

트러블 슈팅

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

스킨에 버그가 발생하면 수시로 코드가 갱신 될 수 있습니다. 혹시나, 버그가 있다면 다시 다운 받아보거나 아직 해결이 안 된 버그가 있다면 이슈를 남겨주세요. hELLO 3.0 버전에 들어서면서 많은 기능이 스킨에 포함되었습니다. 버그를 없애기 위해 노력은 하였습니다만, 버그는 있을 것입니다. 여러분의 도움이 필요합니다.

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

구독 버튼 & 티스토리 메뉴

스킨 오른쪽 상단의 구독 버튼과 사이드바에 표시되는 티스토리 메뉴를 표시하지 못하는 경우, 아래와 같은 조치가 필요합니다. 이 기능은 스킨의 기능이 아닌 티스토리의 기능이므로 관리자 메뉴에서 처리해야 합니다.

다음과 같이 설정되어 있어야합니다. 블로그 메뉴바라는 것은 사이드바의 티스토리 메뉴를 의미하며 구독 버튼은 스킨 상단에 위치하는 구독 버튼입니다.

인터넷 익스플로러

이 스킨은 인터넷 익스플로러는 배제하였습니다. 즉, 인터넷 익스플로러에서 스킨이 올바르게 동작하리라고 보장하지 않습니다. 아래의 그래프를 참고하여 인터넷 익스플로러의 점유율을 살펴보십시오. 2020년 11월기준 1.13% 라는 처참한 점유율을 보유하고 있습니다. 이 시대에 IE 를 논하는 것은 그다지 좋은 접근이라고 볼 수는 없을 것입니다.

https://gs.statcounter.com/

이 스킨에 대한 저작권

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

*스킨 왼쪽 하단에 있는 코드 아이콘은 필수사항으로, 스킨 개발자의 블로그로 연결됩니다. 이는 반드시 기재되어 있어야 합니다.

더 읽을거리

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

티스토리 플러그인, 아직도 사용 안 하니?

티스토리 블로그 백업 프로그램을 만들었습니다.

hELLO. 티스토리 스킨 개발 돌아보기 - 1부

hELLO. 티스토리 스킨 개발 돌아보기 - 2부