GitHub README 프로필 꾸미기

일반 사용자를 대상으로 서비스를 하는 IT 기업에 지원한다면,

아마도 당신은 GitHub 링크를 이력서에 넣을 것이다.

나 또한 그렇습니다.

저는 프론트엔드 개발자로 IT 기업에 지원할 예정이다.

그런데 GitHub 프로필로 정리하지 않고, 지원했을 때 성의가 없거나 관리가 안되어 있다는 인상을 받을 수 있다.

그래서 제 정리되어 있지 않은 GitHub 프로필을 공개하고 수정 결과를 공유한다.

수정 전의 GitHub 프로필 페이지

저는 저의 프로필을 과하게 꾸밀 생각은 없다.

열심히 꾸미고 가꿀 시간도 부족하지만, 프로필을 꾸미는 방법을 공유한 블로그들에서 심심치 않게 보이는 문구가

튜닝의 끝은 순정이라고 한다 🤣

수정 후 GitHub 프로필 페이지

나의 GitHub 레포지토리에 들어가서 볼 수도 있지만, README.md 파일의 코드를 붙여넣는다.

바쁜 사람은 아래 파일에서 텍스트나 이모지, 뱃지만 바꿔서 사용하면 되겠다.

<img src="https://capsule-render.vercel.app/api?type=waving&color=auto&height=150&section=header&text=Morgan's%20GitHub&fontSize=42" />

<div align=center>
<h3>반갑습니다! 김모건입니다 <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Grinning%20Squinting%20Face.png" alt="Grinning Squinting Face" width="25" height="25" />
</h3>

📚 Languages / Library / Tools 📚
  
![js](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=JavaScript&logoColor=white)
![js](https://img.shields.io/badge/HTML-E34F26?style=flat&logo=html5&logoColor=white)
![js](https://img.shields.io/badge/CSS-239120?&style=flat&logo=css3&logoColor=white)
![js](https://img.shields.io/badge/Python-3776AB?style=flat&logo=python&logoColor=white)

<a href='https://react.dev/'>![js](https://img.shields.io/badge/React-20232A?style=flat&logo=react&logoColor=61DAFB)</a>
<a href='https://axios-http.com/kr/docs/intro'>![js](https://img.shields.io/badge/Axios-5A29E4?style=flat&logo=Axios&logoColor=white)</a>
<a href='https://recoiljs.org/ko/'>![js](https://img.shields.io/badge/Recoil-3578E5?style=flat&logo=Recoil&logoColor=white)</a>
<a href='https://styled-components.com/'>![js](https://img.shields.io/badge/styled--components-DB7093?style=flat&logo=styled-components&logoColor=white)</a>


<a href='https://grafana.com/'>![js](https://img.shields.io/badge/grafana-%23F46800.svg?style=flat&logo=grafana&logoColor=white)</a>
![js](https://img.shields.io/badge/Visual_Studio_Code-0078D4?style=flat&logo=visual%20studio%20code&logoColor=white)

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=redcontroller&langs_count=4&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
</div>

 

이제 순차적으로 README에 구성요소들을 살펴보자

 

1. 비밀 레포지토리 생성

---

- You found a secret! 문구와 함께 반겨주는 GitHub의 비밀을 하나 찾아본다.

- 새로운 GitHub 레포지토리를 하나 생성하고, 이름은 자신의 닉네임과 동일하게 한다.

- 그러면 귀여운 캐릭터와 함께 특별한 레포지토리임을 알려준다.

- Add a README file 을 체크하고 레포지토리를 생성해준다.

새로운 비밀 레포지토리 생성

 

- 새로운 레포지토리에 생성된 README.md 파일이 나의 GitHub 프로필에서 보여지는 내용이 되겠다.

- 레포지토리 또는 프로필에서 수정하기 버튼을 눌러 README.md 파일을 수정할 수 있다.

수정하기 버튼

 

2. Header와 Footer 꾸미기

---

- Header와 Footer는 사람들이 많이 애용하는 capsule-render를 이용한다.

capsule-render

- 아래 코드를 넣어서 아래와 같이 다양한 형태의 Header와 Footer 디자인을 넣을 수 있다.

- wave, egg, shark, slice, rect, soft, rounded, cylinder, waving, transparent

# header
<img src="https://capsule-render.vercel.app/api?type=모양&color=색상코드&height=높이&section=header&text=텍스트&fontSize=텍스트크기" />
# footer
<img src="https://capsule-render.vercel.app/api?type=모양&color=색상코드&height=높이&section=footer&text=텍스트&fontSize=텍스트크기" />

- 본인이 시간이 없다면 waving 타입에 컬러는 auto로 잡으면 되겠다.

- color는 #빼고 6자리의 헥사코드(ex. 흰색 === FFFF)를 넣는다.

- section 옵션을 통해서 header 또는 footer를 선택할 수 있다.

- text에는 넣고 싶은 글을 넣는다. 띄어쓰기는 %20으로 표기하여 사용한다.

- footer까지 넣어주면 유치해 보여서 나는 넣어주지 않았다.

 

3. GitHub Readme stats 추가 (링크)

---

- 사용하는 언어 비율(Top Languages Card), GitHub 평판(GitHub Stats Card), 언어에 사용한 시간(WakaTime Card) 나타내는 카드을 추가할 수 있다.

- 리드미에 아래와 같은 느낌의 카드를 추가할 수 있다.

Top Languages Card

GitHub Readme Stats

- 나는 내 GitHub를 시작한지 얼마 안되기도 했고, 평판은 내게 큰 의미가 없으니 심플하게 사용된 언어만 표기한다.

- 사용 방법은 아래의 마크다운 코드에 GitHub 사용자 이름만 넣어주면 된다.

# 사용하는 언어 비율을 나태내는 위젯
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=GitHub사용자이름)](https://github.com/anuraghazra/github-readme-stats)
# GitHub 평판을 나타내는 위젯
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=GitHub사용자이름)](https://github.com/anuraghazra/github-readme-stats)

 

4. Awesome Badges 넣기 (링크, 공식 아이콘과 컬러)

---

-  다양한 종류의 뱃지가 있다.

- skills, streaming, blog, os, store, social, group, contact, games, workspace 등

Awesome Badges

- Simple Icons의 색상을 참조하고, shield.io를 통해 뱃지를 생성하면 된다.

# awesome-badges에서 제공하는 뱃지 링크만 바꿔주면 된다.
![js](링크)
# JavaScript 뱃지
![js](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white)
# React 뱃지
![js](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

- 뱃지의 스타일을 바꿔줄 수도 있다. 총 5가지가 있고 일반적으로 많이 보이는 스타일은 fot-the-badge와 flat이다.

- plastic, flat, flat-square, for-the-badge, social

- GitHub Stats 관련 뱃지도 존재한다.

# 팔로잉 숫자
![js](https://img.shields.io/github/followers/{username}.svg?style=social&label=Follow&maxAge=2592000)
# GitHub 별 개수
![js](https://img.shields.io/github/stars/{username}/{repo-name}.svg)
# 보고간 사람 숫자
![js](https://img.shields.io/github/watchers/{username}/{repo-name}.svg)

Awesome Badges에 있는 GitHub Stats 뱃지

 

5. 귀염 뽀짝한 이모지 넣기

---

- 원하는 이미지를 선택해서 태그를 복사한 다음 README에 추가하면 된다.

- 기본적인 이모지는 여기 링크에서 보고 선택해서 README에 추가하면 되겠다. (ex. 😊 === :blush:)

GitHub의 다양한 이모지들

 

- Animation Fluent Emojis에서는 귀여운 애니메이션 이모지를 가져와서 사용할 수 있다.

- 마음에 드는 이모지에 마우스를 가져다 대면 HTML 태그를 클립보드에 복사할 수 있다.

Animated Fluent Emojis

6. 간단한 CSS 적용

---

- 중앙 정렬하려면 HTML의 div 태그를 사용하여 적용할 수 있다.

- 헤더 또는 샵(#)을 사용하여 제목을 넣어줄 수 있다.

# 마크다운을 제목 넣기
# 제목1
## 제목2
### 제목3

# HTML 태그로 제목 넣기
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>

# 중앙 정렬하기
<div align=center>
... 중앙정렬하고 싶은 내용 ...
</div>

# 링크 달기
<a href=링크>클릭했을 때 링크 이동하고 싶은 내용물</a>

 

나는 위 내용들을 따라하고 정리하는데 시간이 3~4시간 소요 됬다.

하지만 README 코드만 가져가서 적용한다면 10분 내로 최소한으로 깔끔하게 꾸밀 수 있을 것이라 생각한다.

이력서를 제출할 때 GitHub 링크를 제출한다면, 30분 이내의 약간의 시간을 내서 정성을 보이도록 하자.

 

 

참고자료1. [GitHub] ReadMe 리드미 꾸미기

참고자료2. [꿀팁] GitHub Readme 예쁘게 꾸미기

참고자료3. 깃허브 프로필 꾸미기!

참고자료4. [Github] 깃허브 리드미 꾸미기 총정리