Monthly Copilot · July 2026 · 월간 코파일럿 7월호 · Workflow
Workflow
'쉽게 이해되는 HTML 결과물' 만들기 by M365 Copilot
"읽기 좋은 문서"를 넘어, "보는 순간 이해되는 문서"를 만든다면?
Article Summary
Andrej Karpathy는 "같은 내용이라도 Markdown보다 HTML이 사람이 '보는 결과물'로 훨씬 풍부하다"고 말했습니다. Markdown은 초안을 쓰고 지식을 구조화하는 데 최적이지만, HTML은 카드·하이라이트·표·인터랙션으로 소비 경험을 끌어올립니다. 이 글은 M365 Copilot이 제공하는 Researcher로 자료 수집 → Cowork로 HTML 결과물 생성 → 결과물 확인 → Word·PowerPoint 전환의 4단계로, 쉽고 빠르게 완성도 높은 문서를 만드는 방법을 안내합니다.
1. 왜 지금 HTML인가 — Karpathy의 화두
AI 시대 프롬프트의 중요성과 함께 Markdown 형식의 문서를 많이 사용했습니다. 가볍고, 버전 관리가 쉽고, 어디서나 열립니다. 하지만 Markdown은 본질적으로 "읽는" 포맷입니다. 제목·목록·코드 블록은 있지만, 시선을 잡는 강조도, 한눈에 비교되는 카드도, 클릭으로 펼쳐지는 인터랙션도 없습니다.
Andrej Karpathy가 짚은 핵심은 단순합니다. "같은 내용이라도 HTML이 '보는 결과물'로 훨씬 풍부하다"는 것입니다. 사람은 줄글보다 시각적 위계에서 더 빠르게 의미를 길어 올립니다. 색으로 구분된 박스, 좌우로 비교되는 표, 강조된 한 문장은 같은 정보를 더 짧은 시간에, 더 정확하게 전달합니다.
한 줄 요약
Markdown = 지식 표현(초안·구조화·편집)에 최적 · HTML = 소비 경험(전달·설득·발표)에 최적. 둘은 경쟁이 아니라 릴레이입니다.
Markdown vs HTML — 무엇에 강한가
| 관점 | Markdown | HTML |
|---|---|---|
| 목적 | 지식 표현 · 초안 | 소비 경험 · 전달 |
| 강점 | 가볍고 구조적, 편집·버전관리 용이 | 시각 위계, 강조, 카드·표·인터랙션 |
| 한계 | 시각적 강조·레이아웃에 제약 | 직접 작성 시 CSS·JS 부담 |
| 최적 단계 | 자료 수집·구조 설계 | 고객 전달·발표·공유 |
문제는 "HTML이 좋은 건 알겠는데, 직접 만들기는 번거롭다"는 점이었습니다. 예전에는 카드 레이아웃 하나, 하이라이트 박스 하나를 위해 CSS와 JavaScript를 직접 써야 했죠. 이 지점을 M365 Copilot Cowork가 바꿉니다. 원하는 형태를 말로 설명하면, 반응형 레이아웃·하이라이트·코드 블록까지 갖춘 HTML을 몇 분 안에 받을 수 있습니다.
2. 어떤 HTML을 만들 것인가 — 실용적인 6가지 형태
"HTML로 만들자"는 막연합니다. 용도에 따라 형태를 먼저 정하면 프롬프트가 명확해지고 결과물 품질이 올라갑니다. 실무에서 가장 자주 쓰이는 6가지를 정리했습니다.
| 형태 | 용도 | 활용 예시 |
|---|---|---|
| Executive Brief HTML | 보고 / 요약 | 리서치, 회의록, 고객 분석, 의사결정 자료 |
| Comparison Matrix HTML | 비교 / 판단 | 솔루션 비교, 경쟁사 분석, 제품 선택 |
| Annotated Technical Review HTML | 코드 / 기술 설명 | 코드 리뷰, 아키텍처 설명, 변경사항 리뷰 |
| One-page Proposal HTML | 고객 제안 | 고객 미팅 후 follow-up, 제안서 초안 |
| Interactive Learning HTML | 학습 / 교육 | 워크샵, 교육자료, 내부 enablement |
| Mini Web App HTML | 업무 도구 | 계산기, 체크리스트, ROI·비용 계산기 |
형태 선택 팁
프롬프트 첫 문장에서 "어떤 형태의 HTML"인지를 먼저 못 박으세요. 예: "이 자료를 Comparison Matrix 형태의 HTML로 만들어줘." 형태가 정해지면 Cowork가 레이아웃·강조·구성요소를 그에 맞게 자동 선택합니다.
3. 전체 워크플로 — 4단계 한눈에 보기
Markdown의 강점(구조화·편집)과 HTML의 강점(소비 경험)을 모두 살리는 길은 "릴레이"입니다. Researcher가 Markdown으로 지식을 모으고, Cowork가 그것을 HTML로 '보는 결과물'로 바꾸고, 필요하면 Word·PPT로 확장합니다. 아래 표로 전체 흐름을 먼저 살펴본 뒤, 3-1부터 3-4까지 각 단계를 차례로 따라가 보겠습니다.
전체 파이프라인
Researcher로
자료 수집
자료 수집
Cowork에서
HTML 생성
HTML 생성
출력 파일
확인
확인
Word · PPT
전환 편집
전환 편집
| 단계 | 작업 | 내용 |
|---|---|---|
| 1단계 | 자료 수집 | M365 Copilot Researcher Agent로 사내 문서·웹을 심층 조사해 Markdown 기반 자료 확보 |
| 2단계 | HTML 생성 | M365 Copilot Cowork Agent로 카드·하이라이트·표가 살아 있는 HTML 결과물 생성 |
| 3단계 | 결과물 확인 | 세션 폴더에 저장된 HTML 파일을 브라우저에서 열어 확인·점검 |
| 4단계 | Word·PPT 전환 | 같은 대화에서 Word·PowerPoint로 전환해 세밀하게 편집·배포 |
핵심 원리
콘텐츠는 HTML에서 먼저 확정하고, 세부 문구·순서·이미지 교체 같은 마감 작업은 Word·PPT에서 합니다. 콘텐츠 작업과 디자인 마감을 분리하면 수정 비용이 크게 줄어듭니다.
3-1. 1단계 — Researcher로 Markdown 자료 수집
좋은 HTML은 좋은 콘텐츠에서 나옵니다. M365 Copilot의 Researcher Agent를 이용하면 사내 문서와 웹 검색 결과를 심층 조사해 주제에 맞는 자료를 한 번에 모을 수 있습니다. 사내 콘텐츠는 Microsoft Graph를 통해 Entra ID 인증·ACL 권한 범위 안에서만 조회되고, 웹 검색은 별도 외부 채널로 확장됩니다.
연결되는 데이터 소스 — 아키텍처
Entra ID
인증 · ACL 권한 검증
사용자
"이 주제로 자료를 모아줘"
↓
M365 Copilot
사용자 요청을 해석하고, 적절한 채널로 데이터를 수집·정제·요약
Researcher Agent
Cowork Agent
호출 →
GPT
Claude
LLM 모델
GPTClaude↓
사내 콘텐츠 채널
Microsoft Graph
권한 기반 통합 액세스 레이어
↑↑↑
OneDrive · 
SharePointWord
Excel
PPT
Pages
Outlook
메일
첨부
Teams
채팅
회의
외부 지식 채널
외부 도구 · 커넥터
웹 검색 · 플러그인으로 확장
↑↑
Bing 웹 검색
뉴스
컴텐츠
플러그인
사용자 정의 도구
사용자 요청 → M365 Copilot(Researcher · Cowork Agent)이 해석 → 사내 콘텐츠는 Microsoft Graph 권한 범위 안에서, 외부 지식은 외부 도구·커넥터로 수집. 모든 접근은 Entra ID 인증·ACL로 검증됩니다.
프롬프트 예시 — Researcher Agent
"AI 시대에 내가 일하는 방식은 어떻게 바뀌고 있는가?"라는 주제에 대해, 현업과 개발자 관점에서 일하는 방식이 어떻게 변화하고 있는지를 조사해줘. 핵심 트렌드와 근거 자료를 정리해줘.
출력 형식 선택 팁
- Markdown — 이후 Cowork 프롬프트에 통째로 붙여 넣기 쉬움 (이 워크플로의 권장 형식)
- Pages — 팀과 공동 편집하며 자료를 보강할 때 유리
- Word — 사내 결재·공식 배포용 원본으로 재사용
실제 작업 화면 — 전체 6단계
3-2. 2단계 — Cowork로 HTML 결과물 생성
1단계에서 모은 Markdown 자료(또는 Page)를 첨부하고, Cowork에 원하는 결과물을 요청합니다. Markdown으로 표현하기 어려운 카드 레이아웃 · 하이라이트 박스 · 아이콘 · 코드 블록까지 자동으로 구성됩니다.
프롬프트 예시 — Cowork Agent (웹 문서 + 슬라이드 동시 생성)
AI 시대 일하는 방식 변화 조사.page 첨부된 Page 내용을 바탕으로, 고객에게 전달하기 위한 두 가지 형태의 HTML 문서를 작성해줘. 1. 웹 문서 형태의 HTML (한 페이지 세로로 읽는 형태) 2. 슬라이드 형태의 HTML (페이지 넘기기 기능 포함) 요구사항: - 전체 배경은 흰색 - 제목·소제목·본문이 구조적으로 잘 보이도록 구성 - 핵심 메시지나 고객에게 꼭 강조할 부분은 Highlight 처리 - (슬라이드의 경우) 불필요한 설명은 줄이고, 짧고 명확한 문장 위주로 요약, 슬라이드 화면 비율 고려 - 고객이 빠르게 이해할 수 있도록 읽기 쉬운 레이아웃 유지 결과물은 바로 사용 가능한 HTML 코드 형태로 제공해줘.
실제 작업 화면 — 전체 4단계
단계적 고도화 전략
한 번에 완벽을 기대하기보다, 대화를 이어가며 점진적으로 품질을 높이세요.
- 1차 · 콘텐츠 생성 — "수집한 자료를 HTML 문서로 정리해줘" → 기본 구조·콘텐츠 확보
- 2차 · 시각적 개선 — "흰색 배경에 스타일을 더 세련되게. 카드 레이아웃과 아이콘을 적용해줘"
- 3차 · 강조·디테일 — "핵심 메시지는 하이라이트 박스로, 비교 항목은 표로 바꿔줘"
3-3. 3단계 — HTML 결과물 확인
Cowork가 생성한 HTML 파일은 로컬 파일 시스템(OneDrive 동기화 폴더)에 자동 저장됩니다. 각 세션마다 고유 세션 ID 폴더가 만들어지며, 가장 최근 수정된 폴더가 마지막 작업 세션입니다.
폴더 구조 예시
Documents └─ Coworker └─ sessions ├─ a1b2c3d4-e5f6-da4d │ └─ output │ ├─ AI_시대_일하는_방식_변화_웹문서.html │ └─ AI_시대_일하는_방식_변화_슬라이드.html └─ f9e8d7c6-b5a4-3210 └─ output └─ guide.html
실제 작업 화면 — 전체 4단계
3-4. 4단계 — Word·PowerPoint 파일 생성
HTML은 시각적으로 강력하지만, 세부 문구 수정·순서 변경·이미지 교체 같은 작업은 익숙한 도구가 더 편합니다. 같은 대화 안에서 Word 또는 PowerPoint로 전환해 달라고 요청하면, 편집과 소유권 관리가 한층 쉬워집니다.
전환 요청 예시
방금 만든 HTML 웹문서는 본문 스타일을 제목 1~3 계층 구조로 맞추고, 표와 이미지 캡션은 그대로 유지하면서 Word 파일로 전환해줘. 그리고 HTML 슬라이드는 디자인 일관성을 유지하면서 PowerPoint 파일로 전환해줘.
실제 작업 화면 — 전체 4단계
권장 작업 순서
HTML에서 구조와 콘텐츠를 먼저 확정하고, 수정이 필요할 때 Word/PPT로 변환하세요. 콘텐츠 작업과 디자인 마감이 분리되어 수정 비용이 크게 줄어듭니다.
4. 고급 활용 팁
원하는 결과를 더 빠르고 일관되게 얻기 위한 다섯 가지 실전 팁입니다. 각 항목을 펼쳐 자세한 방법을 확인하세요.
HTML 슬라이드 → PowerPoint 변환으로 일관된 디자인
슬라이드형 HTML을 PowerPoint로 전환할 때 "디자인 일관성을 유지하면서 변환해줘"라고 명시하면 표지·본문·색상 테마가 흐트러지지 않습니다. 화면 비율(16:9)과 폰트 계층을 함께 지정하면 슬라이드 레이아웃이 안정적으로 유지되고, 발표 자료로 바로 쓸 수 있는 완성도가 나옵니다.
Researcher → Cowork 체이닝으로 품질 높이기
Researcher 결과(Markdown 또는 Page)를 그대로 Cowork에 넘기면, 출처가 풍부한 콘텐츠 위에 디자인이 입혀져 품질이 한 단계 올라갑니다. 자료 수집과 디자인을 분리하면 각 단계에 집중할 수 있어, 근거가 탄탄하면서도 보기 좋은 결과물이 나옵니다.
기존 HTML을 부분만 갱신하기
"3번 섹션 표만 최신 수치로 바꿔줘"처럼 부분 갱신을 요청하면, 전체를 다시 만들지 않고 필요한 곳만 수정됩니다. 토큰과 시간을 아끼면서도 나머지 영역의 디자인 일관성이 그대로 유지되어, 반복 수정에 특히 유용합니다.
이미지가 포함된 문서 처리
이미지 캡션·정렬·크기를 명시하면 레이아웃이 안정적으로 유지됩니다. 슬라이드 전환 시에는 화면 비율도 함께 지정하세요. 이미지가 본문 흐름을 깨지 않도록 "이미지는 본문 너비에 맞춰 가운데 정렬"처럼 배치 규칙을 함께 요청하면 더 깔끔합니다.
Cowork 프롬프트 고급 기법
2번에서 소개한 6가지 형태(Executive Brief, Comparison Matrix 등) 중 하나를 프롬프트 첫머리에 지정하면 결과가 일관됩니다. 여기에 "Bootstrap 5 흰 배경에 ECharts로 수치를 차트화해줘"처럼 라이브러리·차트까지 함께 요청하면, 데이터가 살아 있는 시각적 결과물을 한 번에 받을 수 있습니다.
다음 단계 — 이 결과물을 팀과 공유하려면
여기까지 오셨다면 보기 좋은 HTML 결과물이 손에 있을 겁니다. 이제 이 결과물을 링크 한 줄로 동료나 고객에게 공유해 보세요. 별도 서버 없이, 브라우저만 있으면 됩니다.
내가 만든 HTML 결과물을 함께 공유하고 싶다면!
GitHub 웹사이트에서 클릭 몇 번만 하면 공개 URL이 생깁니다. 비개발자도 따라 할 수 있는 가장 쉬운 방법을 정리해 두었습니다.
자주 묻는 질문 (FAQ)
M365 Copilot으로 HTML 결과물을 만들 때 가장 자주 나오는 질문을 정리했습니다.
M365 Copilot으로 HTML 문서를 어떻게 만드나요?
Researcher Agent로 자료를 모은 뒤, 그 자료(Markdown 또는 Page)를 Cowork Agent에 첨부하고 원하는 형태의 HTML을 요청하면 됩니다. 카드·하이라이트·표·코드 블록까지 갖춘 HTML이 몇 분 안에 생성되며, CSS나 JavaScript를 직접 작성할 필요가 없습니다.
Markdown과 HTML은 각각 언제 쓰는 게 좋나요?
Markdown은 자료 수집·초안 작성·구조화 같은 '지식 표현'에 강하고, HTML은 카드·강조·표·인터랙션으로 '소비 경험(전달·발표·공유)'에 강합니다. 둘은 경쟁이 아니라 Markdown으로 모으고 HTML로 전달하는 릴레이로 함께 쓰는 것이 좋습니다.
Cowork가 만든 HTML 파일은 어디에 저장되나요?
로컬 파일 시스템의 OneDrive 동기화 폴더에 자동 저장됩니다. Windows 기준 경로는
C:\Users\<사용자명>\Documents\Coworker\sessions\<세션-ID>\output\ 이며, 각 세션마다 고유 세션 ID 폴더가 생성되고 가장 최근 수정된 폴더가 마지막 작업 세션입니다.만든 HTML을 Word나 PowerPoint로 바꿀 수 있나요?
네. 같은 대화 안에서 Word 또는 PowerPoint로 전환해 달라고 요청하면 됩니다. 제목 계층 구조와 표·이미지 캡션을 유지한 Word 문서, 디자인 일관성을 유지한 PowerPoint 슬라이드로 변환되어 세밀한 편집과 배포가 쉬워집니다.
만든 HTML 결과물을 어떻게 공유하나요?
GitHub Pages를 이용하면 별도 서버 없이 브라우저에서 클릭 몇 번만으로 공개 URL을 만들 수 있습니다. 비개발자도 따라 할 수 있으며, 만든 링크 한 줄로 동료나 고객에게 바로 공유할 수 있습니다. 위 "공유 가이드 보러 가기"에서 자세한 방법을 확인하세요.
어떤 형태의 HTML을 만들 수 있나요?
Executive Brief(보고·요약), Comparison Matrix(비교·판단), Annotated Technical Review(코드·기술 설명), One-page Proposal(고객 제안), Interactive Learning(학습·교육), Mini Web App(계산기·체크리스트 등 업무 도구) 6가지 형태가 대표적입니다. 프롬프트 첫머리에 형태를 지정하면 결과 품질이 올라갑니다.
마무리
Markdown은 여전히 강력합니다 — 지식을 구조화하고 초안을 다듬는 데 이만한 도구가 없죠. 하지만 그 지식을 사람에게 전달하는 마지막 단계에서는 HTML이 압도적입니다. Karpathy의 통찰처럼, '보는 결과물'은 같은 내용을 더 빠르고 정확하게 전합니다. 이제 그 HTML을 직접 코딩할 필요가 없습니다. Researcher로 모으고, Cowork로 디자인하고, Word·PPT로 확장하세요. 당신의 지식이 가장 보기 좋은 형태로 세상에 나가는 길입니다.
참고 자료
- Andrej Karpathy — Markdown vs HTML (X 인용)
- Microsoft Learn — M365 Copilot Researcher 개요
- Microsoft 365 Copilot Cowork
- Copilot의 유용한 새로운 기능 — ModernWork Korea
- 일의 흐름을 바꾸는 새로운 경험, Copilot Cowork — ModernWork Korea
- 이제 AI도 팀플하는 시대 — ModernWork Korea
- Copilot Wave 3 상세 안내: Copilot Cowork, 멀티모델 인텔리전스, Agent 365 — ModernWork Korea