극초보 바이브코딩 #8 · HTML 파일 하나

엑셀 표 붙여넣으면 그래프

"한눈에 보이게 그림으로 보여줄래요?" 표는 이미 엑셀에 있어요. 복사해서 붙여넣기만 하면 그래프가 나오는 페이지예요. 붙여넣은 숫자는 이 브라우저 밖으로 나가지 않아요.

바로 쓰기: 붙여넣으면 그래프

컴퓨터가 받은 글자 그대로 보기 (탭 ⇥, 줄바꿈 ↵)

1AI에게 세 줄로 요청하기

HTML 파일 하나로, 엑셀에서 복사한 표를 붙여넣으면 막대 그래프를 그려주는 페이지를 만들어줘.
첫 줄은 제목이고, 첫 열은 이름, 둘째 열은 숫자야.
인터넷 연결이나 설치, 외부 부품 없이 파일 하나로 동작하게 해줘.

마지막 줄의 "외부 부품 없이"를 꼭 넣으세요. 이유는 아래 "두 가지 길"에 있어요. 원 그래프도, 열 고르기도, 숫자 읽는 요령도 일부러 뺐어요.

2연습장에서 실행하기

받은 코드를 붙여넣고 실행한 뒤, 위 도구의 연습용 표(일부러 지저분하게 만든 표)를 복사해 실행 화면에 붙여넣어 보세요. 자동 검사는 쉼표가 있는 표와 없는 표, 빈 칸과 0을 번갈아 넣어 보며 그래프가 똑같이 나오는지 비교해요.

3미션: 보고서에 바로 쓸 물건으로

  1. 기본: 붙여넣으면 그래프가 나온다

    표를 붙여넣으면 막대가 그려져야 해요.

  2. 엑셀의 숫자는 '글자'로 온다 ⭐

    1월 막대가 너무 짧진 않나요? 4월(빈 칸)은 0으로 그려졌나요? 이상하면 "1월 매출이 이상하게 나와"처럼 증상 그대로 말하고 원인부터 물어보세요. 힌트: "쉼표와 % 기호를 없애고 숫자로 읽어줘", "빈 칸은 건너뛰고 몇 개 건너뛰었는지 알려줘"처럼 규칙을 정해 주세요.

  3. 막대 ↔ 원

    비율을 보고 싶을 땐 원 그래프. 힌트: 원에는 음수를 그릴 수 없어요. -150은 어떻게 할지 정해 주세요.

  4. 제일 큰 막대에만 색, 막대 위에는 숫자

    가장 큰 막대만 주황으로, 모든 막대 위에 값을. 힌트: 가장 큰 값이 둘이면 어떻게 할지도 한 줄 정하세요. (그림으로 그려지는 부분이라 직접 확인해 주세요)

  5. 열이 여러 개일 때 고르기

    매출과 달성률 중 어느 열을 그릴지 고르는 칸. 그래프 제목에는 고른 열의 이름이 나오게.

  6. 자유

    PNG로 저장, 큰 값부터 정렬, 평균선, 닫아도 표가 남게…

안 될 때 확인할 것

증상원인과 해결
붙여넣었는데 막대가 하나도 안 나온다표가 한 줄 글자로 붙었거나 첫 줄·첫 열 약속이 달라요. 칸이 탭으로 나뉘었는지 위 "받은 글자 그대로 보기"로 확인하고 표 모양을 AI에게 설명하기
1월 막대만 이상하게 짧다"1,200"을 쉼표 앞의 1까지만 읽었어요. "쉼표를 없애고 숫자로 읽어줘"
빈 칸이 0으로 그려진다"빈 칸은 건너뛰고 알려줘"
그래프 자리가 텅 비어 있다 (인터넷이 느리거나 끊겼을 때만)AI가 외부 부품을 쓴 코드를 줬어요. "외부 부품 없이 직접 그려줘"
미션을 했더니 원래 기능이 사라졌다"기존 기능은 그대로 두고, 전체 코드를 처음부터 끝까지 줘"

그래프를 그리는 두 가지 길

직접 그리기는 파일 하나로 인터넷 없이 되고, 부품 빌리기는 인터넷이 끊기면 그래프 자리가 비는 비교 그림
직접 그리기 (오늘의 방법)부품 빌리기 (Chart.js 등)
인터넷없어도 돼요필요해요 (부품을 인터넷 주소에서 내려받아요)
장점어디서나 열려요코드가 짧고 화려한 그래프가 쉬워요
단점복잡한 그래프는 코드가 길어져요인터넷이 없거나 외부 주소를 막아 둔 회사에선 안 나올 수 있어요

내 코드가 부품을 빌리는지 보려면 코드 위쪽에서 <script src="https://로 시작하는 줄을 찾아보세요. 더 쉬운 방법은 와이파이를 끄고 파일을 열어 보는 것. 모르는 주소가 보이면 AI에게 "이 주소는 뭘 가져오는 거야?"라고 물어보세요.

알쓸신잡: 엑셀에서 복사하면 컴퓨터에 뭐가 들어갈까?

엑셀 표를 복사하면 칸 사이는 탭, 줄 끝은 줄바꿈인 글자가 되고, 1,200은 쉼표가 붙은 글자로 온다는 그림

눈에는 표지만 컴퓨터에는 글자로 들어가요. 칸 사이는 탭, 줄 사이는 줄바꿈, 숫자 서식은 1,200, 85% 같은 글자 그대로, 빈 칸은 탭 두 개가 연달아 와요. 이렇게 탭으로 나눈 글을 TSV, 쉼표로 나눈 글을 CSV라고 해요. 위 도구의 "받은 글자 그대로 보기"를 열면 직접 확인할 수 있어요.

같은 글자, 다른 숫자 · 자바스크립트로 "1,200"을 숫자로 바꾸면

바꾸는 방법결과뜻
Number("1,200")숫자가 아님 (NaN)
parseFloat("1,200")쉼표에서 멈춰서 1. 오류도 없이 조용히 틀려요
Number("")빈 칸이 0이 돼요
쉼표를 지우고 Number("1200")맞게 읽음

이 표의 결과는 지금 이 브라우저가 실제로 계산한 값이에요.

블로그에서 자세히 보기: 극초보 바이브코딩 #8 원문

이전·다음 실습: #7 글 읽어 주는 페이지 · #9 회식비 N빵 정산기

자주 묻는 질문

회사 숫자를 붙여넣어도 되나요?

이 페이지는 붙여넣은 표를 브라우저 안에서만 그려요. 서버로 보내지 않아요. 직접 만든 코드라면 https:// 주소가 무엇을 하는지 확인해 보세요.

구글 스프레드시트에서 복사해도 되나요?

대부분 같은 모양(탭과 줄바꿈)으로 붙어요. 모양이 다르면 "받은 글자 그대로 보기"로 확인해 보세요.