티스토리 블로그 활동 시각화: 깃허브 잔디 위젯 직접 만들기 및 적용 가이드

핵심 기술: 티스토리 블로그의 게시물 활동을 깃허브 잔디처럼 시각화하는 위젯 개발 과정을 상세히 안내하며, 이를 위해 RSS 피드와 프록시 서버를 활용하는 방법을 제시합니다.

기술적 세부사항:
* 개발 배경: 2021년 티스토리 API 인증 문제로 실패했던 경험을 극복하고, RSS를 통해 데이터를 수집하는 방식으로 아이디어를 실현했습니다.
* 기획: 블로그 글 작성자들에게 동기 부여를 제공하기 위해 게시물 수를 시각화하는 위젯을 개발하는 것을 목표로 합니다.
* 개발 방식:
* 티스토리 RSS 피드 자동 수집
* RSS 데이터 처리를 위한 프록시 서버 개발 (Node.js)
* 날짜별 게시물 수 API 개발 (JSON 형식)
* GitHub 잔디와 유사한 위젯 시각화
* CDN을 통한 JavaScript 라이브러리 배포
* CORS 문제 해결: 브라우저 보안 정책(CORS) 제약으로 직접 RSS에 접근할 수 없어 프록시 서버를 통해 우회하는 방식을 사용했습니다.
* 위젯 구성: 3개월용(250x250px)과 1년용(1000x250px) 두 가지 사이즈를 제공합니다.
* 테스트 페이지: blog-graden.vercel.app을 통해 프록시 서버 상태 확인, RSS 분석, 위젯 미리보기 기능을 제공합니다.
* 적용 방법:
* HTML 배너 출력 모듈을 통한 사이드바 적용 (간편)
* 스킨 편집 > HTML 코드 삽입 (커스터마이징 용이)
* 커스터마이징: JavaScript 버전을 통해 위젯 타이틀, 범례 표시 여부, 색상 등을 사용자 정의할 수 있습니다.
* 잔디 시각화: 깃허브 기여 그래프와 유사하게, 최대 일일 게시물 수를 기준으로 활동 빈도를 5단계 색상으로 구분합니다.
* 업데이트 주기: 24시간마다 자동 업데이트됩니다.

개발 임팩트:
* 개인의 블로그 활동에 대한 시각적 피드백을 제공하여 꾸준한 글 작성 동기를 부여합니다.
* RSS와 프록시 서버를 활용한 데이터 수집 및 시각화 기술을 습득할 수 있습니다.
* 블로그의 사용자 경험을 개선하고 맞춤형 기능을 추가할 수 있습니다.

커뮤니티 반응: (언급 없음)