[깃허브] 깃허브 리드미 꾸미기(초보자 ver.)

미루고 미루던 깃허브 리드미 꾸미기..  시작!

 

리드미 파일부터 만들어주도록 하겠습니다.

레퍼지토리 > 뉴 를 선택하면 아래 화면으로 이동합니다.

1. 레퍼지토리 네임에 내 아이디를 적고 (owner랑 같은 걸 적으면 됨)

2. public으로 되어 있는지 확인 (보통 public으로 되어 있음)

3. add README  토글을 on으로 바꿔준 뒤 레퍼지토리 생성을 누르면 

 

요렇게 생성이 완료가 됩니다.

이 상태에서 Hi there이 쓰여진 칸의 오른쪽 상단에 있는 연필 아이콘을 누르면 바로 리드미를 작성할 수 있는 창으로 넘어갑니다.

 

 

휑 했던 나의 리드미가 이렇게...🥲

 

꾸미면서 유용하게 사용했던 컴포넌트들 추천드립니다!

 

1. 헤더 

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

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

 

한국어 사용법도 있고, 헤더들이 다양하고 사용자 지정을 할 수 있는 것들이 많아 아주 마음에 들었습니다.

 

저는 블러 타입으로 사용했는데요, 간단하게 사용법을 알려드리자면 

![타입](https://capsule-render.vercel.app/api?type=타입&height=300&color=원하는 색상(#을 뺀 컬러코드) 혹은 제공하는 컬러 목록&text=텍스트&strokeWidth=윤곽선 굵기 &fontColor=글씨 색깔(#제외한 컬러코드)&section=footer&reversal=true&fontAlign=50&stroke=텍스트 윤곽선 색깔&fontSize=텍스트 크기&textBg=false)

컬러의 경우 그라데이션을 할 수 있는데 0:ffffff,100:000000 이런 식으로 시작 색상과 끝 색상을 지정해주시면 됩니다.

 

 

2. 움직이는 이모지

캡쳐본이라 안보이겠지만.. 리드미에 사용된 이모지들은 전부 움직이는 이모지입니다!

https://animated-fluent-emoji.vercel.app/

Animated Telemoji - Telegram

 

너무 귀엽지 않나요..

아이콘을 다운 받을수도 있고 </> 클릭 시 리드미에 붙여넣기만 하면 바로 사용할 수 있습니다. 

 

 

3. 배지

https://dev.to/envoy_/150-badges-for-github-pnk#contact

📛 Awesome Badges

리드미에 필수적으로 사용되는 배지.. 저도 사용해보았습니다.

왜 그런지는 모르겠는데 제가 사이트에 접속했을 당시(2025.10.17) 배지 이미지가 깨져서 보이지가 않더라고요

나름 꿀팁..

그래서 저는 이렇게 ctrl + f 로 원하는 아이콘 검색 후 리드미에 넣어서 확인을 했습니다..

그냥 저 주소를 눌러도 확인이 가능하긴 합니다.

![badge](주소)

사용 방법은 이미지 옆에 있는 주소를 ()안에 넣으면 됩니다.

 

위에 있는 안드로이드 주소를 예시로 Android-3DDC84의 3DDC84 이 부분이 배경 색상을 지정해주는 곳입니다.

 

 

4. 토글 

토글좋아인 저는 리드미에서도 토클을 활용했습니다.

리드미에서는 마크다운 언어로 토클을 사용할 수 없어서 html 언어를 사용했는데요

<details> 
  <summary> 제목 
  </summary> 
  내용
</details>

이렇게 사용하시면 됩니다. html이기 때문에 줄간격은 <br>, 볼드체는 <b></b>로 하셔야 합니다.

 

 

5. 배지 하이퍼링크

배지를 누르면 해당 사이트로 넘어가도록 처리해줬는데요, 토글 안에 있는 배지라서 html 언어를 사용해서 작성하였습니다.

하나만 할 때
<p>
  <a href="사이트 주소" target="_blank"><img src="이미지 주소">
  </a>
</p>

여러 개 할 때
<p>
  <a href="사이트 주소" target="_blank"><img src="이미지 주소"></a>&nbsp;&nbsp;<!--
  --><a href="사이트 주소" target="_blank"><img src="이미지 주소"></a>
</p>

 

하나만 할 때는 상관 없지만 한 줄에 여러 배지를 넣을 때는 위처럼 하지 않으면 배지 사이에 _가 생겨서 미관상 예쁘지 않더라구요.

그래서 쭉 쓰고 배지 사이의 공백을 &nbsp;로 조절해줬습니다. 

 

6. 가장 많이 사용하는 언어

 

리드미에 빼놓을 수 없는 부분 2탄

https://github.com/anuraghazra/github-readme-stats

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

 

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=사용자 이름)](https://github.com/anuraghazra/github-readme-stats)

 

유저 네임만 바꿔주면 되는 비교적 간단한 사용법입니다!

원하는 그래프로 골라서 적용하면 되는데 저는 위의 그래프를 사용했습니다. 

 

+)

리드미 부분은 아니지만 커밋 시간대를 나타내는 productive-box가 있더라구요!

https://m.blog.naver.com/yb2316/222260350184

깃헙 메인 프로필 꾸미기 (뱃지 설정, 컴포넌트 추가)

https://radiant515.tistory.com/432

[Github] 깃허브 꾸미기: productive-box 추가하기

 

이 두 블로그의 내용을 참고해서 구현했는데요,

 

1번은 좀 더 상세하게 적혀있으나 줄글이라 헷갈리는 부분이 있고, 2번은 스크린샷이 같이 첨부되어 있어 직관적이나 스킵된 부분이 있어 헷갈릴 수 있으니 두 글을 모두 읽어보고 해보시는 걸 추천드립니다.

 

두 개를 잘 따라했는데 안된다! 왜 안되는지 모르겠다 싶으면 

해당 레포지토리의 action으로 가면 어디서 오류가 나는건지 알 수 있습니다.

제 경우 이런 식으로..

TIMEZONE: Asia/Seoul

저는 타임존 형식 오류가 있었습니닷..

 

++)🍯

나름의 꿀팁을 드리자면!

리드미 컴포넌트들은 보통 제작자 깃허브의 리드미에 작성되어 올려지잖아요. 제작자들이 상세하게 사용법을 안내했다고 한들 영어로 되어 있기도 하고 내용이 많아 적용하는데 애를 먹기도 했는데요,

이런 경우에 저는 프리뷰가 아닌 코드로 바꿔서 제가 원하는 컴포넌트가 작성된 부분의 코드를 긁어와서 사용했습니다!

제 파일로 긁어와서 붙여넣고 수정하고, 프리뷰 확인하고 이런 식으로 하니까 이해가 더 잘되더라구요.

 

 

 

이렇게 리드미 꾸미기는 끝입니다!

 

아직은 보잘 것 없지만 열심히 꾸미고 나니까 예쁘네요ㅎㅎ

https://github.com/zzingenius

zzingenius - Overview

완성작은 여기서 보실 수 있습니다!