AI 튜토리얼

Answer me with HTML로 AI 답변을 읽기 쉬운 페이지로 변환하기

Answer me with HTML이 간결한 AI 작성 Markdown을 구조화되고 시각적인 페이지로 변환하는 방법을 알아보세요. 이 튜토리얼에서는 설치, 일상적인 프롬프트, 직접 CLI 렌더링, 테마, 컴포넌트, 글쓰기 검사, 설정 및 선택적 상시 실행 모드를 다룹니다.

2026년 10월 3일약 15분 소요

Answer me with HTML로 AI 답변을 읽기 쉬운 페이지로 변환하기

Answer me with HTML이 하는 일

Answer me with HTML은 복잡한 답변을 읽기 쉬운 독립형 HTML 페이지로 바꾸는 에이전트 스킬입니다. 모델에 모든 HTML 요소, CSS 규칙, SVG 좌표를 작성하도록 요청하는 대신, 이 스킬은 모델이 짧은 Markdown 초안을 작성하도록 합니다. 번들로 제공되는 CLI가 레이아웃, 스타일 지정, 다이어그램 렌더링을 처리합니다.

이러한 작업 분담은 생성되는 출력과 대기 시간을 줄여 줍니다. 프로젝트 벤치마크에서 이 스킬은 6,873개가 아닌 중앙값 923개의 출력 토큰을 사용했으며, 답변을 46초가 아닌 13초 만에 완료했습니다. 추가 에이전트 호출에서 대화 컨텍스트를 다시 읽기 때문에 측정된 비용은 거의 동일하게 유지되었습니다.

이 도구는 아키텍처 설명, 여러 단계로 이루어진 프로세스, 비교, 타임라인, 모듈 트리, 주석이 포함된 글 검토 등 구조가 있으면 유용한 정보에 적합합니다. 간단한 질문에는 여전히 간단한 텍스트 답변을 제공할 수 있으며, 페이지를 명시적으로 요청하지 않는 한 에이전트가 페이지 생성 여부를 결정합니다.

주요 기능

간결한 모델 출력: 모델은 반복적인 HTML, CSS, SVG를 수백 줄씩 작성하는 대신 콘텐츠를 작성합니다.
코드 기반 레이아웃: CLI가 패널 배치와 다이어그램 좌표를 계산하여 잘리는 레이블과 일정하지 않은 간격을 줄입니다.
유용한 검증: 초안에 오류가 있으면 CLI가 해당 줄, 컴포넌트, 올바른 예시를 알려 주어 에이전트가 수정할 수 있습니다.
시각적 컴포넌트: 초안에 순서도, 시퀀스 다이어그램, 트리, 타임라인, 경계, 주석, 키-값 블록, 콜아웃, 비교 테이블을 포함할 수 있습니다.
두 가지 테마: 엔지니어링 스타일의 blueprint 테마 또는 카드 기반의 shadcn 테마를 선택할 수 있습니다. 두 테마 모두 라이트 모드와 다크 모드를 지원합니다.
이식 가능한 출력: 각 결과물은 CDN 링크나 웹 폰트가 없는 하나의 HTML 파일이므로 오프라인에서 열고 쉽게 공유할 수 있습니다.
소스 포함: 모든 페이지에는 생성에 사용된 Markdown이 보존됩니다. 페이지의 소스 복사 컨트롤을 사용하면 해당 초안을 가져올 수 있습니다.
글쓰기 검사: 영어와 중국어 초안에서 긴 문장, 장황한 표현, 수동태 및 관련 문체 문제를 검사합니다.

요구 사항 및 설치

Node.js 20 이상이 필요합니다. CLI와 런타임 종속성이 스킬에 포함되어 있으므로 일반적인 스킬 설치에는 별도의 npm install이 필요하지 않습니다.

옵션 1: 에이전트가 설치하도록 하기

권장 방법은 코딩 에이전트에 설치 요청을 전달하는 것입니다. 설치 프로그램은 Claude Code, Codex, Cursor, OpenCode 및 기타 여러 에이전트를 지원합니다.

npx -y skills add QingYunA/answer-me-with-html -g -y를 실행하여 Answer me with HTML 스킬을 설치하세요. -a에 -a claude-code와 같이 적절한 에이전트 이름을 전달하세요. 그런 다음 해당 스킬의 SKILL.md를 읽고 TCP 3방향 핸드셰이크를 설명하는 페이지를 만드세요.

옵션 2: 대화형 설치 프로그램 사용

다음 명령을 실행하고 스킬을 설치할 에이전트를 선택하세요.

npx skills add QingYunA/answer-me-with-html

이 명령은 70개 이상의 에이전트를 지원하는 vercel-labs/skills 설치 프로그램을 사용합니다.

옵션 3: Claude Code 플러그인 설치

Claude Code 안에서 마켓플레이스를 추가하고 플러그인을 설치하세요.

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

옵션 4: 수동 설치

저장소를 복제한 다음 스킬 디렉터리를 에이전트의 스킬 폴더에 복사하세요. Claude Code의 경우 다음을 사용합니다.

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

문서에 안내된 다른 위치로는 Codex의 ~/.codex/skills/, Cursor의 ~/.cursor/skills/, OpenCode의 ~/.config/opencode/skill/이 있습니다. 설치 후 추가 설정은 필요하지 않습니다.

첫 페이지 생성하기

충분히 구체적인 질문을 하세요. TCP 3방향 핸드셰이크를 설명해 줘, 이 저장소의 모듈이 어떻게 연결되는지 정리해 줘, 우리 캐시에는 Redis와 Memcached 중 무엇이 좋을까?와 같은 질문을 시도해 보세요.
에이전트가 표현 방식을 선택하도록 하세요. 에이전트가 짧은 Markdown 초안을 작성하고 번들 CLI에 전달합니다.
결과를 여세요. 기본적으로 생성된 페이지가 브라우저에서 열립니다.
저장된 파일을 찾으세요. 생성된 페이지는 ~/.answer-me-with-html/pages/ 아래에 저장됩니다.
페이지 컨트롤을 사용하세요. 오른쪽 상단의 컨트롤로 테마 또는 색상 모드를 전환하고 소스 Markdown을 복사할 수 있습니다.

에이전트가 스킬을 자동으로 선택하지 않으면 HTML로 설명해 줘와 같은 직접 지시를 추가하세요.

도구가 컴포넌트를 선택하는 방식

에이전트는 정보의 형태에 맞는 적절한 컴포넌트를 선택합니다:

flow는 아키텍처, 호출 체인, 의사 결정 및 그룹화된 시스템을 나타냅니다.
sequence는 여러 참여자 사이에서 시간에 따라 교환되는 메시지를 보여 줍니다.
tree는 폴더, 모듈 및 분류 체계를 표시합니다.
timeline은 기록, 릴리스 또는 단계를 구성합니다.
limits는 값을 해당 한계와 비교합니다.
annot는 문장에 단어 수준의 메모를 추가합니다.
kv는 메타데이터 또는 제목 블록 정보를 표시합니다.
callout은 결론, 경고 또는 팁을 강조합니다.
Markdown 표는 비교를 지원하며, ok, no 또는 warn이 포함된 셀은 시각적 상태 표시로 변환됩니다.

직접 초안 작성 및 렌더링

에이전트 없이도 번들 CLI를 사용할 수 있습니다. 초안은 선택적 프런트 matter로 시작하며, 각 두 번째 수준 제목을 패널로 사용합니다. 다음 예제는 TCP 핸드셰이크를 위한 sequence 및 flow 다이어그램을 만듭니다.

---
title: TCP three-way handshake
theme: blueprint
---
## A Three-way handshake {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C State changes {span=2}
```flow LR
(CLOSED) -> LISTEN: passive open
LISTEN -> SYN_RCVD: get SYN / send SYN+ACK
SYN_RCVD -> *ESTABLISHED: get ACK
```

패널 제목 안에서 span=2는 패널을 두 열 너비로 만들고, rows=2는 두 행 높이로 만들며, bare는 제목 표시줄을 제거합니다. meta="small text"를 사용해 메타데이터를 추가할 수도 있습니다.

명령줄에서 렌더링

CLI 파일은 설치된 skill 내부의 scripts/am.mjs입니다. 저장소 체크아웃에서 해당 경로를 정의하고 원하는 명령을 실행합니다.

AM=skills/answer-me-with-html/scripts/am.mjs

node $AM render examples/tcp.en.md
node $AM render notes.md -o out.html --no-open
node $AM render notes.md --theme shadcn
node $AM lint notes.md
node $AM list
node $AM config

첫 번째 명령은 초안을 렌더링하고 엽니다. 두 번째 명령은 출력 파일 이름을 지정하고 브라우저 열기를 억제합니다. 세 번째 명령은 한 번의 실행에 사용할 테마를 재정의합니다. 나머지 명령은 작성 검사를 실행하고, 구성 요소를 나열하며, 설정을 표시합니다.

에이전트는 일반적으로 표준 입력을 통해 초안을 전달합니다. 다음과 같이 직접 전달할 수도 있습니다.

node $AM render - <<'AM_EOF'
## A One panel
```flow
A -> B: hello
```
AM_EOF

am help <component>를 사용하면 특정 구성 요소의 전체 구문을 확인할 수 있습니다. 기본 디렉터리가 아닌 다른 위치에 생성된 페이지를 저장하려면 AM_HOME 환경 변수를 설정합니다.

테마, 브라우저 동작 및 작성 검사 구성

설정은 명령으로 관리되므로 구성 파일을 직접 편집할 필요가 없습니다. 값은 ~/.answer-me-with-html/config.json에 저장됩니다.

Claude Code 플러그인을 설치한 경우 대화형 구성 명령을 열거나 설정을 직접 변경합니다.

/answer-me-with-html:config
/answer-me-with-html:config open off

다른 에이전트를 사용하는 경우 /answer-me-with-html config open off를 사용하거나 브라우저 열기를 중지하도록 요청합니다. 터미널에서는 다음을 사용합니다.

am config
am config set open off
am config reset

open의 기본값은 on이며 새 페이지를 브라우저에서 열지 여부를 제어합니다.
always의 기본값은 on이지만, 선택적 always-on 통합이 설치된 경우에만 적용됩니다.
theme의 기본값은 blueprint이며 shadcn도 사용할 수 있습니다.
mode에는 auto, light 또는 dark를 사용할 수 있습니다.
style에는 off, 80 또는 strict를 사용할 수 있습니다. 기본 80 모드는 렌더링을 차단하지 않고 경고합니다.

초안에 선언된 테마는 구성된 기본값보다 우선합니다. --open 및 --no-open 플래그는 한 번의 렌더링에 한해 브라우저 동작을 재정의합니다.

고급 팁

Always-On 모드 활성화

일반적으로 에이전트는 답변에 페이지가 도움이 될 때만 페이지를 만듭니다. Always-on 모드는 답변에 결론, 요약, 계획, 비교, 검토 또는 설명이 포함될 때마다 작은 페이지를 추가합니다. 일반 페이지는 두 개에서 네 개의 패널을 사용하며 브라우저를 열지 않고 렌더링됩니다. 일상적인 대화와 결론이 없는 답변은 변경되지 않습니다.

Claude Code에서는 다음 추가 플러그인을 설치합니다.

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

제거하지 않고 일시 중지하려면 다음을 실행합니다.

/answer-me-with-html:config always off

다른 에이전트는 AGENTS.md와 같은 전역 규칙 파일에 문서화된 always-on 규칙을 적용할 수 있습니다. 이 규칙은 에이전트가 결론을 위해 작은 페이지를 만들고 --no-open으로 렌더링하도록 지시해야 하며, 일상적인 대화, 순수 명령 출력 및 일반 텍스트 요청은 건너뛰어야 합니다.

엄격한 작성 검증 사용

작성 검사는 ASD-STE100에서 조정한 기계 검사 가능한 개념을 기반으로 합니다. 짧은 문장, 일반적인 단어, 직접적인 명령 및 일관된 용어를 선호합니다. 영어 단계는 20단어 미만, 설명은 25단어 미만이어야 하며, 문단은 최대 6문장으로 제한됩니다. 중국어 검사는 이에 대응하는 글자 수 제한을 사용하고, 일부 반복적이거나 모호한 표현을 표시합니다.

다음 명령으로 전역 차단 검증을 활성화합니다.

/answer-me-with-html:config style strict

초안에서 style:도 지정하여 해당 페이지의 유효성 검사를 제어할 수 있습니다.

적절한 템플릿 선택

기본 sheet 템플릿은 정보를 패널 그리드로 배치합니다. 목차가 있는 단일 열 페이지에는 doc을 사용하세요. 시트의 경우 cols 프런트 매터 필드가 열 개수를 제어합니다.

페이지별 프레젠테이션 재정의

특정 페이지에 다른 설정이 필요한 경우 초안의 프런트 매터에 프레젠테이션 옵션을 입력하세요.

---
template: sheet
theme: shadcn
title: 캐시 비교
subtitle: Redis와 Memcached
cols: 3
source: 내부 아키텍처 검토
---

추가 프런트 매터 필드는 페이지 제목 아래에 표시됩니다. 기본 제공 컴포넌트가 적합하지 않은 경우 초안 형식에서 원시 HTML 또는 SVG 블록도 지원하지만, 기본 제공 컴포넌트를 사용하면 자동 레이아웃의 이점을 얻을 수 있습니다.

프로젝트를 로컬에서 개발

저장소의 소스와 테스트를 사용하므로 기여자는 일반적인 의존성 설치를 수행해야 합니다.

git clone https://github.com/QingYunA/answer-me-with-html.git
cd answer-me-with-html
npm install
npm test
npm run build

src/ 아래의 파일을 변경한 후 npm run build를 실행하여 번들로 제공되는 skills/answer-me-with-html/scripts/am.mjs를 다시 빌드하세요. 런타임 의존성은 Markdown 파싱을 위한 marked와 흐름 차트 레이아웃을 위한 Dagre이며, 둘 다 CLI에 번들로 포함됩니다.

결론

Answer me with HTML은 콘텐츠 생성과 페이지 구성을 분리합니다. 에이전트는 간결한 Markdown 초안을 작성하고, CLI는 레이아웃, 다이어그램, 테마, 유효성 검사 및 오프라인에서 사용할 수 있는 휴대용 HTML 파일을 제공합니다. 먼저 스킬을 설치하고 시각적 설명을 요청하세요. 그런 다음 직접 CLI 렌더링, 페이지별 테마, 엄격한 작성 검사 또는 선택적 상시 활성화 모드로 워크플로를 개선할 수 있습니다.