AI 결과물 형식 고르기
마크다운(Markdown) · JSON · HTML · 인터랙티브 HTML
AI의 결과물은 "읽는 답변"에서 "보고·비교하고·조작하고·판단하는 화면"으로 넓어지고 있습니다. 같은 내용도 어떤 형태로 받느냐에 따라 이해하는 시간과 실행까지 가는 거리가 달라집니다. 이 가이드는 형식 네 가지의 역할, 강의안을 PPT와 HTML로 나누는 기준, 그리고 비용을 재는 기준 두 가지를 정리합니다.
이 결과를 어떤 형태로 받아야 가장 빨리 이해하고 실행할 수 있을까
많이 만드는 것이 아니라 필요한 부분을 알맞은 형태로
※ 바탕 글: 윤성임, 「AI의 출력은 '답변'에서 '보고·비교하고·조작하고·판단하는 인터페이스'로 확장되고 있다」, 소상공인뉴스·파이낸스투데이 2026-08-26. 도구 이름·기능은 2026-09 기준이며 아래 출처 절에 적었습니다.
1. 형식 4종 한눈표 — 내용 · 구조 · 화면 · 조작
| 형식 | 무엇을 담나 | 누가 쓰나 | 잘 맞는 일 | 한계 |
|---|---|---|---|---|
| 마크다운 (Markdown) | 내용 | 사람이 읽고 쓰고 고친다 | 프롬프트, 회의록, 점검표, 매뉴얼, 짧은 보고 | 길어지면 읽히지 않는다. 비교·조작이 안 된다 |
| JSON | 구조 | AI·시스템·API(프로그램끼리 자료를 주고받는 통로)·에이전트가 주고받는다 | 상품 목록, 설정값, 다른 프로그램에 넘길 자료 | 사람이 읽기 어렵다 |
| HTML | 사람이 판단할 화면 | 사람이 한눈에 보고 검토한다 | 비교표, 리포트, 대시보드, 시안 비교 | 만드는 데 토큰(AI가 글자 양을 세는 단위)이 더 든다 |
| 인터랙티브 HTML (Interactive HTML) | 조작할 수 있는 화면 | 사람이 값을 바꿔 보며 판단한다 | 중요도 슬라이더(막대를 끌어 값을 바꾸는 조절 장치), 점수·순위 자동 계산, 선택과 복사 | 모든 것을 이렇게 만들면 과하다 |
마크다운은 내용을 담고, JSON은 구조를 전달하며, HTML은 사람이 판단할 화면을 만든다.
역할이 다르니 우열이 없습니다. 같은 일에서도 단계마다 형식이 바뀝니다. 초안은 마크다운, 시스템 전달은 JSON, 최종 검토는 HTML.
2. HTML이 강한 자리 — 비교 (Compare) · 조정 (Tune) · 판단
비교
- 예
- 상품 6종 비교, 디자인 시안 3개 나란히, 견적 비교표. 표만으로 부족하면 카드형 화면.
조정
- 예
- 가격·중요도 슬라이더, 예산 배분 조정, 점수·순위 자동 계산. 챗봇에 "다시 계산해 줘"를 반복하지 않아도 됩니다.
판단
- 예
- 시장조사 결과 대시보드(한 화면 요약판)에서 최종안 선택 → 선택 결과를 프롬프트나 마크다운으로 복사해 다음 작업에 붙이기.
칼럼의 사례 — 사업 아이디어 6개 비교 화면. 카드형 비교표 → 시장성·수익성·실행 가능성 표시 → 중요도 슬라이더 → 점수·순위 자동 변경 → 사용자 최종 선택 → 결과를 프롬프트 또는 마크다운으로 복사. 이 순서 그대로가 8절 프롬프트 ②입니다.
- 클로드 아티팩트.문서(마크다운)·코드·한 페이지 HTML·SVG 그림·도표·React 화면(단추와 입력이 있는 화면)을 별도 창으로 만들고 공개할 수 있습니다.
- Claude Code 아티팩트.2026년 6월, 작업 결과를 실시간으로 갱신되는 HTML 페이지로 공유하는 기능이 팀·기업용 베타로 나왔습니다.
- 구글 생성형 UI (Generative UI).2026년 I/O에서 검색과 제미나이가 필요할 때 표·그래프·시뮬레이션 같은 화면을 즉석에서 만드는 기능을 무료로 내놓는다고 발표했습니다.
※ "답변"이 "화면"이 되는 방향은 도구를 가리지 않습니다. 기준 2026-09.
3. 강의안은 PPT인가 HTML인가 — 슬라이드는 요약, HTML은 내용과 실습
이 절은 칼럼이 아니라 이 플랫폼의 운영 기준입니다(2026-09 확정). 실제 강의 운영 경험에서 정했습니다.
| 쓰임 | 권장 형식 | 이유 |
|---|---|---|
| 강의장 투사 · 기관 제출 · 인쇄 워크북과 짝 | PPT (PDF) | 빔·복사기·기관 결재 양식이 아직 슬라이드 파일을 요구한다. 표지·간지·카드 규격이 잡혀 있어 빠르다. |
| 강의 핵심 내용 + 실습 · 비교 · 판정 · 계산 · 점검 | HTML (인터랙티브) | 강의 내용과 실습이 한 화면에서 이어져 워크북 실습이 쉽다. 슬라이더·자동 계산·퀴즈 판정·복사 단추는 슬라이드로는 안 된다. 이 플랫폼의 세션 앱과 도우미가 이 역할이다. |
| 배포 · 복습 · 갱신 | HTML 링크 (QR) | 파일보다 링크 하나가 열기 쉽고, 고치면 모두에게 바로 반영된다. |
슬라이드 안에 세션 앱의 QR을 넣어 "요약은 슬라이드, 내용과 실습은 HTML"로 잇습니다. 특강 2시간이면 슬라이드 중심에 HTML 실습 한두 개를 둡니다. 8시간 과정이면 슬라이드는 간지와 개념만 두고 HTML 세션 앱이 내용과 실습 전체를 맡습니다.
칼럼은 지면에 맞춰 줄인 글이므로, 강의안 재료로 쓸 때는 칼럼이 다룬 도구·발표의 원문(공식 문서·발표문)을 먼저 모읍니다. 이 플랫폼에서는 정보성 자료를 이렇게 가이드 한 편으로 만든 뒤 슬라이드·워크북을 뽑습니다.
4. 비용 두 가지 — 토큰 비용과 사람의 주의 비용
토큰 비용 (Token Cost)
- 누가 내나
- API로 프로그램을 만들 때는 쓴 토큰 양만큼 과금됩니다. 정액 구독(클로드·챗GPT·제미나이) 사용자는 추가 요금이 없고, 대신 사용량 한도가 있어 긴 HTML은 한도를 빨리 씁니다.
- 참고
- AI 기능이 들어 있는 아티팩트를 남이 쓰면 그 사람의 구독 한도에서 나갑니다(클로드 도움말, 2026-09).
사람의 주의 비용 (Human Attention Cost)
- 뜻
- 10쪽 마크다운 보고서를 만드는 비용은 적어도 사람이 제대로 읽지 않으면 효율적이지 않습니다. 읽고 판단하는 시간까지 비용으로 셉니다.
그래서
- 기준
- 읽기만 하면 마크다운, 시스템에 넘기면 JSON, 비교·조정·판단이 있으면 HTML. 두 비용을 합쳐 가장 작은 쪽을 고릅니다.
5. 필요한 부분만 생성 — 부분 수정 · 절 재작성 · 전체 재작성
- 부분 수정.표 하나, 문장 몇 개가 틀렸다. 그 부분만 고치고 나머지는 손대지 않는다.
- 절 재작성.한 절의 논리가 어긋났다. 그 절만 다시 쓰고 앞뒤 절과 이어지는지 본다.
- 전체 재작성.구조 자체가 틀렸을 때만. 이때도 확정된 부분은 재료로 넘긴다.
※ AI 활용의 경쟁력은 얼마나 많은 결과물을 만들었는지가 아니라, 필요한 부분을 얼마나 정확하고 효율적으로 만들었는지에 있습니다. 8절 프롬프트 ③이 이 판정을 AI에게 먼저 시킵니다.
6. 흐름 7단계 — 답변에서 생성형 UI까지
| 단계 | 뜻 | 지금 어디서 보나 |
|---|---|---|
| ① 마크다운 (Markdown) | 사람이 읽는 글 | 챗봇의 기본 답변 |
| ② JSON | 구조화된 자료 | 시스템 연동, 에이전트 사이의 전달 |
| ③ HTML | 사람이 보는 화면 | 리포트, 비교표, 시안 |
| ④ 인터랙티브 HTML (Interactive HTML) | 값을 바꿔 보는 화면 | 슬라이더, 자동 계산, 선택·복사 |
| ⑤ 마이크로 앱 (Micro App) | 한 가지 일을 하는 작은 프로그램 | 아티팩트, 이 플랫폼의 도우미·세션 앱 |
| ⑥ AI 에이전트 (Agent) | 스스로 반복하며 일하는 AI | 조사·정리·보고를 한 번에 |
| ⑦ 생성형 UI (Generative UI) | 필요할 때 화면을 즉석에서 만든다 | 검색·제미나이의 화면형 답변(구글 I/O 2026 발표, 무료 제공 예정) |
단계 이름은 칼럼의 것이고, 뜻 풀이는 이 가이드가 붙였습니다. 뒤 단계가 앞 단계를 대체하지 않습니다. 생성형 UI 안에도 마크다운 문장과 JSON 자료가 들어 있습니다. 내 일이 어디까지 필요한지는 4절의 두 비용으로 정합니다. 더 자세한 방법론 관계는 가이드 「프롬프트 방법론의 흐름」을 보세요.
7. 판정 퀴즈 — 이 결과는 어떤 형식으로 받아야 하나
8. 프롬프트 3종 — { } 안만 바꿔 쓴다
① 형식을 정해 요청하기. 결과를 받기 전에 "누가 어디서 무엇을 하려고"를 적어 형식을 고르게 합니다.
[역할] 너는 {업종}의 실무 문서를 만드는 10년차 실무자다.
[목표] 아래 요청의 결과를 {형식: 마크다운 / JSON / HTML / 인터랙티브 HTML} 형식으로 만든다.
[맥락] 이 결과는 {누가: 예 거래처 담당자} {어디서: 화면·인쇄·시스템 입력} {무엇을 하려고: 읽기·비교·조작·판단} 쓴다.
[요청] {만들 것을 한 줄로: 예 9월 납품 일정 주간 보고}
[형식 규칙] 마크다운이면 결론 → 근거 → 상세 순, 한 화면에 들어오게. JSON이면 필드 이름을 {시스템 필드명}에 맞춘다. HTML이면 한 파일, 외부 연결 없이, 글자 크게.
[제약·예외] 없는 사실을 지어내지 않는다. 모르는 값은 [확인 필요]로 표시한다. 시작 전에 형식이 맞는지 한 줄로 확인해 달라.② 여러 안을 비교하는 인터랙티브 HTML 만들기. 칼럼의 6개 사업 아이디어 실험을 그대로 옮긴 주문서입니다.
[역할] 너는 의사 결정을 돕는 화면을 만드는 기획자다.
[목표] 아래 {안의 개수: 예 6}개 안을 비교해 내가 최종 선택하는 인터랙티브 HTML 한 파일을 만든다.
[안 목록] {안 1: 이름 — 한 줄 설명} / {안 2} / {안 3} / {안 4} / {안 5} / {안 6}
[기준] {기준 1: 시장성} · {기준 2: 수익성} · {기준 3: 실행 가능성} — 각 안에 1~5점, 점수 근거를 한 줄씩.
[화면] ① 카드형 비교표 ② 기준마다 중요도 슬라이더(기본 같은 비중) ③ 슬라이더를 움직이면 점수·순위가 자동으로 바뀜 ④ 내가 최종 선택을 누르는 단추 ⑤ 선택 결과를 프롬프트 또는 마크다운으로 복사하는 단추.
[제약·예외] 한 파일, 외부 라이브러리 없이, 글자는 크게, 색은 세 가지 이내. 점수 근거에 없는 사실을 넣지 않는다. 근거가 약하면 [근거 필요]로 표시한다.③ 필요한 부분만 고치기. AI에게 먼저 범위를 판정하게 하고, 부분 수정으로 끝나면 그것만 받습니다.
[역할] 너는 방금 만든 문서를 고치는 편집자다.
[목표] 아래 문서에서 {고칠 부분: 예 3절의 표 한 개}만 고친다. 나머지는 한 글자도 바꾸지 않는다.
[고칠 내용] {무엇을 어떻게: 예 2026년 수치를 첨부한 표로 교체}
[범위 판정] 먼저 "부분 수정 / 절 재작성 / 전체 재작성" 가운데 어느 것이 필요한지 한 줄로 판정하고, 부분 수정으로 되면 그것만 한다.
[출력] 고친 부분만 보여 주고, 앞뒤 한 줄씩만 붙여 위치를 알 수 있게 한다.
[제약·예외] 형식(마크다운/HTML)은 원문 그대로 유지한다. 새 사실을 더하지 않는다.셋 다 도구 이름이 없습니다. 클로드·챗GPT·제미나이 어디에 넣어도 되고, 정액 구독이면 추가 요금이 없습니다.
윤성임, 「AI의 출력은 '답변'에서 '보고·비교하고·조작하고·판단하는 인터페이스'로 확장되고 있다」, 소상공인뉴스 AI융합비즈마케팅 칼럼 · 파이낸스투데이 AI리터러시 칼럼, 2026-08-26.
클로드 도움말 「What are artifacts and how do I use them?」(아티팩트 형식 종류·공개·사용량 안내) · Anthropic Claude Code Artifacts 베타 발표(2026-06-18, 팀·기업용) · 구글 I/O 2026 발표(검색·제미나이의 생성형 UI, 무료 제공 예정).