Skip to main content

GitHub Readme에 넣을 뱃지 만들기

· 5 min read
이영섭
이영섭
Frontend Engineer

GitHub Readme에 markdown문법을 활용해서 조금 더 예쁘게 꾸밀 수 있습니다.

Readme.md는 여러가지 방법으로 꾸밀 수 있지만 그 중에 뱃지를 만드는 방법을 알아보겠습니다!

결과물 예시 🦄​

img

저는 위의 이미지처럼 아이콘을 넣어서 뱃지를 만들어서 저의 기술스택을 나타내보았습니다. 😼

만드는 법 🪄​

shilds.io에서는 다양한 뱃지를 만들 수 있습니다.

img

위의 이미지에서 4번째인 ?style=for-the-badge&logo=appveyor 이 스타일로 아이콘이 들어간 뱃지를 만들어보겠습니다.

리액트 아이콘이 뱃지를 만들어보겠습니다.

다음과 같이 파라미터에 원하는 값을 넣어서 뱃지를 커스텀할 수 있습니다.

https://img.shields.io/badge/{보여질이름}-{배경컬러}?style=for-the-badge&logo={로고이름}&logoColor={로고컬러}

컬러에는 hex code와 색깔명을 넣어서 커스텀할 수 있습니다.

tip
![React](https://img.shields.io/badge/react-ffffff?style=for-the-badge&logo=react&logoColor=green)
![React](https://img.shields.io/badge/react-ffffff?style=for-the-badge&logo=react)
![React](https://img.shields.io/badge/react-444444?style=for-the-badge&logo=react)
![React](https://img.shields.io/badge/react?style=for-the-badge&logo=react)

React React React React

  • 배경은 ffffff 로고의 컬러는 green로 지정해보았습니다.
  • logoColor를 넣지 않으면 기본값으로 적용됩니다.
  • 배경의 색깔이 어두워지면 뱃지 이름의 텍스트는 자동으로 흰색/검정색으로 변환됩니다.
  • 배경컬러를 지정하지 않으면 badge not found를 보여줍니다.

로고 찾는 법​

로고 이름을 넣는 부분에 아무 이름이나 넣는다고 다 되는 것은 아닙니다! 🥲

어떤 로고가 가능한지는 simpleicons에서 찾아볼 수 있습니다.

원하는 로고가 없다면? 🤯​

원하는 로고가 없다면 base64형식으로 넣어줄 수 있습니다.

Relay는 검색해도 나오지 않는데요, 아이콘을 한 번 찾아서 넣어보겠습니다.

릴레이 공식 사이트에 가보니 제일 하단에 아이콘이 보입니다.

이미지 소스의 주소는 https://relay.dev/img/relay.svg 인 것을 개발자도구에서 확인했습니다. 해당 페이지로 이동해서 이번에도 개발자도구로 확인해보면 svg태그를 볼 수 있습니다.

img

우클릭하여 Copy > Copy element를 클릭하여 엘레먼트를 복사해줍니다. (저의 언어 설정은 영어로 되어있습니다.)

easy64 라는 사이트에서 svg태그를 쉽게 base64로 변환할 수 있습니다.

기본 이미지는 주황색인데 흰색으로 바꿔서 변환해보겠습니다. 복사한 엘레먼트의 fill="#F26B00"부분을 fill="white"로 바꿔주면 됩니다.

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIiB2aWV3Qm94PSIwIDAgNjAwIDYwMCI+PGxpbmsgeG1sbnM9IiIgdHlwZT0idGV4dC9jc3MiIGlkPSJkYXJrLW1vZGUiIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iIi8+PGcgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0xNDIuNTM2IDE5OC44NThjMCAyNi4zNi0yMS4zNjggNDcuNzItNDcuNzIgNDcuNzItMjYuMzYgMC00Ny43MjItMjEuMzYtNDcuNzIyLTQ3LjcyczIxLjM2LTQ3LjcyIDQ3LjcyLTQ3LjcyYzI2LjM1NSAwIDQ3LjcyMiAyMS4zNiA0Ny43MjIgNDcuNzIiLz48cGF0aCBkPSJNNTA1LjE4IDQxNC4yMjVIMjM4LjEyNGMtMzUuMjUgMC02My45MjYtMjguNjc0LTYzLjkyNi02My45MjNzMjguNjc4LTYzLjkyNiA2My45MjYtNjMuOTI2aDEyMC43OGMyMC44MTYgMCAzNy43NTMtMTYuOTM4IDM3Ljc1My0zNy43NTZzLTE2LjkzOC0zNy43NTYtMzcuNzUzLTM3Ljc1Nkg5NC44MWMtNy4yMjcgMC0xMy4wODYtNS44Ni0xMy4wODYtMTMuMDg1IDAtNy4yMjcgNS44Ni0xMy4wODYgMTMuMDg1LTEzLjA4NmgyNjQuMDkzYzM1LjI1IDAgNjMuOTIzIDI4LjY3OCA2My45MjMgNjMuOTI2cy0yOC42NzQgNjMuOTIzLTYzLjkyMyA2My45MjNoLTEyMC43OGMtMjAuODIgMC0zNy43NTYgMTYuOTM4LTM3Ljc1NiAzNy43NiAwIDIwLjgxNiAxNi45MzggMzcuNzUzIDM3Ljc1NiAzNy43NTNINTA1LjE4YzcuMjI3IDAgMTMuMDg2IDUuODYgMTMuMDg2IDEzLjA4NSAwIDcuMjI2LTUuODU4IDEzLjA4NS0xMy4wODUgMTMuMDg1eiIvPjxwYXRoIGQ9Ik00NTcuNDY0IDQwMS4xNDJjMC0yNi4zNiAyMS4zNi00Ny43MiA0Ny43Mi00Ny43MnM0Ny43MiAyMS4zNiA0Ny43MiA0Ny43Mi0yMS4zNiA0Ny43Mi00Ny43MiA0Ny43Mi00Ny43Mi0yMS4zNi00Ny43Mi00Ny43MiIvPjwvZz48c3R5bGUgeG1sbnM9IiIgaWQ9ImRhcmstbW9kZS1jdXN0b20tY29sb3IiPgoJCTpyb290ewoJCQktLWJnLWNvbG9yOnJnYmEoMjYsMjYsMjYsMSk7CgkJCS0tdGV4dC1jb2xvcjpyZ2JhKDExMCwxMTAsMTEwLDEpOwoJCQktLWEtY29sb3I6cmdiYSg5MCwxMjAsMTIwLDEpOwoJCQktLWEtdmlzaXRlZC1jb2xvcjpyZ2JhKDEyMCwxMjAsOTAsMSk7CgkJCS0tYS1ob3Zlci1jb2xvcjpyZ2JhKDIxMSwyMTEsMjExLDEpOwoJCQktLWlucHV0LWJvcmRlci1jb2xvcjpyZ2JhKDIxMSwyMTEsMjExLDAuMik7CgkJCS0taW5wdXQtcGxhY2Vob2xkZXItY29sb3I6cmdiYSgxNzMsMjE2LDIzMCwxKTsKCQkJLS1kaWFsb2ctYmctY29sb3I6cmdiYSgzNiwzNiwzNiwwLjk1KTsKCQkJLS1iZy1pbWFnZTpsaW5lYXItZ3JhZGllbnQocmdiYSgyNiwyNiwyNiwxKSxyZ2JhKDI2LDI2LDI2LDEpKTsKCQl9Cgk8L3N0eWxlPjwvc3ZnPg==

하단에 보면 이렇게 긴 텍스트로 변환이 된 것을 확인할 수 있습니다.

tip
![Recoil](https://img.shields.io/badge/recoil-f26b00?style=for-the-badge&logo={svg가 변환된텍스트})

Recoil

원래 svg의 색깔이었던 F26B00을 배경색으로 넣어주고 좀 전에 변환한 텍스트를 logo에 넣어주면 다음과 같이 변환되며 logoColor는 없어도 됩니다!

이미 svg파일을 갖고 계신 경우​

base64.guru에서 파일을 업로드하여 base64로 변환하실 수 도 있습니다.

위의 예시에서는 remote URL(https://relay.dev/img/relay.svg) 을 바로 base64로 변환할 수도 있었지만 저는 로고의 색을 바꾸고 싶었기 때문에 위와 같이 했습니다!

base64만 알고 있고 로고의 색을 변환하고 싶으면?​

decode-base64-to-text여기에서 svg로 변환 할 수 있습니다!

끝✨