코딩재개발 RSS 태그 관리 글쓰기 방명록
2021-05-02 01:10:40

안녕하세요. 코딩재개발입니다. 제가 만든 "개발자를 위한 티스토리 반응형 스킨, 리눅스킨"을 소개합니다.  

 

코딩을 취미로든, 전공으로든, 직업으로든 하다보면 언젠가는 리눅스 운영체제를 접하게 됩니다. 윈도우 운영체제에 비해 좀 더 개발을 하기에 편리한 점들이 있고, 또한 여러 명이서 같이 사용할 수 있는 장점이 있기 때문에 리눅스를 선호하게 됩니다. 리눅스는 윈도우에 비해 분명 처음에는 사용하기 어렵지만, 좀 더 "간지"가 난다는 아주 큰 장점이 있습니다. ㅋㅋ

 

그래서 저는 리눅스만의 심플하고 전문적인 느낌을 살린 티스토리 스킨을 만들어봤습니다. 저는 이 스킨에게 리눅스킨(LinuXkin)이라는 이름을 붙여주었습니다. 

 

리눅스와 티스토리 스킨의 콜라보레이션,

Linux x skin = LinuXkin

 

저는 리눅스킨을 디자인할 때, 클라우드 통합개발환경인 구름 IDE의 UI를 참고했습니다. 전체적으로 구성이 매우 심플하고, 요소요소에 포인트로 들어간 색상들이 예쁘더라고요. 구름 IDE의 UI를 예쁘게 만들어주신 디자이너 분께 감사의 마음을 표합니다. 

 

구름 IDE의 UI입니다. 예쁘죠?

 

리눅스킨 이모저모

리눅스킨의 이모저모를 살펴보시고 마음에 드시면 한 번 설치해보세요. PC, 태블릿, 스마트폰 등 다양한 기기에서 어떻게 보여지는지 확인해보세요. 

 

1. 아티클 영역

다크모드와 화이트모드의 전환은 우측 상단에 있는 전구 모양 아이콘을 클릭했을 때 이뤄집니다. 

 

 

2. 글 목록

 

 

3. 댓글/방명록

댓글, 방명록 리스트의 디자인이 투박해보일 수 있으나, 일부러 리눅스 감성을 살리기 위한 것으로 봐주시면 감사하겠습니다. 댓글, 방명록 입력 모달창 귀엽지 않나요? 

 

 

4. 태그 목록

태그 목록은 마치 복잡한 암호문을 보는 것과 같이 보여집니다. 

 

 

리눅스킨 설치 방법

1. 먼저 제 깃헙에서 리눅스킨 압축 파일을 다운로드 받으세요.

깃헙은 개발자들이 자신이 개발한 코드를 저장하고 공유하기 위한 플랫폼입니다. 

 

github.com/kyohoonsim/linuxkin

 

GitHub - kyohoonsim/linuxkin: 반응형 티스토리 스킨, 리눅스킨

반응형 티스토리 스킨, 리눅스킨. Contribute to kyohoonsim/linuxkin development by creating an account on GitHub.

github.com

 

코드 버튼을 클릭하신 후에 Download ZIP 버튼을 클릭하시면 됩니다. 깃/깃헙을 사용할 줄 아시는 분들은 git clone 또는 fork 등의 방식으로 코드를 가져가셔도 좋습니다. 

 

 

다운로드 받으실 때 우측 상단에 있는 "별" 한 번 눌러주세요. 여러분의 클릭이 제게 큰 기쁨과 위로를 줍니다. 로그인을 해야해서 깃헙 회원이 아닌 분들은 다소 번거로우시겠지만 부탁드립니다. ㅎㅎ (깃헙 안 써보신 분들은 이번 기회에 한 번 써보세요. 코드 공유, 버전 관리, 백업 등에 있어서 아주 좋은 도구입니다.) 2022-9-12 기준으로 26개의 별이 쌓였네요. 별을 눌러주신 모든 분들께 감사드립니다. 50개의 별을 받는 것이 제 목표입니다. 50개의 별을 받는 그날까지 열심히 발전시켜 나가겠습니다! 

 

 

 

압축 파일을 다운로드 받으셨다면 압축을 풀어주세요. 

 

2. 그 다음에 티스토리 관리자 페이지에 들어가셔서 좌측 메뉴 중에 [꾸미기] - [스킨 변경]에 들어가주세요.

 

 

3. [스킨등록 +]을 클릭해주세요.

 

 

4. 다운로드 받은 파일들을 업로드해주세요.

README.md 파일은 업로드하실 필요 없습니다. 아래 그림처럼 되었다면, [저장] 버튼을 클릭하시면 됩니다. 업로드된 파일 목록에 js 파일이 꼭 포함되어 있어야 합니다. 그렇지 않으면, 다크모드 <-> 라이트모드 전환 등 각종 버튼이 제대로 작동하지 않습니다. 

 

 

5. "리눅스킨 v버전"이라고 스킨명에 기입하신 후 [확인]을 클릭합니다.

ex) 리눅스킨 v4.3.2, LinuXkin v4.3.2

 

 

6. 스킨 목록에서 [스킨 보관함]을 클릭합니다.

 

 

7. "리눅스킨 v버전"을 선택한 후에 [적용]을 클릭하면, 스킨 설치가 완료됩니다.

 

 

 

리눅스킨 사용시 주의사항

1. 마음껏 수정해서 쓰세요. 

리눅스킨은 설치 후 각자의 필요에 따라 마음껏 수정해서 쓰셔도 됩니다.

2. 배포는 리눅스킨 제작자의 깃헙에서만 합니다. 

대단한 스킨은 아니지만, 꽤 많은 정성이 들어간 스킨입니다. 리눅스킨을 마치 자신이 직접 만든 것처럼 배포하지 마세요. 

3. 본문 영역 하단에 있는 "Designed by 코딩재개발"은 수정하시면 안됩니다. 

본문 영역 최하단에 보시면 "Designed by 코딩재개발"과 같은 문구를 보실 수 있는데, 이것은 이 스킨을 제가 만들었다는 것을 나타내기 위함이니 이 부분은 절대 수정하지 말아주세요. 이것을 통해서 무료 스킨을 제공하는 제 블로그에 조금이나마 유입이 늘기 바라는 것이니 부디 제 바람을 좌절시키지 말아주세요.

4. 리눅스킨을 설치하신 분들은 댓글로 설치했다고 알려주세요.

다른 분들의 블로그에는 리눅스킨이 어떻게 적용되었는지 궁금하기도 하고, 또 살펴보면서 개선점은 없는가 파악하기 위함입니다.

 

리눅스킨은 계속해서 발전 중!

리눅스킨은 계속해서 업그레이드 되어 가고 있습니다. 아마도 제가 티스토리 블로그를 운영하는 동안은 계속해서 업데이트시켜갈 것 같습니다. 제가 다른 스킨으로 갈아타지 않는 이상 말이죠. 여러분이 많이 사용해주실 수록 제가 더 애정을 갖고 업데이트시켜 갈 것 같습니다. 많이 사용해주세요^^ 그리고 사용하시면서 개선되었으면 하는 점이 있다면, 제게 댓글로 알려주세요. 개선사항을 깃헙의 이슈 페이지에 남겨주셔도 좋습니다. github.com/kyohoonsim/linuxkin/issues

 

리눅스킨은 아래와 같이 발전해가고 있습니다. 

  • 전반적으로 구름 IDE의 디자인을 흉내냈습니다. 참고로 구름 IDE는 클라우드 방식의 통합개발환경입니다. 전반적인 UI가 이쁘더라고요.
  • 색 사용을 최대한 줄였습니다. 흑백의 아름다움을 극대화시켰습니다. 완전한 검은 색보다는 살짝 연한 검은색을 사용해서 좀 더 고급스러운 효과를 줬습니다.
  • 최하단에서 언제나 쉽게 블로그내 검색이 가능하게 했습니다. 
  • 사이드바 영역과 본문 영역의 스크롤이 따로 작동하게 했습니다. 이전에는 함께 올라가고 내려가고 해서 불편했는데, 이제는 글을 읽다가 사이드바의 내용을 확인하기가 훨씬 더 수월해졌습니다. 
  • 사이드바 스크롤과 전체 스크롤을 좀 더 예쁘게 꾸몄습니다. 스크롤을 좀 더 얇게 만들었고, 스크롤과 스크롤 배경 색상도 모두 변경했습니다. 
  • 사이드바 카테고리명 앞에 폰트어썸의 아이콘을 넣어서 좀 더 시각적으로 도드라지게 했습니다. 
  • 모바일 화면에서 사이드바 요소들이 메인 요소 아래에 하나씩 순차적으로 위치하게 했습니다.
  • 모바일 화면의 팝업 사이드바에는 RSS, 태그, 관리, 글쓰기, 방명록 메뉴와 카테고리만 나오게 변경했습니다.
  • PC 화면에서 사이드바의 z-index를 높여서 푸터 위에 오게 했습니다.
  • 사이드바에서 글 제목의 경우는 아쿠아(aqua) 색상을 줘서 좀 더 구별된 느낌이 들게 했습니다. 
  • 화면 크기를 줄일 때 메인 요소의 일부가 가려지는 현상을 해결했습니다.
  • 푸터 영역에 있는 검색 창의 너비를 조금 더 넓혔습니다.
  • 목록에 썸네일 이미지를 넣어서, 글이 어떤 주제에 대한 것인지 한 눈에 파악할 수 있게 했습니다.
  • 티스토리 편집기에서 글을 작성할 때 제목1, 제목2, 제목3으로 선택한 부분에는 아래에 옅은 회색 줄이 그려지게 해서, 글에서 소제목을 나타내는 부분들을 좀 더 시각적으로 명확하게 했습니다.
  • 방문수 통계에서 오늘 날짜 방문수 앞에는 달리는 사람 이모티콘을 넣어서 좀 더 부각시켰습니다. 
  • 스크롤바를 좀 더 예쁘게 꾸몄습니다.
  • 글 제목 부분에서 카테고리명을 앞으로 옮겨서 파일의 경로처럼 보이게 했습니다.
  • 공감 버튼을 강조해서 글을 읽은 이후에 공감 버튼을 쉽게 찾을 수 있도록 만들었습니다.
  • 스크롤을 내리면 헤더와 푸터가 사라지게 했고, 스크롤을 올리면 다시 나타나게 했습니다.
  • 팝업 사이드바의 바깥 영역을 클릭할 때 팝업 사이드바가 닫히도록 했습니다.
  • 팝업 사이드바가 열릴 때 다른 부분은 어두워지게 만들었습니다.
  • 댓글, 방명록 남긴 사용자 이름 앞에 아이콘을 넣었습니다.
  • 본문 글자 크기를 키웠습니다. 
  • 본문 글씨체로 리디바탕체를 적용시켰습니다.
  • 블로그 소개에 소개 이미지가 보여지게 했습니다.
  • 방명록 창, 댓글 창, 방명록 입력 버튼, 댓글 입력 버튼을 꾸몄습니다.
  • 공감 유도 문구를 수정했고, 공감 버튼 부분에 배경색을 줬습니다.
  • 사이드바 공지사항 제목 앞에 아이콘을 추가했습니다.
  • 공지사항 제목 앞에 공지사항 카테고리가 오도록 위치를 바꿨습니다.
  • 다크모드, 라이트모드 기능을 넣었습니다. 
  • 카피라이트부분을 글 작성 일자 부분의 디자인과 일치하게 만들었습니다.
  • 리스트 아래 옅은 테두리를 넣었습니다.
  • 본문 내 h 태그 아래 옅은 테두리를 없앴습니다.
  • 공감 버튼과 구독 버튼을 꾸몄습니다.
  • 댓글 입력 버튼과 방명록 입력 버튼 디자인을 기본 디자인으로 심플하게 바꿨습니다.
  • 댓글 입력창과 방명록 입력창 색상을 기본 디자인으로 변경했습니다.
  • 본문 내 하이퍼링크들에는 밑줄이 쳐지도록 했습니다.
  • 헤더, 푸터, 사이드바 transition 속도를 0으로 바꿨습니다. 
  • 미디어 쿼리 max-width를 800px로 변경했습니다.
  • 본문 글씨체를 NEXON Lv1 고딕으로 변경했습니다. 
  • 댓글 부분과 방명록 부분을 예전 버전으로 회귀시켜 좀 더 리눅스 터미널 또는 윈도우 cmd의 느낌이 나도록 디자인했습니다.
  • 최하단에 있는 검색창 부분에서 root를 guest로 변경했습니다. 이 부분의 색상도 변경했습니다. 
  • 글 제목 뒤에 붙어 있는 .txt를 회색으로 변경해서 글 제목과 구분되게 했습니다. 
  • 페이징 부분을 좀 더 레트로하게 변경했습니다.
  • 댓글 및 방명록 입력 버튼, 페이징 버튼에 커서를 올리면 커서의 모양이 손가락 모양으로 변경되게 했습니다.
  • 비공개글, 보호글에는 글 제목 옆에 아이콘이 나오게 해서 관리자로 하여금 쉽게 구분되게 했습니다.
  • 화면 크기 조절시 사이드바에 본문 영역이 가려지는 오류를 해결했습니다. 
  • 전반적으로 디자인의 디테일을 살렸습니다. 
  • 댓글 입력, 방명록 입력 부분을 모달창으로 만들었습니다. 
  • v4.3.2 - jquery를 cdn 방식 대신 직접 다운로드 받은 파일에 연결하도록 수정했습니다.  
  • v4.3.3 - css 내 불필요한 공백과 안쓰는 폰트 관련 링크를 제거했습니다. 본문 내 리스트 아래 옅은 회색 밑줄을 제거했습니다(마크다운으로 문서 작성하시는 분들을 위해서). 태그 페이지에서 태그에 마진을 부여했습니다(클릭할 수 있는 요소가 너무 가깝다고 구글 서치 콘솔에서 평가해서). 

 

마무리 인사

퀄리티 있는 글들이 심플하면서도 예쁜 스킨에 담겨진다면, 훨씬 더 많은 사람들이 찾는 블로그가 될 것입니다. 리눅스킨이 충분히 심플하고, 충분히 예쁜지는 모르겠지만, 현재 제 눈에는 만족스럽습니다. 그러나 아마도 얼마 후 저는 예쁘지 않은 부분을 찾아낼 것이고, 또 수정할 것입니다.

 

저 말고도 일반적으로 많은 분들이 좋아하실 만한 스킨이 되도록 계속해서 업그레이드시켜 가겠습니다. 리눅스킨을 설치해주신, 또 설치해주실 모든 분들께 진심으로 감사의 말씀을 드립니다. 

 

리눅스킨 발전에 도움을 주신 분들

1. 문베디드님 ★

2. 뚜뚜월드

3. 부요리장상디

 

피드백을 주신 덕분에 스킨의 완성도가 높아졌습니다. 감사합니다!

 

 

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

 

* 글을 읽던 중에 궁금했던 부분은 질문해주세요.
* 칭찬, 지적, 의문, 격려, 감사표현 등을 남겨주세요.
* 최대한 답변 드리도록 노력하겠습니다.
* 욕설과 광고를 담은 댓글은 가차없이 삭제합니다.
* 티스토리 회원인데, 로그인이 풀린 경우에는 우측 상단에 있는 물음표 아이콘을 클릭해주세요.
비밀글
  1. 이전 댓글 더보기
  2. 알 수 없는 사용자@2021.04.06 02:03 ~$ 헤헤 저는 이번에 블로그 시작하는데 예뻐서 써보려고요! [댓글주소]  [수정/삭제]  [답글작성]
  3. singNa_@2021.04.06 18:29 신고 ~$ 코테 공부한 기록을 남기기위해 스킨 찾다가 다운받고 갑니다! 유니크해요 ㅋㅋ name~$ 익숙하면서도 보기싫은 그것.. 감사합니다!! [댓글주소]  [수정/삭제]  [답글작성]
  4. 부요리장상디@2021.04.06 22:36 신고 ~$ 안녕하세요~
    사내에서 블로그 스킨 바꾸려고 웹서핑하다가 발견하여 제 블로그도 적용하였습니다.
    잘 쓰겠습니다 감사합니다. [댓글주소]  [수정/삭제]  [답글작성]
  5. 4th@2021.04.15 11:17 신고 ~$ 제 마음에 쏙드는 스킨 감사합니다! 깃헙에 별 하나 살포시 남기고 갑니다ㅎㅎ [댓글주소]  [수정/삭제]  [답글작성]
  6. 꼬장스카이비전@2021.04.16 12:48 ~$ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 고맙다 발전을 주신분이라니 ㅋㅋㅋ [댓글주소]  [수정/삭제]  [답글작성]
  7. julio@Home@2021.05.11 10:08 ~$ 무료로 이렇게 좋은 스킨을 공개해주신 것에 감사합니다. 잘 사용하겠습니다. [댓글주소]  [수정/삭제]  [답글작성]
  8. Prabbit00@2021.05.13 16:02 ~$ 정말 고맙습니다. 오늘 별은 저의 것입니다 ㅎㅎ [댓글주소]  [수정/삭제]  [답글작성]
  9. 익명@2021.06.27 13:27 ~$ 비밀댓글입니다 [댓글주소]  [수정/삭제]  [답글작성]
  10. 양지바른@2021.07.11 18:40 ~$ 스킨 다운 받았는데 넘 갬성적이고 귀엽네요 ^^ 좋은 스킨 만들어주셔서 감사합니다 ~ [댓글주소]  [수정/삭제]  [답글작성]
  11. 꼬장스카이비전@2021.07.12 12:56 ~$ 스킨 잘 구경하고 있습니다. 좋은 스킨 만들어주셔서 감사할까요? [댓글주소]  [수정/삭제]  [답글작성]
  12. 3435354@2021.08.19 15:34 ~$ 만약 블로그 소유자라면 ~$ 가 아닌 ~# 로 root 권한 효과도 좋을 것 같네요 [댓글주소]  [수정/삭제]  [답글작성]
  13. gun@2021.11.10 00:26 ~$ 안녕하세요. 오래전에 계정을 만들고 방치해뒀다가 이제서야 시작해보려고 스킨을 찾다가 발견했습니다. 소중히 잘 쓰겠습니다. 감사합니다. 별도 눌러뒀습니다! [댓글주소]  [수정/삭제]  [답글작성]
  14. 제타킴@2022.02.01 22:33 ~$ 스킨 너무 감사합니다. 복 많이 받으세요^^ [댓글주소]  [수정/삭제]  [답글작성]
  15. 운연@2022.02.08 01:19 ~$ 잘 이용하겠습니다. [댓글주소]  [수정/삭제]  [답글작성]
  16. FAULT@2022.08.30 18:57 ~$ 저도 오래전에 만든 계정을 다시 사용하려고 하다가 스킨을 찾아서 적용해보려고 합니다.
    감사합니다! [댓글주소]  [수정/삭제]  [답글작성]
  17. kundra@2022.09.02 13:13 ~$ 감사히 잘 쓸게요 [댓글주소]  [수정/삭제]  [답글작성]
  18. 빵끗맨@2022.09.07 11:47 ~$ 잘쓰겠습니다. [댓글주소]  [수정/삭제]  [답글작성]
  19. hathy@2022.09.19 11:48 ~$ 스킨 너무 맘에 드네요 감사해요!! 잘 쓸게요!! [댓글주소]  [수정/삭제]  [답글작성]
  20. 젤이@2022.09.21 02:22 ~$ 스킨 너무 예뻐요! 감사합니다~ [댓글주소]  [수정/삭제]  [답글작성]