HTML 파일 하나가 곧 대시보드

1. HTML 파일 하나가 곧 대시보드

9장 2절에서 Claude가 만든 첫 차트를 first_chart.html로 저장했습니다. 여기서는 그 파일이 어떻게 생겼는지 최소한만 들여다봅니다. 목적은 코드를 쓰는 것이 아닙니다. Claude가 만들어 준 파일을 열었을 때 어디가 제목이고 어디가 데이터인지 알아보고, "여기를 이렇게 고쳐줘"라고 말할 수 있을 만큼만 아는 것입니다.

1.1 메모장으로 웹페이지 만들기

HTML은 특별한 프로그램 없이 메모장으로 만들 수 있는 텍스트 파일입니다. 지금 바로 해봅니다. 메모장을 열고 아래 한 줄을 입력합니다.

<h1>안녕하세요, 제주 대시보드입니다</h1>

'다른 이름으로 저장'을 누르고 파일 이름을 hello.html로 정합니다. 이때 두 가지를 확인합니다. 파일 형식을 '모든 파일'로 바꾸어야 이름 뒤에 .txt가 몰래 붙지 않습니다. 인코딩은 UTF-8로 고릅니다. 한글이 깨지지 않게 하는 설정입니다. 저장한 파일을 더블클릭하면 브라우저가 열리면서 큰 글씨로 인사말이 보입니다.

방금 여러분은 웹페이지를 하나 만들었습니다. 오늘 만들 대시보드도 결국 이 파일이 길어진 것뿐입니다.

1.2 HTML의 뼈대, 세 부분

실제 HTML 파일은 조금 더 격식을 갖춥니다. 아래가 가장 짧은 완전한 형태입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>제주 데이터 대시보드</title>
</head>
<body>
  <div id="cards">여기에 KPI 카드</div>
  <div id="charts">여기에 차트</div>
  <div id="map">여기에 지도</div>
</body>
</html>

꺾쇠로 감싼 단어를 태그라고 부릅니다. 대부분 여는 태그와 닫는 태그가 짝을 이룹니다. 이 중 세 가지만 기억하면 됩니다.

• head: 화면에 보이지 않는 설정 자리입니다. 제목, 글자 인코딩, 그리고 뒤에서 볼 외부 도구 불러오기가 여기 들어갑니다.
• body: 화면에 실제로 보이는 모든 것이 들어가는 자리입니다.
• div: 화면을 나누는 칸입니다. 상자라고 생각하면 됩니다. 상자마다 id라는 이름표를 붙여 두면 나중에 "지도 상자를 더 크게"처럼 부를 수 있습니다.

dashboard-example.html의 body도 이 구조 그대로입니다. 상자를 위에서 아래로 쌓아 화면을 나눕니다.

대시보드는 가장 중요한 숫자를 맨 위에, 흐름과 비중을 가운데에, 자세히 볼 것을 아래에 두는 것이 원칙입니다. 보는 사람이 위에서 아래로 읽으며 요약에서 상세로 내려가게 하기 위해서입니다. HTML에서는 그 배치가 div 상자의 순서로 나타납니다. 순서를 바꾸고 싶으면 상자 순서를 바꿔 달라고 말하면 됩니다.

1.3 CDN으로 빌려 쓰는 차트와 지도

파일 하나로 차트와 지도까지 그리려면 그리기 도구가 필요합니다. 이 도구를 처음부터 만들지 않고, 인터넷에 이미 올라와 있는 것을 head에서 불러옵니다. 이런 공용 창고를 CDN이라고 부릅니다. dashboard-example.html의 head를 열어 보면 아래와 같은 줄이 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

이 방식의 장점은 파일이 가볍고 설치가 없다는 것이고, 단점은 인터넷이 있어야 열린다는 것입니다. 인터넷이 끊긴 자리에서 파일을 열면 숫자 카드는 보이지만 차트와 지도는 빈칸으로 남습니다. 발표 자리에서 당황하지 않으려면 미리 알아 두어야 할 성질입니다.

1.4 파일 안에 들어 있는 데이터

엑셀 차트는 시트의 셀을 참조하지만, 이 대시보드는 파일 바깥의 CSV를 읽지 않습니다. 데이터가 파일 안에 글자로 들어 있습니다. dashboard-example.html을 아래로 내리다 보면 이런 줄이 나옵니다.

<script>
const SALES = { labels: ["1월", "2월", "3월"], values: [9410000, 11000000, 13960000] };
</script>

대괄호 안에 값을 쉼표로 나열한 이 모양을 JSON이라고 합니다. 엑셀 표의 한 열을 한 줄로 늘어놓은 것이라고 생각하면 됩니다. CSV를 이 모양으로 바꾸는 일은 Claude가 합니다. 여러분이 CSV를 첨부하고 "이 데이터로 대시보드 HTML을 만들어줘"라고 하면, Claude가 필요한 숫자를 JSON으로 바꿔 파일 안에 넣어 줍니다. 그래서 파일 하나만 보내도 받는 사람 쪽에서 똑같이 열립니다.

다음 달 데이터로 갱신할 때도 이 자리만 바뀝니다. 새 CSV를 첨부하고 "SALES 데이터를 이 파일 기준으로 바꿔줘"라고 하면 됩니다.

1.5 예시 파일 뜯어보기

이제 10분 동안 직접 찾아봅니다. dashboard-example.html을 메모장이나 VS Code에서 엽니다. 브라우저가 아니라 편집기로 열어야 코드가 보입니다. 파일을 마우스 오른쪽 버튼으로 눌러 '연결 프로그램'에서 고르면 됩니다.

1. head 안에서 <title> 줄을 찾습니다. 큰따옴표나 꺾쇠 안의 글자만 바꿔 저장하고, 브라우저 탭 제목이 바뀌는지 새로고침해 확인합니다.
2. <h1> 줄을 찾아 우리 회사 이름으로 바꾸고 저장한 뒤 새로고침합니다.
3. const KPI 줄을 찾습니다. 총매출 숫자를 임의로 바꿔 저장하고, 카드의 숫자가 따라 바뀌는지 봅니다. 확인했으면 원래대로 되돌리거나 파일을 다시 내려받습니다.

여기까지 되면 파일의 세 자리를 구분할 수 있습니다. 설정이 있는 head, 보이는 상자가 있는 body, 그리고 숫자가 들어 있는 script입니다.

1.6 Claude가 만든 파일을 저장하는 두 방법

9장 2절에서 한 번 해 본 동작이지만, 오늘 오후 내내 반복하니 정리해 둡니다. Claude에게 HTML을 요청하면 화면 오른쪽 Artifact에 결과가 나타납니다. 이것을 내 컴퓨터에 파일로 남기는 방법은 두 가지입니다.

• 다운로드 버튼: Artifact 오른쪽 위의 다운로드 또는 내보내기 버튼을 누르면 .html 파일로 저장됩니다. 가장 간단합니다.
• 복사해서 저장: 코드 보기로 전환해 전체를 복사한 뒤 메모장에 붙여 넣고, 1.1에서 한 대로 '모든 파일', UTF-8로 dashboard.html처럼 저장합니다. 다운로드 버튼이 안 보일 때 씁니다.

저장한 파일을 더블클릭했는데 화면이 하얗거나 이상하면 아래를 순서대로 확인합니다.

버튼 위치와 이름은 Claude 화면이 바뀌면 달라질 수 있습니다. 위치가 다르면 "결과물을 파일로 내려받는 버튼"이라는 역할로 찾으면 됩니다.

1.7 직접 해보기

1. hello.html에 <h1> 줄을 하나 더 추가해 두 줄짜리 페이지로 만들고 저장해 확인합니다.
2. dashboard-example.html에서 Chart.js와 Leaflet을 불러오는 줄을 찾아, 인터넷 연결을 끊고 파일을 열면 어떻게 되는지 직접 봅니다.
3. const STORES 줄을 찾아 첫 번째 상가의 상호명, 업종, 위도, 경도가 어떤 모양으로 들어 있는지 읽어 봅니다. 이 데이터는 위니브가 만든 가상 데이터입니다.
4. 엑셀 차트를 캡처해 붙이는 방식과 HTML 파일을 보내는 방식 중, 우리 회사에서 받는 사람 입장에 더 편한 쪽은 어느 쪽인지, 그 이유를 한 줄로 적어 봅니다.