한국GPT협회 표준교재

301. 보고서 작성과 자료 시각화

HTML로 표·차트·발표 슬라이드·대시보드까지 — AI로 만드는 자료 시각화

자료 시각화

Learning Objectives
  • 자료 시각화에 HTML을 쓰는 이유와 장점(정확한 재편집·무료·반응형·경량)을 설명한다.
  • 엑셀 데이터를 AI의 Python(Code Interpreter)으로 복잡한 그래프로 그리고, 가독성 개선점을 자문받는다.
  • 표·차트·발표 슬라이드·대시보드를 HTML로 생성하고, 색상 팔레트·퓨샷으로 디자인을 일관되게 통제한다.
이해

왜 HTML로 시각화하는가

학습 안내읽기. 아래 장점 목록과 비교표를 "내가 지금 PPT로 하던 일 중 무엇을 HTML로 옮길 수 있나"에 표시하며 읽으십시오.

리서치·보고서로 정리한 자료를 이제 "보는 자료"로 시각화합니다. 지금까지는 표·차트를 파워포인트나 이미지로 만들었지만, AI 시대의 기본 포맷은 HTML입니다. 표 하나부터 발표 슬라이드, 인터랙티브 대시보드까지 전부 텍스트로 된 HTML 한 파일로 만들 수 있고, AI가 가장 잘 만들고 가장 잘 고치는 형식이기 때문입니다.

장점 1AI가 더 정확히 읽고 고친다

HTML은 텍스트/코드입니다. PPTX·이미지는 바이너리라 AI가 내용을 정확히 파싱·재편집하기 어렵지만, HTML은 "3번 차트 색만 바꿔줘" 같은 부분 수정을 정확히 반영합니다.

장점 2무료 · 오피스 불필요

파워포인트·엑셀 같은 유료 프로그램이 없어도 됩니다. 브라우저만 있으면 만들고 보고 배포까지 끝납니다.

장점 3생성이 빠르다

프롬프트 한 번으로 표·차트·슬라이드가 완성됩니다. 도형을 하나씩 그리고 정렬하는 수작업이 사라집니다.

장점 4어디서나 열린다

Windows·Mac·모바일 어떤 브라우저에서나 똑같이 열립니다. 폰트 깨짐·버전 호환 문제가 거의 없습니다.

장점 5반응형 디자인

화면 크기에 맞춰 요소가 자동으로 재배치됩니다. 발표 화면·노트북·휴대폰에서 각각 보기 좋게 정렬됩니다.

장점 6용량이 작다

텍스트라 보통 수십 KB입니다. 이미지·PPT 대비 훨씬 가벼워 메일 첨부·전송이 편합니다.

장점 7인터랙션이 가능하다

필터·검색·호버·클릭으로 데이터를 조작할 수 있습니다. 정적 이미지나 슬라이드로는 불가능한 대시보드가 됩니다.

장점 8링크 하나로 공유

파일 하나 또는 URL만 보내면 끝입니다. 용량·버전·프로그램 걱정 없이 누구나 즉시 엽니다.

장점 9수정·재사용이 쉽다

텍스트라 버전 비교·템플릿화가 쉽습니다. 데이터만 갈아 끼우면 같은 디자인의 새 자료가 즉시 나옵니다.

장점 10검색·접근성

텍스트라 Ctrl+F 검색이 되고 화면낭독기도 읽습니다. 이미지 속 글자와 달리 데이터가 그대로 살아 있습니다.

세 가지 포맷 비교 — 무엇을 언제 쓰나

기준HTMLPPTX정적 이미지(PNG)
AI 재편집매우 정확 (텍스트/코드)제한적거의 불가
비용·도구무료 · 브라우저오피스 필요편집 도구 필요
인터랙션필터·검색·차트 조작애니메이션 한정없음
반응형자동 재배치고정 비율고정
용량·공유수십 KB · 링크수 MB수백 KB
이럴 때대시보드·웹 공유·재사용현장 발표·인쇄 배포보고서 삽입·SNS
HTML → PPTX·PDF는 언제든 가능. HTML로 만들어 두면 필요할 때 python-pptx로 PPTX로, 브라우저 인쇄로 PDF로 내보낼 수 있습니다. 원본을 HTML로 두고 파생본을 만드는 것이 핵심입니다 — 반대(PPTX→HTML)는 품질이 크게 떨어집니다.
사례

AI에게 가독성·가시성 개선점 자문받기

학습 안내직접 실행. 본격적으로 그리기 전에, 내 데이터·보고서를 "어떻게 시각화하면 가장 잘 읽힐지"를 AI에게 먼저 자문받으면 방향이 잡힙니다. 여기서 받은 원칙을 이후 파이썬 차트·HTML 표·차트·슬라이드에 그대로 적용합니다.

사람은 자기 데이터에 익숙해 무엇이 안 보이는지 놓치기 쉽습니다. AI에게 물어보면 강조색·라벨·정렬 같은 시각화 기본 원칙을 짚어 줍니다.

ChatGPT — 시각화 가독성 자문
담당자
내 업무 데이터와 보고서를 시각화하려고 해. 가시성·가독성을 더 높이려면 어떤 점에 주의해서 시각화하는 게 좋을지 추천해줘.
ChatGPT

시각화 가독성을 높이는 핵심 원칙을 정리했습니다.

  • 강조색 1개로 통일 — 핵심 항목만 진한 색, 나머지는 회색으로 눌러 시선을 유도.
  • 데이터 라벨 직접 표기 — 막대·꼭짓점 위에 값을 적어 축을 오가며 읽지 않게.
  • 불필요한 격자·테두리 제거 — 잉크를 줄이면 데이터가 더 도드라집니다.
  • 정렬 — 막대는 값 크기순으로 정렬해 순위를 즉시 인지하게.
  • 핵심 수치는 카드로 — 결론 한 문장을 큰 숫자 카드로 강조.
  • 표는 히트 셀 배경 — 표의 숫자 크기를 셀 배경 진하기로 표현하면 값을 색으로 읽습니다.

원하시면 이 원칙대로 파이썬 차트HTML 표·차트로 만들어 드릴 수 있습니다.

사례

Python으로 복잡한 그래프 그리기

공통 · 데이터 분석

학습 안내직접 실행. 엑셀 파일을 GPT에 첨부하고 아래 대화처럼 요청하면, AI가 Code Interpreter(파이썬 실행 환경)로 직접 분석하고 그래프를 그려 이미지로 돌려줍니다. 박스플롯·상관 히트맵·회귀선처럼 엑셀 차트로는 번거로운 복잡한 그래프가 강점입니다.

품질관리팀이 수집한 바나나 품질 데이터 8,000건으로 "어떤 조건의 바나나가 Good 판정을 받는가"를 분석합니다. 실습 데이터는 data analysis_banana_quality.xlsx — 수치형 변수 7개(크기·무게·당도·연도·수확시점·숙성도·산도)와 품질 등급(Good/Bad)으로 구성됩니다.

ChatGPT — Code Interpreter 데이터 분석엑셀 첨부
품질관리 담당자
data analysis_banana_quality.xlsx
이 데이터로 "어떤 조건의 바나나가 Good 판정을 받는지" 분석해줘. 핵심을 보여주는 그래프로 ① 품질 등급별 당도 분포(박스플롯) ② 변수 간 상관관계(히트맵) ③ 수확시점과 크기의 관계(회귀선 산점도)를 그려줘. 한글 폰트를 적용하고 이미지로 내려받게 해줘.
ChatGPT · Code Interpreter
pandas로 8,000행을 읽고 matplotlib·seaborn으로 차트를 그리는 중…파이썬 실행 · NanumGothic 적용

분석 완료. 당도(Sweetness)가 품질 판정의 핵심 변수로 확인됩니다(Good 그룹의 당도 중앙값이 뚜렷이 높음). 요청하신 3개 그래프를 생성했습니다. 각 이미지는 아래에서 내려받을 수 있습니다.

AI가 파이썬으로 그려 준 그래프입니다. 셋 다 엑셀 기본 차트로는 만들기 번거로운 통계형 시각화입니다.

품질 등급별 당도 박스플롯
① 박스플롯 — Good 그룹의 당도 중앙값이 뚜렷이 높다. 당도가 품질 판정의 핵심 변수.
변수 간 상관관계 히트맵
② 히트맵 — 크기↔수확시점 +0.58로 최고 상관, 무게↔당도 +0.42. 변수 관계를 한눈에.
수확시점과 크기 회귀 산점도
③ 회귀 — 크기 = 0.623 × 수확시점 − 0.28 (R²≈0.34). 늦게 수확할수록 커지는 경향.
한글 폰트 깨짐 대처. 파이썬 차트에서 한글이 □로 나오면 "NanumGothic 폰트를 설치·적용해 다시 그려줘" 한 줄이면 해결됩니다. 처음부터 프롬프트에 "한글 폰트 적용"을 넣어 두면 대부분 예방됩니다.
사례

HTML로 예쁜 표·차트 만들기

공통 · 시각화

학습 안내직접 실행. 보여주고 싶은 특정 수치를 주고 "HTML로 예쁘게 시각화해줘"라고 요청하면, 외부 라이브러리 없이 열리는 표·차트가 나옵니다. 앞의 자문에서 받은 원칙(강조색·라벨·히트 셀)을 프롬프트에 함께 넣으면 완성도가 올라갑니다.

ChatGPT — HTML 표·차트 생성
담당자
아래 3가지를 외부 라이브러리 없이 순수 HTML/CSS로 예쁘게 시각화해줘. 강조색 1개로 통일하고, 값 라벨을 직접 표기해줘.
① 분야별 매출 비교표(값 크기를 셀 배경으로) ② 부서별 매출 막대차트 ③ 유통채널 매출 비중 도넛차트
ChatGPT

단일 HTML로 3종을 만들었습니다. 파일 하나로 어디서나 열립니다.

AI가 만든 HTML 시각화 3종입니다 — 이미지가 아니라 브라우저에서 살아 있는 요소라, 색·값·정렬을 말 한마디로 다시 바꿀 수 있습니다.

① 분야별 매출 비교표 (히트 셀)
분야매출비중
인문1.55억19.2%
경제경영1.28억15.9%
소설1.13억14.0%
자기계발0.94억11.7%
과학0.71억8.8%
② 부서별 매출 (막대차트)
2.9억
영업1팀
2.8억
영업2팀
2.4억
영업3팀
③ 유통채널 매출 비중 (도넛)
52%도매유통
도매유통51.7%
온라인서점28.0%
대형서점13.4%
직영몰6.9%
HTML 시각화의 진짜 이점. 위 셋은 정적 이미지가 아닙니다. "도넛을 막대로 바꿔줘", "강조색을 초록으로", "숫자를 천 단위 콤마로"처럼 말로 즉시 수정되고, 그대로 보고서·슬라이드·대시보드에 복사해 재사용할 수 있습니다.
사례

발표 슬라이드(HTML) 만들기

공통 · 발표자료

학습 안내따라 읽기. ① 색상 팔레트로 디자인 가이드를 잡고 → ② 메타 프롬프팅으로 "슬라이드 만드는 프롬프트"를 뽑고 → ③ 보고서 md를 첨부해 발표본을 생성한 뒤 → ④ 기존 발표본을 퓨샷으로 붙여 디자인을 통일하는, 네 단계 흐름입니다.

① 색상 팔레트를 디자인 가이드로 넣기

colorhunt.co 같은 색상 팔레트 사이트에서 마음에 드는 조합의 HEX 코드를 복사해 프롬프트에 넣으면, AI가 그 색으로 통일감 있게 디자인합니다. 색 감각이 없어도 전문가가 고른 조합을 그대로 빌려 쓰는 방법입니다.

#222831
#393E46
#00ADB5
#EEEEEE
디자인 가이드 — 팔레트 지정
# 디자인 가이드 아래 색상 팔레트를 사용해 통일감 있게 디자인하라. 다른 색은 최소화한다. - 배경/헤더: #222831 (딥 차콜) - 보조 배경/구분선: #393E46 - 강조색(포인트·수치·막대): #00ADB5 (틸) - 본문/카드 배경: #EEEEEE 글꼴은 굵은 제목 + 가는 본문 대비. 여백을 충분히 두고 그리드를 정렬한다.

② 메타 프롬프팅 — "슬라이드 만드는 프롬프트"부터 만들기

좋은 슬라이드는 좋은 프롬프트에서 나옵니다. 슬라이드 프롬프트를 직접 짜기 어렵다면, 그 프롬프트 자체를 AI에게 설계하게 합니다.

ChatGPT — 슬라이드 프롬프트 설계(메타 프롬프팅)
담당자
보고서를 발표용 HTML 슬라이드로 예쁘게 만드는 프롬프트를 작성해줘. 컨설팅펌 스타일에, 외부 라이브러리 없는 단일 HTML, 좌우 2단 구성, 이전/다음 이동까지 지시가 들어가게.
ChatGPT

그대로 재사용할 수 있는 슬라이드 생성 프롬프트입니다.

# 역할
너는 컨설팅펌의 시니어 컨설턴트다. 첨부한 보고서를 발표용 슬라이드로 디자인한다.

# 형식·레이아웃
- 외부 라이브러리 없이 CSS·JS를 모두 내장한 단일 HTML 파일 1개
- 한 슬라이드 = A4 가로(landscape) 한 페이지 비율
- 모든 슬라이드에 동일한 헤더·푸터를 마스터처럼 적용
- 이전/다음 버튼 + 키보드 좌우 화살표로 이동
- 컨설팅펌 스타일: 절제된 색, 굵은 제목, 정렬된 그리드, 충분한 여백

# 슬라이드 본문(좌우 2단)
- 왼쪽: 발표자 없이 읽어도 이해되는 설명글
- 오른쪽: 표·그래프 등 시각화(막대/라인 차트, 비교표, 수치 카드)

# 슬라이드 구성
1) 표지 2) Executive Summary 3) 핵심 트렌드 4) 상세 분석 5) 시사점·제언 6) 마무리

# 작성 기준
- 한국어, 보고서의 실제 수치·출처를 그대로 반영
- 그래프는 임의값이 아니라 보고서의 실제 데이터로

③ 보고서 md 첨부 → 전체 발표본 생성

위에서 만든 슬라이드 프롬프트에 ①의 색상 팔레트 가이드를 붙이고, 보고서 전체본 md를 첨부해 발표본을 한 번에 생성합니다.

Claude — 발표본(HTML 슬라이드) 생성보고서 md + 슬라이드 프롬프트 + 팔레트
담당자
05 심층리서치 결과 보고서 본문.md슬라이드 작성 프롬프트.md
첨부한 보고서(md)와 슬라이드 작성 프롬프트(md)에 색상 팔레트 가이드를 더해 발표본 HTML을 만들어줘. 보고서의 실제 수치·출처를 슬라이드에 그대로 반영해줘.
Claude

표지·Executive Summary·핵심 트렌드·상세 분석·제언·마무리로 구성된 단일 HTML 발표본을 생성했습니다. (미리보기 3장)

STRATEGY REPORT
발사체 추진 기술
글로벌 동향
2023–2026 기술 트렌드 분석 보고서
PART 03 · 국가별 동향
국가별 메탄 엔진 추력 비교
주요 4개국 대표 엔진 (tf)
PART 06 · 시사점
경쟁의 축, 성능에서 비용으로
핵심 지표
−90%
재사용 시 발사 단가
×10
발사 빈도 목표

④ 퓨샷 — 기존 발표본을 붙여 디자인 통일

이미 만들어 둔 발표본이 있으면, 그 HTML을 예시(퓨샷)로 첨부하고 "이 디자인을 그대로 따라 새 보고서로 만들어줘"라고 하면 팀·회사 전체 발표자료의 디자인이 통일됩니다.

Claude — 퓨샷으로 디자인 복제기존 발표본 HTML 첨부
담당자
07 …발표용(슬라이드).html이번_분기_보고서.md
첨부한 기존 발표본의 레이아웃·색·폰트·컴포넌트를 그대로 따라, 새로 첨부한 이번 분기 보고서로 같은 디자인의 발표본을 만들어줘. 내용만 새 보고서로 교체하고 디자인은 100% 동일하게.
Claude

첨부한 발표본의 헤더·푸터·색상·슬라이드 구조를 그대로 적용하고, 내용만 이번 분기 보고서로 교체한 새 발표본을 생성했습니다. 두 파일을 나란히 열면 디자인이 동일합니다.

퓨샷 = 디자인 표준화. "예시를 보여주고 똑같이"가 말로 스타일을 설명하는 것보다 훨씬 정확합니다. 회사 표준 발표본 1개를 만들어 두면, 이후 모든 보고서를 그 한 파일에 붙여 같은 디자인으로 대량 생산할 수 있습니다.
사례

엑셀 데이터로 HTML 대시보드 만들기

공통 · 대시보드

학습 안내직접 실행. 정적인 표·차트를 넘어, 필터로 조작하고 엑셀을 갈아 끼울 수 있는 인터랙티브 대시보드도 HTML 한 파일로 만듭니다. HTML 시각화의 인터랙션·재사용 장점이 가장 잘 드러나는 사례입니다.

도서 판매 데이터(도서판매_Data.xlsx, 900건)로 판매 현황 대시보드를 만듭니다. ① 무엇을 보여줄지(지표) ② 어떻게 조작할지(상단 필터·업로드) ③ 어떤 형식으로(단일 HTML)를 한 번에 명확히 적는 것이 핵심입니다.

대시보드 생성 프롬프트
도서판매_Data.xlsx의 데이터로 도서 판매 현황·실적 대시보드를 만들어 줘. # 형식 - 단일 HTML 파일 하나로 만들고, 데이터를 파일 안에 포함해 인터넷 없이도 열리게. - 외부 라이브러리 없이 순수 HTML/CSS/JS로, 차트도 직접 그려 깔끔한 블루 톤으로. # 보여줄 지표(다양하게) - 상단 KPI 카드: 총 매출액, 총 판매량, 거래 건수, 평균 할인율, 평균 객단가, 베스트셀러 분야 - 월별 매출 추이(라인/영역), 유통채널별 매출 비중(도넛), 영업담당부서·판매지역·분야별 매출(막대) - 도서별 매출 상위 10 표, 필터 결과 원본 데이터 표 # 상단 필터 - 화면 상단에 필터 바: 기간(시작일·종료일), 유통채널, 판매지역, 영업담당부서, 분야 - 필터를 바꾸면 KPI·차트·표가 모두 즉시 다시 계산되게. '필터 초기화' 버튼도 추가. # 엑셀 데이터 로딩 버튼 - 우측 상단에 '엑셀 데이터 불러오기' 버튼 — .xlsx/.csv를 올리면 브라우저 안에서 직접 파싱해(서버 전송 없이) 같은 형식이면 대시보드가 그 데이터로 갱신되게. - 컬럼명이 조금 달라도(금액·매출, 판매지역·지역) 알아서 인식하게.

위 프롬프트로 만들어진 완성본입니다. KPI 6종 · 차트 5종 · 상단 필터 5개 · 엑셀 업로드 버튼이 한 HTML 파일에 들어 있고, 데이터가 포함돼 더블클릭만으로 열립니다.

▲ 완성된 도서판매 현황 대시보드 — 상단 '엑셀 데이터 불러오기' 버튼 · 5개 상단 필터 · KPI 6종 · 채널 도넛/부서·지역 막대. 아래 링크로 실제 파일을 열어 보세요.

대시보드 = 시각화의 종착점. 표·차트가 한 화면에 모이고, 필터로 조작하고, 새 엑셀로 갱신됩니다. PPT로는 불가능한 이 인터랙션이 HTML 시각화의 가장 큰 차별점입니다. 만드는 전체 과정은 8xx 바이브코딩 과정에서 더 깊게 다룹니다.
실습

내 데이터로 시각화 한 바퀴

학습 안내산출. 본인 업무 데이터(엑셀) 하나로 차트 → HTML 시각화 → 발표본까지 한 흐름을 돌립니다. 완료 기준: ① 파이썬 차트 1장 ② HTML 표·차트 1세트 ③ 발표본 HTML 1개가 만들어지면 통과.

달성 목표
내 엑셀 데이터로 ① Code Interpreter 차트 → ② AI 가독성 자문 반영 → ③ HTML 표·차트 → ④ 색상 팔레트 지정 → ⑤ 발표본 HTML까지, 재사용 가능한 시각화 자산 한 세트를 만든다.

실습 순서

  1. 본인 업무 엑셀을 GPT에 첨부하고, 핵심을 보여주는 복잡한 그래프(박스플롯·히트맵·회귀 등) 2~3개를 Code Interpreter로 그린다. (한글 폰트 적용)
  2. "이 자료에서 가독성을 높일 부분"을 AI에게 자문받고, 그 원칙을 반영해 HTML 표·차트로 다시 만든다.
  3. colorhunt.co에서 팔레트 HEX를 복사해 디자인 가이드로 넣는다.
  4. 보고서 md를 첨부하고 슬라이드 프롬프트 + 팔레트로 발표본 HTML을 생성한다.
  5. (선택) 기존 발표본을 퓨샷으로 붙여 디자인을 통일하거나, 엑셀 데이터로 HTML 대시보드를 만든다.
품질 체크. HTML 결과물은 ① 인터넷을 끄고도 열리는지(단일 파일·데이터 내장) ② 강조색이 1~2개로 통일됐는지 ③ 값 라벨이 직접 표기됐는지 3가지를 확인하십시오. 라이브러리 로딩이 필요하면 "외부 라이브러리 없이 순수 HTML/CSS/JS로"를 다시 지시합니다.
실습

부록 · 더 해보기

학습 안내선택. 미션 1은 나만의 색상 팔레트를 표준으로 굳히는 것, 미션 2는 HTML 발표본을 PPTX로 내보내 회사 양식에 얹는 것까지가 완료입니다.

MISSION 1우리 팀 디자인 가이드 만들기

colorhunt.co에서 회사 톤에 맞는 팔레트를 골라 배경·보조·강조·본문 4색을 정하고, 글꼴·여백·강조 규칙을 1페이지 디자인 가이드 프롬프트로 만들어 보십시오. 이후 모든 시각화 요청 앞에 붙이면 결과물의 디자인이 통일됩니다.

MISSION 2HTML 발표본 → PPTX 변환

완성한 발표본 HTML을 첨부하고 "이 HTML을 python-pptx로 편집 가능한 PPTX로 변환해줘"라고 요청해 보십시오. 각 슬라이드가 한 장씩 옮겨지면 성공입니다. 이후 파워포인트에서 회사 마스터 슬라이드를 적용하면 마감까지 끝납니다.

과정 정리
  • 자료 시각화에 HTML을 쓰는 이유와 장점(정확한 재편집·무료·반응형·경량·인터랙션)을 설명할 수 있다
  • 엑셀 데이터를 AI의 Python으로 복잡한 그래프(박스플롯·히트맵·회귀)로 그릴 수 있다
  • AI에게 가독성 개선점을 자문받아 표·차트를 HTML로 다시 만들 수 있다
  • 색상 팔레트·메타 프롬프팅·퓨샷으로 발표본 HTML의 디자인을 통제할 수 있다
  • 엑셀 데이터로 필터·업로드가 되는 HTML 대시보드를 만들 수 있다