olrlobt
[토이 프로젝트] 블로그를 깃허브에 효과적으로 노출시키는 방법 본문
많은 개발자들의 고민
나는 깃허브 리드미에 내 블로그를 홍보하기 위해 링크를 해 놓곤 한다.
하지만, 이 전의 내 깃허브 리드미에는 아래와 같이 a 태그를 이용한 조촐한 이미지 링크만 띄워 놓거나, 좌측 프로필에 조그맣게 걸어 놓는 것이 전부였다.
눌러보고 싶다는 호기심도 생기지 않고, 홍보도 잘 안 되는 것이 불만이었는데, 이를 해결할만한 마땅한 방법이 없어서 그대로 내버려 둔 채로 오랜 시간을 보냈다.
사실 나뿐만이 아니라, 다른 개발자분들 역시 별반 다르지 않다.
거의 숨은 블로그 찾기 급으로, 기술 스택과 함께 나열해 놓은 것을 볼 수 있었다.
많은 개발자, 혹은 개발자 지망생 분들이 자신의 블로그를 홍보, 포트폴리오, 지식공유의 목적으로 깃허브 리드미에 걸어 놓은 것을 자주 볼 수 있는데, 그리 효과적인 방법은 아니라고 생각한다.
적어도 나는 블로그에 관심이 많은 편인데도, 눈에 띄지 않아서 지나치곤 하니까..
효과적으로 포스팅을 노출하는 방법
그래서 이 것을 해결할 만한 방법이 없을까 고민을 하던 도중, 위와 같은 리드미 꾸미기 위젯들이 눈에 밟혔다. 이런 위젯들은 사용 기술의 분포가 얼마나 되는지, 내 백준 프로필은 어떤지, 내가 얼마나 깃허브 활동을 했는지 등등 많은 형태로 존재하고, 꽤나 효과적으로 데이터를 제공해 준다고 생각한다.
주제와 먼 얘기긴 한데, 최근에 본 가장 재밌는 위젯은 3D 잔디이다.
밋밋하고 똑같던 잔디를 3D 입체로, 심지어 1일 1 커밋만으로 잔디를 채웠다면, 검거당해 버리는 신박한 위젯이었다. 이 것을 프로필에 걸고 난 후, 큰 변화는 안 보이겠지만 실제로 더 열심히 커밋하려고 노력도 했다.
아무튼 서론은 그만하고,
이런 위젯 형식으로 블로그 포스팅을 보여줄 수 있으면 꽤나 효과적이지 않을까 고민하게 됐다.
어떤 식으로 제작된 걸까
그래서 다짜고짜 이 위젯을 배포하는 주소로 들어가서 어떤 식으로 만들었는지 파헤치기 시작했다. 먼저 개발자 도구로 위젯을 살펴보니, 단순히 이미지를 띄워주고 있었고 SVG 태그를 에 css를 이용하여 애니메이션을 넣는 형식이었다. 그리고 이 이미지를 리드미에서 사용하는 방법은 아래와 같았는데,
[](https://github.com/olrlobt/github-readme-stats)
이는 Markdown에서 이미지를 띄워줄 때 많이 사용하는 방식이다.
처음 이 위젯을 걸 때는 아무 생각 없이 안내에 따라 붙이기만 했는데, 형식을 알고 나니, API에서 이미지를 만들어준다고 추측하게 되었고,
https://github.com/anuraghazra/github-readme-stats
위젯을 배포하는 레퍼지토리에 들어가서 코드를 분석하기 시작했다. 물론 TypeScript로 작성된 코드에 수많은 파일들과 나는 잘 모르는 GraphQL을 이용한 점에서 꽤나 애를 먹었다.
그래도 얼추 API를 호출받아서 GraphQL로 Github API를 호출하여 정보를 받아내고, SVG 이미지 파일로 만들어 데이터를 집어넣어 주는 형식이라는 것까지 파악했다.
이 과정에서, 어차피 분석하는 김에 오픈소스 컨트리뷰터가 되면 좋겠다는 생각에 사소한 이슈 하나를 수정해 보고 싶어서 도전도 했었지만, 아쉽게도 이미 해결 중인 이슈라는 답변과 함께 채택되지는 못했다 😂
모르는 언어를 열심히 찾아가며 오류를 수정하고, 영어 번역기까지 써 가며 PR을 작성한 것에 비해, 사전에 해결 중인 이슈인지 확인을 안 한 것이... 후회가 된다...
그래도 좋은 경험을 했고, 위젯 서비스를 어떤 식으로 운영 중인지 대강 알 수 있었다.
블로그 위젯 제작 시작
이제 모은 정보들을 바탕으로 본격적인 제작에 들어갔다.
먼저 프로젝트를 구성한 후, 이미지가 잘 나오는지 테스트를 하기 시작했다. 앞선 예시 위젯에서는 TypeScript를 사용했지만, 나는 내가 자신 있는 Spring을 사용하기로 했다. 어차피 API 통신을 하고 이미지를 만들어 서빙해 주는 것은 똑같다고 생각했기 때문에, 속도 차이만 크지 않으면 무난히 가능할 것이라 생각했다.
그리고, 단순히 포스팅 링크로 띄워주는 것보다는 최신순으로 포스팅을 띄워주는 것을 목표로 했다.
Spring 프로젝트를 구성하고, BurfferedImage를 이용하여 이미지를 만들어 API 호출 테스트를 진행했다. 그 결과, Markdown 형식에서 정상적으로 띄워지는 것을 확인했다. (위의 사진은 현재 제공 중인 사진이다.) 그리고는 바로 서비스 제작에 들어갔다.
기본적인 작동 방식은 단순히 HTML을 크롤링해 와서 Image를 만들어 byte []로 반환해 주는 것이다.
하지만 이런 간단한 과정에서도 여러 가지 문제에 부딪혔다.
Markdown은 이미지 1개씩만 API호출이 가능하다
원래 Markdown은 API 호출을 지원하지 않는다. 하지만, 동적으로 이미지를 생성하기 위하여, 이미지 태그(! [대체 텍스트](API 호출 링크))를 이용한 API를 호출은 예외적으로 지원한다.
즉, 이미지 태그 하나당 하나의 이미지만 넣을 수 있다는 것이다...
블로그 포스팅의 경우 여러 개의 포스팅을 리스트로 뿌려 놓은 UI를 생각했었다. 하지만 이를 구현하면
...
이런 식으로 지저분하게 나열될 것이라 걱정했다.
이를 해결하기 위해, 많은 시도를 했다. 여러 사례를 찾아보고, Image를 여러 개 반환한다거나, 한 이미지로 6개의 포스팅을 묶어서 보내주면 되지 않을까? 생각했다.
하지만, 결국에는 띄워준 블로그 위젯을 클릭했을 때, 해당 포스팅으로 바로 가는 기능도 제공할 계획이었어서 포기했다. 결국 이를 해결할 수 있는 근본적인 방법은 찾지 못했고, 사용자가 원하는 개수만큼 포스팅을 노출시킬 수 있게 하는 대신, URL을 최대한 간단하게 구성하여 사용 편의성을 높이기로 하였다.
Markdown 이미지엔 링크를 포함시킬 수 없다
이렇게 만든 Markdown 이미지 태그에는 큰 문제점이 있었다. 바로 링크를 걸 수 없다는 것인데, 기존의 SVG 태그를 생각하면 이미지 안에 a 태그를 넣어서 링크를 걸 수 있다. 하지만 Github를 포함한 대부분의 Markdown에서는 보안상의 이유로 SVG태그 내에서의 a 태그를 지원하지 않았고, 시도를 해보아도 에러만 뱉을 뿐이었다.
포스팅에 링크를 걸지 못한다면, 사실상 무의미하진 않을까..? 많은 고민을 하다, Markdown에서 지원하는 링크 태그 형식을 떠올렸다.
[홈페이지 텍스트](홈페이지 링크)
[](링크가 들어가는 부분)
Markdown에서는 위와 같은 형식으로 글씨에 링크를 걸 수도, 이미지에 링크를 걸 수도 있다.
따라서, 해당 부분에 링크를 넣어주어 해결하고자 하였다. 하지만, 내가 보낸 API와 정확히 일치하는 포스팅의 링크를 어떻게 걸게 할까 고민이 되었는데, 이 역시 API로 해결하였다.
처음엔 단순히 API 호출을 하여, 텍스트로 URL링크를 보내주었었다. 하지만 당연하게도, 해당 텍스트를 보여주는 웹페이지로 이동만 할 뿐이었다. 따라서 나는 RedirectView를 이용하여 해당 포스팅으로 Redirect 시키는 방법을 이용하여 링크를 걸어주었고, 정상적으로 작동이 되는 것을 확인했다.
블로그 위젯
이렇게 포스팅 이미지와 포스팅 링크를 구성하여 이미지를 서빙해 주는 블로그 위젯을 만들었다. 사실 이 외에도 여러 고민과 문제들이 있지만, 한 포스팅에 풀어내는 것보다 더 정리하여 깊이 있는 글로 남기고 싶어서 여기까지만 작성했다.
현재 이 블로그 위젯은 배포 중에 있으며, 누구나 사용할 수 있게 깃허브에 사용법을 정리해 두었다. 앞으로도 시간을 조금씩 할애하여 더 발전시킬 계획이고, 많은 사람들이 사용했으면 하는 바람에 적극적으로 홍보할 계획이다.
미리 보기 구경하기 :
olrlobt - Overview
olrlobt has 22 repositories available. Follow their code on GitHub.
github.com
