아이디어 사이클 회고 #1 — 매일 한 편, 30분짜리 데모를 자동으로 만든다는 것
결론부터
idea-cycles는 매일 새벽 5시(KST)에 LLM 파이프라인 한 번을 돌려서 자체완결 ~30분짜리 웹 데모 하나를 만들고 Vercel로 배포하는 Next.js 16 사이트다. 핵심은 6단계 — Tech Scout → Ideator → Picker → Implementer → QA Tester → Reviewer. 매일 다른 기술, 매일 다른 카테고리, 그러나 같은 디자인 토큰을 쓰는 30+개의 데모가 한 사이트에 누적된다.
라이브: https://idea-cycles.vercel.app
이 시리즈는 그 파이프라인을 굴리면서 배운 것들의 회고다. 1편은 입구 — "왜 만들었나"와 6단계의 큰 그림.
왜 시작했나
웹/AI 쪽엔 매주 새 브라우저 API와 새 라이브러리가 쏟아진다. View Transitions, Anchor Positioning, Transformers.js, Web-LLM, MediaPipe — 매번 "오 재밌네" 하고 북마크만 쌓이고 손은 안 가는 상태가 길었다.
규칙을 하나 정했다. 무료로 쓸 수 있는 새 기술을 하루에 하나씩 골라서, 30분짜리 자체완결 데모를 만든다. 단, 손으로 매일 만들 자신이 없어서 LLM 파이프라인에 맡긴다.
"30분짜리"가 핵심 제약이다. 1-2분 안에 이해되면서도 레벨/콘텐츠/진행감으로 30분쯤 머물 수 있어야 한다. 한 화면짜리 토이는 통과시키지 않는다.
6단계 파이프라인
Windows Task Scheduler가 매일 05:00 KST에 scripts/run-cycle.ps1을 호출한다. 그 스크립트는 claude CLI를 headless 모드로 띄우고, 단일 프롬프트(scripts/cycle-prompt.md) 하나로 6개 역할을 순차 수행시킨다.
| 단계 | 역할 | 산출물 |
|---|---|---|
| 1 | Tech Scout | 무료 신기술 후보 2-3개 (WebSearch로 수집) |
| 2 | Ideator | 후보로 만들 수 있는 productivity / learning-tool 아이디어 5개 |
| 3 | Picker | 5축 점수로 1개 선정 (engagement / buildable / originality / tech_leverage / category_novelty) |
| 4 | Implementer | public/cycles/<YYYY-MM-DD>-<slug>/ 아래 단일 페이지 데모 |
| 5 | QA Tester | Playwright MCP로 실제 페이지 띄워 클릭·콘솔·모바일 검증 |
| 6 | Reviewer | README에 비평 + data/cycles.json 갱신 + 커밋·푸시·텔레그램 알림 |
각 단계는 [STAGE_START] / [STAGE_END] 마커를 stdout에 찍고, PS 래퍼가 stream-json을 파싱해 scripts/logs/<ts>.stages.log로 따로 떨군다. 실패한 사이클은 커밋되지 않고 텔레그램으로 알림만 온다.
# 수동 실행 — 같은 흐름을 지금 돌려보기
& 'D:\playground\idea-cycles\scripts\run-cycle.ps1'단일 진실원: cycle-prompt.md
6단계의 행동 규칙은 전부 scripts/cycle-prompt.md 한 파일에 있다. 코드가 아니라 프롬프트가 단일 진실원이다. 이 파일을 고치면 다음날 새벽 5시부터 동작이 바뀐다.
처음엔 단계별로 코드를 짜고 싶은 충동이 컸지만, LLM 파이프라인은 분기와 판단이 많아서 코드보다 자연어 사양이 훨씬 안정적이었다. 코드는 PS 래퍼와 디자인 린트(
npm run lint:design)에만 남겼다.
데이터 쪽은 이렇게 흐른다 — Stage 1/2/3은 각 단계 끝에 fenced JSON(json scout / json ideas / json picker)을 강제로 emit하고, 다음 단계가 그걸 읽는다. Stage 4의 결과물은 public/cycles/...에 떨어지고, Stage 6이 마지막에 data/cycles.json에 한 줄을 append하면 인덱스 페이지(app/page.tsx)가 다음 빌드부터 카드를 보여준다.
다음 편 예고
다음 편에선 가드레일 중 첫 번째 — public/tokens.css 하나로 30개 데모를 시각적으로 묶은 토큰 룰과, hex literal·raw px font-size를 커밋 전에 잡아내는 npm run lint:design이 어떻게 매일 다른 모델 출력을 한 사이트처럼 보이게 만들었는지 풀어본다.