Tistory Cyworld Minihompi UI Skin 개발

 

Tistory Cyworld Minihompi UI Skin 개발

예전 싸이월드 미니홈피의 UI 를 비슷하게 구현해본 스킨입니다. 이번이 3번째 스킨 개발이네요.

 

싸이월드 미니홈피를 스킨 개발 대상으로 고른 이유는?

다들 예전에 싸이월드 미니홈피를 많이 이용하셨을 거라 생각됩니다. 하지만 예전에 기억하고 있던 그 미니홈피의 모습으로는 이제 운영되지 않는 걸로 알고 있어서, 예전 미니홈피의 모습대로 유사하게 티스토리 블로그 스킨을 만들면 이것 역시 재밌을 것 같아 스킨 개발을 진행해보게 되었습니다.

 

스킨 특징

1. 자체 개발한 [@wisdomstar94/torytis](https://github.com/wisdomstar94/torytis) 프레임워크를 사용하여 개발되었습니다.
2. 개발시 scss 와 [TailwindCSS](https://tailwindcss.com/) 가 사용되었습니다.
3. 개발시 [React](https://react.dev/) 가 사용되었습니다.
4. 개발시 [Typescript](https://www.typescriptlang.org/) 가 사용되었습니다.
5. 예전 싸이월드의 미니홈피 UI 를 최대한 비슷하게 구현해보았습니다.
6. 스킨의 최신버전을 자동으로 체크합니다.

 

본 스킨은 가볍고 빠르게 라이트하게 만들어본 스킨이라 아쉽게도 다른 스킨들과 달리 반응형 및 목차 기능은 현재 제공되지 않고 있습니다. 만약 본 스킨을 본인의 블로그에 사용하고자 하고 반응형 및 목차 기능을 원하시는 분들이 있으시다면 본 스킨의 레포지토리의 issues 탭에 이슈를 올려주시면 그 때 개발을 고민해보도록 하겠습니다.

 

스킨 사용 방법

스킨 파일 다운로드

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

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

압축해제

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

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

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

등록한 스킨을 적용 하기

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

 

 

스킨 적용 사진

 

 

 

 

Github 레포지토리 공개

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