개발자를 위한 티스토리 반응형 스킨, 리눅스킨 LinuXkin (2021-5-2)

반응형

안녕하세요 :D 개발자를 위한 티스토리 반응형 스킨, 리눅스킨을 소개합니다.  

 

 

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

 

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

 

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

Linux x skin = LinuXkin

 

리눅스킨이 적용된 광고 없는 사이트의 모습이 궁금하시다면, 아래 블로그를 참고해주세요. 

 

kyohoonsim1.tistory.com/

리눅스킨

 

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

 

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

 

리눅스킨 설치 방법

리눅스킨이 마음에 드신 분들은 다음과 같은 절차로 설치하시면 됩니다. 

 

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

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

 

github.com/kyohoonsim/linuxkin

kyohoonsim/linuxkin

 

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

 

 

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

 

 

 

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

 

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

 

 

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

 

 

4. 다운로드 받은 파일들을 업로드해주세요. README.md 파일은 업로드하실 필요 없습니다. 아래 그림처럼 되었다면, [저장]을 클릭하시면 됩니다.

 

 

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

 

 

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

 

 

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

 

 

 

리눅스킨 사용시 주의사항

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

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

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

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

3. Designed by bskyvision 부분은 수정하시면 안됩니다. 

 

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

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를 회색으로 변경해서 글 제목과 구분되게 했습니다. 
• 페이징 부분을 좀 더 레트로하게 변경했습니다.
• 2021-5-1) 댓글 및 방명록 입력 버튼, 페이징 버튼에 커서를 올리면 커서의 모양이 손가락 모양으로 변경되게 했습니다.
• 2021-5-1) 비공개글, 보호글에는 글 제목 옆에 아이콘이 나오게 해서 관리자로 하여금 쉽게 구분되게 했습니다.
• 2021-5-2) 화면 크기 조절시 사이드바에 본문 영역이 가려지는 오류를 해결했습니다. 

 

마무리 인사

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

 

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

 

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

1. 문베디드님 ★

2. 뚜뚜월드님

3. 부요리장상디님

 

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

 

 

(이 글은 2021-5-2에 마지막으로 수정되었습니다.)

 

반응형

저작자표시비영리변경금지

'블로그 > 티스토리 스킨 배포' 카테고리의 다른 글

개발자를 위한 티스토리 반응형 스킨, 리눅스킨 LinuXkin (2021-5-2)  (55)	2021.05.02
블루스킨(Blue skin v1.3)을 소개합니다  (19)	2021.03.06
개발자를 위한 티스토리 반응형 스킨, 리눅스킨 v3.0 배포합니다!  (2)	2021.01.02
개발자를 위한 티스토리 반응형 스킨, 리눅스킨 v2.0 배포합니다  (6)	2020.12.29
개발자를 위한 티스토리 스킨, 리눅스킨 v1.1 (2020-11-20) 배포합니다  (11)	2020.11.20