Github README 기술 스택 이쁜 Badge로 만드는 방법 (shields.io)

Github에서 잘 꾸민 README.md를 보면 아래와 같은 기술스택 Badge를 본 적이 있을 것입니다.

 

이와 같은 Badge는 조금 더 Github를 있어 보이게 합니다. 또한 여러 기술 스택을 표시할 때 아래와 같이 다채롭게 표현이 가능합니다.

오늘은 이런 이쁜 Badge를 만들고 사용하는 방법을 알아봅시다.

 

목차

 

사전 준비

우선 Shields.io에서 badge를 만들 수 있게 오픈소스로 제공하고 있습니다.

https://shields.io/

Shields.io: Quality metadata badges for open source projects

 

위의 홈페이지에 들어가 내용을 보면 다양하게 badge를 꾸밀 수 있지만 우리가 원하는 건 특정 기술스택을 이쁘게 Badge로 만드는 것입니다.  바로 아래의 홈페이지를 이용해서 만들 수 있습니다.

https://simpleicons.org/

Simple Icons

 

자, 위의 두 개의 홈페이지를 가지고 본격적으로 만들어 보겠습니다.

Badge 만드는 방법

Badge의 기본적인 포맷은 다음과 같습니다. 우리는 여기서 한글 부분을 채워주면 됩니다.

<img src="https://img.shields.io/badge/기술명-색깔?style=flat-square&logo=기술명&logoColor=white"/>

 

예시로 이번에 안드로이드 Badge를 만들어 보겠습니다.

 

우선 Simple Icons 페이지에 들어가 줍니다. 그리고 검색창에 안드로이드를 검색해 줍니다.

이후 해당하는 색깔 부분을 눌러 복사를 해줍니다. 우리에게 필요한 건 색깔 값과 기술명입니다. (기술명은 소문자로 적으셔도 무방합니다.)

 

이제 아까 만들어둔 포맷에 다음과 같이 넣어줍니다.

<img src="https://img.shields.io/badge/android-3DDC84?style=flat-square&logo=android&logoColor=white"/></a>&nbsp

이제 Badge는 준비가 되었으니 README.md에 적용해 봅시다.

Badge를 README.md에 적용하는 방법

README.md를 열고 해당 부분을 복사해서 넣어줍니다.

 

그리고 Preview를 눌러서 확인하면 잘 적용된 것을 확인할 수 있습니다. 

 

추가적으로 다른 HTML 태그들을 이용해서 여러 Badge를 자유롭게 배치할 수 있습니다.