<GitHub> 깃허브 프로필 꾸미기 (2)

 지난 포스팅에서 깃허브프로필 저장소를 생성하고, 마크다운 문법으로 간단하게 작성까지 했었다. 이번에는 좀 더 다양한 기능들을 넣어보자.

 위의 필자 프로필에서 지난 포스팅에서 작성한 글을 제외하고 보이는 것을 보자. 가장 먼저 하루의 방문자가 표시되는 뱃지가 있다. 그 옆에는 필자의 SNS와 연결되는 버튼들이 있다. 오른쪽에 백준 티어가 프로필 카드 형식으로 나타나고 있다. 그 아래에는 깃허브 스탯이 표시되고 있다.

 

1. 방문자 수

 방문자 수를 세는 뱃지는 hits를 이용한다. 

HITS

 위의 사이트에서 TARGET URL부분만 수정해주면 자동적으로 마크다운 텍스트를 카피할 수 있다. 색상 커스텀도 가능하므로 취향에 맞게 뱃지를 만들면 된다. 필자의 결과는 다음과 같다.

 

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fhaesoo9410&count_bg=%23EB8B10&title_bg=%23684327&icon=&icon_color=%23E7E7E7&title=VISIT&edge_flat=false)](https://github.com/haesoo9410)

 

 코드를 보면 알겠지만 약간의 수정을 하였다. HITS에서 제공하는 코드를 그대로 카피할 경우 링크가 HITS사이트로 연결되어 있다. 그래서 클릭시 필자의 깃허브에 그대로 있을 수 있도록 링크를 바꿨다. 이렇게 하고 싶으면 복사한 코드의 가장 끝의 괄호안 링크만 변경하면 된다. 자세한 내용은 마크다운 문법에서 링크부분을 참고하자.

 

2. 뱃지 버튼

 뱃지 버튼은 아래 사이트에서 마크다운 코드를 제공한다.

Shields.io: Quality metadata badges for open source projects

 필자는 아직 마크다운 문법이 미숙해서 꽤 헤맸었다. 아마도 나처럼 마크다운 문법이 아직 익숙하지 않다면 위 사이트를 이용해서 뱃지를 만드는 데 꽤 시간이 걸릴 수도 있다. 혹시 그런 사람들을 위해서 필요한 내용만 정리해 보았다.

 위는 필자가 만든 뱃지들이다. 크게 두 분류로 나눌 수 있다. 첫 번째는 아이콘과 이름이 있는 뱃지, 두 번째는 이름만 있는 뱃지이다. 

 

* 아이콘 뱃지

 먼저 아이콘이 있는 뱃지이다. 예시로 Gmail을 보자. 코드는 다음과 같다.

 

[![Gmail Badge](https://img.shields.io/badge/Gmail-D14836?style=flat&logo=Gmail&logoColor=white)](mailto:harry@gmail.com)

 

 가장 앞의 [](대괄호)는 알다시피 링크의 이름이다. 이 버튼에서는 표시가 되지 않으므로 크게 의미가 없다. 뒷부분에 .shields.io/badge/ 까지는 공통이다. 이 뒤는 필자가 작성한 순으로 살펴보자. Gmill-D14836 은 버튼에 쓰이는 문구와 색상을 나타낸다. D14836은 hexcode이다. 필요한 색상은 https://htmlcolorcodes.com/ 사이트를 참고하자. #은 빼고 작성해야한다.

 

 이제 스타일이다. ?(물음표)로 스타일과 관련된 부분이 시작되며 각각 &로 구분한다. 순서는 상관없다. 버튼의 외관 스타일을 style=flat으로 지정했다. flat외의 다른 스타일은 위의 shields.io 사이트를 참고하자. logo는 아래 사이트에서 확인할 수 있다. 

Simple Icons

 위의 사이트에서 필요한 아이콘을 찾아서 이름을 그대로 logo= 에 넣기만 하면된다. 위의 사이트에서 배경으로 적절한 hexcode도 제공하므로 참고하자. 마지막으로 logoColor로 로고색상까지 지정하면 끝이다. 가장 끝의 괄호에 원하는 링크를 작성하면 버튼이 올바르게 작동한다.

 

* 네임 뱃지

 이름만 있는 뱃지는 더 만들기 쉽다.

 

[![Tistory Badge](https://img.shields.io/badge/Tech%20Blog-555263?style=flat&logoColor=white)](https://haesoo9410.tistory.com/)

 

 위의 코드에서 아이콘만 빼고 만들었음을 알 수 있다. 띄어쓰기는 %20 으로 표기한다.

 

3. 백준 티어 프로필 카드

 티어 프로필을 깃허브에 표시하는 기능은 morijwana 님이 개발하셨다. 이를 이용하기 위해서 아래 깃허브에서 코드를 받을 수 있다.

mazassumnida/mazassumnida

 총 세가지 버전이 있는데 필자는 v.2.0 이 애니메이션도 있어서 마음에 들었고, 바로 적용하였다. 

 

 위 깃허브에서는 링크를 나타내는 문법형식으로 제공하는데 이를 프로필에 그대로 작성하면 자동으로 왼쪽 정렬이되고 다른 내용들과 섞여서 지저분해진다. 필자의 프로필을 보면 위를 이미지로 감싸고 따로 오른쪽에 정렬해주었다.

 

<img align='right' src="http://mazassumnida.wtf/api/v2/generate_badge?boj=haesoo9410">

 

 필자와 같이 이미지를 오른쪽정렬 하고싶으면 위와 같이 작성하면 된다.

 

 

4. 깃허브 스탯 카드

 마지막으로 깃허브 스탯을 적용해보자. 깃허브 스탯은 아래 사이트에서 자세히 살펴볼 수 있다.

anuraghazra/github-readme-stats

 위 깃허브에서도 링크를 나타내는 문법형식으로 스탯카드를 제공한다. 이 또한 위에서 했던 방식으로 이미지로 만들면 간단하게 오른쪽 정렬이 가능하다.

 

<img align='right' src="https://github-readme-stats.vercel.app/api?username=haesoo_y" height="165">

 

이렇게 완성된 필자의 코드는 아래 필자의 repository를 참고해주길 바란다.

GitHub - haesoo-y/haesoo-y: 🖐Hi there~!

 

---

 

 

참고

 

[Git-Hub] 깃허브 Profile 만들기 & 꾸미기

 

anuraghazra/github-readme-stats

 

Kinetic's BLOG

 

HITS

mazassumnida/mazassumnida

 

Shields.io: Quality metadata badges for open source projects