왜 AI와 HTML로 분석하는가
1. 왜 AI와 HTML로 분석하는가
여기서부터는 오프라인 집중캠프 교안입니다. 제주대학교 실습실에 모여 7시간 동안 진행하고, 목표는 하나, 참여자 1인당 HTML 대시보드 파일 1개를 완성해 돌아가는 것입니다. 온라인 과정(2장부터 8장)을 듣고 온 분도, 오늘 처음 오신 분도 이 교안만으로 따라올 수 있게 짜여 있습니다. 온라인을 들은 분에게는 1교시가 복습이고, 처음이라면 1교시에서 도구와 기본기를 익힌 뒤 2교시부터 같은 출발선에 섭니다.
매달 매출이나 실적 자료를 정리해 보고하는 분이라면 이런 장면이 익숙할 것입니다. 엑셀에서 표를 만들고, 차트를 끼워 넣고, 그 차트를 캡처해 보고서에 붙입니다. 다음 달이 되면 처음부터 다시 합니다. 오늘은 이 일을 두 가지로 바꿉니다. 계산과 차트 그리기는 AI에게 시키고, 결과물은 파일 하나로 열리는 대시보드로 만듭니다. 여기서는 그 이유를 20분 동안 이야기합니다.
1.1 하루 일정
먼저 오늘 하루의 흐름입니다. 세 교시로 나뉘고, 뒤로 갈수록 손으로 하는 시간이 길어집니다.
| 교시 | 시간 | 절 | 주제 |
|---|---|---|---|
| 1교시 기초 다지기 | 0:00~0:20 | 9장 1절 | 왜 AI와 HTML로 분석하는가 |
| 0:20~1:00 | 9장 2절 | 도구 준비와 첫 실습 | |
| 1:00~1:25 | 9장 3절 | HTML 파일 하나가 곧 대시보드 | |
| 1:25~1:45 | 9장 4절 | 숫자를 읽는 기초 통계 | |
| 1:45~2:00 | 9장 5절 | AI에게 제대로 물어보기 | |
| 2교시 제주 데이터 분석 | 2:00~3:00 | 10장 1절 | 입도객 데이터 분석 |
| 3:00~4:00 | 10장 2절 | 상권 데이터 분석 | |
| 3교시 예측 대시보드 만들기 | 4:00~4:20 | 11장 1절 | 오늘의 지도, KDD 5단계로 다시 보기 |
| 4:20~4:55 | 11장 2절 | 데이터 고르고 다듬기 | |
| 5:05~5:30 | 11장 3절 | 이동평균선과 계절성 | |
| 5:30~6:00 | 11장 4절 | 예측 검증과 백테스트 | |
| 6:00~7:00 | 11장 5절 | 대시보드 설계와 만들기, 3분 발표 |
교시 사이에는 10분씩 쉬고, 3교시 중간(4:55~5:05)에도 한 번 쉽니다. 1교시의 절반인 도구 준비와 첫 실습이 오늘 전체의 발판이고, 3교시에는 제주 AI 관광데이터허브의 실제 입도객과 국내외 사건 연표를 ChatGPT·Claude·Gemini에 첨부해 프롬프트만으로 예측하고 백테스트로 채점한 뒤, 예측 대시보드 HTML 파일 하나로 완성합니다. 1교시와 2교시에서 만든 차트와 지도를 저장해 두면 3교시 대시보드에 합칠 수 있습니다.
1.2 엑셀 표로만 보던 숫자의 한계
엑셀과 BI 도구가 나쁜 것은 아닙니다. 다만 세 가지 지점에서 벽에 부딪힙니다.
- 공유: 엑셀 파일은 받는 사람이 열어서 시트를 뒤져야 하고, 버전에 따라 차트 모양이 깨집니다. BI 도구는 계정과 권한이 있어야 보이고, 회사 밖 사람에게는 보여주기 어렵습니다.
- 재현: 이번 달 차트를 만든 방법을 다음 달에 똑같이 반복하기가 생각보다 어렵습니다. 어떤 셀을 어떻게 가공했는지 만든 사람만 압니다.
- 비용: 태블로나 파워 BI 같은 도구는 사용자당 구독료가 붙습니다. 30명 회사가 모두 쓰기에는 부담스럽고, 그래서 한두 명만 다루는 도구로 남습니다.
이 세 가지를 한 번에 피하는 방법이 있습니다. 결과물을 HTML 파일 하나로 만드는 것입니다.
1.3 파일 하나로 끝나는 결과물
HTML은 웹페이지를 만드는 문서 형식입니다. 별도 프로그램 없이 어떤 컴퓨터, 어떤 스마트폰의 브라우저에서도 열립니다. 대시보드를 HTML 파일 하나로 만들어 두면 이렇게 됩니다.
| 구분 | 엑셀 차트 | HTML 대시보드 |
|---|---|---|
| 여는 방법 | 엑셀 설치 필요 | 브라우저에서 더블클릭 |
| 공유 | 파일 첨부, 버전 따라 깨짐 | 파일 하나 보내면 끝, 어디서나 같은 모양 |
| 상호작용 | 정적인 그림 | 마우스를 올리면 값이 보이고, 연도를 고르면 차트가 바뀜 |
| 지도 | 어려움 | 위도와 경도만 있으면 지도 위에 점을 찍음 |
| 비용 | 라이선스 | 없음 |
| 다음 달 갱신 | 처음부터 다시 | 데이터 부분만 바꾸면 됨 |
오늘 완성할 파일을 미리 열어 보겠습니다. 아래 버튼으로 실습 데이터를 내려받아 압축을 풀고, dashboard-example.html을 더블클릭하세요. 이 압축 파일은 오늘 내내 쓰니 바탕화면처럼 찾기 쉬운 곳에 풀어 둡니다.
상단에 총매출, 주문 수, 객단가, 재구매율 카드 네 개가 있고, 그 아래 연도를 고를 수 있는 입도객 추이 선그래프, 월별 매출과 카테고리별 매출 차트, 그리고 제주 지도 위에 업종별로 색이 다른 상가 점들이 찍혀 있습니다. 점을 클릭하면 상호와 업종이 뜹니다. 이 파일의 크기는 60KB 남짓이고, 안에 데이터까지 모두 들어 있어 인터넷만 되면 어디서든 똑같이 열립니다.
실습 데이터 폴더의 jeju_visitors.csv와 jeju_stores.csv는 위니브가 실습용으로 만든 가상 데이터입니다. 실제 제주 통계가 아니므로 수치를 외부에 인용하면 안 됩니다. 실제 데이터를 받는 곳은 10장 1절과 10장 2절에 적어 두었으며, 열 이름만 맞추면 오늘 만든 대시보드에 그대로 넣을 수 있습니다.
1.4 비개발자가 이것을 만들 수 있는 이유
"HTML이라니, 결국 코딩 아닌가요?"라는 질문이 나올 때입니다. 맞습니다. 대시보드 파일 안에는 HTML과 자바스크립트 코드가 들어 있습니다. 하지만 오늘 여러분은 그 코드를 한 줄도 직접 쓰지 않습니다. 원하는 것을 우리말로 설명하면 AI가 코드를 대신 쓰고, 여러분은 결과를 보고 맞는지 확인하고 마음에 안 드는 부분을 말로 고칩니다. 이렇게 코드 대신 말로 시키는 분석을 이 과정에서는 바이브 데이터 분석이라고 부릅니다.
오늘 쓰는 AI는 둘입니다. 역할이 다릅니다.
| 도구 | 어디서 | 역할 | 오늘 하는 일 |
|---|---|---|---|
| Gemini | Google Colab 노트북 안 | 탐색과 계산 | CSV를 읽고, 월별 합계나 증감률을 계산하고, 빠르게 그래프를 그려 봄 |
| Claude | claude.ai 웹 | 산출물 제작 | 계산 결과를 받아 차트, 지도, 대시보드 HTML 파일을 만들어 줌 |
이 강의에서는 탐색은 Gemini, 산출은 Claude로 나눠 연습합니다
오늘 하루 이 한 문장대로 움직입니다. Colab이 무엇인지, Gemini를 어디서 켜는지는 9장 2절에서 손으로 해 봅니다.
1.5 분석의 순서, KDD
AI가 코드를 대신 써 줘도 분석의 순서는 바뀌지 않습니다. 데이터 분석 분야에서 오래 써 온 표준 절차가 KDD(Knowledge Discovery in Databases, 데이터에서 지식을 찾아내는 과정)입니다. 오늘 하루의 실습도 모두 이 순서를 따릅니다.
| 단계 | 하는 일 | 오늘 실습에서는 |
|---|---|---|
| 1. 데이터셋 선택 | 목표를 정하고 그에 맞는 데이터를 고릅니다. | 입도객, 상권, 매출 세 데이터 중 "무엇을 알고 싶은가"에 맞는 것을 고릅니다. |
| 2. 데이터 전처리 | 빈 칸, 이상한 값, 중복을 찾아 걸러 냅니다. | Gemini에게 행 수와 빈 칸부터 묻고, 합계가 맞는지 검산합니다. |
| 3. 데이터 변환 | 목적에 맞게 열을 새로 만들거나 고칩니다. | 날짜에서 월을 뽑고, 전년 동월 대비 증감률 열을 만듭니다. |
| 4. 데이터 마이닝 | 기법을 골라 패턴을 찾습니다. | 계절성, 업종 밀집, 품목별 비중, 간단한 예측을 봅니다. |
| 5. 결과 평가 | 패턴이 목표에 맞는지 해석하고 업무에 씁니다. | 대시보드 아래에 "숫자, 의미, 액션" 한 줄을 쓰고 3분 발표를 합니다. |
2~4단계의 계산은 AI가 대신하지만, 1단계에서 무엇을 알고 싶은지 정하는 일과 5단계에서 그 결과가 맞는지, 그래서 무엇을 할지 판단하는 일은 사람이 합니다. 그리고 실제 분석은 한 방향으로만 흐르지 않습니다. 지도를 그렸더니 바다 위에 점이 찍혀 있으면 2단계로 돌아가고, 발표를 준비하다 질문이 바뀌면 1단계로 돌아갑니다.
1.6 오늘 계속 쓸 두 가지 습관
AI가 코드를 대신 쓰면 사람의 일은 두 가지로 줄어듭니다. 오늘 모든 실습에서 이 둘을 반복합니다.
- 좋은 질문 던지기: "분석해줘"가 아니라 이 데이터가 무엇인지(맥락), 무엇을 알고 싶은지(목표), 어떤 모양으로 받을지(형식)를 함께 말합니다. 9장 5절에서 공식으로 정리합니다.
- AI의 답 검산하기: AI는 그럴듯하지만 틀린 답을 자신 있게 내놓습니다. 숫자가 상식적인 규모인지, 내가 원한 기준으로 계산했는지, 다른 방법으로 구해도 같은지 세 가지를 묻습니다. 역시 9장 5절에서 다룹니다.
온라인 과정을 들은 분에게는 익숙한 이야기입니다. 처음이라면 이 두 문장만 마음에 두고 넘어가면 됩니다. 오늘의 발표 주제인 「내 차트가 하는 말」도 결국 좋은 질문에서 시작해 검산을 거친 숫자에 의미와 제안을 붙이는 일입니다.
1.7 직접 해보기
dashboard-example.html을 브라우저에서 열고, 연도 선택을 2022년으로 바꿔 입도객 선그래프가 어떻게 달라지는지 확인합니다. 지도에서 점 하나를 클릭해 팝업을 띄워 봅니다.- 이 파일을 스마트폰으로 보내 열어 봅니다. 같은 모양으로 열리는지 확인합니다.
- 내가 매달 만드는 보고서 중 차트가 들어가는 것을 하나 떠올리고, 그 차트를 이런 파일로 바꾸면 무엇이 편해질지 두 가지만 적어 봅니다. 3교시 발표 주제의 후보가 됩니다.
마지막 수정