[Github] 깃허브 README 꾸미기

 

오늘은 깃허브 프로필을 꾸미는 방법에 대해 알아보려고 한다.

 

기존에 있던 우리?의 구린 프로필을 이번 시간에 한번 제대로 꾸며보자.

 

Github 프로필 README

 

---

0. 프로필 레퍼지토리 만들기

프로필을 꾸미려면 먼저 프로필 레퍼지토리를 만들어야 한다.

 

우리가 평소에 레퍼지토리를 만드는 방법과 유사하다.

 

 

이렇게 본인의 깃허브 id와 똑같이 입력하면 아래에 귀여운 냥이😺가 '프로필을 추가하는 데 사용할 수 있는 ✨특별한✨ 저장소' 라고 알려준다.

 

필자는 이미 해당 레퍼지토리를 만들었기 때문에 경고문이 나타난 것이니 걱정하지 말고 만들면 된다.

 

Public, Add a README file 체크

 

다른 사람들에게 보여주려고 만드는 프로필이니 당연히 Public ✅

 

Add a README file 버튼도 ✅

 

profile README를 관리하는 repository 생성

 

이렇게 생긴 레퍼지토리가 생성되었으면 프로필 README 꾸밀 준비 끝!!

 

※ md파일이 어떻게 수정되는지 확인하면서 작업이 가능한 사이트라고 한다.

( 필자는 md파일과 Preview 왔다 갔다 하면서 완성했는데.. 다 끝내고 글 작성하면서 알게 된 사이트..😂 )

Online Markdown Editor - Dillinger, the Last Markdown Editor ever.

 

---

1. 헤더 / 푸터 꾸미기

프로필의 header 또는 footer를 꾸미는 작업이다.

 

프로필 Header

헤더와 푸터는 capsule-render라는 오픈 API를 사용했다.

 

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

위 링크는 해당 API 깃허브 주소다.

 

들어가보면 어떻게 사용하는지, 데모 이미지 등 상세하게 나와있다.

 

처음 봤을때는 사용하기 어려울 수 있는데 조금만 살펴보면 쉽게 사용할 수 있다.

 

- How to Use

어떻게 사용해?

 

우리는 Markdown(.md) 파일을 사용하기 때문에 빨간 박스에 있는 코드를 사용하면 된다.

 

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

위 코드를 바탕으로 우리가 원하는 디자인을 커스텀해서 사용하면 된다.

 

 

API 사용 가이드 목록

1번과 20번을 제외한 2~19번의 옵션을 커스텀 할 수 있다.

 

사용법은 대부분 비슷하니 몇개의 옵션만 어떻게 커스텀하는지 살펴보자.

 

- type

ex) type=slice

type은 해당 API의 디자인을 설정하는 옵션이라고 볼 수 있다.

 

따로 설정하지 않으면 default 값인 wave로 설정된다.

 

변경하고 싶다면 표시해둔 빨간박스처럼 입력해주면 된다.

 

필자는 움직이는 물결같은 효과를 부여해주는 waving을 사용했다.

 

- color

 

color는 색을 지정해주는 옵션이다. 랜덤으로 부여해주거나 사용자가 직접 색을 설정할 수도 있다.

 

필자는 auto를 사용했는데, 검증된 랜덤 색상이라고 적혀있다.

 

랜덤 색상을 부여해주는 옵션이 여러 개 있는데 각각 조금씩 다른 것 같다.

 

random 같은 경우를 보면 정말 랜덤한 색을 부여해주는 것이라서 해당 API 개발자도 어떤 색이 나타날지 모른다고 적혀있다.

 

- text, desc

 

text는 Header를 대표하는 글을 입력해주면 되고, desc는 text 아래 입력할 내용을 적어주면 된다.

 

띄어쓰기를 하고싶다면 스페이스 대신 %20을 입력하면 된다.

 

필자가 만든 Header를 예시로 보자.

 

 

해당 이미지에서 text는 Welcome! 😊, desc는 This is Sumin playground. 라고 보면 된다.

 

아래는 필자가 최종적으로 커스텀한 코드다.

![header](https://capsule-render.vercel.app/api?type=waving&color=auto&height=300§ion=header&text=Welcome!😊&desc=This%20is%20Sumin%20playground.%20&fontSize=90&descSize=30&fontColor=ffffff&fontAlignY=40)

추가로 커스텀 하고 싶은 기능이 있다면 API 깃허브를 참고해서 사용해 보자.

 

2. 뱃지

다음은 뱃지 사용 방법이다.

 

블로그나 이메일, 또는 기술 스택을 나열할 때 일반 텍스트로 작성하면 밋밋해 보일 수 있는데,

뱃지를 사용하면 시각적인 효과를 줄 수 있다.

 

뱃지 사용 예

 

위 사진처럼 텍스트로 작성하는 것보다는 좀 더 눈에 띄게 만들어줄 수 있다.

 

뱃지를 사용하거나 커스텀하려면 먼저 다음 사이트를 이용해야 한다.

 

Shields.io: Quality metadata badges for open source projects

 

사이트에 들어가면 이것저것 뭐가 많은데 처음 사용하는 사람은 헤맬 수 있기 때문에 예시 코드를 보면서 이해해 보자.

 

뱃지 완성

 

밑줄 친 색별로 확인해 보자.

 

- 링크를 걸어주는 html 형식의 코드다.
- href에 주소를 입력해주면 뱃지 클릭 시 해당 주소로 이동된다. ( 물론 typescript같은 기술 스택에 대한 뱃지는 링크가 필요 없으니 a 태그를 사용하지 않으면 된다. )

 

 

아 참고로 가운데 정렬은 <div align=center></div> 사용하면 된다. ( 어때요. 참 쉽죠? )

 

 

- 뱃지에 나타낼 텍스트와 배경색을 설정하는 곳이다.

- Blog 위치에 내가 입력하고 싶은 텍스트를 작성하고 뒤에는 헥스코드를 넣으면 된다. ( #은 제외 )

 

- 뱃지 디자인을 설정하는 곳이다.

- 다음 중에서 원하는 디자인을 골라서 입력해주면 된다.

 

- 뱃지에 들어갈 로고 아이콘을 설정하는 곳이다.

- 다음 링크에서 본인이 원하는 로고가 있는지 확인 후 사용하면 된다.

Simple Icons

 

필자가 커스텀한 사항은 이 정도가 있었다.

 

더 다양한 커스텀을 원한다면 위쪽에 걸어둔 링크에서 확인해보길 바란다.

 

3. Github stats

마지막으로 github stats에 대해 알아보자.

 

github stats

 

github stats는 자신의 깃허브 활동 지표를 만들어주는 카드라고 이해하면 된다.

 

필자뿐만 아니라 대부분의 깃허브 유저라면 높은 확률로 본 적이 있거나 현재 본인 프로필에 있을 것이라 생각한다.

 

![tnals545's github stats](https://github-readme-stats.vercel.app/api?username=tnals545&show_icons=true&theme=tokyonight)

사용법은 정말 간단하다. 필자의 깃허브 아이디는 tnals545이고, 위 코드에서 해당 텍스트만 본인의 깃허브 아이디로 바꿔서 적으면 바로 적용된다.

 

보다 자세한 사항이 궁금하다면 아래 공식 깃허브 페이지를 확인해 보자.

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

 

 

색상 변경은 아래 링크 참고.

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

 

---

마치며

깃허브 프로필 꾸미기를 미루고 미루다 이번에 다루게 되었다. 생각보다 꾸미는 게 재미있어서 시간 가는 줄 모르고 작업했다. 이것저것 해보면서 어떻게 바뀌는지 보는 재미가 있었다.

옛날에 싸이월드가 한창 유행할 때 필자는 안 했지만, 미니홈피 꾸미는 게 이런 느낌인가 싶었다. 물론 디자인 센스는... 잘 모르겠지만 😋 즐겼으니 만족이다.

 

※

해당 블로그는 개인적으로 작성한 코드를 정리 및 복습을 목적으로 글을 작성하고 있습니다.

글에서 잘못된 부분이나 오타가 있다면 댓글로 알려주세요. 최대한 빠르게 피드백 후 반영하겠습니다 :)

부족한 부분이 있더라도 너그럽게 이해해주시면 감사하겠습니다. 🙇‍♂️