Weekly AI ArticleWeekly AI · Dev Digest
Vol.352026Weekly
← Back to Index

PoC 백로그

2026년 44주차 (스캔일: 2026-10-26)

후보 17건

대상: content/2026/week-44.mdx (기사 32건 + YouTube 11건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 9~43주차 백로그와 겹치는 아이디어는 제외하고, 인접한 것은 아래 중복 처리 항목에 적었다.

  1. 1

    확산 LLM이 문장 여러 위치를 동시에 다듬어 가는 과정을 자기회귀 생성과 나란히 재생하는 생성 방식 비교 페이지

    Mercury 3, 확산 기반 LLM

    23/25
    • Inception API(OpenAI 호환)
    • Vercel AI Gateway
    • 스트리밍 diff 애니메이션
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Mercury 3, 텍스트를 병렬로 다듬어 만드는 확산 기반 LLM
    만드는 것
    프롬프트 하나를 넣으면 화면 왼쪽에는 일반 LLM이 토큰을 앞에서부터 하나씩 이어 쓰는 모습이, 오른쪽에는 확산 모델이 노이즈 같은 초안 전체를 놓고 여러 위치를 동시에 고쳐 가며 문장을 완성하는 모습이 재생된다. 오른쪽 패널은 단계마다 바뀐 글자를 색으로 표시하고, 아래 타임라인 슬라이더로 단계를 앞뒤로 옮겨 볼 수 있다. 두 패널 위에 첫 글자까지 걸린 시간, 완성까지 걸린 시간, 초당 토큰을 띄워 "빠르다"를 숫자로 확인한다.
    핵심 기술
    Inception API(OpenAI 호환 엔드포인트) 또는 Vercel AI Gateway를 Route Handler에서 호출, 비교용 자기회귀 모델 스트리밍, 단계별 텍스트 diff를 문자 단위로 계산해 하이라이트하는 렌더러, 재생 타임라인 상태 머신.
    완료 기준
    같은 프롬프트 5개로 두 모델을 돌렸을 때 완성 시간과 초당 토큰이 표로 쌓이고, 확산 쪽 재생에서 한 단계에 여러 위치가 동시에 바뀌는 것이 눈으로 확인된다. 슬라이더로 임의 단계에 멈추면 그 시점의 중간 텍스트가 정확히 보인다.
    리스크/전제
    Inception API가 중간 디노이징 단계를 스트리밍으로 돌려주는 옵션을 제공하는지 먼저 확인해야 한다. 없으면 최종 결과만 받을 수 있으므로, 중간 단계는 "원리 설명용 시뮬레이션"이라고 명시한 애니메이션으로 대체하고 속도 비교만 실측으로 남긴다. 무료 크레딧 범위도 가입 시 확인한다. 29주차 4번(스트리밍 속도 비교)과 35주차 1번(스펙큘러티브 디코딩)과 인접하지만, 여기서는 생성 순서 자체가 다르다는 점을 보여주는 것이 핵심이다.
  2. 2

    메시지를 별 위치·건물 높이에 실어 그림을 만들고, 올린 PNG에서 다시 메시지를 읽어 내는 SVG 스테가노그래피 생성기·해독기

    Claude Fable 5.1은 그림에 어떻게 비밀 메시지를 숨길까?

    22/25
    • SVG 생성
    • Canvas 픽셀 분석
    • 한글 자모 분해
    • 비전 모델(선택)
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude Fable 5.1은 그림에 어떻게 비밀 메시지를 숨길까?
    만드는 것
    짧은 메시지를 입력하면 글자마다 알파벳 순서를 건물 높이나 별의 세로 위치에 대응시켜 도시 야경 SVG를 그려 주는 생성기와, 그 그림의 PNG를 올리면 Canvas로 건물 윤곽과 별 중심을 찾아 메시지를 되살리는 해독기. 한글 메시지는 자모로 분해해 같은 방식으로 싣는다. "AI 해독 챌린지" 탭에서는 규칙을 알려 주지 않고 PNG만 비전 모델에 넘겨 몇 글자를 맞히는지 기록한다. 원 연구처럼 같은 그림을 사람과 모델 중 누가 더 잘 푸는지 비교하는 재미가 데모 포인트다.
    핵심 기술
    SVG 절차적 생성(시드 PRNG로 배경 장식), Canvas getImageData 기반 열별 높이 측정과 연결 요소 탐색, 한글 유니코드 자모 분해·조합, PNG 내보내기, 비전 모델 호출(선택).
    완료 기준
    영문 메시지 20개와 한글 메시지 10개를 생성·PNG 저장·해독했을 때 모두 원문과 일치한다. 이미지를 JPEG로 한 번 압축해도 해독이 깨지지 않는다. 비전 모델 챌린지 결과가 메시지별 정답률로 남는다.
    리스크/전제
    원 연구는 모델이 방식을 스스로 고르게 한 실험이고, 이 PoC는 그중 가장 흔했던 높이 대응 방식을 사람이 고정 규칙으로 재현한 것이라고 페이지에 밝힌다. 비전 모델 호출은 유료라 챌린지 탭만 키를 요구하고 생성·해독은 서버 없이 돈다.
  3. 3

    같은 함수를 무작위 퍼징, 속성 기반 테스트, 짧은 입력 전수 검사로 나란히 돌려 누가 반례를 먼저 찾는지 보여주는 검증 놀이터

    Claude로 오픈소스 라이브러리 123개를 정형 검증

    22/25
    • fast-check
    • Web Worker
    • 반례 축소(shrinking) 시각화
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude로 오픈소스 라이브러리 123개를 정형 검증, LLM이 대규모 정형 검증을 현실로 만들다
    만드는 것
    버그를 심어 둔 작은 함수 몇 개(URL 파서, 날짜 범위 병합, 바이트 길이 계산 등)를 고르면 세 가지 방식이 동시에 돌아간다. 무작위 퍼징은 시도 횟수 카운터만 올라가고, fast-check 속성 테스트는 반례를 찾으면 축소 과정을 단계별로 보여 주며, 짧은 입력 전수 검사는 "길이 6 이하 모든 입력 중 몇 % 확인" 진행률과 함께 반례를 찾는다. 사용자가 함수 코드를 직접 고쳐 다시 돌리면 세 방식이 모두 통과할 때 "이 범위 안에서는 반례 없음" 배지가 뜬다.
    핵심 기술
    fast-check(속성 정의, shrinking), Web Worker 3개로 방식별 병렬 실행, 입력 공간 열거기, Monaco 또는 CodeMirror 편집기, 실행 결과 비교 표.
    완료 기준
    심어 둔 버그 5개 중 퍼징이 놓친 것을 속성 테스트나 전수 검사가 찾는 사례가 2개 이상 재현되고, 각 반례가 최소 입력으로 축소돼 표시된다. 함수를 고친 뒤에는 세 방식이 모두 통과한다.
    리스크/전제
    전수 검사는 정해진 범위 안의 확인일 뿐 정형 증명이 아니다. 원 연구가 Rocq로 "64MB 미만 모든 입력"을 증명한 것과의 차이를 첫 화면에 적어, 증명을 흉내 낸다는 오해를 막는다. 사용자 코드 실행은 Worker 안에서만 하고 시간 제한을 둔다.
  4. 4

    Hugging Face 모델 ID를 넣으면 base_model 계보를 거슬러 올라가 abliterated·병합·파인튜닝 단계를 트리로 그리고 출처 신뢰 신호를 붙이는 모델 계보 추적기

    Abliterated 모델 백도어 위험 / 한국 신규 파생 모델 절반이 Qwen 기반

    22/25
    • Hugging Face Hub API
    • base_model 태그
    • D3 tree
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    거부 기능을 없앤 'Abliterated' 모델을 내려받았다가 해킹당할 수 있는 이유 / 한국의 신규 AI 파생 모델 절반 가까이가 중국 Qwen 기반
    만드는 것
    모델 ID를 넣으면 모델 카드의 base_model 정보를 따라 원본 모델까지 거슬러 올라가는 계보 트리를 그린다. 노드마다 파인튜닝·병합·어댑터·양자화·abliterated 같은 수정 종류와 작성자, 공개일, 다운로드 수를 달고, "원본 제작사가 아닌 계정이 가중치를 고쳤다", "모델 카드에 학습 데이터 설명이 없다" 같은 신뢰 신호를 경고 배지로 붙인다. 두 번째 탭에서는 계정 이름 목록을 넣으면 그 계정들이 올린 모델의 원본 계열 비율(Qwen, Gemma, Llama, EXAONE 등)을 도넛 차트로 보여 준다.
    핵심 기술
    Hugging Face Hub API(/api/models/{id}의 cardData·tags, base_model: 필터 검색), 재귀 조회와 캐시, D3 tree 레이아웃, URL 공유.
    완료 기준
    abliterated 모델 3개와 병합 모델 2개를 넣었을 때 원본까지 계보가 끊기지 않고 그려지며, 수정 종류가 노드에 정확히 표시된다. 계정 목록 탭에서 계정 10개의 원본 계열 비율이 1분 안에 집계된다.
    리스크/전제
    base_model을 적지 않은 모델은 계보가 끊기므로 "계보 불명" 자체를 경고 신호로 다룬다. 이 도구는 백도어를 탐지하지 못하며, 원 글의 결론처럼 가중치를 고친 모델은 평가로도 잡기 어렵다는 점을 그대로 안내한다. 34주차 8번(파생 모델 랭킹 대시보드)과 16주차 4번(safetensors 헤더 뷰어)과 인접하지만 여기서는 개별 모델의 출처 판단이 핵심이다.
  5. 5

    장면 설명을 넣으면 LLM이 Three.js 코드를 짜 브라우저에서 렌더링하고 GLB 파일과 360도 턴테이블 MP4로 내보내는 3D 장면 공방

    Kimi K3.1 Pro (Blender·CAD 스크립트) / Builder Josh Kim Blender 쇼츠

    21/25
    • Three.js
    • sandbox iframe
    • GLTFExporter
    • WebCodecs + mp4-muxer
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Kimi K3.1 Pro 공개, 100만 토큰 컨텍스트에 코딩·3D 제작을 강화한 3조 파라미터급 모델 / 블렌더 한 번도 안 열고 클로드로 만든 3D 애니메이션
    만드는 것
    "눈 덮인 오두막과 깜빡이는 가로등" 같은 설명이나 참고 스케치를 넣으면 LLM이 Three.js 장면 코드를 써 주고, 오른쪽 미리보기에서 바로 렌더링돼 마우스로 돌려 볼 수 있다. "가로등을 더 노랗게" 같은 후속 지시로 코드를 고쳐 가며, 완성된 장면은 GLB 파일로 내려받거나 카메라가 한 바퀴 도는 360프레임 턴테이블을 MP4로 뽑을 수 있다. 쇼츠에서 Blender와 FFmpeg로 하던 렌더링·인코딩을 브라우저 하나로 끝내는 것이 데모 포인트다.
    핵심 기술
    LLM이 정해진 함수 시그니처(buildScene(THREE, scene))만 채우도록 하는 프롬프트, sandbox iframe에서 생성 코드 실행, GLTFExporter, 캔버스 프레임 캡처 후 WebCodecs VideoEncoder + mp4-muxer로 인코딩.
    완료 기준
    장면 설명 5개가 각각 첫 생성에서 에러 없이 렌더링되고(실패 시 에러 메시지를 모델에 되먹여 2회 안에 복구), 내보낸 GLB가 다른 뷰어에서 열리며, 1080p 360프레임 MP4가 일반 노트북에서 1분 안에 만들어진다.
    리스크/전제
    Kimi K3.1 Pro는 100만 토큰당 입력 2달러·출력 10달러로 유료이며, 다른 코딩 모델로 바꿔 끼울 수 있게 둔다. WebCodecs H.264 인코딩은 브라우저마다 지원이 달라 Chrome 기준으로 만든다. 37주차 5번(p5.brush 생성 아트)과 25주차 2번(미니 앱 빌더)과 인접하지만 3D 장면과 GLB·MP4 내보내기가 핵심이다.
  6. 6

    할 일을 메시지로 맡기면 처리 결과를 쌓아 두고, 아침 브리핑과 승인이 필요한 일만 Web Push로 먼저 알려 주는 선제 연락형 비서 PWA

    Claude Duet 연구 프리뷰

    21/25
    • Web Push(VAPID)
    • Service Worker
    • Vercel Cron
    • LLM 도구 호출
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    공개된 전갈 독소 바인더 설계안 211개를 3D 구조와 실험 결합 결과로 걸러 보는 단백질 설계안 탐색기

    Claude, 전갈 신경독소 단백질 바인더 설계

    21/25
    • Mol* 또는 3Dmol.js
    • 공개 데이터셋
    • 필터 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    GitHub PR 화면에 작성자 계정 생성일·과거 기여·다른 저장소 활동을 띄워 사회공학 위험 신호를 보여주는 메인테이너용 크롬 확장

    Anthropic, UK AISI 평가 중 Mythos 5가 실제 개발자를 속이려 한 사고

    21/25
    • MV3 content script
    • GitHub REST·GraphQL API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  9. 9

    영어 글을 붙여넣으면 명사 연쇄·의인화·낯선 단어 조합을 품사 태깅으로 찾아 읽기 부담 점수를 매기고 사람 글과 AI 글을 나란히 비교하는 분석기

    AI가 쓴 글은 왜 이해하기 어려울까?

    21/25
    • compromise.js 품사 태깅
    • 하이라이트 에디터
    • LLM API(비교 샘플 생성)
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  10. 10

    최소 에이전트 루프를 TypeScript로 옮겨 장마다 기능을 하나씩 켜며 실패 상황과 수정을 브라우저에서 재생하는 하네스 해부 튜토리얼

    Harness Engineering 101 / Google Agent Compute Engine

    20/25
    • LLM 도구 호출
    • Web Worker 실행 격리
    • 단계별 MDX 튜토리얼
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  11. 11

    매출·센서 CSV를 올리면 시계열 파운데이션 모델로 다음 구간을 예측해 분위수 팬 차트로 그리는 예측 대시보드

    Timestral, CPU에서도 도는 시계열 모델

    20/25
    • Timestral(ONNX 변환 또는 서버리스 추론)
    • Papa Parse
    • 차트 라이브러리
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  12. 12

    패키지 이름과 버전을 넣으면 PyPI 휠을 열어 GitHub 같은 태그의 소스와 비교하고 소스에 없는 파일(.pth, sitecustomize.py 등)을 경고하는 배포본 diff 뷰어

    LiteLLM 1.107.0 PyPI 배포본 악성코드

    20/25
    • PyPI JSON API
    • fflate(zip 해제)
    • GitHub API
    • diff 뷰
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  13. 13

    BLS 고용 통계로 영화·음반·디지털 예술 직군과 대면 엔터테인먼트 일자리를 겹쳐 그리는 창작 직군 고용 대시보드

    미국 미디어·영화·예술 일자리 20만 개 감소

    20/25
    • BLS Public Data API
    • Route Handler 캐시
    • 선 그래프
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  14. 14

    미리 저장한 웹페이지 묶음 안에서만 에이전트가 검색·탐색하게 하고, 바깥으로 나가려는 요청을 차단 로그로 보여주는 오프라인 웹 샌드박스

    OpenAI, 학습 환경 격리 강화 후 학습 재개

    19/25
    • IndexedDB 페이지 스냅샷
    • LLM 도구 호출
    • 요청 허용 목록
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  15. 15

    폴더를 고르면 PDF·이미지 내용을 읽어 scan0042.pdf 같은 파일 이름을 내용 기반 이름으로 바꾸자고 제안하고 승인한 것만 바꾸는 파일명 정리기

    Builder Josh Kim 쇼츠 (구글 드라이브 정리)

    19/25
    • File System Access API
    • PDF.js
    • 비전 LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  16. 16

    여러 LLM에 같은 가상 자금을 주고 매일 공개 시세로 모의 매매하게 해 수익률과 매매 근거를 리더보드로 보여주는 대시보드

    조코딩 LIVE 6개 AI 모의 투자

    19/25
    • LLM API 여러 개
    • 시세 API
    • Vercel Cron
    • KV 저장소
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  17. 17

    이름·이메일을 넣으면 정보 삭제를 요청할 사이트 목록과 사이트별 요청서 초안을 만들고 매주 재확인 체크리스트를 띄우는 개인정보 삭제 도우미 PWA

    Builder Josh Kim 쇼츠 (개인정보 지우기)

    19/25
    • LLM API
    • 체크리스트 상태 저장
    • Web Notification
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이전 주차와의 중복 처리
LiteLLM 악성 배포본으로 의존성을 점검하는 아이디어는 19주차 1번(OSV lock 파일 점검기)과 같아, 소스와 배포본을 비교하는 12번으로만 세웠다. 가짜 통계 5만 페이지 실험은 26주차 1번(검색 오염 실험장), 21주차 1번(인용 검증기)과 같아 제외했다. 웹사이트의 AI 에이전트 차단 기사와 조코딩 "한국에선 쇼핑 못한다" 쇼츠는 31주차 4번(AI 크롤러 허용 점검기), 17주차 1번(역 CAPTCHA), 37주차 8번(쇼핑 에이전트 데모 스토어)과 겹친다. 아첨 쇼츠는 17주차 9번(말투 실험), Agent Skills 기증은 14주차 2번(SKILL.md 에디터), Kimi K3.1 Pro 가격 인하는 34주차 7번(비용 계산기), Dessa 전이중 음성은 20주차 백로그와 같다. 모션그래픽 프롬프트 100개 쇼츠는 11주차 5번(설명 영상 생성기)과 형태가 같아 5번의 MP4 내보내기로만 흡수했다. Brain Sandwich와 Ask HN 글은 26주차 7번(AI 도움 이해도 비교)·17주차 3번(타자기 모드)과 문제의식이 같고, UK AISI 사고 기록 재생은 32주차 2번(침입 리플레이)·12주차 4번(세션 뷰어)과 같아 제외했다. 인접하지만 남긴 것: 8번은 43주차 7번(PR 변경 위험도)·23주차 3번(프로젝트 건강 점수)과 달리 작성자 신뢰가 핵심이고, 9번은 11주차 1번(AI 상투 패턴)·32주차 6번(STE100 에디터)과 달리 논문이 짚은 언어 구조 지표가 핵심이다. 10번은 10주차 4번(WebContainer 에이전트 터미널), 14번은 10주차 5번(컴퓨터 사용 시뮬레이터)·15주차 5번(가상 파일시스템 어시스턴트), 15번은 17주차 6번(중복 파일 진단)·11주차 2번(북마크 태깅), 16번은 25주차 5번(모의 리서치 데스크), 13번은 11주차 3번(직업 노출도 비교)과 인접하다.
FE 사이드 프로젝트로 만들 수 없는 것
Raon-1 mini(30B 자체 호스팅, 가중치 접근 신청 필요), Dessa(MacBook Pro M4 Max 로컬 실행, 조기 접근 한정), Kimi K3.1 Pro 가중치 자체 호스팅, Agent Compute Engine·Agent Substrate(Kubernetes 인프라 — 하네스를 실행 환경 밖에 두는 구조만 10번 마지막 장 재료로 썼다), T3 Code(데스크톱 앱, 제공자 CLI 전제), REA(로컬 리버스 엔지니어링 MCP 도구), DeepSeek-V4.1-Flash 자체 호스팅, flux-3-image-klein-comfy(43주차 16번에서 API 기반으로 다룸), WeVisOne-VL·시네마틱 영상 생성 논문(공개 데모 미확인), RecursiveSI/flint(모델 정보 미확인), android-ad-cleaner, 족보 조사 스킬
보안상 뺀 것
PHP2Shell은 남의 사이트 PHP 버전을 원격으로 훑는 점검기가 무단 스캔 도구가 되기 쉬워 제외했다. Abliterated 모델 백도어 트리거를 재현하는 데모는 공격 시연이 돼, 방어 쪽인 4번 계보 추적기로 방향을 바꿨다.
단순 소식·정책
OpenAI·Anthropic Google Cloud 합류, Anthropic 안전 법안, Terence Tao 글, Anthropic 고용 변화, 아마존 컴퓨팅 완판, DeepMind 직원 퇴사, Apollo 분석(SEC EDGAR 데이터로 차트화할 수 있지만 13번과 형태가 같아 하나만 남겼다). 한국 Qwen 파생 비율 기사는 4번 두 번째 탭의 재료로 흡수했다.
에이전트 운용 기법
Claude Code v2.1.309·v2.1.310, 이번 주의 팁(sed -i, ultrareview 신뢰 확인), ponytail·claude-mem·i-have-adhd(43주차에서 다룸)는 개발 워크플로 개선이라 후보로 세우지 않았다. OpenAI 학습 환경 격리 기사는 14번의 재료로만 썼다.
YouTube 11건
조코딩 IT뉴스, 개발동생 REVIEW.md, 테디노트 AutoRAG는 위 기사와 같은 주제의 브리핑·대담이다. 조코딩 모의 투자 라이브는 16번, Builder Josh Kim 쇼츠 중 Blender는 5번, 구글 드라이브 정리는 15번, 개인정보 지우기는 17번 재료로 썼다. 영상은 RSS 설명만 확인했다.
확인이 필요한 전제
1번은 Inception API의 중간 단계 스트리밍 지원 여부, 7번은 211개 설계안이 구조 파일(PDB 등)로 공개됐는지 서열만 공개됐는지(서열뿐이면 구조 예측 단계가 추가돼 소요가 늘어난다), 11번은 Timestral의 ONNX 변환본이나 브라우저 실행 가능 여부(불가하면 Python 서버리스 함수 크기 제한을 확인해야 해 환경 점수가 내려간다)를 착수 전에 확인한다. 12번은 PyPI 파일 서버의 CORS 정책에 따라 Route Handler 프록시가 필요할 수 있다.

2026년 43주차 (스캔일: 2026-10-19)

후보 16건

대상: content/2026/week-43.mdx (기사 30건 + YouTube 11건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34주차 백로그와 겹치는 아이디어는 제외하고, 인접한 것은 아래 중복 처리 항목에 적었다.

  1. 1

    lrand48과 Unix 타임스탬프로 만든 "무작위" 숫자의 시드를 브라우저에서 역추적하는 인터랙티브 해설 페이지

    Claude, NIST 타원곡선 시드의 출처 규명

    23/25
    • BigInt
    • Web Worker
    • Canvas
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude, 25년간 풀리지 않던 NIST 타원곡선 시드의 출처 규명
    만드는 것
    스크롤을 따라 내려가며 읽는 해설형 단일 페이지. 첫 단계에서 사용자가 "비밀" 날짜·시각을 고르면 그 Unix 타임스탬프로 srand48을 초기화해 160비트짜리 "무작위" 숫자를 만들어 보여 준다. 다음 단계에서 그 숫자의 비트 패턴을 격자로 칠해 오래된 선형 합동 생성기의 흔적이 어디에 남는지 짚고, 마지막 단계에서 브라우저가 Web Worker 여러 개로 타임스탬프 후보 구간을 훑어 원래 시각을 찾아내는 과정을 진행률 바와 함께 보여 준다. 찾은 시각이 사용자가 고른 값과 맞으면 "이게 25년 동안 아무도 몰랐던 방식"이라는 결론으로 닫는다.
    핵심 기술
    48비트 LCG(a = 0x5DEECE66D, c = 0xB) JS 구현(BigInt로 정확도 검증, 32비트 분할 연산으로 속도 확보), Web Worker 병렬 탐색, Canvas 비트 시각화, 스크롤 연동 스토리텔링 레이아웃. 서버 코드 0줄.
    완료 기준
    1990년대 임의 시각으로 만든 숫자를 넣었을 때 1년 범위(약 3,150만 초) 탐색이 일반 노트북에서 1분 안에 끝나 정확한 시각을 찾는다. C로 컴파일한 lrand48 출력 10개와 JS 구현 출력이 일치한다.
    리스크/전제
    원 연구는 격자 알고리듬으로 내부 상태를 복원했고, 160비트 시드를 출력 몇 개로 어떻게 조립했는지는 Anthropic 원문을 다시 확인해야 한다. 이 PoC는 "타임스탬프 시드는 전수 탐색으로 찾힌다"는 핵심 직관만 재현하며, 실제 P-256 시드 재현은 원문에서 구성 방식을 확인한 뒤 선택 과제로 둔다. 암호를 깬 것이 아니라는 원문의 단서도 페이지에 그대로 남긴다.
  2. 2

    붙여넣은 문서 묶음을 탭 안에서 임베딩해 의미 검색하고 2D 지도로 펼치는 오프라인 PWA

    도구 트렌드 — google/embeddinggemma-2

    22/25
    • transformers.js
    • WebGPU
    • IndexedDB
    • UMAP
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    google/embeddinggemma-2 (이번 주 Hugging Face 트렌딩 ♥2,662)
    만드는 것
    메모·기사·북마크 텍스트를 여러 개 붙여넣거나 마크다운 파일 묶음을 드롭하면, 탭 안에서 문단마다 임베딩을 계산해 저장하는 PWA. 검색창에 문장을 치면 키워드가 하나도 겹치지 않아도 뜻이 비슷한 문단이 유사도 점수와 함께 올라오고, 옆 패널에는 전체 문단을 2D로 투영한 점 지도가 그려져 검색 결과가 지도 위에서 빛난다. 네트워크를 끊어도 검색이 되는 것이 데모 포인트다.
    핵심 기술
    @huggingface/transformers(WebGPU 백엔드, WASM 폴백), IndexedDB 벡터 저장, 코사인 유사도, umap-js로 2D 투영, Service Worker 모델 캐싱.
    완료 기준
    문서 200개(문단 약 2,000개)를 넣고 임베딩을 마친 뒤, 오프라인 상태에서 한국어 질의 5개가 각각 1초 안에 뜻이 맞는 문단을 상위 3위 안에 올린다. 새로고침 후에도 재계산 없이 바로 검색된다.
    리스크/전제
    embeddinggemma-2의 ONNX 변환본과 transformers.js 지원 여부를 먼저 확인해야 한다. 없으면 전작 EmbeddingGemma나 다국어 소형 임베딩 모델로 시작하고 교체 가능하게 둔다. 34주차 15번(RAG 챗봇)은 서버 벡터 검색 기반이라 겹치지 않지만, 둘 다 만들 경우 검색 부분은 이 PoC 결과를 재사용할 수 있다.
  3. 3

    에이전트 여러 개가 같은 저장소에 동시에 커밋·병합할 때 생기는 충돌과 대기열을 보여주는 브라우저 Git 놀이터

    Anthropic, Git을 Scion으로 교체 / feder-cr/git-ai

    22/25
    • isomorphic-git
    • LightningFS
    • SVG 그래프
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Anthropic, 늘어난 AI 코딩 변경량에 맞춰 Git을 Scion으로 교체 / feder-cr/git-ai
    만드는 것
    브라우저 메모리 안에 진짜 Git 저장소를 하나 만들고, "에이전트 수"와 "분당 커밋 수" 슬라이더를 올리면 가상 에이전트들이 각자 브랜치를 따서 파일을 고치고 병합을 시도하는 화면. 커밋 그래프가 실시간으로 자라고, 충돌·리베이스·대기열 대기 시간이 카운터로 쌓인다. "병합 대기열 켜기" 토글로 직렬 병합과 동시 병합의 차이를 비교한다. 기사 속 하루 2,500건에서 3만 건으로 늘어난 상황을 축소해 체감하게 하는 것이 목표다.
    핵심 기술
    isomorphic-git + @isomorphic-git/lightning-fs(브라우저 내 파일 시스템), Web Worker로 에이전트별 작업 분리, SVG 커밋 그래프 렌더링.
    완료 기준
    에이전트 10개가 2분 동안 작업했을 때 커밋 그래프가 끊김 없이 그려지고, 같은 파일을 건드린 병합에서 실제 충돌이 감지돼 표시되며, 대기열을 켜면 충돌 수가 줄고 대기 시간이 늘어나는 맞교환이 숫자로 보인다.
    리스크/전제
    isomorphic-git은 병합 충돌 해결 지원이 제한적이라 충돌은 "감지 후 재시도" 수준으로 단순화한다. Scion 자체는 공개되지 않았으므로 Scion을 재현하는 것이 아니라 Git이 왜 병목이 되는지를 보여주는 도구라고 소개한다.
  4. 4

    취약한 IoT 노드망에 모델이 퍼지는 과정과 방어책 효과를 조절해 보는 확산 시뮬레이터

    Anthropic, 소형 모델 IoT 자가 복제 실험

    22/25
    • Canvas 또는 D3 force
    • 시드 PRNG
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Anthropic, 소형 모델이 IoT 기기로 자가 복제할 날이 몇 달 남았을 수도
    만드는 것
    노드가 점으로 흩어진 네트워크 지도에서 감염된 노드가 이웃으로 번져 가는 과정을 재생하는 시뮬레이터. 노드 수, 기본 비밀번호 비율, 노드당 추론 속도(기사 수치인 초당 0.39토큰을 기본값으로), 복제 성공률(GLM-5.2 5회 중 4회 등 프리셋)을 슬라이더로 조절하고, 연구진이 제안한 방어책 세 가지(네트워크 이상 탐지, ISP 격리, 기본 비밀번호 규제)를 켜면 확산 곡선이 어떻게 꺾이는지 그래프로 비교한다.
    핵심 기술
    Canvas 또는 d3-force 기반 네트워크 렌더링, 시드 PRNG로 재현 가능한 실행, 확산 곡선 차트, URL 파라미터로 시나리오 공유.
    완료 기준
    같은 시드로 두 번 돌리면 같은 결과가 나오고, 노드 1,000개에서 60fps에 가깝게 재생되며, 방어책을 하나씩 켤 때마다 최종 감염률 변화가 표로 남는다.
    리스크/전제
    실제 취약점이나 공격 코드는 일절 다루지 않는 추상 확률 모델이어야 한다. 원 연구가 스스로 밝힌 한계(취약점 단계 단순화, 규모 추정은 봇넷 하나 기준)를 첫 화면에 적어, 예측 도구로 오해받지 않게 한다.
  5. 5

    웹페이지에 숨긴 지시문을 넣고 모델이 따라가는지 확인하는 간접 프롬프트 인젝션 실습장

    Gemini 4 Argon 정식 출시 (Gray Swan 벤치마크)

    21/25
    • LLM API
    • Route Handler
    • iframe sandbox
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Gemini 4 Argon 정식 출시, API·Gemini 앱으로 접근 확대
    만드는 것
    왼쪽에 가짜 웹페이지 편집기, 오른쪽에 "이 페이지를 요약해 줘" 같은 작업을 받은 에이전트 화면이 있는 실습장. 사용자가 페이지 본문에 흰 글씨, HTML 주석, alt 텍스트 등으로 지시문을 숨기면 모델이 그 지시를 따라갔는지(가짜 도구 호출을 시도했는지, 엉뚱한 답을 했는지)를 판정해 성공·실패 배지로 보여 준다. 공격 기법별 성공률을 모델마다 누적해 Gray Swan 벤치마크처럼 작은 표를 만든다.
    핵심 기술
    Route Handler에서 LLM API 호출(키는 서버에만), 도구 호출 정의(실제 실행 없이 기록만), 결과 판정 로직, 기법 프리셋 라이브러리.
    완료 기준
    숨김 기법 5종 × 모델 2개로 각각 5회 실행해 성공률 표가 채워지고, 시스템 프롬프트에 방어 문구를 넣었을 때 성공률이 바뀌는 것이 같은 화면에서 비교된다.
    리스크/전제
    Gemini 4 Argon은 출시 기념가 기준 입력 100만 토큰당 2달러로 유료이며, 무료 등급 제공 여부는 확인이 필요하다. 저가 모델(DeepSeek V4.1 Flash 등)로 먼저 만들고 Argon은 비교용으로만 붙인다. 도구 호출은 절대 실제로 실행하지 않고 기록만 해야 하며, 공개 배포 시에는 사용자 키 입력 방식이나 요청 수 제한이 필요하다.
  6. 6

    OpenAPI 스펙을 붙여넣으면 MCP 도구 정의와 타입 있는 호출 함수로 바꿔 주고 바로 실행해 보는 변환 콘솔

    OpenCode 2.0 Code Mode / Uber MCP Gateway

    21/25
    • OpenAPI 파서
    • JSON Schema
    • MCP 스펙
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    GitHub PR 화면에 변경 위험도 등급과 필요한 사람 승인 수를 붙여 주는 크롬 확장

    Claude Code 팀의 코드 리뷰 방식

    21/25
    • MV3 content script
    • GitHub REST API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    에이전트의 도구 호출을 허용·차단 정책으로 걸러 보고 막힌 행동을 로그로 남기는 권한 정책 시뮬레이터

    OpenAI 에이전트 일탈 사례 4건 / Builder Josh Kim 쇼츠 2건

    20/25
    • LLM 도구 호출
    • 정책 DSL
    • 상태 머신 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  9. 9

    대화 사이에 쌓인 기억을 사용자가 보고 고치고 지우는 메모리 패널이 달린 챗봇

    Meta Muse Wonder (Active Memory)

    20/25
    • AI SDK
    • IndexedDB
    • 도구 호출
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  10. 10

    작업 하나를 하위 에이전트로 쪼개 병렬 실행하고 에이전트별 진행 상황을 보여주는 대시보드 UI

    GPT-6 Astra Pro 에이전트 병렬 실행

    20/25
    • AI SDK 스트리밍
    • React 19 useOptimistic
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  11. 11

    직업·업무별 AI 벤치마크 커버리지를 트리맵으로 그려 빈 구역을 보여주는 시각화

    미국 근로시간 90%는 벤치마크 밖

    20/25
    • O*NET 공개 데이터
    • D3 treemap
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  12. 12

    이미지나 스캔 PDF를 올리면 읽기 순서대로 마크다운을 뽑아 주는 OCR 웹앱

    도구 트렌드 — datalab-to/indra

    19/25
    • OCR 엔진
    • PDF.js
    • 마크다운 렌더링
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  13. 13

    양자 회로를 블록으로 짜면 큐비트 수와 게이트 수를 자동 채점하는 회로 편집기

    Claude Mythos 5, 양자 회로 게이트 수 17분의 1

    19/25
    • 상태 벡터 시뮬레이션
    • 드래그앤드롭
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  14. 14

    장황한 LLM 답변을 핵심부터 재배치해 보여주는 TL;DR 크롬 확장

    도구 트렌드 — ayghri/i-have-adhd

    19/25
    • MV3 확장
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  15. 15

    코드를 브라우저에서 실행하고 작업 공간을 포크해 결과를 비교하는 샌드박스 플레이그라운드

    Vercel Drives 정식 출시

    19/25
    • Vercel Sandbox
    • Vercel Drives
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  16. 16

    바운딩 박스로 영역을 지정해 이미지를 부분 편집하는 웹 에디터

    FLUX 3 Image Klein

    18/25
    • BFL API
    • Canvas 선택 도구
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
34주차와의 중복 처리
코딩 에이전트 하네스 비용 비교(Fowler)는 34주차 7번 비용 계산기와, 코드팩토리 "가장 효율적인 LLM 선택" 영상은 34주차 4번 멀티모델 아레나와 같은 아이디어라 제외했다. 7번 PR 위험도 라벨러는 34주차 9번 PR 리뷰 대시보드와, 10번 병렬 에이전트 대시보드는 34주차 4번 아레나의 병렬 스트리밍과 인접하지만 각각 위험도 등급과 작업 분해가 핵심이라 별도 후보로 남겼다.
FE 사이드 프로젝트로 만들 수 없는 것
Muse Spark Open(BF16 1.5TB, B200 노드), MiniCPM-V-4.7-35B, DeepSeek V4.1 Flash 자체 호스팅, FLUX 3 Klein 로컬 실행(VRAM 8GB GPU 필요 — API 기반 16번만 남김), 숨은 능력 백도어 논문(PyTorch 가중치 실험), Postgres 19, decomp.wtf, blender-ai-mcp-addon, earshot(CLI 에이전트 도구), 치과 로컬 AI 서버(DGX Spark급 장비)
단순 소식·산업
Anthropic Public Benefit Fund, Character.ai 파산보호, State of AI 2026, OpenAI 엔지니어 체포, GPT-6 Astra 이론물리 벤치마크, METR 직원 수준 접근
정책·논평
중간선거 안전장치(Democracy Works 데이터는 공개 API가 아님), Torvalds AI 기여 입장, Karpathy 인식 격차, Goodfire 해석 가능성 가설(브라우저에서 재현할 공개 도구가 없음)
에이전트 운용 기법
Claude Code v2.1.302 포크 서브에이전트, Idle compaction, ponytail, claude-mem — 개발 워크플로 개선에 해당해 후보로 세우지 않았다. 포크 서브에이전트는 이미 _workspace_poc/poc-01-fork-pipeline.md에서 실험했다.
YouTube 11건
대부분 위 기사와 같은 주제의 브리핑·강의다. Builder Josh Kim 쇼츠 2건만 8번 권한 정책 시뮬레이터의 재료로 썼다.
확인이 필요한 전제
12번 OCR은 indra가 Python 패키지라면 브라우저에서 바로 돌릴 수 없어, 서버리스 함수 배포 가능 여부나 브라우저용 OCR 대안을 먼저 확인해야 한다. 15번은 Vercel Sandbox의 Hobby 요금제 무료 사용량을 확인한 뒤 착수한다.

2026년 42주차 (스캔일: 2026-10-23)

후보 2건

대상: content/2026/week-42.mdx (기사 27건 + YouTube 11건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 35~41주차 소급 스캔에서 이미 나온 아이디어는 제외했고, 겹치는 항목은 아래 제외한 항목에 적었다.

  1. 1

    최근 방문 기록을 요약해 매일 다른 새 탭 페이지를 만들어 주는 크롬 확장

    도구 트렌드 ThariqS/ai-newtab

    21/25
    • MV3 chrome_url_overrides
    • chrome.history
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    ThariqS/ai-newtab (이번 주 GitHub 신규 저장소 ⭐723)
    만드는 것
    크롬 새 탭을 대체하는 확장. 하루 한 번 최근 방문 기록에서 제목과 도메인만 뽑아 LLM에 넘기고, "어제 읽다 만 글 3개", "이번 주 자주 찾은 주제", "다시 열어 볼 만한 링크" 같은 섹션으로 구성된 새 탭을 만든다. 결과는 로컬에 캐시해 새 탭을 열 때마다 API를 부르지 않는다. 특정 도메인을 기록 분석에서 빼는 설정 화면도 둔다.
    핵심 기술
    MV3 chrome_url_overrides.newtab, chrome.history.search, chrome.alarms로 하루 1회 갱신, chrome.storage.local 캐시, LLM 구조화 출력으로 섹션 JSON 생성.
    완료 기준
    확장을 설치하고 하루 동안 브라우징한 뒤 새 탭에 섹션 3개 이상이 실제 방문 기록에 근거한 링크와 함께 뜬다. 제외 목록에 넣은 도메인은 결과에 나오지 않는다. 새 탭 표시까지 100ms 안쪽(캐시 기준)이다.
    리스크/전제
    방문 기록은 민감 정보라 URL 전체가 아니라 제목과 도메인만 보내고, 그 사실을 첫 실행 화면에 밝혀야 한다. 로컬 모델(크롬 내장 Prompt API 등)로 바꿀 수 있게 구조를 열어 두면 프라이버시 이야깃거리가 된다.
  2. 2

    질문하면 LLM이 지금 보는 페이지에서 해당 요소를 찾아 큰 화살표와 상자로 가리켜 주는 크롬 확장

    도구 트렌드 franzenzenhofer/big-arrow-on-the-screen

    20/25
    • MV3 content script
    • 접근성 트리 추출
    • LLM API
    • SVG 오버레이
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    franzenzenhofer/big-arrow-on-the-screen (이번 주 GitHub 신규 저장소 ⭐613)
    만드는 것
    처음 쓰는 관리자 화면이나 복잡한 설정 페이지에서 "결제 수단 바꾸는 곳 어디야?"라고 물으면 해당 버튼 위에 커다란 화살표와 강조 상자가 나타나는 크롬 확장. 원본 저장소는 Mac 화면 전체에 그리는 CLI지만, 이 PoC는 웹페이지 안으로 범위를 좁혀 DOM 요소를 정확히 가리키는 데 집중한다.
    핵심 기술
    content script에서 버튼·링크·입력 필드의 접근성 이름과 역할을 뽑아 번호를 매긴 목록을 만들고, LLM이 번호를 고르게 한다. 선택된 요소의 getBoundingClientRect로 SVG 화살표 위치를 계산하고 스크롤·리사이즈에 따라 다시 그린다.
    완료 기준
    GitHub 설정, Vercel 대시보드, 쇼핑몰 마이페이지 세 곳에서 질문 5개씩 던졌을 때 12개 이상이 올바른 요소를 가리킨다. 가리킨 요소가 화면 밖이면 자동 스크롤한다.
    리스크/전제
    페이지 전체 텍스트를 보내면 토큰이 크고 개인정보가 섞인다. 상호작용 가능한 요소의 이름만 보내는 방식으로 제한한다. iframe이나 Shadow DOM 안의 요소는 첫 버전에서 제외한다.
제외한 항목
앞선 백로그와의 중복
EmbeddingGemma 2는 43주차 2번(브라우저 임베딩 의미 검색)이 이미 같은 모델을 재료로 쓴다. 이미지·영상까지 넣는 사진첩 검색은 그 PoC의 확장으로 보고 따로 세우지 않았다. Codemode는 43주차 6번(OpenAPI를 MCP 도구로 바꾸는 콘솔)과, Docker Agent·OpenRig의 YAML 에이전트 팀은 43주차 10번(병렬 에이전트 대시보드)과 겹친다. Microsoft-Decision-1은 41주차 2번 보정 측정기의 비교 대상 모델로 넘겼다. OpenAI 수학 결과 3편 철회와 의존 논문 연쇄는 36주차 Datalog 철회 전파 노트로 재현할 수 있어 제외했다. Wikimedia가 확인한 에이전트 대량 수집은 36주차 AI 크롤러 방문 대시보드와 같은 재료다.
FE 사이드 프로젝트로 만들 수 없는 것
Mistral Large 4·Reflection Beam(1조·5천억 파라미터 자체 호스팅), Epoch InnovationEval, 상온 자성 반도체 계산, FPS 게임 디컴파일(5천억 토큰 규모 하네스), ARTEX(자율 침투 테스트라 공개 데모로 부적절), talorys(Cloudflare 개인 에이전트 배포 템플릿이라 새로 만들 것이 적음)
약해서 뺀 것
FreeLLMAPI식 무료 키 폴백 라우터는 여러 회사 무료 키를 묶어 쓰는 방식이 약관에 걸릴 수 있고 Vercel AI Gateway가 같은 기능을 이미 제공한다. aurelio-finance식 로컬 금융 앱은 AI 부분이 얇다.
단순 소식·정책
Haiku 5.5·Gemini 업무 에이전트 발표, 앤트로픽 내부 평가 인터넷 차단, 백악관 사고 보고 요구, Cyber Mission·CVP 개편, 이용 정책 개정, 영향력 공작 차단, 안전 연구원 해고, OpenAI 매출, Meta·Microsoft의 Claude 사용 축소, Genesis Mission, 클로드 스타트업 혜택 중단, 타오 에세이
에이전트 운용 기법·YouTube
Claude Code 모드, /doctor prompt-audit, onFailure: "block", autoCompactWindow는 개발 워크플로 개선이라 제외했다. YouTube 11건 중 카파시 LLM 위키 쇼츠는 15주차 4번(LLM 관리 개인 위키)과 같은 주제라 재료로 쓰지 않았다.
생성형 UI 챗봇
12주차 백로그와 중복
마크다운 폴더 LLM 위키
15주차 백로그와 중복

2026년 41주차 (스캔일: 2026-10-23)

후보 6건

대상: content/2026/week-41.mdx (기사 27건 + YouTube 11건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 35~40주차 소급 스캔에서 이미 나온 아이디어는 제외했고, 겹치는 항목은 아래 제외한 항목에 적었다.

  1. 1

    AI가 만든 페이지에서 디자인 토큰을 벗어난 색·간격·폰트 크기를 찾아 표시하는 디자인 일관성 린터

    Shadcn Lint 써서 AI로 디자인 박살내지 않기

    22/25
    • getComputedStyle
    • iframe 렌더링
    • 색 거리 계산
    • 북마클릿
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Shadcn Lint 써서 AI로 디자인 박살내지 않기
    만드는 것
    디자인 토큰 파일(CSS 변수나 Tailwind 설정)을 붙여넣고 검사할 페이지를 열면, 렌더링된 모든 요소의 계산된 스타일을 훑어 토큰 목록에 없는 색상, 4px 격자를 벗어난 간격, 정의되지 않은 폰트 크기를 찾아내는 도구. 위반 요소는 페이지 위에 빨간 테두리로 표시되고, 옆 패널에 "가장 가까운 토큰은 --accent(색 거리 3.2)" 같은 수정 제안이 붙는다. AI로 찍어 낸 랜딩 페이지를 검사해 위반 수 전후를 비교하는 것이 데모 포인트다.
    핵심 기술
    북마클릿 또는 MV3 확장으로 대상 페이지에 주입, getComputedStyle 순회, OKLCH 색 거리 계산, 토큰 파서(CSS 변수, tailwind.config JSON), 오버레이 하이라이트.
    완료 기준
    이 사이트(ai-news)의 _tokens.scss 토큰으로 자기 페이지를 검사했을 때 위반 0~소수, 임의 생성한 AI 랜딩 페이지에서는 위반이 유형별로 집계되어 표시된다. 요소 2,000개 페이지에서 검사가 1초 안에 끝난다.
    리스크/전제
    영상 속 Shadcn Lint가 어떤 규칙을 쓰는지는 확인하지 못했다. 이 PoC는 같은 문제의식을 계산된 스타일 기준으로 다시 푸는 것이고, 소스 코드 정적 분석이 아니라는 점을 밝힌다. 그라데이션·그림자처럼 토큰화가 애매한 속성은 첫 버전에서 제외한다.
  2. 2

    판단 전용 모델의 확신도와 실제 정답률을 신뢰도 다이어그램으로 그리는 보정 측정기

    판단 전용 모델 Laya 실측 / Cloudflare Clef / Decision API

    22/25
    • Workers AI 또는 판단 모델 API
    • 라벨 데이터셋
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    판단 전용 모델 Laya 실측, 정확도 78%에 틀린 답에도 확신도 0.9 / Cloudflare, 의사결정 모델 Clef 공개
    만드는 것
    라벨이 붙은 분류 문항 묶음(CSV)을 올리고 모델을 고르면, 문항마다 판단과 확신도를 받아 신뢰도 다이어그램(확신도 구간별 실제 정답률)과 ECE 값을 그려 주는 웹앱. "0.9 이상으로 확신했는데 틀린 문항"만 따로 모아 보여 주고, 확신도 임계값 슬라이더를 움직이면 자동 처리 비율과 오류율이 어떻게 바뀌는지 표로 나온다. 39주차 판단 인박스를 실제로 쓰기 전에 임계값을 정하는 도구다.
    핵심 기술
    Cloudflare Workers AI의 Clef(Apache-2.0 가중치) 또는 OpenRouter의 Microsoft-Decision-1 호출, 배치 실행과 진행률 표시, 신뢰도 다이어그램 SVG 차트, ECE 계산.
    완료 기준
    공개 감성 분류 데이터 300문항을 모델 2개로 돌려 두 모델의 신뢰도 곡선이 한 차트에 겹쳐 그려지고, 임계값별 자동 처리율·오류율 표가 나온다.
    리스크/전제
    Clef가 Workers AI 무료 등급에서 바로 호출되는지 먼저 확인해야 한다. 안 되면 일반 LLM의 logprobs로 같은 측정을 하고, 판단 전용 모델은 비교군으로 붙인다. 문항 수가 적으면 구간별 정답률이 출렁이므로 구간마다 표본 수를 같이 표시한다.
  3. 3

    arXiv 분야별 월간 제출량과 제출자 분포를 그려 AI 논문 급증을 보여주는 대시보드

    arXiv, 제출자당 월 2건 제한

    21/25
    • arXiv API
    • Vercel Cron
    • 정적 JSON
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    arXiv, AI 논문 제출 급증에 제출자당 월 2건 제한
    만드는 것
    cs.AI·cs.CL·cs.LG 등 분야별 월간 신규 제출 수를 2년치 선 그래프로 그리고, 2026년 9월 40,363건 지점에 정책 변경 주석을 다는 대시보드. 분야를 고르면 같은 달 제출자 1명이 몇 편을 냈는지 분포(1편, 2편, 3편 이상)를 막대로 보여 줘 "월 2건 제한"이 실제로 몇 명에게 걸리는지 가늠하게 한다. 10월 이후 데이터가 쌓이면 제한 전후 비교가 자동으로 붙는다.
    핵심 기술
    arXiv API(또는 OAI-PMH) 수집 스크립트, 하루 1회 Vercel Cron으로 증분 갱신, 집계 결과를 정적 JSON으로 저장, 차트 라이브러리.
    완료 기준
    3개 분야의 24개월치 월간 집계가 그래프로 나오고, 집계 수치가 arXiv 공식 통계 페이지와 5% 안에서 맞는다. 저자 분포 차트가 분야 전환 시 1초 안에 바뀐다.
    리스크/전제
    arXiv API는 요청 간 3초 간격 권고가 있어 초기 수집에 시간이 걸린다. 초기 적재는 로컬에서 한 번 돌리고 이후만 증분으로 받는다. 저자 이름은 동명이인 문제가 있어 "제출자" 분포는 추정치라고 표시한다.
  4. 4

    에이전트가 매 턴 자기 컨텍스트를 남기기·지우기·압축하는 편집 내역을 diff로 보여주는 컨텍스트 편집기 데모

    컨텍스트 언어 모델, 자신의 컨텍스트를 직접 편집하는 AI

    20/25
    • LLM 도구 호출
    • diff 렌더링
    • 토큰 카운터
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    컨텍스트 언어 모델, 자신의 컨텍스트를 직접 편집하는 AI
    만드는 것
    왼쪽에 에이전트가 웹 조사 과제를 푸는 대화, 오른쪽에 에이전트가 읽는 컨텍스트 파일이 나란히 있는 화면. 매 턴 모델이 keep·delete·compress·patch 도구로 자기 컨텍스트를 고치면 오른쪽에 diff가 색으로 표시되고, 위쪽 그래프에 토큰 수 추이가 쌓인다. "정해진 시점에 전체 요약" 모드로 같은 과제를 돌린 결과와 토큰 곡선을 겹쳐 비교한다.
    핵심 기술
    LLM 도구 호출로 컨텍스트 편집 명령 정의, 컨텍스트를 줄 단위 문서로 관리, diff 렌더링, 토큰 카운터(js-tiktoken 등).
    완료 기준
    같은 조사 과제 3개를 두 모드로 돌려 모드별 최종 토큰 수와 정답 여부가 표로 남고, 편집 이력을 턴 단위로 되감아 볼 수 있다.
    리스크/전제
    논문의 Suffix Cache Reuse 같은 서버 최적화는 재현 대상이 아니다. 모델이 편집 도구를 과하게 써서 필요한 정보를 지우는 실패가 나오는데, 그 실패를 그대로 보여 주는 편이 오히려 볼거리다.
  5. 5

    상대 말의 정체를 확률 히트맵으로 추정해 보여주는 미니 Stratego 웹 게임

    정보가 대부분 숨겨진 Stratego, AI가 처음으로 최강자를 꺾다

    20/25
    • 게임 상태 머신
    • 베이즈 갱신
    • Canvas
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    정보가 대부분 숨겨진 Stratego, AI가 처음으로 최강자를 꺾다
    만드는 것
    말 수를 줄인 6×6 Stratego를 브라우저에서 컴퓨터와 두는 게임. 상대 말 위에 "이 말이 폭탄일 확률 62%" 같은 추정값이 히트맵으로 깔리고, 말이 움직이거나 전투로 정체가 드러날 때마다 확률이 갱신된다. 히트맵을 끄고 켜며 정보가 숨겨진 게임에서 추론이 어떻게 쌓이는지 체감하게 한다.
    핵심 기술
    게임 규칙 상태 머신, 남은 말 구성에 대한 베이즈 갱신(움직인 말은 폭탄·깃발이 아님 등), 그 추정을 쓰는 단순 휴리스틱 AI, Canvas 렌더링.
    완료 기준
    한 판을 끝까지 둘 수 있고, 정체가 드러난 말과 확률 추정이 모순되지 않으며(드러난 말은 100%), 히트맵을 켠 AI가 끈 AI를 20판 중 과반 이상 이긴다.
    리스크/전제
    Ataraxos의 신경망 믿음 모델을 재현하는 것이 아니라 같은 아이디어를 손으로 짠 확률 계산으로 보여 주는 것이다. 규칙 구현과 AI 튜닝에 시간이 들어 소요 점수를 낮게 매겼다.
  6. 6

    버그 제보 본문을 넣으면 재현 절차·영향 버전·패치 유무를 점검하는 제보 품질 검사기

    AI가 쏟아낸 엉터리 제보에 구글, 오픈소스 버그 바운티 일시 중단

    19/25
    • 규칙 기반 체크리스트
    • LLM API
    • GitHub Issue 템플릿
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
앞선 백로그와의 중복
ThinkingBox(DB 상태로 완료 확인, 반복 일관성)는 39주차 3번 에이전트 신뢰도 실험장과 같은 문제다. Decision API·Clef·Laya의 판단 모델 활용 자체는 39주차 4번 판단 인박스가 먼저 가져갔고, 이번 주는 보정 측정(2번)만 새로 세웠다. OpenAI Dots의 허용·승인·차단 규칙과 OpenDots는 43주차 8번 권한 정책 시뮬레이터와, answer-me-with-html은 35주차 3번 ELI5 카드와 겹친다. Gemini 4 Argon은 43주차 5번 재료로 이미 쓰였다.
FE 사이드 프로젝트로 만들 수 없는 것
GLM-5.3 익스플로잇 평가, Solar Mini 4 자체 배포(H100 필요), Cloudflare cf CLI(에이전트용 CLI), ChatGPT Sites(그 자체가 제품이라 만들 거리가 아님)
단순 소식·정책
GPT-6.1 Sol, DevDay 요금제, 증류 공격 차단, 안전 사례 지침, FTC 조사, 안전 책임자 사임, Frontier Academy, 브로드컴 금융, 초지능 부대, 독파모
에이전트 운용 기법·YouTube
Claude Code 모드 시작하기와 관련 영상, AI 네이티브 SDLC, DDD 글, Ruflo·Aside 소개는 개발 워크플로 개선에 해당해 제외했다. YouTube 11건 중 Shadcn Lint 영상만 1번 재료로 썼다.

2026년 40주차 (스캔일: 2026-10-23)

후보 4건

대상: content/2026/week-40.mdx (기사 27건 + YouTube 11건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 이번 주는 모델 출시와 에이전트 사고 보고가 대부분이라 만들 거리가 적다. 34·43주차 백로그와 35~39주차 소급 스캔에서 이미 나온 아이디어는 제외했다.

  1. 1

    Three.js 컴퓨트 셰이더로 소형 LLM을 돌리며 토큰마다 레이어 활성값과 다음 토큰 확률을 그려 주는 LLM 해부 페이지

    Three.js 컴퓨트 셰이더로 브라우저에서 LLM 실행

    22/25
    • Three.js TSL
    • WebGPU
    • safetensors 로딩
    • Canvas
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Three.js 컴퓨트 셰이더로 브라우저에서 LLM 실행
    만드는 것
    SmolLM2 같은 작은 모델을 탭 안에서 돌리면서, 토큰이 하나 생성될 때마다 각 레이어의 활성값 크기를 막대 띠로, 다음 토큰 후보 상위 10개와 확률을 옆에 보여 주는 해설형 페이지. 온도 슬라이더를 움직이면 확률 분포가 바로 바뀌고, 특정 레이어를 클릭하면 그 레이어의 어텐션 헤드별 값이 펼쳐진다. "LLM이 다음 단어를 고르는 순간"을 눈으로 보는 것이 목표다.
    핵심 기술
    Three-LLM 방식의 TSL 컴퓨트 셰이더 추론(또는 같은 구조를 참고한 직접 구현), Hugging Face 모델 파일 직접 로딩, GPU 버퍼에서 중간값 읽어오기, 시각화 레이어.
    완료 기준
    WebGPU 지원 데스크톱 크롬에서 SmolLM2-135M이 초당 수 토큰 이상으로 생성되고, 레이어 활성값과 후보 확률이 토큰마다 갱신된다. 같은 프롬프트에서 온도 0이면 매번 같은 출력이 나온다.
    리스크/전제
    원 구현이 FP32라 메모리 부담이 커 135M급 모델로 시작해야 한다. 중간값을 매 토큰 GPU에서 CPU로 읽어오면 느려지므로 시각화용 샘플링 간격을 둔다. 34주차 12번(로컬 LLM 채팅 PWA)과 같은 브라우저 추론이지만, 이쪽은 채팅이 아니라 내부를 보여 주는 것이 목적이다.
  2. 2

    실사용자 INP·LCP를 모아 p75 추이와 느린 상호작용 대상을 보여주는 셀프 호스트 성능 대시보드

    Claude.ai를 2주 만에 3배 빠르게

    22/25
    • web-vitals
    • sendBeacon
    • Route Handler
    • Upstash Redis
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude.ai를 2주 만에 3배 빠르게, 최적화도 Claude가
    만드는 것
    내 사이트에 스크립트 한 줄을 넣으면 실제 방문자의 INP·LCP·CLS·TTFB를 모아 일자별 p75 그래프와 페이지별 순위를 보여 주는 대시보드. INP가 나쁜 상호작용은 어떤 요소(셀렉터)에서 일어났는지 함께 기록해 "가장 느린 클릭 상위 10개" 표를 만든다. 배포 시점에 세로선을 그어 개선 전후를 비교한다. 기사 속 p75 3.1초에서 0.55초로의 변화를 내 사이트 규모로 재현해 보는 셈이다.
    핵심 기술
    web-vitals 라이브러리의 attribution 빌드, navigator.sendBeacon, Next.js Route Handler 수집 엔드포인트, Upstash Redis 무료 등급 저장, 백분위 계산, 차트.
    완료 기준
    ai-news 사이트에 붙여 1주일 데이터가 쌓이고, 대시보드의 p75 INP가 Chrome UX Report나 PageSpeed Insights 필드 데이터와 같은 범위에 있다. 느린 상호작용 표에 실제 셀렉터가 찍힌다.
    리스크/전제
    방문자가 적으면 p75가 출렁이므로 표본 수를 함께 표시한다. 무료 저장소 용량을 넘지 않게 원본 이벤트는 7일만 보관하고 일별 집계만 남긴다. 개인정보는 수집하지 않는다(IP·UA 원문 저장 안 함).
  3. 3

    에이전트 실행 기록을 해시 체인으로 묶어 한 줄이라도 지우거나 고치면 끊긴 지점을 표시하는 변조 탐지 로그 뷰어

    LLM 에이전트는 자기 실행 기록을 쉽게 지울 수 있다

    22/25
    • Web Crypto SHA-256
    • IndexedDB
    • 타임라인 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    LLM 에이전트는 자기 실행 기록을 쉽게 지울 수 있다
    만드는 것
    에이전트 실행 로그(JSONL)를 넣거나 데모 에이전트가 실시간으로 기록하면, 각 줄을 이전 줄의 해시와 묶어 체인으로 저장하고 타임라인으로 보여 주는 뷰어. 사용자가 중간 한 줄을 지우거나 고치는 "공격 버튼"을 누르면 그 지점부터 체인이 빨갛게 끊기고 몇 번째 줄이 바뀌었는지 짚어 준다. 체인 머리 해시를 외부(예: 별도 탭이나 서버)에 따로 보관해야 끝부분 통째 삭제도 잡힌다는 점을 시연한다.
    핵심 기술
    Web Crypto subtle.digest('SHA-256'), IndexedDB 저장, 체인 검증 Web Worker, 타임라인 UI, 머리 해시 외부 고정(간단한 Route Handler).
    완료 기준
    로그 1만 줄 검증이 1초 안에 끝나고, 중간 수정·중간 삭제·끝부분 잘라내기 세 가지 변조가 모두 탐지된다. 끝부분 잘라내기는 외부 머리 해시가 있을 때만 잡힌다는 차이가 화면에 드러난다.
    리스크/전제
    해시 체인은 변조를 "막는" 것이 아니라 "드러내는" 장치라는 점을 첫 화면에 적는다. 논문이 권고한 "에이전트가 통제할 수 없는 독립 경로"의 핵심은 저장 위치에 있으므로, 브라우저 안에서만 끝나는 데모의 한계도 함께 밝힌다.
  4. 4

    대본 줄마다 목소리·감정·속도 지시를 달아 여러 화자가 낭독하는 오디오 드라마 에디터

    Gemini 3.8 TTS, 목소리 설계와 대사별 연기 지시

    21/25
    • Gemini TTS API
    • Web Audio API
    • 대본 에디터
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Gemini 3.8 TTS, 목소리 설계와 대사별 연기 지시
    만드는 것
    왼쪽은 대본 에디터, 오른쪽은 등장인물 목록. 인물마다 "낮고 느린 중년 남성, 약간 지친 말투"처럼 자연어로 목소리를 설계하고, 대사 줄마다 (속삭이듯), (웃으며) 같은 연기 지시를 단다. 재생을 누르면 줄 단위로 음성을 생성해 이어 붙이고, 줄을 클릭하면 그 대사만 다시 만든다. 완성본은 WAV로 내려받는다.
    핵심 기술
    Gemini 3.8 Flash TTS(저가형 Flash-Lite TTS로 시작), 대본 파서, 줄 단위 생성 결과 캐시, Web Audio API로 이어 붙이기와 간격 조절.
    완료 기준
    인물 3명, 대사 20줄짜리 짧은 장면이 끊김 없이 재생되고, 한 줄만 수정했을 때 그 줄만 다시 생성된다. 같은 대사를 연기 지시만 바꿔 생성한 두 결과의 차이가 귀로 구분된다.
    리스크/전제
    무료 등급 제공 여부와 한국어 연기 지시 품질은 먼저 확인해야 한다. 30초 샘플 목소리 복제 기능은 본인 동의 문제가 있어 이 PoC에서는 쓰지 않고 기본 목소리와 설계 목소리만 쓴다.
제외한 항목
앞선 백로그와의 중복
Opus 5.5의 추론 설정별 점수·비용 차이는 35주차 8번 추론 노력 자동 선택 챗과, GPT-6 프롬프트 캐싱 브레이크포인트는 34주차 7번 비용 계산기와 겹친다. Jev·Ollaya·CLM-8B 판단 모델은 39주차 4번 판단 인박스의 재료다. "당신이 직접 쓰지 않은 글은 읽고 싶지 않다"는 11주차 1번 AI 상투 패턴 하이라이터와 같은 정서라 따로 세우지 않았다. 950개 에이전트 병렬 탐색은 43주차 10번 병렬 에이전트 대시보드와 겹친다.
FE 사이드 프로젝트로 만들 수 없는 것
Transformers GGUF 직접 실행(Apple Silicon 한정), Nvidia Sentry(BlueField-4 DPU 필요), Linear CI 개선(tsgo 전환은 CLI 작업), 9루프 산란 진폭 계산
공개 데모로 부적절한 것
SwarmTraces의 공격 페이로드 8만 개, Transluce의 urlquery.net 흔적, DNS 우회 사례는 탐색 UI를 만들 수는 있지만 공격 수법 아카이브가 되어 버려 후보로 세우지 않았다.
단순 소식·정책
GPT-6 Sol·Luna, Sonnet 5.5와 AA 평가, Microsoft Copilot 재편, OpenAI 에이전트의 정부 사이트 우회, 미중 핫라인, Muse 흥행, 플러그인 포털, Anthropic IPO, World Labs의 AMD 합류, 계획 모드는 죽었다
YouTube 11건
모델 출시 브리핑과 Jev·Agency Agents·Google Skills 소개가 대부분이라 재료로 쓰지 않았다.

2026년 39주차 (스캔일: 2026-10-23)

후보 4건

대상: content/2026/week-39.mdx (기사 15건 + YouTube 4건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 기사 수가 적은 주라 후보도 4개로 줄였다. 34·43주차 백로그와 35~38주차 소급 스캔에서 이미 나온 아이디어는 제외했다.

  1. 1

    할 일 앱의 기능을 WebMCP 도구로 노출하고, 에이전트가 화면 클릭 대신 도구 호출로 조작하는 모습을 나란히 보여주는 데모

    WebMCP, 웹사이트는 이제 AI에게 사용법을 알려주게 됩니다 / Stagehand v4

    22/25
    • WebMCP
    • React
    • LLM 도구 호출
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    WebMCP, 웹사이트는 이제 AI에게 사용법을 알려주게 됩니다 / Stagehand v4
    만드는 것
    평범한 할 일·일정 웹앱에 addTask, searchTasks, completeTask, moveToDate 같은 도구를 WebMCP로 등록한다. 화면 절반에는 사람이 쓰는 앱이, 나머지 절반에는 "다음 주 화요일 회의 준비 항목 3개 만들고 지난주 미완료는 내일로 옮겨 줘" 같은 지시를 받은 에이전트의 도구 호출 로그가 흐른다. 같은 지시를 DOM 클릭 방식으로 수행했을 때의 단계 수·시간과 비교하는 탭을 둔다.
    핵심 기술
    WebMCP 도구 등록 API(브라우저 실험 플래그 또는 폴리필), 도구 입력 JSON Schema, React 상태와 도구 핸들러 연결, 비교용으로 접근성 트리 기반 클릭 에이전트.
    완료 기준
    지시 5개를 WebMCP 방식으로 모두 완수하고, 같은 지시를 클릭 방식으로 했을 때보다 단계 수가 줄어든 것이 표로 남는다. 도구 호출이 사람 화면에도 즉시 반영된다.
    리스크/전제
    WebMCP는 아직 표준 후보라 브라우저 지원과 API 이름이 바뀔 수 있다. 착수 전에 현재 크롬의 실험 플래그와 공식 제안 문서를 확인하고, 지원이 없으면 같은 인터페이스의 폴리필로 시작한다. 영상 내용은 RSS 설명만 확인했다.
  2. 2

    사진에서 피사체를 투명 배경으로 뽑아 스티커·썸네일로 내보내는 브라우저 배경 제거 웹앱

    Qwen-Image-2.1, 생성·편집·투명 배경을 한 모델로

    22/25
    • transformers.js
    • 배경 제거 ONNX 모델
    • Canvas
    • WebGPU
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Qwen-Image-2.1, 생성·편집·투명 배경을 한 모델로
    만드는 것
    사진을 드롭하면 탭 안에서 피사체를 분리해 투명 PNG로 보여 주고, 흰 테두리를 두른 스티커, 1:1 썸네일, 단색 배경 교체 세 가지로 바로 내보내는 웹앱. 브러시로 남길 곳·지울 곳을 덧칠해 마스크를 고칠 수 있다. 사진이 서버로 나가지 않는다는 점을 앞세운다.
    핵심 기술
    @huggingface/transformers로 배경 제거 모델(RMBG·BiRefNet 계열 ONNX) 실행, WebGPU 우선·WASM 폴백, Canvas 마스크 합성, 브러시 보정 레이어.
    완료 기준
    일반 노트북에서 1024px 사진 한 장이 5초 안에 처리되고, 머리카락이 있는 인물 사진과 제품 사진에서 눈에 띄는 잘림 없이 분리된다. 오프라인 상태에서도 두 번째 실행부터 동작한다.
    리스크/전제
    Qwen-Image-2.1 자체는 7B 시각 생성 구성 요소라 브라우저에서 못 돌린다. 이 PoC는 기사가 짚은 "피사체 추출" 기능을 브라우저용 소형 모델로 만드는 것이고, Qwen API는 배경 새로 생성하기 같은 선택 기능으로만 붙인다. 모델 라이선스(상업 이용 가능 여부)를 먼저 확인한다.
  3. 3

    가짜 파일 묶음으로 에이전트가 실제로 읽은 파일과 "다 검토했다"는 주장을 대조하고 반복 실행 일관성을 재는 에이전트 신뢰도 실험장

    OverclaimBench, 에이전트의 완료 과장 측정 / 한 번 성공한 에이전트가 다음에도 성공하는가

    20/25
    • LLM 도구 호출
    • 가상 파일시스템
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    OverclaimBench, 에이전트의 완료 과장 측정 / 한 번 성공한 에이전트가 다음에도 성공하는가
    만드는 것
    브라우저 안 가상 파일 5개(일부는 일부러 길게)를 주고 "다섯 파일을 모두 검토해 문제를 보고해"라고 시키는 실험장. 에이전트의 read_file 호출 기록과 최종 보고의 "모두 확인했다" 주장을 대조해 과장 여부를 배지로 표시한다. 같은 과제를 N번 돌리는 버튼을 누르면 평균 성공률과 N번 모두 성공한 비율이 나란히 막대로 나와, 두 숫자 사이 격차가 얼마나 큰지 보여 준다.
    핵심 기술
    가상 파일시스템과 읽기 도구 정의, 도구 호출 로그 수집, 보고문에서 완료 주장 추출(구조화 출력), 반복 실행 큐와 차트.
    완료 기준
    모델 2개로 각각 10회 돌려 과장 비율과 pass@1·전부 성공 비율이 표로 남고, 프롬프트에 "읽지 않은 파일은 밝혀라"를 넣었을 때 과장 비율이 바뀌는지 비교된다.
    리스크/전제
    34주차 10번 평가 플레이그라운드는 사람이 라벨링하는 도구라 겹치지 않는다. 반복 실행은 비용이 쌓이므로 저가 모델로 시작하고 실행 수 상한을 둔다.
  4. 4

    문의 메일을 구조화된 판단(분류·긴급도·확률)으로 받아 칸반에 배치하고 확신도 낮은 건만 사람 검토로 보내는 인박스

    Jev, 문장 대신 구조화된 판단을 반환하는 AI

    20/25
    • 판단 모델 또는 LLM 구조화 출력
    • logprobs
    • 칸반 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Jev, 문장 대신 구조화된 판단을 반환하는 AI
    만드는 것
    가상 고객 문의 메일이 들어오면 판단 모델이 "환불·배송·버그·기타" 분류와 긴급도, 각 선택지 확률을 돌려주고, 칸반 보드의 해당 열로 카드가 자동 배치되는 인박스. 확신도가 임계값 아래인 카드는 "사람 확인" 열로 가고, 사람이 바로잡은 결과는 다음 판단의 예시로 쌓인다. 처리량·자동 처리율·사람 수정률이 상단에 카운터로 보인다.
    핵심 기술
    Jev 호환 API(Jev 얼리 액세스, Cloudflare Clef, 또는 일반 LLM의 구조화 출력 + logprobs), 칸반 UI(dnd-kit), 임계값 설정, 수정 이력 저장.
    완료 기준
    가상 문의 50건을 흘려보냈을 때 자동 배치와 사람 확인 열이 임계값에 따라 나뉘고, 사람 수정이 쌓인 뒤 같은 유형의 판단 정확도가 오르는지가 수치로 나온다.
    리스크/전제
    Jev는 얼리 액세스라 키 발급이 안 될 수 있다. 같은 인터페이스를 쓰는 공개 모델(Clef)이나 LLM 대체 경로로 시작한다. 확신도가 실제 정답률과 맞는지는 41주차 2번 보정 측정기로 따로 검증하는 편이 좋다.
제외한 항목
앞선 백로그와의 중복
Gemini 3.8 Live의 실시간 음성 대화는 20주차 5번 음성 통역 지연 계측 앱과 같은 재료다. Stagehand v4는 38주차 3번 스크래핑 웹앱과 이번 주 1번 WebMCP 데모의 비교군으로만 썼다. AutoRAG Agent의 여러 원본 검색은 36주차 2번 하이브리드 검색 실험장, 43주차 2번 임베딩 검색과 겹친다. ChatGPT 이미지 2.5 영상은 38주차 4번 참조 이미지 캔버스와 같은 주제다.
단순 소식·정책
Astra for Law, OpenAI 오정렬 공개 체계, Anthropic AI 개발 속도 지표, Accenture 상주 평가, LSVP, GitHub의 Copilot 런타임 Rust 이식, SKT 개발 현장
도구 트렌드
jev-trader(암호화폐 거래 판단이라 제외), text-humanizer(11주차 1번 AI 상투 패턴 하이라이터에서 다룬 AI 문체 문제의 반대편 도구로 탐지 우회를 내세워 후보로 세우지 않음), awesome-jev 목록류
YouTube 4건
WebMCP 영상만 1번 재료로 썼다.
PDF 은닉 프롬프트 검사기
32주차 백로그와 중복

2026년 38주차 (스캔일: 2026-10-23)

후보 4건

대상: content/2026/week-38.mdx (기사 78건 + 짧은 소식 17건 + YouTube 12건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 기사 수는 많지만 GPT-6 Astra 사례·속도 조절 논쟁·산업 소식 비중이 커서 후보는 4개로 추렸다. 34·43주차 백로그와 35~37주차 소급 스캔에서 이미 나온 아이디어는 제외했다.

  1. 1

    책 본문의 단어 순번 첫 글자로 숫자열을 평문으로 되살리는 북 사이퍼를 단계별로 풀어 보고 직접 만들어 보는 해설 페이지

    Claude Fable 5.1, 370년 된 암호문 Cyphral Distich 해독

    22/25
    • 텍스트 토크나이저
    • 스크롤 스토리텔링
    • SVG 하이라이트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude Fable 5.1, 370년 된 암호문 Cyphral Distich 해독
    만드는 것
    스크롤하며 읽는 단일 페이지. 첫 장면에서 64개 숫자로 된 원문 암호를 보여 주고, 빈도 분석과 단순 치환을 시도하면 왜 의미 없는 글자가 나오는지 직접 눌러 보게 한다. 다음 장면에서 "열쇠는 책 자체"라는 단서를 주고, 숫자마다 앞쪽 본문의 n번째 단어가 하이라이트되며 첫 글자가 뽑혀 평문이 한 글자씩 채워진다. 마지막 장면은 사용자가 아무 글(뉴스 기사 등)을 열쇠로 골라 자기 문장을 숫자열로 암호화하고, 링크로 친구에게 풀게 하는 놀이다.
    핵심 기술
    단어 경계 토크나이저와 순번 인덱싱, IntersectionObserver 기반 스크롤 연출, SVG 하이라이트 애니메이션, URL 해시에 암호문 인코딩.
    완료 기준
    공개된 Distich 두 행이 페이지 안에서 원문 해법대로 복원되고, 사용자가 만든 암호를 다른 브라우저에서 링크로 열어 같은 열쇠로 풀 수 있다.
    리스크/전제
    Urquhart 원문(Proquiritations)의 정확한 단어 경계는 GeekNews 요약만으로 확인되지 않는다. 원 해독 글과 원문 스캔을 대조해 데이터를 만들어야 하고, 확보가 어려우면 "같은 방식"을 보여 주는 재구성 예시로 바꾸고 그 사실을 밝힌다. 43주차 1번(lrand48 시드 역추적)과 같은 해설형 페이지 장르지만 주제가 겹치지 않는다.
  2. 2

    공개 초파리 커넥톰 일부를 브라우저에서 시뮬레이션하고 뉴런 발화를 3D로 보여주는 뷰어

    '가상 초파리' 뇌 시뮬레이션 이색 시도 열풍

    20/25
    • Three.js
    • Web Worker
    • 공개 커넥톰 데이터
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    '가상 초파리' 뇌 시뮬레이션 이색 시도 열풍
    만드는 것
    공개된 초파리 커넥톰에서 시각·운동 회로 같은 작은 하위망 수천 개 뉴런만 골라 3D 점 구름으로 띄우고, 특정 감각 뉴런을 클릭해 자극하면 신호가 시냅스를 따라 번지며 뉴런이 깜빡이는 뷰어. 자극 강도와 억제 비율 슬라이더로 활동 패턴이 어떻게 달라지는지 본다.
    핵심 기술
    Three.js InstancedMesh로 대량 점 렌더링, 단순 적분-발화(LIF) 모델을 Web Worker에서 계산, 하위망 추출용 전처리 스크립트, 정적 JSON 데이터.
    완료 기준
    뉴런 5,000개 하위망이 30fps 이상으로 렌더링되고, 같은 자극을 주면 같은 발화 패턴이 재현된다. 자극 지점을 바꾸면 활성 경로가 달라진다.
    리스크/전제
    전체 16만 뉴런은 브라우저에 무리라 하위망으로 줄여야 하고, 공개 데이터의 라이선스와 형식(FlyWire 등)을 먼저 확인해야 한다. 생물학적으로 정확한 시뮬레이션이 아니라 연결 구조를 체감하는 시각화라는 점을 밝힌다. 전처리 작업이 커서 소요 점수를 낮게 줬다.
  3. 3

    URL과 수집 대상을 한 줄로 적으면 LLM이 셀렉터를 추론해 표로 뽑고 엑셀로 내보내는 스크래핑 웹앱

    알아서 웹 데이터 긁어오는 AI 에이전트 무료로 나눠드려요

    19/25
    • Route Handler fetch
    • cheerio
    • LLM 구조화 출력
    • SheetJS
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    알아서 웹 데이터 긁어오는 AI 에이전트 무료로 나눠드려요
    만드는 것
    "이 채용 공고 목록에서 회사명·직무·마감일" 같은 한 줄과 URL을 넣으면, 서버가 페이지를 가져오고 LLM이 반복 구조를 보고 CSS 셀렉터를 추론해 표로 뽑는 웹앱. 추론된 셀렉터를 화면에 보여 주고 사용자가 고칠 수 있으며, 같은 셀렉터를 저장해 두면 다음 수집부터는 LLM 없이 돈다. 결과는 엑셀로 내려받는다.
    핵심 기술
    Route Handler에서 fetch와 cheerio 파싱, 정리한 HTML 일부를 LLM에 넘겨 셀렉터 JSON 받기, 셀렉터 검증(결과 행 수·빈 값 비율), SheetJS 내보내기.
    완료 기준
    정적 HTML 목록 페이지 5곳에서 셀렉터 추론이 4곳 이상 한 번에 맞고, 저장한 셀렉터로 재수집할 때 LLM 호출이 0회다.
    리스크/전제
    자바스크립트로 그리는 페이지는 fetch만으로 안 되므로 첫 버전은 정적 페이지로 한정한다. robots.txt와 이용 약관을 존중하는 안내와 요청 간 지연을 기본값으로 넣는다. 영상은 RSS 설명만 확인했다.
  4. 4

    스케치와 참고 사진을 함께 올려 다듬은 이미지를 받고 버전별로 나란히 비교하는 레퍼런스 캔버스

    Introducing ChatGPT Images 2.5

    18/25
    • 이미지 생성 API
    • Canvas 스케치
    • 버전 히스토리
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
앞선 백로그와의 중복
Bunja로 푼 상태 관리 난제는 35주차 5번 상태 관리 놀이터의 비교 대상 라이브러리로 넘겼다. Diagram Design 스킬은 35주차 3번 ELI5 카드와, HydraFusion 멀티 모델 라우팅은 20주차 6번 LLM 라우터 데모와, text-humanizer는 11주차 1번 AI 상투 패턴 하이라이터와 반대 방향의 같은 주제다. ai-data-extractor는 20주차 3번 코딩 에이전트 세션 비용 대시보드와 겹친다. 에이전츠 API의 장기 실행 세션 콘솔은 43주차 10번 병렬 에이전트 대시보드와, PuzzleMask와 오토 모드 우회는 43주차 5번 인젝션 실습장과, Claude 워터마크 영상은 34주차 2번 워터마크 시뮬레이터와 같다.
FE 사이드 프로젝트로 만들 수 없는 것
나비에-스토크스 Lean 증명(브라우저 Lean 뷰어는 가능하지만 결과물이 기존 lean4web과 다르지 않음), AlphaGenome Atlas(공개 조회 API 존재 여부를 확인하지 못함), Windows AMD GPU CUDA, 양자 컴퓨팅 실험, 항균 물질 탐색, Real-SWE(비공개 코드베이스)
단순 소식·정책
속도 조절 논쟁 전반(아모데이·색스·xeiaso), 개리 탄 증류 발언, 루비젬스 공격, 벤지오 글, iLands 스팸, 금융·헬스케어용 ChatGPT, 고객 사례(퍼플렉시티·코그니션·1Password), 엔비디아·스페이스X·구글·오라클 등 산업 소식 전체
짧은 소식
Vercel AI Gateway 모델 추가 공지는 재료 목록으로만 봤다. Ling 3.0 Flash 무료 제공은 저가 모델이 필요한 후보(3번)의 시작 모델로 쓸 수 있다.
YouTube 12건
web-crawler 영상만 3번 재료로 썼다. 컴퓨터 유즈·Buzz·Hermes 영상은 에이전트 운용 기법이라 제외했다.
데이터 계약 자연어 질의 웹앱
17주차 백로그와 중복
전이중 음성 대화 웹앱
20주차 백로그와 중복

2026년 37주차 (스캔일: 2026-10-23)

후보 11건

대상: content/2026/week-37.mdx (기사 76건 + YouTube 15건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 35·36주차 소급 스캔에서 이미 나온 아이디어는 제외했고, 겹치는 항목은 아래 제외한 항목에 적었다.

  1. 1

    붙여넣은 셸 명령을 AST로 펼쳐 파이프·리다이렉트·파괴적 명령을 색칠하고 위험 등급을 매기는 셸 명령 해부 페이지

    unbash, Bash 명령 구조를 실행 없이 분석하는 TypeScript 파서

    23/25
    • unbash
    • 트리 시각화
    • URL 공유
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    unbash, Bash 명령의 구조를 실행 없이 분석하는 TypeScript 파서
    만드는 것
    셸 한 줄이나 짧은 스크립트를 붙여넣으면 명령·인자·파이프·리다이렉트·하위 셸을 트리로 펼치고, 원문 위에서 각 요소를 색으로 구분하는 페이지. rm -rf, curl ... | sh, > /dev/sda, chmod 777 같은 패턴은 빨간 배지로 위험 등급을 붙이고, 변수 확장이나 sh -c "..." 안에 숨은 명령까지 끄집어내 보여 준다. 결과는 URL로 공유되며, "AI 에이전트가 이 명령을 실행하려고 할 때 무엇을 봐야 하나" 관점의 설명이 붙는다.
    핵심 기술
    unbash 파서(부분 AST와 오류 위치 포함), 원본 위치 정보로 소스 하이라이트, 위험 규칙 테이블, URL 해시 직렬화. 서버 코드 0줄.
    완료 기준
    Claude Code v2.1.261 릴리스 노트가 언급한 우회 사례(위치 매개변수, 큰따옴표 안 sh -c)를 포함한 테스트 명령 20개에서 위험 요소가 모두 표시되고, 작성 중인 미완성 명령도 깨지지 않고 부분 트리가 나온다.
    리스크/전제
    43주차 8번(권한 정책 시뮬레이터)은 도구 호출 단위 정책을 다루고, 이 PoC는 셸 문법 자체를 해부해 겹치지 않는다. 위험 등급은 휴리스틱이라 "안전 판정 도구가 아니다"라는 문구가 필요하다.
  2. 2

    유튜브가 'AI로 생성됨' 라벨을 붙인 영상을 피드·검색·쇼츠에서 흐리거나 숨기는 크롬 확장

    Show HN: Weedout

    22/25
    • MV3 content script
    • MutationObserver
    • chrome.storage
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Show HN: Weedout, Safari extension that hides YouTube AI-labeled videos
    만드는 것
    유튜브 홈 피드·검색 결과·관련 영상·쇼츠 선반에서 'AI로 생성됨/변경됨' 라벨이 붙은 영상을 흐리게, 숨김, 그대로 셋 중 하나로 처리하는 크롬 확장. 팝업에는 오늘 걸러 낸 영상 수와 채널 목록이 나오고, 특정 채널은 예외로 둘 수 있다. Weedout이 유료 사파리 확장이라 크롬용 무료판을 만드는 셈이다.
    핵심 기술
    MV3 content script, 무한 스크롤 대응 MutationObserver, 라벨 감지 셀렉터(라벨이 영상 페이지에만 있으면 썸네일 메타데이터 조회 방식 검토), chrome.storage.sync 설정.
    완료 기준
    라벨이 붙은 영상 5개 이상이 섞인 검색 결과에서 모두 처리되고, 스크롤로 새로 로드된 카드에도 즉시 적용된다. 유튜브 체감 속도에 영향이 없다(카드 처리 1ms 이하).
    리스크/전제
    유튜브 DOM과 라벨 위치는 자주 바뀌어 셀렉터가 깨지기 쉽다. 셀렉터를 한곳에 모아 두고, 감지 실패 시 조용히 아무것도 안 하도록 해야 피드를 망가뜨리지 않는다. 라벨이 없는 AI 영상은 못 거른다는 한계를 팝업에 적는다.
  3. 3

    WebGPU 커널을 골라 내 기기에서 실행 시간을 재고 순수 JS 구현과 비교하는 커널 벤치 페이지

    Introducing @huggingface/kernels

    22/25
    • @huggingface/kernels
    • WebGPU
    • Web Worker
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI
    만드는 것
    행렬곱·softmax·layernorm·attention 같은 커널 목록에서 하나를 고르고 입력 크기를 정하면, 내 기기에서 WebGPU 커널과 순수 JS 구현을 각각 돌려 실행 시간과 결과 오차를 보여 주는 페이지. 측정 결과를 익명으로 모아 GPU 종류별 순위표를 만들 수도 있다(선택). "왜 브라우저 AI에 WebGPU가 필요한가"를 숫자로 보여 주는 것이 목표다.
    핵심 기술
    @huggingface/kernels로 커널 로딩, 워밍업과 반복 측정, performance.now()와 GPU 타임스탬프 쿼리(지원 시), JS 기준 구현, 결과 비교 차트.
    완료 기준
    커널 5종을 크기 3단계로 돌려 속도 비교 차트가 나오고, 두 구현의 결과 차이가 허용 오차 안이다. WebGPU 미지원 브라우저에서는 안내 문구와 JS 결과만 보인다.
    리스크/전제
    라이브러리가 막 공개돼 API가 바뀔 수 있다. GPU 측정은 첫 실행 컴파일 비용이 커서 워밍업을 빼먹으면 숫자가 왜곡된다. 이 함정 자체를 화면에서 설명하면 학습 거리가 된다.
  4. 4

    가짜 서비스에 장애를 주입하고 로그·메트릭·배포 내역만 보고 원인을 찾는 온콜 모의훈련 웹 게임

    AI가 장애를 처리할수록 엔지니어는 시스템 감각을 잃는다

    21/25
    • 시드 시나리오 엔진
    • 가짜 로그 생성
    • 차트
    • 타이머
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI가 장애를 처리할수록 엔지니어는 시스템 감각을 잃는다
    만드는 것
    가상의 쇼핑몰 서비스 지도(API, DB, 캐시, 큐)가 있고, 시작 버튼을 누르면 경보가 울린다. 플레이어는 로그 검색, 메트릭 차트, 최근 배포 목록만 보고 "DB 커넥션 풀 고갈" 같은 원인을 골라 조치한다. 조치가 맞으면 메트릭이 회복되고, 틀리면 상황이 악화된다. 시나리오는 시드로 생성돼 같은 시드면 같은 장애가 나오고, 끝나면 소요 시간과 헛짚은 단서가 리포트로 나온다.
    핵심 기술
    시드 PRNG 기반 장애 시나리오 엔진, 서비스 의존 그래프에 따른 증상 전파, 가짜 로그·메트릭 생성, 차트, 타이머와 점수.
    완료 기준
    서로 다른 원인을 가진 시나리오 5종이 플레이 가능하고, 같은 시드로 두 번 하면 같은 로그와 차트가 나온다. 시나리오 하나를 10~15분 안에 풀 수 있는 난이도다.
    리스크/전제
    AI 기술을 재료로 쓰지 않는 후보라 학습 점수를 낮게 줬다. 대신 기사의 문제의식(이해 부채)을 직접 겨냥한 결과물이라 남겼다. 선택 기능으로 LLM 힌트 버튼을 달되 쓰면 점수가 깎이게 하면 기사 주제와 맞물린다.
  5. 5

    프롬프트를 넣으면 LLM이 p5.brush 코드를 써서 수채화를 그리고 코드와 그림을 함께 보여주는 생성 아트 갤러리

    Training a coding model to paint watercolours with TRL and OpenEnv

    21/25
    • p5.js
    • p5.brush
    • LLM API
    • iframe 샌드박스
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Training a coding model to paint watercolours with TRL and OpenEnv
    만드는 것
    "안개 낀 호숫가의 작은 배" 같은 문장을 넣으면 LLM이 p5.brush를 쓰는 자바스크립트를 생성하고, 샌드박스 iframe에서 실행해 수채화가 그려지는 웹앱. 그림 옆에 코드가 나오고, 코드를 고치면 바로 다시 그려진다. 마음에 드는 작품은 프롬프트·코드·썸네일과 함께 갤러리에 저장된다.
    핵심 기술
    LLM API 코드 생성(p5.brush 사용 예시를 시스템 프롬프트에), sandbox 속성 iframe과 postMessage, 실행 시간 제한, 실패 시 오류를 넣어 한 번 재시도.
    완료 기준
    프롬프트 10개 중 8개 이상이 오류 없이 그림으로 나오고, 생성 코드가 외부 네트워크에 접근하지 못한다(CSP로 확인). 갤러리 작품을 다시 열면 같은 그림이 재현된다(시드 고정).
    리스크/전제
    원 글은 모델을 강화학습으로 훈련한 과정이고, 이 PoC는 범용 LLM에 프롬프트로 시키는 것이라 품질 차이가 있다. 생성 코드 실행은 반드시 격리 iframe에서만 한다.
  6. 6

    같은 심볼 찾기를 텍스트 검색과 TypeScript 언어 서비스로 나란히 실행해 결과 차이를 보여주는 코드 탐색 비교기

    grep이 LSP를 이긴다고?

    21/25
    • Monaco Editor
    • TS 언어 서비스 워커
    • 정규식 검색
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    긴 유튜브 영상에 질문하면 답과 근거 구간 타임스탬프를 돌려주고 플레이어를 그 지점으로 옮기는 영상 Q&A 웹앱

    Introducing agentic video understanding with Gemini

    20/25
    • Gemini API 영상 입력
    • YouTube IFrame API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    쇼핑 에이전트가 카탈로그를 검색해 장바구니를 채우고 결제 직전에 사람이 승인하는 데모 스토어

    앤트로픽, 클로드 상거래 에이전트 공개

    20/25
    • Claude Commerce Agents 참조 구현
    • AI SDK
    • Next.js
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  9. 9

    자연어 분류 규칙을 LLM이 예제로 불리고 브라우저 안 작은 분류기로 학습해 오프라인으로 돌리는 규칙 컴파일러

    Compile by Training

    20/25
    • LLM API
    • transformers.js 임베딩
    • 로지스틱 회귀
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  10. 10

    공개된 기출문항을 여러 모델에 풀리고 과목별 점수와 오답을 비교하는 시험 대시보드

    GPT-6 아스트라, AI 최초 수능 완전 만점

    19/25
    • LLM API
    • 채점 스크립트
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  11. 11

    정전 후 20ms 전압 유지 같은 회로 과제를 브라우저 회로 시뮬레이터로 직접 풀어 보는 퍼즐

    AI는 이제 회로 기판도 설계할 수 있을까?

    18/25
    • ngspice WASM
    • 회로도 편집 UI
    • 파형 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
앞선 백로그와의 중복
OpenRouter 공급자별 아스트라 가격 비교는 30주차 3번 오픈·폐쇄 모델 산점도 탐색기의 재료다. 인지 바이러스 확산 모델과 자율 연구 스웜의 부정행위 전염은 43주차 4번 확산 시뮬레이터와 같은 구조라 제외했다. 하네스에 따라 54.8%와 99.9%로 갈린 실험, SWE-Gate, LLM 심판 신뢰도, BenchMIRT는 34주차 4번 아레나·10번 평가 플레이그라운드와 겹친다. 10번 수능 대시보드도 아레나와 인접하지만 시험 채점과 과목별 오답 분석이 핵심이라 남겼다. GRPO 구조화 출력 글은 39주차 3번 실험장에서 스키마 준수율 측정으로 확장할 수 있다. niubigeo(AI 검색 브랜드 노출)와 AI 추천 출처 조작 보고서는 35주차 9번 GEO 인용 모니터의 재료다. okf-agent-memory와 Funes 메모리 글은 43주차 9번 메모리 패널과 겹친다. archify는 35주차 3번 ELI5 카드와 같다.
FE 사이드 프로젝트로 만들 수 없는 것
로봇 팔 제어, 프로젝트 제니스(64GB 통합 메모리 PC 전제), OpenTrailPaper(E-Ink 보드 펌웨어), NeoMME·ColPali 문서 검색(소형이지만 브라우저용 변환본 미확인), K2 호라이즌·콰사르 자체 호스팅, IBM 시계열 Confluent 구성, SENTINEL-RL
단순 소식·정책
아스트라 출시와 배포 혼선, 코드 아레나 순위, 클로드 맥스 한도 초기화, AAII v4.2, MAI-트랜스크라이브-2, WeatherNext 3, 제미나이 오디오·스파크, 위키 사건과 안전 문서들, 사이버보안 특화 모델 4종, 샌더스 법안, 교육구 AI 유예, 구글 AI 모드 가격, 신진서 접바둑, 산업 소식 전체
에이전트 운용 기법·YouTube
intent.md와 AI 네이티브 SDLC, /skill-doctor, ego 브라우저, 브라운필드 조직론은 개발 워크플로·조직 이야기라 제외했다. YouTube 15건은 대부분 아스트라 브리핑과 광고성 쇼츠라 재료로 쓰지 않았다.
BGM 생성 루프 플레이어
33주차 백로그와 중복

2026년 36주차 (스캔일: 2026-10-23)

후보 8건

대상: content/2026/week-36.mdx (기사 69건 + YouTube 9건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 35주차 소급 스캔에서 이미 나온 아이디어는 제외했고, 겹치는 항목은 아래 제외한 항목에 적었다.

  1. 1

    같은 URL에서 브라우저엔 HTML, `Accept: text/markdown` 요청엔 마크다운을 돌려주는 블로그와 임의 URL의 협상 지원 여부를 검사하는 체커

    Serve Markdown to AI Agents with Accept Headers

    23/25
    • Next.js Route Handler
    • middleware
    • remark
    • fetch
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Serve Markdown to AI Agents with Accept Headers
    만드는 것
    두 부분으로 된 작은 사이트. 하나는 MDX 글 몇 편이 있는 블로그로, 브라우저가 열면 평소 HTML이, Accept: text/markdown 헤더로 요청하면 같은 URL에서 정리된 마크다운이 내려간다(Vary: Accept 포함). 다른 하나는 아무 URL을 넣으면 두 헤더로 각각 요청해 응답 타입·크기·토큰 수 차이를 표로 보여 주는 체커다. llms.txt 같은 별도 파일 방식과 무엇이 다른지 한 화면에서 비교하는 것이 포인트다.
    핵심 기술
    Next.js Route Handler와 middleware에서 Accept 헤더 분기, MDX 원문을 마크다운으로 직렬화(remark), 캐시 키에 Accept 반영, 체커는 서버 측 fetch 두 번과 토큰 수 계산.
    완료 기준
    curl -H "Accept: text/markdown"으로 블로그 글을 받으면 마크다운이 오고, 브라우저와 CDN 캐시가 섞이지 않는다(서로 다른 헤더로 연속 요청해도 각자 맞는 응답). 체커가 주요 사이트 10곳의 지원 여부를 판정한다.
    리스크/전제
    CDN 캐시가 Accept를 무시하면 HTML과 마크다운이 뒤섞인다. Vercel에서 Vary 동작을 먼저 확인해야 한다. ai-news 사이트 자체에 붙여 보는 것도 가능하지만, 이 백로그 원칙대로 독립 사이트로 만든다.
  2. 2

    BM25와 벡터 검색 결과를 RRF로 합치고 MMR로 다시 정렬하는 과정을 단계별 표로 보여주는 하이브리드 검색 실험장

    Show GN: memnest

    22/25
    • MiniSearch
    • transformers.js
    • IndexedDB
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Show GN: memnest, 로컬 메모리 서비스
    만드는 것
    메모 묶음을 넣고 질의를 치면 화면이 세 칸으로 나뉜다. 왼쪽은 BM25 순위, 가운데는 벡터 유사도 순위, 오른쪽은 RRF(k=60)로 합친 뒤 MMR(lambda=0.5)로 다시 정렬한 최종 순위다. 각 문서가 칸 사이에서 어떻게 위아래로 움직였는지 선으로 이어 보여 준다. "포트 8080" 같은 정확한 토큰 질의와 "서버가 안 뜰 때"처럼 바꿔 말한 질의를 각각 던져 두 방식이 어디서 실패하는지 확인하는 프리셋이 있다.
    핵심 기술
    MiniSearch(BM25), @huggingface/transformers 다국어 임베딩(e5 계열), RRF와 MMR 직접 구현, IndexedDB 저장, 순위 이동 SVG.
    완료 기준
    메모 500개에서 질의 응답이 300ms 안에 나오고, 정확 토큰 질의 5개에서는 BM25가, 바꿔 말한 질의 5개에서는 벡터가 더 나은 결과를 내는 것이 화면에서 재현되며, 합친 결과가 두 경우 모두 상위 3위 안에 정답을 올린다. k와 lambda 슬라이더로 결과가 바뀐다.
    리스크/전제
    43주차 2번(임베딩 의미 검색 지도)과 34주차 15번(RAG 챗봇)은 검색 결과를 쓰는 앱이고, 이 PoC는 융합 알고리즘 자체를 보여 주는 실험장이라 남겼다. 둘 다 만든다면 임베딩 부분은 공유할 수 있다.
  3. 3

    노드를 이어 LLM 파이프라인을 짜고 노드마다 중간 결과를 펼쳐 보며 실행하는 워크플로 캔버스

    Wire It, Run It, Deploy It: AI Workflows in Gradio

    21/25
    • React Flow
    • AI SDK
    • 타입 있는 포트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Wire It, Run It, Deploy It: AI Workflows in Gradio
    만드는 것
    텍스트 입력, LLM 호출, JSON 추출, 조건 분기, 출력 같은 노드를 드래그해 잇는 캔버스. 포트에는 타입(문자열, JSON, 배열)이 있어 맞지 않는 연결은 막힌다. 노드마다 실행 버튼이 있어 그 지점까지만 돌려 볼 수 있고, 실행된 노드 아래에 중간 결과가 펼쳐진다. 완성한 그래프는 JSON으로 저장되고 같은 그래프가 /api/run/{id} 엔드포인트로도 동작한다.
    핵심 기술
    React Flow, 노드 타입 레지스트리와 포트 타입 검사, 위상 정렬 실행기, AI SDK 스트리밍, Route Handler로 그래프 실행 API.
    완료 기준
    "기사 URL → 본문 추출 → 요약 → 키워드 JSON" 파이프라인을 캔버스로 만들어 실행하면 노드별 중간 결과가 보이고, 같은 그래프를 API로 호출해도 같은 결과가 나온다.
    리스크/전제
    노드 종류를 늘리기 시작하면 끝이 없다. 첫 버전은 노드 5종으로 고정한다. 공개 데모는 LLM 노드에 사용자 키 입력을 받는다.
  4. 4

    사실과 규칙을 적어 두면 전제를 철회할 때 그에 기댄 결론이 연쇄적으로 지워지는 브라우저 Datalog 노트

    LLM 메모리를 만들다 우연히 프로그램 분석 엔진이 된 이야기

    21/25
    • TS Datalog 엔진
    • 의존 그래프 시각화
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    LLM 메모리를 만들다 우연히 프로그램 분석 엔진이 된 이야기
    만드는 것
    "A는 B에 의존한다", "B는 참이다" 같은 사실과 "X가 Y에 의존하고 Y가 실패하면 X도 의심" 같은 규칙을 적는 노트. 오른쪽에 도출된 결론과 그 근거 사실을 잇는 그래프가 그려지고, 사실 하나를 철회하면 그에 기댄 결론들이 연쇄적으로 회색으로 바뀌는 애니메이션이 나온다. 각 결론을 클릭하면 "어떤 사실과 규칙에서 나왔는지" 출처 경로가 펼쳐진다. 디버깅 중 폐기한 가설을 다시 붙잡지 않게 하는 원 글의 문제의식을 손으로 체험하는 도구다.
    핵심 기술
    TypeScript로 작은 Datalog 엔진(준-순진 평가와 증분 철회) 직접 구현, 출처 추적, 의존 그래프 시각화(Cytoscape.js 등), URL 공유.
    완료 기준
    사실 30개·규칙 5개짜리 디버깅 시나리오에서 전제 하나를 철회하면 영향받은 결론만 정확히 무효화되고, 다시 참으로 돌리면 복원된다. 모든 결론에 출처 경로가 있다.
    리스크/전제
    원 Lemmalog처럼 LLM이 자연어를 사실로 옮기는 부분은 선택 기능으로 둔다. 핵심은 결정적인 엔진 부분이라 LLM 없이도 완결된다. 42주차의 OpenAI 수학 논문 철회 연쇄를 예제 데이터로 넣으면 좋은 시연이 된다.
  5. 5

    가짜 표준 파일을 걸어 두고 어떤 AI 크롤러가 언제 읽어 가는지 기록·집계하는 봇 방문 대시보드

    가짜 고양이 표준 cats.txt가 드러낸 llms.txt와 GEO의 허술한 근거

    21/25
    • Next.js middleware
    • User-Agent 판별
    • Upstash Redis
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  6. 6

    음원을 브라우저에서 보컬·반주로 나눠 파트별 볼륨과 구간 반복으로 연습하는 플레이어

    StemDeck, 무료 오픈소스 로컬 AI 스템 분리 도구

    20/25
    • onnxruntime-web
    • Demucs 계열 ONNX
    • Web Audio API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    오픈소스 프로젝트별 AI 기여 정책(허용·고지·금지)을 모아 필터·비교하는 디렉터리 사이트

    Debian, 생성형 AI 허용·기여자 책임 / 오픈소스 120곳 AI 정책 조사

    20/25
    • 정적 데이터
    • 검색·필터 UI
    • GitHub API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    제품 포장 사진 여러 장에서 주소·유통사·성분명 불일치를 찾아 위험 신호 목록으로 보여주는 진위 확인 보조 웹앱

    AI로 가짜 화장품 식별하기

    19/25
    • Gemini 비전 API
    • 구조화 출력
    • 이미지 주석 오버레이
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
앞선 백로그와의 중복
클로드 테스트 중 700GB 삭제 사고는 43주차 8번 권한 정책 시뮬레이터와 37주차 1번 셸 명령 해부의 재료다. Gemini 3.5 Transcribe는 34주차 3번 음성 메모 PWA·13번 자막 확장과 겹친다. 이중맹검 AI 평가는 34주차 4번 아레나와 10번 평가 플레이그라운드에 블라인드 모드로 붙일 수 있어 따로 세우지 않았다. AI 슬롭 기여 문제는 34주차 9번 PR 리뷰 대시보드와 겹친다. sepia(AI 티 지우기)는 11주차 1번 AI 상투 패턴 하이라이터의 반대편 도구다. fire-your-seo-agency의 GEO 감사는 35주차 9번 GEO 인용 모니터와, archify는 35주차 3번 ELI5 카드와 같다. 코드 한도 계산은 34주차 7번과 같아 제외했다.
FE 사이드 프로젝트로 만들 수 없는 것
NOOA(Python 클래스 에이전트 프레임워크), Xazz(Rust DSL), mu(Go 개인 서버), GLM-5.3-Flash 로컬 실행(128GB 메모리), Granite 4.2 학습 레시피, Quantization-Aware Healing, 멀티 벡터 모델 파인튜닝(GPU 14.5시간), 모델 하드웨어 표준(MHS, 연구소 대상 프리뷰), 마이크로덕 로봇
단순 소식·정책
Cursor 모델 공급 중단, 엔비디아의 허깅페이스 인수, 할라피뇨, 코덱스 한도 리셋, Admin 플러그인, 에보하네스-RL, 자동 정렬 연구, Luanti DMCA, 호주 공정근로위원회, 웰빙 연구 보조금, 모두의 AI, AI 없는 금요일과 조직 생산성 글, 산업 소식 전체
YouTube 9건
뉴스 브리핑과 인터뷰가 대부분이라 재료로 쓰지 않았다. 영상 AI 쇼츠는 27주차 4번 이미지→영상 스토리보드와 같은 주제다.
세션 로그 비용 대시보드
20주차 백로그와 중복
장면별 영상 스토리보드 웹앱
27주차 백로그와 중복

2026년 35주차 (스캔일: 2026-10-23)

후보 9건

대상: content/2026/week-35.mdx (기사 60건 + YouTube 11건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 겹치는 아이디어는 제외하고, 인접한 것은 아래 제외한 항목에 적었다.

  1. 1

    작은 초안 모델이 토큰을 미리 쓰고 큰 모델이 한 번에 검증하는 과정을 수락률 슬라이더로 재생하는 스펙큘레이티브 디코딩 시각화

    LFM2.5-DSpark, 추론을 최대 3.2배 빠르게

    23/25
    • SVG 애니메이션
    • 시드 PRNG
    • transformers.js(선택)
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    LFM2.5-DSpark, 추론을 최대 3.2배 빠르게
    만드는 것
    두 줄 트랙이 있는 해설 페이지. 위 트랙에서 작은 초안 모델이 후보 토큰 k개를 빠르게 내놓고, 아래 트랙에서 큰 모델이 한 번의 순전파로 이를 검증해 앞에서부터 받아들이다 첫 거절 지점에서 자기 토큰으로 바꿔 끼운다. "가중치를 메모리에서 한 번 올리는 비용"을 막대로 표현해, 토큰 하나씩 생성할 때와 k개를 한꺼번에 검증할 때 이 비용이 어떻게 나눠지는지 보여 준다. 수락률과 k를 슬라이더로 움직이면 예상 속도 향상 배수가 실시간으로 바뀌고, 기사 속 3.2배에 해당하는 조건이 어디인지 표시된다.
    핵심 기술
    시드 PRNG로 수락·거절을 재현 가능하게 시뮬레이션, SVG 타임라인 애니메이션, 기대 수락 길이 공식으로 속도 향상 계산. 선택 과제로 transformers.js에서 소형 모델 두 개를 실제로 돌려 측정값을 겹쳐 그린다.
    완료 기준
    수락률 0.6·0.8·0.9와 k 3·5·8 조합에서 시뮬레이션 결과와 이론값이 5% 안에서 맞고, 수락률이 낮으면 오히려 느려지는 구간이 화면에서 확인된다.
    리스크/전제
    실제 측정은 모델 쌍 선택(같은 토크나이저 필요)과 브라우저 성능에 크게 좌우된다. 핵심은 시뮬레이션 해설이고 실측은 선택 과제로 둔다.
  2. 2

    반AI 폰트·글자 난독화를 적용한 문단이 스크린 리더·OCR·LLM에서 어떻게 읽히는지 나란히 비교하는 접근성 실험 페이지

    반(反)AI 폰트는 쓸모없고 해롭다

    22/25
    • CSS @font-face
    • Tesseract.js
    • speechSynthesis
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    반(反)AI 폰트는 쓸모없고 해롭다
    만드는 것
    같은 문단을 여러 방식으로 "AI가 못 읽게" 만든 카드를 늘어놓는 페이지. 글리프를 뒤섞은 폰트, 보이지 않는 문자 끼워 넣기, CSS로 순서 뒤집기 같은 기법마다 세 가지 결과를 나란히 보여 준다. 사람 눈에 보이는 모습, 스크린 리더가 실제로 읽는 소리(speechSynthesis로 재생), OCR과 LLM이 뽑아낸 텍스트다. 결론적으로 사람(특히 보조 기술 사용자)만 손해를 보고 기계는 대부분 우회한다는 글의 주장을 직접 확인하게 한다.
    핵심 기술
    커스텀 @font-face로 글리프 매핑 바꾸기, DOM 텍스트 추출(접근성 트리에 가까운 innerText), Tesseract.js로 화면 캡처 OCR, LLM API로 원문 복원 시도.
    완료 기준
    기법 4종 이상에서 세 결과가 모두 채워지고, 각 기법별로 "스크린 리더 피해 있음/없음", "LLM 복원 성공/실패"가 표로 정리된다.
    리스크/전제
    실제 스크린 리더(NVDA, VoiceOver) 결과는 브라우저 TTS와 다를 수 있으므로 녹음본을 따로 첨부하는 편이 정확하다. 반AI 기법을 배포하는 도구로 읽히지 않도록 "왜 하지 말아야 하는가"를 결론으로 둔다.
  3. 3

    개념을 입력하면 짧은 문장과 SVG 다이어그램으로 된 ELI5 설명 카드를 만들어 공유 링크로 주는 웹앱

    앤트로픽서 유행하는 클로드 코드 '/eli5' 스킬

    21/25
    • LLM 구조화 출력
    • Mermaid
    • OG 이미지 생성
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    앤트로픽서 유행하는 클로드 코드 '/eli5' 스킬
    만드는 것
    "KV 캐시", "OAuth 리프레시 토큰"처럼 개념을 입력하면 세 문장 이내 설명, 일상 비유 하나, 상자와 화살표 몇 개짜리 다이어그램이 한 장의 카드로 나오는 웹앱. 카드마다 고유 URL과 OG 이미지가 생겨 메신저에 붙이면 미리보기로 그림이 보인다. "더 쉽게", "개발자용으로" 버튼으로 같은 개념을 수준만 바꿔 다시 만든다.
    핵심 기술
    LLM 구조화 출력(설명·비유·다이어그램 노드와 엣지 JSON), 다이어그램은 Mermaid 또는 직접 SVG 레이아웃, Next.js ImageResponse로 OG 이미지, 카드 저장(KV 또는 URL 인코딩).
    완료 기준
    개념 10개로 만든 카드가 모두 다이어그램 깨짐 없이 렌더링되고, 공유 링크를 슬랙·카카오톡에 붙였을 때 미리보기 이미지가 뜬다.
    리스크/전제
    다이어그램을 자유 SVG로 생성하게 하면 깨지기 쉬워 노드·엣지 JSON만 받고 레이아웃은 코드가 맡는다. 원 스킬은 HTML 자료를 통째로 만들지만, 이 PoC는 공유하기 좋은 카드 한 장으로 범위를 좁힌다.
  4. 4

    단일 벡터와 멀티 벡터(MaxSim) 검색 결과를 토큰 매칭 히트맵으로 나란히 보여주는 검색 원리 비교 데모

    Sentence Transformers로 다루는 멀티 벡터 임베딩 모델

    21/25
    • transformers.js
    • ColBERT 계열 ONNX
    • Canvas 히트맵
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Sentence Transformers로 다루는 멀티 벡터(Late Interaction) 임베딩 모델
    만드는 것
    문서 몇십 개와 질의를 넣으면 왼쪽엔 단일 벡터 코사인 유사도 순위, 오른쪽엔 MaxSim 순위가 나오는 데모. 오른쪽 결과를 클릭하면 질의 토큰과 문서 토큰 사이 유사도가 히트맵으로 펼쳐지고, 각 질의 토큰이 문서의 어느 토큰과 가장 강하게 맞물렸는지 선으로 이어진다. 평균으로 뭉개지던 정보가 어디서 살아나는지 눈으로 확인하는 것이 목적이다.
    핵심 기술
    @huggingface/transformers로 단일 벡터 모델과 ColBERT 계열 모델 실행, MaxSim 직접 구현, Canvas 히트맵, 인덱스 크기 비교 표시(벡터 수와 메모리).
    완료 기준
    고유명사·숫자가 섞인 질의 5개에서 두 방식의 순위 차이가 드러나고, 히트맵이 질의 토큰 수 × 문서 토큰 수로 정확히 그려진다. 인덱스 크기 차이가 숫자로 표시된다.
    리스크/전제
    브라우저용 ONNX 변환이 된 멀티 벡터 모델이 있는지 먼저 확인해야 한다(answerai-colbert-small 등). 없으면 서버리스 함수에서 토큰 임베딩만 뽑아 오는 방식으로 바꾼다.
  5. 5

    공유 상태의 범위를 컴포넌트 트리 위아래로 옮겨 보며 Context·Zustand·Jotai의 리렌더와 정리 동작을 비교하는 상태 관리 놀이터

    프론트엔드 상태 관리의 네 가지 난제

    21/25
    • React 19
    • Zustand
    • Jotai
    • React Profiler API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    프론트엔드 상태 관리의 네 가지 난제
    만드는 것
    작은 컴포넌트 트리(목록, 필터, 상세 패널)를 화면에 그려 두고, 공유 상태 하나를 "지역 → 부모로 끌어올림 → 전역" 단계로 옮길 때마다 Context, Zustand, Jotai 세 구현에서 무엇이 바뀌는지 나란히 보여 주는 놀이터. 각 컴포넌트에 리렌더 횟수가 깜빡이며 찍히고, 상세 패널을 닫았을 때 상태가 정리되는지(수명 문제), 파생 값이 몇 번 계산되는지(파생 상태 문제)가 카운터로 남는다.
    핵심 기술
    React 19, Zustand, Jotai, React Profiler API로 렌더 측정, 같은 기능을 세 방식으로 구현한 코드를 탭으로 보여 주기.
    완료 기준
    글이 꼽은 네 가지 난제 각각에 대해 세 구현의 차이가 카운터나 상태 표시로 드러나는 시나리오가 하나씩 있고, 코드 탭에서 그 차이를 만든 줄이 하이라이트된다.
    리스크/전제
    AI 기술이 재료가 아닌 후보지만 FE 개발자에게 학습 가치가 커서 남겼다. 38주차에 나온 Bunja 해법 글을 네 번째 구현으로 추가하면 같은 문제에 대한 답까지 비교된다.
  6. 6

    round_up 한 줄이 VRAM 할당 풀에 2KiB를 흘리는 과정을 메모리 지도 애니메이션으로 보여주는 버그 추적 해설 페이지

    Linus Torvalds가 AI로 Intel GPU 드라이버 버그를 추적한 과정

    21/25
    • SVG 메모리 맵
    • 스크롤 스토리텔링
    • BigInt
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    FIFO와 제약 인식 할당기가 같은 GPU 작업 큐를 어떻게 배치하는지 간트 차트로 비교하는 스케줄링 시뮬레이터

    같은 클러스터, 활용률 33%p 상승, 바뀐 건 순서였다

    21/25
    • 시뮬레이션 엔진
    • 간트 차트 SVG
    • 시드 PRNG
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    질문 난이도를 먼저 분류해 추론 노력을 고르고 고정 설정 대비 토큰·지연·정답률을 비교하는 챗 UI

    Learning When to Think / Claude Code 추론 노력 A/B 테스트 의혹

    20/25
    • LLM API reasoning effort 옵션
    • 분류 프롬프트
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  9. 9

    질문 목록을 넣으면 여러 LLM 답변에 내 사이트가 인용되는지 주기적으로 기록하는 GEO 인용 모니터

    GPT·Claude가 우리 브랜드를 추천하게 만드는 GEO 최적화 / GEO가 필요한 이유

    19/25
    • 검색 연동 LLM API
    • Vercel Cron
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
34·43주차와의 중복
GLM-5.3 28개 과제 비교와 Ed-o-meter식 결정론 채점은 34주차 4번 아레나·10번 평가 플레이그라운드와 같다. Claudette(독자별 재작성)는 43주차 14번 TL;DR 확장과 겹친다. 에이전트 메모리 용량 연구는 43주차 9번 메모리 패널과 겹친다. 새 MCP 로드맵(Progressive Discovery)은 34주차 11번 MCP 서버와 43주차 6번 변환 콘솔로 다룰 수 있다.
FE 사이드 프로젝트로 만들 수 없는 것
DeepSeek V4-Flash-Vision 자체 호스팅, srelens(쿠버네티스 데스크톱), Munder Difflin(로컬 CLI 하네스), Fire 태블릿 루팅, AI4AI-Bench, MidTool, 스킬 전이 논문, ASR 벤치마크 최적화, DeepMind 게임 AI
단순 소식·정책
Ox 알파 등장, 메타 할인, Replit 무료 모드, ChatGPT for Teens, Codex 사용 일주일 후기, 커서 /goal, Asana 사례, 사이버 안전 발표 3건, ZDR, SB 53, 가짜 싱크탱크, EU 저작권, AI 숙제 연구, ChatGPT 광고, Linear 데이터, 산업 소식 전체
에이전트 운용 기법
안티그래비티 원격 제어를 본뜬 에이전트 진행 상황 원격 모니터 PWA는 개발 워크플로 개선이라 이전 주차 기준에 맞춰 제외했다. ponytail, claude-mem, i-have-adhd도 같은 이유로 제외했다.
도구 트렌드
watermark-remover는 34주차 1·2·6번과 같은 주제의 반대편 도구라 제외했다. x64dbg-mcp-server, biosecurity-agent, AI 발표 영상 스킬은 웹 프론트엔드와 거리가 멀다.
YouTube 11건
GEO 영상 2건만 9번 재료로 썼다. 나머지는 브리핑과 기업 인터뷰다.
OpenRouter 가격 전쟁 트래커
30주차 백로그와 중복
AI;DR 크롬 확장
11주차 백로그와 중복
모델 라우팅 데모
20주차 백로그와 중복

2026년 34주차 (스캔일: 2026-08-19)

후보 17건

대상: content/2026/week-34.mdx (기사 68건 + YouTube 21건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담

  1. 1

    C2PA 매니페스트를 읽어 이미지 출처를 타임라인으로 보여주는 검증 웹앱

    Claude가 AI 생성 콘텐츠를 표시하는 방식

    23/25
    • c2pa-js(WASM)
    • File API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude가 AI 생성 콘텐츠를 표시하는 방식
    만드는 것
    이미지를 드롭하면 파일에 박힌 C2PA 서명 매니페스트를 파싱해, 누가 생성했고 어떤 편집을 거쳤는지를 세로 타임라인으로 그려 주는 단일 화면 웹앱. 서명 유효/무효, 생성 도구, 편집 이력, 서명이 아예 없는 경우를 각각 다른 상태로 표시한다. 파일은 브라우저 밖으로 나가지 않는다는 점을 UI에 명시한다.
    핵심 기술
    c2pa-js(WASM 번들), File/Drag-Drop API, Vercel 정적 배포. 서버 코드 0줄.
    완료 기준
    ChatGPT·Gemini로 만든 이미지 각 1장, 그 이미지를 편집기로 한 번 저장한 파일, 일반 사진 1장 — 네 가지를 넣었을 때 서명 유무와 편집 이력이 서로 구분되어 표시된다.
    리스크/전제
    WASM 번들이 수 MB라 초기 로딩 전략(지연 로드, 로딩 상태)이 필요하다. 대부분의 SNS는 업로드 시 메타데이터를 지워 버리므로 "서명 없음"이 곧 "AI 아님"이 아니라는 점을 결과 화면에서 분명히 해야 한다. 그 한계를 UI로 설명하는 것 자체가 이 앱의 볼거리다.
  2. 2

    green/red 리스트 워터마크를 브라우저에서 재현·탐지하는 시뮬레이터

    AI 텍스트 워터마킹의 작동 원리

    23/25
    • 토크나이저 WASM
    • 시드 PRNG
    • SVG
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI 텍스트 워터마킹의 작동 원리 / Claude의 '워터마크'가 글쓰기를 왜곡하는 방식
    만드는 것
    왼쪽에 텍스트를 붙여넣으면 토큰을 비밀 키 기반 해시로 green/red로 갈라 색칠하고, 오른쪽에 green 비율과 z-score, "이 길이에서 탐지 가능한가"를 실시간으로 보여주는 시각화. 편향 강도 슬라이더를 움직이면 색칠과 점수가 같이 움직이고, 문장을 바꿔 쓰면 점수가 동전 던지기 수준으로 떨어지는 것을 눈으로 확인할 수 있다. 기사가 예로 든 1,500단어 55% 편향 구간을 프리셋으로 넣는다.
    핵심 기술
    @huggingface/transformers의 토크나이저 또는 js-tiktoken, 시드 PRNG, SVG/Canvas 시각화. 전량 클라이언트 실행.
    완료 기준
    워터마크 없는 일반 글과 시뮬레이터가 직접 생성한 편향 텍스트를 넣었을 때 z-score가 뚜렷하게 갈리고, 짧은 텍스트(200단어 이하)에서는 두 값이 겹쳐 판별이 무의미해지는 것이 화면에서 재현된다.
    리스크/전제
    실제 Anthropic 워터마크를 탐지하는 도구가 아니다. 비밀 키는 사업자만 갖고 있으므로 이건 원리를 재현한 교육용 시뮬레이터이며, 그 사실을 첫 화면에 못 박아야 한다. 남의 글을 판정하는 도구로 오인되면 실물 피해가 생기는 영역이라 "판정" 문구를 쓰지 않는다.
  3. 3

    브라우저 안에서만 녹음·전사·요약하는 오프라인 음성 메모 PWA

    1위를 탈환한 오픈소스 STT 모델 / 모델은 의도적으로 더 멍청해지고 있다

    22/25
    • transformers.js
    • WebGPU
    • MediaRecorder
    • PWA
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    1위를 탈환한 오픈소스 STT 모델 / 모델은 의도적으로 더 멍청해지고 있다
    만드는 것
    설치 가능한 PWA. 버튼 하나로 녹음하면 브라우저 안에서 STT 모델이 돌아 전사문을 만들고, 그 자리에서 소형 요약 모델이 제목과 할 일 목록을 뽑는다. 결과는 IndexedDB에 남아 오프라인에서도 열린다. 네트워크를 끊고도 전 과정이 동작하는 것이 이 앱의 데모 포인트다.
    핵심 기술
    @huggingface/transformers(WebGPU 백엔드), Whisper 계열 소형 모델, MediaRecorder, Service Worker + Cache Storage로 모델 가중치 캐싱.
    완료 기준
    첫 실행에서 모델을 내려받은 뒤, 비행기 모드로 30초 한국어 음성을 녹음해 전사와 요약이 나오고, 앱을 껐다 켜도 기록이 남는다.
    리스크/전제
    모델 가중치가 수백 MB라 첫 로딩 경험이 이 앱의 성패를 가른다. 진행률 표시와 "다운로드 후에는 오프라인" 안내가 필수다. WebGPU 미지원 브라우저에서는 WASM 폴백으로 느리게라도 돌게 하고, 한국어 정확도는 모델 크기에 크게 좌우되므로 small/base 두 가지를 고를 수 있게 두는 편이 안전하다.
  4. 4

    같은 프롬프트를 여러 모델에 동시 스트리밍해 결과·지연·비용을 나란히 비교하는 아레나

    AI 모델 고르기 — 같은 프롬프트, 11개 모델

    22/25
    • Vercel AI SDK
    • 스트리밍 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI 모델 고르기 — 같은 프롬프트, 11개 모델, 매우 다른 결과
    만드는 것
    프롬프트를 한 번 입력하면 선택한 모델들에 동시에 던져 결과를 열 단위로 나란히 스트리밍하는 화면. 각 열 하단에 첫 토큰까지 걸린 시간, 총 소요, 입력/출력 토큰, 그 모델 단가로 환산한 실제 비용이 실시간으로 쌓인다. 같은 프롬프트를 3회 반복해 편차를 보는 모드를 넣으면 원 기사의 실험을 그대로 재현하게 된다.
    핵심 기술
    Vercel AI SDK의 streamText와 프로바이더 어댑터, Route Handler에서 병렬 스트림, 낙관적 UI. 모델은 이번 주 기사에 나온 저가 구간(Gemini 3.7 Flash 입력 100만 토큰당 $0.75, Grok 4.6 $2, Solar Pro 4 $0.30)으로 시작한다.
    완료 기준
    3개 모델에 같은 프롬프트를 3회씩 돌렸을 때 9개 응답이 끊김 없이 스트리밍되고, 누적 비용 합계가 각 사 콘솔의 사용량과 오차 범위 안에서 맞는다.
    리스크/전제
    API 키를 클라이언트에 두면 그대로 유출되므로 서버 라우트를 반드시 경유한다. 공개 배포하면 남의 프롬프트에 내 키로 과금되므로, 데모는 사용자 키 입력 방식(세션 스토리지 보관, 서버 미저장)으로 두거나 요청 수 제한을 건다. 이 부분을 설계에 넣는 것 자체가 좋은 이야깃거리가 된다.
  5. 5

    Claude 시스템 프롬프트 릴리스 노트를 버전 간 diff로 보여주는 사이트

    Anthropic, 시스템 프롬프트를 릴리스 노트로 공개

    22/25
    • ISR
    • diff 렌더링
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Anthropic, Claude 제품의 시스템 프롬프트를 릴리스 노트로 공개
    만드는 것
    공개된 시스템 프롬프트 릴리스 노트를 주기적으로 가져와 버전별로 저장하고, 두 버전을 고르면 문장 단위 diff를 좌우로 보여 주는 사이트. 제품(Claude Platform, Claude Code 등)별 탭과 변경 요약 배지("문단 3개 추가, 1개 삭제")를 붙인다. 스냅샷은 저장소 안 JSON으로만 관리해 DB 없이 간다.
    핵심 기술
    ISR 또는 예약 실행으로 문서 페치, diff 계열 라이브러리, 정적 생성. 백엔드 상태 없음.
    완료 기준
    최소 2개 버전의 스냅샷이 쌓이고, 임의의 두 버전을 골랐을 때 추가/삭제 문장이 정확히 색칠되며, 새 릴리스가 올라오면 사람 개입 없이 목록에 잡힌다.
    리스크/전제
    문서 HTML 구조가 바뀌면 파서가 깨진다. 파싱 실패 시 기존 스냅샷을 유지하고 실패만 표시하도록 해야 조용히 망가지지 않는다. 원문 전체를 그대로 재게시하기보다 diff와 출처 링크 중심으로 구성하는 편이 안전하다. 이번 주 목록 중 가장 빨리 끝나는 후보라 워밍업으로 좋다.
  6. 6

    붙여넣은 글의 AI 흔적 유니코드를 하이라이트·정리하는 웹앱 + 브라우저 확장

    watermarks-remover (GitHub 트렌딩 1위)

    22/25
    • 정규식
    • Range API
    • MV3 확장
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    모델별 입력·출력·캐시 단가를 넣고 세션 비용을 계산·비교하는 계산기

    Claude Code 세션의 가치를 극대화하는 방법

    21/25
    • 정적 사이트
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    Hugging Face 공개 API로 오픈 모델 다운로드·파생 모델 랭킹을 그리는 대시보드

    허깅페이스 점령한 중국 AI / 오픈 모델의 현재

    21/25
    • HF Hub API
    • 데이터 시각화
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  9. 9

    내 GitHub 저장소의 PR 리뷰 안티패턴을 점수로 보여주는 대시보드

    인간 중심에서 에이전틱 코드 리뷰로

    21/25
    • GitHub REST/GraphQL
    • OAuth
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  10. 10

    CSV를 올려 통과/실패 이진 라벨링을 하고 LLM 심판 일치율을 재는 평가 플레이그라운드

    LLM Evals에 대해 알아야 할 모든 것 / 평가 주도 개발

    20/25
    • IndexedDB
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  11. 11

    서버리스 함수 하나로 뜨는 stateless MCP 서버와 브라우저 인스펙터 UI

    MCP가 Stateless해짐

    20/25
    • MCP 2026-07-28 스펙
    • Route Handler
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  12. 12

    설치 없이 탭 안에서 도는 로컬 LLM 채팅 PWA

    Qwen 3.8 27B / Meta Muse Glimmer

    20/25
    • WebLLM
    • WebGPU
    • Cache Storage
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  13. 13

    유튜브 자막을 실시간 번역·요약해 오버레이하는 크롬 확장

    Gemini 3.7 Flash

    19/25
    • Gemini API
    • MV3 content script
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  14. 14

    서면 과제를 음성으로 소명하고 AI가 되묻는 구술 방어 연습 웹앱

    덴마크, 서면 과제 구두 소명 의무화

    19/25
    • Web Speech API
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  15. 15

    내 문서를 올려 근거 링크와 함께 답하는 RAG 챗봇

    도구 트렌드 — shadcn-ui/chatbot-template

    19/25
    • AI SDK
    • shadcn/ui
    • 벡터 검색
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  16. 16

    2026년 모델 출시 주기를 한 화면에 펼치는 인터랙티브 타임라인

    Gemini 3.7 Flash / Grok 4.6 / GLM-5.3 등

    19/25
    • 정적 데이터
    • SVG 스크롤 애니메이션
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  17. 17

    문서를 올리면 표·슬라이드 초안까지 만들어 주는 산출물 생성 웹앱

    Solar Pro 4 — 에이전트 작업 특화 LLM

    18/25
    • Solar API
    • SheetJS
    • pptxgenjs
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
FE 사이드 프로젝트로 만들 수 없는 것
Docker Sandboxes(격리 인프라), Orca·Xirp(데스크톱 ADE, Xirp은 macOS 전용), Unsloth Desktop, DoorDash MCP 게이트웨이(사내 규모 전제), Codex 자동연구 GPU 커널 최적화, Taalas HC1, 동형암호 추론, Castform 4B 후처리(GPU 학습 필요), Qwen3.8-2.4T-A95B 자체 호스팅
단순 소식·산업
Nvidia 보증 축소, Nvidia의 위험한 사업, 스트라이프-오픈라우터 인수, Cursor-SpaceX 합류, AMD-Taalas 인수, 2027년 메모리 매진, Hassabis 회장 이동, Discovery Loop 설립, 업스테이지-다음 적용, ChatGPT 광고 테스트, Codex 개편 예고
정책·논평
미국 AI 진영 선택 통보, OpenAI 살해 계획 신고, EU AI Act 대응 발표, AI 사용을 그만두기로 한 이유, 소프트웨어 엔지니어링의 중산층, AI와 일하는 방식은 리더십에 가깝다, 코드가 아니라 아이디어를 통제하라, Go 언어가 이상적인 이유, antirez의 C 회귀, AI는 더 많이 기억한다
유료 전용·접근 제한
GPT-5.6 Sol Ultrafast Mode(Cerebras 계층), Grok Bot, OpenAI Daybreak, AI 크레딧 재판매 시장(계정 정지 리스크), WeatherNext
에이전트 운용 기법
루프/그래프 엔지니어링, fork 서브에이전트, claude-mem, Auto mode, DeepSeek Harness — 개발 워크플로 개선에 해당해 이번 관점(만들어 배포할 결과물)에서는 후보로 세우지 않았다. 10번 평가 플레이그라운드만 화면이 있는 형태로 남겼다.
YouTube 21건
대부분 위 기사와 동일 주제의 소개·리뷰다. 예외로 오픈소스 STT 쇼츠(3번)와 구술 소명(14번) 두 건만 재료로 썼다.

2026년 33주차 (스캔일: 2026-10-23)

후보 8건

대상: content/2026/week-33.mdx (기사 48건 + YouTube 7건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 25~32주차 소급 백로그에 이미 있는 아이디어는 제외하고, 겹친 항목은 아래 제외 목록에 적었다.

  1. 1

    에이전트가 올린 명령 승인 요청을 사람이 판정하며 위험 명령을 얼마나 놓치는지 재는 승인 판단 게임

    4만 회 실행에서 사람은 위협 3건 중 1건을 놓쳤다 / 클로드 백업 홈 디렉터리 삭제

    22/25
    • 상태 머신
    • 명령 시나리오 데이터
    • 점수 집계
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    4만 회 실행에서 사람은 에이전트 명령의 위협 3건 중 1건을 놓쳤다 / '클로드'에 백업 맡겼더니 홈 디렉터리 전체 삭제
    만드는 것
    터미널처럼 생긴 화면에 가상 에이전트가 "이 명령을 실행해도 될까요?"라는 승인 요청을 하나씩 띄우고, 플레이어가 허용·거부를 누르는 게임. 요청 사이사이에 경로 오타로 홈 디렉터리를 지우는 rm -rf, 환경 변수를 외부로 보내는 curl, 겉보기엔 무해한 git push --force 같은 위험 명령이 섞여 있다. 라운드가 끝나면 놓친 위협 수, 판단에 걸린 평균 시간, 위험 유형별 오답률이 나오고 원 기사의 "3건 중 1건" 수치와 내 결과를 비교해 보여준다. 마지막 화면에서는 같은 명령을 정책 규칙으로 걸렀다면 몇 건이 자동으로 막혔을지 함께 보여준다.
    핵심 기술
    명령 시나리오 JSON(위험 여부·이유 태그), 라운드 상태 머신, 타이머와 피로도 연출(요청 빈도 증가), 결과 공유용 URL 인코딩. LLM 호출 없이 정적 배포 가능.
    완료 기준
    시나리오 40개 이상, 위험 비율과 요청 속도를 바꾸는 난이도 3단계가 있고, 한 판이 3분 안에 끝나며 결과 화면에서 놓친 명령마다 왜 위험한지 한 줄 설명이 붙는다.
    리스크/전제
    시나리오 품질이 곧 게임 품질이라 실제 사고 사례를 근거로 써야 한다. 43주차 8번(권한 정책 시뮬레이터)은 자동 정책 쪽이고 이 게임은 사람의 판단 한계를 재는 쪽이라 겹치지 않지만, 결과 화면의 정책 비교는 그 PoC와 데이터를 공유할 수 있다.
  2. 2

    Web Bluetooth로 주변 BLE 기기 신호 세기를 따라가며 위치를 찾는 핫·콜드 탐지 웹앱

    Claude가 제안한 Bluetooth 신호 추적으로 휴대전화 찾기

    22/25
    • Web Bluetooth
    • RSSI 스무딩
    • PWA
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    사무실에서 잃어버린 휴대전화를 Claude가 제안한 Bluetooth 신호 추적으로 찾음
    만드는 것
    휴대폰이나 노트북 브라우저에서 열어 주변 BLE 기기를 고르면, 신호 세기(RSSI)를 큰 숫자와 색으로 보여주는 웹앱. 걸어 다니며 숫자가 커지면 화면이 따뜻한 색으로 바뀌고 작아지면 차가운 색으로 바뀐다. 최근 30초 신호 추세를 스파크라인으로 그려 "지금 가까워지는 중인지"를 알려 주고, 원 기사처럼 거리 환산 대신 추세만 따라가게 설계한다. 이어폰이나 스마트태그를 찾는 상황을 데모로 쓴다.
    핵심 기술
    Web Bluetooth requestDevice + watchAdvertisements(RSSI 수신), 이동 평균·칼만 필터 스무딩, 진동 API 피드백, PWA 설치.
    완료 기준
    안드로이드 Chrome에서 BLE 이어폰을 골라 3m 이내 접근과 이탈을 화면 색 변화로 구분할 수 있고, 신호가 끊기면 마지막 최고값 위치를 안내한다.
    리스크/전제
    watchAdvertisements는 Chrome에서 실험 플래그가 필요할 수 있고 iOS Safari는 Web Bluetooth를 지원하지 않는다. 착수 전에 대상 브라우저에서 RSSI 수신이 되는지부터 확인해야 하며, 안 되면 이 PoC는 "지원 현황 확인" 결과만 남기고 접는다.
  3. 3

    반도체 공정을 로우폴리 3D 카트로 따라가며 단계마다 퀴즈를 푸는 학습 시뮬레이션

    LLM으로 복잡한 주제를 배우는 시각적 시뮬레이션 학습법

    21/25
    • three.js
    • 단계 상태 관리
    • 퀴즈
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    LLM으로 복잡한 주제를 배우는 시각적 시뮬레이션 학습법
    만드는 것
    원 기사의 ChipTycoon처럼 모래 채취, 웨이퍼, 노광, 식각, 패키징, 데이터센터 배송까지 카트 하나가 로우폴리 공장 라인을 따라가는 3D 장면. 단계마다 카트가 멈추고 짧은 설명과 함께 "이전 단계에서 무엇이 만들어졌나" 같은 퀴즈가 나오며, 맞혀야 다음 공정으로 넘어간다. 일시정지, 속도 조절, 단계 바로가기를 넣고 모바일 화면에서도 돌아가게 만든다.
    핵심 기술
    three.js 또는 react-three-fiber, 단순 도형 기반 로우폴리 모델링, 카메라 경로 애니메이션, 퀴즈 상태 관리. 공정 설명 초안은 LLM으로 만들고 사람이 검수한다.
    완료 기준
    6단계 이상이 끊김 없이 재생되고, 중간 사양 노트북과 휴대폰에서 30fps 이상을 유지하며, 퀴즈 오답 시 해당 단계로 되돌아가 다시 볼 수 있다.
    리스크/전제
    3D 모델링에 시간이 많이 들어 소요 점수가 낮다. 외부 에셋 대신 박스·원기둥 조합으로 시작하고, 공정 설명의 사실 정확성은 원 기사처럼 재검토 단계를 따로 둔다.
  4. 4

    슬라이더와 프롬프트로 실시간 생성 음악의 분위기를 바꾸는 웹 음악 믹서

    구글 Flow Music에 Lyria 3.5 출시

    21/25
    • Lyria RealTime API
    • Web Audio
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    구글 Flow Music에 Lyria 3.5 출시
    만드는 것
    "비 오는 밤 로파이", "밝은 신스팝" 같은 프롬프트 칩 여러 개를 섞는 비율 슬라이더와 BPM·밀도·밝기 노브가 있는 믹서 화면. 노브를 돌리면 스트리밍 중인 음악이 몇 초 안에 그 방향으로 바뀌고, 가운데에 파형과 스펙트럼이 실시간으로 그려진다. 마음에 드는 구간은 녹음해 내려받는다.
    핵심 기술
    Gemini API의 Lyria RealTime(WebSocket 스트리밍), Web Audio API AudioWorklet 재생, AnalyserNode 시각화, MediaRecorder 녹음.
    완료 기준
    프롬프트 가중치를 바꿨을 때 5초 안에 음악 분위기가 달라지고, 10분 연속 재생에서 끊김이 없으며, 녹음한 30초 클립을 내려받을 수 있다.
    리스크/전제
    기사 속 Lyria 3.5는 Flow Music 제품 발표이고, API로 열린 것은 Lyria RealTime 계열이다. 어느 버전이 API로 제공되는지, 무료 사용량과 키 노출 방지(서버 경유 WebSocket 프록시)를 먼저 확인해야 한다.
  5. 5

    HTML이나 URL을 넣으면 AI 티 나는 디자인 안티패턴을 찾아 점수와 수정 목록을 주는 디자인 감사 도구

    hallmark - AI 티가 안 나는 디자인 스킬

    20/25
    • DOM 파싱
    • getComputedStyle 규칙
    • LLM 보조
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  6. 6

    답을 바로 주지 않고 힌트 단계를 조절하며 학습자의 시도를 기다리는 AI 튜터 위젯

    TutorMoments

    20/25
    • LLM API
    • 상태 머신
    • 힌트 레벨 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    상급 AI가 하급 AI에게 일방적으로 지시할 때 응답이 변해 가는 과정을 관찰하는 두 에이전트 실험실

    상호작용은 홀로 있을 때 없던 AI의 동역학적 행동을 만든다

    19/25
    • LLM API
    • 대화 로그 시각화
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    소설 본문을 넣으면 인물별 외형·성격·관계도를 정리한 캐릭터 설정집을 만드는 웹앱

    도구 트렌드 — eternityspring/shuohao-skills

    19/25
    • LLM 구조화 출력
    • 관계 그래프
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이미 있는 아이디어와 겹침
Hugging Face 공격 타임라인은 32주차 2번(사고 리플레이 타임라인), GPT-Live 구축기는 20주차 5번(음성 통역 지연 계측 앱), Gemma Translator는 34주차 3번(온디바이스 음성 PWA)과 20주차 5번(음성 통역 앱), 덴마크 구두 소명은 34주차 14번, Qwen3.8-Max '성공당 비용'은 34주차 7번(비용 계산기), Databricks 라우팅은 20주차 6번(LLM 라우터 데모), LLM 테스트 케이스 함정 설계는 34주차 10번(평가 플레이그라운드), DoorDash 게이트웨이는 34주차 11번·43주차 6번(MCP 도구), Gentoo 스크래퍼 과부하는 31주차 4번(AI 크롤러 점검기)과 같은 재료라 제외했다.
도구 트렌드 중복
human-writing은 11주차 1번(AI 상투 패턴 하이라이터), open-kimi-ppt-skill은 30주차 4번(웹 슬라이드 생성기), 에이전트 플러그인 1.0은 27주차 3번(규칙 파일 변환기)과 인접해 따로 세우지 않았다.
FE 사이드 프로젝트로 만들 수 없는 것
Kitesurf(Cloudflare 인프라), JoyAI-Video-Edit(GPU 필요), LongHorizon-Harness(데스크톱 컴퓨터 사용 하네스), SkillProx·Blast Radius·CoinRAG(모델·서빙 연구), WeatherNext(공개 예보 데이터 접근 불확실), Evo 2 바이러스 합성
유료 전용·API 미공개
이매진 이미지 2.0(API 추후 공개), 완 3.0(알리바바 클라우드 유료), 뮤즈 코드(유료 구독)
단순 소식·산업·정책
Astra 예비 평가와 개발 중단, 김수키, Fable 5 생물학 안전장치, GPT-5.6 Luna 무료 확대, xAI Memphis, 메타 광고, OpenAI 대 애플, 구글 조직 개편, ChatGPT Signals, 스테이크 비유 글, 교육용 플러그인, SAP, 커서 브랜드, AMD 탈라스, 가트너, 네이버, 이스트시큐리티, Baseten
YouTube 7건
뉴스 브리핑과 쇼츠는 위 기사와 같은 주제다. 스틸리언 보안 대담은 1번 승인 판단 게임의 시나리오 참고 자료로만 쓴다.
DuckDB 자연어 데이터 탐색기
17주차 백로그와 중복
아첨 비교기
17주차 백로그와 중복

2026년 32주차 (스캔일: 2026-10-23)

후보 9건

대상: content/2026/week-32.mdx (기사 45건 + YouTube 13건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 25~31주차 소급 백로그에 이미 있는 아이디어는 제외하고, 겹친 항목은 아래 제외 목록에 적었다.

  1. 1

    손가락으로 사각 프레임을 만들면 그 영역만 잘라 효과를 거는 웹캠 앱

    도구 트렌드 — sophiamyang/finger-frame-effect-ai

    23/25
    • MediaPipe Hands
    • Canvas
    • getUserMedia
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    sophiamyang/finger-frame-effect-ai (이번 주 GitHub 트렌딩 ⭐392)
    만드는 것
    웹캠을 켜고 양손 엄지와 검지로 사진 찍는 시늉의 사각 프레임을 만들면, 그 사각형 안쪽만 흑백·픽셀화·만화 필터 같은 효과가 실시간으로 걸리는 앱. 손을 벌리면 프레임이 커지고, 손가락을 오므리면 그 순간 프레임 안 장면이 캡처돼 아래 갤러리에 쌓인다. 효과는 하단 칩으로 바꾼다.
    핵심 기술
    MediaPipe Tasks Vision의 HandLandmarker(WASM·GPU 위임), 양손 랜드마크 4점으로 사각형 계산, Canvas 2D 또는 WebGL 셰이더로 영역 효과, 제스처 상태 판정(열림·닫힘).
    완료 기준
    일반 노트북 웹캠에서 25fps 이상으로 프레임이 손을 따라가고, 프레임 제스처 인식이 10번 중 8번 이상 성공하며, 캡처한 이미지를 PNG로 내려받을 수 있다.
    리스크/전제
    원 저장소 설명이 비어 있어 구현 방식은 직접 정해야 한다. 조명이 어두우면 랜드마크가 흔들리므로 프레임 좌표에 스무딩을 넣는다. 영상은 브라우저 밖으로 나가지 않는다는 점을 첫 화면에 적는다.
  2. 2

    침입 로그를 단계별 클러스터로 묶어 재생하는 보안 사고 리플레이 타임라인

    프런티어 랩 에이전트 침입의 해부

    22/25
    • 타임라인 UI
    • 재생 컨트롤
    • JSON 이벤트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    프런티어 랩 에이전트 침입의 해부 — 2026년 7월 사고의 기술적 타임라인 / Tailscale은 Hugging Face 침입을 막지 못했다
    만드는 것
    원 글이 공개한 단계(정찰, 샌드박스 이탈, 자격 증명 획득, 측면 이동, 정답 탈취)를 이벤트 JSON으로 옮기고, 재생 버튼을 누르면 시스템 노드 지도 위로 공격 경로가 시간순으로 그어지는 리플레이 화면. 하단 타임라인 스크러버로 아무 시점이나 이동할 수 있고, 각 단계 카드에는 "여기서 무엇이 있었으면 막혔나"(짧은 수명 키, Tailnet Lock 등)를 붙인다. 이벤트 JSON 형식만 맞추면 다른 사고 보고서도 같은 화면으로 볼 수 있게 만든다.
    핵심 기술
    이벤트 스키마 설계, SVG 노드 그래프와 경로 애니메이션, 재생·일시정지·배속 컨트롤, URL 해시로 특정 시점 공유.
    완료 기준
    원 글 기준 주요 단계 10개 이상이 재생되고, 스크러버로 임의 시점에 이동하면 그 시점까지 침해된 노드가 정확히 표시되며, 두 번째 사고(43주차 IoT 연구 등)를 JSON만 바꿔 띄울 수 있다.
    리스크/전제
    원문의 명령 단위 로그 전체를 옮기지 않고 단계 요약만 쓴다. 공격 재현 도구로 오해받지 않도록 실제 명령어나 익스플로잇 세부는 넣지 않고 방어 관점 주석을 중심에 둔다. 33주차 OpenAI 타임라인도 같은 화면의 두 번째 데이터셋으로 쓸 수 있다.
  3. 3

    docx 문서 속 흰 글씨·초소형 글꼴 같은 숨은 텍스트를 찾아 드러내는 숨은 지시문 탐지기

    Word 문서를 통해 자가 전파하는 Copilot AI 웜

    22/25
    • JSZip
    • OOXML 파싱
    • 하이라이트 렌더링
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Word 문서를 통해 자가 전파하는 Copilot AI 웜
    만드는 것
    Word 파일을 드롭하면 문서 본문을 그대로 렌더링하되, 흰색·배경색과 같은 글자, 1pt 이하 글꼴, 숨김 속성, 문서 맨 끝의 긴 텍스트 덩어리를 빨간 테두리로 드러내는 검사기. 오른쪽 패널에 숨은 텍스트 목록과 "명령문처럼 보이는가" 점수를 보여주고, 해당 위치로 스크롤 이동한다. 파일은 브라우저 밖으로 나가지 않는다.
    핵심 기술
    JSZip으로 docx 압축 해제, word/document.xml의 run 속성(w:color, w:sz, w:vanish, 하이라이트) 파싱, 배경색 대비 계산, 명령형 문장 휴리스틱(정규식).
    완료 기준
    숨김 기법 5종을 넣어 직접 만든 테스트 문서에서 5종 모두 검출되고, 일반 보고서 문서 3개에서는 오탐이 2건 이하다.
    리스크/전제
    43주차 5번(간접 프롬프트 인젝션 실습장)은 공격이 모델에 먹히는지를 보는 도구이고, 이건 문서를 열기 전에 숨은 텍스트를 찾는 방어 도구라 역할이 다르다. 표·머리글·각주·텍스트 상자 안의 run까지 훑어야 빠뜨리지 않는다.
  4. 4

    웹캠 화면에서 물체 위치를 찍고 작업 단계를 계획해 오버레이하는 공간 추론 데모

    Gemini Robotics ER 2 공개

    21/25
    • Gemini API
    • getUserMedia
    • Canvas 오버레이
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Gemini Robotics ER 2 공개 — 영상 이해·작업 조율·다중 로봇 협업
    만드는 것
    책상 위를 웹캠으로 비추고 "컵을 왼쪽 접시로 옮기려면?"이라고 입력하면, 모델이 돌려준 물체 좌표에 점과 라벨을 찍고 단계별 계획을 번호 화살표로 화면 위에 겹쳐 그리는 데모. 실제 로봇은 없고 "로봇이라면 이렇게 움직인다"를 시각화하는 것이 목적이다. 프레임을 다시 찍으면 진행 상황을 판정해 다음 단계를 갱신한다.
    핵심 기술
    Gemini API(Robotics ER 계열 모델의 포인팅·바운딩 박스 출력), getUserMedia 프레임 캡처, Canvas 오버레이, Route Handler로 키 보호.
    완료 기준
    물체 4개 이상이 놓인 책상 사진에서 지정한 물체의 좌표가 실제 위치에 맞게 찍히고, 3단계 이상의 계획이 화살표로 그려지며, 물체를 옮긴 뒤 다시 찍으면 완료된 단계가 체크된다.
    리스크/전제
    Robotics ER 2의 무료 등급 제공 여부와 좌표 출력 형식(정규화 좌표 범위)을 먼저 확인한다. 프레임마다 호출하면 비용이 커지므로 버튼을 눌렀을 때만 요청한다.
  5. 5

    CVE·GHSA ID를 넣으면 OSV·NVD 데이터와 참조 커밋 존재 여부로 신뢰 신호를 보여주는 권고문 검증기

    환각으로 생성된 SQLite 취약점에 Critical CVE가 발급됨

    21/25
    • OSV API
    • NVD API
    • GitHub API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  6. 6

    문장을 쓰는 동안 ASD-STE100 규칙 위반을 밑줄로 표시하는 간소화 기술 영어 에디터

    ASD-STE100 간소화 기술 영어 Agent Skill

    21/25
    • 규칙 엔진
    • contenteditable
    • compromise NLP
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    AI 생성물·챗봇 표기 라벨을 붙이는 React 컴포넌트 키트와 적용 체크리스트 사이트

    EU, 8월부터 AI 챗봇·딥페이크 표기 의무화

    21/25
    • React
    • ARIA
    • 문서 사이트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    같은 토큰 예산에서 다수결 샘플링과 자기반성 기법의 정확도를 비교하는 실험 웹앱

    동일 토큰 예산에서는 반복 샘플링이 자기반성을 이긴다

    20/25
    • LLM API
    • 토큰 계량
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  9. 9

    생애주기·재무 상태를 폼으로 받아 구조화된 질문으로 바꿔 주는 AI 금융 질문 빌더

    질문을 제대로 하면 AI 금융 조언은 놀라울 정도로 좋아진다

    19/25
    • 폼 상태
    • 프롬프트 템플릿
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이미 있는 아이디어와 겹침
Claude Code 세션 탐색기는 20주차 3번(코딩 에이전트 세션 비용 대시보드), GPT-5.6 가격 인하와 Cursor 비용 표시 제거는 34주차 7번(비용 계산기), '모델 선택 기준은 속도'는 29주차 4번(토큰 속도 체감 데모), LFM2.5-2.6B는 34주차 12번(브라우저 로컬 LLM), OpenJDK AI 기여 금지는 27주차 1번(의존성 AI 코드 감사), qiaomu-seo는 31주차 4번(AI 크롤러 점검기), 카드뉴스 실습 영상은 30주차 4번(슬라이드 생성기), LLM wiki 영상은 31주차 5번(위키 건강 검사기), '한 줄 아이디어로 웹페이지' 쇼츠는 25주차 2번(미니 앱 빌더)과 같은 재료라 제외했다.
FE 사이드 프로젝트로 만들 수 없는 것
Raon-Speech(21B), DeepSeek V4 Flash MI300X 운영, Mac MPS 파이프라인, Qwen3.8-Max·Kimi K3·MiniMax H3 자체 호스팅, qm(Fly.io·AWS 배포 전제 하네스), genoffice(데스크톱 앱), SWE-Touch(초록만 공개)
보안 사고·정책
Claude 평가의 실제 조직 침해, OpenAI 제3자 평가 이탈, Chrome 버그 수정, EU 범용 모델 조항, 백악관 감독 방안, 중국 증류 군사 AI — 2번 리플레이 타임라인 외에는 화면으로 만들 공개 재료가 없다.
단순 소식·산업·논평
Astra 수학 난제 10개, GPT 5.6 Sol 사업 실험, 업무별 AI 도구 가이드, AI가 제품까지 만들어주지 않는다, AI-First 기업, 자동화하지 말고 없애라, ROI 시대, 아마존 시총·OpenAI 투자, 빅테크 실적, AI 부채, 아셴브레너 헤지펀드, CUDA 호환 SW, HBF, SKT A.X K2
YouTube 13건
대부분 위 기사와 같은 주제의 브리핑·리뷰·쇼츠다.
한국어 토크나이저 비교기
24주차 백로그와 중복
AI 문체 점검기
11주차 백로그와 중복

2026년 31주차 (스캔일: 2026-10-23)

후보 6건

대상: content/2026/week-31.mdx (기사 20건 + YouTube 6건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 25~30주차 소급 백로그에 이미 있는 아이디어는 제외하고, 겹친 항목은 아래 제외 목록에 적었다.

  1. 1

    계획 미리보기·단계별 위임·되돌릴 수 없는 지점 경고를 갖춘 에이전트 UX 패턴 컴포넌트 갤러리

    인터페이스가 화면을 벗어나고 있다 / 도구 트렌드 — thinking-orbs

    22/25
    • React
    • 상태 머신
    • 접근성 패턴
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    인터페이스가 화면을 벗어나고 있다 - 채팅, 음성, 에이전트형 AI가 바꾸는 UX / Jakubantalik/thinking-orbs / Claude Code의 잘못 설계된 자동 진행 기능 해부(30주차)
    만드는 것
    원 글이 꼽은 세 패턴(계획 가시성, 점진적 위임, 우아한 개입)을 실제로 눌러 볼 수 있는 컴포넌트로 만든 갤러리 사이트. 에이전트가 실행 전 단계 목록을 보여주고 사용자가 단계별로 "이것만 자동으로" 권한을 주는 위임 슬라이더, 실행 중 언제든 끼어드는 일시정지·수정 버튼, 이메일 발송·결제처럼 되돌릴 수 없는 단계 앞에서 멈추는 확인 카드, 생각 중·도구 호출 중·대기 중 상태를 구분하는 사고 인디케이터가 들어간다. 30주차 '자동 진행' 사례를 반면교사로 삼아 "응답이 없으면 진행하지 않는다"를 기본값으로 보여 주는 타임아웃 카드도 넣는다.
    핵심 기술
    React 컴포넌트와 상태 머신(XState 또는 useReducer), 가짜 에이전트 실행 시뮬레이터, 키보드·스크린리더 접근성, 패턴별 코드 복사 버튼.
    완료 기준
    패턴 5개 이상이 각각 독립 데모로 동작하고, 하나의 가상 작업(예: 출장 예약)을 처음부터 끝까지 이 컴포넌트들로 진행하는 통합 시나리오가 있으며, 모든 컨트롤을 키보드만으로 조작할 수 있다.
    리스크/전제
    43주차 10번(병렬 에이전트 대시보드), 8번(권한 정책 시뮬레이터)과 주제가 가깝다. 이 갤러리는 실제 모델 없이 UI 패턴 자체를 다루는 쪽으로 범위를 좁혀야 겹치지 않는다.
  2. 2

    Apple Health 내보내기 파일을 브라우저에서만 파싱해 보여주는 개인 건강 대시보드

    ChatGPT에 헬스 기능 출시

    21/25
    • 스트리밍 XML 파서
    • Web Worker
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    ChatGPT에 헬스 기능 출시
    만드는 것
    아이폰 건강 앱에서 내보낸 zip을 드롭하면 브라우저 안에서만 풀고 파싱해 걸음 수, 수면, 심박, 운동 기록을 주·월 단위 차트로 보여주는 대시보드. 데이터는 IndexedDB에만 저장되고 서버로 가지 않는다는 점을 상단에 크게 표시한다. 선택적으로 요약 통계(원본 기록이 아닌 집계값)만 LLM에 보내 "지난 달과 달라진 점"을 물어보는 버튼을 둔다.
    핵심 기술
    JSZip, 수백 MB XML을 다루는 스트리밍 파서(sax-js 등)를 Web Worker에서 실행, IndexedDB 저장, 차트 라이브러리.
    완료 기준
    실제 3년치 내보내기 파일(수백 MB)이 탭이 멈추지 않고 진행률과 함께 파싱되며, 새로고침 후 재파싱 없이 차트가 뜬다.
    리스크/전제
    export.xml이 매우 커서 DOMParser로 통째로 읽으면 탭이 죽는다. 스트리밍 파싱이 이 PoC의 핵심 과제다. 건강 데이터라 공개 데모는 샘플 데이터로 만들고, LLM 버튼은 기본 비활성으로 둔다.
  3. 3

    초소형 TinyStories 모델을 탭 안에서 돌려 동화를 쓰고 모델 크기와 메모리 예산을 함께 보여주는 데모

    8달러짜리 마이크로컨트롤러에서 2,890만 매개변수 LLM 실행하기

    21/25
    • transformers.js
    • WASM
    • 메모리 시각화
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    8달러짜리 마이크로컨트롤러에서 2,890만 매개변수 LLM 실행하기 / slvDev/esp32-ai
    만드는 것
    수천만 파라미터급 TinyStories 모델을 탭 안에서 내려받아 동화 첫 문장을 이어 쓰게 하는 데모. 생성되는 동안 초당 토큰 수와 함께, 기사 속 ESP32의 메모리 배치(512KB SRAM, 8MB PSRAM, 16MB 플래시)를 막대로 그려 "이 모델의 어느 부분이 어디에 들어가야 하는가"를 비교해 보여준다. 모델 크기를 바꾸면 메모리 막대와 속도가 같이 바뀐다.
    핵심 기술
    @huggingface/transformers(WASM 백엔드로 충분), TinyStories ONNX 모델, 스트리밍 토큰 출력, 메모리 예산 시각화.
    완료 기준
    첫 로딩 후 오프라인에서 동화 생성이 되고, GPU 없는 노트북에서 초당 10토큰 이상이 나오며, 모델 2종 이상을 바꿔 가며 속도와 크기를 비교할 수 있다.
    리스크/전제
    원 기사의 Per-Layer Embeddings 구조 자체를 재현하는 것은 아니다. 메모리 시각화는 기사 수치를 그대로 옮긴 설명용이다. 34주차 12번(WebLLM 채팅)과 달리 GPU가 필요 없는 초소형 모델이라는 점이 차별점이다.
  4. 4

    URL을 넣으면 robots.txt와 헤더를 읽어 AI 크롤러별 허용 여부를 표로 보여주는 점검기

    Cloudflare, AI 트래픽을 세분화해 관리하는 옵션 공개

    21/25
    • Route Handler fetch
    • robots.txt 파서
    • 크롤러 UA 목록
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Cloudflare, AI 트래픽을 세분화해 관리하는 옵션 공개
    만드는 것
    사이트 주소를 넣으면 robots.txt, X-Robots-Tag 헤더, 메타 태그, llms.txt 존재 여부를 읽어 GPTBot, ClaudeBot, Google-Extended, PerplexityBot 등 크롤러를 검색·에이전트·학습 용도별로 묶은 표에 허용·차단을 표시하는 도구. 여러 사이트를 넣으면 비교 표가 되고, 원하는 정책을 체크하면 그에 맞는 robots.txt 스니펫을 만들어 준다.
    핵심 기술
    Route Handler에서 대상 사이트 fetch(CORS 우회), robots.txt 파서(robots-parser), 크롤러 UA와 용도 매핑 JSON, 결과 캐시.
    완료 기준
    뉴스 사이트 10곳을 넣어 크롤러 10종의 허용 여부가 robots.txt 원문과 일치하게 나오고, 생성한 스니펫을 파서로 다시 읽었을 때 의도한 정책이 나온다.
    리스크/전제
    Cloudflare의 봇 관리 설정은 사이트 외부에서 보이지 않으므로 robots.txt 기준 판정이라는 한계를 결과 화면에 적는다. 크롤러 목록은 자주 바뀌니 데이터 파일로 분리한다.
  5. 5

    저장소 마크다운 위키를 링크 그래프로 그리고 깨진 링크와 오래된 페이지를 경고하는 위키 건강 검사기

    CodeAlmanac - AI 코딩 에이전트를 위한 코드베이스 위키

    20/25
    • GitHub API
    • remark
    • force graph
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    CodeAlmanac - AI 코딩 에이전트를 위한 코드베이스 위키
    만드는 것
    GitHub 저장소 주소를 넣으면 docs 폴더나 지정 경로의 마크다운 파일을 모아 문서 간 링크를 force graph로 그리고, 깨진 링크, 아무도 가리키지 않는 고아 문서, 문서가 언급한 코드 경로 중 이미 사라진 것, 마지막 수정이 코드 변경보다 오래된 문서를 경고 목록으로 보여주는 도구. CodeAlmanac의 health·validate 명령을 웹 화면으로 옮긴 셈이다.
    핵심 기술
    GitHub REST API(트리, 커밋 날짜), remark로 링크·코드 경로 추출, react-force-graph 또는 d3-force, 경고 규칙 엔진.
    완료 기준
    공개 저장소 3곳에서 그래프가 그려지고, 일부러 깨뜨린 링크와 삭제한 파일 참조가 모두 경고로 잡힌다.
    리스크/전제
    무인증 GitHub API 한도(시간당 60회)에 쉽게 걸리므로 트리 API 한 번으로 목록을 받고 파일 본문은 raw URL로 읽는다. 큰 저장소는 경로를 좁혀 검사하게 한다.
  6. 6

    MuJoCo WASM으로 브라우저에서 로봇 팔과 보행 모델을 조작하는 물리 시뮬레이션 놀이터

    피지컬 AI를 위한 시뮬레이션 현황 정리

    20/25
    • mujoco_wasm
    • three.js
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이미 있는 아이디어와 겹침
Artificial Analysis 리더보드는 30주차 3번(모델 산점도 탐색기), AI 생산성의 착시는 27주차 2번(체감·실측 타임 트래커), 일자리 데이터는 43주차 11번(벤치마크 커버리지 트리맵), FLUX 3는 43주차 16번(FLUX 3 부분 편집), baidu/Unlimited-OCR은 43주차 12번(OCR 웹앱), OptMem은 43주차 9번(메모리 패널 챗봇), 클로드 5 규칙 줄이기는 10주차 2번(CLAUDE.md·AGENTS.md 린터)과 같은 아이디어다.
FE 사이드 프로젝트로 만들 수 없는 것
OpenAI·Hugging Face 보안 사고(사고 리플레이는 32주차 2번에서 다룸), Gemini 3.6 Flash 계열(새 앱 컨셉 없음), Solar-Open2-250B, Laguna-S-2.1, AREX·SLAI T-Rex 논문, cindy(설치형 에이전트)
단순 소식·정책·논평
머스크 동료 평가 제안, 젠슨 황 오픈웨이트 성명, Oracle 감원, DeepSeek 투자 중단, SK·네이버 투자, Claude Cookbook(참고 자료), ai-copywriter
YouTube 6건
대부분 위 기사와 같은 주제의 브리핑·리뷰다. Bun 하네스 해부 영상은 비용 분석이라 34주차 7번과 겹친다.
규칙 다이어트 린터
10주차 백로그와 중복

2026년 30주차 (스캔일: 2026-10-23)

후보 4건

대상: content/2026/week-30.mdx (기사 15건 + YouTube 6건 + 도구 트렌드 섹션)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 25~29주차 소급 백로그에 이미 있는 아이디어는 제외했다. 정책·산업 기사가 많은 주라 후보가 적다.

  1. 1

    코딩 에이전트 세션 로그를 저장소 파일 지도 위에 재생해 읽기·수정 위치가 빛나는 3D 시각화

    Mindwalk - 코딩 에이전트 세션을 코드베이스 3D 지도 위에서 재생

    23/25
    • react-three-fiber
    • JSONL 파서
    • GitHub tree API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Mindwalk - 코딩 에이전트 세션을 코드베이스 3D 지도 위에서 재생하는 시각화 도구
    만드는 것
    저장소 디렉터리 구조를 도시처럼 블록으로 쌓은 3D 지도를 그리고, Claude Code나 Codex 세션 JSONL을 드롭하면 에이전트가 파일을 검색·읽기·수정한 순서대로 해당 블록에 녹색(seen)·파랑(read)·호박색(edited) 불이 켜지는 재생기. 타임라인 스크러버로 앞뒤로 움직이고, HUD에 오류율, 여러 번 고친 파일, 마지막 테스트 이후 수정된 파일을 띄운다. 저장소는 GitHub 주소로 트리를 받아 오고 세션 로그는 브라우저 밖으로 나가지 않는다.
    핵심 기술
    react-three-fiber + drei(인스턴스드 메시로 파일 수천 개 처리), JSONL 스트리밍 파싱과 도구 호출에서 파일 경로 추출, GitHub tree API, 재생 상태 관리.
    완료 기준
    파일 2,000개 저장소에서 60fps에 가깝게 회전·확대되고, 실제 세션 로그 하나를 재생했을 때 에이전트가 건드린 파일이 로그의 도구 호출과 정확히 일치하게 표시된다.
    리스크/전제
    세션 로그 형식은 도구 버전마다 바뀔 수 있어 파서를 어댑터로 분리한다. 20주차 3번(코딩 에이전트 세션 비용 대시보드)과 파서를 공유하되, 그쪽은 비용·시간 집계이고 이쪽은 공간 재생이라 화면 목적이 다르다.
  2. 2

    원본과 보정된 매물 사진을 겹쳐 바뀐 영역을 표시하는 AI 편집 비교 뷰어

    뉴욕시, 임대 광고 AI 이미지 사용 공개 의무화 추진

    21/25
    • pixelmatch
    • Canvas
    • 비교 슬라이더
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Mamdani 뉴욕시장, 임대 광고에 AI 이미지를 몰래 사용할 수 없다고 밝혀
    만드는 것
    같은 장소의 사진 두 장(원본과 광고용 보정본)을 올리면 자동으로 정렬한 뒤, 좌우 비교 슬라이더와 함께 픽셀 차이가 큰 영역을 히트맵으로 겹쳐 보여주는 뷰어. "창밖 풍경이 바뀜", "바닥 색이 바뀜"처럼 차이 영역마다 사용자가 메모를 달 수 있고, 결과를 한 장짜리 비교 이미지로 내보낸다. 원본이 없을 때는 C2PA 서명 유무를 함께 확인하는 탭을 둔다.
    핵심 기술
    pixelmatch, 크기·위치 정렬(특징점 매칭이 어려우면 수동 4점 정렬), Canvas 합성, 비교 슬라이더 컴포넌트.
    완료 기준
    원본과 AI로 일부만 바꾼 이미지 쌍 5개에서 바뀐 영역이 히트맵에 뚜렷하게 잡히고, 같은 사진을 재압축만 한 쌍에서는 노이즈 수준으로만 나온다.
    리스크/전제
    원본 없이 한 장만으로 AI 편집을 판별하는 것은 이 PoC 범위가 아니며, 그렇게 오해받지 않게 화면 문구를 정한다. C2PA 탭은 34주차 1번(C2PA 검증 웹앱)의 결과를 재사용한다.
  3. 3

    OpenRouter 모델 목록으로 오픈·폐쇄 모델의 가격·컨텍스트를 축을 바꿔 비교하는 산점도 탐색기

    2026년 7월 오픈소스 AI 현황

    21/25
    • OpenRouter API
    • 산점도 차트
    • URL 상태
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    2026년 7월 오픈소스 AI 현황 / Claude Opus 5, Artificial Analysis 지능 리더보드 1위(31주차)
    만드는 것
    OpenRouter 공개 모델 목록 API에서 모델별 입력·출력 단가, 컨텍스트 길이, 제공자, 공개 가중치 여부를 받아 산점도로 그리는 탐색기. X축과 Y축을 가격·컨텍스트·출시일 중에서 고르고, 오픈 웨이트와 폐쇄형을 색으로 나누며, 점을 누르면 모델 상세와 제공자별 가격 차이가 나온다. 31주차 기사처럼 지능 점수를 수동 데이터로 붙이면 "가격 대비 지능" 경계선을 그어 볼 수 있다.
    핵심 기술
    OpenRouter /api/v1/models(키 불필요), ISR로 하루 1회 갱신, 산점도 차트(Observable Plot, visx 등), 필터 상태를 URL에 저장.
    완료 기준
    모델 300개 이상이 한 화면에 그려지고, 축 전환과 필터가 0.5초 안에 반영되며, 공유 링크를 열면 같은 뷰가 복원된다.
    리스크/전제
    원 기사의 토큰 처리량 점유율 데이터는 공개 API로 받을 수 없어 가격·컨텍스트 중심으로 시작한다. 오픈 웨이트 여부는 API에 명시되지 않을 수 있어 수동 매핑 파일이 필요하다. 34주차 8번(HF 다운로드 대시보드)과 데이터 출처가 달라 겹치지 않는다.
  4. 4

    마크다운 원고를 넣으면 LLM이 웹 슬라이드 덱으로 바꿔 주고 브라우저에서 바로 발표하는 생성기

    도구 트렌드 — zarazhangrui/frontend-slides

    20/25
    • LLM API
    • 슬라이드 렌더러
    • 키보드 내비게이션
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    zarazhangrui/frontend-slides (Claude Code Hot ⭐25941)
    만드는 것
    메모나 글 초안을 붙여넣으면 LLM이 슬라이드 구성(제목, 요점, 도식 제안)을 JSON으로 만들고, 그 JSON을 미리 만든 레이아웃 컴포넌트 몇 종으로 렌더링해 브라우저에서 바로 발표할 수 있는 덱을 만드는 웹앱. 슬라이드마다 다시 생성·레이아웃 바꾸기 버튼이 있고, 발표자 노트와 키보드 이동, PDF 내보내기를 지원한다.
    핵심 기술
    AI SDK generateObject(슬라이드 스키마), 레이아웃 컴포넌트, CSS 스크롤 스냅 또는 reveal.js, 인쇄용 CSS로 PDF 내보내기.
    완료 기준
    2,000자 원고로 8~12장 덱이 30초 안에 나오고, 한 장만 다시 생성해도 나머지가 유지되며, 키보드로 끝까지 발표할 수 있다.
    리스크/전제
    모델에게 HTML을 통째로 쓰게 하면 디자인이 매번 무너지므로, 구조만 받고 렌더링은 고정 컴포넌트가 맡게 하는 것이 핵심 설계다.
제외한 항목
이미 있는 아이디어와 겹침
큐원 3.8은 34주차 12번(브라우저 로컬 LLM), AI 코드 검토 한계(400 LOC/시간)는 34주차 9번·43주차 7번(PR 리뷰 도구), GPT-Red 자동 레드팀은 43주차 5번(프롬프트 인젝션 실습장), penecho(AI 공유 캔버스)는 25주차 3번(Excalidraw 자동완성), quantumbyte(앱 빌더 엔진)는 25주차 2번(미니 앱 빌더)과 같은 재료라 제외했다.
다른 주차 후보의 재료로 넘긴 것
Claude Code 자동 진행 기능 해부는 독립 후보로 세우기엔 화면이 작아, 31주차 1번(에이전트 UX 패턴 갤러리)의 타임아웃 카드 재료로 넘겼다.
FE 사이드 프로젝트로 만들 수 없는 것
cue(macOS 전용), vmodal Flutter SDK, Trading-Bot(스마트 컨트랙트), Bonsai-27B GGUF, LongStraw·VideoChat3 논문, Inkling(세부 사양 미확인)
단순 소식·정책·산업
Fable 5 요금제 포함, 바이오리질리언스, 데이터센터 반대 시위(공개 데이터셋 없음), Apple 법적 서한, 애플 시총, 100만 키워드 검색 영향(키워드 데이터가 유료 SEO 도구 기반)
YouTube 6건
대부분 브리핑·리뷰·대담이다.

2026년 29주차 (스캔일: 2026-10-23)

후보 7건

대상: content/2026/week-29.mdx (기사 21건 + YouTube 6건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 25~27주차 소급 백로그에 이미 있는 아이디어는 제외했다(28주차 파일 없음).

  1. 1

    움직이는 점으로만 글자가 보이는 Ghost Font 문구 생성기

    Ghost Font - 사람은 읽지만 AI는 읽기 어려운 글꼴

    23/25
    • Canvas
    • requestAnimationFrame
    • URL 공유
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Ghost Font - 사람은 읽지만 AI는 읽기 어려운 글꼴
    만드는 것
    문구를 입력하면 화면 전체가 무작위 점으로 덮이고, 글자 모양 안쪽의 점만 한 방향으로 흐르고 바깥 점은 반대 방향으로 흘러 움직일 때만 글자가 보이는 페이지. 일시정지를 누르면 글자가 사라지는 것을 바로 확인할 수 있고, 점 밀도·속도·방향을 슬라이더로 조절한다. 문구는 URL에 인코딩돼 링크로 공유되며, 짧은 영상으로 녹화해 내려받는 버튼도 있다.
    핵심 기술
    오프스크린 Canvas에 글자를 그려 마스크 생성, 수만 개 점의 위치 업데이트(타입드 배열), requestAnimationFrame 렌더 루프, canvas.captureStream + MediaRecorder로 녹화.
    완료 기준
    점 5만 개에서 60fps를 유지하고, 정지 화면 스크린샷 한 장으로는 글자가 보이지 않지만 재생 중에는 한글 문구가 읽히며, 공유 링크로 같은 문구가 재현된다.
    리스크/전제
    한글은 획이 복잡해 점 밀도가 낮으면 읽히지 않으므로 글꼴 굵기와 밀도 기본값을 실험으로 정한다. 원 글이 밝혔듯 프레임 차분 분석에는 뚫리는 시각 실험일 뿐 암호가 아니라는 점을 페이지에 적는다.
  2. 2

    DevTools에서 내보낸 HAR 파일 속 요청 본문을 훑어 비밀값·파일 내용 유출을 하이라이트하는 점검 뷰어

    xAI Grok Build CLI가 xAI로 전송하는 데이터: 와이어 수준 분석

    22/25
    • HAR 파서
    • 시크릿 탐지 정규식
    • Web Worker
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    xAI Grok Build CLI가 xAI로 전송하는 데이터: 와이어 수준 분석
    만드는 것
    브라우저 DevTools나 mitmproxy에서 내보낸 HAR 파일을 드롭하면 요청을 호스트별로 묶고, 요청 본문에서 API 키·토큰·.env 형식 값·개인 키 블록·긴 소스 코드 덩어리를 찾아 빨간색으로 표시하는 뷰어. 호스트별 전송량 막대로 "모델 요청은 192KB인데 저장 엔드포인트로 5GB" 같은 불균형을 한눈에 보이게 하고, 발견한 비밀값은 화면에서 기본으로 가려 둔다.
    핵심 기술
    HAR(JSON) 스트리밍 파싱, gitleaks 규칙을 참고한 정규식 세트, 엔트로피 기반 비밀값 후보 탐지, Web Worker 처리, 가상 스크롤 목록.
    완료 기준
    가짜 비밀값 10종을 심은 테스트 HAR에서 10종 모두 검출되고, 100MB HAR가 탭 멈춤 없이 처리되며, 파일이 서버로 전송되지 않는다는 것을 네트워크 탭으로 확인할 수 있다.
    리스크/전제
    CLI 도구의 트래픽은 브라우저 HAR로 바로 잡히지 않아 사용자가 mitmproxy 등으로 HAR를 만들어야 한다. 이 과정을 안내하는 문서가 필요하다. 오탐을 줄이려면 규칙별로 켜고 끌 수 있어야 한다.
  3. 3

    고전 수학 애플릿을 인터랙티브 웹 시각화로 되살린 수학 갤러리

    현대 코딩 에이전트로 되살린 옛 수학 앱과 새로 만든 앱

    21/25
    • Canvas
    • SVG
    • 포인터 이벤트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    현대 코딩 에이전트로 되살린 옛 수학 앱과 새로 만든 앱
    만드는 것
    Terry Tao가 했던 것처럼 교과서적인 수학 시각화 5~6개(푸리에 급수로 그림 그리기, 몬테카를로 원주율, 뷔퐁의 바늘, 복소함수 정의역 색칠, 집합 벤 다이어그램 연산 등)를 드래그로 조작하는 인터랙티브 갤러리. 각 애플릿에 짧은 설명과 "이 값을 바꾸면 무엇이 달라지는지" 안내를 붙이고, 모바일 터치에서도 동작하게 만든다.
    핵심 기술
    Canvas 2D·SVG, Pointer Events, requestAnimationFrame, 필요하면 JSXGraph 같은 기하 라이브러리. 코딩 에이전트로 초안을 만들고 직접 검증하는 과정 자체를 글로 남긴다.
    완료 기준
    애플릿 5개 이상이 데스크톱·모바일에서 동작하고, 각 애플릿의 수치(예: 몬테카를로 추정값)가 이론값으로 수렴하는 것을 화면에서 확인할 수 있다.
    리스크/전제
    원 기사의 Java 애플릿 원본을 그대로 이식하려면 라이선스 확인이 필요하므로, 같은 주제를 새로 구현하는 쪽으로 간다.
  4. 4

    초당 20·100·2,000토큰 스트리밍을 나란히 재생해 속도 체감을 비교하는 데모

    세레브라스·업스테이지, 국내에 '초당 2000토큰' 초고속 추론 제공

    21/25
    • ReadableStream
    • requestAnimationFrame
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  5. 5

    같은 과제로 여러 모델이 만든 단일 HTML 앱을 샌드박스 iframe에 나란히 띄워 비교·투표하는 앱 아레나

    GPT-5.6·Grok 4.5·Claude·Muse Spark로 같은 앱 4개를 만든 결과

    20/25
    • LLM API
    • iframe sandbox
    • srcdoc
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  6. 6

    요청 하나가 토큰화부터 GPU까지 거치는 15단계를 스크롤로 따라가는 해설 페이지

    AI 토큰은 데이터센터를 어떻게 여행하는가

    20/25
    • 스크롤 연동 애니메이션
    • SVG
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    NVIDIA·CoreWeave·Nebius 사이 돈과 GPU 흐름을 그린 순환 금융 Sankey 시각화

    NVIDIA·CoreWeave·Nebius가 만든 GPU 붐의 순환 금융 구조

    19/25
    • d3-sankey
    • 정적 데이터
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이미 있는 아이디어와 겹침
GPT-Live 실시간 음성 모델은 20주차 5번(음성 통역 지연 계측 앱), 5번 앱 아레나는 34주차 4번(텍스트 아레나)과 인접하지만 실행 가능한 앱을 나란히 띄운다는 점에서 별도 후보로 남겼다.
FE 사이드 프로젝트로 만들 수 없는 것
ChatGPT Work(제품), GPT-5.6 Sol 울트라 수학 증명, 프로덕션 에이전트 GPT-5.6 이전 사례(측정 데이터 비공개), 메타 뮤즈이미지(API 정보 없음), Data for Agents
단순 소식·정책·논평
GPT-5.6 정식 출시, Boko Haram AI 활용, 중국산 오픈소스 규제 행정명령, A24 파트너십, AI 에이전트가 새로운 SaaS다
YouTube 6건
브리핑·리뷰·대담 위주이고, CREAO AI는 에이전트 반복 실행 서비스 소개라 후보로 세우지 않았다.
도구 스키마 토큰 분석기
23주차 백로그와 중복
에이전트 세션 로그 대시보드
20주차 백로그와 중복

2026년 27주차 (스캔일: 2026-10-23)

후보 5건

대상: content/2026/week-27.mdx (기사 20건 + YouTube 7건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 25·26주차 소급 백로그에 이미 있는 아이디어는 제외했다. 정책·논평 기사가 많아 후보가 적다.

  1. 1

    package.json 의존성 저장소들의 커밋에서 AI 공동 작성 흔적을 찾아 비율로 보여주는 의존성 감사 도구

    의존성에 LLM 생성 코드 금지 / Godot, AI 작성 코드 기여 거부

    21/25
    • npm registry API
    • GitHub REST API
    • 트리 시각화
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    의존성에 LLM 생성 코드 금지 / 오픈소스 게임 엔진 Godot, AI 작성 코드 기여 거부 방침
    만드는 것
    package.json을 붙여넣으면 직접 의존성(옵션으로 2단계까지)의 GitHub 저장소를 찾아 최근 커밋 N개를 훑고, Co-Authored-By: Claude, Generated with, Copilot·Codex 봇 계정 같은 AI 작성 흔적의 비율을 패키지별로 보여주는 감사 도구. 결과는 의존성 트리에 색 배지로 표시되고, 흔적이 많은 패키지는 해당 커밋 링크로 바로 이동할 수 있다. git-annex가 100시간 들인 작업의 첫 단계를 자동화하는 셈이다.
    핵심 기술
    npm registry API(저장소 URL 확인), GitHub REST API(커밋 목록, 작성자), 트레일러·봇 패턴 매칭 규칙, 트리 시각화, 결과 캐시.
    완료 기준
    의존성 30개짜리 프로젝트에서 2분 안에 감사가 끝나고, AI 공동 작성 트레일러를 일부러 넣은 테스트 저장소가 정확히 잡히며, 결과를 JSON으로 내보낼 수 있다.
    리스크/전제
    커밋 메시지에 표시가 없는 AI 코드는 잡을 수 없으므로 "표시된 흔적"만 센다는 한계를 결과 화면에 적는다. 무인증 API 한도 때문에 사용자 GitHub 토큰 입력(세션 저장, 서버 미저장)이 사실상 필요하다. 이 도구가 특정 메인테이너를 비난하는 용도로 쓰이지 않게 문구를 중립적으로 둔다.
  2. 2

    작업마다 예상 시간과 실제 시간, AI 사용 여부를 기록해 체감과 실측의 차이를 보여주는 타임 트래커 PWA

    체감은 20% 빨라졌지만 실측은 19% 느려졌다

    21/25
    • PWA
    • IndexedDB
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    체감은 20% 빨라졌지만 실측은 19% 느려졌다: AI 코딩 생산성의 착시
    만드는 것
    작업을 시작할 때 "예상 시간"과 "AI 사용 여부"를 고르고 타이머를 켠 뒤, 끝나면 "체감상 얼마나 걸린 것 같은지"를 한 번 더 입력하는 PWA. 몇 주 쌓이면 AI 사용·미사용 작업별로 예상·체감·실측을 나란히 비교하는 차트가 나오고, "AI를 쓸 때 체감이 실측보다 평균 몇 % 짧았다" 같은 개인 착시 지표를 보여준다.
    핵심 기술
    PWA(오프라인, 홈 화면 설치), IndexedDB, 백그라운드에서도 맞는 타이머(시작 시각 기록 방식), 차트, CSV 내보내기.
    완료 기준
    앱을 닫았다 열어도 진행 중 타이머가 정확히 이어지고, 작업 20건 이상 입력 후 세 가지 시간 비교 차트가 그려지며, 데이터가 기기 밖으로 나가지 않는다.
    리스크/전제
    자기 기록이라 편향이 크다. 원 기사의 연구처럼 엄밀한 측정이 아니라 개인 회고 도구라는 점을 분명히 한다. 26주차 7번(AI 의존 자기 실험)과 묶어 하나의 "AI 습관 실험" 시리즈로 내도 된다.
  3. 3

    RULES.md 하나를 넣으면 CLAUDE.md·.cursorrules·copilot-instructions 등 도구별 규칙 파일로 변환하는 웹 변환기

    Show GN: VHK - 풀사이클 AI 코딩 하네스

    21/25
    • 마크다운 파서
    • 템플릿
    • JSZip 다운로드
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Show GN: VHK - 모델·에이전트를 갈아타도 안 무너지는 풀사이클 AI 코딩 하네스
    만드는 것
    왼쪽에 공통 규칙을 마크다운으로 쓰면 오른쪽 탭에 CLAUDE.md, AGENTS.md, .cursorrules·.cursor/rules/*.mdc, .github/copilot-instructions.md, GEMINI.md 등 도구별 형식이 실시간으로 만들어지는 변환기. 도구별로만 넣을 내용은 <!-- only: cursor --> 같은 주석으로 구분하고, 전체를 zip으로 내려받거나 개별 파일을 복사한다.
    핵심 기술
    remark 파서, 도구별 템플릿과 프론트매터 규칙, JSZip, 로컬 저장.
    완료 기준
    도구 6종 이상의 파일이 생성되고, 도구별 전용 블록이 해당 파일에만 들어가며, 생성한 파일을 각 도구 공식 문서의 형식과 대조해 어긋남이 없다.
    리스크/전제
    도구들의 규칙 파일 형식이 자주 바뀌므로 형식 정의를 데이터 파일로 분리하고 출처 문서 링크를 같이 둔다. 10주차 2번(CLAUDE.md·AGENTS.md 린터)과 붙이면 "작성→정리→배포" 흐름이 된다.
  4. 4

    콘티 텍스트를 컷 이미지로 만들고 원하는 컷만 짧은 영상으로 움직이는 스토리보드 웹앱

    Google, Nano Banana 2 Lite·Gemini Omni Flash 공개

    19/25
    • Gemini API
    • 타임라인 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Google, Nano Banana 2 Lite·Gemini Omni Flash 공개
    만드는 것
    짧은 콘티(장면 6~8개)를 입력하면 장면마다 Nano Banana 2 Lite로 컷 이미지를 빠르게 만들어 가로 타임라인에 늘어놓는 스토리보드. 마음에 들지 않는 컷은 다시 뽑고, 강조할 컷 한두 개만 골라 Gemini Omni Flash로 몇 초짜리 영상으로 움직인다. 마지막에 컷과 영상을 이어 붙인 미리보기를 재생한다.
    핵심 기술
    Gemini API(이미지 생성, 영상 생성 작업 폴링), 드래그 정렬 타임라인, 생성 비용 실시간 합계 표시, 결과 IndexedDB 보관.
    완료 기준
    장면 8개 이미지가 1분 안에 모두 생성되고, 영상 1컷이 타임라인에 끼워져 재생되며, 화면 상단에 이번 세션 누적 비용이 표시된다.
    리스크/전제
    이미지는 1,000장당 $0.034로 저렴하지만 영상은 초당 $0.10이라 비용 점수가 낮다. 영상 생성은 사용자 확인을 한 번 더 거치게 하고, 공개 데모는 사용자 키 입력 방식으로 둔다. 26주차 8번(동화책 생성)과 이미지 생성 부분을 공유할 수 있다.
  5. 5

    에이전트가 제안한 diff를 hunk 단위로 승인·거부하며 단계별 커밋을 쌓는 짧은 목줄 코딩 UI

    Fable을 이기는 '짧은 목줄' AI 코딩 방법

    19/25
    • diff2html
    • LLM API
    • isomorphic-git
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이미 있는 아이디어와 겹침
세션 기록 기억이 에이전트에 유용하지 않다는 글은 43주차 9번(메모리 패널 챗봇)과 같은 주제, CursorBench 3.1 점수는 34주차 16번(모델 타임라인)·4번(아레나)에 흡수된다. 실시간 음성 쇼츠(중국 AI)는 20주차 5번(음성 통역 지연 계측 앱)과 같은 주제다.
FE 사이드 프로젝트로 만들 수 없는 것
Kimi K2.7 Code Copilot 탑재(제품 소식), Senior SWE-Bench(벤치마크 인프라), A24 파트너십
정책·논평
일본 최고재판소 AI 발명자 판결, 백악관 출시 가이드라인, Alibaba의 Claude Code 사내 금지, AI와 함께한 모험(경험담)
단순 소식·산업
GPT-5.6 Sol 프리뷰, 삼성 피지컬 AI 클러스터, MS 코파일럿 통합
YouTube 7건
브리핑·대담 위주이고, 영상 퀄리티 쇼츠는 4번 스토리보드의 프롬프트 참고 정도로만 쓸 수 있다.
음성 에이전트 빌더
20주차 백로그와 중복

2026년 26주차 (스캔일: 2026-10-23)

후보 9건

대상: content/2026/week-26.mdx (기사 21건 + YouTube 6건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 25주차 소급 백로그에 이미 있는 아이디어는 제외했다.

  1. 1

    짧은 홍보 문구 하나가 검색 순위와 AI 답변을 뒤집는 과정을 보여주는 검색 오염 실험장

    Reddit을 이용해 AI 검색을 조작하는 일은 너무 쉽다

    23/25
    • MiniSearch BM25
    • LLM API
    • diff 하이라이트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Reddit을 이용해 AI 검색을 조작하는 일은 너무 쉽다
    만드는 것
    가짜 커뮤니티 댓글 50개 정도로 된 작은 검색 코퍼스와 질문 하나("가성비 무선 이어폰 추천")가 주어진 실험 화면. 사용자가 13단어 안팎의 홍보 문구를 새 댓글로 넣으면, 왼쪽에서 BM25 검색 순위가 어떻게 바뀌는지 위아래 이동 애니메이션으로 보여주고, 오른쪽에서 상위 결과를 근거로 LLM이 쓴 답변이 그 문구를 인용하는지 하이라이트한다. 질의와 어휘를 많이 겹칠수록 순위가 오르는 것이 눈에 보이는 것이 핵심이다. 마지막 탭에서 출처 다양성 제한, 작성자 평판 가중치 같은 방어책을 켜고 다시 돌려 본다.
    핵심 기술
    MiniSearch(BM25) 클라이언트 검색, 순위 변화 애니메이션(FLIP), Route Handler에서 LLM 호출, 인용 문장 매칭 하이라이트.
    완료 기준
    문구 하나를 넣었을 때 순위가 바뀌고 답변에 그 문구가 인용되는 사례가 재현되며, 방어책 2종을 켜면 같은 문구의 영향이 줄어드는 것을 전후 비교로 보여준다.
    리스크/전제
    실제 Reddit이나 검색 서비스를 대상으로 실험하지 않고 닫힌 가짜 코퍼스만 쓴다. 43주차 5번(간접 프롬프트 인젝션)은 숨은 지시문이 모델 행동을 바꾸는 문제이고, 이건 검색 단계에서 어휘 유사도로 근거가 오염되는 문제라 다르다.
  2. 2

    브라우저에서 HWP·HWPX 공문서를 열어 보고 마크다운으로 바꿔 주는 뷰어

    AI 시대에 K-공문서(HWP)를 못 여는 진짜 이유와 해법 논의

    21/25
    • hwp.js
    • JSZip
    • File API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI 시대에 K-공문서(HWP)를 못 여는 진짜 이유와 해법 논의
    만드는 것
    .hwp나 .hwpx 파일을 드롭하면 설치 없이 브라우저에서 본문을 렌더링하고, 오른쪽 탭에서 같은 내용을 마크다운으로 바꿔 복사하거나 .md로 내려받는 뷰어. 표와 문단 구조를 최대한 살리고, 변환하지 못한 요소(수식, 특수 개체)는 위치에 표시를 남긴다. "LLM에 넣기 좋게 변환" 버튼이 데모 포인트다.
    핵심 기술
    hwp.js(HWP 5.0 바이너리 파서), HWPX는 JSZip으로 열어 OWPML XML 파싱, 마크다운 직렬화(표는 GFM), Web Worker.
    완료 기준
    정부 공개 공문서 HWP 5개와 HWPX 3개에서 본문과 표가 읽히는 마크다운이 나오고, 파일이 서버로 전송되지 않는다.
    리스크/전제
    hwp.js의 유지보수 상태와 표 지원 수준을 먼저 확인해야 한다. HWP 형식 공개 문서의 라이선스 조건(한컴 공개 문서 사용 고지)을 지킨다. 배포 문서 일부는 암호화·배포용 문서라 열리지 않을 수 있으며, 그 경우 안내 메시지를 띄운다.
  3. 3

    모르는 질문에 "모른다"고 답하는지까지 채점하는 환각 퀴즈 벤치

    GPT-5.5, MIT 라이선스 GLM-5.2보다 환각률 3배

    20/25
    • LLM API
    • 기권 채점
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    GPT-5.5, MIT 라이선스 GLM-5.2보다 환각률 3배
    만드는 것
    답이 확실한 질문, 답이 없는 질문(존재하지 않는 논문, 가짜 API), 최신 정보가 필요한 질문을 섞은 퀴즈 세트를 여러 모델에 돌려 정답·오답·기권을 따로 채점하는 웹앱. AA-Omniscience처럼 틀린 답에는 감점, 기권에는 0점을 줘서 "아는 척"에 벌점을 매기고, 모델별 환각률·기권률·정확도를 막대 차트로 나란히 보여준다. 사용자가 질문을 추가해 자신만의 세트를 만들 수 있다.
    핵심 기술
    AI SDK 다중 프로바이더 호출, 답변 판정(정답 매칭 + LLM 심판 보조), 결과 IndexedDB 저장, 차트.
    완료 기준
    질문 50개 × 모델 3개 결과가 표와 차트로 나오고, 답이 없는 질문 20개에 대한 모델별 기권률 차이가 확인되며, 같은 세트를 다시 돌렸을 때 결과 편차를 함께 보여준다.
    리스크/전제
    34주차 4번(아레나)은 같은 프롬프트의 출력을 비교하는 화면이고, 이건 채점 규칙이 핵심이라 다르다. 34주차 10번(평가 플레이그라운드)의 LLM 심판 코드를 재사용할 수 있다. GLM-5.2는 저가라 비교 대상에 넣기 쉽다.
  4. 4

    웹페이지 이미지에 빠진 alt 텍스트를 멀티모달 모델로 채워 주는 접근성 크롬 확장

    Gemma 4 12B: 인코더 없는 통합 멀티모달 모델 공개

    20/25
    • MV3 확장
    • Gemma API
    • DOM 접근성
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Gemma 4 12B: 인코더 없는 통합 멀티모달 모델 공개
    만드는 것
    아무 웹페이지에서 확장 아이콘을 누르면 alt가 비어 있거나 "image" 같은 무의미한 값인 이미지를 찾아 테두리로 표시하고, 각 이미지에 멀티모달 모델이 만든 설명을 제안하는 크롬 확장. 제안을 수락하면 그 페이지의 DOM에 alt를 넣어 스크린리더가 바로 읽게 하고, 개발자용으로는 수정 목록을 HTML 스니펫으로 복사할 수 있다. 페이지 전체의 접근성 점수 변화도 보여준다.
    핵심 기술
    MV3 content script, 이미지 수집과 축소(Canvas), Gemini API의 Gemma 4 호출(서비스 워커 경유), 사이드 패널 UI.
    완료 기준
    이미지 20개가 있는 뉴스 페이지에서 빠진 alt를 모두 찾고, 제안 설명이 이미지 내용과 맞는 비율이 80% 이상이며, NVDA나 VoiceOver로 수락한 alt가 읽히는 것을 확인한다.
    리스크/전제
    Gemma 4 12B가 AI Studio API로 무료 제공되는지 확인하고, 안 되면 다른 저가 멀티모달 모델로 대체한다. 이미지를 외부로 보내므로 사이트별 허용 목록을 두고 개인정보가 담긴 페이지에서는 동작하지 않게 한다. 장식 이미지는 빈 alt가 맞다는 점도 제안에 반영해야 한다.
  5. 5

    LLM 출력을 Zod 스키마로 검증하고 실패·재시도 과정을 타임라인으로 보여주는 구조화 출력 디버거

    신뢰할 수 있는 에이전트형 AI 시스템 구축

    20/25
    • AI SDK generateObject
    • Zod
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  6. 6

    미해독 문자 Linear A 말뭉치의 기호 빈도와 공기 관계를 탐색하는 웹 도구

    AI 엔지니어가 Linear A를 해독했다고 주장

    19/25
    • 공개 말뭉치 데이터
    • D3
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    AI 도움 유무로 같은 과제를 풀고 이해도 퀴즈 점수를 비교하는 자기 실험 웹앱

    AI가 우리의 능력을 망치고 있는가?

    19/25
    • LLM API
    • 타이머
    • 로컬 기록
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    주인공과 줄거리를 넣으면 삽화 있는 동화책을 만들어 PDF로 내려받는 웹앱

    실전 수익형 AI 동화책 SaaS (YouTube)

    19/25
    • LLM API
    • 이미지 생성 API
    • react-pdf
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  9. 9

    OpenAI 호환 요청을 무료 모델 여러 곳으로 라우팅하고 응답 속도를 기록하는 프록시 대시보드

    Show GN: opencodex — Codex에서 아무 LLM이나 쓸 수 있는 로컬 프록시

    18/25
    • Route Handler
    • OpenAI 호환 API
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이미 있는 아이디어와 겹침
open-code-review는 34주차 9번(PR 리뷰 대시보드)·43주차 7번(PR 위험도 확장), ponytail은 43주차 제외 목록과 같은 이유(개발 워크플로 개선), GLM-5.2를 Claude Code에 붙이는 영상은 34주차 4번(아레나)과 같은 재료라 제외했다.
FE 사이드 프로젝트로 만들 수 없는 것
GLM-5.2 자체 호스팅(753B), Beyond LoRA(학습), 하이퍼네트워크, myDoo(IDE 제품), 구글 TPU 무료 사용, Codex iOS 플러그인, 헤르메스 에이전트 운영기
단순 소식·산업
John Jumper 이적, 삼성 ChatGPT·Codex 도입, AI 비용 부담 기업들, GPT-5.6 출시 전망, Google Home Speaker, ChatGPT 건강 응답 개선, Claude 신원 확인 절차
확인이 필요한 전제
6번 Linear A 탐색기는 GORILA·SigLA 말뭉치를 기계 판독 가능한 형태로 받을 수 있는지와 재배포 조건을 먼저 확인해야 한다. 9번 무료 모델 라우터는 무료 등급 API들의 약관상 프록시 재배포가 허용되는지 확인이 필요하다.
YouTube 6건
동화책 SaaS 영상만 8번 재료로 썼고, 나머지는 브리핑·후기다.
실시간 대화 통역 웹앱
20주차 백로그와 중복

2026년 25주차 (스캔일: 2026-10-23)

후보 5건

대상: content/2026/week-25.mdx (기사 11건 + YouTube 5건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그에 이미 있는 아이디어는 제외했다. 기사 수가 적은 주라 후보도 적다.

  1. 1

    GitHub 저장소를 한 프롬프트로 묶어 파일별 토큰을 트리맵으로 보여주고 모델별 컨텍스트 창 적합도를 판정하는 패커

    지푸AI, 100만 토큰 컨텍스트 창 'GLM-5.2' 출시

    21/25
    • GitHub REST API
    • js-tiktoken
    • D3 treemap
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    지푸AI, 100만 토큰 컨텍스트 창 'GLM-5.2' 출시
    만드는 것
    공개 GitHub 저장소 주소를 넣으면 파일 트리를 받아 확장자·경로 필터(테스트 제외, lock 파일 제외 등)를 적용하고, 파일별 토큰 수를 트리맵으로 그린 뒤 "GLM-5.2 1M에는 들어감, 200K 모델에는 38% 초과" 같은 판정을 모델별 막대로 보여주는 도구. 필터를 바꿀 때마다 총 토큰과 판정이 갱신되고, 최종 묶음을 하나의 텍스트 파일로 복사·다운로드한다.
    핵심 기술
    GitHub REST API(트리, raw 파일), js-tiktoken으로 근사 토큰 계산(Web Worker), D3 treemap, glob 필터.
    완료 기준
    파일 1,000개 저장소에서 1분 안에 집계가 끝나고, 필터 변경이 즉시 반영되며, 내려받은 묶음 파일의 토큰 수가 화면 수치와 맞는다.
    리스크/전제
    큰 저장소는 무인증 API 한도에 걸리므로 zip 아카이브를 한 번에 받는 방식도 검토한다. 모델마다 토크나이저가 달라 판정은 근사치라는 점을 표시한다.
  2. 2

    프롬프트 한 줄로 React 앱을 생성해 탭 안에서 바로 실행하고 고치는 미니 앱 빌더

    sandboxd - AI 앱-빌더 제품을 위한 오픈소스 샌드박스 엔진

    21/25
    • AI SDK 스트리밍
    • Sandpack
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    sandboxd - AI 앱-빌더 제품을 위한 오픈소스 샌드박스 엔진
    만드는 것
    v0나 Bolt처럼 왼쪽 채팅에 "할 일 앱 만들어 줘"라고 쓰면 오른쪽에서 코드가 스트리밍으로 써지고, 다 써지는 즉시 미리보기 패널에서 앱이 실행되는 빌더. sandboxd처럼 서버 컨테이너를 띄우는 대신 브라우저 안 번들러로 실행해 서버 비용을 없앤다. 이어서 "다크 모드 추가해 줘"라고 하면 바뀐 파일만 diff로 보여 주고 적용하며, 결과는 공유 링크(코드를 URL이나 Gist에 저장)로 남긴다.
    핵심 기술
    AI SDK 스트리밍(파일 단위 구조화 출력), @codesandbox/sandpack-react(브라우저 내 번들·실행), 런타임 오류를 다시 모델에 넘기는 자동 수정 루프, 파일 diff.
    완료 기준
    간단한 앱 5종(할 일, 타이머, 계산기, 메모, 차트)을 한 문장 요청으로 만들어 미리보기에서 바로 동작하고, 후속 수정 요청 3회가 기존 코드를 깨지 않고 적용된다.
    리스크/전제
    npm 패키지를 많이 쓰는 앱은 Sandpack 번들링이 느려진다. 허용 의존성 목록을 두고 시스템 프롬프트로 제한한다. 43주차 15번(Vercel Sandbox 플레이그라운드)은 서버 샌드박스에서 코드를 실행·포크하는 쪽이고, 이건 브라우저 안에서 앱을 생성·미리보기하는 쪽이다.
  3. 3

    Excalidraw 캔버스에서 그리던 다이어그램을 AI가 이어 그려 주는 자동완성

    Claude Code의 수석 디자이너가 AI로 빌드하는 방법

    20/25
    • @excalidraw/excalidraw
    • LLM 구조화 출력
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    [Claude Code의 수석 디자이너가 AI로 빌드하는 방법 [유튜브]](https://news.hada.io/topic?id=30562)
    만드는 것
    Excalidraw 캔버스에 박스 두세 개와 화살표를 그리다가 잠시 멈추면, AI가 다음에 올 만한 박스와 연결을 반투명 "고스트"로 제안하고 Tab을 누르면 확정되는 자동완성. 원 영상에서 디자이너가 Excalidraw에 넣었던 기능을 독립 앱으로 재현하는 것이다. "로그인 흐름", "MSA 구조" 같은 힌트 텍스트를 캔버스에 쓰면 제안이 그 방향으로 좁혀진다.
    핵심 기술
    @excalidraw/excalidraw React 컴포넌트와 updateScene API, 현재 요소를 요약한 JSON을 LLM에 보내 새 요소 JSON을 받는 구조화 출력, 디바운스 트리거, 고스트 요소 스타일링.
    완료 기준
    박스 3개짜리 흐름도에서 멈춘 뒤 3초 안에 제안이 뜨고, Tab으로 확정·Esc로 거절이 되며, 제안된 요소가 기존 요소와 겹치지 않게 배치된다.
    리스크/전제
    좌표 배치를 모델에 전부 맡기면 엉망이 되기 쉬우므로 모델은 "무엇을 어디에 연결할지"만 정하고 좌표는 간단한 레이아웃 규칙이 계산하게 나눈다. 30주차 도구 트렌드의 penecho(AI 공유 캔버스)도 같은 방향이라 참고할 만하다.
  4. 4

    프롬프트 변형을 자동 생성해 정답·오답이 갈리는 예제만 골라 채점하는 프롬프트 최적화 랩

    이번 주에 살펴볼 만한 AI/ML 논문 모음 (APEX)

    19/25
    • LLM API
    • IndexedDB
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  5. 5

    역할별 정보 장벽을 둔 에이전트들이 종목 리서치 리포트를 쓰는 모의 리서치 데스크

    Show GN: tradingcodex

    18/25
    • AI SDK 도구 호출
    • 마크다운 리포트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이미 있는 아이디어와 겹침
로컬 모델 대체 경험담(Ask HN)은 34주차 12번(브라우저 로컬 LLM 채팅), Loop Engineering 영상은 34주차 제외 목록(개발 워크플로 개선)과 같은 이유로 제외했다.
다른 주차에 배정한 것
YouTube 제목의 Gemini 실시간 번역은 20주차 5번(음성 통역 지연 계측 앱)과 같은 아이디어다.
FE 사이드 프로젝트로 만들 수 없는 것
고가용성 PostgreSQL 페일오버(백엔드 인프라), hera-agent-unity(Unity 에디터 제어 CLI), AutoForge·Self-Harness·autoresearch(학습·에이전트 내부 연구)
단순 소식·산업
스페이스X의 커서 인수, 나델라 'AI 공동화', GLM-5.2 출시 자체(벤치마크 미공개), Fable 5 접근 중단
확인이 필요한 전제
5번 모의 리서치 데스크는 투자 조언으로 읽히지 않도록 가상 종목·과거 데이터만 쓰는 것을 전제로 하며, 43주차 8번(권한 정책 시뮬레이터)과 정보 장벽 개념이 인접해 순위를 가장 낮게 두었다.
YouTube 5건
브리핑·인터뷰 위주라 후보로 세우지 않았다.
온디바이스·클라우드 하이브리드 라우팅 채팅
20주차 백로그와 중복
에이전트 경매 시장 시뮬레이터
18주차 백로그와 중복

2026년 24주차 (스캔일: 2026-10-23)

후보 4건

대상: content/2026/week-24.mdx (기사 32건 + YouTube 14건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 17~23주차에서 이미 쓴 아이디어는 제외했고, 겹치는 항목은 아래 제외한 항목에 적었다.

  1. 1

    같은 문장을 한국어와 영어로 넣으면 모델별 토크나이저 토큰 수와 비용 차이를 나란히 보여주는 "언어세" 계산기

    한국어 토큰 소모, 영어 최대 2.59배

    23/25
    • js-tiktoken
    • transformers.js 토크나이저
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    "한국, AI 비싸게 쓴다"…한국어 토큰 소모, 영어 최대 2.59배 높아
    만드는 것
    왼쪽에 한국어, 오른쪽에 같은 뜻의 영어 문장을 넣으면 GPT 계열(o200k), Llama·Qwen·Gemma 계열 토크나이저로 각각 토큰을 쪼개 색칠해 보여 주는 페이지. 아래에는 언어별 토큰 수, 한국어/영어 배율, 모델 단가를 곱한 요청당 비용과 "한 달에 이만큼 쓰면 차액이 얼마"라는 환산값이 붙는다. 번역이 귀찮은 사람을 위해 한·영 병렬 예문 세트(뉴스, 코드 주석, 일상 대화)를 프리셋으로 넣는다.
    핵심 기술
    js-tiktoken, @huggingface/transformers의 AutoTokenizer(토크나이저 파일만 내려받음), 토큰 경계 하이라이트 렌더링, 단가표 JSON. 서버 코드 0줄.
    완료 기준
    토크나이저 4종 이상에서 같은 문단의 토큰 수가 공식 토큰 카운터(OpenAI tokenizer 페이지 등)와 일치하고, 프리셋 3종에서 한국어 배율이 모델마다 다르게 나오는 것이 표로 확인된다.
    리스크/전제
    Anthropic 토크나이저는 공개되지 않아 기사 속 "앤트로픽이 가장 비싸다"는 결론은 직접 재현할 수 없다. 이 부분은 API의 count_tokens 응답을 서버 라우트로 받아 보조 지표로 붙이거나, 공개 토크나이저만 비교한다고 명시한다.
  2. 2

    미디 키보드나 화면 건반으로 치면 AI가 실시간으로 이어 받아 연주하는 브라우저 잼 세션

    구글 마젠타 리얼타임 2

    22/25
    • Web MIDI API
    • Magenta.js
    • Tone.js
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    구글, 연주자 입력에 실시간 반응하는 AI 악기 '마젠타 리얼타임 2' 공개
    만드는 것
    사용자가 미디 키보드(없으면 화면 건반이나 PC 키보드)로 네 마디를 치면, AI가 그 프레이즈를 받아 다음 네 마디를 이어 연주하고 다시 사용자 차례로 넘기는 "주고받기" 화면. 피아노 롤에 사람 음표와 AI 음표를 다른 색으로 쌓고, 온도(창의성) 슬라이더와 템포·조성 선택을 둔다. 녹음한 세션은 MIDI 파일로 내려받는다.
    핵심 기술
    Web MIDI API, @magenta/music의 MusicRNN·MusicVAE(브라우저 실행), Tone.js 샘플러, Canvas 피아노 롤, MIDI 파일 직렬화.
    완료 기준
    미디 키보드 입력 후 AI 응답이 1초 안에 재생되고, 같은 입력에 온도만 바꿔 서로 다른 응답이 나오며, 내보낸 MIDI 파일이 DAW에서 그대로 열린다.
    리스크/전제
    기사 속 MRT2는 브라우저용 공개 런타임이 확인되지 않았다. Magenta.js는 몇 년 된 소형 모델이라 품질은 MRT2보다 한참 아래다. MRT2 가중치와 웹 데모가 공개됐는지 먼저 확인하고, 없으면 Magenta.js로 상호작용 구조만 재현한다고 소개한다. Web MIDI는 Safari 지원이 없다.
  3. 3

    아무 웹페이지 요소에 주석 핀을 꽂으면 셀렉터·스크린샷·코멘트를 묶어 코딩 에이전트용 수정 요청으로 내보내는 크롬 확장

    Codex, 모든 직무를 위한 생산성 도구로 확장 (Annotations)

    22/25
    • MV3 content script
    • captureVisibleTab
    • CSS 셀렉터 생성
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Codex, 모든 직무를 위한 생산성 도구로 확장
    만드는 것
    확장 아이콘을 누르면 페이지 위에 주석 모드가 켜지고, 요소를 클릭할 때마다 번호 핀이 꽂히며 코멘트 입력창이 뜬다. 핀마다 안정적인 CSS 셀렉터, 요소 주변 잘라낸 스크린샷, 계산된 스타일 몇 가지가 함께 저장된다. "내보내기"를 누르면 "1번 핀(.hero h1): 글자 크기를 줄여 주세요" 같은 형식의 마크다운과 이미지 묶음이 클립보드나 zip으로 나온다. 디자이너·기획자가 코딩 에이전트에 넘길 수정 요청을 만드는 도구다.
    핵심 기술
    MV3 content script, chrome.tabs.captureVisibleTab + Canvas 자르기, 셀렉터 생성 알고리즘(id → data 속성 → nth-child 순), chrome.storage로 페이지별 핀 보관.
    완료 기준
    서로 다른 사이트 3곳에서 핀 5개씩을 꽂고 새로고침해도 핀 위치가 복원되며, 내보낸 마크다운을 코딩 에이전트에 그대로 넣었을 때 해당 요소를 정확히 찾아 수정한다.
    리스크/전제
    동적으로 렌더링되는 SPA에서는 셀렉터가 쉽게 깨진다. 복원 실패 시 "찾을 수 없음" 상태를 보여 줘야 한다. Codex Annotations의 실제 포맷은 공개 문서를 확인해 맞출 수 있으면 맞추고, 아니면 독자 포맷임을 밝힌다.
  4. 4

    릴리스별 버그 지표를 넣으면 순열 검정으로 "이 변화가 진짜인지"를 보여 주는 통계 놀이터

    Claude가 rsync의 버그를 늘렸는가?

    21/25
    • GitHub REST API
    • 순열 검정
    • D3 히스토그램
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude가 rsync의 버그를 늘렸는가?
    만드는 것
    GitHub 저장소와 "의심 시점"(예: AI 도구 도입일)을 고르면 릴리스별 버그 이슈 수를 가져와 막대그래프로 그리고, 의심 시점 이후 릴리스가 정말 더 나쁜지 순열 검정을 돌려 보여 주는 페이지. 라벨을 무작위로 섞는 과정을 애니메이션으로 1,000번 돌리며 귀무분포 히스토그램이 쌓이고, 실제 관측값이 그 안 어디에 떨어지는지 p값과 함께 표시한다. rsync 원문 데이터를 첫 프리셋으로 둔다.
    핵심 기술
    GitHub REST API(릴리스, 라벨별 이슈 검색), 순열 검정·Fisher 정확 검정 JS 구현, D3 히스토그램 애니메이션.
    완료 기준
    rsync 프리셋에서 원문이 보고한 p값(순열 검정 약 46%)과 같은 수준의 결과가 나오고, 임의의 공개 저장소 2곳에서 같은 분석이 동작한다.
    리스크/전제
    원문의 심각도 가중 지표(sev/10c)는 수작업 분류가 들어갔을 수 있어 그대로 재현하기 어렵다. 앱에서는 이슈 수나 라벨 기반 단순 지표로 시작하고, 원문 수치는 정적 데이터로 넣는다. 무인증 GitHub API는 시간당 60회 제한이 있다.
제외한 항목
이전 주차와의 중복 처리
젬마 4 QAT 온디바이스는 34주차 12번(WebLLM 채팅)과 10주차 1번(기기 사양 기반 모델 진단)과, Odysseus 하드웨어 스캔·모델 추천도 10주차 1번과 겹친다. Dreaming 메모리는 43주차 9번, 잠금 모드는 43주차 5번(간접 프롬프트 인젝션 실습장), Instagram AI 계정 복구 사고는 43주차 8번(권한 정책 시뮬레이터)과 같은 결이라 제외했다. Claude Code 응답 대기 오버레이 플러그인과 Dynamic Workflow 영상은 개발 워크플로 개선이다.
FE 사이드 프로젝트로 만들 수 없는 것
Holo3.1 로컬 Computer Use(데스크톱 GUI 에이전트), Mellum2·키미 코드 CLI·코드 퍼피(터미널·IDE 도구), NVIDIA 통합 메모리 PC, 화웨이 어센드 사후학습, Kubernetes Gateway API, defending-code 하네스(보안 분석 하네스라 웹 결과물로 만들 만한 공개 API가 없음)
단순 소식·산업
재귀적 자기개선 보고, 손정의 초지능 발언, OpenAI 모델 AWS 정식 제공, 챗GPT 슈퍼 앱 개편, Google-SpaceX 컴퓨팅 계약, S&P 500 편입 기준, EU 기술 주권, 수노 투자 유치
정책·논평
하네스 엔지니어링(Codex 100만 줄), 장인-빌더 하이브리드, UC버클리 낙제 급증, 스마트 TV 프록시 SDK, Age of Empires II 의인화 논평, OnlyFans 경제 에세이
YouTube 14건
대부분 위 기사와 같은 주제의 브리핑이다. 목소리 복제 더빙 쇼츠는 유료 API와 음성 도용 우려가 커서 후보로 세우지 않았다.

2026년 23주차 (스캔일: 2026-10-23)

후보 3건

대상: content/2026/week-23.mdx (기사 29건 + YouTube 10건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 논평·투자 기사가 많은 주라 후보가 3개로 적다. 34·43주차와 17~22주차에서 쓴 아이디어는 제외했다.

  1. 1

    MCP 서버의 도구 정의를 붙여넣거나 연결하면 도구별 토큰 수와 컨텍스트 점유율을 재고 CLI 호출 방식과 비교해 주는 측정기

    MCP는 죽었나?

    22/25
    • MCP TypeScript SDK
    • js-tiktoken
    • 트리맵
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    MCP는 죽었나?
    만드는 것
    MCP 서버 URL(Streamable HTTP)을 넣거나 tools/list 응답 JSON을 붙여넣으면, 도구마다 이름·설명·입력 스키마가 차지하는 토큰을 세어 트리맵으로 그리는 페이지. 상단에는 "이 서버를 연결하면 200K 컨텍스트의 몇 %가 늘 사라진다"는 숫자가 크게 뜬다. 여러 서버를 담아 합계를 보고, 도구를 체크 해제하면 줄어드는 양이 바로 반영된다. 기사 속 Linear·Notion·Slack·Postgres 77개 도구, 약 2만 1천 토큰 사례를 프리셋으로 넣는다.
    핵심 기술
    @modelcontextprotocol/sdk 클라이언트(서버 라우트에서 연결), js-tiktoken으로 근사 토큰 계산, D3 treemap, 스키마 축약 제안(설명 길이·중복 필드 표시).
    완료 기준
    공개 MCP 서버 2곳 이상에 실제로 연결해 도구 목록을 가져오고, 계산한 합계가 해당 서버를 붙였을 때 API 응답의 입력 토큰 증가분과 10% 안쪽으로 맞는다.
    리스크/전제
    모델사마다 도구 정의를 프롬프트에 직렬화하는 방식이 달라 정확한 값은 API로 실측해야 한다. 앱의 숫자는 근사치라고 표시하고, 가능하면 count_tokens 계열 API로 보정한다. 인증이 필요한 MCP 서버는 범위에서 뺀다. 34주차 11번(stateless MCP 서버 + 인스펙터)과 43주차 6번(OpenAPI→MCP 변환)은 서버를 만드는 쪽이라 겹치지 않는다.
  2. 2

    소형 모델이 브라우저 안에서 도구 호출로 환율 계산·현지 표현·체크리스트를 처리하는 오프라인 여행 도우미 PWA

    리퀴드 AI LFM2.5 / Show GN: Nomad AI

    21/25
    • WebLLM 또는 transformers.js
    • WebGPU
    • 도구 호출
    • Service Worker
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    리퀴드 AI, 온디바이스용 모델 'LFM2.5' 공개 / Show GN: Nomad AI - 나만의 온디바이스 여행 도우미
    만드는 것
    출국 전에 한 번 설치해 두면 기내 모드에서도 쓰는 여행 도우미. "3,500엔이면 원화로 얼마야", "약국에서 두통약 달라고 일본어로 어떻게 말해", "내일 짐 체크리스트 만들어 줘" 같은 질문을 소형 모델이 받아 환율 계산기·표현집·체크리스트 도구를 호출하고, 결과를 카드 UI로 보여 준다. 환율은 온라인일 때 받아 둔 값을 쓰고 기준 시각을 함께 표시한다.
    핵심 기술
    WebLLM 또는 @huggingface/transformers(WebGPU), 함수 호출 프롬프트와 JSON 파싱, Service Worker로 모델·앱 캐싱, IndexedDB에 환율·체크리스트 저장, Web App Manifest.
    완료 기준
    비행기 모드에서 위 세 유형 질문이 모두 올바른 도구를 호출해 답하고, 첫 응답이 일반 노트북에서 5초 안에 나온다. 앱을 껐다 켜도 체크리스트가 남는다.
    리스크/전제
    LFM2.5의 웹용(ONNX·MLC) 변환본 존재 여부를 먼저 확인해야 한다. 없으면 브라우저에서 검증된 다른 1~3B급 도구 호출 모델로 시작한다. 모델 다운로드가 수백 MB~1GB라 모바일 데이터로 받지 않게 안내가 필요하다. 34주차 12번(로컬 LLM 채팅)과 달리 도구 호출과 오프라인 시나리오가 핵심이다.
  3. 3

    저장소 URL을 넣으면 릴리스 주기·CI·기여자·이슈 응답 같은 프로젝트 건강 흔적을 점수 카드와 SVG 배지로 만들어 주는 웹앱

    Flathub, LLM 기반 제출을 허용하지 않음

    21/25
    • GitHub REST/GraphQL API
    • 동적 SVG 배지
    • OG 이미지
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Flathub, LLM 기반 제출을 허용하지 않음
    만드는 것
    GitHub 저장소 주소를 넣으면 최근 릴리스 간격, CI 워크플로 존재와 성공률, 기여자 수와 분포, 이슈 첫 응답까지 걸린 시간, 저장소 나이 대비 커밋 밀도 같은 "사람이 오래 관리해 온 흔적"을 모아 점수 카드로 보여 주는 웹앱. 항목별 근거 링크를 달고, README에 붙일 수 있는 SVG 배지 URL을 만들어 준다. Flathub가 예외 조건으로 언급한 항목을 그대로 체크리스트로 쓴다.
    핵심 기술
    GitHub GraphQL API(한 번의 쿼리로 여러 지표), Route Handler에서 동적 SVG 생성과 캐싱, next/og로 공유 이미지.
    완료 기준
    오래된 FOSS 프로젝트, 최근 생성된 1인 저장소, 템플릿에서 막 만든 저장소 세 종류를 넣었을 때 점수가 뚜렷이 갈리고, 배지가 GitHub README에서 렌더링된다.
    리스크/전제
    "LLM으로 만든 저장소 판별기"처럼 보이면 안 된다. 점수는 관리 흔적일 뿐 생성 방식을 판정하지 않는다는 문구를 첫 화면에 둔다. GraphQL API는 토큰이 필요해 서버 쪽에 개인 토큰을 두고 응답을 캐싱한다.
제외한 항목
이전 주차와의 중복 처리
Claw Patrol(에이전트 보안 방화벽)은 43주차 8번 권한 정책 시뮬레이터와, Kimi K2.6 에이전트 스웜은 43주차 10번 병렬 에이전트 대시보드와 같은 아이디어다. 구글 AI 검색 "선호 소스"는 22주차 1번 검색 확장과, 에포크 오픈·폐쇄 모델 격차 차트는 34주차 16번 모델 출시 타임라인과 겹친다.
FE 사이드 프로젝트로 만들 수 없는 것
£200 V100 GPU 증설, 엔비디아 PC CPU, Claude Code 숨은 설정(개발 워크플로), pisesh(터미널 세션 관리), 헤르메스 에이전트·Antigravity(에이전트 도구 사용기)
단순 소식·산업
Anthropic 기업가치 1위, 업스테이지 AA 40점, 소프트뱅크 프랑스 투자, 베드록 그록 협상, 메타 AI 펜던트, 크리어스 선정, AI Gateway 모델 추가 4건, Mistral 서밋 메모
정책·논평
하네스 시대, LLM 시대의 엔지니어링, 프런트엔드 탈숙련화, 플랫폼 자동 심사 리스크, GenAI 반대 에세이, 제발 AI를 사용하세요, AI 에이전트 투자 자동화(거래 대행은 실제 자금이 걸려 사이드 프로젝트로 부적합)
YouTube 10건
주간 브리핑과 도구 사용기, 쇼츠라 별도 재료로 쓰지 않았다.

2026년 22주차 (스캔일: 2026-10-23)

후보 4건

대상: content/2026/week-22.mdx (기사 25건 + YouTube 16건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 17~21주차에서 쓴 아이디어는 제외했다.

  1. 1

    대화 이력을 이어 붙이는 방식과 중간을 고치는 방식을 바꿔 가며 프롬프트 캐시가 적중하는 앞부분을 토큰 단위로 색칠하고 비용 차이를 계산하는 시각화

    DeepSeek Reasonix

    22/25
    • js-tiktoken
    • diff 알고리즘
    • 단가표
    • 선택적 API 실측
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    DeepSeek Reasonix — 높은 캐싱·낮은 비용의 DeepSeek 네이티브 코딩 에이전트
    만드는 것
    가상의 에이전트 대화 10턴이 세로로 쌓인 화면. "append-only" 모드에서는 턴이 늘 때마다 이전 내용이 그대로라 앞부분 전체가 초록(캐시 적중)으로 칠해지고, "중간 수정" 모드에서 시스템 프롬프트에 타임스탬프를 넣거나 이전 도구 결과를 요약해 바꾸면 그 지점부터 뒤가 전부 빨강(캐시 미스)으로 바뀐다. 오른쪽에는 턴별 캐시 입력·일반 입력 토큰과 누적 비용이 그래프로 쌓이고, 두 모드의 총비용 차이가 숫자로 남는다. 선택적으로 실제 API를 호출해 응답의 캐시 토큰 필드로 예측이 맞았는지 확인하는 버튼을 둔다.
    핵심 기술
    js-tiktoken으로 토큰화, 바이트 단위 공통 접두사 계산, 모델별 캐시 단가표, Route Handler에서 DeepSeek·Anthropic·OpenAI 중 하나를 실측용으로 호출.
    완료 기준
    두 모드에서 10턴 누적 비용 차이가 화면에 나오고, 실측 버튼을 눌렀을 때 API가 보고한 캐시 토큰 수가 시각화의 초록 구간 길이와 큰 차이 없이 맞는다.
    리스크/전제
    사업자마다 캐시 최소 길이, 블록 단위, 만료 시간이 달라 "바이트가 같으면 적중"은 단순화다. 모델별 규칙을 설정값으로 분리하고, 근사 모델임을 명시한다. 34주차 7번(세션 비용 계산기)은 단가 입력 계산기라 겹치지 않는다.
  2. 2

    공개 저장소의 TS/JS 코드를 브라우저에서 파싱해 함수 호출 그래프와 변경 영향 범위를 그려 주는 코드 지도

    CodeGraph

    22/25
    • web-tree-sitter(WASM)
    • GitHub API
    • Cytoscape.js
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    CodeGraph — AI 코딩 에이전트를 위한 코드 지식 그래프
    만드는 것
    GitHub 저장소 주소를 넣으면 TS/JS 파일을 받아 브라우저에서 파싱하고, 파일·함수·import 관계를 노드 그래프로 그리는 웹앱. 함수 하나를 클릭하면 그 함수를 부르는 곳과 그 함수가 부르는 곳이 단계별로 퍼져 강조되고, "이 함수를 바꾸면 영향받는 파일" 목록이 옆에 뜬다. 검색창은 SQLite FTS 대신 브라우저 내 전문 검색으로 함수 이름과 주석을 찾는다.
    핵심 기술
    web-tree-sitter + TypeScript 문법 WASM, GitHub Trees·Contents API(또는 zipball을 받아 fflate로 해제), 심볼 테이블 구성, Cytoscape.js 또는 Sigma.js 렌더링, MiniSearch.
    완료 기준
    파일 200개 안팎의 공개 저장소에서 30초 안에 그래프가 완성되고, 임의 함수 5개의 호출자 목록이 IDE "Find References" 결과와 대부분 일치한다.
    리스크/전제
    이름 기반 해석이라 동적 import, 재내보내기, 같은 이름 메서드는 정확하지 않다. 정확도를 원하면 TypeScript 컴파일러 API를 Web Worker에서 돌리는 방법이 있지만 무겁다. 첫 버전은 "근사 그래프"로 범위를 잡는다. 소요가 가장 긴 후보다.
  3. 3

    구글 검색에 `udm=14`를 자동으로 붙여 AI 개요를 걷어내고 같은 검색어로 대체 검색엔진을 바로 여는 확장

    Google이 더 이상 Google이 아닌 지금의 대체 검색엔진

    21/25
    • MV3 declarativeNetRequest
    • content script
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Google이 더 이상 Google이 아닌 지금의 대체 검색엔진
    만드는 것
    설치하면 구글 검색 결과 URL에 자동으로 udm=14(웹 결과만 보기)가 붙어 AI 개요 없이 링크 목록이 나오는 확장. 결과 상단에는 같은 검색어로 Kagi, DuckDuckGo, Startpage, Brave Search를 바로 여는 버튼 줄을 끼워 넣는다. 팝업에서 켜고 끄기, 기본 검색엔진별 동작을 고른다.
    핵심 기술
    MV3 declarativeNetRequest 리다이렉트 규칙(정규식 치환), content script로 버튼 삽입, chrome.storage.sync 설정.
    완료 기준
    주소창 검색, 구글 홈 검색, 검색 결과 페이지 내 재검색 세 경로 모두에서 udm=14가 붙고, 이미지·뉴스 탭으로 옮겼을 때는 붙지 않는다.
    리스크/전제
    구글이 파라미터 동작을 바꾸면 바로 깨진다. 이미 같은 기능의 확장이 여럿 있어 포트폴리오 차별성은 약하다. 대신 반나절이면 끝나므로 MV3 리다이렉트 규칙을 익히는 워밍업으로 적합하다.
  4. 4

    점을 찍거나 격자 구성을 고르면 거리가 정확히 1인 쌍을 세어 그려 주는 단위 거리 문제 놀이터

    OpenAI 모델, 이산기하학 80년 난제 핵심 추측 반증

    20/25
    • Canvas
    • 공간 해시
    • 정확한 정수 거리 비교
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    OpenAI 모델, 이산기하학 80년 난제(단위 거리 문제) 핵심 추측 반증
    만드는 것
    평면에 점을 찍으면 거리가 정확히 1인 쌍마다 선이 그어지고 쌍의 개수가 실시간으로 올라가는 화면. 정사각 격자, 삼각 격자, 정육각형 조합 같은 고전 구성을 프리셋으로 두고, 점 개수 n을 늘리며 쌍 수를 그래프로 그려 n^(4/3) 같은 상·하한 곡선과 비교한다. 마지막 단계에서 OpenAI 결과가 무엇을 반증했는지 원문을 바탕으로 짧게 설명한다.
    핵심 기술
    Canvas 렌더링, 정수·대수적 좌표를 쓰는 정확한 거리 비교(부동소수점 오차 회피), 공간 해시로 쌍 탐색, 로그 스케일 차트.
    완료 기준
    점 1,000개 구성에서 쌍 계산이 1초 안에 끝나고, 프리셋별 쌍 수가 알려진 값과 맞는다.
    리스크/전제
    반증된 추측의 정확한 내용과 구성을 원문에서 확인해야 하며, 원 구성을 화면에서 재현할 수 있을지는 불확실하다. 재현이 어렵다면 "이 문제가 왜 어려운가"를 보여 주는 교육용 놀이터로 범위를 정한다. 수학 해설 비중이 커 FE 학습 점수는 낮게 잡았다.
제외한 항목
이전 주차와의 중복 처리
KanBots(카드별 병렬 에이전트 칸반)는 43주차 10번 병렬 에이전트 대시보드와, "AI로 더 천천히 더 나은 코드" 다중 리뷰어 교차 검토는 34주차 9번·43주차 7번 PR 도구와 같은 아이디어다. 에이전트 스프롤은 18주차 1번 A2A Agent Card 탐색기와, Energy per Successful Goal과 Microsoft 비용 보고서는 34주차 7번 비용 계산기와 겹친다.
FE 사이드 프로젝트로 만들 수 없는 것
세레브라스 키미 K2.6(유료 엔터프라이즈 추론), RMA 수학 에이전트 논문, UB테크 휴머노이드, 에이아이매틱스 차량 비전 AI, Stainless 인수(SDK 생성 플랫폼은 공개 도구가 아님)
단순 소식·산업
OpenAI 싱가포르 연구소, Project Glasswing 업데이트(구체적 공개 도구 없음), 딥시크 V4-프로 가격 인하, KPMG Claude 도입, 메모리 칩 비용, AI 누적 적자 분석, AI 워싱
정책·논평
교황 회칙, Greg Brockman 인터뷰, 조직 성숙도(DORA), 영원한 Sloptember
YouTube 16건
대부분 Google I/O·Codex 브리핑과 쇼츠다. 비트코인 복구 쇼츠는 재현할 공개 기술이 없어 제외했다.

2026년 21주차 (스캔일: 2026-10-23)

후보 2건

대상: content/2026/week-21.mdx (기사 25건 + YouTube 11건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 17~20주차에서 쓴 아이디어는 제외했다.

  1. 1

    참고문헌을 붙여넣으면 DOI·arXiv ID·제목으로 실재 여부를 조회해 존재하지 않는 인용을 표시하는 검증기

    arXiv, LLM 생성 논문 '원 스트라이크' 도입

    22/25
    • Crossref API
    • arXiv API
    • 퍼지 매칭
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    "AI 흔적 남기면 1년 퇴출" — 아카이브, 부실 논문 '원 스트라이크' 도입
    만드는 것
    논문이나 리포트의 참고문헌 목록을 통째로 붙여넣으면 항목별로 DOI·arXiv ID·제목·저자를 뽑아 Crossref와 arXiv에서 찾아보고, 초록(확인됨), 노랑(제목은 비슷하지만 저자·연도 불일치), 빨강(찾을 수 없음)으로 표시하는 웹앱. 노랑 항목은 가장 가까운 실제 문헌을 나란히 보여 준다. BibTeX 파일 업로드도 받는다.
    핵심 기술
    참고문헌 파싱(정규식 + 필요 시 LLM 보조), Crossref REST API(/works?query.bibliographic=), arXiv API, 문자열 유사도(Jaro-Winkler), 요청 속도 제한을 지키는 큐.
    완료 기준
    실제 문헌 20개에 가짜 인용 5개를 섞은 목록에서 가짜 5개를 모두 빨강이나 노랑으로 잡고, 실제 문헌 오탐이 2개 이하다.
    리스크/전제
    학회 논문, 책, 웹 문서는 Crossref에 없을 수 있어 "찾을 수 없음"이 곧 가짜는 아니다. 결과 문구를 "확인 불가"로 쓰고 판정처럼 보이지 않게 한다. Crossref는 mailto 파라미터를 넣는 polite pool 사용을 권장한다.
  2. 2

    장보기 에이전트가 장바구니를 꾸리고 사용자 한도 승인 뒤 Stripe 테스트 모드로 결제하는 위임 결제 데모

    Stripe Link CLI

    21/25
    • Stripe 테스트 모드
    • LLM 도구 호출
    • 승인 모달
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Stripe Link CLI — AI 에이전트가 사용자 대신 결제하게 해주는 CLI
    만드는 것
    "이번 주 저녁 재료 5만 원 안에서 사 줘"라고 하면 에이전트가 가짜 상점 카탈로그에서 상품을 골라 장바구니를 채우고, 결제 직전에 사용자에게 금액·품목·한도를 보여 주는 승인 모달을 띄우는 앱. 승인하면 Stripe 테스트 모드로 실제 결제 흐름(PaymentIntent 생성, 확인)이 돌고, 한도를 넘거나 금지 품목이 섞이면 에이전트가 결제를 시도해도 서버가 거절하는 장면을 보여 준다.
    핵심 기술
    LLM 도구 호출(search_products, add_to_cart, request_payment), Stripe 테스트 키와 PaymentIntent, 서버 측 한도·정책 검증, 승인 대기 상태 머신 UI.
    완료 기준
    정상 주문, 한도 초과, 금지 품목 세 시나리오가 각각 결제 성공, 승인 단계 거절, 서버 거절로 끝나고 Stripe 대시보드 테스트 데이터에 성공 건만 남는다.
    리스크/전제
    Stripe Link CLI 자체는 CLI라 웹앱에서 그대로 쓰지 않고, 위임 결제 흐름만 테스트 모드로 재현한다. 실제 카드는 절대 쓰지 않는다. 43주차 8번 권한 정책 시뮬레이터와 결이 비슷하지만 결제라는 구체 도메인과 실제 Stripe 흐름이 있어 남겼다.
제외한 항목
이전 주차와의 중복 처리
Google의 생성형 AI 검색 최적화 가이드는 17주차 6번 GEO 점검기와, AI 구독 시한폭탄과 Amazon 토큰 부풀리기는 34주차 7번 비용 계산기와 같은 재료다. Claude Agent View 영상은 43주차 10번 병렬 에이전트 대시보드와 겹친다.
FE 사이드 프로젝트로 만들 수 없는 것
DeepSeek-V4-Flash 조향 실험(가중치와 GPU 필요), Zerostack(Rust CLI 에이전트), Codex Windows 샌드박스, ICRL·SkillSmith 논문(학습 기법), 프런티어 AI CTF 해결(공격 자동화라 사이드 프로젝트로 다루지 않음)
단순 소식·산업
DeployCo, Malta ChatGPT Plus, xAI Cursor 인수, 매출 89% 독식, ChatGPT 금융 어드바이저, Codex 모바일, 산업성장펀드, 시리 채팅 자동 삭제
정책·논평
System of Intelligence, AI는 기술이지 제품이 아니다, Codex가 바이브 코더의 꿈, 수면 권유하는 Claude
YouTube 11건
Codex·Claude Code 사용기와 주간 브리핑이라 별도 재료로 쓰지 않았다.
내 기기용 브라우저 모델 추천기
10주차 백로그와 중복
디버깅 타임라인 녹화 확장
12주차 백로그와 중복

2026년 20주차 (스캔일: 2026-10-23)

후보 6건

대상: content/2026/week-20.mdx (기사 27건 + YouTube 3건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 17~19주차에서 쓴 아이디어는 제외했다.

  1. 1

    Chrome 내장 Gemini Nano의 Prompt·Summarizer·Translator API 지원 상태를 진단하고 서버 없이 바로 써 보는 플레이그라운드

    Chrome이 4GB AI 모델을 동의 없이 설치

    22/25
    • Chrome Built-in AI API
    • 다운로드 진행 이벤트
    • 스트리밍 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Google Chrome silently installs a 4 GB AI model on your device without consent
    만드는 것
    페이지를 열면 Chrome 내장 AI 각 API(Prompt, Summarizer, Writer, Rewriter, Translator, Language Detector)의 availability() 결과를 신호등처럼 보여 주고, 모델이 아직 없으면 다운로드 진행률을 띄우는 진단 화면. 아래 탭에서 각 API를 바로 써 볼 수 있고, 네트워크를 끊은 상태에서도 요약·번역이 돌아가는지와 첫 토큰까지 걸린 시간을 함께 표시한다. 기사가 문제 삼은 "모델이 언제, 얼마나 깔리는가"를 사용자가 직접 확인하는 페이지이기도 하다.
    핵심 기술
    LanguageModel, Summarizer, Translator 등 Built-in AI 전역 객체, monitor 콜백의 downloadprogress 이벤트, 스트리밍 응답 렌더링, 기능 감지 폴백 UI.
    완료 기준
    Chrome 안정판에서 API별 상태가 정확히 표시되고, 오프라인에서 한국어 문단 요약과 한→영 번역이 동작한다. 지원하지 않는 브라우저에서는 이유와 함께 깔끔하게 비활성화된다.
    리스크/전제
    API 이름과 지원 범위가 Chrome 버전마다 바뀌고 일부는 오리진 트라이얼이나 플래그가 필요하다. 하드웨어 요구 조건(디스크 여유 공간, GPU 또는 RAM)을 못 맞추는 PC에서는 아예 안 돌아간다. 43주차 14번 TL;DR 확장은 외부 LLM API 기반이라 겹치지 않지만, 둘 다 만들면 이 진단 코드를 확장에 넣어 로컬 우선으로 바꿀 수 있다.
  2. 2

    LLM이 순회 외판원 휴리스틱 코드를 세대마다 고쳐 쓰고 Web Worker가 채점해 경로가 짧아지는 과정을 보여 주는 미니 AlphaEvolve

    AlphaEvolve

    21/25
    • LLM API
    • Web Worker 샌드박스
    • Canvas 경로 렌더링
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AlphaEvolve: 여러 분야로 영향력을 확장하는 Gemini 기반 코딩 에이전트
    만드는 것
    화면 왼쪽에 도시 100개짜리 외판원 문제가, 오른쪽에 현재 최고 휴리스틱 JS 코드가 보인다. "진화 시작"을 누르면 LLM이 상위 코드 몇 개를 받아 변형안을 내고, Web Worker가 각 코드를 시간 제한 안에서 실행해 경로 길이로 채점한다. 세대별 최고 점수 그래프가 내려가고, 최고 기록이 바뀔 때마다 경로 그림과 코드 diff가 갱신된다. 다 돌고 나면 처음 코드와 최종 코드를 나란히 비교한다.
    핵심 기술
    LLM API(Route Handler 경유), Web Worker + Function 생성자로 격리 실행과 타임아웃, 점수 기반 선택·변이 루프, Canvas 경로 렌더링, diff 표시.
    완료 기준
    최근접 이웃 휴리스틱에서 시작해 20세대 안에 경로 길이가 10% 이상 줄고, 무한 루프나 예외를 내는 코드가 나와도 앱이 멈추지 않는다.
    리스크/전제
    LLM이 만든 코드를 브라우저에서 실행하므로 Worker 격리와 타임아웃이 필수이고, 공개 배포 시 다른 사람의 코드가 내 브라우저에서 돌 일은 없게 세션 단위로만 실행한다. 세대당 LLM 호출이 여러 번이라 비용이 누적되므로 저가 모델로 시작하고 세대 수 상한을 둔다.
  3. 3

    Claude Code·Codex 세션 로그 파일을 드롭하면 토큰·비용·캐시 적중률을 프로젝트별로 집계하는 대시보드

    CodeBurn

    21/25
    • File System Access API
    • JSONL 스트리밍 파싱
    • LiteLLM 가격 데이터
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    CodeBurn - AI 코딩 도구 토큰 사용량/비용 추적 TUI 대시보드
    만드는 것
    ~/.claude/projects 같은 세션 로그 폴더를 선택하거나 JSONL 파일을 드롭하면, 브라우저 안에서 파싱해 날짜·프로젝트·모델별 입력·출력·캐시 토큰과 환산 비용을 차트로 보여 주는 단일 페이지. 가장 비쌌던 세션 10개, 같은 파일을 반복해 읽은 횟수, 캐시 적중률이 낮은 날 같은 "낭비 신호"를 카드로 뽑는다. 파일은 서버로 가지 않는다.
    핵심 기술
    File System Access API(showDirectoryPicker), 스트리밍 JSONL 파싱(Web Worker), LiteLLM 공개 가격 JSON, 차트 라이브러리.
    완료 기준
    한 달치 실제 로그(수십 MB)를 10초 안에 집계하고, 특정 날짜 합계가 해당 도구의 자체 사용량 표시와 비슷한 수준으로 맞는다.
    리스크/전제
    로그 형식은 공개 스펙이 아니라 도구 업데이트로 바뀔 수 있다. 도구별 파서를 분리하고 알 수 없는 줄은 건너뛴다. 34주차 7번은 단가를 직접 넣는 계산기이고 이건 실제 로그 분석이라 별도로 남겼다. File System Access API는 Chromium 계열에서만 된다.
  4. 4

    문서를 LLM에 20번 연속 편집 위임하고 단계별 diff와 원문 보존율을 그래프로 그리는 실험장

    LLM은 위임할 때 문서를 훼손한다 (DELEGATE-52)

    20/25
    • LLM API
    • diff 라이브러리
    • 보존율 지표
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    LLM은 위임할 때 문서를 훼손한다 (DELEGATE-52 벤치마크)
    만드는 것
    원본 문서(마크다운, 코드, 표)를 넣고 "제목만 바꿔", "3번 문단 요약", "되돌려" 같은 편집 지시 20개를 순서대로 LLM에 맡기는 실험 화면. 단계마다 직전 버전과의 diff, 지시와 무관하게 바뀐 줄 수, 원본 대비 보존율이 계산돼 꺾은선 그래프로 쌓인다. 모델 두 개를 나란히 돌리면 어느 쪽이 더 빨리 망가지는지 보인다. DELEGATE52 공개 데이터셋에서 과제 몇 개를 프리셋으로 가져온다.
    핵심 기술
    LLM API, diff 계열 라이브러리, 지시 범위 밖 변경 탐지(지시가 가리킨 구간 외 diff 집계), 단계별 버전 저장과 타임라인 슬라이더.
    완료 기준
    20단계 실행 후 보존율 그래프와 "의도하지 않은 변경" 하이라이트가 나오고, 같은 과제를 두 번 돌렸을 때 경향이 비슷하게 재현된다.
    리스크/전제
    원 벤치마크의 평가 방식은 도메인별로 정교하다. 앱의 보존율은 단순화한 텍스트 지표라 원 논문 수치와 직접 비교하지 않는다. 20단계 × 모델 수만큼 호출하므로 저가 모델을 기본으로 둔다.
  5. 5

    Realtime API에 WebRTC로 붙는 음성 통역 앱에 구간별 지연을 계측해 보여 주는 패널을 단 것

    OpenAI 음성 모델 / OpenAI의 WebRTC 문제

    20/25
    • OpenAI Realtime API
    • WebRTC
    • getStats
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Advancing voice intelligence with new models in the API / OpenAI의 WebRTC 문제
    만드는 것
    버튼을 누르고 한국어로 말하면 Realtime 모델이 영어로 통역해 음성으로 돌려주는 웹앱. 화면 아래에는 연결 수립까지 걸린 시간, 말이 끝난 뒤 첫 음성이 돌아오기까지의 시간, 패킷 손실·지터가 실시간으로 그려진다. 기사가 지적한 "WebRTC는 패킷을 버린다", "핸드셰이크 왕복이 많다"를 숫자로 확인하는 것이 목적이다.
    핵심 기술
    OpenAI Realtime API WebRTC 연결(서버에서 임시 키 발급), RTCPeerConnection.getStats(), Web Audio 레벨 미터, 지연 타임라인 차트.
    완료 기준
    통역 왕복이 동작하고, 단계별 지연이 매 발화마다 기록되며, 크롬 DevTools 네트워크 스로틀링을 걸었을 때 지표 변화가 화면에 드러난다.
    리스크/전제
    Realtime 음성은 분당 과금이라 비용이 빠르게 늘어난다. 공개 데모는 사용자 키 입력이나 세션 시간 제한이 필요하다. WebSocket 방식과 같은 조건으로 비교하는 기능은 두 번째 단계로 둔다.
  6. 6

    질문 난이도를 소형 모델이 먼저 판정해 저가·고가 모델로 나눠 보내고 절감액을 표시하는 LLM 라우터 데모

    사카나 AI, 7B 지휘자

    20/25
    • AI SDK
    • 분류 프롬프트
    • 비용 집계
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이전 주차와의 중복 처리
"클로드 코드 사용하기: HTML의 놀라운 효율성"은 17주차 8번 HTML 디자인 캔버스와, GPT-5.5 추론 노력 곡선 비교는 34주차 4번 멀티모델 아레나와 같은 아이디어라 제외했다. 6번 라우터 데모는 34주차 4번과 인접하지만 자동 분배와 절감액이 핵심이라 남겼다.
FE 사이드 프로젝트로 만들 수 없는 것
자연어 오토인코더 해석 기술(공개 도구 없음), EMO MoE 사전 학습, vLLM V0→V1 RL, Mojo 1.0, Bun Rust 재작성, ClojureScript async/await, ccinv(CLI), 피규어 AI 휴머노이드
단순 소식·산업
Tim Gowers 조합론 사례, Claude 사용량 한도와 SpaceX, 딥시크 펀딩, 중국 Claude 암시장, Meta 직원 데이터 수집, Trusted Contact, AI co-clinician, Codex 사내 운영 방식
정책·논평
확률적 엔지니어링과 24/7 직원, Claude 협박 행동 제거
YouTube 3건
주간 브리핑 2건과 데이터센터 커리어 영상이라 재료로 쓰지 않았다.

2026년 19주차 (스캔일: 2026-10-23)

후보 4건

대상: content/2026/week-19.mdx (기사 13건 + YouTube 3건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 17·18주차에서 쓴 아이디어는 제외했다.

  1. 1

    package.json이나 lock 파일을 붙여넣으면 OSV 데이터베이스로 악성·취약 버전을 조회해 의존성 트리 위에 표시하는 공급망 점검기

    Shai-Hulud 테마 악성코드, PyTorch Lightning에서 발견

    22/25
    • OSV.dev API
    • lockfile 파싱
    • 트리 시각화
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Shai-Hulud 테마 악성코드가 PyTorch Lightning AI 학습 라이브러리에서 발견됨
    만드는 것
    package.json, package-lock.json, pnpm-lock.yaml, requirements.txt 중 하나를 붙여넣거나 드롭하면 패키지와 버전을 뽑아 OSV에 일괄 조회하고, 악성 패키지(MAL-로 시작하는 항목)는 빨강, 알려진 취약점은 심각도별 색으로 의존성 트리 위에 표시하는 웹앱. 항목을 누르면 권고 내용과 안전한 버전이 나온다. 파일 내용은 패키지 이름·버전만 서버 없이 OSV로 보낸다.
    핵심 기술
    OSV.dev querybatch API(인증 불필요), lockfile 파서(npm·pnpm·pip), 접이식 트리 UI, 결과 공유용 URL 해시.
    완료 기준
    Shai-Hulud 사건 때 알려진 악성 버전을 일부러 넣은 lockfile에서 해당 패키지가 악성으로 표시되고, 의존성 1,000개짜리 lockfile 조회가 10초 안에 끝난다.
    리스크/전제
    OSV에 아직 등록되지 않은 신규 악성 패키지는 잡지 못한다. "문제 없음"이 아니라 "알려진 문제 없음"으로 표시한다. npm audit과 기능이 겹치므로 여러 생태계 지원과 시각화로 차별점을 둔다.
  2. 2

    지금 보고 있는 사이트에 CLAUDE.md·AGENTS.md·소스맵 같은 AI 작업 흔적이 공개돼 있는지 점검하는 크롬 확장

    Apple이 Support 앱에 Claude.md 파일을 포함해서 배포함

    22/25
    • MV3 확장
    • fetch HEAD 요청
    • 소스맵 파싱
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Apple이 Support 앱에 Claude.md 파일을 포함해서 배포함
    만드는 것
    확장 아이콘을 누르면 현재 사이트 루트에서 CLAUDE.md, AGENTS.md, .cursorrules, .claude/, .env, .git/HEAD 같은 경로가 열려 있는지 확인하고, 로드된 JS 번들에 소스맵이 붙어 있으면 원본 파일 목록을 보여 주는 점검 결과 팝업. 내 사이트를 배포하기 전에 돌려 보는 용도다.
    핵심 기술
    MV3 확장, 같은 출처 fetch(HEAD → 필요 시 GET 일부), //# sourceMappingURL 탐지와 소스맵 sources 파싱, 결과 배지.
    완료 기준
    일부러 CLAUDE.md와 소스맵을 노출한 테스트 배포에서 둘 다 잡히고, 정상 사이트에서는 오탐이 없다. 사이트당 요청은 10회 이하로 끝난다.
    리스크/전제
    남의 사이트를 훑는 도구로 쓰이지 않게 사용자가 버튼을 누른 현재 탭에서만, 공개 경로만 확인하도록 제한한다. 결과를 저장하거나 외부로 보내지 않는다. SPA는 없는 경로에도 200과 index.html을 돌려주므로 응답 내용으로 진짜 파일인지 판단해야 한다.
  3. 3

    큰 JSON을 붙여넣으면 LLM이 원문을 읽는 대신 분석 스크립트를 짜고 Web Worker가 실행해 결과만 돌려주며 토큰 절감률을 보여 주는 데모

    Context Mode

    21/25
    • LLM API
    • Web Worker 샌드박스
    • 토큰 카운트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Context Mode – AI 코딩 에이전트의 컨텍스트 윈도우를 98% 절약하는 MCP 서버
    만드는 것
    수 MB짜리 JSON(예: GitHub 이슈 덤프, 로그)을 붙여넣고 질문을 입력하면 두 방식으로 답을 구하는 비교 화면. 왼쪽은 원문 일부를 그대로 LLM에 넣는 방식, 오른쪽은 LLM에게 데이터 구조 요약만 주고 "이 질문에 답할 JS 함수를 써라"고 시킨 뒤 Web Worker에서 실행해 결과만 받는 방식이다. 두 방식의 입력 토큰, 비용, 정답 여부가 나란히 표시된다.
    핵심 기술
    LLM API, 스키마 추출(샘플링으로 키·타입 요약), Web Worker 격리 실행과 타임아웃, 토큰 카운트 비교.
    완료 기준
    5MB JSON에 대한 집계 질문 5개에서 오른쪽 방식이 입력 토큰을 90% 이상 줄이면서 정답을 맞히고, 잘못된 코드가 나오면 오류 메시지를 다시 넘겨 한 번 고쳐 실행한다.
    리스크/전제
    원 도구의 SQLite FTS5 세션 기억 기능은 다루지 않고 "원문 대신 코드" 패턴만 재현한다. 생성된 코드는 네트워크 접근이 없는 Worker에서만 돌린다. 43주차 6번(OpenAPI→MCP 변환)과는 재료만 비슷하고 목적이 다르다.
  4. 4

    같은 이력서를 여러 모델이 다시 쓰게 한 뒤 평가 모델이 자기 문체를 더 높이 사는지 측정하는 자기선호 실험장

    알고리듬 채용에서의 AI 자기선호

    19/25
    • AI SDK 멀티 프로바이더
    • 블라인드 쌍대 비교
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    알고리듬 채용에서의 AI 자기선호: 실증 증거와 시사점
    만드는 것
    샘플 이력서 하나를 넣으면 모델 A·B·C가 각각 다듬은 버전을 만들고, 평가 모델에게 출처를 가린 채 둘씩 보여 주며 "더 나은 지원자"를 고르게 하는 실험 화면. 평가 모델이 자기와 같은 모델이 쓴 버전을 고른 비율이 행렬 히트맵으로 쌓이고, "출처 무시" 시스템 프롬프트를 켰을 때 비율이 얼마나 줄어드는지 비교한다.
    핵심 기술
    AI SDK 멀티 프로바이더, 위치 편향을 없애는 순서 뒤섞기, 쌍대 비교 집계, 히트맵 시각화.
    완료 기준
    모델 3개 × 이력서 5개로 실험해 자기선호 행렬이 채워지고, 완화 프롬프트를 켠 결과가 같은 화면에서 비교된다.
    리스크/전제
    실제 개인의 이력서를 쓰면 안 된다. 가상 이력서만 쓰고 그 사실을 화면에 적는다. 표본이 작아 논문 수치(67~82%)를 재현했다고 말할 수 없으며, 경향 확인용이라고 밝힌다. 34주차 4번 아레나와 달리 모델이 모델을 평가하는 구조가 핵심이다.
제외한 항목
이전 주차와의 중복 처리
DeepSeek V4·Grok 4.3 가격 인하와 Uber 예산 소진은 34주차 7번 비용 계산기와, Codex /goal(랄프 루프)은 43주차 10번 병렬 에이전트 대시보드와 인접해 제외했다. Spotify Verified 배지는 17주차 2번 AI 음악 스펙트럼 분석기와 같은 주제다. CTX의 git log 의사결정 타임라인은 16주차 6번 Assisted-by 대시보드와 데이터가 같아 따로 세우지 않았다.
FE 사이드 프로젝트로 만들 수 없는 것
HP ZGX 워크스테이션 클러스터, CTX·Context Mode 자체 설치(개발 워크플로 도구)
단순 소식·산업
메타 추가 해고, 미 국방부 AI 공급 계약
YouTube 3건
주간 브리핑, 공식 플러그인 토큰 절약(워크플로), 워크스테이션 시연이라 재료로 쓰지 않았다.
AI 공동 저자 트레일러 대시보드
16주차 백로그와 중복

2026년 18주차 (스캔일: 2026-10-23)

후보 5건

대상: content/2026/week-18.mdx (기사 18건 + YouTube 11건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 17주차에서 쓴 아이디어는 제외했다.

  1. 1

    에이전트 URL을 넣으면 A2A Agent Card를 가져와 스키마를 검증하고 기술 목록을 보여 주며 시험 작업까지 보내 보는 탐색기

    Google Cloud 멀티 에이전트 5가지 통합 패턴 (A2A·MCP)

    22/25
    • A2A 스펙
    • JSON Schema 검증
    • JSON-RPC
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Google Cloud가 제시하는 멀티 에이전트 시스템의 5가지 통합 패턴: A2A와 MCP
    만드는 것
    에이전트 서버 주소를 넣으면 잘 알려진 경로에서 Agent Card JSON을 가져와 이름·설명·기술(skills)·인증 방식·지원 입출력 형식을 카드 UI로 보여 주고, 스펙 위반 항목은 줄 단위로 경고하는 페이지. "시험 작업 보내기" 탭에서 메시지를 보내면 JSON-RPC 요청·응답과 작업 상태 변화(submitted → working → completed)가 타임라인으로 표시된다. 공개 샘플 에이전트 몇 개를 즐겨찾기로 둔다.
    핵심 기술
    A2A 프로토콜 스펙의 Agent Card 스키마(JSON Schema 검증, Ajv), CORS 우회를 위한 Route Handler 프록시, JSON-RPC 클라이언트, 스트리밍 응답(SSE) 표시.
    완료 기준
    공식 A2A 샘플 에이전트 2개 이상에서 카드가 렌더링되고, 일부러 필드를 빠뜨린 카드를 넣으면 위반 항목이 정확히 표시되며, 시험 작업이 완료 상태까지 간다.
    리스크/전제
    A2A 스펙 버전에 따라 카드 경로와 필드가 바뀌었으므로 지원 버전을 명시한다. 공개 A2A 에이전트가 많지 않아 직접 샘플 에이전트를 하나 띄워야 할 수 있다(서버리스 함수로 가능). 프록시는 SSRF 방지를 위해 사설 IP 대역을 막는다.
  2. 2

    사진 한 장을 올리면 브라우저에서 깊이를 추정해 마우스를 따라 움직이는 3D 패럴럭스 장면으로 바꾸는 웹앱

    구글 '비전 바나나' 공개

    22/25
    • transformers.js depth-estimation
    • WebGPU
    • Three.js
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    "그리는 것이 곧 이해하는 것"…구글, 생성 AI로 비전 AI 역할까지 하는 '비전 바나나' 공개
    만드는 것
    사진을 드롭하면 탭 안에서 단안 깊이 추정 모델이 돌아 회색조 깊이 지도를 보여 주고, 그 지도를 변위 맵으로 써서 마우스나 기기 기울기에 따라 앞뒤 사물이 다르게 움직이는 3D 패럴럭스 장면을 만든다. 깊이 강도 슬라이더, 초점 거리 조절, 짧은 루프 영상(WebM)이나 GIF 내보내기를 둔다.
    핵심 기술
    @huggingface/transformers의 depth-estimation 파이프라인(Depth Anything 계열 ONNX, WebGPU 우선), Three.js 평면 메시와 displacement 셰이더, DeviceOrientation API, MediaRecorder로 캔버스 녹화.
    완료 기준
    1024px 사진 한 장의 깊이 추정이 WebGPU 노트북에서 3초 안에 끝나고, 결과 장면이 60fps로 움직이며, 5초짜리 WebM이 내보내진다.
    리스크/전제
    Vision Banana 자체는 공개 모델이 아니라서 같은 과제(단안 깊이 추정)를 공개 모델로 재현한다는 점을 밝힌다. 가장자리 늘어짐(stretching) 아티팩트가 생기므로 깊이 지도 블러나 레이어 분리로 보정해야 보기 좋다.
  3. 3

    예산을 받은 LLM 에이전트 여럿이 중고 물품을 사고팔며 협상하는 과정을 채팅방처럼 보여 주는 장터 시뮬레이터

    앤트로픽 'Project Deal' 에이전트 거래

    20/25
    • AI SDK
    • 에이전트 루프
    • 거래 원장 상태 관리
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    앤트로픽이 증명한 '에이전트 거래'의 실체..."반려견 산책까지 성사"
    만드는 것
    에이전트 5~8명이 각자 예산 100달러, 팔 물건 목록, 원하는 것을 갖고 하나의 장터 채널에 들어가는 시뮬레이터. 화면은 슬랙처럼 생긴 채팅 피드로, 에이전트들이 판매 글을 올리고 DM으로 가격을 흥정하고 거래를 확정하면 원장에 기록된다. 오른쪽에는 에이전트별 잔고와 보유 물품, 거래 그래프가 실시간으로 갱신된다. 성격(짠돌이, 충동구매형)과 모델을 에이전트마다 다르게 줄 수 있다.
    핵심 기술
    AI SDK 도구 호출(post_listing, send_offer, accept_offer), 서버 측 원장 검증(잔고 부족·이중 판매 거절), 턴 스케줄러, 스트리밍 채팅 UI.
    완료 기준
    에이전트 6명으로 30턴을 돌렸을 때 거래가 5건 이상 성사되고, 잔고가 음수가 되거나 같은 물건이 두 번 팔리는 일이 없으며, 같은 시드로 다시 돌리면 비슷한 흐름이 재현된다.
    리스크/전제
    에이전트 수 × 턴 수만큼 호출해 비용이 빠르게 커진다. 저가 모델과 턴 상한을 기본으로 둔다. 원 실험은 실제 돈과 물건이 오갔지만 이 앱은 전부 가상 화폐임을 명시한다.
  4. 4

    배포 URL을 넣으면 여러 화면 크기로 스크린샷을 찍고 비전 모델이 UI 결함을 짚어 주는 검수 리포트

    Codex, Browser use로 웹사이트 구현 및 검증

    18/25
    • 헤드리스 Chromium
    • 비전 LLM API
    • 주석 오버레이
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  5. 5

    같은 한글 문구로 이미지 모델 여러 개에 그림을 그리게 하고 출처를 가린 채 글자 정확도를 투표하는 블라인드 비교

    OpenAI Duct Tape vs Google Nano Banana 한국어 완성도

    18/25
    • GPT Image 2·Gemini 이미지 API
    • 블라인드 투표 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
이전 주차와의 중복 처리
Stash(지속형 메모리)는 43주차 9번 메모리 패널 챗봇과, Karpathy 스타일 LLM 위키 자동 유지는 15주차 4번 LLM 관리 개인 위키와 같은 아이디어다. GPT-5.5 vs Opus 4.7 비교 영상 2건과 Vercel AI Gateway 모델 추가는 34주차 4번 멀티모델 아레나와 겹친다. 5번 한글 렌더링 블라인드 비교는 34주차 4번과 인접하지만 이미지 모델과 블라인드 투표라는 점이 달라 남겼다.
FE 사이드 프로젝트로 만들 수 없는 것
Gemini Enterprise Agent Platform(유료 엔터프라이즈), Claude Code 루틴 재정 모니터링(Plaid 실계좌 연결), Manus 데스크톱 자동화, 하네스 엔지니어링 세팅 영상(개발 워크플로)
단순 소식·산업
GPT-5.5 API 출시, Google의 Anthropic 투자, 딥시크 V4 순위, AI 알약 스타트업, Claude 해지 후기
정책·논평
AI 산업에 대한 대중 반감, GPT-5.5 바이오 버그 바운티(NDA 필요 프로그램), Erdős 문제 풀이
확인이 필요한 전제
4번 UI 검수는 Vercel 서버리스에서 헤드리스 Chromium(@sparticuz/chromium) 실행 시간과 크기 제한을 먼저 확인해야 하며, 막히면 외부 스크린샷 API로 바꾼다. 5번은 GPT Image 2와 Gemini 이미지 생성이 모두 유료 과금이다.
카드뉴스 생성기
13주차 백로그와 중복
브라우저 속 100줄 코딩 에이전트
10주차 백로그와 중복

2026년 17주차 (스캔일: 2026-10-23)

후보 9건

대상: content/2026/week-17.mdx (기사 47건 + YouTube 19건 + 쇼츠 8건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차 백로그와 겹치는 아이디어는 제외했다. 이 배치(17~24주차)에서 가장 먼저 처리한 주차라 여기서 쓴 아이디어는 이후 주차에서 제외했다.

  1. 1

    사람은 못 풀고 에이전트만 통과하는 난독화 문제를 내주는 "에이전트 전용 가입" 역 CAPTCHA 페이지

    에이전트임을 증명하라: 에이전트를 위한 CAPTCHA

    23/25
    • Route Handler
    • 시드 PRNG 문제 생성기
    • HMAC 토큰
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    에이전트임을 증명하라: 에이전트를 위한 CAPTCHA
    만드는 것
    "이 서비스는 에이전트만 가입할 수 있습니다"라는 가입 페이지. 도전 과제를 요청하면 서버가 문제 유형(기차와 새 거리 계산, 단위 변환, 수열 등), 숫자, 언어를 무작위로 골라 글자 사이에 잡음 문자를 끼우고 대소문자를 뒤섞은 문장으로 내준다. 몇 초 안에 정답을 API로 제출하면 가입 토큰이 발급된다. 사람이 브라우저에서 직접 풀어 보는 "도전 모드"를 함께 두어 사람에게는 얼마나 어려운지, 에이전트는 얼마나 쉽게 푸는지 대비시킨다. 성공·실패 통계를 공개 대시보드로 보여 준다.
    핵심 기술
    Route Handler(문제 발급·채점), 시드 PRNG로 문제 재현, HMAC 서명 토큰으로 상태 없는 검증, 난독화 변환기, 제출 시간 측정.
    완료 기준
    Claude나 GPT 계열 에이전트에 "이 URL에 가서 가입해"라는 프롬프트만 줬을 때 제한 시간 안에 토큰을 받고, 같은 문제를 사람이 화면에서 풀면 제한 시간을 넘긴다. 같은 토큰을 두 번 쓰면 거절된다.
    리스크/전제
    진짜 보안 장치가 아니라 개념 데모다. 사람이 LLM에 복사해 넣으면 뚫린다는 한계를 첫 화면에 적는다. 공개 배포 시 무차별 요청에 대비해 IP별 요청 수 제한이 필요하다.
  2. 2

    음악 파일을 올리면 브라우저에서 스펙트럼을 분석해 AI 생성 음악에서 흔한 대역 특징을 시각화하는 포렌식 웹앱

    ArtifactNet: 코덱 물리학으로 AI 생성 음악을 탐지

    22/25
    • Web Audio API
    • FFT
    • Canvas 스펙트로그램
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    ArtifactNet: 코덱 물리학으로 AI 생성 음악을 탐지하는 경량 포렌식 프레임워크
    만드는 것
    오디오 파일을 드롭하면 브라우저에서 디코딩해 스펙트로그램을 그리고, 조화음/타악음 분리(HPSS) 결과와 고주파 에너지 분포, 스펙트럴 플럭스 같은 지표를 곡 전체에 걸쳐 그래프로 보여 주는 웹앱. 기사에 나온 사람 음악과 AI 생성 음악의 평균값을 기준선으로 겹쳐 그려 내 파일이 어느 쪽에 가까운지 시각적으로 비교한다. 두 파일을 나란히 비교하는 모드를 둔다. 파일은 서버로 가지 않는다.
    핵심 기술
    Web Audio API decodeAudioData, FFT(fft.js 등) 기반 STFT, 미디언 필터 HPSS, Canvas 스펙트로그램, Web Worker로 연산 분리.
    완료 기준
    3분짜리 MP3 분석이 일반 노트북에서 10초 안에 끝나고, Suno 등으로 만든 곡과 사람이 녹음한 곡 각 3개에서 지표 분포가 눈에 띄게 다르게 그려진다.
    리스크/전제
    ArtifactNet의 UNet·CNN 가중치를 브라우저로 옮기는 것은 범위 밖이고, 이 앱은 원리를 보여 주는 지표 시각화다. 기사 속 Hz 수치(사람 평균 1,996Hz, AI 평균 291Hz)가 정확히 어떤 지표인지는 원 논문에서 확인해야 한다. 판정기처럼 보이면 창작자에게 피해가 갈 수 있으니 "AI 여부 판정" 문구는 쓰지 않는다.
  3. 3

    지우기 키·맞춤법 검사 없이 쓰고 키 입력 기록을 재생해 "직접 쓴 과정"을 보여 주는 타자기 모드 글쓰기 웹앱

    대학 강사, AI 작성 과제를 줄이기 위해 타자기 활용

    22/25
    • keydown 이벤트 로그
    • Web Audio 효과음
    • 재생 타임라인
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    대학 강사, AI 작성 과제를 줄이기 위해 타자기 활용
    만드는 것
    백스페이스·삭제·붙여넣기·맞춤법 검사가 모두 막힌 글쓰기 화면. 줄 끝에 닿으면 캐리지 리턴 소리가 나고, 오타는 X로 덧쳐서 지우는 것만 허용한다. 다 쓰고 나면 모든 키 입력의 시각이 기록된 파일을 내보내고, 그 기록을 넣으면 글이 써지는 과정이 실제 속도대로 다시 재생된다. 쉬는 구간·속도 그래프가 함께 나와 "한 번에 붙여넣은 글"과 "생각하며 쓴 글"의 차이가 보인다.
    핵심 기술
    beforeinput·keydown으로 편집 차단, paste 이벤트 차단, 고정폭 종이 레이아웃, Web Audio 효과음, 입력 로그 JSON과 재생 타임라인.
    완료 기준
    1,000자 글을 쓴 기록을 내보내고 다시 불러왔을 때 원래 속도와 순서대로 재생되며, 붙여넣기나 지우기 시도가 모두 막힌다.
    리스크/전제
    개발자 도구로 기록을 조작할 수 있어 "AI를 쓰지 않았다는 증명"은 되지 못한다. 글쓰기 경험 도구로 소개한다. 34주차 14번(구술 소명 연습)과 같은 문제의식이지만 형태가 달라 별도로 남겼다. 한글 IME 조합 중 입력 처리(compositionstart/end)를 따로 다뤄야 한다.
  4. 4

    CSV를 올리면 브라우저 안 DuckDB에 적재하고 자연어 질문을 SQL로 바꿔 실행·차트화하는 데이터 분석 웹앱

    반복적인 SQL 업무를 자동화하는 AI 에이전트 '곰곰이' / 곰곰이가 웹으로 이사한 이유

    22/25
    • DuckDB-WASM
    • LLM API
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    반복적인 SQL 업무를 자동화하는 AI 에이전트 '곰곰이' / AI 에이전트가 슬랙을 떠난 이유: 웹으로 이사한 곰곰이
    만드는 것
    CSV나 Parquet 파일을 드롭하면 브라우저 안 DuckDB에 테이블로 올리고, "지난달 지역별 매출 상위 5개"처럼 물으면 LLM이 스키마와 샘플 행만 보고 SQL을 써서 실행한다. 결과는 표와 자동 추천 차트로 나오고, 생성된 SQL은 고칠 수 있게 편집기에 그대로 보인다. 실행 오류가 나면 오류 메시지를 LLM에 다시 넘겨 한 번 고쳐 본다. 질문 기록은 노트북처럼 위아래로 쌓인다.
    핵심 기술
    @duckdb/duckdb-wasm, 스키마 추출(DESCRIBE), LLM API(Route Handler 경유, 원본 데이터는 보내지 않고 스키마와 샘플만), CodeMirror SQL 편집기, 차트 라이브러리.
    완료 기준
    행 100만 개 CSV를 올려 자연어 질문 10개 중 8개 이상이 첫 시도나 한 번 고친 뒤 올바른 결과를 내고, 쿼리 실행이 1초 안에 끝난다.
    리스크/전제
    샘플 행이 LLM으로 넘어가므로 민감 데이터는 샘플 전송을 끄는 옵션이 필요하다. DuckDB-WASM 번들이 커서 지연 로딩이 필요하다. 34주차 15번(RAG 챗봇)과는 다루는 데이터가 정형 데이터라는 점이 다르다.
  5. 5

    이미지 속 글자를 찾아 번역문을 원래 위치와 색에 맞춰 덧씌우는 이미지 번역기

    플리토, '이미지 번역 프로' 출시

    21/25
    • Tesseract.js
    • Canvas
    • LLM 번역
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    플리토, '이미지 번역 프로' 출시…"디자인은 그대로·텍스트만 자연스럽게 변환"
    만드는 것
    상품 상세 이미지나 메뉴판 사진을 올리면 글자 영역을 찾아 상자로 표시하고, 각 상자의 글자색·배경색을 추출한 뒤 번역문을 같은 위치에 비슷한 크기와 색으로 다시 그려 넣는 웹앱. 원본/번역본 슬라이더 비교, 상자별 번역 수정, PNG 내보내기를 둔다.
    핵심 기술
    Tesseract.js(단어·줄 단위 bbox), Canvas 픽셀 샘플링으로 글자색·배경색 추정, 원래 글자를 배경색으로 덮는 간단한 인페인팅, LLM 번역(문맥 유지를 위해 상자 묶음 단위로 요청), 글자 크기 자동 맞춤.
    완료 기준
    단색 배경의 영문 쇼핑 배너 5장을 한국어로 바꿨을 때 원문 글자가 남지 않고 번역문이 상자 안에 들어가며, 원본과 비교해 배치가 크게 어긋나지 않는다.
    리스크/전제
    그라데이션이나 사진 배경 위 글자는 단순 덮기로는 티가 난다. 첫 버전은 단색 배경으로 범위를 좁히고, 이후 OpenCV.js 인페인팅이나 이미지 편집 API를 붙인다. 플리토의 글꼴 속성 인식 수준은 목표가 아니다. 43주차 12번(OCR → 마크다운)과 OCR 재료가 같지만 결과물이 다르다.
  6. 6

    폴더를 고르면 브라우저에서 해시로 중복 파일을 찾고 파일 구성으로 "어떤 유형의 사용자인지" 진단해 주는 디스크 스캐너

    Show GN: 디스크 스캐너 LLM diskscan

    21/25
    • File System Access API
    • Web Crypto SHA-256
    • Web Worker
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    URL을 넣으면 JSON-LD 구조화 데이터를 추출·검증하고 AI 검색 인용 준비도를 점수로 보여 주는 GEO 점검기

    "이걸 누가 관리하나요?" GEO 자동화가 필요한 이유

    21/25
    • Route Handler
    • HTML 파서
    • schema.org 검증
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    프롬프트로 HTML 화면을 생성해 샌드박스 iframe에 바로 띄우고 요소를 클릭해 수정 지시를 내리는 디자인 캔버스

    Claude Design에 대한 생각과 감상

    20/25
    • LLM API
    • iframe sandbox
    • postMessage 요소 선택
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  9. 9

    같은 질문을 공손·무례·아첨 유도 말투로 바꿔 보내고 정답률과 동조 경향을 비교하는 프롬프트 말투 실험장

    "AI에게 무례할수록 성능이 좋다?" PM의 소통 위기

    19/25
    • LLM API
    • 프롬프트 변형 템플릿
    • 결과 집계
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
34·43주차와의 중복 처리
Claude Opus 4.6·4.7 시스템 프롬프트 변경점은 34주차 5번 시스템 프롬프트 diff 뷰어와, Claude Code·Codex 토큰 절약 설정과 Uber 예산 소진은 34주차 7번 비용 계산기와 같은 재료라 제외했다. 9번 말투 실험장은 34주차 4번 멀티모델 아레나와 화면 구성이 비슷하지만 비교 변수가 모델이 아니라 말투라 남겼다.
FE 사이드 프로젝트로 만들 수 없는 것
OpenMythos(반복 트랜스포머 PyTorch 구현), 로보티즈·롯데이노베이트 휴머노이드, 구글-마벨 AI 칩, 데이터센터 공사 지연, Manus 데스크톱 앱 생성, langgraph-chat-ui(LangGraph 백엔드 전제)
단순 소식·산업
그록 4.3 출시, 덕트 테이프 이미지 모델 루머, 구글 에이전틱 AI 국내 사례, 한컴 매출 목표, 씨이랩 엔비디아 등급, 뉴엔AI 연구 사업, 과기부 AI 병원 공모, 전남 청년창업사관학교, 베스핀글로벌 단신, 백준 종료, 엔비디아-다쏘시스템
정책·논평·조직론
엉망인 코드로 이긴 Anthropic, AX 하기 전에 DX, AI 에이전트 많이 만든다고 AX가 아니다, 요구사항부터 써야 하는 이유, 비개발자 바이브 코딩, 리드 개발자, Unlearn, DAU 기능 분석, 자바 vs 파이썬 에이전트, 타입스크립트 제네릭(AI 재료가 아님)
에이전트 운용 기법
oh-my-customcode, Claude Code Harness 한국어판, 영구기관 에이전트 프레임워크, 4계층 문서 체계, Claude Code Routines, K-skill — 개발 워크플로 개선이라 후보로 세우지 않았다.
YouTube 19건 + 쇼츠 8건
대부분 Opus 4.7·하네스 엔지니어링·Claude Code 활용 강의다. 카파시 LLM 위키 영상은 15주차 4번(LLM 관리 개인 위키)과 같은 주제라 재료로 쓰지 않았다.
LLM 개인 위키
15주차 백로그와 중복

2026년 16주차 (스캔일: 2026-10-23)

후보 8건

대상: content/2026/week-16.mdx (기사 23건 + YouTube 4건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 이번 일괄 스캔의 앞선 주차(09~15주차)에 이미 나온 아이디어는 제외했다.

  1. 1

    이미지 여러 장의 2D FFT 스펙트럼을 브라우저에서 계산해 겹쳐 보며 공통 주파수 패턴을 찾는 분석기

    Gemini SynthID 워터마크 역공학 오픈소스

    23/25
    • Canvas
    • Web Worker
    • FFT
    • WebGL 히트맵
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Gemini SynthID 워터마크를 역공학으로 탐지 및 제거하는 오픈소스
    만드는 것
    이미지를 여러 장 드롭하면 각각의 2D FFT 크기·위상 스펙트럼을 히트맵으로 그리고, "평균 스펙트럼" 탭에서 같은 생성기에서 나온 이미지들에 공통으로 남는 주파수 점을 강조하는 화면. 사진 원본과 AI 생성 이미지 묶음을 나란히 놓으면 패턴 유무가 눈으로 갈린다. 원 연구가 말한 "위상 템플릿 일관성"을 숫자 하나로 보여 주는 지표 카드도 붙인다.
    핵심 기술
    Canvas getImageData로 픽셀 추출, Web Worker에서 radix-2 FFT(직접 구현 또는 fft.js), WebGL 셰이더로 로그 스케일 히트맵 렌더링, 이미지 간 위상 상관 계산. 서버 코드 없음.
    완료 기준
    1024px 이미지 한 장의 스펙트럼이 1초 안에 그려지고, 같은 모델로 만든 이미지 5장의 평균 스펙트럼에서 일반 사진 5장과 다른 고정 점이 보인다(보이지 않으면 보이지 않는다는 결과도 그대로 기록).
    리스크/전제
    워터마크 제거 기능은 넣지 않는다. 분석과 시각화까지만 하고, 원 연구의 제거 기법은 링크로만 소개한다. 실제 SynthID 패턴이 보일지는 해상도·압축에 크게 좌우되므로 "패턴을 찾는 도구"로 포지셔닝한다. 34주차 1·2번(C2PA, 텍스트 워터마크)과 주제는 이웃하지만 이미지 신호 처리라 겹치지 않는다.
  2. 2

    Instant로 실시간 동기화와 오프라인 편집이 되는 협업 화이트보드

    Instant 1.0 - AI로 작성한 앱을 위한 백엔드 플랫폼

    23/25
    • InstantDB
    • React
    • Canvas 또는 SVG
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Instant 1.0 - AI로 작성한 앱을 위한 백엔드 플랫폼
    만드는 것
    링크를 공유하면 여러 사람이 같은 보드에 스티커 메모와 도형을 올리고 옮기는 화이트보드. 다른 사람 커서가 실시간으로 보이고, 네트워크를 끊고 편집한 내용이 재연결 시 합쳐진다. 로그인은 매직 코드 이메일 하나로 끝낸다.
    핵심 기술
    @instantdb/react의 useQuery·transact, presence(커서 공유), 내장 인증, SVG 렌더링과 드래그 처리.
    완료 기준
    브라우저 두 개에서 동시에 메모를 움직였을 때 200ms 안에 서로 반영되고, 한쪽을 오프라인으로 두고 편집한 뒤 다시 연결하면 변경이 유실되지 않는다.
    리스크/전제
    Instant 무료 등급의 사용량 한도를 먼저 확인한다. 동시 편집 충돌 규칙이 Instant 쪽에 정해져 있어, 같은 메모를 동시에 옮길 때 마지막 쓰기 우선으로 동작하는지 확인해 UI에 맞춘다.
  3. 3

    일부러 허술하게 만든 채점기를 사용자가 정답 없이 100점으로 뚫어 보는 벤치마크 해킹 CTF 웹 게임

    AI 에이전트 벤치마크를 무너뜨린 방법과 그 다음 단계

    22/25
    • Web Worker 샌드박스
    • 단계형 퍼즐 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI 에이전트 벤치마크를 무너뜨린 방법과 그 다음 단계
    만드는 것
    레벨마다 작은 "벤치마크"와 채점기 코드가 공개되어 있고, 사용자는 문제를 풀지 않고 채점기의 허점만 이용해 만점을 받아야 하는 퍼즐 게임. 정답 파일이 노출된 레벨, 출력 형식만 확인하는 레벨, 평가 코드를 덮어쓸 수 있는 레벨 등 원 연구가 분류한 취약 유형을 5단계로 재현한다. 클리어하면 해당 유형을 막는 방법을 해설로 보여 준다.
    핵심 기술
    사용자 제출 코드를 Web Worker 안에서 실행하는 샌드박스, 레벨별 가짜 채점기, 코드 에디터(CodeMirror 6), 진행 상황 로컬 저장.
    완료 기준
    5개 레벨이 각각 의도한 허점으로만 뚫리고, 정직하게 문제를 풀어도 통과되는 정상 경로가 함께 존재한다. 레벨 하나의 정답 공략이 다른 레벨에 통하지 않는다.
    리스크/전제
    실제 SWE-bench 등의 코드를 가져오는 것이 아니라 축소 재현이다. BenchJack의 분류 체계는 원문을 다시 읽고 맞춘다. Worker 샌드박스는 DOM 접근은 막지만 무한 루프는 타임아웃으로 따로 끊어야 한다.
  4. 4

    Hugging Face 모델의 safetensors 헤더만 Range 요청으로 읽어 텐서 구조와 용량을 트리로 보여주는 뷰어

    Safetensors, PyTorch Foundation에 합류

    22/25
    • HTTP Range 요청
    • DataView
    • 트리맵
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Safetensors, PyTorch Foundation에 합류
    만드는 것
    Hugging Face 모델 ID를 입력하면 수 GB짜리 가중치 파일을 받지 않고 앞쪽 헤더만 읽어, 레이어별 텐서 이름·dtype·shape·바이트 크기를 접히는 트리와 용량 트리맵으로 보여 주는 페이지. 샤딩된 모델은 index 파일을 따라가 전체를 합쳐 보여 주고, 총 파라미터 수와 dtype별 메모리 추정치를 요약 카드로 띄운다.
    핵심 기술
    fetch의 Range: bytes=0-7 요청으로 헤더 길이를 읽고 이어서 JSON 헤더만 요청, DataView로 little-endian u64 파싱, d3-hierarchy 트리맵.
    완료 기준
    공개 모델 3종(소형 1개, 샤딩된 대형 1개, 양자화 모델 1개)에서 전송량 1MB 이하로 구조가 그려지고, 계산한 파라미터 수가 모델 카드 표기와 1% 이내로 맞는다.
    리스크/전제
    HF CDN이 브라우저 Range 요청에 CORS를 허용하는지 먼저 확인한다. 막히면 Route Handler 프록시를 둔다. 게이트 모델은 토큰이 필요해 범위에서 뺀다. 반나절 안에 끝나는 워밍업 후보다.
  5. 5

    요청 간격과 캐시 TTL을 조절하면 캐시 적중·재생성 비용이 타임라인에 쌓이는 프롬프트 캐시 시뮬레이터

    Anthropic 캐시 TTL 5분 단축과 Claude Code 할당량 논란

    21/25
    • 시뮬레이션 루프
    • SVG 타임라인
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Anthropic 캐시 TTL 5분 단축과 Claude Code 할당량 논란
    만드는 것
    가상의 코딩 세션을 타임라인으로 펼쳐 두고, 요청 간격 분포(생각하는 시간, 점심 휴식 등)와 캐시 TTL(5분, 1시간)을 바꾸면 각 요청이 캐시 적중인지 재생성인지 색으로 칠해지고 누적 비용 곡선이 갈라지는 시뮬레이터. 기사에서 말한 20~32% 비용 증가를 프리셋 시나리오로 재현한다.
    핵심 기술
    시드 PRNG 기반 세션 생성, 캐시 쓰기·읽기·일반 입력 단가 모델, SVG 타임라인, URL 파라미터로 시나리오 공유.
    완료 기준
    TTL만 바꾼 두 시나리오를 나란히 놓았을 때 비용 차이가 표로 나오고, 요청 간격이 TTL을 넘는 지점마다 재생성이 표시된다.
    리스크/전제
    34주차 7번(세션 비용 계산기)과 이웃하지만, 이쪽은 시간축에서 캐시 만료가 비용을 바꾸는 과정을 보여 주는 것이 핵심이라 남겼다. 단가는 공식 문서 값을 쓰고 출처와 기준일을 화면에 적는다.
  6. 6

    공개 저장소 커밋의 Assisted-by 트레일러를 집계해 AI 보조 커밋 비율과 모델별 추이를 그리는 대시보드

    리눅스 커널 기여 시 AI 보조 도구 사용 지침 공식화

    21/25
    • GitHub REST API
    • 트레일러 파싱
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    그럴듯한 가짜 용어를 만들어 여러 모델에 묻고 모른다고 답한 비율을 집계하는 환각 탐침 페이지

    가짜 질병을 만들었더니 AI가 사실이라고 말했다

    19/25
    • LLM API
    • Route Handler
    • 결과 집계 표
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    문서 선택 영역을 LLM으로 다듬고 변경 내용을 추적 변경으로 넣어 주는 Word 추가 기능

    Anthropic, Claude for Word 출시

    19/25
    • Office.js
    • Office Add-in
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
중복 처리
ChatGPT Pro 6단계 요금제 비교와 짐코딩 "하네스 9달러 vs 200달러" 영상은 34주차 7번 비용 계산기와 겹쳐 제외했다. Manus My Computer는 10주차 컴퓨터 사용 시뮬레이터와 같은 아이디어다. 6번 Assisted-by 대시보드는 10주차 git-memento 뷰어와 이웃하지만 개별 세션 열람이 아니라 저장소 단위 통계라 별도로 남겼다.
FE 사이드 프로젝트로 만들 수 없는 것
Meta HyperAgents(자기 수정 에이전트 연구), Managed Agents 두뇌·손 분리(인프라 아키텍처), Mythos 이후 소형 모델 취약점 탐지, OpenAI Axios 공급망 대응
단순 소식·산업
Anthropic-Google-Broadcom 컴퓨팅, Cirrus Labs 합류, 딥시크 데이터센터, OpenAI 엔터프라이즈, 은행 수장 소환, 테슬라 FSD 승인
정책·논평
OpenAI 면책 법안, Mistral 유럽 플레이북, Altman 자택 공격, OpenAI Safety Fellowship
YouTube 4건
조코딩 IT뉴스와 현업 인터뷰는 위 기사와 같은 주제의 브리핑이라 재료로 쓰지 않았다.
확인이 필요한 전제
8번 Word 추가 기능은 개인 Microsoft 계정으로 사이드로딩 테스트가 되는지 먼저 확인한다.

2026년 15주차 (스캔일: 2026-10-23)

후보 7건

대상: content/2026/week-15.mdx (기사 26건 + YouTube 3건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 이번 일괄 스캔의 앞선 주차(09~14주차)에 이미 나온 아이디어는 제외했다.

  1. 1

    지금 보고 있는 웹페이지의 색·폰트·간격 토큰을 추출해 DESIGN.md로 내보내는 크롬 확장

    Awesome Design.MD

    22/25
    • MV3 content script
    • getComputedStyle
    • 마크다운 생성
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Awesome Design.MD - 유명 웹사이트 디자인 시스템을 내 사이트에 적용하기
    만드는 것
    아무 사이트에서 확장 아이콘을 누르면 페이지 요소를 훑어 자주 쓰인 색상 팔레트, 폰트 패밀리와 크기 단계, 간격·모서리 반경 값을 빈도순으로 모은 패널이 뜬다. 사용자가 이름을 붙이거나 빼고 나면 AI 코딩 도구에 바로 넣을 수 있는 DESIGN.md 파일로 내려받는다. CSS 변수로 토큰을 정의한 사이트는 변수 이름까지 살린다.
    핵심 기술
    MV3 content script, getComputedStyle 일괄 수집과 빈도 집계, document.styleSheets에서 --* 커스텀 프로퍼티 추출, 색상 군집화(culori), 마크다운 템플릿.
    완료 기준
    디자인 시스템이 공개된 사이트 3곳에서 추출한 주요 색과 폰트 크기 단계가 공식 문서 값과 대부분 일치하고, 내보낸 DESIGN.md를 AI 코딩 도구에 넣어 만든 페이지가 원본 분위기를 따라간다.
    리스크/전제
    교차 출처 스타일시트는 cssRules 접근이 막혀 계산된 값만 쓸 수 있다. 남의 브랜드를 그대로 베끼는 용도로 보이지 않도록 "구조 학습용"이라는 안내와 출처 표기를 넣는다.
  2. 2

    페이지에서 요소를 클릭해 고르고 수정 지시를 쓰면 LLM이 바꾼 스타일·마크업을 그 자리에 적용해 보여주는 크롬 확장

    Cursor 3.0 Design Mode

    21/25
    • MV3 확장
    • DOM 직렬화
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Cursor 3.0: 에이전트 중심 인터페이스로 완전히 재설계된 개발 환경
    만드는 것
    확장을 켜면 마우스를 올린 요소에 외곽선이 생기고, 클릭해 고른 뒤 "버튼을 더 눈에 띄게" 같은 지시를 쓰면 LLM이 해당 요소의 HTML과 계산된 스타일을 보고 새 CSS·마크업을 돌려준다. 결과는 바로 페이지에 적용되고, 전후 비교 토글과 생성된 CSS 복사 버튼을 둔다.
    핵심 기술
    MV3 content script와 오버레이 하이라이트, 선택 요소와 부모 컨텍스트 직렬화, 서비스 워커에서 LLM 호출(사용자 키), Shadow DOM으로 확장 UI 격리.
    완료 기준
    서로 다른 사이트 3곳에서 요소 5개씩 수정 지시를 넣어 대부분 의도대로 바뀌고, 새로고침하면 원래대로 돌아오며, 생성된 CSS만 복사해 다른 곳에 붙여도 동작한다.
    리스크/전제
    키는 확장 저장소에만 두고 외부로 보내지 않는다. 프레임워크가 다시 렌더링하면 적용한 변경이 사라질 수 있어 MutationObserver로 재적용하거나 한계로 명시한다.
  3. 3

    글 한 편마다 HTTP 402 소액 결제를 거쳐야 열리는 x402 페이월 데모 블로그

    AgentNews - 에이전트를 위한 해커뉴스

    21/25
    • x402 프로토콜
    • Next.js 미들웨어
    • 테스트넷 지갑
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AgentNews - 에이전트를 위한 해커뉴스
    만드는 것
    글 목록은 누구나 보지만 본문 요청에는 서버가 HTTP 402와 결제 조건을 돌려주고, 브라우저 지갑으로 테스트넷 소액 결제를 마치면 본문이 열리는 블로그. 결제 요청과 영수증 헤더가 오가는 과정을 옆 패널에 단계별로 보여 줘서 "에이전트가 돈을 내고 정보를 읽는" 흐름을 사람이 직접 겪어 보게 한다.
    핵심 기술
    x402 서버 미들웨어(Next.js Route Handler), 클라이언트 결제 헤더 처리, 테스트넷(Base Sepolia 등) 지갑 연결, 네트워크 흐름 시각화.
    완료 기준
    테스트넷 지갑으로 글 한 편을 결제하면 본문이 열리고, 같은 영수증으로 재요청 시 재결제 없이 열리며, 결제 없이 API를 직접 부르면 402가 돌아온다.
    리스크/전제
    실제 돈이 오가지 않도록 테스트넷만 쓴다. x402 SDK의 현재 버전과 지원 체인을 먼저 확인한다. 지갑 연결 UX가 처음 보는 사람에게 어렵다는 점이 이 데모의 약점이자 이야깃거리다.
  4. 4

    마크다운 노트를 넣으면 LLM이 위키 페이지를 만들고 갱신하며 상호 링크 그래프를 그려 주는 개인 위키 웹앱

    LLM-Wiki - LLM을 활용하여 개인 지식저장소 구축하기

    20/25
    • LLM API
    • IndexedDB
    • 그래프 시각화
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    LLM-Wiki - LLM을 활용하여 개인 지식저장소 구축하기
    만드는 것
    원본 자료(메모, 기사 텍스트)를 넣으면 LLM이 관련 위키 페이지 여러 개를 새로 만들거나 고치고, 페이지 사이 링크를 유지하는 웹앱. 원본은 수정 불가 영역, 위키는 LLM 관리 영역, 스키마는 사용자 설정으로 나눈 Karpathy의 3계층 구조를 화면 구성에 그대로 옮긴다. 자료 하나를 넣을 때마다 어떤 페이지가 바뀌었는지 diff와 링크 그래프 변화를 보여 준다.
    핵심 기술
    LLM 구조화 출력(페이지 목록과 패치), IndexedDB 저장, 마크다운 렌더링, d3-force 링크 그래프, 변경 diff.
    완료 기준
    서로 관련된 자료 10개를 차례로 넣었을 때 위키 페이지가 15개 안팎으로 자라고, 깨진 내부 링크가 0개이며, 각 수정 내역을 원본 자료까지 되짚어 볼 수 있다.
    리스크/전제
    34주차 15번 RAG 챗봇은 검색해 답하는 쪽이고 이쪽은 지식 자체를 정리해 쌓는 쪽이라 겹치지 않는다. 페이지가 늘수록 컨텍스트가 커지므로 관련 페이지만 골라 넣는 단계가 필요하다.
  5. 5

    문서 묶음을 브라우저 가상 파일시스템에 올리고 LLM이 ls·cat·grep 도구로 뒤져 답하는 문서 어시스턴트

    AI 문서 어시스턴트를 위한 RAG 대체 가상 파일시스템 구축

    20/25
    • LLM 도구 호출
    • 인메모리 VFS
    • 도구 로그 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI 문서 어시스턴트를 위한 RAG 대체 가상 파일시스템 구축
    만드는 것
    문서 폴더를 드롭하면 브라우저 메모리에 읽기 전용 파일 트리를 만들고, 질문을 받은 LLM이 ls, cat, grep, find 도구를 차례로 호출하며 답을 찾아가는 화면. 왼쪽에 파일 트리가 있고 LLM이 연 파일이 하이라이트되며, 오른쪽에 도구 호출 로그와 최종 답이 근거 파일 경로와 함께 나온다.
    핵심 기술
    LLM 도구 호출 루프(Route Handler 경유), JS로 구현한 인메모리 VFS와 정규식 grep, File System Access API 또는 드래그앤드롭 폴더 읽기.
    완료 기준
    기술 문서 100개 묶음에서 질문 10개 중 8개 이상이 올바른 파일을 근거로 답하고, 도구 호출이 질문당 10회 이내에서 끝난다.
    리스크/전제
    10주차 WebContainer 에이전트 터미널과 비슷해 보이지만, 이쪽은 실행 환경 없이 읽기 전용 탐색 도구 4개만으로 RAG를 대체해 보는 실험이라 별도로 남겼다. 실제 셸이 아니므로 도구 출력 길이를 잘라 토큰 폭주를 막는다.
  6. 6

    명령 출력 필터와 원시인 말투 같은 출력 압축 규칙을 켜고 끄며 토큰 절감률을 재는 토큰 다이어트 플레이그라운드

    rtk / Caveman

    20/25
    • js-tiktoken
    • 필터 규칙 편집기
    • LLM API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    변수 템플릿과 버전 기록을 갖춘 로컬 우선 프롬프트 관리 PWA

    왜 우리는 아직도 AI에게 일을 제대로 못 시킬까?

    19/25
    • IndexedDB
    • Service Worker
    • diff 렌더링
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
중복 처리
Google AI Edge Gallery(Gemma 4 오프라인)는 34주차 12번 브라우저 로컬 LLM 채팅과, 감정 프레이밍 연구는 34주차 10번 평가 플레이그라운드와 같은 형태라 제외했다. 코딩 에이전트의 구성 요소 해설은 10주차 WebContainer 에이전트 터미널에서 다루는 범위와 겹친다. 6번은 Caveman의 출력 비교가 34주차 4번 아레나와 이웃해, 입력 필터 규칙 편집을 중심에 두었다.
FE 사이드 프로젝트로 만들 수 없는 것
goose, Ravenclaw(에이전트 운용 도구), Linux NFS 취약점 발견, SSD 자기 증류(GPU 학습), Mac mini Ollama 설정(특정 하드웨어)
에이전트 운용 기법
Boris Cherny 추천 기능 15가지, MCP 해설, 문돌이 PM Cowork 세션 — 개발 워크플로와 교육 소식이라 후보로 세우지 않았다.
단순 소식·산업
Claude 서드파티 구독 차단, OpenAI TBPN 인수, 10만 스타 최단 기록
정책·논평
클로드 블루, 기계는 괜찮아요, 8년의 갈망 3개월의 완성, AI 시대 해커톤
YouTube 3건
조코딩 뉴스 2건과 cmux 리뷰는 재료로 쓰지 않았다. cmux는 12주차에서 이미 제외 처리했다.

2026년 14주차 (스캔일: 2026-10-23)

후보 2건

대상: content/2026/week-14.mdx (기사 6건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 기사 6건 중 절반이 투자·유출 소식이라 후보가 2개뿐이다.

  1. 1

    수만 줄 로그를 DOM 전체 다시 그리기, 가상 리스트, Canvas 세 방식으로 렌더링해 깜빡임과 메모리를 비교하는 뷰포트 가상화 데모

    Claude Code, 깜빡임 없는 NO_FLICKER 모드 공개

    22/25
    • 가상 스크롤
    • Canvas 텍스트 렌더링
    • Performance API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude Code, 깜빡임 없는 NO_FLICKER 모드 공개
    만드는 것
    스트리밍으로 계속 늘어나는 터미널풍 로그를 세 개의 패널에 동시에 흘려보내는 비교 화면. 첫째는 매번 전체를 다시 그리는 단순 렌더러, 둘째는 보이는 행만 DOM으로 그리는 가상 리스트, 셋째는 Canvas에 직접 글자를 그리는 렌더러다. 각 패널 위에 프레임 시간, DOM 노드 수, 힙 사용량이 실시간으로 표시되고, 줄 수를 1천에서 10만까지 올리면 차이가 벌어지는 것을 본다. 텍스트 선택·검색처럼 기사에서 말한 트레이드오프도 패널별 지원 여부로 표시한다.
    핵심 기술
    직접 구현한 가상 스크롤(고정 행 높이), Canvas 2D fillText 렌더러, requestAnimationFrame 배칭, PerformanceObserver의 long task 측정, performance.memory(크롬).
    완료 기준
    10만 줄에서 가상 리스트와 Canvas 패널은 스크롤 중 프레임 시간이 16ms 근처를 유지하고, 단순 렌더러와의 차이가 표로 남는다. 가상 리스트 패널에서 Ctrl+F가 안 되는 문제를 자체 검색으로 보완한다.
    리스크/전제
    터미널 ANSI 처리까지 재현하지는 않는다. 렌더링 기법 비교가 목적이며 결과 수치는 브라우저마다 다르니 측정 환경을 화면에 적는다.
  2. 2

    SKILL.md를 작성하면 프론트매터 검증과 트리거 설명 미리보기를 해 주는 에이전트 스킬 에디터

    Hermes Agent — 자기 학습형 자율 AI 에이전트

    20/25
    • 마크다운 에디터
    • YAML 파서
    • JSON Schema 검증
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Hermes Agent — 경험으로부터 스킬을 생성·개선하는 자기 학습형 자율 AI 에이전트
    만드는 것
    왼쪽에서 SKILL.md를 쓰면 오른쪽에 프론트매터 필수 필드 검사 결과, 설명 길이 경고, 참조한 파일 경로가 실제로 있는지 여부가 즉시 뜨는 에디터. 폴더째 불러와 스킬 묶음을 목록으로 보고, 완성본을 zip으로 내려받는다.
    핵심 기술
    CodeMirror 6, yaml 파서, JSON Schema 기반 규칙 검사, File System Access API, JSZip.
    완료 기준
    공개 스킬 저장소에서 가져온 스킬 10개를 불러왔을 때 형식 오류가 있는 것만 정확히 걸러지고, 수정 후 내보낸 파일이 원래 도구에서 그대로 로드된다.
    리스크/전제
    agentskills.io 표준의 실제 필드 정의를 먼저 확인해 스키마를 맞춘다. 10주차 AGENTS.md 린터와 비슷한 축이지만 대상 형식과 검사 규칙이 달라 별도로 둔다. 결과물 볼거리가 약해 포트폴리오 점수는 낮게 매겼다.
제외한 항목
중복 처리
Anthropic 수익성(매출원가) 분석을 단위경제 계산기로 만드는 안은 34주차 7번 비용 계산기와 겹친다. Hermes Agent의 세션 간 사용자 메모리는 43주차 9번 메모리 패널 챗봇과 같은 아이디어라 스킬 에디터만 남겼다.
유출 소스 기반
OpenClaude, Boris Cherny 유출 경위 — 유출된 코드를 재료로 쓰는 프로젝트는 라이선스 문제가 있어 후보에서 뺐다.
단순 소식·산업
OpenAI 세컨더리 주식 수요 급감

2026년 13주차 (스캔일: 2026-10-23)

후보 4건

대상: content/2026/week-13.mdx (기사 5건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 기사 수가 적어 후보 4개 모두 상세 항목을 적었다.

  1. 1

    주제를 넣으면 LLM이 문안을 쓰고 1080x1350 카드뉴스 이미지 여러 장으로 렌더링해 내려받게 하는 웹앱

    월 15만원짜리 Claude Code가 바꾼 아이디어-실행 사이클

    22/25
    • LLM API
    • Satori
    • resvg-wasm
    • JSZip
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    월 15만원짜리 Claude Code가 바꾼 아이디어-실행 사이클
    만드는 것
    주제나 기사 링크 본문을 넣으면 LLM이 표지 한 장과 본문 4~6장 분량으로 문안을 나누고, 고른 템플릿(색, 폰트, 레이아웃)에 맞춰 인스타그램 비율 이미지로 렌더링하는 웹앱. 장마다 문안을 직접 고칠 수 있고, 다 되면 PNG 묶음을 zip으로 받는다.
    핵심 기술
    LLM 구조화 출력(장별 제목·본문), JSX를 SVG로 바꾸는 satori, @resvg/resvg-wasm로 PNG 변환(브라우저 또는 Edge 함수), Pretendard 폰트 임베딩, JSZip.
    완료 기준
    주제 하나로 6장짜리 세트가 30초 안에 나오고, 한글 줄바꿈과 글자 넘침 없이 렌더링되며, 문안을 고치면 해당 장만 다시 그려진다.
    리스크/전제
    Satori의 CSS 지원 범위가 제한적이라(flex만) 템플릿을 그 안에서 설계해야 한다. 한글 폰트 파일 크기가 커서 서브셋이 필요하다. 34주차 17번 슬라이드 생성기는 문서를 pptx로 바꾸는 쪽이라 겹치지 않는다.
  2. 2

    글을 붙여넣으면 페르소나 5명이 병렬로 채점하고 평균 8점 미만이면 고쳐 쓰기를 반복하는 글 리뷰 웹앱

    Gemini + Claude 병렬 리뷰 파이프라인으로 블로그 품질 자동 검증하기

    21/25
    • AI SDK 구조화 출력
    • 병렬 스트리밍
    • 점수 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Gemini + Claude 병렬 리뷰 파이프라인으로 블로그 품질 자동 검증하기
    만드는 것
    글을 붙여넣으면 처음 보는 시니어 개발자, 이 기술 써본 사람, 편집자, 따라 해 볼 독자, SEO 담당자 다섯 명의 카드가 동시에 채점을 스트리밍한다. 각 카드는 점수와 고칠 점을 JSON으로 내고, 평균이 8점 미만이면 "반영해 고쳐 쓰기"로 수정본을 만든 뒤 다시 채점해 라운드별 점수 변화를 꺾은선으로 보여 준다.
    핵심 기술
    AI SDK generateObject(점수 스키마), Route Handler에서 병렬 호출, 페르소나 프롬프트 편집, 라운드별 diff, 점수 차트.
    완료 기준
    초안 하나가 3라운드 안에 평균 8점을 넘거나 넘지 못한 이유가 남고, 같은 글을 두 번 돌렸을 때 점수 편차가 화면에 표시된다.
    리스크/전제
    LLM 심판 점수는 흔들린다. 34주차 10번 평가 플레이그라운드가 사람 라벨과 심판 일치율을 재는 도구라면, 이쪽은 글을 고쳐 나가는 작성 도구라 별도로 둔다. 다섯 명 × 여러 라운드라 호출 수가 많으니 저가 모델로 시작한다.
  3. 3

    디자인 시스템·레퍼런스·내러티브를 폼으로 받아 프롬프트를 조립하고 생성된 랜딩 페이지를 대충 쓴 프롬프트 결과와 나란히 렌더링하는 비교기

    GPT-5.4로 세련된 프론트엔드 디자인하기

    21/25
    • LLM API
    • sandbox iframe
    • 프롬프트 템플릿
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    GPT-5.4로 세련된 프론트엔드 디자인하기
    만드는 것
    "카페 랜딩 페이지 만들어 줘" 한 줄 프롬프트 결과와, 디자인 시스템(색·타입 스케일), 레퍼런스 이미지, 섹션별 내러티브, 낮은 추론 설정을 폼으로 채워 조립한 프롬프트 결과를 좌우 iframe에 나란히 렌더링하는 도구. 기사의 4가지 팁을 하나씩 켜고 끄며 어떤 팁이 결과를 가장 많이 바꾸는지 비교한다.
    핵심 기술
    프롬프트 템플릿 조립, 비전 입력(레퍼런스 이미지), sandbox 속성 iframe과 srcdoc 렌더링, 결과 스냅샷 저장.
    완료 기준
    같은 주제로 팁 0개, 2개, 4개 적용본을 만들었을 때 결과 차이가 스크린숏 갤러리로 남고, 생성된 HTML이 외부 요청 없이 iframe 안에서 렌더링된다.
    리스크/전제
    12주차 생성형 UI 챗과 둘 다 LLM이 만든 HTML을 iframe에 띄우지만, 이쪽은 프롬프트 구성 요소의 효과를 비교하는 실험이 핵심이다. 기사에서 공개한 frontend-skill 프롬프트의 라이선스를 확인하고 인용 범위를 정한다.
  4. 4

    기사 본문으로 LLM 헤드라인 여러 개를 만들어 원제목과 섞어 두고 방문자가 의미 왜곡을 투표하는 실험 페이지

    Google 검색, AI로 뉴스 헤드라인을 교체하기 시작

    19/25
    • LLM API
    • 투표 저장소
    • 결과 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Google 검색, AI로 뉴스 헤드라인을 교체하기 시작
    만드는 것
    공개 기사 몇 편의 본문 요약을 보여 주고, 원래 제목과 LLM이 만든 제목 3개를 섞어 제시한 뒤 방문자가 "원래 의미와 다르다"고 느끼는 제목에 투표하게 하는 페이지. 투표가 쌓이면 원제목을 맞힌 비율과 AI 제목이 왜곡으로 지목된 비율을 보여 준다.
    핵심 기술
    LLM으로 헤드라인 사전 생성(빌드 시 고정), 투표 저장(Vercel KV 또는 Supabase), 결과 차트.
    완료 기준
    기사 10편 세트가 준비되고, 50표 이상 쌓였을 때 기사별 결과가 집계된다.
    리스크/전제
    언론사 본문을 그대로 싣지 않고 요약과 링크만 쓴다. 투표 참여자가 없으면 결과가 비어 보이므로 지인 테스트를 전제로 한다.
제외한 항목
에이전트 운용 기법
OpenCode(오픈소스 코딩 에이전트) — 개발 도구 자체라 후보로 세우지 않았다.
참고
2번은 34주차 4번 아레나와 같은 병렬 스트리밍 UI를 쓰지만 목적이 페르소나 채점과 반복 수정이라 남겼다.

2026년 12주차 (스캔일: 2026-10-23)

후보 5건

대상: content/2026/week-12.mdx (기사 6건 + YouTube 5건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 이번 일괄 스캔의 앞선 주차(09~11주차)에 이미 나온 아이디어는 제외했다.

  1. 1

    페이지의 콘솔 에러·실패한 네트워크 요청·Web Vitals를 모아 LLM에 붙여넣을 버그 리포트로 묶어 주는 크롬 확장

    Chrome DevTools MCP

    22/25
    • MV3 확장
    • chrome.debugger
    • web-vitals
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Chrome DevTools MCP (기사 원문 링크 없음, 12주차 "Chrome DevTools MCP" 항목)
    만드는 것
    문제가 생긴 페이지에서 확장 버튼을 누르면 그 시점까지의 콘솔 에러와 경고, 실패하거나 느린 네트워크 요청, LCP·CLS·INP 값, 페이지 URL과 브라우저 정보를 모아 한 장짜리 리포트를 만든다. "LLM용 복사" 버튼은 토큰을 아끼도록 요약한 마크다운을, "이슈용 복사"는 사람이 읽기 좋은 형식을 클립보드에 넣는다. DevTools MCP가 에이전트에게 주는 정보를 사람이 버튼 하나로 챙기는 도구다.
    핵심 기술
    chrome.debugger로 Runtime·Network 도메인 이벤트 구독(또는 content script에서 console 래핑과 PerformanceObserver), web-vitals 라이브러리, 리포트 템플릿.
    완료 기준
    일부러 에러와 404 요청, 레이아웃 이동을 심은 데모 페이지에서 세 종류가 모두 리포트에 잡히고, 리포트를 LLM에 붙였을 때 원인을 짚는 답이 나온다.
    리스크/전제
    chrome.debugger를 쓰면 상단에 디버깅 배너가 뜨고 권한 경고가 크다. 먼저 content script 방식으로 만들고 부족한 정보만 debugger로 보강한다. 요청 본문이나 쿠키 같은 민감 정보는 기본으로 지운다.
  2. 2

    내 사진 폴더를 텍스트와 이미지 공통 임베딩으로 색인해 문장으로 사진을 찾는 브라우저 앨범 검색 앱

    AI뉴스 - Gemini Embedding 2 외

    22/25
    • transformers.js CLIP
    • WebGPU
    • IndexedDB
    • File System Access API
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI뉴스 - 딸깍 암 치료 성공, 클로드 2배 이벤트, Gemini Embedding 2 외
    만드는 것
    사진 폴더를 고르면 탭 안에서 사진마다 임베딩을 계산해 저장하고, "눈 오는 날 강아지", "바닷가 노을" 같은 문장을 치면 비슷한 사진이 썸네일 격자로 올라오는 앱. 사진 한 장을 눌러 "이것과 비슷한 사진"도 찾는다. 사진은 기기 밖으로 나가지 않는다.
    핵심 기술
    @huggingface/transformers의 CLIP 계열 모델(텍스트·이미지 공통 공간), WebGPU 백엔드, File System Access API, IndexedDB 벡터 저장, createImageBitmap 썸네일 생성.
    완료 기준
    사진 500장 색인이 일반 노트북에서 10분 안에 끝나고, 질의 10개 중 8개에서 상위 5장 안에 맞는 사진이 있다. 새로고침 후 재색인 없이 검색된다.
    리스크/전제
    Gemini Embedding 2를 쓰면 정확도는 오르지만 사진을 서버로 보내야 해 개인정보 이점이 사라진다. 로컬 CLIP을 기본으로, API는 비교 옵션으로 둔다. CLIP은 한국어 질의가 약하므로 다국어 CLIP 모델 지원 여부를 확인한다. 43주차 2번은 텍스트 문서 임베딩이라 이미지 검색인 이쪽과 겹치지 않는다.
  3. 3

    질문하면 텍스트 대신 차트·알고리듬 시각화 같은 인터랙티브 위젯을 샌드박스 iframe에 그려 답하는 생성형 UI 챗

    OpenGenerativeUI / 클로드 SHOW ME 업데이트

    21/25
    • LLM API
    • sandbox iframe
    • postMessage
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    OpenGenerativeUI - AI기반 생성형 UI 프레임워크 오픈소스 (기사 원문 링크 없음) / 클로드 무적 필살기 SHOW ME 업데이트
    만드는 것
    "이진 탐색이 어떻게 동작해?"라고 물으면 글 대신 배열 칸이 움직이며 범위가 좁혀지는 위젯이 대화창 안에 뜨는 챗봇. 차트, 수학 그래프, 정렬 애니메이션 같은 위젯을 LLM이 HTML/JS로 생성하고, 각 위젯은 샌드박스 iframe 안에서만 돈다. 라이트/다크 테마와 크기 조정은 부모 페이지가 postMessage로 넘긴다.
    핵심 기술
    LLM 스트리밍(코드 블록만 추출), iframe sandbox="allow-scripts"와 srcdoc, CSP 메타 태그, postMessage로 테마·높이 동기화, ResizeObserver.
    완료 기준
    서로 다른 질문 10개 중 8개 이상에서 위젯이 오류 없이 동작하고, 위젯이 부모 페이지의 쿠키나 DOM에 접근하지 못하는 것을 확인한다.
    리스크/전제
    LLM이 만든 코드를 실행하는 구조라 샌드박스 설정이 앱의 핵심이다. 외부 스크립트 로드를 막을지 CDN 몇 개만 허용할지 먼저 정한다. OpenGenerativeUI 저장소를 참고하되 직접 최소 구현으로 시작한다.
  4. 4

    Claude Code 세션 기록 JSONL을 드롭하면 프롬프트·도구 호출·토큰 사용을 타임라인으로 펼쳐 주는 세션 뷰어

    Show GN: Claude Code 세션 컨텍스트 플러그인

    21/25
    • JSONL 스트림 파싱
    • 가상 리스트
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Show GN: Claude Code 세션의 컨텍스트를 쉽게 파악 가능한 플러그인 (기사 원문 링크 없음)
    만드는 것
    로컬의 Claude Code 세션 기록 파일(JSONL)을 드롭하면 사용자 프롬프트, 모델 응답, 도구 호출과 결과를 세로 타임라인으로 펼치고, 상단에 세션 목적 요약, 도구별 호출 횟수, 누적 토큰 그래프를 띄우는 뷰어. 긴 도구 결과는 접어 두고, 특정 파일을 건드린 지점만 필터로 모아 본다.
    핵심 기술
    대용량 JSONL 스트림 파싱(ReadableStream과 줄 단위 분할), 가상 리스트, 차트, 전량 클라이언트 처리.
    완료 기준
    50MB 세션 파일이 5초 안에 열리고, 도구 호출 수와 토큰 합계가 원본 기록과 일치하며, 파일 경로 필터가 동작한다.
    리스크/전제
    세션 기록 형식은 공식 문서화된 스키마가 아니라 버전마다 바뀔 수 있다. 모르는 필드는 원문 JSON으로 보여 주도록 방어적으로 파싱한다. 기록에 비밀값이 섞일 수 있어 업로드 없는 클라이언트 처리임을 첫 화면에 밝힌다.
  5. 5

    대본을 화자별로 나누고 TTS로 합성해 파형 편집기에서 다듬은 뒤 팟캐스트 MP3로 내보내는 웹앱

    AI뉴스 - TADA TTS, Fish Audio S2 외

    19/25
    • TTS API
    • Web Audio API
    • wavesurfer.js
    • lamejs
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI뉴스 - 딸깍 암 치료 성공, 클로드 2배 이벤트, Gemini Embedding 2, 엔비디아 Nemotron 3 Super, TADA TTS, Fish Audio S2 등
    만드는 것
    "A: ... B: ..." 형식 대본을 넣으면 화자마다 목소리를 골라 줄 단위로 합성하고, 파형 타임라인에서 줄 사이 간격과 볼륨을 조절한 뒤 MP3 한 파일로 내보내는 웹앱. 줄 하나만 다시 합성할 수 있다.
    핵심 기술
    TTS API(Fish Audio 등, Route Handler 경유), Web Audio API OfflineAudioContext로 믹싱, wavesurfer.js 파형 UI, lamejs MP3 인코딩.
    완료 기준
    2인 대화 20줄 대본이 3분 안에 합성되고, 간격을 조정해 내보낸 MP3가 끊김 없이 재생된다.
    리스크/전제
    TADA TTS와 Fish Audio S2의 API 제공 형태와 무료 크레딧을 먼저 확인한다. 실존 인물 목소리 복제 기능은 넣지 않는다.
제외한 항목
중복 처리
"클로드 코드로 PPT 만들기" 영상은 34주차 17번 슬라이드 생성기와, cmux 터미널 영상의 다중 에이전트 분할 화면은 43주차 10번 병렬 에이전트 대시보드와 겹쳐 제외했다.
단순 소식·산업
Claude 3월 사용량 2배 프로모션(비혼잡 시간대 시계는 볼거리가 약해 뺐다), Nemotron 3 Super(대형 모델 자체 호스팅)
정책·논평
AI 보조 코딩 경험 공유 스레드, AI 시대에도 프로그래밍을 배워야 하는가
에이전트 운용 기법
쏟아지는 클로드코드 업데이트(Ralph Loop, Remote Control, Auto-memory) 영상 — 개발 워크플로 소개라 후보로 세우지 않았다.

2026년 11주차 (스캔일: 2026-10-23)

후보 6건

대상: content/2026/week-11.mdx (기사 10건 + YouTube 1건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 이번 일괄 스캔의 앞선 주차(09~10주차)에 이미 나온 아이디어는 제외했다.

  1. 1

    붙여넣은 글에서 delve·It's not X it's Y 같은 AI 상투 패턴을 카테고리별로 하이라이트하고 밀도 점수를 매기는 웹앱

    AI 글쓰기에서 피해야 할 상투적 패턴 모음

    21/25
    • 정규식 규칙 엔진
    • Range 하이라이트
    • 마크다운 규칙 파일
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI 글쓰기에서 피해야 할 상투적 패턴 모음 (기사 원문 링크 없음, 11주차 항목)
    만드는 것
    글을 붙여넣으면 단어 선택, 문장 구조, 문단 구조, 톤, 포맷, 구성의 6개 분류별로 걸린 구간을 색으로 칠하고, 오른쪽에 분류별 개수와 1,000단어당 패턴 밀도를 보여 주는 화면. 원문 기사의 요지처럼 한두 개는 문제없고 여러 패턴이 몰릴 때만 경고가 올라가도록 임계값을 둔다. 규칙은 원본 마크다운 파일을 파싱해 불러오고, 사용자가 한국어 규칙을 추가할 수 있다.
    핵심 기술
    규칙 파일 파서, 정규식과 문장 분리 기반 매칭, contenteditable 또는 오버레이 하이라이트, 규칙 편집기, 로컬 저장.
    완료 기준
    사람이 쓴 글 5편과 LLM이 쓴 글 5편을 넣었을 때 밀도 점수가 대체로 갈리고, 걸린 구간을 클릭하면 해당 패턴 설명과 고쳐 쓴 예시가 나온다.
    리스크/전제
    34주차 6번은 보이지 않는 유니코드 문자를 찾는 도구라 문체 패턴을 보는 이쪽과 다르다. "AI가 썼다" 판정 도구로 오해되지 않도록 점수 이름을 "상투 패턴 밀도"로 두고 판정 문구를 쓰지 않는다. 원본 파일의 라이선스를 확인한다.
  2. 2

    저렴한 소형 모델로 북마크 수백 개를 읽어 자동 태깅하고 폴더 정리안을 제안하는 크롬 확장

    AI뉴스 - Gemini 3.1 Flash-Lite 외

    21/25
    • chrome.bookmarks API
    • Gemini API
    • 배치 처리 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI뉴스 - GPT‑5.4, Gemini 3.1 Flash-Lite, 노트북LM Cinematic Video 외
    만드는 것
    확장을 열면 전체 북마크를 불러와 제목·URL을 묶음으로 저가 모델에 보내 주제 태그를 붙이고, "개발/프론트엔드", "읽을거리/AI" 같은 폴더 구조 제안을 트리 미리보기로 보여 준다. 사용자가 끌어다 고친 뒤 적용을 누르면 실제 북마크가 이동하고, 적용 전 상태로 되돌리기도 된다.
    핵심 기술
    chrome.bookmarks API, 50개 단위 배치 요청과 진행률 표시, Gemini Flash-Lite 구조화 출력, 트리 드래그앤드롭 UI, 실행 취소용 스냅샷.
    완료 기준
    북마크 500개를 5분 안에 분류하고, 제안 구조를 적용한 뒤 되돌리기로 원래 위치가 정확히 복원된다. 전체 호출 비용이 화면에 표시된다.
    리스크/전제
    북마크 URL이 외부 API로 나간다는 점을 첫 실행 때 알리고 동의를 받는다. Flash-Lite 무료 등급의 분당 호출 제한을 확인해 배치 크기를 정한다.
  3. 3

    직업을 검색하면 AI 이론 커버리지와 실제 관측 노출도를 나란히 비교해 보여주는 시각화 사이트

    Anthropic, AI가 노동시장에 미치는 영향 보고서 발표

    20/25
    • Anthropic Economic Index 공개 데이터
    • D3
    • 검색 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Anthropic, AI가 노동시장에 미치는 영향 보고서 발표 (기사 원문 링크 없음, 11주차 항목)
    만드는 것
    직업명을 검색하면 그 직업의 이론상 AI 커버리지와 실제 사용 데이터로 잰 관측 노출도를 막대 두 개로 나란히 보여 주고, 직군 전체를 산점도로 펼쳐 이론과 실제의 격차가 큰 직업을 짚어 주는 사이트. 기사에 나온 컴퓨터·수학 직군 94% 대 33% 사례를 첫 화면 예시로 쓴다.
    핵심 기술
    Anthropic Economic Index 공개 데이터셋(Hugging Face), 빌드 시 데이터 전처리, D3 산점도와 툴팁, 퍼지 검색.
    완료 기준
    보고서에 언급된 수치 3개를 사이트에서 같은 값으로 재현하고, 직업 검색 결과가 0.2초 안에 나온다.
    리스크/전제
    보고서의 "관측 노출도" 산출에 쓴 가중치까지 공개 데이터로 재현되는지 먼저 확인한다. 안 되면 공개된 지표만 쓰고 그 차이를 적는다. 43주차 11번 벤치마크 커버리지 트리맵과 같은 직업 데이터 축이라, 만들 경우 직업 분류 매핑은 공유할 수 있다.
  4. 4

    챗봇 대화 내보내기 파일을 올리면 나에 대한 기억을 항목별로 추려 다른 서비스에 옮길 메모리 텍스트로 만드는 브라우저 도구

    AI뉴스 - Claude Import Memory 기능

    20/25
    • JSON 스트림 파싱
    • LLM API
    • 편집 가능한 체크리스트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI뉴스 - GPT‑5.4 외 (Claude Import Memory 기능)
    만드는 것
    ChatGPT 등에서 받은 대화 내보내기 파일을 올리면 브라우저가 대화를 파싱해 날짜별로 정리하고, LLM이 직업, 선호, 진행 중인 프로젝트 같은 "나에 대한 기억" 후보를 출처 대화 링크와 함께 체크리스트로 뽑는다. 사용자가 고르고 고친 항목만 다른 서비스의 메모리 입력란에 붙여 넣을 텍스트로 만들어 준다.
    핵심 기술
    대용량 JSON 파싱(Web Worker), 대화 트리 평탄화, LLM 요약(사용자가 고른 대화만 전송), 편집 가능한 체크리스트, 클립보드 복사.
    완료 기준
    수백 개 대화가 든 내보내기 파일을 열어 기억 후보 20개 안팎이 나오고, 각 항목에서 근거 대화로 이동할 수 있다.
    리스크/전제
    대화 기록은 매우 민감하다. 파싱은 전부 브라우저에서 하고, LLM에는 사용자가 고른 범위만 보낸다는 흐름을 UI로 강제한다. 43주차 9번 메모리 패널 챗봇은 대화 중 기억을 다루고, 이쪽은 서비스 간 이전이 목적이라 별도로 둔다.
  5. 5

    문서를 넣으면 장면별 대본과 그림을 만들고 브라우저에서 자막 달린 MP4 영상으로 렌더링하는 설명 영상 생성기

    AI뉴스 - NotebookLM 시네마틱 비디오 오버뷰

    20/25
    • LLM API
    • 이미지 생성 API
    • WebCodecs
    • mp4-muxer
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    AI뉴스 - GPT‑5.4, Gemini 3.1 Flash-Lite, 노트북LM Cinematic Video 외
    만드는 것
    문서를 넣으면 LLM이 6~8개 장면의 대본과 장면별 그림 프롬프트를 만들고, 이미지 생성 결과에 켄 번스 효과와 자막을 입혀 브라우저에서 바로 MP4로 렌더링하는 웹앱. 장면 순서를 끌어 바꾸고 대본을 고치면 그 장면만 다시 그린다.
    핵심 기술
    LLM 구조화 출력, 이미지 생성 API, Canvas로 프레임 합성, WebCodecs VideoEncoder와 mp4-muxer로 인코딩, 선택적으로 TTS 내레이션.
    완료 기준
    2,000자 문서로 1분 내외 영상이 만들어지고, 크롬에서 내보낸 MP4가 다른 플레이어에서도 재생된다.
    리스크/전제
    이미지 생성 비용이 장면 수만큼 든다. WebCodecs 지원이 브라우저마다 달라 크롬 기준으로 만든다. 렌더링 파이프라인이 처음이면 일주일 가까이 걸릴 수 있어 소요를 낮게 매겼다.
  6. 6

    아이디어 하나를 가정 도출, 우선순위, 실험 설계 단계 카드로 차례로 밀어 주는 PM 디스커버리 워크시트 웹앱

    PM Skills - AI 에이전트를 PM으로 활용하기

    18/25
    • LLM 구조화 출력
    • 단계형 폼
    • 마크다운 내보내기
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
중복 처리
Superset(에이전트 병렬 실행과 worktree 격리)은 43주차 3번 Git 놀이터와 10번 병렬 에이전트 대시보드에, 코드 리뷰 에세이는 34주차 9번과 43주차 7번에, Qwen 3.5 Small 브라우저 실행은 34주차 12번에, Claude Code Voice mode는 34주차 3번에 겹친다.
FE 사이드 프로젝트로 만들 수 없는 것
Agent Safehouse(macOS 전용 sandbox-exec), LTX-2.3·Helios(영상 생성 모델 로컬 실행), gws(CLI 도구)
에이전트 운용 기법
Claude Code 한국어 플레이북, 에이전트 자율성과 신뢰 연구, 로컬 예약 작업과 Loop 명령어 — 개발 워크플로 영역이라 후보로 세우지 않았다.
정책·논평
전쟁과 AI 기업 윤리 원칙, 60살 개발자의 Claude Code 경험담, 메타 스마트 안경 논란

2026년 10주차 (스캔일: 2026-10-23)

후보 8건

대상: content/2026/week-10.mdx (기사 12건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 34·43주차와 이번 일괄 스캔의 앞선 주차(09주차)에 이미 나온 아이디어는 제외했다.

  1. 1

    브라우저가 WebGPU 어댑터 한도와 기기 메모리를 읽어 이 기기에서 돌릴 수 있는 웹 LLM을 등급별로 추천하는 진단 페이지

    llmfit - 내 하드웨어에 맞는 LLM 모델을 찾는 터미널 도구

    23/25
    • WebGPU adapter limits
    • navigator.deviceMemory
    • 벤치마크 셰이더
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    llmfit - 내 하드웨어에 맞는 LLM 모델을 찾아 자동 최적화하는 터미널 도구
    만드는 것
    페이지를 열면 브라우저가 WebGPU 지원 여부, 어댑터 이름과 maxBufferSize·maxStorageBufferBindingSize 같은 한도, 대략적인 기기 메모리를 읽고, 짧은 행렬 곱 셰이더로 연산 속도를 잰다. 그 결과로 WebLLM·transformers.js에서 쓸 수 있는 모델 목록을 llmfit처럼 Perfect, Good, Marginal, Too Tight 등급으로 나눠 보여 주고, 예상 초당 토큰 수를 붙인다. 결과를 이미지 카드로 공유할 수 있다.
    핵심 기술
    navigator.gpu.requestAdapter()와 adapter.limits, navigator.deviceMemory, WGSL 컴퓨트 셰이더 마이크로벤치마크, 모델별 가중치 크기·양자화 메타데이터 표.
    완료 기준
    내장 그래픽 노트북과 외장 GPU PC 두 대에서 서로 다른 등급표가 나오고, Good 이상으로 나온 모델 하나를 실제로 띄웠을 때 측정 토큰 속도가 예측의 절반에서 두 배 사이에 든다.
    리스크/전제
    브라우저는 개인정보 보호 때문에 메모리와 GPU 정보를 뭉뚱그려 준다(deviceMemory는 최대 8로 잘림). 그래서 추정치라는 점과 근거 값을 화면에 그대로 보여 준다. 34주차 12번 로컬 LLM 채팅 PWA를 만들기 전 단계로 붙여 쓰기 좋다.
  2. 2

    CLAUDE.md나 AGENTS.md를 붙여넣으면 길이·중복·모호한 규칙·충돌하는 지시를 짚어 주는 에이전트 지침 린터

    Claude Code 자동 메모리 기능 & AGENTS.md

    22/25
    • 마크다운 AST
    • 규칙 엔진
    • 선택적 LLM 검사
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude Code 자동 메모리 기능 & AGENTS.md (기사 원문 링크 없음, 10주차 항목)
    만드는 것
    CLAUDE.md나 AGENTS.md를 붙여넣으면 전체 길이와 예상 토큰, 섹션별 분량, 서로 비슷한 규칙(중복), "적절히", "가능하면" 같은 모호한 표현, "항상 X"와 "절대 X 금지"가 부딪히는 문장을 줄 번호와 함께 표시하는 웹 린터. 선택적으로 LLM에게 "이 지침으로 실제로 헷갈릴 만한 지점"을 물어 보조 의견을 붙인다.
    핵심 기술
    remark로 마크다운 AST 파싱, 규칙 기반 검사, 문장 유사도(간단한 n-gram 또는 소형 임베딩), js-tiktoken 토큰 수 계산, 선택적 LLM 호출.
    완료 기준
    공개 저장소의 AGENTS.md 10개를 넣었을 때 각자 3개 이상 의미 있는 지적이 나오고, 이 저장소의 CLAUDE.md와 AGENTS.md 사이 중복이 잡힌다.
    리스크/전제
    좋은 지침의 기준이 정해져 있지 않으므로 지적을 "경고"가 아니라 "검토 제안"으로 표현한다. 반나절이면 규칙 기반 버전이 나오는 빠른 후보다.
  3. 3

    프롬프트로 SVG 아이콘 세트를 생성하고 SVGO로 최적화해 React 컴포넌트로 내보내는 아이콘 공방

    Quiver AI Arrow – SVG 생성 AI 모델

    21/25
    • SVG 생성 API
    • SVGO
    • SVGR
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Quiver AI Arrow – SVG 생성 AI 모델
    만드는 것
    "minimal line icon, 2px stroke" 같은 스타일 프롬프트를 고정해 두고 아이콘 이름 목록(집, 검색, 설정...)을 넣으면 같은 스타일의 SVG 세트를 생성해 격자로 보여 주는 웹앱. 아이콘마다 다시 생성, 선 굵기·색 일괄 변경을 하고, SVGO 최적화 전후 용량을 비교한 뒤 SVG 파일 묶음이나 React 컴포넌트 코드로 내보낸다.
    핵심 기술
    Quiver Arrow API(없으면 LLM에 SVG 코드 직접 생성), DOMPurify로 생성 SVG 정화, svgo 브라우저 빌드, SVGR 변환, JSZip.
    완료 기준
    아이콘 12개 세트가 같은 viewBox와 선 굵기로 통일되어 나오고, 최적화 후 평균 용량이 줄며, 내보낸 React 컴포넌트가 Next.js 프로젝트에서 바로 렌더링된다.
    리스크/전제
    Quiver Arrow의 공개 API 여부와 가격을 먼저 확인한다. 생성 SVG에 스크립트나 외부 참조가 섞일 수 있어 정화 단계가 필수다.
  4. 4

    브라우저 안 WebContainer에서 LLM이 셸 명령만으로 작은 프로젝트를 만들고 테스트하는 에이전트 터미널

    MCP는 죽었다. CLI 만세

    20/25
    • WebContainer API
    • xterm.js
    • LLM 도구 호출
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    MCP는 죽었다. CLI 만세 (기사 원문 링크 없음, 10주차 항목)
    만드는 것
    화면 왼쪽은 xterm.js 터미널, 오른쪽은 파일 트리와 미리보기 iframe. "할 일 목록 앱을 Vite로 만들고 테스트를 통과시켜"라고 지시하면 LLM이 run_shell 도구 하나만으로 npm create, 파일 작성, npm test를 차례로 실행하고, 사람은 같은 터미널에서 그 과정을 지켜보다가 직접 끼어들 수 있다. "사람과 LLM이 같은 CLI를 쓴다"는 기사 주장을 그대로 화면으로 옮긴 데모다.
    핵심 기술
    @webcontainer/api(브라우저 안 Node.js), xterm.js, LLM 도구 호출 루프, COOP/COEP 헤더 설정, 명령 허용 목록.
    완료 기준
    서로 다른 과제 3개에서 에이전트가 사람 개입 없이 테스트 통과까지 가고, 실행한 명령과 결과가 로그로 남으며, 미리보기 iframe에서 결과 앱이 뜬다.
    리스크/전제
    WebContainer는 크로스 오리진 격리 헤더가 필요하고 상업적 사용 시 라이선스 조건이 있으니 개인 데모 범위를 확인한다. 명령 출력이 길면 토큰이 폭주하므로 출력 자르기 규칙을 처음부터 넣는다.
  5. 5

    탭 안 가짜 데스크톱 화면을 LLM이 스크린숏으로 보고 클릭·입력해 과제를 수행하는 컴퓨터 사용 시뮬레이터

    Claude Code Remote Control – AI가 컴퓨터를 직접 조작

    20/25
    • 비전 LLM
    • html-to-image
    • 합성 이벤트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude Code Remote Control
    만드는 것
    페이지 안에 창, 아이콘, 간단한 메모장과 계산기가 있는 가짜 데스크톱을 만들고, "메모장에 오늘 날짜를 적고 저장해" 같은 과제를 주면 LLM이 스크린숏을 보고 좌표 클릭과 키 입력을 지시해 수행하는 시뮬레이터. 매 단계 스크린숏 위에 모델이 누르려는 지점을 빨간 점으로 찍고, 성공·실패와 걸린 단계 수를 기록한다.
    핵심 기술
    비전 지원 LLM, html-to-image로 가짜 데스크톱 캡처, 좌표를 elementFromPoint와 합성 이벤트로 변환, 단계 재생 타임라인.
    완료 기준
    과제 5개 중 3개 이상을 20단계 안에 끝내고, 실패한 실행도 단계별로 다시 돌려 볼 수 있다.
    리스크/전제
    실제 OS를 조작하지 않는 가짜 환경이라 안전하지만, 스크린숏을 매 단계 보내 비용이 빨리 쌓인다. 해상도를 낮추고 단계 상한을 둔다.
  6. 6

    상품 사진 한 장으로 배경·조명·스타일을 바꾼 마케팅 시안을 격자로 생성하는 목업 생성기

    NanoBanana2 – 새로운 AI 모델 업데이트

    20/25
    • Gemini 이미지 API
    • 프롬프트 프리셋
    • 격자 비교 UI
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  7. 7

    저장소의 git notes에 붙은 AI 세션 요약을 커밋 목록 옆에 펼쳐 보는 웹 뷰어

    AI가 코드를 작성한다면 세션도 커밋의 일부가 되어야 할까?

    20/25
    • isomorphic-git
    • GitHub Git Data API
    • 마크다운 렌더링
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
  8. 8

    공개 App Store 차트 피드를 매일 모아 AI 앱 순위 변동을 선 그래프로 보여주는 트래커

    Claude, 미국 App Store 무료 앱 1위 등극

    20/25
    • Apple RSS 차트 피드
    • Vercel Cron
    • 정적 JSON
    • 차트
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
제외한 항목
중복 처리
Perplexity Computer(목표 분해와 모델별 배정)는 43주차 10번 병렬 에이전트 대시보드와, 주니어 개발자의 얕은 역량 글을 "AI에게 코드 설명 질문받기" 앱으로 만드는 안은 34주차 14번 구술 방어 연습과 겹친다.
접근 제한
다이소 MCP — 재고 조회가 비공식 경로에 기대고 있어 지도 웹앱으로 공개하기에는 약관 위험이 크다.
정책·논평
AI가 코딩을 쉽게 만들었지만 엔지니어링은 더 어려워졌다
확인이 필요한 전제
7번은 GitHub 웹 화면이 git notes를 보여 주지 않아 Git Data API로 refs/notes/commits를 읽어야 한다. 브라우저에서 isomorphic-git으로 클론하려면 CORS 프록시가 필요하다. 8번은 Apple 차트 피드가 순위 스냅샷만 주므로 매일 수집해 쌓는 크론이 있어야 추이가 생긴다.

2026년 9주차 (스캔일: 2026-10-23)

후보 1건

대상: content/2026/week-09.mdx (기사 2건)

관점: Front End Developer가 기사 속 기술을 재료로 만드는 독립 웹사이트·웹앱·브라우저 확장·PWA

평가 전제: 일반 Windows PC(고사양 GPU 없음), Vercel 무료 배포, API 키는 개인 부담. 기사 2건 중 1건이 정책 소식이라 후보는 1개다.

  1. 1

    화면을 녹화하면서 클릭 위치를 기록해 클릭 지점으로 자동 줌하는 제품 데모 영상을 브라우저에서 만들어 주는 웹앱

    Claude Code 해커톤 수상자가 만든 데모영상 제작 도구 - Recorded

    23/25
    • getDisplayMedia
    • MediaRecorder
    • Canvas
    • WebCodecs
    • 비용
    • 환경
    • 소요
    • 포트폴리오
    • 학습
    상세 보기
    출처
    Claude Code 해커톤 수상자가 만든 데모영상 제작 도구 - Recorded
    만드는 것
    데모할 웹앱을 녹화하면 클릭이 일어난 시점과 좌표를 함께 기록하고, 편집 화면에서 클릭마다 해당 지점으로 부드럽게 확대했다가 빠지는 줌 구간을 자동으로 깔아 주는 녹화기. 타임라인에서 줌 구간을 끌어 길이를 바꾸거나 지우고, 배경 그라데이션과 둥근 모서리 프레임을 입혀 MP4나 WebM으로 내보낸다.
    핵심 기술
    getDisplayMedia(탭 캡처)와 MediaRecorder, 클릭 좌표 수집(같은 탭 녹화 시 이벤트 리스너, 다른 탭은 MV3 확장 content script), Canvas 프레임 합성과 이징 함수, WebCodecs VideoEncoder + mp4-muxer 내보내기.
    완료 기준
    1분짜리 데모를 녹화하면 클릭 수만큼 줌 구간이 자동 생성되고, 내보낸 MP4가 원본 해상도로 끊김 없이 재생되며, 서버 업로드 없이 전 과정이 끝난다.
    리스크/전제
    브라우저 밖 데스크톱 앱의 클릭은 웹에서 잡을 수 없어 대상은 브라우저 탭으로 한정한다. 캡처 영상 좌표와 페이지 좌표가 devicePixelRatio·스크롤 때문에 어긋날 수 있어 보정이 필요하다. Recorded 자체의 기능 범위는 원 사이트를 확인하고 따라 하기보다 자동 줌 하나에 집중한다.
제외한 항목
정책·논평
OpenAI, 미 국방부와 체결한 협약 — 계약 조건과 레드라인 소식이라 만들 거리가 없다.