블로그에 TIL, 릴리스, 뮤지엄, 도구, 리서치 섹션 추가하기

비트가 어떻게 보이는지 확인해 보세요:

위 세 개는 2025년 12월 30일 아카이브 페이지에서 가져온 것입니다.

비트는 배지가 달린 작은 인라인 링크로, 홈페이지·검색·아카이브 페이지 등 사이트 곳곳의 콘텐츠 타임라인 뷰에 자연스럽게 녹아듭니다.

현재 비트의 유형은 다섯 가지입니다:

• 릴리스(Releases)는 제가 운영하는 다양한 오픈소스 프로젝트의 GitHub 릴리스로, GitHub Actions로 생성된 JSON 파일에서 가져옵니다.
• TIL은 제 TIL 블로그의 포스트로, 해당 사이트를 구동하는 Datasette 인스턴스에 JSON과 HTTP를 활용한 SQL 쿼리를 날려 가져옵니다.
• 뮤지엄(Museums)은 제 niche-museums.com 블로그의 새 포스트로, 커스텀 JSON 피드에서 가져옵니다.
• 도구(Tools)는 제 tools.simonwillison.net 사이트에 바이브 코딩(vibe-coded)으로 만들어 올린 HTML·JavaScript 도구들로, HTML 도구 제작에 유용한 패턴에서 자세히 다루고 있습니다.
• 리서치(Research)는 AI가 생성한 리서치 프로젝트들로, simonw/research 저장소에 호스팅되어 있으며 Claude Code, Codex 같은 비동기 코딩 에이전트를 활용한 코드 리서치 프로젝트에서 소개한 바 있습니다.

이처럼 다섯 가지 커스텀 통합을 구현해 데이터를 모두 끌어왔습니다. 다행히 이런 통합 작업은 코딩 에이전트가 정말 잘하는 영역입니다. 핵심 기능 대부분을 다른 일을 병행하면서도 단 하루 오전 만에 완성했습니다.

리서치 프로젝트는 별도의 구조화된 피드가 없었지만, 그건 문제가 되지 않았습니다. Claude Code에 모든 프로젝트가 나열된 마크다운 README 원문 링크를 넘겼더니 파서 정규식을 뚝딱 만들어냈거든요. 소스와 목적지 모두 제가 직접 관리하기 때문에, 외부 소스였다면 너무 위험했을 다소 취약한 방식도 충분히 감수할 수 있었습니다.

Claude는 자칫 지루해질 수 있는 UI 통합 작업도 모두 처리해 줬습니다. 새 콘텐츠가 사이트의 모든 페이지 유형에서 제대로 표시되고, 패싯 검색 엔진에서도 올바르게 동작하도록 챙겨줬습니다.

Claude 아티팩트로 프로토타이핑하기

사실 비트의 초기 컨셉은 Claude Code가 아닌 일반 Claude에서 프로토타입을 만들었습니다. 요즘 Claude가 GitHub의 공개 저장소를 직접 클론할 수 있다는 점을 활용했는데요. 시작은 이렇게 했습니다:

Clone simonw/simonwillisonblog and tell me about the models and views

그리고 브레인스토밍을 이어가던 중 이렇게 말했습니다:

use the templates and CSS in this repo to create a new artifact with all HTML and CSS inline that shows me my homepage with some of those inline content types mixed in

몇 차례 다듬은 끝에 이 아티팩트 목업이 완성됐고, 컨셉이 충분히 가능성 있다는 확신이 서서 본격 구현을 웹용 Claude Code에 넘겼습니다.

이후 빌드 과정이 궁금하시다면, 핵심 기능을 구현한 Beats #592와 뮤지엄 콘텐츠 유형을 추가한 Add Museums Beat importer #595 PR을 살펴보시면 좋습니다.

현재 제 블로그의 장문 아티클만 보고 계십니다. 모든 포스트를 받아보시려면 /atom/everything/을 구독하거나, 다른 구독 옵션을 확인해 보세요.