사이드프로젝트 slecs

깃허브 프로필을 터미널 테마로 전면 개편한 과정

목차

프로필 README 갈아엎은 이유

오랜만에 깃허브 프로필 들어가봤더니 예전에 대충 박아둔 자기소개랑 깨진 뱃지 몇 개가 다였음. 방문자가 와도 내가 뭘 하는 사람인지, 뭘 만들어왔는지 30초 안에 파악이 안 되는 구조였음. 한 번 갈아엎기로 결정.

목표는 두 가지로 잡음.

  • 첫 인상에서 정체성 전달: 어떤 스택을 쓰고 어떤 결과물을 만드는지 즉시 보이게
  • 프로젝트 쇼케이스: 그동안 작업한 것들을 카드 형태로 노출

터미널 테마로 간 이유

처음엔 흔한 그라데이션 헤더 이미지로 갈까 했는데, 다른 프로필이랑 다 비슷해 보여서 차별화가 안 됨. 결국 검정 배경 + 모노스페이스 + 프롬프트 기호 조합으로 결정. 내가 매일 보는 화면 그대로 옮긴 셈.

영역 이전 이후
헤더 한 줄 자기소개 ASCII 배너 + 프롬프트 라인
스택 뱃지 나열 카테고리별 그룹 + 사용 빈도
프로젝트 링크 텍스트 카드형 미리보기 + 한 줄 설명
통계 없음 다크 테마 통계 위젯
$ whoami
> backend engineer · payments · 이커머스
$ ls ~/projects
> partner-settlement/  shorts-pipeline/  retro-blog/

이 부분 손볼 때 의외로 시간이 오래 걸렸음. SVG 가운데 정렬이 깃허브 마크다운 렌더러에서 자꾸 깨져서 결국 <div align="center">로 감싸는 정공법 사용. picture 태그로 라이트/다크 모드 분기까지 넣었더니 그제야 의도한 화면이 나옴.

막혔던 지점

  • 이모지 폭 차이: 모노스페이스 흉내 내려고 정렬 맞췄는데 이모지마다 셀 폭이 달라서 줄이 어긋남. 결과적으로 이모지는 헤더 한 줄에만 쓰고 본문은 텍스트만 둠
  • 통계 위젯 캐시: 테마 바꿔도 한참 이전 색이 잡혀 있음. URL에 &cache_seconds=1800 박아서 갱신 주기 강제
  • 프로젝트 카드 비율: 썸네일 1280×640 으로 통일하니 카드가 두 개씩 배치됐을 때 안 깨짐

회고

README 하나 다듬는 게 별 거 아닐 줄 알았는데, "이 사람 뭐 하는지 한눈에 보이게" 라는 기준 하나 잡고 끝까지 끌고 가니 의외로 디테일 작업이 많았음. 특히 카드 썸네일 톤을 터미널 배경색이랑 맞추는 게 만족도가 컸음.

다음에 손볼 거: 기여 그래프 위젯 색상 커스텀, 핀 프로젝트 자동 갱신 워크플로 추가.

댓글 0

첫 댓글 달아줘.