바쁘신 분들은 blog-readme-stats에서 사용해보세요. :)
왜 만들게 되었나?
처음에 나는 `velog`를 통해 포스팅을 했었다.
그래서 GitHub README를 꾸밀 때 velog-readme-stats를 사용해 최신 글 카드를 보여주고 있었다.
그러다가 블로그 유목민 생활을 하게 됐고, 극적(?)으로 `티스토리`에 정착하게 됐다.
이제는 티스토리에 포스팅한 글을 GitHub README에서 보여주고 싶은 마음이 들었다.
하지만 내가 찾아봤을 때는 이런 서비스가 없었다..
"없으면 내가 직접 만들어보자!"라는 생각으로 프로젝트를 시작하게 됐다.ㅎㅎ
사전조사
velog-readme-stats 분석
먼저 방향을 잡기 위해 `velog-readme-stats` 프로젝트를 분석해봤다.
일단 구조는 간단했는데, 백엔드 서비스에서 velog의 API를 호출해 블로그 정보를 가져오고, 그 결과를 SVG로 렌더링해 응답으로 내려주는 방식이었다.
그래서 나도 비슷하게 “API를 만들고 SVG 카드를 응답으로 주는 방식”으로 구현하기로 했다.
난관: 티스토리 Open API 종료
티스토리에도 Open API가 있는지 찾아봤고, 지원 종료됐다는 걸 알게 됐다..
흠 이를 어쩌지..🤔
RSS를 시각화하자
문득 티스토리에 글을 쓰는 다른 분들은 README에 어떻게 소개하고 있는지가 궁금했다.
여러명의 README를 보게 되었고, 대부분 GitHub Actions에서 RSS 피드를 읽어 최신 글 목록들을 README에 보여주고 있었다.
오.. RSS 피드를 사용하면 티스토리 뿐만아니라 어디서든 사용이 가능하겠다!!
제작과정
디자인: Figma & AI의 도움
그래도 이왕 보여준다면 이쁜 카드 형태로 보여주고 싶었다.
디자인에는 사실 자신이 없었는데, Figma에도 AI 기능이 있어서 당당하게 해버렸다..!
물론 여백이나 나열, 구조들이 완벽하진 않아서, SVG를 복사해 따로 좀 더 다듬었다.ㅎㅎ
서버 구축 및 개발
기존에 Express로 만들어둔 보일러플레이트가 있어서, 빠르게 프로젝트를 구성할 수 있었다.
그래서 API 요청 시 RSS 주소를 전달받아 가공해서 SVG를 응답하는 API를 빠르게 만들 수 있었다.
내가 구성한 디자인에는 파비콘이 있는데, RSS에는 파비콘 관련 내용이 없었다.
방법을 찾아보니 블로그 주소만 알면 구글에서 파비콘을 다운받을 수 있었다.
ㄴ `https://www.google.com/s2/favicons?domain=${url}`
배포
배포는 `Vercel`로 몇 가지 설정만 하면 바로 됐다.
`Express` 배포를 지원하다니..! 사랑해요 버셀😍
파비콘이 깨져보이는 이슈
로컬에서 테스트하거나, 배포 후 브라우저에서도 테스트 해봤을 때는 카드 UI가 잘 나왔다.
하지만 README에 작성하니 파비콘이 깨져서 보였다..!
내 방식은 마크다운에 이미지(SVG)를 로드 시키는 방법인데, SVG에서 외부 이미지(파비콘 URL)를 `fetch`하는건 마크다운에서 막는다고 한다.
파비콘을 빼야하나..? 하며 좀 더 분석해봤는데..
파비콘에 대한 정보를 미리 fetch를 해서, `ArrayBuffer` 형태를 인코딩하면 해결 가능하다고 가이드해줬다.
오.. 일리 있다고 판단해 바로 수정 후 배포하고 테스트해보니 잘 나왔다!! 사랑해요 지피티😍
마무리
단순히 "내 글을 리드미를 이쁘게 보여주고 싶다"에서 시작했는데, 이렇게 완성되고보니 만족스럽다.
처음엔 티스토리 API가 안 돼서 당황하기도 했지만, 결과적으로는 티스토리뿐만 아니라 RSS를 지원하는 어느 블로그나 쉽게 사용할 수 있는 범용적인 서비스가 됐다.
앞으로도 다양한 기능들을 차근차근 추가해 볼 계획이다.
꾸준히 개선하면서 더 쓰기 편한 도구로 발전시켜야겠다.ㅎㅎ
GitHub 프로필을 멋지게 꾸미고 싶으신 분들은 blog-readme-stats에서 많이 사용해주세요!
Issue와 PR은 언제든지 환영입니다. ⭐️도 눌러주세요 :)
GitHub - gingaminga/blog-readme-stats: RSS를 가지고 블로그 README 만들기
RSS를 가지고 블로그 README 만들기. Contribute to gingaminga/blog-readme-stats development by creating an account on GitHub.
github.com