[Github] 깃허브 프로필 꾸미기

요새 많은사람들이 ReadMe.md 를 이용해서 깃허브 프로필을 꾸민다.

언젠가 해야지하다가 드디어 나도 프로필을 꾸며봤다. 

이쁘장하게 만드는데에는 영 소질이 없는줄 알았는데, 해보니까 너무너무 재밌었다!🤩

 

---

                          감성지는 내 프로필. 뿌듯행😍😍

 

프로필 생성

프로필 기능은 20년도 여름쯤 생긴 이스터에그 기능이다. 계정이름과 동일한 레포지토리를 생성하면 ReadMe.md 파일을 통해 프로필을 꾸밀수있다.

 

먼서 생성을 하기 위해서는 Github에 접속하여, 신규 레포지토리를 생성한다.

레포지토리 생성란

이때 레포지토리 이름은 계정이름과 동일하게, 그리고 Add a README file 란을 체크한다(체크하지않아도 이후에 생성이 가능하다). 나는 이미 만들었기 때문에 빨간색으로 불평한다. 이후 README.md 파일을 수정해서 프로필을 꾸밀수있다. 

 

본문 작성

처음 본문에는 아무것도 없기때문에 막막하다. 나같은 경우는 이때 마크다운 에디터 사이트에서 대략의 양식을 참고했다. 뿐만아니라 마크다운 형식으로 작성하면 미리보기 기능을 제공한다.

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

 

사실상 대부분의 기능은 필요가 없기때문에, 대부분 삭제하고 제목만 수정후 다음으로 넘어갔다.

나는 어디선가 깃허브 프로필을 봤을때, 그 알록달록한 뱃지가 정말 이뻐보였다. 그래서 뱃지 부터 넣었는데, 이를 위해서는  Shields.io 와 Simple Icons 를 이용했다.

Shields.io: Quality metadata badges for open source projects

Simple Icons

 

자세한 사용법은 Shields.io 에서 확인 가능하다.

파라미터의 형태는 https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR> 의 형태로 입력하면 된다. 또 logo, logoColor, labelColor 등의 쿼리를 추가로 넣어줄 수 있는데, 아래와 같이 사용하면 이쁜 로고를 생성할 수 있다. 사용가능한 로고목록은 simpleicons.org에서 확인 가능하다.

<img alt="이미지명" src ="https://img.shields.io/badge/메시지-색상코드.svg?&style=for-the-badge&logo=로고명&logoColor=로고컬러"/>

 

README.md 파일 예시

적용된로고. 알록달록 하니 이쁘다.

 

라이브러리 적용

깃허브 프로필을 꾸밀 수 있는 여러 라이브러리가 존재한다. 먼저 머리, 꼬리 글을 위해 아래 이미지 렌더를 적용했다.

 

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

링크를 따라 들어가면 자세하게 사용법이 명시 되어있는데, 나는 머리글만 적용하였다. 방법은 아래 형태의 코드에, 각파라미터를 설명에 따라 수정하면 된다.

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

 

적용된 Header

 

성공했다면, 다른 여러 라이브러리도 이용해볼 수 있다. 나는 anuraghazra/github-readme-stats 를 이용했는데, 내 깃허브 스택을 알록달록한 테마로 보여주고, 등급도 보여준다(등급이 굉장히 후한지. 별거없어도 A+이 나왔다. 뭔가 날먹하는기분 ㅋㅋ). 이외의 여러 기능도 제공한다. 

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

anuraghazra/github-readme-stats 의 Demo

 

사진넣기

내친김에 사진까지 넣어보기로 했다. 일 벌려놓고 주체못하는..

방법은 굉장히 간단했다. Issues에 들어간 후,원하는 사진파일(gif파일도 가능하다)을 Write 하면 링크가 변환된다.

변환된 링크(하단)

변환된 링크를 아래와 같은 형태로 README.md 파일에 입력하면 사진이 나타난다. 움짤도 동일한 방식으로 가능하다!

<img width="100%" src="https://user-images.githubusercontent.com/80378085/150538122-d0c8472f-4b8c-4544-a35c-27c398234308.gif"/>

적용된 모습

완성! 오늘은 이렇게 깃허브 프로필을 꾸며봤다. 내 깃허브는 너무 듬성듬성 이용해서 잔디 탈모(?) 가 왔지만..

프로필이라도 이쁘게 꾸미니 가슴이 벅차오른다😆😆

---

 

레퍼런스

[1] 사진적용

깃허브(GitHub)의 README 파일에 이미지/동영상 올리는 방법

[2] 프로필 꾸미기

 

[Github] github profile 예쁘게 꾸미기

 

Github(깃허브) 프로필 꾸미기

 

Github Profile 꾸미기