티스토리 블로그 게시글 수 위젯 개발! + 잔디/포도 스타일 블로그 적용 방법

티스토리 블로그에서도 깃허브의 잔디처럼 블로그 활동을 기록할수 있는 위젯을 만들어서 배포했다!

이번 글에서는 개발 과정에 대한 내용과 실제로 이 위젯을 티스토리 블로그에 적용하기 위한 방법을 안내하는 글을 작성할 예정이다!! 

 

요즘 들어 문서작성의 중요성을 깨닫는다.

개발하고 만드는데에서 끝나는게 아니라 이렇게 개발배경부터 과정을 글로 남기고,

또 다른 사람들이 사용할수 있도록 사용방법을 안내하는 것까지 개발의 한 과정이지 않을까 싶다. 

 

---

 

개발 배경 

사실 이 위젯을 만들어보고 싶단 생각은 무려 2021년도에 시작했다..

한창 블로그 글을 자주 업로드했는데 그걸 눈으로 시각화해서 보여주고 싶었다.

그래서 당시 개발을 진행하기도 했다. 하지만 실패했다. 

 

아무것도 몰랐던 저 당시엔 티스토리 API를 통해서 데이터를 가지고 오려고 했다.

그러다 인증문제에 부딪히면서 결국 최종적으로 구현하지 못했다.

지금보니 방법이 잘못됐다. 이제는 cursor 덕분에 데이터는 rss로 긁어올수 있다는걸 알았다!

 

https://pearlluck.tistory.com/339

티스토리 포스트 캘린더1 | 블로그에 깃허브 잔디가 있었으면 좋겠어!!!

https://pearlluck.tistory.com/349

티스토리 포스트 캘린더3 | 카카오 로그인하면 티스토리API 못쓴다?@!

 

그렇게 시간이 같은 아이디어를 가지고 Cursor를 통해 뚝딱 개발할수 있게 되었다.

심지어 배포까지 진행해서 실제로 내 블로그에 위젯으로 삽입해서 사용까지 할수 있었다!! (뿌듯)
21년도에는 그렇게 뻘짓을 하고 헤매기만 했는데..

이제는 몇일만에 완성할수 있다니 뭔가 기술의 발전?나의 성장?을 체감할수 있었다.

 

기획 

1. 누구에게? 나를 포함해 블로그 글 작성하는 모든 사람들에게

2. 어떤 문제를? 블로그 글을 꾸준히 쓰며 동기부여가 필요한 상황을 

3. 어떻게 풀것인가? 깃허브 잔디처럼 게시글 수를 시각화해서 블로그 위젯으로 제공해준다.

4. 왜 풀고 싶은가? 블로그 글쓰기도 잔디 심기하면 뿌듯하잖아요^_^

 

개발 방식 

1. 티스토리 게시물 정보를 자동으로 수집하는 rss 피드 확인

2. rss피드로 블로그 정보 가지고 온 프록시 서버 개발

3. 날짜별 게시물수 API 개발 (JSON 형식 응답)

4. 해당 API의 결과로 깃허브와 같은 잔디위젯 시각화 -> node.js 배포

5. 스트립트 로드 및 실행

 

그래서 rss를 제공해주는 블로그 URL만 있으면,

블로그에 이 위젯을 직접 넣어서 게시글 수를 잔디형식으로 시각화해서 사용 할 수 있다.

 

블로그 잔디 위젯은 3개월과 1년용이 있다. 

현재시점으로부터 시각화 할 데이터를 기준으로

3개월용은 총 84개(7일x12주) 잔디를 심을수 있는 250px(가로) X 250px(세로) 사이즈고,

1년용은 총 364개(7일x52주) 잔디를 심을수 있는 1000px(가로) X 250px (세로)사이즈이다.

 

3개월용은 블로그 사이드바에 적용하기 적합하고, 1년용은 블로그 Html 편집에서 직접 적용하면 될 것 같다. 

 

왜 프록시 서버를 개발했는가?

티스토리 게시물 정보를 긁어서 가지고 오는 RSS는 원래 브라우저 전용이 아니다. 

무분별한 웹사이트에서 RSS에 대한 접근을 방지하도록 브라우저 보안정책인 'CORS 제약'이 있다.

결국 브라우저-> RSS 서버에 직접 요청할수가 없고,

브라우저 -> 프록시 서버 -> RSS 서버를 통해  프록시 서버 한번 거쳐서 RSS 데이터 요청을 해야한다.

 

사용 방법 - 테스트 페이지 가이드

위 개발 방식에 따라 자신의 블로그 주소를 가지고 테스트해볼수 있는 페이지를 개발했다. 

https://blog-graden.vercel.app/

Blog Activity Widget 테스트 - 내 블로그에 위젯 적용하기

 

프록시 서버의 상태를 확인할 수 있고, 위젯을 미리보기로 보여주고 바로 스크립트를 복붙 할 수 있게 제공했다.

1. RSS 피드 URL 확인 

이렇게 블로그의 RSS 피드가 정상적인지 확인한다. 

예를 들어, 내 블로그 주소를 입력했을땐  https://pearlluck.tistory.com/rss  결과를 확인한다. 

 

2. 프록시 서버 상태 및 요청 확인 

프록시 서버 상태는 https://blog-graden.vercel.app/health  응답결과이고, 

프록시 서버 요청 결과는 https://blog-graden.vercel.app/proxy/rss?url=[RSS피드URL]  응답결과이다. 

3. RSS 분석 결과 확인 

날짜별 게시물수를 확인하는 API는 https://blog-graden.vercel.app/analyze/rss?url=[RSS피드URL] 응답결과로 

아래처럼 { "날짜" : 게시물수 } 같은 JSON형식으로 확인할수 있다. 참고로, IP당 15분에 100개 요청으로 제한되어 있다. 

 

예를 들어, 내 블로그 주소의 날짜별 게시물수는 이렇게 요청해서 확인한다.

https://blog-graden.vercel.app/analyze/rss?url=https://pearlluck.tistory.com/rss 

 

4. 위젯 스트립트 로드 상태 확인 

이제 배포한 node.js를 스크립트로 사용할수 있을지 확인한다. 

CDN으로 배포해서 최근 버전으로 사용할 수 있는 javascript URL을 이렇게 확인할수 있다.

 

3개월 CDN URL: https://unpkg.com/blog-garden-widget@latest/blog-garden-widget.js
1년 CDN URL: https://unpkg.com/blog-garden-widget@latest/blog-garden-widget-1y.js

 

그래서 위젯으로 사용하려면 아래와 같은 script를 삽입해야 한다. 

여담이지만 처음엔 잔디 스타일만 생각해서 이름을 blog-garden-widget이라고 지정했다...

이상태로 2.0 버전으로 업그레이드를 하면서 배포했는데, 스타일 커스텀까지 개발하다보 blog-activity-widget이라고 지을껄 그랬다.

 

5. 위젯 미리보기 

2가지 방법으로 위젯을 본인의 블로그에 적용할 수 있다.  

html 버전이랑 javascripts 버전으로, 

기본적으로 html용으로 적용하길 권장하고.

커스텀하게 사용하고 싶다면 javascript를 사용하면 될 것 같다. 

 

html 기반으로 적용하는 방식1은, 

HTML 배너로 사용해서 사이드바에서 간편하게 적용할수 있다. 

티스토리 블로그를 기준으로 사이드바 > HTML 배너출력 모듈에 코드를 복사해서 추가하면 된다. 

그리고 원하는 사이드바에 적용한다.  나는 카테고리 위에 배치하도록 적용했다. 

 

물론 단순히 티스토리 > 스킨편집> HTML 코드에서 적용할수도 있다. 

대신 1년 위젯은 가로 폭이 1000px이나 되서 배치하기 애매한데, 예를 들어 이렇게 아예 최상단에 배치할수도 있다.

 

javascripts 기반으로 적용하는 방식2는 티스토리 > 스킨편집> HTML 코드에서 적용해야한다.

 

6. 커스텀 위젯 미리보기 

javascripts 기반으로 적용하는 방식2을 통해서 

위젯 타이틀을 수정하거나, 

오른쪽 상단에 범례 속성(showLegend)을 표시하지 않거나,

다른 스타일로 적용하는 색도 커스텀하게 수정할수 있다!

 

 

예를 들어 3개월 위젯 형식을 포도 스타일로 사이드바에 적용하고 싶다면,

티스토리 > 스킨편집> HTML 코드에서 <aside id ="aside" class="sidebar"> 아래에 적용한다.

제약사항 

 

기본적으로 깃허브의 GitHub contribution graph 컬러맵을 그대로 가지고 오면서 5가지 단계에 따라 색이 구분이 된다.

단 절대적인 게시물 수가 아니라 전체 기간중 하루 최대 게시물수에 따라 비율로 활동기록을 구분한다. 

예를 들어, 하루에 업로드한 최대 게시물수가 8개라면,

게시물수가 1-2개면 ~25%, 3-4개이면 ~50%,5-6개이면 ~75%, 7개 이상이면 ~100%에 따라 활동빈도가 구분이 된다. 

 

게시물수가 업데이트 되는 주기는 24시간이다. 

실시간 업데이트가 불가능하며, RSS 업데이트 주기에 따라 24시간마다 자동 업데이트가 된다. 

 

RSS분석결과를 확인하는 API는 한 IP당 15분에 100개 요청으로 제한이 된다. 

너무 많은 요청을 할 경우, RSS 서버 요청을 자주해서 RSS기준으로 비정상적인 요청으로 인지될수 있을것 같다.

 

기본적으로 블로그 RSS에 완전히 의존적이기 때문에 RSS 서버가 다운되면 프록시 서버도 다운되서 위젯도 작동하지 않는다.

그리고 RSS 2.0 형식만 지원한다. 그래서 네이버 블로그 같은 경우, RSS 피드를 확인할수가 없다.

 

최종적으로 3개월 위젯을 사이드바에 적용해서 사용하고 있다. 스타일은 기분에 따라 바꾸는 중!