[Github] README 꾸미기 (스택 badge, git stats, capsule-render)

 

요즘 개발자들한테 Github는 본인 SNS와 비슷한 역할을 하곤 한다.

단순히 협업만을 위한 도구가 아니라 자신의 개발 역량을 표출하는 도구가 된다.

그래서 오늘은 GitHub README를 꾸미는 방법에 대해 알아보겠다.

---

1. GitHub README 생성

우선 Github로 이동해 레포지토리를 만들어야한다.

여기서 중요한 점은 두가지이다.

 

1. 본인의 Github 닉네임과 동일한 레포 생성

2.Add a README file 체크

 

본인은 이미 레포를 생성한 상태라 중복이라 뜨지만 이대로 진행하면 된다.

 

 

이제 생성된 레포지토리의 README 파일을 수정해줌으로써 꾸밀 수 있다.

README 파일은 마크다운으로 작성할 수 있고, HTML으로도 작성할 수 있다.

참고로 마크다운 사용법은 아래를 참고

 

마크다운(Markdown) 사용법

 

 

---

 

2. capsule-render

capsule-render는 밋밋한 README를 화려하게 꾸며줄 수 있는 헤더라고 생각하면 된다.

GitHub - kyechan99/capsule-render: 🌈 Dynamic Coloful Image Render

 

사용방법은 매우 간단하다.

HTML태그, 마크다운 중 원하는 것은 복사해서 붙여넣으면된다.

<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90" />

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

 

 

추가로 위에 링크해 놓은 capsule-render로 들어가보면 모양, 색상, 글씨, 효과, 색 등등 다양한 옵션을 추가할 수 있다.

아래에 몇가지 예시가 있으니 참고하길 바란다.

 

 

 

참고로 본인은 아래와 같이 구현했다!

![header](https://capsule-render.vercel.app/api?type=waving&color=7E8EF1&height=200&section=header&text=Chanung's%20Github!&fontSize=35&fontAlignY=35&fontColor=f7f5f5)

 

---

 

3.  기술,  스택 뱃지 (shields.io, simpleicons, skill-icons)

 

이제 제일 중요한 기술 뱃지 사용에 대해 알아보겠다.

아마 대부분 README에 기술스택에 관한 내용은 넣을것이다.

 

우선 가장 기본적으로 보편적으로 사용하는 방법에 대해 알아보겠다. shields.io, simpleicon

 

Shields.io | Shields.io

 

Simple Icons

 

shields.io는 뱃지를 만들 수 있는 사이트이다.

거두절미 하고 귀찮은 사람은 아래에 본인이 생성한 뱃지를 복사붙여넣기하고 사용하면된다.

simpleicons 사이트에 들어가 본인이 원하는 기술 스택을 검색하면 로고와 추천색이 나온다.

 

사용 방법)

<img src="https://img.shields.io/badge/이름-색상코드?style=flat-square&logo=이름&logoColor=색상">

 

 

동그라미 된 기술스택명과 추천색을 복사한 후 아래와 같이 작성하면 된다. 

본인은 Django 뱃지를 만들기위해 아래와 같이 작성했다.

 

샘플) Django 뱃지

<img src="https://img.shields.io/badge/Django-092E20?style=flat-square&logo=Django&logoColor=white"/>

 

 

 

이와같이 간단하게 귀여운 뱃지를 만들 수 있다.

 

그러나 본인이 조금 더 추천하고 싶은 아이콘은 skills-icon을 활용하는 것이다.

 

GitHub - tandpfun/skill-icons: Showcase your skills on your Github readme or resumé with ease ✨

 

해당 아이콘을 사용하면 좀 더 동글동글하고 크고 디자인적으로 훌륭한 아이콘으로 꾸밀 수 있다.

사용방법은 정말 간단하다.

 

 

사용 방법)

[![My Skills](https://skillicons.dev/icons?i=django,react,html,aws,mysql,git,github&theme=dark)](https://skillicons.dev)

 

 

 

위처럼 icons? 이후에 본인이 원하는 스택을 넣어주면된다.

위에 링크한 Gihub 주소를 통해 아이콘 목록을 확인할 수 있다. 본인이 사용하고 싶은 아이콘을 ctrl+f를 통해 찾아 확인할 수 있다.

 

 

---

 

4. Github README-stats

 

README에 GitHub Readme Stats을 통해 동적 통계 정보를 표시할 수 있다.

사용자의 총 커밋 수, PR(Pull Request) 수, 이슈 수, 컨트리뷰션, 별(stars) 수 등의 정보를 표시해준다.

추가로 가장 많이 사용한 언어 또한 시각화 할 수 있는 기능도있다.

 

GitHub - anuraghazra/github-readme-stats: :zap: Dynamically generated stats for your github readmes

 

 

1) Github 통계 stat 사용방법

[![GitHub stats](https://github-readme-stats.vercel.app/api?username=사용자명)]

 

추가로 해당 stat은 다양한 옵션을 추가할 수 있다. (원하지 않는 통계 숨기기, 비공개 레포 기여도수 추가, 테마 설정 등)

자세한 내용은 공식 github를 참고하자.

 

참고로 테마에 따라 분위기가 달라지니 테마 옵션은 꼭 확인하기를 추천한다. 아래에 링크해놓겠다.

github-readme-stats/themes/README.md at master · anuraghazra/github-readme-stats

 

 

2) Top Language 사용방법

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=사용자명&langs_count=10&layout=compact&theme=dark)

 

이번에는 가장 많이 사용한 언어를 보여준다. 

이도 여러가지 옵션(표시할 순위, 테마 등)이 있으므로 공식 Github를 참고하길 바란다.

 

 

 

---

 

마지막으로 본인은 이런식으로 꾸며봤다.

그나저나 최근에 자격증+구직 이슈로 GitHub Stat이 엉망이다 ^^.. C랭크라니 분발해야겠다.

아무쪼록 오늘은 README 꾸미는 방식에 대해 알아봤다.

Github.... 좀 더 열심히 꾸며봐야겠다.