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

친한 분한테 깃허브는 필수다, 라고 말을 들어서...짬이 날 때마다 내 깃허브를 한번 꾸며보기로 했다. 필수라는 게 꾸미는 게 아니란 건 알지만 찾아보니 꽤 괜찮게 꾸며놓은 깃허브 페이지들이 많아서 나도 해 봐? 싶어서 기록한다.

 

먼저 깃허브 레포를 만들어야 한다. 이 때 이름은 내 이름으로 만들어야 한다.

내 깃허브 아이디가 aaa000이라면 뒤의 레포지토리 이름도 똑같이 aaa000으로 만들어야 한다는 뜻이다.

이렇게 레포 이름을 정하면 하단에 녹색으로 이런 글자와 움직이는 고양이 이미지가 나온다.

대충 public으로 설정하고 프로필로 쓸 README 초기화하라는 내용

그 밑의 설정 중에선 Add a README file 체크박스에 체크만 하면 건드릴 건 없다. 처음 생성 시 기본 public으로 설정되어 있기 때문에 따로 건들 필요는 없다. 아래와 같이 설정하면 된다.

빨간색 박스가 쳐진 곳만 체크되어 있는지 확인하면 된다

이제 Create repository를 눌러서 레포를 만든다. 그리고 README를 보면 아래처럼 "Hi there" 문자열과 손 모양 이모지가 나오는 걸 볼 수 있다.

여기서 잠깐 내 깃허브 메인으로 이동하면 아래와 같이 내 계정 이름의 레포 안에 있는 README가 최상단에 노출되는 걸 확인할 수 있다.

이제 간단하게 꾸며보자. 이미지로 내 이름 같은 게 멋있게 표현되는 걸 원해서 찾아보니 이런 게 있었다.

https://github.com/kyechan99/capsule-render

kyechan99/capsule-render

 

이걸 쓰면 뭔가 있어보이는(?) 이미지를 만들어서 깃허브 프로필에 장식할 수 있는 듯했다. 그래서 바로 적용해봤다.

 

꽤 괜찮다. 사선 아래의 직각삼각형 부분은 새로고침할 때마다 색이 바뀌었다.

적용하는 방법은 리드미를 열고 아래와 같이 작성하면 된다. 엔드 포인트(api?) 뒷 부분의 인자값들은 본인 입맛에 맞게 수정하면 된다.

![header](https://capsule-render.vercel.app/api?type=slice&color=gradient&height=200&section=footer&text=Hi%20There&fontSize=100)

인자값들에 대해선 위의 링크를 타고 들어가면 자세히 알 수 있지만 여기서 간단하게 짚고 넘어가자면

• type : wave, egg, shark, slice, rect, soft, rounded, cylinder, waving의 총 9개가 있으며, 일종의 테마라고 생각된다. 글자 뒤의 이미지를 어떤 것으로 할지 정할 수 있으며 위의 url에서 "type=slice"의 slice 부분을 다른 것으로 바꾸면 된다.
• color : 이미지의 색상을 정할 수 있다. gradient로 설정하면 위 이미지처럼 그라데이션 효과를 줄 수 있으며 색깔은 새로고침할 때마다 랜덤으로 변한다.
• height : 이미지의 높이다. 이 숫자를 바꾸면 README에서 위 이미지가 얼마만큼의 높이를 차지할지를 정할 수 있다.
• section : 현재 footer로 되어 있는데 이렇게 하면 위 이미지처럼 사선 하단에 이미지가 나오고, header로 하면 사선 위에 이미지가 나온다. 어떻게 나오는지 궁금하다면 하단 이미지 참고
• text : 이미지 위에 어떤 글자를 놓을지 정하는 곳이다. 띄어쓰기를 할 거라면 "%20"을 꼭 넣어줘야 하며, 당연한 말이지만 "%20" 다음에 띄어쓰기를 하면 이미지는 적용되지 않는다.
• fontsize : 글자 크기

section을 header로 설정하면 아래와 같이 나온다.

그 다음 깃허브를 돌아다니다 보면 이런 뱃지같은 것들을 볼 수 있다.

이것들을 설정하는 방법도 찾아봤다.

이미지와 똑같이 README에 입력하는데, 아래 링크에 잘 설명돼 있으니 여길 참고하자.

https://velog.io/@woo0_hooo/Github-github-profile-%EA%B0%84%EC%A7%80%EB%82%98%EA%B2%8C-%EA%BE%B8%EB%AF%B8%EA%B8%B0

[Github] github profile 예쁘게 꾸미기

 

예시로 위의 사진의 자바를 보이게 하고 싶다면, Java-007396이라 쓰여진 img 태그를 README에 붙여넣고 저장하면 된다.

이것 말고도 깃허브를 개성적으로 꾸밀 수 있는 다양한 요소가 있으니 시간날 때 시도해 보면 좋을 듯하다.