질문에 한 장짜리 HTML 페이지로 답하는 플러그인, answer-me-with-html

QingYunA/answer-me-with-html

모델은 Markdown 초안만 쓰고, 스킬에 든 CLI가 흐름도·차트·ER 다이어그램·수식·단어 주석·선택지를 그려 한 장짜리 HTML 페이지로 만듭니다.

설치 방법

시험 삼아 설치해 보니 Claude Code가 npm으로 개발용까지 포함한 의존성 535개 파일을 받았고, 일부는 텐센트 클라우드 npm 미러에서 받았습니다. 12번의 실행은 설치가 아니라 레포를 받아 --plugin-dir로 불러 직접 실행했습니다.

README 방법 · Claude Code 안에서 두 줄을 차례로 입력 (같은 동작의 CLI 명령으로 빈 임시 HOME에서 시험함)

복사/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

2026-10-02에 만들어진 레포로(생성 19일) 누적 스타는 4,225개이고, 최근 7일 새 포크는 63개입니다. GitHub 트렌딩에는 없었고 7일 스타 증가량은 재지 못했습니다. 개념 설명·비교·체크리스트·코드 설명·수식·결정·타임라인·CSV 정리·ER 설계·문장 첨삭처럼 서로 다른 질문 12가지(한국어 10번·영어 2번)로 실행하자 12번 모두 한 장짜리 HTML 페이지가 나왔고, 질문마다 흐름도·차트·수식·코드 인용 같은 구성 요소가 다르게 쓰였습니다. 결정 질문(run07)은 시험자가 페이지에서 선택지를 고르고 Reply를 누르자 에이전트에게 붙여 넣을 답장 글이 만들어졌고(붙여 넣어 이어 가는 것은 해 보지 못했습니다), 문장 첨삭(run12)은 고칠 단어마다 밑줄과 고친 말이 달렸습니다. 실행 하나에 43.9~101.5초, 0.27~0.51달러가 들었습니다(12번 합계 4.58달러). 아쉬운 점은 한국어 페이지에도 도구 모음·버튼 글자가 영어라는 것이고, 기본 설정이 페이지를 만들 때마다 브라우저를 열고 하루 한 번 새 버전을 확인한다는 것도 알아 두세요(끄는 법은 아래 '써 보니').

필요 조건

• Claude Code(시험: 2.1.304, 모델 claude-opus-5-5)
• Node.js 20 이상(README, package.json engines; 시험: v22.23.3). 스킬의 CLI(am.mjs)는 의존성 설치 없이 node로 실행되는 한 파일
• 결과 페이지를 볼 브라우저(시험: Chrome 155 헤드리스). 페이지는 바깥 글꼴·스크립트를 부르지 않는다

README 공식 설치는 Claude Code 안에서 /plugin 명령 두 줄이다(README에는 에이전트에게 INSTALL.md를 따르게 하는 문장, 터미널의 npx skills add QingYunA/answer-me-with-html, DeepSeek Harness용 dsh 명령, 폴더 수동 복사 방법도 있지만 이번에는 해 보지 못했다). 이번 시험은 설치하지 않고 --plugin-dir로 불러 직접 실행했다. 기본 설정은 페이지를 만들 때마다 브라우저를 열고(open on) 하루 한 번 GitHub에서 새 버전을 확인한다(끄기: am config set open off · am config set update_check false 또는 AM_NO_UPDATE_CHECK). 페이지는 ~/.answer-me-with-html/pages/에 쌓인다(am clean으로 정리). 플러그인으로 설치하면 Claude Code가 플러그인 폴더에서 npm ci --ignore-scripts를 돌려 개발용 의존성까지 535개 파일(16.9MB)을 받았다(빈 임시 HOME에서 확인). 내려받은 npm 꾸러미 8개 중 2개(temml·yaml)는 레포 lockfile이 가리키는 mirrors.cloud.tencent.com(텐센트 클라우드 npm 미러)에서, 6개는 registry.npmjs.org에서 받았고, 내용은 lockfile의 sha512로 검사하며 설치 스크립트는 돌지 않는다. 스킬이 쓰는 번들 CLI는 이 node_modules를 쓰지 않는다(12번의 실행은 node_modules 없이 돌았다).

복사# $T = 시험용 작업 폴더(전체 경로는 생략)
git clone --depth 1 https://github.com/QingYunA/answer-me-with-html $T/src  (커밋 fa42f5c, 2026-10-22 16:23:26 +0800, 플러그인 0.5.7)
claude --plugin-dir $T/src plugin details answer-me-with-html (빈 임시 HOME) → Skills (3) answer-me-with-html, clean, config · Agents 0 · Hooks 0 · MCP servers 0 · LSP servers 0. claude plugin validate(marketplace.json·plugin.json) → 통과
README 공식 설치를 같은 동작의 CLI 명령으로 빈 임시 HOME에서 시험(OFF=/tmp/gitstar-sandbox/QingYunA__answer-me-with-html/official, Claude Code 2.1.304, 자격 증명·GITHUB_TOKEN 없음, 시간 제한 300초): cd $OFF/proj && env -i PATH=/usr/local/bin:/usr/bin:/bin HOME=$OFF/home TMPDIR=$OFF/tmp LANG=C.UTF-8 TERM=dumb DISABLE_AUTOUPDATER=1 DISABLE_TELEMETRY=1 CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1 GIT_TERMINAL_PROMPT=0 timeout 300 claude plugin marketplace add QingYunA/answer-me-with-html  → 종료 코드 0, 약 3초, '✔ Successfully added marketplace: answer-me-with-html (declared in user settings)'(HTTPS로 레포 클론, 파일 336개)
같은 환경에서 timeout 300 claude plugin install answer-me-with-html@answer-me-with-html  → 종료 코드 0, 약 15초, '✔ Successfully installed plugin: answer-me-with-html@answer-me-with-html (scope: user)'. 설치 위치 $OFF/home/.claude/plugins/cache/answer-me-with-html/answer-me-with-html/0.5.7/(gitCommitSha fa42f5c…, 시험한 커밋과 같음). 설치 파일 871개(잠금 표시 .in_use·*.lock 제외) = 레포 파일 336개(클론 $T/src와 diff -rq 차이 없음: 시험에서 --plugin-dir로 불러온 폴더와 같다, am.mjs sha256 e45f307e… 같음) + Claude Code가 설치 중에 돌린 npm ci --ignore-scripts --workspaces false --no-audit --no-fund의 node_modules 535개(16.9MB, 개발용 esbuild·yaml 포함; temml·yaml 두 tarball은 lockfile의 resolved 주소대로 mirrors.cloud.tencent.com에서, 나머지 6개는 registry.npmjs.org에서). claude plugin list → enabled. 진짜 HOME은 바뀌지 않았다(evidence/official_install/, evidence/real_home_before.txt·real_home_after_official.txt)
실행마다: tools/mk_sandbox.sh $SB  (SB=/tmp/gitstar-sandbox/QingYunA__answer-me-with-html/runNN: 시험자 node 래퍼·Chrome 래퍼·브라우저 열기 심·막이) → inputs/runNN이 있으면 샌드박스 루트에 복사(run05 retry.js, run09 텃밭_수확기록.csv). 플러그인은 복사·설치하지 않음
cd $SB && env -u DISPLAY -u WAYLAND_DISPLAY -u XAUTHORITY -u DBUS_SESSION_BUS_ADDRESS -u CLAUDECODE -u CLAUDE_CODE_* -u ELEVENLABS_API_KEY -u AM_TTS_* -u AM_NO_OPEN AM_HOME=$SB/.answer-me-with-html AM_NO_UPDATE_CHECK=1 PATH=$SB/.bin:$PATH TMPDIR=/tmp/gsac-runNN BROWSER=$SB/.bin/x-www-browser claude -p '/answer-me-with-html:answer-me-with-html <질문> + [시험 진행 메모]' --output-format json --plugin-dir $T/src --permission-mode acceptEdits --allowedTools Read Glob Grep Write Edit 'Bash(node:*)' 'Bash(google-chrome:*)' 'Bash(mkdir:*)' 'Bash(ls:*)' 'Bash(cat:*)' … --disallowedTools AskUserQuestion WebFetch WebSearch Skill Task Agent 'Bash(curl:*)' 'Bash(wget:*)' 'Bash(npm:*)' 'Bash(npx:*)' 'Bash(pip:*)' 'Bash(python3:*)' 'Bash(git:*)' 'Bash(rm:*)' 'Bash(xdg-open:*)' 'Bash(/usr/local/bin/node:*)' … 'Edit(/$T/**)' 'Write(/$T/**)' 'Edit(~/.claude/**)' 'Write(~/.claude/**)' … --strict-mcp-config --no-chrome --max-budget-usd 2  (tools/trial.sh가 run_once.py로 실행, 시간 제한 1200초, 동시 2~3개, 전체 명령은 tools/trial.sh)
시험자 node 래퍼($SB/.bin/node → /usr/local/bin/node v22.23.3): HOME=$SB/.cache/home, AM_HOME=$SB/.answer-me-with-html, AM_NO_UPDATE_CHECK=1, TTS·화면 변수 제거. am.mjs의 render·patch·lint·list·help·config만 통과, serve·video·clean·__update-check·theme add/update/remove·theme list --remote와 다른 스크립트는 거절(12회 동안 거절 0번)

보안 검토: caution — 훅·MCP 서버·에이전트 없음, 자격 증명 접근 없음. 실제로 도는 것은 번들 am.mjs(esbuild 결과, 읽을 수 있음; vm으로 컴파일하는 Temml 문자열은 npm 공식 temml 0.14.0과 같음). 기본 설정이 렌더 뒤 xdg-open으로 브라우저를 열고, 하루 한 번 raw.githubusercontent.com에서 새 버전을 확인하고(끌 수 있음), 페이지를 홈 폴더에 쌓는다. 영상 음성(ElevenLabs, 내레이션 글 전송)·테마 내려받기·LAN/tailnet 공유 서버는 쓸 때만 네트워크를 쓴다. 시험은 데이터 폴더를 샌드박스로(AM_HOME), 새 버전 확인 끔, 브라우저 열기 심, node 래퍼로 격리했다(security_review.md)

써 보니

• 부르는 법: 프롬프트 첫머리에 /answer-me-with-html:answer-me-with-html을 쓰고 질문을 이어 적었습니다(12번 모두 이렇게 불렀습니다). 질문 부분은 슬래시 명령을 포함해 한국어 98~364자(짧은 한 문장부터 안내문을 붙여 넣은 질문까지), 영어 2번은 210자·335자였습니다. 요청에 적은 형태는 그대로 만들어졌습니다: 문서형(run03), 차트(run04), 수식과 Cards 테마(run06), 페이지에서 고르는 선택지(run07), 어두운 모드(run11). 현재 폴더의 파일 이름을 적으면 모델이 읽어서 썼습니다(run05는 retry.js의 1~17행을 그대로 인용, run09는 CSV를 집계). 질문 뒤에는 시험 때마다 같은 무인 실행용 진행 메모(한국어 714자·영어 1,150자: 묻지 말고 끝까지 할 것, 브라우저를 열지 말고 파일로 저장만 할 것, 실존 브랜드 이름을 쓰지 말 것 등)를 붙였고, 질문으로 멈춘 실행은 없었습니다(시험에서는 질문 도구도 막아 두었고, 메모 없이 부르면 되묻는지는 시험하지 않았습니다).
• 역할 분담: 모델이 쓴 것은 Markdown 초안(1,874~4,813자)이고, 레이아웃·테마 색·글꼴·다이어그램 좌표·도구 모음은 CLI가 정합니다. 모델은 구성 요소·형식의 문법을 am help로 확인하기도 했습니다(7번의 실행에서 10번). 초안 문법이 틀리면 CLI가 줄 번호와 올바른 예시를 보여 줘서 모델이 다음 render에서 고쳤습니다(run10은 흐름도 묶음이 없는 노드 이름을 가리킨 오류, run11은 ER 관계의 키 표시 오류). 결과는 HTML 한 파일(135~175KB)이고, 12쪽 모두 바깥 글꼴·스크립트를 부르지 않았습니다(페이지의 CSP가 default-src 'none', 그림·글꼴은 파일 안에 포함). 닫힌 프록시로 찍어 바깥 요청 0번·페이지 오류 0번이었으니 인터넷 없이 열어도 같은 화면이었습니다(시험 환경에서 확인).
• 질문 종류마다 구성이 달랐습니다: 개념 설명(run01·run10)은 흐름도와 표, 비교(run02)는 ✓·!·✗ 배지 표와 막대 차트, 체크리스트(run03)는 왼쪽 차례가 붙은 문서형, 계획표(run04)는 표·차트·흐름도, 코드 설명(run05)은 파일의 1~17행을 그대로 인용, 수식(run06)은 5단계 풀이, 결정(run07)은 선택지 5개, 과정(run08)은 타임라인, CSV(run09)는 선 차트 2개·막대 차트, 데이터 모델(run11)은 ER 다이어그램, 문장 첨삭(run12)은 단어 밑줄 주석입니다. 구성 요소의 종류와 개수까지 보면 12쪽이 모두 달랐습니다(종류만 보면 run01과 run08, run02와 run04가 같습니다).
• 페이지 안의 도구(시험자가 조작해 본 것): run07에서 선택지 하나를 누른 뒤 Reply를 열자 'Decisions' 목록이 든 답장 글이 만들어졌습니다(고른 것은 'suggestion confirmed', 고르지 않은 4개는 'not answered; suggested: …'). 그 글을 복사해 에이전트 대화에 붙여 넣어 이어 가는 것은 해 보지 못했습니다. run12에서는 Remark를 켜고 문장을 누르자 의견 종류 창(suggestion·keep·question·concern, Optional note, Save)이 열렸지만 의견을 저장하지는 않았습니다. A−와 Copy source(페이지를 만든 Markdown 초안 복사)는 누르지 않았습니다. run12의 단어 단위 주석(annot)은 문제 단어에 밑줄을 긋고 아래에 고친 말을 달며, 고친 문장과 고친 안내문 전체가 함께 나왔습니다.
• 테마와 모드: Blueprint 8쪽, Paper(문서형) 3쪽, Cards 1쪽(설정 값 이름은 shadcn)이었고, 도구 모음의 Theme(Blueprint·Cards·Paper)·Mode(Auto·Light·Dark) 목록으로 보는 중에 바꿀 수 있습니다(합성 이미지의 '시험자 조작' 칸은 run02·run05·run06·run08·run11에서 시험자가 바꿔 본 화면입니다). 템플릿은 모델이 골랐고(run05·run12는 요청에 없었는데 문서형으로 만들었습니다), 요청으로 정한 것은 run03의 문서형, run06의 Cards 테마, run11의 어두운 모드뿐입니다.
• 화면 글: 도구 모음(Theme·Mode·A−·A+·Reply·Remark·Copy source), 머리줄('Generated by Answer me with HTML 0.5.7 · 시각 · ★ Star on GitHub'), 차트 아래 'Data', 선택지 표시 'suggested', Reply·Remark 창, 확대 단추 'Expand diagram'은 템플릿이 붙이는 영어입니다. 한국어 라벨 파일이 없어서(라벨이 있는 언어는 중국어 간체·번체, 영어, 일본어, 히브리어) 한국어 페이지도 그렇습니다. 패널 제목과 본문은 모델이 쓴 한국어였습니다. 12쪽 어디에도 중국어(한자)는 없었고, 문서형(paper) 3쪽(run03·run05·run12)은 이 장비에서 한글이 중국어 간체용 세리프 글꼴(Noto Serif CJK SC)로 그려졌지만 글자 모양은 정상이었습니다.
• 휴대폰(390 폭)과 확대 보기: 12쪽 모두 페이지가 가로로 넘치지 않았습니다. 다만 넓은 표·다이어그램이 있는 11쪽은 그 상자 안에서, run12는 긴 단어 주석 줄을 주석 상자 안에서 옆으로 밀어 봐야 하고(12쪽 모두 상자 안 가로 밀기가 있습니다), 도구 모음은 오른쪽 끝(Reply·Remark·Copy source)에 맞춰 열려서 Theme 목록은 왼쪽으로 밀어야 보입니다. 다이어그램 확대 보기에서 휠로 3.3배까지 키우면 글자가 흐려졌습니다(run04·run10, 이 장비의 헤드리스 Chrome).
• 기본 설정: 페이지를 만들 때마다 브라우저를 열고(open on), 하루 한 번 GitHub(raw.githubusercontent.com)에서 새 버전을 확인합니다(README는 사용자 정보를 보내지 않는다고 적습니다). 만든 페이지는 ~/.answer-me-with-html/pages/에 쌓이고 am clean으로 지웁니다. 끄는 법은 am config set open off, am config set update_check false(또는 환경 변수 AM_NO_UPDATE_CHECK)입니다. 시험에서는 데이터 폴더를 임시 폴더로, 새 버전 확인을 끔으로 두고 브라우저 열기는 막아 두었습니다. 모델이 render에는 --no-open을 붙였지만 패널 하나를 고치는 am patch에는 붙이지 않아 브라우저 열기 호출이 4번(run04·run05·run12) 있었고(시험 장치가 기록만 하고 아무것도 열지 않았습니다), 실제로는 고칠 때마다 브라우저 탭이 열릴 수 있습니다.
• 저절로 불릴 수 있습니다: SKILL.md 설명문이 '묻지 않아도 적극적으로(proactively and liberally, without being asked)' 부르라고 적어서, 설치해 두면 설명·비교 질문에 이 스킬이 묻지 않아도 불릴 수 있습니다. 12번 모두 슬래시 명령으로 불렀기 때문에 얼마나 자주 저절로 불리는지는 재지 못했습니다. README는 모든 결론에 페이지를 붙이게 하는 '자동 모드'(~/.claude/CLAUDE.md 같은 규칙 파일에 규칙을 넣는 선택 기능, 기본 꺼짐)를 권하지만 전역 규칙 파일을 고치는 방식이라 시험하지 않았습니다.
• 공식 설치 시험: 12번의 실행과 따로, 빈 임시 HOME(자격 증명 없음)에서 README의 두 명령을 같은 동작의 CLI 명령(claude plugin marketplace add QingYunA/answer-me-with-html, claude plugin install answer-me-with-html@answer-me-with-html)으로 실행해 봤습니다. 둘 다 종료 코드 0이었고(약 3초·약 15초), 설치 파일 871개는 레포 파일 336개(--plugin-dir로 불러 쓴 폴더와 차이 없음)와 node_modules 535개(16.9MB)입니다. node_modules는 설치 중 Claude Code가 npm ci --ignore-scripts로 받은 것이고 개발용 의존성(esbuild·yaml 등)이 들어 있습니다. 진짜 HOME은 바뀌지 않았고, 설치본으로 실제 세션을 돌려 보지는 않았습니다. 플러그인은 스킬 1개(answer-me-with-html)와 명령 2개(clean·config)이고 훅·MCP 서버·에이전트는 없습니다. 설치 뒤 모든 세션에 붙는 비용은 약 326토큰, 스킬을 부를 때는 약 5.3k토큰입니다(claude plugin details 기준 추정치).
• 비용·시간과 권한 검사: 시험은 2026-10-22 18:44~19:30에 claude-opus-5-5, Claude Code 2.1.304로 했고 실행은 2~3개씩 동시에 돌렸습니다. 실행 하나에 43.9~101.5초(모델의 초안 작성과 화면 확인 포함, 평균 72초), 0.27~0.51달러가 들었고 12번 합계 4.58달러이며, 비용 상한(--max-budget-usd 2)에 걸린 실행은 없었습니다. 시험은 답할 사람이 없는 비대화형(claude -p) 실행이라, 스킬이 권하는 heredoc 한 번 render(node am.mjs render - <<'AM_EOF' …)가 12번 중 6번 Claude Code의 셸 안전 검사에 실행 전 막혔습니다(중괄호와 따옴표 5번, 백슬래시 뒤 공백 1번). 막힌 6번 중 5번은 Write로 초안 파일을 만들어 render했고, run11은 heredoc을 다시 보낸 뒤 CLI가 저장한 초안을 고쳐 render했습니다. 그 밖의 도구 오류는 5번(run10 1번, run11 4번)이었습니다. 대화형 세션에서 승인 창이 어떻게 뜨는지는 시험하지 않았습니다. 시험 메모가 헤드리스 Chrome 스크린숏을 허용해서 모델은 12번 모두 1~2번(합계 15번) 찍어 화면을 확인했고, run12에서는 주석 줄이 옆으로 넘치는 것을 보고 긴 문장을 나눠 패널을 고쳤습니다.
• README 주장과 이번 실측: README는 모델이 쓰는 토큰이 직접 HTML을 쓸 때의 약 1/8이고 2.6배 빠르며(프로젝트의 자체 측정, Claude Sonnet 5.5, 주제 3개×3회 중앙값), 초안을 넘기면 약 50ms 뒤에 페이지가 나오지만 총비용은 약 15%만 준다고 적습니다. 이번에는 직접 HTML을 쓰게 하는 비교 시험을 하지 않았습니다. 이번 실측은 위의 시간·비용(실행 43.9~101.5초, 0.27~0.51달러)뿐입니다.
• 가상 입력과 숫자 확인: run05의 retry.js, run09의 CSV(주말농장 수확 기록), run12의 관리사무소 안내문은 시험자가 만든 가상 입력입니다. run01의 7층 예시는 페이지가 '설명용 가상 상황', run02의 전력량은 '예시 계산'이라고 밝힌 값입니다. 시험자가 맞는지 확인한 것은 run03의 날짜 계산(이삿날을 11월 30일로 가정, 14일 뒤 12월 14일), run04 표의 분 계산, run05의 대기 시간(200·400·800ms, 상한 3000ms), run06의 복리·단리 금액, run09의 CSV 합계와 최고 주이고 모두 맞았습니다. 이사 법정 기한, 건강 조언, 김치 pH, 노트북 사양 기준, 냉장고 설명, 데이터 모델 규칙, 국어 첨삭 판단은 검증하지 않았으니 참고용으로만 보세요.
• 시험하지 않은 것: 명령 2개(/answer-me-with-html:clean·config), 설명 영상(am video, 내레이션 글을 외부 음성 API로 보낼 수 있음)·공유 서버(am serve)·테마 내려받기·새 버전 확인(네트워크를 쓸 수 있는 기능), 짧은 질문에서 페이지를 만들지 않고 글로만 답하는 동작, README의 다른 설치 방법, 설치본으로 세션 돌리기, 대화형 세션입니다. Claude Code 이외의 도구도 시험하지 않았습니다. README는 Codex·Cursor 등 다른 에이전트에도 스킬로 설치해 쓸 수 있다고 안내하고(이 경우 슬래시 명령 없이 스킬만 들어간다고 INSTALL.md가 적습니다), 시험은 모두 Claude Code 2.1.304에서 했습니다.
• 라이선스와 출처: 레포는 MIT 라이선스입니다. 이 페이지는 레포를 만든 QingYunA가 아니라 시험자가 직접 돌려 본 기록이고, 결과 캡처 PNG만 싣고 결과 HTML과 스킬 문서는 싣지 않았습니다.

결과물 12개

카드 한 장은 실행 한 번의 대표 화면입니다. 합성 PNG는 시험자가 결과 HTML을 헤드리스 Chrome에서 열어 찍은 캡처(데스크톱 1440 폭 첫 화면, 패널·다이어그램 확대, 휴대폰 390 폭)를 세로 한 장에 줄여 붙인 것이고, 칸 라벨도 시험자가 붙였습니다. '시험자 조작'이라고 적힌 칸(테마·모드 바꾸기, 확대 단추, Reply·Remark 창, 글자 키우기)은 시험자가 조작해 찍은 화면입니다(모델이 만든 화면이 아닙니다). 화면의 도구 모음·머리줄과 'Data'·'suggested' 같은 고정 문구는 템플릿이 붙인 영어이고, 패널 제목과 본문은 모델이 쓴 글입니다(영어로 질문한 run10·run11은 본문도 영어). 머리줄의 시각(2026-10-22 19:07~19:14)은 페이지를 만든 때입니다. '프롬프트 전문 보기'를 누르면 프롬프트가 펼쳐집니다(질문 뒤에 시험 때마다 붙인 공통 진행 메모가 이어집니다). 테두리 카드(run07·09·11·12)는 서로 다른 모양을 보여 주는 대표 결과입니다. run05의 retry.js, run09의 CSV, run12의 안내문은 시험자가 만든 가상 입력입니다. 시험자 녹화 영상은 없습니다.