블로그

아티클 2026년 5월 12일 5분 소요

채팅으로 코딩한다는 것

텔레그램 메시지 한 줄로 빌드를 트리거하고, 음성으로 커밋 메시지를 부르고, 출퇴근길에 PR을 머지한다. 채팅 인터페이스가 만드는 새로운 개발 워크플로우에 대한 컬럼.

아티클 2026년 5월 12일 15분 소요

한 사람이 4역할을 부린다는 것 — 역할 기반 LLM 분업이 자리 잡는 풍경

CrewAI, AutoGen, MetaGPT, Claude Code subagents까지 — LLM에게 역할을 주고 분업시키는 패턴이 자리 잡고 있다. 픽셀 아트 타이쿤 게임의 4역할 specialist 구조를 사례로 두고, 권한·핸드오프·실패 케이스까지 따라가는 긴 컬럼.

column multi-agent claude-code specialist automation

아티클 2026년 5월 9일 4분 소요

도구가 도구를 운영한다

텔레그램 봇이 블로그 글을 발행하고, 블로그 글은 idea-cycles 데모를 소개하고, idea-cycles는 playground-ops가 관리하는 스케줄로 돈다. 1인 개발자의 도구들이 서로를 운영하는 풍경에 대한 짧은 컬럼.

column automation meta 1인운영

아티클 2026년 5월 9일 5분 소요

매일 자동화는 abort 경로 없이 거짓말이다

자동화의 가장 큰 함정은 실패가 조용한 것이다. 알림이 안 오면 잘 도는 게 아니라 죽었는데 모르는 거다. abort 경로와 다층 알림이 없는 자동화는 노이즈 생성기에 불과하다.

column automation observability reliability

아티클 2026년 5월 8일 6분 소요

코드를 짤 것인가, 프롬프트를 짤 것인가

idea-cycles의 6단계 행동 규칙은 전부 한 마크다운 파일에 있다. 코드를 짜고 싶은 충동을 참았던 게 결과적으로 옳았다. 그 이유와 — 코드와 프롬프트의 경계는 어디인가.

column llm-pipeline design automation

아티클 2026년 5월 8일 5분 소요

가드레일이 코드보다 먼저다 — 1인 운영의 메타 레이어

두 개의 회고 시리즈를 마치고 보니 결론이 같았다. 1인 운영에서 결과의 품질을 결정하는 건 만든 코드가 아니라, 그 위에 깐 가드레일·룰·메모리 같은 메타 레이어다. 이 컬럼은 그 일반론이다.

column automation 1인운영 llm-pipeline

회고 2026년 5월 8일 4분 소요

아이디어 사이클 회고 #5 — 다시 만든다면 이렇게 했다

토큰·린트·QA·Picker 메모리를 다 알고 처음부터 다시 만든다면 어디를 다르게 했을까. 시리즈를 닫으며 남기는 짧은 회고.

automation claude-code llm-pipeline retrospective

회고 2026년 5월 8일 5분 소요

아이디어 사이클 회고 #4 — Picker가 가장 중요하다는 걸 30편쯤 만들고 알았다

5축 점수와 Stage 0의 recent_critiques 메모리. 무엇을 만드냐가 어떻게 만드냐를 항상 이긴다.

automation claude-code llm-pipeline evaluation memory

회고 2026년 5월 8일 5분 소요

아이디어 사이클 회고 #3 — Stage 5에 Playwright MCP를 박은 이유, abort 없이 매일은 못 굴린다

LLM이 만든 페이지를 그대로 push하면 망가진 사이클이 누적된다. 커밋 전에 실제 브라우저로 띄워 검증하고, 실패하면 abort + 텔레그램 3계층 알림으로 끊어내는 구조.

automation claude-code playwright mcp qa llm-pipeline

회고 2026년 5월 8일 4분 소요

아이디어 사이클 회고 #2 — 토큰만 쓴다는 룰 하나로 디자인이 살아남았다

매일 다른 LLM 출력 30+편이 한 사이트처럼 보이게 만든 단 하나의 가드레일 — public/tokens.css와 npm run lint:design.

automation claude-code design-tokens css llm-pipeline

회고 2026년 5월 8일 4분 소요

아이디어 사이클 회고 #1 — 매일 한 편, 30분짜리 데모를 자동으로 만든다는 것

Next.js 16 사이트에 매일 05:00 KST마다 새 자체완결 웹 데모를 한 편씩 자동 배포하는 6단계 LLM 파이프라인 — 시리즈 입구.

automation claude-code nextjs llm-pipeline

회고 2026년 5월 8일 6분 소요

텔레그램 봇 개발 일지 — 부록: 이 봇이 운영하는 프로젝트들

시리즈 1~7편이 다룬 봇이 실제로 무엇을 부리고 있는지의 갤러리. daily-feed부터 playground-ops까지 6개 프로젝트를 한 줄 요약과 짧은 소개로 정리한다.

telegram claude-code showcase

회고 2026년 5월 8일 3분 소요

텔레그램 봇 개발 일지 #7 — 회고

6일에 걸쳐 만든 텔레그램 봇을 일주일 써본 마무리 회고. 가장 효과적이었던 결정, 다시 만든다면 다르게 했을 부분, 시리즈를 닫으며 정리한 원칙들.

telegram claude-code retrospective

회고 2026년 5월 8일 4분 소요

텔레그램 봇 개발 일지 #6 — 로컬 dashboard와 /restart

봇이 지금 무엇을 하고 있는지 브라우저로 실시간 확인하는 로컬 dashboard, 슬래시 명령으로 자가 재시작하는 /restart, 그리고 LAN 노출 시 토큰 가드까지 — 6일차의 옵저버빌리티 정리.

telegram claude-code observability

회고 2026년 5월 8일 3분 소요

텔레그램 봇 개발 일지 #5 — 라이브 메시지 디테일

긴 Claude 응답을 텔레그램 한 메시지에 점진적으로 갱신해 보여주는 라이브 메시지 패턴. editMessage throttle, 4096자 분할, 도구 호출 라인 truncate, 마무리 핑까지 다듬은 5일차 기록.

telegram claude-code ux

회고 2026년 5월 8일 3분 소요

텔레그램 봇 개발 일지 #4 — Hub-and-Spoke와 specialist subagent

메인 채팅을 conversational hub로 두고, 프로젝트 작업은 specialist subagent로 dispatch했다. hub turn이 빠르게 끝나야 사용자 입력이 막히지 않는다 — 그 원칙에서 출발한 패턴.

telegram claude-code subagent

회고 2026년 5월 8일 3분 소요

텔레그램 봇 개발 일지 #3 — 멀티 프로젝트 토픽 라우팅

한 봇으로 여러 프로젝트를 다루기 위해 텔레그램 supergroup의 forum topic 단위로 작업 디렉토리를 분리했다. 토픽 이름을 폴더명에 매핑해 자동 라우팅하고, /cd로 임시 override하는 구조.

telegram claude-code supergroup

회고 2026년 5월 8일 4분 소요

텔레그램 봇 개발 일지 #2 — 음성·이미지·MCP 통합

1편에 이어 모달리티 확장. 음성 메시지를 Whisper로 받고, 이미지 첨부를 inbox 디렉토리로 떨어뜨려 Read하게 하고, Playwright/blog MCP를 옵트인으로 붙인 2일차 기록.

telegram claude-code mcp whisper

회고 2026년 5월 8일 3분 소요

텔레그램 봇 개발 일지 #1 — Claude Code를 텔레그램으로 부리기

데스크톱 앞을 떠나도 Claude Code를 쓰고 싶었다. python-telegram-bot으로 1인 화이트리스트 봇을 만들고, 메시지를 그대로 Claude에 전달해 응답을 라이브로 흘려보내는 1일차 기록.

telegram claude-code python

TIL 2026년 3월 22일 5분 소요

Mermaid 렌더링 안 되는 문제 — allowDangerousHtml 설정

Supabase 블로그 게시글의 Mermaid 다이어그램이 렌더링되지 않는 문제를 발견했다. remarkRehype의 allowDangerousHtml 설정이 false로 되어 있어 HTML 노드가 제거되고 있었다.

mermaid remark rehype markdown troubleshooting

회고 2026년 3월 22일 13분 소요

블로그 개발일지 #7 — ISR과 Edge Function으로 실시간 배포 구현

Supabase에 게시글을 올리면 자동으로 사이트에 반영되는 시스템을 만들었다. Webhook payload 커스터마이즈 제약을 Edge Function으로 우회해서, 전체 재배포 없이 변경된 페이지만 재생성한다.

vercel isr supabase edge-function webhook astro

회고 2026년 3월 22일 21분 소요

블로그 개발일지 #6 — rehype-pretty-code로 코드 블록 업그레이드

기본 Shiki 하이라이팅에서 rehype-pretty-code로 전환하여 라인 번호, 라인 하이라이트, diff 표시, 복사 버튼, 언어 라벨까지 모든 기능을 갖춘 코드 블록을 구현한 과정. 정규식 패턴 설계부터 CSS 변수 기반 스타일링, 클라이언트 스크립트까지 — 3시간의 업그레이드 기록.

astro rehype-pretty-code shiki code-highlighting ux

회고 2026년 3월 21일 5분 소요

모바일 청첩장 만들기 (5) - 마무리 기능과 회고

방명록, 페이드인 애니메이션, 갤러리 버그 수정까지. 결혼식 한 달 전에 마무리한 모바일 청첩장 프로젝트의 최종 회고. 약 3개월 반의 개발 과정에서 배운 것들을 정리한다.

react guestbook animation side-project wedding-invitation retrospective

회고 2026년 3월 21일 4분 소요

모바일 청첩장 만들기 (4) - 피드백 반영과 버그 수정

친구 커플과 가족에게 청첩장을 보여주고 피드백을 받았다. 폰트, 여백, 카카오맵 좌표 등 사소하지만 중요한 수정사항들을 빠르게 반영한 과정을 회고한다.

user-feedback bug-fix mobile-ux kakao-map wedding-invitation side-project

회고 2026년 3월 21일 4분 소요

모바일 청첩장 만들기 (3) - 이미지 최적화와 성능 개선

모바일 청첩장은 사진이 대부분이다. JPEG를 WebP로 변환하고, LQIP 패턴을 적용하고, 폰트를 선택하는 과정에서 모바일 웹 성능 최적화를 경험했다.

webp lqip image-optimization web-performance mobile-first wedding-invitation

회고 2026년 3월 21일 5분 소요

모바일 청첩장 만들기 (2) - 데이터 분리와 UX 개선

MVP를 만든 다음날부터 구조 개선에 들어갔다. 하드코딩된 데이터를 JSON으로 분리하고, 스와이프와 스크롤 스냅으로 모바일 UX를 끌어올린 과정을 회고한다.

react typescript scroll-snap mobile-ux wedding-invitation side-project

회고 2026년 3월 21일 4분 소요

모바일 청첩장 만들기 (1) - 하루 만에 MVP 완성하기

React + TypeScript + Vite로 친구의 모바일 청첩장을 만들어주기로 했다. 프로젝트 세팅부터 핵심 기능 구현, 컴포넌트 분리까지 하루 만에 MVP를 완성한 과정을 회고한다.

react typescript vite tailwindcss mobile-first wedding-invitation side-project

TIL 2026년 3월 20일 7분 소요

정규식 앵커와 멀티라인 텍스트 — GFM Alert 렌더링 버그 수정기

블로그의 GFM Alert가 렌더링되지 않던 문제를 해결했다. 원인은 remarkCallout 플러그인의 정규식 패턴이 ^ 와 $ 앵커를 사용해 멀티라인 텍스트 노드를 매칭하지 못했기 때문이다. s 플래그를 추가해 dotAll 모드를 활성화하는 것으로 해결했다.

astro markdown regex gfm-alerts remark

인프라 2026년 3월 20일 10분 소요

ECS 사이드카 패턴으로 Loki에 로그 전송하기 — FireLens, Fluent Bit, Alloy 비교

AWS ECS에서 사이드카 패턴으로 Grafana Loki에 로그를 보내는 3가지 방법을 비교한다. FireLens + Fluent Bit 직접 전송, Fluent Bit → Alloy 파이프라인, EC2 전용 Alloy 단독 사이드카까지 — 각 방식의 구조, 설정, 트레이드오프를 정리한다.

aws ecs loki fluent-bit firelens grafana logging

회고 2026년 3월 20일 10분 소요