GitHub - 프로필 페이지 꾸미기(README 꾸미기)

coding.o·2025년 2월 7일

GitHub

목록 보기

1/1

GitHub README 꾸미기 : GitHub 플랫폼에서 제공하는 README 파일을 수정하면 프로필 페이지 꾸미기 가능

README 파일 생성의 중요성

요즘은 개발을 하는 경우 GitHub 플랫폼 사용이 필수가 되었습니다. 따라서 개발자 이력서에도 인적 사항과 진행 프로젝트 이외에 개인적으로 작성하고 있는 블로그 또는 GitHub 주소를 기재하는 경우가 대부분입니다.

채용 담당자 분들도 이력서 검토 시 GitHub 상태를 필수적으로 확인하시기에 완벽하게 세팅하지는 못해도 어느 정도는 깔끔하게 정돈하고 한 눈에 보기 편하도록 레이아웃을 구성하는 것이 현명합니다.

프로필 페이지 수정 순서 (레포 생성 -> 리드미 수정)

GitHub 플랫폼 로그인 후 오른쪽 상단의 + 아이콘을 클릭해 New repository 항목을 클릭해 줍니다.
Repository name에 Owner 이름을 넣고, public과 Add a README file 설정 후 최하단의 Create repository를 클릭합니다.
생성된 레포지토리에 들어가면 README 파일의 연필 아이콘을 눌러 파일을 수정합니다.
README 파일 수정 페이지가 보이면 수정을 시작합니다. 수정 시에는 markDown 언어를 사용합니다.

꾸미기 Tip

도움되는 사이트 :

⚠️사이트 설명 전 : 모든 변경 사항은 GitHub 우측 상단 프로필 클릭 -> yourProfile에서 확인 가능합니다.

사이트 설명 :

1. simple Icons

simple Icons는 기술 스택과 브랜드에 대한 다양한 아이콘을 제공하는 사이트입니다. 이곳에서 아이콘 색상을 복사해 shield.io에서 사용할 수 있습니다.

아래 사진과 같이 아이콘 아래의 #000000 형식을 클릭하면 아이콘 색상 코드가 복사됩니다.(아이콘을 클릭하면 주소가 복사됩니다)

이렇게 복사한 색상 코드를 shield.io에 붙여넣으면 원하는 디자인의 뱃지를 생성할 수 있습니다.

2. shields.io

shields.io는 GitHub에서 사용할 수 있는 뱃지를 만들어주는 사이트입니다.
여기서 뱃지는 아래 사진과 같은 요소를 의미합니다.

shields.io 사이트 접속 후 Get started를 클릭합니다.
Get started 클릭 시 바로 뱃지 생성 창으로 이동하며 가이드가 함께 제시됩니다. 빨간 네모 부분이 생성 창, 초록 네모가 가이드 창입니다.
빨간 네모 창에서 Show optional parameters 클릭 시 사진과 같이 다양한 파라미터가 나옵니다. 이 중에서 badgeContent를 포함해 logo, logoColor만 알면 기본적인 뱃지를 만들 수 있습니다.
먼저 badgeContent에 뱃지에 표시될 내용을 입력합니다. 내용 뒤에는 반드시 color가 입력되어야 로고가 생성됩니다. 이곳에 입력한 내용은 사진의 밑줄 부분에 표시됩니다. (ex. badgeContent에 HTML-blue 입력 시)
logo에는 simple Icons에서 확인한 아이콘 이름을 입력합니다. (ex. logo에 HTML5 입력 시) 아이콘 이름을 simple Icons에 기재된 것과 똑같이 입력해야 로고가 표시됩니다. (ex. logo에 HTML5 입력 시)
simple Icons에서 복사한 색상 코드를 logoColor에 입력합니다. logoColor는 필수가 아니라 입력하지 않아도 simple Icons에 표시된 로고 그대로 반영되지만 원하는 색상이 있는 경우 해당 쿼리에 다른 색상 코드를 넣어 색상 변경이 가능합니다. (ex. HTML5의 #E34F26 색상 코드를 white로 변경한 경우)
badgeContent-(color), logo, logoColor 항목을 다 채우고 하단의 형식 중 markDown 선택 후 Excute를 클릭하면 내가 스타일링한 뱃지를 미리보기로 보여줍니다. (미리 보기는 markDown 선택과 상관없이 보여집니다)
생성된 주소를 복사해 리드미 파일에 붙여넣기 후 오른쪽 Commit changes를 클릭하면 변경 사항이 적용됩니다.

3. readme stats

readme stats는 나의 GitHub에 기재된 commit, pr 등을 종합적으로 측정해 통계를 내주는 기능입니다. 아래 사진과 같이 표시됩니다.

GitHub 상태 표시 사이트에 접속합니다. (외국어로 보일 경우 사진의 밑줄 부분에 한국어를 선택하시면 한국어로 이용 가능합니다)
GitHub 통계를 클릭합니다.
이동한 GitHub 통계 리스트에서 링크를 복사합니다.
README 파일에 붙여넣기 후 URL의 ?username 속성 값을 나의 GitHub 이름으로 변경 후 Commit change를 누르면 변경 사항이 적용됩니다. (GitHub 이름은 우측 상단의 프로필 이미지를 클릭하면 나타나는 리스트에서 yourProfile을 선택하면 확인 가능합니다)