GitHub 프로필 README에 포트폴리오 뱃지 추가

GitHub 프로필 README를 또 손댔다. 이번 커밋의 표면적 이유는 포트폴리오 도메인(slecs15.cafe24.com) 뱃지 추가인데, 한 번 파일을 열면 항상 다른 것도 같이 고치게 된다.

프로필은 생각보다 자주 봐야 한다. 방치하면 오래된 기술 스택, 끊긴 링크, 이미 접은 프로젝트가 조용히 쌓인다. 그 상태에서 누군가 방문하면 첫인상은 그게 된다. 채용 담당자나 협업 상대가 GitHub 프로필에 머무는 시간이 실제로 5초 안팎이다. 링크드인보다 GitHub를 먼저 열어보는 경우가 생각보다 많고, 스크롤 없이 보이는 영역 안에서 "이 사람이 어떤 개발자인가"를 판단한다. 그래서 이력서보다 GitHub 프로필을 더 신경 쓰게 됐고, 지금도 계속 다듬는 중이다.

구조 개선에서 신경 쓴 것들

이번 작업에서 가장 오래 고민한 건 정보 밀도였다. 너무 많으면 산만하고, 너무 없으면 밋밋하다. 그 균형점이 생각보다 까다롭다.

작업 방향은 크게 세 줄기였다.

• 불필요한 섹션 제거. 예전에 "관심사"나 "목표" 같은 항목을 넣었던 적이 있는데, 읽는 사람 입장에서 판단에 도움이 되지 않는다. 없애는 게 낫다.
• 스캔 가능성(scannability) 향상. 사람은 텍스트를 읽는 게 아니라 스캔한다. 섹션 구조가 명확하고 시선 흐름이 자연스러워야 한다. 굵은 글씨, 표, 뱃지가 시선 고정점 역할을 해준다.
• 수치 기반 성과 표현. "성능을 개선했다"는 아무 정보가 없다. "17.8s → 0.12s (145배)"처럼 써야 읽는 사람이 뭔가를 가져갈 수 있다. 추상적 표현은 최대한 걷어냈다.

연락 경로는 LinkedIn과 포트폴리오 링크를 상단으로 올렸다. 스크롤 없이 보이는 첫 화면 안에 연락 수단이 있어야 한다. 아무리 내용이 좋아도 링크를 찾아야 한다면 그냥 나가는 사람이 많다.

README 작성할 때 기준으로 삼는 체크리스트를 정리하면 이렇다.

실제 경력과 기술 스택의 정확도를 높인 것도 이번 작업의 핵심 중 하나였다. 쓰지 않은 지 2년이 넘은 기술이 "주요 스택"에 올라가 있으면 면접이나 협업 초기에 오해가 생긴다. 스택 목록은 지금 실제로 쓰는 것, 혹은 최근 프로젝트에서 비중 있게 다룬 것만 남겼다.

<details> 토글과 뱃지 배치

GitHub 렌더러가 HTML 서브셋을 지원한다는 건 알고 있었는데 예전엔 잘 활용을 못 했다. 써보니까 꽤 유용하다. 경력 상세, 사이드 프로젝트 목록처럼 관심 있는 사람만 보면 되는 내용을 접어두면 첫 화면이 훨씬 깔끔해진다.

기본 구조는 단순하다.

<details>
<summary>경력 상세 보기</summary>

...상세 내용...

</details>

주의할 점이 있다. <summary> 닫는 태그 뒤에 반드시 빈 줄을 한 줄 넣어야 한다. 안 그러면 GitHub 렌더러가 내부 마크다운을 날것의 텍스트로 출력해버린다. 처음에 이게 왜 안 되나 한참 봤는데 빈 줄 하나 문제였음.

<details>
<summary>경력 상세 보기</summary>

<!-- 이 빈 줄이 없으면 아래 마크다운 렌더링 안 됨 -->

- 항목 A
- 항목 B

</details>

뱃지 배치도 같은 맥락이다. shields.io 기반 뱃지를 너무 많이 박으면 스티커 판이 된다. 핵심 기술 스택 5-7개로 제한하고, 나머지는 텍스트 목록으로 정리하는 게 훨씬 보기 낫다. 뱃지는 "이것들이 저의 핵심입니다"를 전달하는 도구지, 아는 기술 전부 나열하는 공간이 아니다.

포트폴리오 뱃지는 shields.io 커스텀 뱃지로 만들었다.

[![Portfolio](https://img.shields.io/badge/Portfolio-slecs15.cafe24.com-blue?style=flat-square)](https://slecs15.cafe24.com)

style=flat-square를 선호한다. 기본 flat보다 모서리가 각져서 뱃지가 여러 개 붙어 있을 때 전체적으로 더 조밀하고 정렬된 느낌이 난다. flat은 약간 둥근 느낌이라 뱃지가 많아지면 좀 붕 뜬다. 색상도 신경 쓰는 편인데, 기술 스택 뱃지는 각 브랜드 컬러가 자연스럽고, 포트폴리오나 연락처 링크처럼 커스텀으로 만드는 뱃지는 원색보다 neutral한 톤이 전체 밸런스를 살려준다.

트레이드오프도 있다. shields.io 뱃지는 외부 서비스에 의존하기 때문에 shields.io 장애나 속도 저하가 있으면 뱃지 이미지가 안 뜨거나 깨진다. 정적 SVG를 직접 레포에 넣는 방법도 있지만, 유지보수 부담이 생겨서 아직은 외부 서비스를 그냥 쓰고 있다. 뱃지가 잠깐 안 뜨는 게 허용 가능한 수준이라면 shields.io 쪽이 편리함 면에서 압도적이다.

이번 작업 이후 생각

프로필을 손보는 작업은 처음엔 좀 귀찮게 느껴지는데, 해두고 나면 생각보다 기분이 좋다. 뭔가 제자리를 찾은 느낌이랄까. 코드 작업은 당장 임팩트가 눈에 안 보일 때가 많은데, 프로필은 끝내고 나서 결과가 바로 보인다는 점이 다르다.

배운 점 하나는, 한 번 잘 만들어두고 방치하는 것보다 주기적으로 짧게 점검하는 루틴이 훨씬 낫다는 거다. 한 달에 한 번, 5분만 열어봐도 링크 깨진 거, 오래된 스택, 이미 비공개 처리한 레포 링크 같은 게 눈에 들어온다. 그냥 쌓아두면 나중에 한꺼번에 고치는 게 더 번거롭다. 작은 트리거가 있으면 이런 정비를 미루지 않게 된다는 것도 이번에 다시 실감했다. 뱃지 하나 추가하는 커밋이었는데, 그 핑계로 나머지도 같이 다듬을 수 있었다.