엑셀 표 붙여넣으면 그래프
"한눈에 보이게 그림으로 보여줄래요?" 표는 이미 엑셀에 있어요. 복사해서 붙여넣기만 하면 그래프가 나오는 페이지예요. 붙여넣은 숫자는 이 브라우저 밖으로 나가지 않아요.
바로 쓰기: 붙여넣으면 그래프
컴퓨터가 받은 글자 그대로 보기 (탭 ⇥, 줄바꿈 ↵)
1AI에게 세 줄로 요청하기
HTML 파일 하나로, 엑셀에서 복사한 표를 붙여넣으면 막대 그래프를 그려주는 페이지를 만들어줘. 첫 줄은 제목이고, 첫 열은 이름, 둘째 열은 숫자야. 인터넷 연결이나 설치, 외부 부품 없이 파일 하나로 동작하게 해줘.
마지막 줄의 "외부 부품 없이"를 꼭 넣으세요. 이유는 아래 "두 가지 길"에 있어요. 원 그래프도, 열 고르기도, 숫자 읽는 요령도 일부러 뺐어요.
2연습장에서 실행하기
받은 코드를 붙여넣고 실행한 뒤, 위 도구의 연습용 표(일부러 지저분하게 만든 표)를 복사해 실행 화면에 붙여넣어 보세요. 자동 검사는 쉼표가 있는 표와 없는 표, 빈 칸과 0을 번갈아 넣어 보며 그래프가 똑같이 나오는지 비교해요.
3미션: 보고서에 바로 쓸 물건으로
- 기본: 붙여넣으면 그래프가 나온다
표를 붙여넣으면 막대가 그려져야 해요.
- 엑셀의 숫자는 '글자'로 온다 ⭐
1월 막대가 너무 짧진 않나요? 4월(빈 칸)은 0으로 그려졌나요? 이상하면 "1월 매출이 이상하게 나와"처럼 증상 그대로 말하고 원인부터 물어보세요. 힌트: "쉼표와 % 기호를 없애고 숫자로 읽어줘", "빈 칸은 건너뛰고 몇 개 건너뛰었는지 알려줘"처럼 규칙을 정해 주세요.
- 막대 ↔ 원
비율을 보고 싶을 땐 원 그래프. 힌트: 원에는 음수를 그릴 수 없어요. -150은 어떻게 할지 정해 주세요.
- 제일 큰 막대에만 색, 막대 위에는 숫자
가장 큰 막대만 주황으로, 모든 막대 위에 값을. 힌트: 가장 큰 값이 둘이면 어떻게 할지도 한 줄 정하세요. (그림으로 그려지는 부분이라 직접 확인해 주세요)
- 열이 여러 개일 때 고르기
매출과 달성률 중 어느 열을 그릴지 고르는 칸. 그래프 제목에는 고른 열의 이름이 나오게.
- 자유
PNG로 저장, 큰 값부터 정렬, 평균선, 닫아도 표가 남게…
안 될 때 확인할 것
| 증상 | 원인과 해결 |
|---|---|
| 붙여넣었는데 막대가 하나도 안 나온다 | 표가 한 줄 글자로 붙었거나 첫 줄·첫 열 약속이 달라요. 칸이 탭으로 나뉘었는지 위 "받은 글자 그대로 보기"로 확인하고 표 모양을 AI에게 설명하기 |
| 1월 막대만 이상하게 짧다 | "1,200"을 쉼표 앞의 1까지만 읽었어요. "쉼표를 없애고 숫자로 읽어줘" |
| 빈 칸이 0으로 그려진다 | "빈 칸은 건너뛰고 알려줘" |
| 그래프 자리가 텅 비어 있다 (인터넷이 느리거나 끊겼을 때만) | AI가 외부 부품을 쓴 코드를 줬어요. "외부 부품 없이 직접 그려줘" |
| 미션을 했더니 원래 기능이 사라졌다 | "기존 기능은 그대로 두고, 전체 코드를 처음부터 끝까지 줘" |
그래프를 그리는 두 가지 길
| 직접 그리기 (오늘의 방법) | 부품 빌리기 (Chart.js 등) | |
|---|---|---|
| 인터넷 | 없어도 돼요 | 필요해요 (부품을 인터넷 주소에서 내려받아요) |
| 장점 | 어디서나 열려요 | 코드가 짧고 화려한 그래프가 쉬워요 |
| 단점 | 복잡한 그래프는 코드가 길어져요 | 인터넷이 없거나 외부 주소를 막아 둔 회사에선 안 나올 수 있어요 |
내 코드가 부품을 빌리는지 보려면 코드 위쪽에서 <script src="https://로 시작하는 줄을 찾아보세요. 더 쉬운 방법은 와이파이를 끄고 파일을 열어 보는 것. 모르는 주소가 보이면 AI에게 "이 주소는 뭘 가져오는 거야?"라고 물어보세요.
알쓸신잡: 엑셀에서 복사하면 컴퓨터에 뭐가 들어갈까?
눈에는 표지만 컴퓨터에는 글자로 들어가요. 칸 사이는 탭, 줄 사이는 줄바꿈, 숫자 서식은 1,200, 85% 같은 글자 그대로, 빈 칸은 탭 두 개가 연달아 와요. 이렇게 탭으로 나눈 글을 TSV, 쉼표로 나눈 글을 CSV라고 해요. 위 도구의 "받은 글자 그대로 보기"를 열면 직접 확인할 수 있어요.
같은 글자, 다른 숫자 · 자바스크립트로 "1,200"을 숫자로 바꾸면
| 바꾸는 방법 | 결과 | 뜻 |
|---|---|---|
Number("1,200") | 숫자가 아님 (NaN) | |
parseFloat("1,200") | 쉼표에서 멈춰서 1. 오류도 없이 조용히 틀려요 | |
Number("") | 빈 칸이 0이 돼요 | |
쉼표를 지우고 Number("1200") | 맞게 읽음 |
이 표의 결과는 지금 이 브라우저가 실제로 계산한 값이에요.
블로그에서 자세히 보기: 극초보 바이브코딩 #8 원문
이전·다음 실습: #7 글 읽어 주는 페이지 · #9 회식비 N빵 정산기
자주 묻는 질문
회사 숫자를 붙여넣어도 되나요?
이 페이지는 붙여넣은 표를 브라우저 안에서만 그려요. 서버로 보내지 않아요. 직접 만든 코드라면 https:// 주소가 무엇을 하는지 확인해 보세요.
구글 스프레드시트에서 복사해도 되나요?
대부분 같은 모양(탭과 줄바꿈)으로 붙어요. 모양이 다르면 "받은 글자 그대로 보기"로 확인해 보세요.