이 사이트 — 개인 브랜딩 웹사이트

지금 보고 있는 이 사이트입니다. 프로필, 포트폴리오, 글을 흩어두지 않고 한곳에서 정리하고 싶었고, 외부 플랫폼에 얹는 대신 직접 만들었습니다. 글의 구조와 배포 흐름을 내가 원하는 대로 다듬을 수 있다는 점이 직접 만든 이유의 전부입니다.

구조

글은 마크다운으로 쓰고, Keystatic CMS를 에디터로 얹었습니다. 빌드할 때 콘텐츠를 정적 스냅샷으로 변환해 두기 때문에, 배포된 사이트는 파일시스템을 읽지 않고 스냅샷만으로 화면을 그립니다. 호스팅은 Cloudflare Workers, 이미지는 R2에 올립니다.

공개 전에 점검할 수 있도록 draft/preview 흐름을 두었고, 방문 통계는 GA4로 보되 관리자와 프리뷰 경로는 집계에서 제외했습니다. 내가 들여다보는 화면이 숫자에 섞이지 않도록 한 작은 장치입니다.

생각의 지도

메뉴에 Second Brain이라는 칸을 하나 두었습니다. HR·AX·코칭을 오가며 옵시디언에 쌓아 온 메모와 글을, 주제들이 어떻게 이어지는지 3D 그래프로 볼 수 있게 한 페이지입니다. 지금은 851개가량의 노드가 supports·extends·contradicts 같은 관계로 연결되어 있고, 상단 검색창에서 의미 기반 검색도 됩니다.

그래프 자체는 따로 만든 봇이 옵시디언 vault에서 빌드해 Cloud Run에 올려 둔 것이고, 사이트는 그 결과를 <iframe>으로 끌어와 보여 줍니다. 그래프 데이터를 사이트가 직접 들고 있지는 않아서, 글을 다루는 쪽과 생각을 잇는 쪽을 분리해 둘 수 있었습니다. 양피지 톤으로 맞춘 화면 안에서 이 그래프 창만 어두운 색으로 남겨 둔 것도 일부러 그대로 두었습니다.

봇이 내려가 있거나 주소를 비워 두면 "생각의 지도는 곧 공개됩니다" 안내로 대신 보이도록 해, 페이지가 비어 보이지 않게 했습니다.

마무리

화려한 기능을 넣기보다, 글을 쓰고 고치고 올리는 흐름이 매끄럽게 이어지는 데 신경을 썼습니다. 앞으로도 필요에 맞춰 조금씩 손볼 생각입니다.