[Github] 깃허브 프로필(Readme.md)의 뱃지 JAVA(simpleicons) 미지원 이슈 및 해결

💡 깃허브 프로필 팁

(완성된 뱃지를 보고싶은 분들은 게시글 하단으로)

---

▶︎ 발단

많은 사람들이 깃허브의 프로필(Readme.md)을 통해 메인을 관리하고 있다.

그중 기술 스택 표기를 위해 뱃지(shields.io)와 아이콘(simpleicons)을 이용한다.

(뱃지를 등록하는 방법은 다른 블로그에 상세글이 많으니 생략합니다.)

 

문제는 Java의 아이콘만 제대로 표시되지 않는다는 것이다.

나의 주력 언어가 아이콘 없이 덩그러니 방치되어 있는 것을 그냥 내버려 둘 수 없었다.

---

▶︎ 원인

오라클 측의 사용 금지 요청으로 인해 Simple Icon에서 Java가 사라졌고 한다...(아래 글 참고)

Simple Icon에서 Java가 사라진 이유

---

▶︎ 해결

Shilds.io의 Documentation에는 Custom Logos를 지정하는 방법이 나와있다.

Java 아이콘을 커스텀으로 생성해 보자!

Logos | Shields.io

 

문서에 따르면 커스텀 로고를 만드는 방법은 아래와 같다.

 

✔ 커스텀 로고 지정하기

1. 로고로 지정하고 싶은 파일 구하기(SVG, PNG 등)

파일 확장자에 대한 제약은 따로 없는 것 같다.

PNG로도 만들어보고 SVG로도 만들어 봤으나, 역시 가장 깔끔한 것은 벡터 방식인 SVG이다.
본인은 아래 사이트에서 원하는 로고를 찾았다.

Java Vector SVG Icon - SVG Repo

 

2. 해당 파일 base64 인코딩

이제 찾은 로고 파일 또는 링크를 업로드하여 base64로 인코딩 해주도록 하자.

본인은 아래 사이트를 이용하여 변환해 주었다.

Base64 Image Encoder - Convert any image file or URL online

 

3. 파일의 확장자에 맞춰 삽입

마지막으로 변환된 코드를 Shilds.io의 URL 파라미터로 넣어준다.

이때 유의할 점은 &logo=data:image/{파일 확장명}%2bxml;base64,{변환된 코드}에서 파일 확장명을 본인이 변환한 파일의 확장명과 일치시켜 주는 것이다.

---

 

👀 결과물

그렇게 살려낸 Java 아이콘은 아래와 같다.

결과

![JAVA](https://img.shields.io/badge/Java-007396?style=flat&logo=data:image/svg%2bxml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iMTUwcHgiIGhlaWdodD0iMTUwcHgiIHZpZXdCb3g9IjAgMCAzMi4wMCAzMi4wMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMC4yNTYiPgoNPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiLz4KDTxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgoNPGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPiA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTIuNTU3IDIzLjIyYzAgMC0wLjk4MiAwLjU3MSAwLjY5OSAwLjc2NSAyLjAzNyAwLjIzMiAzLjA3OSAwLjE5OSA1LjMyNC0wLjIyNiAwIDAgMC41OSAwLjM3IDEuNDE1IDAuNjkxLTUuMDMzIDIuMTU3LTExLjM5LTAuMTI1LTcuNDM3LTEuMjN6TTExLjk0MiAyMC40MDVjMCAwLTEuMTAyIDAuODE2IDAuNTgxIDAuOTkgMi4xNzYgMC4yMjQgMy44OTUgMC4yNDMgNi44NjktMC4zMyAwIDAgMC40MTEgMC40MTcgMS4wNTggMC42NDUtNi4wODUgMS43NzktMTIuODYzIDAuMTQtOC41MDgtMS4zMDV6TTE3LjEyNyAxNS42M2MxLjI0IDEuNDI4LTAuMzI2IDIuNzEzLTAuMzI2IDIuNzEzczMuMTQ5LTEuNjI1IDEuNzAzLTMuNjYxYy0xLjM1MS0xLjg5OC0yLjM4Ni0yLjg0MSAzLjIyMS02LjA5MyAwIDAtOC44MDEgMi4xOTgtNC41OTggNy4wNDJ6TTIzLjc4MyAyNS4zMDJjMCAwIDAuNzI3IDAuNTk5LTAuODAxIDEuMDYyLTIuOTA1IDAuODgtMTIuMDkxIDEuMTQ2LTE0LjY0MyAwLjAzNS0wLjkxNy0wLjM5OSAwLjgwMy0wLjk1MyAxLjM0NC0xLjA2OSAwLjU2NC0wLjEyMiAwLjg4Ny0wLjEgMC44ODctMC4xLTEuMDIwLTAuNzE5LTYuNTk0IDEuNDExLTIuODMxIDIuMDIxIDEwLjI2MiAxLjY2NCAxOC43MDYtMC43NDkgMTYuMDQ0LTEuOTV6TTEzLjAyOSAxNy40ODljMCAwLTQuNjczIDEuMTEtMS42NTUgMS41MTMgMS4yNzQgMC4xNzEgMy44MTQgMC4xMzIgNi4xODEtMC4wNjYgMS45MzQtMC4xNjMgMy44NzYtMC41MSAzLjg3Ni0wLjUxcy0wLjY4MiAwLjI5Mi0xLjE3NSAwLjYyOWMtNC43NDUgMS4yNDgtMTMuOTExIDAuNjY3LTExLjI3Mi0wLjYwOSAyLjIzMi0xLjA3OSA0LjA0Ni0wLjk1NiA0LjA0Ni0wLjk1NnpNMjEuNDEyIDIyLjE3NGM0LjgyNC0yLjUwNiAyLjU5My00LjkxNSAxLjAzNy00LjU5MS0wLjM4MiAwLjA3OS0wLjU1MiAwLjE0OC0wLjU1MiAwLjE0OHMwLjE0Mi0wLjIyMiAwLjQxMi0wLjMxOGMzLjA3OS0xLjA4MyA1LjQ0OCAzLjE5My0wLjk5NCA0Ljg4Ny0wIDAgMC4wNzUtMC4wNjcgMC4wOTctMC4xMjZ6TTE4LjUwMyAzLjMzN2MwIDAgMi42NzEgMi42NzItMi41MzQgNi43ODEtNC4xNzQgMy4yOTYtMC45NTIgNS4xNzYtMC4wMDIgNy4zMjMtMi40MzYtMi4xOTgtNC4yMjQtNC4xMzMtMy4wMjUtNS45MzQgMS43NjEtMi42NDQgNi42MzgtMy45MjUgNS41Ni04LjE3ek0xMy41MDMgMjguOTY2YzQuNjMgMC4yOTYgMTEuNzQtMC4xNjQgMTEuOTA4LTIuMzU1IDAgMC0wLjMyNCAwLjgzMS0zLjgyNiAxLjQ5LTMuOTUyIDAuNzQ0LTguODI2IDAuNjU3LTExLjcxNiAwLjE4IDAgMCAwLjU5MiAwLjQ5IDMuNjM1IDAuNjg1eiIvPiA8L2c+Cg08L3N2Zz4=)

(위 코드를 복사하면 결과 이미지와 같은 Java 뱃지(로고)를 사용할 수 있습니다.)

 

또 한가지 유의할 점으로 Github Readme.md 파일은 일정 길이 이상의(너무 긴) 주소를 지원하지 않는다.

간혹 URL로 호출 시 정상적으로 로고가 표시되지만, Github 프로필에서는 사라지는 경우가 이에 해당한다.

(인코딩된 base64 코드가 너무 긴 경우 아쉽지만 다른 로고 파일을 이용하자..)

 

이렇게 Java 뱃지 아이콘을 성공적으로 살려냈다!