깃허브 리드미 깔끔하고 가독성 좋게 작성하는 법 총정리(A to Z)

깃허브 리드미를 쉽게 작성하는 방법도 좋지만, 아무래도 직접 하는 편이 더 마음에 들 것 같아서 맘먹고 깃허브 리드미를 정리하기로 했다😇

 

1. 레포지토리 및 README.md 생성

https://asoong.tistory.com/209

깃허브 프로필 리드미 쉽고 빠르게 작성하는 방법

위 포스팅에 자세히 작성해두었다.

 

 

2. README.md 수정(추천 사이트 및 적용 방법)

2-1. Readme Typing SVG

리드미에 헤더를 사용하시는 분들이 많은데, 워낙 흔히 보이는 데다가 내가 원하는 심플한 무드랑은 맞지 않는 것 같아서 헤더는 생략하고 대신 타이핑 애니메이션이 들어간 텍스트를 삽입했다.

 

https://readme-typing-svg.demolab.com/demo/

Readme Typing SVG - Demo Site

Line에 원하는 글자를 넣으면 타이핑을 하게 해주는데, 라인은 몇 줄 더 추가해서 나란히 보이게 할 수도 있고 한 줄이 지워지고 나면 다음 라인 문장이 나오도록 할 수도 있다. 옵션에서 원하는 대로 해주면 된다.

 

출처

https://github.com/DenverCoder1/readme-typing-svg

GitHub - DenverCoder1/readme-typing-svg: ⚡ Dynamically generated, customizable SVG that gives the appearance of typing and del

 

 

 

2-2. hits  배지(방문자 확인)

https://hits.seeyoufarm.com/

TARGET URL에 본인의 깃허브 URL을 적어주면 끝이다. 옵션에서 아이콘도 추가 가능하고 컬러 및 타이틀도 변경 가능하다.

 

 

 

2-3. 스킬, 컨택 등 다양한 뱃지 넣기(icon badge)

1. 뱃지 검색 사이트에서 뱃지를 검색한다.

https://simpleicons.org/

Simple Icons

 

2. 뱃지명과 컬러코드를 확인한다.

 

 

3. 아래 코드의 적절한 위치에 수정해준다.

3-1. 기본 코드)

      <img src="https://img.shields.io/badge/아이콘이름-색상코드?style=flat(원하는 스타일로 변경 가능)&logo=뱃지에 새길 이름&logoColor=white(원하는 컬러로 변경 가능)"/>

 

3-2. 자바스크립트 예시)

      <img src="https://img.shields.io/badge/javascript-F7DF1E?style=flat&logo=javascript&logoColor=white"/>

 

보통 로고는 배경 컬러가 블랙이 아닌 경우 흰색으로 진행하며 글씨는 흰색/검정색 중 더 잘 보이는 쪽을 선택한다고 한다.

 

 

4. 비슷한 방법으로 컨택 뱃지도 만들 수 있다.

  <a href="mailto:yang950454@gmail.com">
    <img src="https://img.shields.io/badge/yang950454@gmail.com-4C77FF?style=flat&logo=gmail&logoColor=white" /></a>
</p>

a태그로 뱃지를 감싸주고, 원하는 링크를 삽입해주면 된다.

 

 

컬러는 통일감을 위해 같은 색으로 진행해주었다.

 

 

 

2-4. github readme stats

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

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

친절하게도 한국어 설명이 지원된다. 2-5, 2-6도 같은 곳에서 진행한다.

 

 

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

?username=본인 username으로 변경하기만 하면 된다. 기본으로 제공되는 테마들도 예뻐서, 기본 테마로 사용해도 괜찮다.

 

 

하지만 꾸미고 싶은 (나같은)사람들을 위해, 다양한 옵션들을 추가로 제공하고 있으며, 쿼리 파라미터 형식으로 작성해주면 간단하게 변경 가능하다.

등급이 낮아서 안넣을까 했는데, 예뻐서 일단 넣어뒀다😇

 

 

 

2-5. Top Languages Card(언어 사용량 통계)

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

역시 ?username=본인의 username으로 변경하면 바로 사용 가능하다.

 

 

 

2-6. GitHub Extra Pins(GitHub 저장소 핀)

[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)

엔드 포인트: api/pin?username=anuraghazra&repo=github-readme-stats

 

보여주고 싶은 저장소의 소유자를 username에 작성하고, 그 레파지토리 이름을 repo에 작성한다. 개인 저장소는 본인의 username을 사용하면 되지만, 협업했던 프로젝트 같은 경우에는 프로젝트 팀 명을 username에 작성하면 된다.

 

 

 

3. 마크다운 쉽게 작성하고 확인할 수 있는 사이트(EASYME.md)

https://www.easy-me.com/d

EASYME.md | 리드미, 마크다운 작성 사이트

사진처럼 친절한 설명과 예시, 직관적인 인터페이스로 쉽게 사용할 수 있으나 단점은 완벽하게 깃허브와 일치하는 프리뷰를 제공해주진 않는다는 점이다.

 

 

이게 EASYME.md에서 확인한 프리뷰였는데,

 

깃허브에서는 정렬이 엉망진창와장창이였고, div 설정이나 border 설정 같은 부분들이 하나도 적용되지 않았다. 찾아보니 마크다운은 가독성을 높이기 위해 설계된 마크업 언어로, HTML만큼 정교한 스타일링이나 레이아웃을 지원하지 않는다고 한다. 정말 여러 방법을 써봤지만 다 실패했고... 나중에 다른 방법을 찾을 수 있다면 수정해봐야겠다.

 

 

 

제가 정렬에 미친 사람 같으세요? 맞습니다만? 😇

 

 

4. 완성 프리뷰 및 코드보기

 

https://github.com/asoong2

asoong2 - Overview

 

우여곡절 끝에 완성한 깃허브 리드미 프로필은 이렇다! 😂

EASYME에서 보던 것만큼 예쁘진 않지만 많이 정렬되고 깔끔해져서 당분간은 이대로 쓸 것 같다.

 

자세한 코드를 확인하시려면 깃허브에 들어가서,

 

저 asoong2 부분을 누르면 README.md 파일을 확인할 수 있다. 거기서 코드보기로 확인하면 끝!

혹시 스킬 언어 같은 부분은 직접 작성하기 귀찮다면 간단하게 복사 붙여넣기로 가져갈 수 있다.(꿀팁)

 

 

그럼 끝!