아이콘이 있는 단계별 Mermaid 다이어그램 pele-animate
Pele 다이어그램 렌더러의 비공식 오픈소스 애드온입니다. Mermaid 코드를 작성자가 정한 순서대로 독자가 한 단계씩 따라갈 수 있는 다이어그램으로 바꿔 주며, 노드에 아이콘도 넣을 수 있습니다.
$ cat focus.md
- AI 지식 관리
- 자동화
- 에이전트 준비도
지금 다루는 주제
보안 제품 온보딩 사이트 DoveRunner Lab
고객과 사내 구성원 모두가 콘텐츠 보안이 실제로 동작하는 모습을 직접 확인하는 공개 개발자 사이트입니다. 실시간 DRM·워터마크 인스펙터가 붙은 레퍼런스 플레이어와 짧은 튜토리얼 코스로 구성했고, Claude Code로 만들어 lab.doverunner.com에서 운영 중입니다.
HyperFrames와 Claude로 만드는 튜토리얼 영상
DoveRunner 제품 튜토리얼 영상을 코드로 다시 만들고 있습니다. HyperFrames 컴포지션, 실제 콘솔 캡처, 합성 내레이션과 자막을 Claude와 함께 작성하고 관리해서, UI나 문서가 바뀌면 다시 촬영하지 않고 다시 렌더링하면 됩니다.
이 블로그가 만들어지는 과정
$ ./ingest.sh | tee wiki.log
이곳의 모든 글은 백지에서 시작하지 않습니다. 읽은 것이 발행된 글이 되기까지의 과정입니다.
- 01수집글, 문서, 메모가 들어오면 태그를 달고 중복을 확인한 뒤 기록합니다.
- 02개인 위키수집한 자료들이 서로 연결되며 지식 베이스로 계속 쌓입니다.
- 03소재 발굴여러 주제를 잇는 통찰, 이정표, 값진 교훈이 보이면 글감으로 표시합니다.
- 04초고 → 검토 → 발행제 문체로 쓰고 편집 검토를 거친 뒤 이곳에 발행합니다.
여기까지의 과정은 비공개입니다. 다듬고 검토를 마친 글만 발행됩니다.
최근 글
Kit 무료 플랜으로 개인 블로그에 뉴스레터를 붙인 과정
RSS밖에 없던 개인 블로그에 Kit 무료 플랜으로 이메일 구독을 붙였습니다. 서비스를 고른 기준, 확인 메일이 스팸함으로 간 문제의 원인과 해결, 무료 플랜에서 막힌 부분, 그리고 Kit API와 Cloudflare Workers로 새 글 초안을 자동으로 만든 과정을 정리했습니다.
모바일에서 읽히지 않던 문서 다이어그램을 Mermaid에서 Pele로 바꾼 과정
화면이 좁으면 통째로 줄어들던 문서 속 Mermaid 다이어그램 84개를 Pele로 바꿨습니다. Claude Code로 후보를 검증하고 다크 모드 색상 문제를 CSS로 푼 과정을 375px 캡처와 함께 정리했습니다.
200만 단어 위키에 가벼운 로컬 검색을 붙인 과정
위키 원문이 200만 단어를 넘자 인덱스 파일을 통째로 읽는 방식이 한계에 다가왔습니다. 모델 용량이 큰 도구를 제외하고 SQLite와 정적 임베딩으로 하이브리드 검색을 만든 과정과, 에이전트가 사용법을 몰라도 이를 쓰게 만든 방법을 정리했습니다.
새 글을 이메일로 받아보세요
AI 기반 지식 관리와 에이전트 친화적인 기술 문서에 관한 글을 2주에 한 번쯤 보내드립니다.
스팸은 보내지 않습니다. 언제든 구독을 해지할 수 있습니다.