티스토리 스킨 개발 편의를 제공하는 torytis 의 dev server 에 핫리로드 기능이 업데이트 되어 이를 소개 드리기 위해 이렇게 글을 작성하게 되었습니다. 업데이트 전torytis 를 사용해 만든 개발 결과물을 확인해보려면 아래 명령어를 실행해야 합니다.npm run dev 만약 소스코드 내용에 변경이 생겼을 경우 dev server 를 종료하고 다시 위 명령어를 입력해야 했습니다. 수정이 빈번하게 일어나고 결과를 매번 확인해야 하는 상황에선 이 과정이 불편하게 느껴질 수 있던 부분 이었습니다. 업데이트 후torytis 최신 버전에서는 이러한 부분을 개선하였습니다. npm run dev 를 이용해 dev server 를 실행하면 이제는 소스코드 내용에 변경이 생겼다면 자동으로 빌드가 다시 진행되..

torytis 프레임워크를 개발한지 약 1년이 지나서야 torytis 가이드 문서 웹사이트를 배포하게 되었네요. 기존 torytis 레포지토리의 README.md 에 작성했던 내용들의 대부분은 가이드 문서 웹 사이트로 옮겼고, 가이드 문서 웹 사이트는 github pages 로 배포한 상태입니다. 아래는 torytis 가이드 문서 주소 입니다. https://wisdomstar94.github.io/torytis torytis - hometorytis torytis 는 티스토리 스킨 개발의 편의성을 높여주는 rust 로 만들어진 프레임워크 입니다.wisdomstar94.github.io torytis 를 사용함에 있어서 궁금하신 분들이 있으시다면 본 글의 댓글이나 torytis 레포지토리의 issues ..

Tistory Cyworld Minihompi UI Skin 개발예전 싸이월드 미니홈피의 UI 를 비슷하게 구현해본 스킨입니다. 이번이 3번째 스킨 개발이네요. 싸이월드 미니홈피를 스킨 개발 대상으로 고른 이유는?다들 예전에 싸이월드 미니홈피를 많이 이용하셨을 거라 생각됩니다. 하지만 예전에 기억하고 있던 그 미니홈피의 모습으로는 이제 운영되지 않는 걸로 알고 있어서, 예전 미니홈피의 모습대로 유사하게 티스토리 블로그 스킨을 만들면 이것 역시 재밌을 것 같아 스킨 개발을 진행해보게 되었습니다. 스킨 특징자체 개발한 [@wisdomstar94/torytis](https://github.com/wisdomstar94/torytis) 프레임워크를 사용하여 개발되었습니다.개발시 scss 와 [TailwindCS..

Tistory Discord UI Skin 개발Discord 느낌을 최대한 살리면서 개발한 티스토리 스킨입니다. Stroke 스킨에 이어 이번이 두번째로 만든 티스토리 스킨이네요. 왜 스킨 개발 대상으로 디스코드를 골랐나?제가 예전에 세븐나이츠 라는 모바일 게임을 엄청 즐겨 했었는데, 아쉽게도 최근에 서비스 종료를 하게되었습니다. 그런데 세븐나이츠가 세븐나이츠:리버스 라는 이름으로 리메이크 되고 있다는 소식을 접했고 해당 커뮤니티가 디스코드로 운영되고 있었습니다. 디스코드 UI 를 보고 나니 이걸 티스토리 스킨으로 만들면 재밌을 것 같단 생각에 스킨 개발을 시작하게 되었습니다. 스킨 특징이전에 공개했던 Stroke 스킨의 특징과 크게 유사합니다. 한가지 차이점이라고 한다면 Stroke 는 현재 화면 사이..

최근에 제가 만든 티스토리 "Stroke" 스킨이 2023년 8월에 v0 으로 처음 공개되었고, 2023년 10월에 v1 이 릴리즈 되었습니다. 이번 글에서는 Stroke 스킨을 만들면서 겪었던 과정들을 소개해드리고자 합니다. 티스토리 스킨을 만들어보고 싶다! 티스토리 블로그를 운영하면서 계속 아쉬웠던 부분이 스킨이었습니다. 이용자 제작 스킨 페이지에서 다른 분들이 만들어주신 스킨들을 쭉 탐색해 보았지만 제 마음에 쏙 드는 스킨이 없었습니다. 그래서 이참에 제가 직접 티스토리 스킨을 만들어보고 싶었습니다. 티스토리 스킨 치환자 동작 방식에 대한 적응 검색을 해보니 티스토리에서 스킨 개발 시 필요한 가이드 문서를 제공해주고 있었습니다. 티스토리 스킨은 치환자를 이용하여 제작하게 되는데, 처음에는 이 치환..

torytis 란?torytis 는 티스토리 블로그 스킨을 개발할 때 여러가지 기능을 제공해주는 프레임워크 입니다. 처음에는 Next.js 만을 사용해서 티스토리 스킨을 위한 파일들을 빌드하는 것을 시도해보았으나 여러가지 이슈로 인해 직접 티스토리 스킨 개발용 프레임워크를 개발하게 되었습니다. Next.js 를 이용해 티스토리 스킨 개발을 시도 했을 때 여러가지 문제점next.js 동작을 위한 여러개의 script 파일 필요next.js 로 개발한 내용들을 static 으로 빌드하게 되면 next.js 동작에 필요한 여러가지 script 파일 들이 생성됩니다. 티스토리 스킨은 어차피 하나의 html 파일을 모든 페이지에서 동일하게 사용하기 때문에 굳이 script 가 분리 될 필요는 없었습니다. 그래서 ..

stroke v1 출시지난번에 공개했던 Stroke 스킨의 v1 을 출시하였습니다.v0 에서 v1 으로 업그레이드 될 때 아래와 같은 점들이 변경 및 개선되었습니다.torytis 라는 자체 개발 툴을 사용하여 티스토리 스킨 개발을 위한 프로젝트에 모듈화를 적용하여 유지보수가 더 수월해졌습니다. (해당 툴도 별도로 소개하는 글을 작성할 예정입니다.)스타일에 Tailwindcss 를 적용하였습니다.html 을 작성하는 데에 React 를 사용하였습니다.다크모드 기능을 추가하였습니다. 스킨 다운로드 및 적용 방법1. 스킨 파일 다운로드아래 github 링크에 접속하신 후, Assets 부분에 있는 stroke_v{버전명}.zip 파일을 다운로드 받으세요.https://github.com/wisdomstar94..