희로인11이 두번째로 판매하고자 하는 스킨은 "희로인11 스킨 #2 - 개발자"입니다. 

스킨 이름에서 유추할 수 있듯이 이번 스킨은 저를 비롯한 개발자들이 매일 보면서 씨름하고 있는 화면 느낌으로 디자인했습니다. 특히 리눅스 터미널에서 사용되는 명령어를 곳곳에 넣어놨습니다. 개발을 해보신 분들께는 깨알같은 반가움을 줄 수 있을지도 모르겠습니다.

스킨의 이모저모를 보시면서 운영하시는/운영하실 블로그에 잘 어울릴지 잘 판단해보세요.^^ 

희로인11 스킨 #2 - 개발자 미리보기

1. 메인 (글 + 댓글)

2. 글목록

3. 방명록

4. 태그모음

7. 카테고리

8. 소개

9. 검색창

블로그 상단 커서가 깜빡거리는 곳이 검색창입니다.

"희로인11 스킨 #2 - 개발자" 마음에 드시나요? 스킨 구매를 희망하시는 분은 희로인11 스킨 구입 안내 글을 읽어주세요^^

릴리즈노트

v1.0.0

- 2022-05-19 릴리즈

v1.0.1

- 2022-05-21 릴리즈

- 애드센스 광고 삽입시 좌측 정렬되게 함

- 글영역에 삽입된 이미지에 회색 그림자 효과를 주어 구분감이 들게 함

- 방문자수 표출

v1.0.2

- 2022-05-21 릴리즈

- 가독성을 위해 본문 영역은 흰색 배경, 검정 글씨로 수정

v1.0.3

- 2022-05-22 릴리즈

- ads 클래스 요소에 들어간 애드센스 광고 코드 스크롤바 이동시 고정되도록

- 전반적인 디자인 수정

v1.0.4

- 디자인 디테일 향상

v1.0.5

- 2022-07-14 릴리즈

- 광고 및 홍보 활동을 위한 사이드바 추가

- 본문 h2, h3, h4 태그 관련 디자인 수정

- 글 목록에 썸네일 추가

- 전반적인 디자인 디테일 향상

v1.0.6

- 2022-08-22 릴리즈

- 사이드바 디자인 수정

(이 글은 2022-08-22에 마지막으로 수정되었습니다.)

희로인11 스킨 #1 - 종이책 v1.0.6 전 버전(v1.0.0 ~ v1.0.5)을 사용하시는 분들께 알립니다.^^

영문 줄바꿈이 간혹 제대로 안 되는 경우가 있더라고요. 보통 띄어쓴 부분에  가 삽입된 경우에 그렇습니다. 

따라서 이미 커스터마이징을 어느 정도 진행해서 v1.0.6 이상을 설치하시기 번거로우신 분들은 CSS 파일을 살짝 수정해주시면 됩니다. 

.article-content를 찾으신 다음에 word-break: break-all; 을 추가해주시면 됩니다.

그러면 간단히 영문 줄바꿈이 잘 안되는 문제가 쉽게 해결됩니다. 

이 에러를 발견하시고 소중한 피드백을 주신 박**님 감사합니다. :D

희로인11 스킨을 설치하는 방법에 대해 알려드리겠습니다. 모든 스킨에 공통적으로 해당되는 이야기므로 구매한 스킨 번호에 관계없이 아래 설치법을 잘 따라하시면 됩니다. 

우선 제공받은 비밀번호를 통해 스킨 압축파일을 다운받으셨을 것이라 가정하고 설명을 시작하겠습니다. 먼저 압축을 풀어 주세요.

압축을 풀면 다음과 같이 index.xml, skin.html, style.css 파일 등이 있을 것입니다. 이 세 개의 파일은 꼭 있어야 하는 것이니 혹시라도 압축을 풀었는데 누락된 것이 있다면 제게 말씀해주세요.

이제 티스토리 관리자 페이지에서 [꾸미기] - [스킨 변경]을 클릭해주세요. 

그 다음에는 [스킨 등록] 버튼을 클릭해주세요.

스킨등록 화면에서 [추가] 버튼을 클릭하신 후에 압축을 푼 폴더에 있는 모든 파일들을 넣어줍니다. 

모든 파일들이 제대로 업로드 되었다면 [저장] 버튼을 클릭하시고 스킨명을 입력해주세요. 

[확인] 버튼을 누르고 난 후 스킨 보관함을 살펴보시면 등록한 스킨을 찾아보실 수 있을 것입니다.

마지막으로 [적용] 버튼을 클릭하면 스킨 설치가 완료됩니다. 이제 블로그에 들어가보면 새로운 스킨을 입고 있을 것입니다. 

글을 천천히 읽고 따라했는데도 잘 안되는 분들은 댓글로 질문해주세요. 

희로인11 스킨과 함께 즐거운 티스토리 블로그 활동하시기 바랍니다 :D

<이 글은 2022-03-18에 마지막으로 수정되었습니다.>

희로인11이 첫번째로 판매하고자 하는 스킨은 "희로인11 스킨 #1 - 종이책" 입니다. 

종이책을 읽을 때 느낄 수 있는 질감, 특유의 정취를 담고자 노력했습니다. 책을 읽다가 얼굴에 덮고 잠시 눈을 붙일 때 은은히 풍겨오는 그 종이 냄새, 좋지 않나요?

희로인11 스킨 #1-종이책은 일상과 여행에서 느낄 수 있는 소소한 행복을 표현하고자 하는 분들께 추천하는 스킨입니다. 

이 스킨을 사용하시는 분들은 글을 작성하실 때 너무 다양한 색상을 사용하지 않길 권해드립니다. 많아도 두 개 정도의 색상만을 사용했을 때 이 아날로그 종이책 감성이 유지 될 것입니다. 그 감성을 유지한다는 것에 포인트를 두고 하나씩 글을 작성해가시다보면 아주 예쁜 책이 한 권 완성될 것입니다. 

아래 상세 페이지들에 대한 스크린샷을 남겨놓았으니 어떤 식으로 디자인되었는지 구경해보세요. 이미지를 클릭하시면 확대된 버전으로 살펴보실 수 있습니다.

1. 사이드바 + 글 영역

2단 형식으로 구성되어 있으며 상하좌우에 회색 여백을 주어, 방문자가 독립된 공간에서 차분히 책을 읽는 느낌을 가질 수 있게 했습니다.  

2. 글목록 + 글

글목록은 썸네일 이미지를 담은 카드 형식으로 나타냈습니다. 글자 카드가 제멋대로 흩어져 있는 효과를 주기 위해서 썸네일 이미지의 사이즈를 일부러 통일시키지 않았습니다. 

3. 방명록/댓글

레트로한 디자인으로 방명록 및 댓글 입력창을 꾸며 방문자가 안부를 남기고 싶은 생각이 들도록 디자인했습니다. 진심으로 안부를 남기고 싶은 이웃들을 "희로인11 스킨 #1 - 종이책"과 함께 만들어가셨으면 좋겠네요.

5. 태그 모음

글을 작성하면서 어떤 태그들을 사용했는지 한 눈에 확인할 수 있습니다. 

6. 모바일 화면 글 영역/사이드바

모바일 화면에서는 사이드에 있는 화살표 클릭을 통해 사이드바와 글 영역을 넘나들 수 있습니다.

7. 보호글 암호입력 화면

티스토리에서 보호글은 관리자가 공유해준 비밀번호를 입력해야지 볼 수 있습니다. 잠금을 해제해보고 싶은 생각이 들지 않나요? 

8. 펜 모양 마우스 커서

저는 개인적으로 책에 줄을 긋고 메모하면서 읽는 것을 좋아합니다. 그래서 종이책과 잘어울리는 펜 모양의 마우스 커서를 제작해서 넣었습니다. 

9. 본문 글자 크기 조절 기능

웹페이지 우측 상단을 보시면 본문의 글자 크기를 조절할 수 있는 기능이 있습니다. 마이너스, 플러스 버튼 보이시죠?^^ 블로그에 방문한 사람들은 자신에게 맞는 폰트 크기로 글을 읽을 수 있습니다.

희로인11 스킨 #1 - 종이책, 잘 둘러보셨나요?

스킨 구매를 원하시는 분은 희로인11 스킨 구입 안내 글을 참고하세요. 감사합니다. 

릴리즈노트

v1.0.3

- 2022-04-03 릴리즈

- 본문 영역 글자 크기 조절 버튼 추가

- 애드센스 광고 추가했을 때 컨테이너에 지정했던 높이가 풀리는 현상 해결

- 글 본문 영역과 댓글 폰트 수정

- 기타 UI 개선

v1.0.4

- 2022-04-08 릴리즈

- 글 목록 masonry 방식으로 정렬

v1.0.5

- 2022-04-10 릴리즈

- 본문 영역 글자 크기 조절 버튼 위치 브라우저 사이즈 변경에도 적절한 위치를 유지하도록 수정

v1.0.6

- 2022-04-14 릴리즈

- 영문일 때 간혹 줄바꿈이 제대로 안되는 현상 해결

(이 글은 2022-05-21에 마지막으로 수정되었습니다.)