Tistory Discord UI Skin 개발

 

Tistory Discord UI Skin 개발

Discord 느낌을 최대한 살리면서 개발한 티스토리 스킨입니다. Stroke 스킨에 이어 이번이 두번째로 만든 티스토리 스킨이네요.

 

왜 스킨 개발 대상으로 디스코드를 골랐나?

제가 예전에 세븐나이츠 라는 모바일 게임을 엄청 즐겨 했었는데, 아쉽게도 최근에 서비스 종료를 하게되었습니다. 그런데 세븐나이츠가 세븐나이츠:리버스 라는 이름으로 리메이크 되고 있다는 소식을 접했고 해당 커뮤니티가 디스코드로 운영되고 있었습니다. 디스코드 UI 를 보고 나니 이걸 티스토리 스킨으로 만들면 재밌을 것 같단 생각에 스킨 개발을 시작하게 되었습니다.

 

스킨 특징

이전에 공개했던 Stroke 스킨의 특징과 크게 유사합니다. 한가지 차이점이라고 한다면 Stroke 는 현재 화면 사이즈가 작은 모바일 UI 에선 목차 기능이 제공되지 않지만, 본 Tistory Discord UI Skin 에선 모바일 UI 에서도 목차 기능을 제공한다는 점입니다.

1. 자체 개발한 @wisdomstar94/torytis 프레임워크를 사용하여 개발되었습니다.
2. 개발시 scss 와 TailwindCSS 가 사용되었습니다.
3. 개발시 React 가 사용되었습니다.
4. 개발시 Typescript 가 사용되었습니다.
5. Discord 의 UI 를 최대한 비슷하게 구현해보았습니다.
6. 글 목차 기능이 지원됩니다.
7. 디바이스 너비에 따른 반응형 처리를 지원합니다.
8. 스킨의 최신버전을 자동으로 체크합니다.

 

스킨 사용 방법

스킨 파일 다운로드

아래 github 링크에 접속하신 후, Assets 부분에 있는 tistory_discord_ui_skin_v{버전명}.zip 파일을 다운로드 받으세요.

https://github.com/wisdomstar94/tistory-discord-ui-skin/releases/latest

 

압축해제

다운로드 받은 zip 파일을 압축해제하면 다음과 같이 파일들이 나옵니다.

 

블로그 설정 -> 스킨 변경 -> 스킨 등록

위 경로로 따라 이동한 후 아까 압축해제 해서 나왔던 파일들을 추가 후 저장 버튼을 누른 후 스킨 이름을 입력하여 스킨을 등록합니다.

 

등록한 스킨을 적용 하기

스킨 변경 -> 스킨 보관함 으로 이동 후 아까 등록했던 스킨에 마우스를 올리고 적용 버튼을 클릭합니다.

 

스킨 적용 사진

 

최신 버전 자동 체크

위 사진과 같이 최신 버전이 github 에 등록 되었을 경우 모달창이 표시됩니다. (위 모달창은 블로그 관리자 계정으로 접속했을 경우에만 표시되며 방문자에겐 표시되지 않습니다.)

 

Github 레포지토리 공개

Tistory Discord UI Skin 스킨의 개발 소스는 https://github.com/wisdomstar94/tistory-discord-ui-skin 레포지토리로 공개되어 있습니다. 본 스킨에 대한 여러 건의, 문의, 버그제보, 개선사항요청 등에 대한 여러 의견들은 본 게시글의 댓글이나 위 레포지토리의 issue 탭에 남겨주시면 시간 나는대로 확인해보도록 하겠습니다!