엑셀로 하던 일을 웹 화면으로 바꾸려면, 엑셀을 고치기 전에 화면에서 무엇을 한눈에 보고 싶은지부터 정해야 해요. 엑셀은 지금처럼 그대로 쓰고, 그 엑셀을 읽어 화면을 만드는 방식으로 시작하면 서버나 DB 없이도 하루 실습으로 첫 화면이 나와요. 순서는 보고 싶은 것 정하기, 계획 문서 쓰기, 화면 만들기, 원본 엑셀과 숫자 맞추기예요.
공공기관 차량 담당 직원들과 엑셀을 화면으로 바꿔 본 경험
2026년 10월에 한 공공기관에서 관용차(업무용 차량)를 관리하는 직원 3명과 세 번 수업했어요. 10월 7일, 13일, 20일에 오전 10시부터 오후 4시 30분까지였어요. 직원들이 Claude Code로 차량 관리 화면을 직접 만드는 수업이었어요.
미리 받은 자료는 엑셀 두 개와 종이 서류였어요. 엑셀 하나에는 차량 6대의 정보가, 다른 하나에는 감사 때 낸 유류비 374건(35개월치)과 수리 기록 98줄이 들어 있었어요. 자동차 검사 기한은 엑셀에 없었어요. 우편으로 온 검사 안내문과 종이 결과서에만 있었어요.
첫 수업에서 직원분이 "검사 날짜는 따로 관리하지 않고 기억에 의존해요. 놓칠 때도 있어요"라고 했어요. 검사 기한을 놓치면 과태료가 붙어요. 그래서 이 글에서는 엑셀을 화면으로 바꿀 때 무엇부터 하면 되는지, 이 수업에서 실제로 한 순서대로 정리했어요.
엑셀을 고치기 전에 무엇을 정해야 하나요?
화면을 열었을 때 맨 먼저 보여야 하는 것 하나를 정해야 해요. 엑셀에 있는 칸을 전부 화면에 옮기면, 엑셀을 그대로 웹에 띄운 것과 다를 게 없어요.
이 수업에서는 직원분들 말에서 답이 나왔어요. 검사 날짜를 놓칠까 걱정하니까, 화면 맨 위에 기한이 가장 급한 재검사와 남은 날짜를 띄우기로 했어요. 그 아래 차량 목록에는 검사 기한을 색으로 표시했어요.
| 검사 기한 | 화면 표시 |
|---|---|
| 이미 지남 | 빨강 |
| 30일 안으로 남음 | 주황 |
| 날짜를 모름 | 회색 |
그림 1. 엑셀 일을 웹 화면으로 바꾸는 네 단계
또 하나 정한 것은 보는 화면부터 만들고, 입력을 줄이는 일은 그다음에 한다는 순서예요. 직원분들은 종이 영수증을 엑셀에 옮기는 일도 줄이고 싶어 했어요. 하지만 입력 방식을 먼저 바꾸면 첫날에 눈에 보이는 결과가 나오지 않아요.
시작 전에 지금 그 일에 시간이 얼마나 드는지도 적어 두게 했어요. 나중에 "화면을 만들고 나서 무엇이 줄었나"를 말하려면 비교할 숫자가 있어야 하기 때문이에요.
엑셀은 그대로 두고 화면만 새로 만들 수 있나요?
만들 수 있어요. 엑셀을 읽어서 화면용 숫자 파일을 만들고, 화면은 그 파일만 보게 하면 돼요. 직원들은 지금처럼 엑셀에 입력하고, 화면은 엑셀이 바뀔 때마다 다시 만들어요.
이 수업에서 만든 구조는 네 부분이에요.
그림 2. 엑셀은 그대로 두고 화면만 새로 만드는 구조
- 엑셀 파일: 직원들이 지금처럼 입력해요.
- 읽는 프로그램: 엑셀에서 필요한 칸만 골라 숫자를 계산해요. Claude Code가 만들었어요.
- 숫자 파일(
data.js): 계산한 숫자만 담은 파일이에요. - 웹 화면(
index.html): 숫자 파일을 읽어 표와 색 표시로 보여 줘요.
엑셀을 바꾼 뒤에는 Claude Code에 "엑셀 바꿨으니까 화면 숫자 다시 만들어줘"라고 한 마디만 하면 돼요. 명령어는 Claude Code가 알아서 쳐요.
이 구조를 고른 이유는 기관의 보안 지침 때문이기도 해요. 직원분이 바깥 클라우드 서비스에는 업무 자료를 올릴 수 없다고 했어요. 그래서 3회차에는 처음 계획한 바깥 DB 대신 PC 안에 저장하는 방식으로 바꿨어요. 화면과 숫자 파일이 모두 PC 안에 있으니 인터넷에 올라가는 자료가 없어요.
Claude Code에게 처음 무엇이라고 말하나요?
"바로 만들지 말고 계획부터 적어 달라"고 말해요. 수업 전에 제가 같은 자료로 미리 해 볼 때 친 첫 문장은 이거예요.
바로 만들지 말고 계획부터 PLAN.md에 적어줘. 아직 만들지는 마.
Claude Code에는 계획 모드가 있어요. 파일을 고치지 않고 무엇을 어떤 순서로 만들지 계획부터 세우는 상태예요. 이 상태에서 위 문장을 치면, Claude가 정해야 할 것을 질문 카드 세 장으로 물어봐요. 저는 추천 보기를 고르지 않고 직접 적었어요.
HTML 한 장 + data.js 방식으로 해줘
화면 파일 하나와, 엑셀 숫자만 담은 data.js 파일 하나로 나눠 만들라는 뜻이에요.
계획이 정해지면 파일 세 개가 생겨요.
| 파일 | 담는 것 |
|---|---|
| PLAN.md | 무엇을 만들고, 몇 회차에 나눠 만들지 |
| spec.md | 화면에 나올 것과 규칙 (검사 기한 30일 안이면 주황 같은 것) |
| tasks.json | 만드는 순서를 단계별로 나눈 목록 |
제가 미리 해 볼 때 단계는 22개가 나왔어요. 여기에 "다 됐다"의 기준 세 줄을 더해 23단계가 됐어요. 그다음 "1회차 것만 순서대로 해줘. 내 차례 오면 멈춰"라고 시켰어요.
걸린 시간은 계획에 5분쯤, 화면 시안 세 개를 받아 고르는 데 8분쯤, 1회차 분량을 만드는 데 13분쯤이었어요. 수업 중에는 직원마다 속도가 달라서, 이 시간보다 길게 잡는 게 맞아요.
화면 숫자가 원본 엑셀과 맞는지 어떻게 확인하나요?
화면이 다 나오면 "원본 엑셀이랑 맞는지 다시 확인해줘"라고 시켜요. 화면이 그럴듯해 보여도 합계가 틀릴 수 있어요. 사람이 하나하나 더해 보기는 어려우니 Claude Code에게 원본과 맞춰 보게 해요.
그림 3. 화면 숫자를 원본 엑셀과 줄마다 맞춰 보기
미리 해 볼 때 유류비 합계는 원본 30,695,953원에 추가분 352,070원을 더한 31,048,023원으로, 1원도 다르지 않게 나왔어요. 그런데 확인하는 중에 다른 문제가 보였어요. 엑셀의 한 줄이 56리터에 406,480원이었어요. 리터당 7,259원이라 기름값으로는 말이 안 되는 숫자예요. 원본 엑셀에 있던 입력 실수였어요.
여기서 배운 것이 있어요. 화면이 엑셀과 맞는다고 해서 엑셀이 맞는 것은 아니에요. 그래서 리터당 1,000-2,500원을 벗어나는 줄은 화면에 "확인 필요"로 표시하게 했어요.
Claude가 시키지 않았는데 스스로 정한 것도 찾아야 해요. 정비 견적서는 아직 돈이 나가지 않은 것이라 Claude가 합계에서 뺐어요. 맞는 판단이었지만, 이런 결정은 직원이 보고 맞는지 정해야 해요. 그래서 수업 자료에 "시키지 않았는데 Claude가 정한 것이라, 맞는지는 여러분이 정합니다"라고 따로 적어 두었어요.
화면을 만든 뒤에는 무엇을 더 붙이나요?
보는 화면이 다 되면, 그다음은 입력을 줄이는 일이에요. 이 수업에서는 2회차부터 종이 영수증 입력을 줄였어요.
직원분이 "전기차는 충전 사이트에서 엑셀로 한꺼번에 받는데, 경유차는 종이 영수증이라 전기차처럼 바꾸고 싶었다"고 했어요. 그래서 2회차에는 휴대폰으로 영수증 사진을 올리고, Claude Code에 "영수증 넣어줘"라고 하면 유류비 기록에 한 줄이 들어가게 만들었어요. 같은 영수증이 두 번 들어가지 않게 막는 것도 넣었어요.
"영수증 넣어줘"는 skill로 만들었어요. skill은 Claude Code에 일하는 순서를 적어 둔 파일이에요. 한 번 만들어 두면 같은 말로 같은 순서를 반복해요. 미리 해 볼 때 영수증 한 장에 1분쯤 걸렸어요.
3회차에는 GitHub으로 같이 고치는 법을 했어요. GitHub은 여러 사람이 같은 코드를 나눠 고치고 기록을 남기는 곳이에요. 수업이 끝난 뒤 10월 27일에 직원분들이 고친 것 11건을 올렸고, 다음 날 모두 합쳤어요. 지금은 휴대폰으로 찍은 영수증을 Claude가 읽어 유류비로 넣는 단계까지 시험하고 있어요.
| 회차 | 한 일 |
|---|---|
| 1회차 | 계획 문서, 차량 관리 화면, 원본 엑셀과 숫자 맞추기 |
| 2회차 | 휴대폰 영수증 올리기, "영수증 넣어줘" skill, 같은 영수증 막기 |
| 3회차 | PC 안에 저장하는 방식으로 바꾸기, GitHub으로 같이 고치기 |
자주 묻는 질문
엑셀 파일 모양이 제각각이어도 화면으로 만들 수 있나요?
만들 수 있어요. 이 수업의 자료도 엑셀 파일 두 개에 나뉘어 있었고, 감사자료 엑셀은 보유 현황·수리·유류·하이패스 시트가 따로였어요. 읽는 프로그램이 시트마다 필요한 칸을 골라 숫자 파일로 모아요. 다만 엑셀 칸 이름을 바꾸면 Claude Code에 "엑셀 칸이 바뀌었어"라고 알려 줘야 해요.
회사 보안 때문에 클라우드를 못 쓰면 어떻게 하나요?
PC 안에서만 돌아가게 만들면 돼요. 화면 파일과 숫자 파일이 모두 PC에 있으면 자료가 인터넷에 올라가지 않아요. 이 수업도 기관 보안 지침에 맞춰 바깥 DB 대신 PC 안에 저장하는 방식을 썼어요. Claude Code를 설치할 때 필요한 주소 몇 개는 전산 담당자에게 미리 열어 달라고 해야 해요.
엑셀은 계속 써야 하나요?
처음에는 엑셀을 그대로 쓰는 게 좋아요. 직원들이 익숙한 방식을 바꾸지 않아도 첫날부터 화면을 볼 수 있어요. 입력까지 화면으로 옮기는 일은 화면을 몇 주 써 보고, 무엇이 불편한지 알게 된 뒤에 해도 늦지 않아요.
개발을 모르는 직원도 따라 할 수 있나요?
따라 할 수 있어요. 코드는 Claude Code가 쓰고, 사람은 하고 싶은 일을 말로 시켜요. 처음에는 Claude Code가 파일을 고칠 때마다 허락을 묻는 창이 자주 떠요. 제가 미리 해 볼 때는 자동으로 허락하는 모드로 바꾼 뒤로 1회차 분량이 끝날 때까지 한 번도 뜨지 않았어요.
마무리
엑셀 일을 웹 화면으로 바꿀 때는 엑셀부터 고치지 않아도 돼요. 화면에서 무엇을 먼저 볼지 정하고, 계획 문서를 쓰고, 화면을 만든 뒤 원본 엑셀과 숫자를 맞춰 보면 돼요. 입력을 줄이는 일은 그다음이에요.
개발을 모르는 사람이 Claude Code로 무엇까지 만들 수 있는지는 개발을 모르는 사람도 Claude Code로 업무 도구를 만들 수 있을까요?에 정리해 두었어요. 우리 회사 엑셀 일도 화면으로 바꿀 수 있을지 궁금하시면 문의를 남겨 주세요.
Artetlab | Kyra