포트폴리오

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

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

 

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

Tidory Framework

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

 

https://pronist.tistory.com/23

 

티스토리 스킨 제작 프레임워크, 티도리를 소개합니다.

티도리 프레임워크 티도리 프레임워크는 본인이 직접 개발한 프레임워크이며 오직 티스토리 스킨 제작만을 위해 구성되었습니다. 현재 사용 중인 스킨 또한 티도리로 개발되었습니다. 티스토��

pronist.tistory.com

https://github.com/tidory

 

Tidory Framework

a Web Framework for Tistory Skin. Tidory Framework has 5 repositories available. Follow their code on GitHub.

github.com

tidory/tidory

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

 

https://github.com/tidory/tidory

 

tidory/tidory

a Template for Tidory framework. Contribute to tidory/tidory development by creating an account on GitHub.

github.com

tidory/cli

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

 

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

 

https://github.com/tidory/cli

 

tidory/cli

a CLI for Tidory framework. Contribute to tidory/cli development by creating an account on GitHub.

github.com

그 외에 tidory/create-tidory-app  CRA(Create-React-App)처럼 해보기 위해 구성되었다. 물론, 레포지토리를 다운받는 일 이외에는 하지 않는다. 하지만 둘의 프로젝트를 구분한 것에는 이유가 있는데, 템플릿의 버전을 변경하는 등 기반 모듈이 아닌 템플릿을 변경하는 것만으로 tidory/cli 를 변경해야 하는 수고로움이 있기 때문이다. tidory/cli 를 버전업하는 것과 tidory/create-tidory-app 을 버전업하는 것의 무게는 너무나도 다르다.

 

https://github.com/tidory/create-tidory-app

 

tidory/create-tidory-app

Downloading Tidory Framework template from github. Contribute to tidory/create-tidory-app development by creating an account on GitHub.

github.com

tidory/tidory.com

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

 

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

 

tidory/tidory.com

a Website for Tidory framework. Contribute to tidory/tidory.com development by creating an account on GitHub.

github.com

Tistory API

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

Tistory Open API

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

 

https://github.com/pronist/tistory.js

 

pronist/tistory.js

Tistory API for Javascript, Support Node.js, and Browser - pronist/tistory.js

github.com

https://github.com/pronist/tistory.php

 

pronist/tistory.php

Tistory API for PHP. Contribute to pronist/tistory.php development by creating an account on GitHub.

github.com

Tistory Skin API (Unofficial)

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

 

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

 

pronist/tistory-skin

Tistory Skin API for Javascript -- Unofficial. Contribute to pronist/tistory-skin development by creating an account on GitHub.

github.com

티스토리 백업 (Tistory Backup)

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

 

https://pronist.tistory.com/52

 

티스토리 블로그 백업 프로그램을 만들었습니다.

티스토리 백업 티스토리 블로그의 백업 기능은 이전에 사라졌습니다. 그래서, 직접 만들어보기로 했습니다. 이는 티스토리 Open API 를 사용한 것입니다. 해당 프로그램은 아주 단순하며, 그저 티�

pronist.tistory.com

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

 

pronist/tistory-backup

a Desktop Application for posts backup of Tistroy blog - pronist/tistory-backup

github.com

티스토리 이웃 서비스, 티네스 (Tines)

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

 

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

 

https://github.com/pronist/tines.kr

 

pronist/tines.kr

Tistory Neighborhood Services, Tines (Now, Not running) - pronist/tines.kr

github.com

Tines Widgets

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

 

https://github.com/pronist/tines.kr/tree/master/resources/js/widget

 

pronist/tines.kr

Tistory Neighborhood Services, Tines (Now, Not running) - pronist/tines.kr

github.com

Tines API

티네스는 API 서비스도 제공하여 자신의 구독자를 조회하거나 로그인, 로그아웃 할 수 있었다. 티스토리 API 와 연계하여 티네스 - 티스토리로 로그인을 진행할 수도 있었다. API 를 사용하면 자신만의 구독버튼이나 이웃커넥터를 제작하는 것도 가능했다.

 

https://github.com/pronist/tines.kr/wiki

 

pronist/tines.kr

Tistory Neighborhood Services, Tines (Now, Not running) - pronist/tines.kr

github.com

hELLO. ― Tistory Skin

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

 

https://pronist.tistory.com/5

 

hELLO. 티스토리 스킨을 소개합니다.

hELLO. hELLO 스킨은 본래 기능의 많이 없었다가, 최근 반응이 나쁘지 않아서 여러 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기능과

pronist.tistory.com

https://github.com/pronist/hELLO

 

pronist/hELLO

hELLO is a Tistory Skin. Contribute to pronist/hELLO development by creating an account on GitHub.

github.com