Github README.md에 뱃지사용으로 차별화하기

최근 Github의 README.md 파일들을 살펴보면 뱃지의 전성시대라고 불러도 될 만큼 여러 가지 뱃지들이 있습니다. 몇 년 전만 해도 뱃지 사용이 그렇게 많지 않았고, 용도도 한정적이었는데 최근에는 엄청나게 다양한 뱃지들을 아주 손쉽게 만들 수 있었습니다.

 

Facebook React.js의 뱃지

제가 README.md 파일을 작성하면서 지금까지 사용한 뱃지는 TravisCI의 빌드 뱃지와 현재 개발 여부를 알려주는 커스텀 뱃지 요 두 개였습니다. 개인적으로 레포지토리를 방문하는 사람들에게 현재 개발 진행 여부와 적어도 코드 커버리지 테스트를 테스트한 결과 뱃지를 보여주고 싶었기 때문입니다.

 

이 포스팅에서는 https://shields.io/ 를 활용하여 여러가지 뱃지를 생성해보는 방법에 대해서 알아보도록 하겠습니다.

 

기본 뱃지들

제가 맨 처음 사용했던 뱃지가 이 방법을 활용한 뱃지였습니다. 아주 직관적이고 여러 가지 색상을 넣을 수도 있고 라벨을 넣을 수도 있습니다. 다만 요 부분은 누구나 활용이 가능할 것이라보고 비교적 최근 기능인 아래 몇 가지 뱃지들에 대해서 알아보겠습니다.

 

저는 개인적으로 Downloads가 가장 관심이 많습니다.

Downloads를 클릭하여보면 아주 다양한 뱃지들의 설정 방법들이 안내되어있습니다. 이중에서도 저는 제가 가장 관심 있는 NPM과 Github Releases에 대해서 잠깐 설명드리겠습니다. 저는 대부분의 Node.js 앱들을 Github으로 배포하는 동시에 NPM에도 퍼블리싱하여 NPM으로 설치가 가능하도록 개발하였습니다. Node.js 앱들의 경우에는 NPM 또는 Yarn 같은 것들을 사용하여 관리하기가 굉장히 편하기 때문입니다. 예로 제가 얼마 전에 개발한 가상화폐 시세 테이블 앱을 사용해보겠습니다. NPM을 통해서 제 패키지를 확인하면 아래와 같은 화면이 등장합니다.

 

Shields.io의 NPM 항목

npm의 다운로드 횟수를 알려주는 뱃지를 생성해보았습니다. Interval의 경우에는 dt로 설정하면 Total 항목을 가져오는듯합니다. 그리고 Package name에는 패키지 명을 작성해야 하는데 유의해야 할 점은 모든 항목을 소문자로 작성해야 합니다. 이후에 Badge URL을 Copy 하면 여러 가지 용도로 사용이 가능합니다. 마크다운 항목이 아닌 HTML형식이나 그 외에도 여러 가지 형식을 지원하므로 아래처럼 티스토리에 뱃지를 추가하는 것도 가능합니다.

 

 

마지막으로 Chrome Web App의 다운로드 횟수도 가져와보도록 하겠습니다. 개인적으로 요것까지는 지원안될것이라 생각해서 다른 방법을 모색해보고 있었는데 Shields.io에서 기본적으로 지원합니다. 제가 전에 개발한 네이버 밴드 게시글 & 댓글 제거기의 사용자가 371명인데 Shields.io를 이용한 뱃지로도 정상적으로 371이라는 숫자가 출력되는지 확인해보겠습니다.

 

 

크롬 웹앱의 경우에는 store id를 입력해야합니다. 내 앱의 URL 끝부분의 길고 긴 알 수 없는 문장을 복사해서 넣으면 정상적으로 아래처럼 뱃지가 출력됩니다.

 

 

이처럼 Shields.io를 사용하여 여러가지 뱃지 README.md 파일에 첨부한다면 좀 더 시각적으로 보기 좋은 설명서가 될 수 있지 않을까 생각합니다. 또한 내가 자신 있는 부분의 정보를 방문자들에게 좀 더 부각할 수 있는 용도로도 사용이 가능하리라 생각합니다.