개발자를 위한 티스토리 무료 반응형 스킨, 리눅스킨 LinuXkin v4.4.0

Hello LinuXkin 

안녕하세요. bskyvision.com입니다. 제가 만든 "개발자를 위한 티스토리 반응형 스킨, 리눅스킨"을 기술블로그를 만들어가기 원하시는 분들께 소개해드립니다. 저도 요즘 많이 체감하는 바지만, 개발자에게 기술블로그는 필수 포트폴리오가 되어버렸습니다. 개인적으로 이직 할 때 큰 도움이 되었습니다. 

 

리눅스 운영체제

코딩을 취미로든, 전공으로든, 직업으로든 하다보면 언젠가는 리눅스 운영체제를 접하게 됩니다. 서버라는 용어 많이 들어보셨죠? 우리가 앱을 사용하든, 어떠한 웹 사이트를 사용하든 그 뒤에는 우리에게 데이터를 제공해주는 서버라는 것이 있습니다. 그러한 서버들은 사시사철, 24시간 내내 켜져 있어야 합니다. 우리가 새벽 4시에도 카톡을 사용할 수 있는 이유는 서버가 켜져있기 때문입니다. 리눅스는 서버용 컴퓨터로 사용하기에 적합하게 설계가 되어 있기 때문에, 어떠한 서비스를 만들어내는 개발자들 입장에서는 사용하지 않을 수가 없는 운영체제라고 생각하시면 됩니다. 리눅스는 윈도우에 비해 분명 처음에는 사용하기 어렵지만, CLI 환경에서 명령어로 업무를 수행하기 때문에 훨씬 남들이 보기에 멋있어 보인다는 아주 큰 장점이 있습니다. ㅋㅋ

 

리눅스 + 스킨 = 리눅스킨

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

 

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

Linux x skin = LinuXkin

 

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

 

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

 

리눅스킨 개발 방식

처음에는 주먹구구식으로 리눅스킨을 개발했습니다. 그런데 점점 리눅스킨을 사용하시는 분들이 많아져서 조금의 책임감을 갖게 되었습니다. 스킨의 품질 보장을 위해 다음과 같은 산출물들을 관리해가며 개발하고 있습니다. 

 

1. 스킨 깃허브 소스코드

 

2. 개발표준정의서

 

3. 업무구분, 업무코드 설계서

 

4. UIUX 기획서(피그마)

 

 

5. 통합테스트 시나리오

 

 

6. 체인지로그

 

7. 운영 이행시나리오

 

8. bskyvision.com 리눅스킨 소개글 (지금 여러분이 보고 계시는 이 글)

 

9. 이용자 제작 스킨 페이지 리눅소개글

 

많은 문서들을 계속해서 버전에 맞춰 갱신하고, 테스트 케이스를 하나씩 실행하려면 시간이 많이 들긴 하지만 좋은 품질의 스킨을 제공하기 위해 이러한 과정을 거치고 있습니다.

 

리눅스킨 이모저모

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

 

1. 전체

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

 

 

2. 글 목록

 

 

3. 댓글/방명록

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

 

 

4. 태그 목록

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

 

 

5. 블로그 소개 사이드바

깃허브의 소개 화면의 디자인을 본땄습니다. 또한 기술 블로그라는 마크를 이모지를 활용해서 넣어줬습니다.

 

 

6. 검색창

블로그 내 검색 기능을 페이지 하단에 만들어놓았습니다. 리눅스 터미널에서 명령을 입력하는 느낌이 들도록 디자인했습니다.

 

 

7. 카테고리

폰트어썸에서 제공하는 폴더 느낌의 아이콘들을 활용하여 카테고리를 디자인했습니다.

 

 

리눅스킨 설치 방법

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

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

 

github.com/kyohoonsim/linuxkin

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

 

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

 

 

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

 

 

 

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

 

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

 

 

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

 

 

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

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

 

 

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

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

 

 

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

 

 

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

 

 

8. 스킨 홈 설정, 기본 설정을 다음과 같이 해주시는 것을 권장드립니다.

홈 화면 글 수: 10개

목록 구성 요소: 목록만

 

글 목록 글수: 10개

목록 구성 요소: 목록만

 

 

리눅스킨 사용시 주의사항

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

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

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

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

3. 카피라이트에서 "Designed by bskyvision"은 수정하시면 안됩니다. 

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

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

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

 

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

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

 

체인지로그

v4.4.0

- 개발표준정의서 신규 작성
- 업무구분, 업무코드 설계서 신규 작성
- 운영 이행시나리오 신규 작성
- 통합테스트 시나리오 신규 작성
- UIUX 기획서 피그마 신규 작성
- 개발표준정의서에 따라 전체 코드 수정
- 버그 수정
    1. 라이트모드에서 댓글 작성 후 제출했을 때 댓글의 색상이 다크모드의 색상으로 노출되던 버그 수정
- 개선
    1. 전구 아이콘을 라이트모드/다크모드에 따라 변화하게 하기 위해서 기존 html() 메서드 대신 attr() 메서드로 속성 컨트롤
    2. js_Load() 등 불필요한 코드 삭제
    3. 포스트 내 링크가 생성하는 카드 배경색 흰색으로 고정
    4. 포스트 내 블로그 소개 카드 안보이게 설정

 

마무리 인사

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

 

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