여러분은 GitHub README.md 꾸미기 좋아하시나요?

안녕하세요!

약 2일 전부터 시작했던 프로젝트의 프로토타입이 나와서 어떻게 만들게됐는지, 그 과정을 공유해드릴까 합니다.

여러분은 GitHub 프로필의 README 꾸미기를 좋아하시나요?

저는 자기 PR, 이력서같은 느낌으로 사용해오고 있는데요.

처음에는 capsule-renderer, shield.io 등을 사용해서 일반적이라고 할 수 있는 흔한 스타일의 README를 시작으로, 제가 따로 제작한 이미지를 사용해 독자적인 스타일로 README를 작성하는 등의 시도를 해왔습니다.

항상 github-readme-stats나 가장 최근 Disquiet에도 공유되었던 git-animals 같은 프로젝트들을 보면 이렇게 움직이는 이미지들은 어떻게 만드는걸까? 하는 호기심이 있었는데, 솔직히 어디서부터 공부해야할지 너무 막막하더라고요. 그러던 중 27Lia라는 분의 readme-decorate라는 레포지토리를 발견하게 됐습니다.

Next.js로 구성된 프로젝트여서 참고하기 너무 좋았고, NextResponse로 svg를 직접 반환할 수 있다는 힌트를 얻었습니다.

그럼 뭘 만들어야 할까?

저는 신기한 디자인이나 애니메이션을 좋아해서 UI 라이브러리들을 여럿 star해놓고 탐방하곤 하는데요. Magic UI를 살펴보던 중, Orbiting Circles라는 컴포넌트를 발견했어요.

가운데에 텍스트가 있고, 그 주위를 공전하는 아이콘들이 있는 그런 형태였습니다. 보자마자 가운데에 이름을 넣고 그 주위에 내가 원하는 기술스택 아이콘들을 넣으면 어떨까? 라는 아이디어를 떠올려 바로 작업을 시작했습니다.

직접적으로 애니메이션과 관련해서 하는 프로젝트는 처음이었기 때문에 지식이 너무 없어서 어려움이 많았습니다. 처음에는 gsap 라이브러리를 사용해서(이것도 처음이라 공식문서를 찾아 읽어보고, 직접 사용해보고 했어요 ㅠㅠ) 애니메이션을 구현해보려는 시도를 했고, svg를 직접 반환하는데 script가 들어가면 안되겠다는 생각이 문득 들어서 프로젝트를 엎었습니다. 결국 애니메이션을 style 태그를 사용해 CSS로 작성해야겠다는 결정과 함께 readme-decorate는 애니메이션을 어떻게 구현했는지 다시 살펴봤어요. 그렇게 저의 SVG와 CSS 애니메이션의 조사와 공부가 시작되었고, 약 2일간의 초집중 끝에 프로토타입을 만들어낼 수 있었습니다.

드디어 눈에 보이는 결과물이 나오기 시작했다.

현재 완성(?)된 결과물입니다. query 파라미터를 사용해서 기술과 텍스트를 바꿀 수 있도록 설계했고, 기술은 한 궤도에 두 개씩 계산 된 위치로 배치되어 회전되도록 구현했어요. 현재 모바일에서는 기술 아이콘들이 공전하지 않는 이슈가 있지만, PC 환경에서는 다행히 제대로 작동하고 있습니다. 아직 지원하는 아이콘들도 별로 없고 쉽게 커스텀해서 내 README에 적용할 수 있도록 해주는 웹사이트도 없지만, 앞으로 지속적인 업데이트로 개선해보려고 해요 :)

혹시 사용해보고 싶은 분들을 위해


이런 형태에서 내가 원하는 기술과 타이틀로 변경한 후에 사용해 보실 수 있어요.

혹시 추가되었으면 하는 아이콘이 있다면 제 레포지토리는 public으로 열려있으니 issue로 남겨주시면 빠르게 추가해드리겠습니다!

앞으로의 계획

우선 위에서 언급했던 크로스 브라우징 이슈를 해결해보려고 합니다.

그 이후로는 현재 simple-icons를 통해 아이콘을 받아오고 있는데, 제가 일일이 추가해줘야하는 번거로움이 있어서 어떻게 하면 한번에 가져와서 관리할 수 있을지 고민하고 있어요.(관련해서 좋은 레퍼런스가 있다면 공유해주세요! 기여도 환영합니다 :))

마지막으로는 shellboy님의 techstack-generator 같이 내가 원하는 아이콘들을 선택하고 텍스트를 커스터마이징할 수 있는 환경을 웹사이트로 만들어보려고 합니다.

이렇게 지금까지 제가 2일에 걸쳐 만든 tech-orbit이라는 프로젝트를 소개해봤어요. 해당 프로젝트의 소스코드는 아래 GitHub 링크를 통해 확인해보실 수 있어요. 업데이트가 되면 추가 소식을 Disquiet에 작성해보도록 하겠습니다. 많은 관심과 사용 부탁드립니다!

+++

Magic UI의 훌륭한 컴포넌트를 만들어주신 Dillion님께 영감을 주셔서 감사하다는 메일을 보냈습니다.