개인 사이트를 proof-of-work 허브로 리빌드

문제

내 사이트를 6년 만에 다시 열었더니, 첫 화면이 기술 스택 로고 그리드였다. React, Node, 그 옆에 몇 개 더. 방문자가 보는 건 "이 사람이 만져본 도구 목록"이 전부였고, 정작 내가 어떻게 판단하고 무엇을 끝까지 밀어붙이는 사람인지는 한 줄도 없었다. 누가 고치라고 한 사람은 없었다. 그냥 이대로 둘 수 없어서, 주말에 통째로 갈아엎기로 했다.

문제는 분명했다. 일반 이력서는 항목 나열이라 입체적이지 못하고, 시간순 블로그는 "이번 달은 안 썼네" 하는 운영 부담이 누적된다. 둘 다 답이 아니었다.

의사결정

먼저 쉬워 보이는 길부터 지웠다. 스택 그리드를 더 키우는 방향은 채용 담당자가 10초 안에 강점을 못 읽으니 탈락. Bruno Simon 같은 풀-인터랙티브 3D 사이트는 만들면 화려하지만 내 미니멀 톤과 충돌하고 운영 비용이 너무 컸다. 시간순 블로그는 안 쓰면 죄책감이 쌓이는 구조라 또 6년 방치될 게 뻔했다. 화려한 선택지를 일부러 버리고, 오래 굴러갈 구조를 택했다.

남은 답은 Case Study Hub와 Digital Garden을 합치는 것이었다. 이력서 항목은 그대로 두되, 그 위에 /cases(일하는 방식의 기록), /notes(자라는 노트), /logs(작은 작업 기록)를 얹었다. 인터랙티브 톤은 3D까지 가지 않는 "Living Site" 레벨로 선을 그었다 — 미니멀 베이스에 키보드 단축키·검색·테마 토글 같은 정보 인터랙션만. 화려함이 아니라, 누가 안 봐도 콘텐츠만 쌓으면 알아서 자라는 사이트를 원했다.

산출물

주말에 시작해서 끝까지 밀어붙인 결과는 이렇게 남았다.

• React 19 + Vite 8 + MDX 파이프라인.
• react-router-dom v7 기반 13개 라우트 + 404 fallback.
• 콘텐츠는 src/content/*.mdx + *.json으로 분리 — 데이터만 추가하면 페이지가 확장된다. 다음 글을 쓸 때 코드를 건드릴 필요가 없게 만든 게 핵심이었다.
• GitHub Pages SPA fallback (public/404.html redirect 패턴) 적용.

임팩트

	이전	이후
콘텐츠 추가	코드 수정	파일 1개 추가
페이지 수	1 (단일 SPA)	13 (라우팅)
콘텐츠 형식	단일 페이지 텍스트	MDX (글 + 컴포넌트 임베드)
차별화	Traditional Portfolio	Case + Garden 하이브리드

남은 보강 포인트

릴리스로 끝낸 게 아니라, 다음 칸을 이미 비워뒀다.

• 글 성숙도 시각화(🌱→🌿→🌳)를 단순 뱃지 이상으로 — 시간이 지나며 색이 진해지는 식.
• Cmd+K 글로벌 검색·키보드 단축키(다음 Phase).
• 다크/세피아 테마 토글(다음 Phase).

누가 시키지 않은 일을, 주말에 혼자 정의하고 끝까지 출시까지 밀어붙였다. 이 사이트 자체가 내가 일하는 방식의 증거다.