프로젝트 개요
이미지를 동적 생성 API 오픈소스 프로젝트입니다.
GitHub가 프로필 페이지를 작성할 수 있는 기능을 추가할 때 개발하게 되었습니다. 해외 개발자 커뮤니티를 살펴보면서 국내보다 조금 빠르게 프로필 페이지 기능이 추가될 점을 어느정도 인지할 수 있었습니다. 평소 개발자분들이 사용할 수 있는 오픈 소스를 직접 만들어 보고 싶다는 생각에 몇차례 시도한 적이 있었습니다만 이번 GitHub의 새로운 업데이트는 특히 빠르게 뛰어들만한 기회로 생각했습니다.
커밋 내용을 보여주거나, PR과 star등을 보여주는 기능들은 과거부터 여럿 개발 되어왔었지만 화면을 꾸며주는 부분에 대해선 부족하다고 생각했습니다. 눈에띄는 이미지를 쉽게 그려주면서도 매번 다르게 변하는 동적인 이미지라면 경쟁력이 있을거라고 판단했으며 이 프로젝트가 여러 개발자분들께 도움이 됬었으면 하는 마음에 제작을 시작했습니다.
집중한 내용
특별히 비용이 드는 서버가 필요하지 않으면서 동적인 이미지를 얻어내기 위한 API 개발이 필요했습니다. vercel을 통해 자동 배포를 선택하였고 API 의 Query 값으로 동적인 이미지를 얻어낼 수 있는 SVG를 도출하도록 개발했습니다. 원하는 SVG 형태에 맞추어 사용자 입력 값만 변경할 수 있게 하는 작업을 제외하고 개발 자체에 크게 문제가 되는 점은 없었습니다.
집중해야 하는 것은 어떻게 개발자가 손쉽게 사용할 수 있는가, 그에 맞춰 유지보수가 가능한가 였습니다.
어떻게 문서를 작성해야 다른 개발자가 쉽게 이해하고 기여해볼 수 있을지에 대해 고민했습니다. 특히 이번 프로젝트는 어떤 방식과 표기가 개발자들이 사용하기 편하고 가독성이 좋을지에 대해 여러 번 고민해 보는 계기가 되었습니다.
먼저, 코드의 가독성과 모듈화입니다. 간결하고 명확한 코드는 이해하기 쉽고 유지보수가 용이합니다. 형태가 되는 모델과 데이터들은 구분되게 나누어 쉽게 추가할 수 있게하였고 예외적으로 고려해야 할 점을 명시해 두었습니다. 오픈 소스인 만큼 다른 개발자가 구조를 이해하는데 시간과 비용이 적게 들어야 한다고 생각했습니다.
특히나, 신경썼던 README는 제공하는 기능들을 모두 담고 사용법에 대해 명시하고자 했습니다. 무엇보다 사용하지 않았을 때의 default 값과 예외가 일어날 수 있는 상황을 명시하는 일이 가장 중요하다고 여겨졌습니다.
개발자에게 있어 문서 작성이 얼마만큼 중요한지 생각하고 정성을 들인만큼, 사용법이 쉽고 간단하다며 개발 커뮤니티에서 여럿 공유될 수 있었습니다. 현재도 하루 평균 35,000에서 55,000 건의 요청이 이뤄지면서 나날이 사용량이 늘어나고 있습니다.
사용법
https://capsule-render.vercel.app/api?
위 주소 뒤에 설정하려고 하는 쿼리문 몇개만 추가하면 됩니다.
상세 사용 법 -> README
기능 쿼리
색 변경 쿼리
&color=auto : 검증된 랜덤 색만 보여줍니다. 목록
&color=random : 완전 랜덤색들을 보여줍니다. 무슨 색이 나올지는 모릅니다.
&color=gradient : 검증된 랜덤 그라데이션만 보여줍니다. 목록
&color=_hexcode : 고정 색으로 설정하려면 #을 제외한 헥스 코드 값을 넣어주면 됩니다. (default : B897FF)
auto 또는 gradient로 설정했을때, text 색도 랜덤 색에 어울리는 색으로 자동 설정됩니다.
타입 변경 쿼리
&type=wave : 파도 치는 효과의 이미지입니다. (default)
&type=egg : 달걍 형태의 이미지입니다.
&type=shark : 상어 이빨 형태의 이미지입니다.
&type=slice : 잘린듯한, 직각삼각형의 이미지입니다.
&type=rect : 완전 사각형 이미지입니다.
&type=soft : 주변이 조금 둥근 사각형 이미지입니다. 다른 깃허브를 꾸밀때 사용하는 프로젝트들과 어울려 사용하기 좋은 모서리를 가집니다.
&type=rounded : 주변이 둥근 이미지입니다.
계속해서 추가중입니다.
섹션 (이미지 반전))
§ion=header : (default)
§ion=footer : 상하 반전되서 보여줍니다.
기타 등등
&height : 이미지 높이
&text : 이미지 위에 띄울 텍스트
&textBackground : 텍스트 주변 배경 (텍스트를 강조할 수 있습니다.)
&animation : 텍스트 애니메이션 효과들입니다. 목록
&textBackground : 텍스트 주변 배경 (텍스트를 강조할 수 있습니다.)
&fontColor : 텍스트 색
&fontSize : 택스트 크기
&fontAlign : 텍스트 X 위치
&fontAlignY : 텍스트 Y 위치
자세한 기능 설명들은 README에 적혀있습니다.
사실 이 API는 깃허브 프로필만 꾸밀수 있는게 아닌, 레포지터리 README 타이틀 이미지를 간단하게 작성하려 할때나 웹 서비스에서도 사용이 가능하다는 장점도 있습니다.
처음에는 정말 간단한 기능 들(텍스트, 색, 크기 조절) 밖에 없었을때는 큰 반응이 없었지만, 특히 애니메이션 기능을 추가 하면서 스타 수나 포크 수가 늘어난 것 같습니다.
확실히 간단한 애니메이션이라도 들어가면서 동적 이미지라는 것을 각인시켜주는 도움을 준 것 같습니다.
정말 고맙게도 다양한 분들이 사용을 해주시고 관련 블로그 포스팅 까지 해주신걸 발견하면 정말 행복합니다. 하하
앞으로도 여러 기능들을 지속해서 추가할 예정이고 혹시 이 글을 보시고 추가하고 싶은 기능이나 색들이 있으시다면 레포에 이슈, PR 날려주시면 매우 감사합니다.
끝으로 깃허브 프로필로 사용하기에 다른 좋은 기타 기능들입니다.
- GitHub-README-stats : 총 커밋, PR, 스타 등을 보여주는 그래프입니다.
- GitHub-Profile-README-generator : 어떤 내용을 채워야 할지 막막할때 가이드해줍니다.
- Github-Activity-README : 최근 활동을 보여줄 수 있습니다.
틀린 내용이 있다면 지적해 주시고,
더 좋은 방법이나 생각을 공유해주세요.
