내가 개발한 티스토리 프로젝트 정리!

이 포스팅은 여지껏 내가 개발한 티스토리 프로젝트를 정리하기 위한 것이다. 회사를 2017년 가을에 그만두고 무려 3년간 백수생활을 해오면서 만든 것이 아래에 있는 프로젝트다. 만드는데만 3년이 걸린 것은 아니고 새로운 언어도 참 여러가지 배웠고 여러모로 방황했던 시기라서 시간이 많이 흘렀다. 포트폴리오 용도로 만든것도 있지만 내 기술 레벨을 한층 상승시키기 위한 이유가 사실 제일 컸다.

 

3년이라는 백수기간은 다른 이들이 들으면 너무나도 긴 시간이다. 취준생 기간 1년도 길다고 하는 마당에 3년은, 아휴. 그 기나긴 시간 동안 무얼했는지를 증명하지 못하면 도태되기 마련이다. 아래의 프로젝트들은 내가 한 것들 중에 티스토리와 관련된 프로젝트다. 이는 언젠가 이 블로그에 나를 소개하는 포스팅이 쓰일때 링크에 걸릴 것이다.

티도리 프레임워크

티도리 프레임워크는 내가 직접 만든 웹 프론트엔드 프레임워크다. 여타 웹 프레임워크랑은 다르게 각종 모듈을 포함하거나 한다기보다는 프로젝트 구성과 티스토리 스킨을 개발하기 위한 최적의 환경을 만들어보기 위해 작성된 것이다. 티스토리 스킨의 개발에 초점을 두고 있기 때문에 스킨 편집에 들어가지 않더라도 스킨을 미리본다거나, 티스토리에 스킨을 배포한다거나 빌드할 수 있도록 구성했다.

 

https://github.com/tidory

Tidory

tidory/tidory

tidory/tidory 는 티도리 프레임워크의 프로젝트 템플릿이다. 티도리 프레임워크를 사용하려면 반드시 해당 레포지토리를 다운받고 프레임워크의 지시에 따라 움직여야 한다. 그것이 티도리가 라이브러리가 아닌 프레임워크인 이유다. 티도리 프레임워크의 마크업은 HTML 이 아닌 확장 언어인 pug 를 쓴다.

 

https://github.com/tidory/tidory

tidory/tidory

tidory/cli

tidory/cli 는 tidory/tidory 와 함께 작동할 수 있도록 구성된 CLI 환경에서 동작하는 프로그램으로 node.js 의 도움을 받아 동작하며, 각각의 명령어에 따라 개발 서버를 켜고, 프리뷰를 하고, 빌드를 진행하여 스킨 저장소에 저장하는 명령어를 실행할 수 있다.

 

해당 프로젝트의 기반은 아래에서 소개할 Tistory Skin API (Unofficial)이며, 여기서 웹팩을 적극적으로 사용한다. 웹팩과 같은 번들러가 없으면 티도리 프레임워크는 성립될 수 없다.

 

https://github.com/tidory/cli

tidory/cli

tidory/tidory.com

tidory/tidory.com 은 티도리 프레임워크를 소개하기 위한 페이지다. Vue.js/Nuxt.js 로 구성되었다. 얘도 티스토리 스킨으로 만들까 하다가 블로그가 아니기 때문에 그러지는 않았다. 티스토리를 블로그 용도로만 한정짓는 것은 닫힌 생각일 수도 있겠다는 생각을 잠깐이나마 해본다.

 

https://github.com/tidory/tidory.com

tidory/tidory.com

Tistory API

티스토리 API 는 기본적으로 티스토리에서 제공하는 Tistory Open API 를 일컫는다. 하지만 내가 굳이 제목에 Open 이라는 글자를 뺀 것은, 내가 임의로 티스토리를 분석하여 비공식적으로 빼낸 API 가 있기 때문이다. 이는 비공식적인 것이라 티스토리에 허가를 받은 것은 아니지만 해당 비공식 API 가 없으면 티도리 프레임워크의 핵심기능이 빠지기 때문에 티스토리 개발팀에서도 어느정도 묵인해주고 있는 것으로 보인다.

Open API

내가 작성해둔 Tistory Open API 를 쉽게 사용하기 위한 모듈은 자바스크립트와 PHP 버전이 있다. 아래의 모듈들은 Tistory Open API 를 보다 나은 접근성을 가지고 사용할 수 있도록 구성한다. NPM, Composer 를 사용하여 프로젝트에 포함시켜 사용할 수 있을 것이다. 이 둘을 개발할 때는 각자 사용처가 있어서 개발을 하였지만, 지금은 둘 다 개인적으로 사용하지 않기 때문에 패키지 레지스트리에 등록만 되어있다.

 

https://github.com/tistory-projects/tistory.js

GitHub - tistory-projects/tistory.js: 티스토리 오픈 API 래퍼

Skin, Storage API

비공식 티스토리 스킨 API 는 내가 직접 티도리 프레임워크를 위해 만든 스킨 전용 API. 티도리 프레임워크에서 만든 티스토리 스킨을 실제 블로그에 적용시키고, 프리뷰하고, 스킨 저장소에 저장하거나 저장소에 파일을 업로드하는 등 티스토리에서 공식적으로 제공하지 않는 기능을 프로그래머블하게 사용할 수 있다. 다만 비공식이기 때문에 티스토리 오픈 API 로 인증을 할 수 없고, 사용자의 실제 세션 값이 요구된다. 그래서 티도리 프레임워크에도 세션 값을 요구하는 것이다.

 

https://github.com/tidory/tistory-skin

GitHub - tidory/tistory-skin: 티스토리 스킨을 미리보기, 배포, 파일 삭제 등의 조작할 수 있는 비공식 A

티스토리 구독서비스

티네스는 현재 존재하는 티스토리 구독서비스 이전에 존재했던 서비스다. 적어도 구독서비스보다 내가 만든 서비스가 먼저 나왔다. 이는 PHP 라라벨 프레임워크를 써서 만든 것이다. 다소 짧게 2018/11 - 2019/01 간의 짧은 4개월간의 서비스를 끝으로 종료되었다.

 

왜냐하면 이웃서비스가 개발 된 직후 티스토리 구독서비스가 나타났기 때문이다. 개발, 기획, 설계, 구현, 배포까지 모두 나 혼자 진행했다. 사실 조금 더 먼저 해당 서비스를 만들었다면 상당히 멋진 서비스로 탄생했을 텐데 아쉽기만하다.

 

티스토리 이웃서비스 티네스(Tines) 개발 돌아보기

티스토리 이웃서비스 티네스(Tines) 개발 돌아보기

위젯

티네스에서는 또한 자신의 블로그에 구독 버튼과 이웃커넥터(네이버블로그 이웃커넥터와 비슷 한 것)를 iframe 형태로 넣을 수 있었다. 해당 컴포넌트는 Vue.js 컴포넌트로 구성되어 있으며 사용자에게 구독버튼과 이웃커넥터를 생성할 수 있는 UI 를 제공하여 커스터마이징하여 제공할 수 있도록 하였다.

Tistory Skin, hELLO

hELLO. 는 티스토리 스킨이며, 티스토리 백업과 함께 2020년에 개발한 따끈따근한 신작이다. 티스토리 스킨은 과거에도 제법 제작한 기록이 있긴 하지만, 이번 티스토리 스킨은 각잡고 만들었기 때문에 여기에 추가한다. 덕분에 그 성과도 똑똑히 내 눈으로 확인하였다. 깃허브 별이라는 형태로 말이다.

 

https://github.com/tistory-projects/tistory-skin-hELLO

GitHub - tistory-projects/tistory-skin-hELLO: ✨당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨

티스토리 백업

티스토리 백업은 티스토리 스킨의 포스트를 백업할 수 있도록 만든 응용 어플리케이션이다. electron-vue 로 구성되었으며 Windows 에서만 빌드 되었으나, 타 개발자의 도움으로 현재는 Mac OS 빌드도 제공하게 되었다. 어플리케이션 자체는 간단해서 크게 할 말은 없지만, 서버없이 오직 클라이언트에서 자바스크립트만으로 .zip 파일을 만들 수 있다는 것은 상당히 놀라웠다.

 

https://github.com/tistory-projects/tistory-backup

GitHub - tistory-projects/tistory-backup: 티스토리 블로그 백업 프로그램