목차
1. 깃허브 꾸미기
🌱 리드미 꾸미기 레퍼런스 사이트
내 깃허브만 심심해 🥲
갑자기 내 깃허브가 심심해 보였다. 원래 공부 못하는애들이 책상정리부터 시작해야 직성이 풀리는것처럼
나또한 이 깃허브를 꾸며야 공부가 잘 될것같은 마음이 들었다. 하지만 막상 어떻게 꾸며야 할 지 선뜻 손이 안간다.
여기저기서 많은 소스는 본것 같은데, 어떤 레이아웃과 조합으로 꾸며야 나를 대표하는 리드미가 될 지
생각보다 고민을 많이 하게 됐다.
이럴때 남들의 best practice 만 모아놓은 github 사이트를 참고하면 도움이 된다.
꾸미기 타입별로 정리되어 있어 하나씩 살펴보고 레퍼런스 삼아 보다 쉽게 디자인 할 수 있다.
(중간중간 404가 뜨는 함정 사이트들도 있다.)
awesome-github-profile-readme
abhisheknaiidu • Updated Mar 11, 2024
나는 “깔끔하지만 나를 나타낼 수 있는 리드미” 를 목표로 두고 레퍼런스를 찾기 시작했다.
목표가 추상적이긴 하지만 저 단어만큼 내가 원하는것을 표현하는것이 없다.
그래서 사이트 리스트 하나하나 들어가보며 구경하기 시작했다.
여러 사이트들을 들어가보니 다들 이력들이 너무 화려하다.. 😭
자랑할만한 깃 랭킹과 stars, 컨트리뷰터 들로 가득찬 readme 파일들을 그대로 따라하다간 내 리드미가 더 초라해 보일 것 같았다.
반대로 프로필을 게임으로 만든다던가 코드형식으로 만드는 등등, 너무 힘을주어 꾸며놓은 레퍼런스는 조잡하고 이력을 한눈에 보기 어려웠다. 나에게는 탈락 대상!!
그래서 가장 기본에 충실하면서도 내용이 비어보이지 않는 세가지 레퍼런스를 찾았다.
깃 커밋을 날릴때 깃모지를 사용하며 더 보기 편해진것 처럼, 나를 소개할때도 이모지를 통해 시각적으로 눈에 띄도록 하는 방식이 제일 들어왔다.
상대적으로 개발 연차가 적은 나에게 화려한 이력을 영끌해서 나열하는 것 보다,
나의 경험과 관심사를 전부 나타낼 수 있으면서도 조잡해 보이지 않아 좋아 보였다.
개발 스택표현은 마지막 사이트처럼 아이콘으로 변경하기로 했다.
이전에는 tag 형식으로 표현했는데 뭔가 느껴지는 “구림” 이랄까..
나혼자 느끼는 것일수도 있겠지만 옛것의 느낌이 났다.
태그의 백그라운드 색깔을 통일하고 싶은데 각 스택이 가진 고유의 색깔이 있기때문에 변경하면 이상할것 같았다.
이번 리드미는 “깔끔함” 에 초점을 둔 만큼 통일성을 지키기 위해 아이콘을 선택했다.
통계부분은 GitHub-Profile-3D 를 적용해보려고 한다.
한창 3d, three.js 에 빠져있어 미친듯이 판 적 있었는데 우연히 깃허브 잔디가 3d 로 구현되어있는것을 발견했다.
우와.. 이건뭐냐 하고 그냥 지나갔는데 갑자기 생각났다.
UI 적으로 앞의 내용들이 심플하기 때문에 마지막에 들어가주는것도 나쁘지 않다고 생각했다.
또한 GitHub-Profile-3D 는 공식문서를 보고 천천히 따라한다면 쉽게 설정할 수 있다.
공수는 덜 드는것에 비해 사람들의 이목을 쉽게 끌 수 있기 때문에 한번쯤 적용 해 볼만 한것 같다.
무엇보다 GitHub-Profile-3D 는 나의 초라한 등급을 나타내지 않기때문에 약간 마음이 편안해진다.
2. 내가 꾸민 리드미
🌱 기술스택 아이콘
기존에 디자이너가 만든 스킬 아이콘을 쓸 수 있는 사이트들
skill-icons
tandpfun • Updated Mar 11, 2024
profile-technology-icons
marwin1991 • Updated Mar 11, 2024
skill-icons 와 profile-technology-icons 둘 다 이미지 파일에 각 제작자가 만든 이미지 형태의 아이콘을 사용한다.
skill-icons 의 공식문서에는 엘리먼트 형식으로 작성하는 코드가 같이 나오지만 profile-technology-icons 는
엘리먼트를 원하는 형태로 컨버팅 해주는 별도의 사이트가 있다.
둘 다 내가 사용하고 있는 스택 모두를 가진것은 아니나 skill-icons 가 좀 더 다양하게 존재한다.
더 다양하게 존재하더라도 어찌됐든 내가 사용하려는 아이콘이 하나라도 없으면 의미가 없으니
원하는 아이콘 스타일에 따라 선택하면 될 것 같다. 나같은 경우 검정색 배경의 skill-icons 보다 흰 배경의 profile-technology-icons 에 코드 엘리먼트로 감싸고 없는 스택아이콘에 대해서 직접 캡쳐하여 이미지파일로 삽입하였다.
🌿 깃허브 3D 잔디, GitHub-Profile-3D
GitHub-Profile-3D 는 github action 을 기반으로 이용되기 때문에 토큰추가가 필요하다.
settings → Developers settings → personal AccessToken → Tokens(classic)
Developer Settings 에서 토큰 생성 시 New personal access token (classic) 를 클릭하여 생성한다.
Expiration 는 원하는 기간만큼 설정한다. 너무 짧게 설정하면 토큰 기한을 그만큼 자주 바꿔줘야 해서 나같은 경우 매우 귀차니즘이기 때문에 No Expiration 로 설정했다.
Select scopes 는 본인이 원하는 만큼 권한 설정을 하고 토큰을 생성해 준다.
이 때 생성된 토큰은 나의 리드미 레포에 적용되어야 하니 어딘가에 잘 간직하고 있자. 잃어버리면 다시 찾을 수 없다!
readme 레포의 settings → Developers settings → personal AccessToken → Tokens(classic)
Name 에는 특수문자, 대문자를 제외한 스트링값으로 작성하고 Secret 에는 아까 생성한 토큰을 붙여넣는다.
그다음 Actions 에 들어가서 설정값을 추가해야한다.
초기에는 아무것도 안보이는게 맞으니 안심하고 Set up workflow 를 클릭한다.
공식문서에 나온대로 형식에 맞게 추가한다.
여기서 .env 의 GITHUB_TOKEN 은 ${{ secrets.TOKEN }} 으로 수정하고 저장하도록 한다.
git config user.name 과 user.email 도 본인의 git 이름과 email 을 넣으면 되는데,
헷갈린다면 터미널에서
git config user.name 혹은 git config user.email명령어로 확인 할 수 있다.잘 돌아가는것을 확인했다면 Run workflow 버튼이 뜰것이다.
Run workflow 버튼을 클릭한 후 내가 적용할 리드미 레포로 이동한다.
공식문서에서 3d 스타일에 따라 svg 형식 리스트가 있다.
이 중 원하는 스타일을 참고하여 다음과 같이 리드미에 추가한다.
- profile-3d-contrib/profile-green-animate.svg
- profile-3d-contrib/profile-green.svg
- profile-3d-contrib/profile-season-animate.svg
- profile-3d-contrib/profile-season.svg
- profile-3d-contrib/profile-south-season-animate.svg
- profile-3d-contrib/profile-south-season.svg
- profile-3d-contrib/profile-night-view.svg
- profile-3d-contrib/profile-night-green.svg
- profile-3d-contrib/profile-night-rainbow.svg
- profile-3d-contrib/profile-gitblock.svg
짜잔~
나는 profile-night-view.svg 로 설정하고 다음과 같이 잘 나타나는것을 확인하였다.
이러한 과정을 거쳐 드디어 나를 나타내는 리드미를 만들었다.
이전의 리드미보다 더 깔끔해진것같아 만족만족!
이제 본격적인 내실을 다지기 위한 공부를 할 준비가 되었다!!
참조
🔗 깃허브 readme 꾸미기 레퍼런스 사이트
awesome-github-profile-readme
abhisheknaiidu • Updated Mar 11, 2024
🔗 프로필 아이콘 converting 사이트
🔗 github-profile-3d 사이트
