마음에 드는 게 없어서 제가 직접 만들었습니다
확장 프로그램 바로 가기
깃허브 바로 가기
개요
깃허브 잔디 색상을 내 입맛에 맞게 커스텀하고 싶은데, 정해진 색상으로 변경할 수는 있어도 커스텀까지 가능한 게 없었다. (못 찾았을 수도) 무엇보다 몇 개 없는 확장 프로그램 전부 디자인이 마음에 들지 않아서 그냥 만들어 버렸다. 딱히 디자인이 중요하지 않긴 하지만 이왕 쓰는 건데 깔끔하고 예쁘면 좋으니까....
사용 방법
- GitHub Grass Color에서
Chrome에 추가버튼 클릭 - 본인 GitHub 대시보드로 이동
- 퍼즐 모양(chrome extension) 클릭 → GitHub Grass Color 확장 프로그램 선택
- 원하는 테마 적용 후 적용하기 버튼 클릭
과정
1. 디자인
당장 사용하고 싶었던 거라 디자인에 많은 시간을 들이고 싶지 않았다.
간단하면서도 심플한 디자인을 뽑아내는 건 Figma Make가 잘하던 게 생각나서 바로 맡겨 봤다.
깃허브의 잔디 색상을 변경해 주는 extension을 구현하고 있습니다.
현재 디자인은 사진과 같으며, 추가하고 싶은 기능은 아래와 같습니다:
1. 사용자가 모든 색상 커스텀 가능 (0-4까지)
2. 두 번째는 테마 프리셋을 지금과 같이 2-3가지 더 제공하고 싶습니다.
또한, 디자인을 기본적으로만 구현해 둔 탓에 굉장히 촌스럽습니다.
이걸 현대적이고 세련된 디자인으로 변경해 주세요.아래는 실제로 내가 프롬프트와 함께 Figma Make한테 보여 준 사진이다. (ㅋㅋ ㅠ)
근데 Figma Make가 아래처럼 생성해 주었다. 깔끔하고 아주 보기 좋아졌다.
2. 개발
개발도 요즘 핫한 클로드 코드를 사용해 진행했다. 요구 사항을 초기에 잘 작성해야 했는데, 워낙 기능이 적은 편이고 디자인까지 나와 있었기 때문에 명확하게 요구하지 않았는데도 꽤나 잘 구현해 줬다.
별도로 스택을 기재하지 않았더니 React와 css를 기반으로 구현했길래, 어떻게 구현했나 확인할 겸 TailwindCSS로 스타일 부분만 변경해 주었다. 그리고 대충 코드를 다듬은 정도.
작은 단위의 사이드 프로젝트를 개발할 때 바이브 코딩이 정말 최고긴 한 것 같다. 기존에는 어떻게 구현해야 할지 방법을 찾는 시간만 몇 시간을 들여야 했을 텐데, 사전 공부 없이도 5분 만에 완성했다. 물론 직접 수정한 시간은 스타일만 변경했기 때문에 포함하지 않았다.
커스텀도 아주 잘 반영되는 것을 확인할 수 있다. 기존 확장 프로그램을 사용해 있는 테마에 만족하거나, 깃허브가 가끔 특별한 날에 자체 색상을 변경해 주는 것을 즐기며 지냈는데 이제 그러지 않아도 된다.... 아주 좋다.
3. 배포
사실 개발보다 배포에 시간을 더 많이 들인 것 같다. chrome extension에 개발한 확장 프로그램을 올리려면 몇 가지 작성할 사항들과 승인까지 기다리는 시간이 필요했는데, 이 부분에서 조금 시간을 썼다. 그래도 일요일에 신청한 승인이 월요일에 완료되었으니 처리 속도는 생각보다 빠른 편이다. 간단한 확장 프로그램이라 그럴지도.
넣을 사진이 없어 대충 만들어 신청했는데, 공개되고 나니 생각보다 초라해서 놀랐다. 로고도 Figma Make한테 만들어 달라고 한 건데 묘하게 마음에 안 들어서 어떻게 변경할지 고민 중이다.
마무리하며
첫 확장 프로그램 배포가 완료되고 오늘 글을 작성하려고 보는데 벌써 다운로드한 사람이 있었다. 지역을 한국으로 설정하고 배포했는데도 외국에서 다운로드가 처음으로 되었더라. 지역 불문하고 누군가 내가 만든 것을 설치해 사용했다는 것에 즐거움을 느꼈다. (이 맛이지)
만약 깃허브 잔디를 입맛에 맞게 커스텀하고 싶었다면 꼭 사용해 보셨으면 한다. (이 글을 읽는 누구든)
그리고 만일 피드백이 있다면 언제든... 추가했으면 하는 게 있다면 언제든... 수정점이 보인다면 언제든...
리뷰든 벨로그 댓글이든 메일이든 깃허브 이슈든 어떤 것이어도 좋으니 피드백 부탁드립니다....
이런 생각은 어케 하는 거죠..👍