HTML 업무도구 만들기: 프로젝트 실적 검색·집계 웹툴

오늘 목표

5주차에는 Excel 데이터를 이용해 실적증명서 26장을 만드는 VBA 매크로를 만들었습니다.
이번 주에는 같은 데이터로 다른 업무를 해결합니다. 필요한 프로젝트를 찾고, 조건별 건수와 계약금액을 계산하는 HTML 웹툴을 만듭니다.

5주차와 마찬가지로 원하는 일을 단계별로 설명하고 → AI가 코드를 만들면 → 직접 실행하고 → 미리 정한 정답과 대조합니다.

AI가 코드를 만들지만, 무엇을 만들지와 제대로 되었는지는 내가 결정합니다.

• 생성형 AI 채팅과 웹툴의 역할 구분하기
• HTML 웹툴 이해하기
• 업무를 입력·처리·출력·예외로 설명하기
• AI에게 실행 가능한 HTML 파일을 단계별로 만들게 하기
• Excel 표를 웹툴에 붙여넣어 검색·집계하기
• 새 기능을 하나씩 추가하고 기존 기능이 유지되는지 확인하기
• 웹툴 결과를 Excel 결과와 대조하기
• 작동 버전을 보존하고, 실패하면 이전 버전으로 돌아가기

목표 결과물

• 단계별 작동 버전 5개
  • v0.1 — 표 읽기·입력 건수
  • v0.2 — 부서 필터
  • v0.3 — 진행상태 필터·계약금액 합계
  • v0.4 — 오류 안내·초기화
  • v1.0 — 최종버전
• 26건 최종 검증을 통과한 HTML 웹툴 1개
• 웹툴 명세·테스트표
• 웹툴 제작·수정·오류진단 프롬프트

준비물

• ChatGPT 또는 Claude

• Chrome 또는 Microsoft Edge

• 메모장 또는 사용할 수 있는 코드 편집기

• Excel

• 실습 데이터

  6주차_실습데이터.xlsx

오늘 순서

1. HTML 웹툴 이해하기
2. 코드 없이 명세와 테스트 계획 확인하기
3. v0.1 — Excel 표 읽기·입력 건수
4. v0.2 — 부서 필터
5. v0.3 — 진행상태 필터·계약금액 합계
6. v0.4 — 오류 안내·초기화
7. v1.0 — 26건 전체 데이터로 최종 검증하기

오늘 만들 도구

프로젝트 실적 검색·집계 도구

Excel 에서 복사한 프로젝트 실적표를 웹툴에 붙여넣으면 다음 작업을 수행합니다.

• 전체 데이터를 표로 표시
• 부서별 검색
• 진행상태별 검색
• 두 검색조건을 함께 적용
• 검색 결과 건수 계산
• 검색 결과 계약금액 합계 계산
• 잘못된 입력의 위치와 원인 표시
• 입력과 검색조건 초기화

HTML 웹툴의 장점

• HTML 파일 하나만 있으면 Excel을 열지 않고 브라우저에서 실행할 수 있습니다.
• 입력창·버튼·검색조건·결과표를 업무 순서에 맞게 자유롭게 배치할 수 있습니다.
• 여러 검색조건과 계산 결과를 한 화면에서 반복 사용할 수 있습니다.
• 코드를 다시 실행할 때마다 정해진 규칙을 동일하게 적용할 수 있습니다.
• 이후에는 Excel 붙여넣기 대신 공공데이터 API에서 받은 자료도 같은 화면에 표시할 수 있습니다.

핵심 개념

1. HTML이란?

HTML은 브라우저가 읽어서 화면으로 보여주는 파일 형식입니다.
파일 이름이 .html로 끝나며, 파일을 더블클릭하면 Chrome이나 Edge에서 열립니다.

이번 과정에서는 화면·모양·동작을 하나의 HTML 파일에 함께 담습니다.
이번에 만드는 파일은 인터넷에 올리는 웹사이트가 아니라 내 컴퓨터에서 여는 로컬 웹툴입니다.

2. AI는 확률적, 프로그램은 결정적

같은 질문을 AI 채팅에 여러번 하면, 맞는 답이라도 형식과 표현이 매번 조금씩 다릅니다.
반면 프로그램은 같은 입력에 항상 동일한 출력을 냅니다. 이런 특성을 결정적(deterministic)이라고 합니다.

답을 탐색하고 초안을 만들 때      → 생성형 AI 채팅
계산·검색처럼 같은 규칙을 반복할 때 → HTML 웹툴

오늘은 AI에게 매번 프로젝트 합계를 물어보는 대신, AI의 도움으로 규칙형 도구를 한 번 만들고 브라우저가 그 규칙을 반복 실행하게 합니다.
완성된 로컬 HTML은 실행할 때 AI에게 다시 묻지 않으며, 이번 교안의 조건대로 만들면 입력자료를 외부로 전송하지 않습니다.

3. 코드를 만들기 전에 AI의 이해부터 확인합니다

코드 생성을 요청하기 전에, AI가 내 요청을 제대로 이해했는지 먼저 확인합니다.
AI가 요청을 잘못 이해한 상태에서 코드를 만들면, 내가 원하지 않은 결과물로 완성될 수 있습니다.
또한, 요구사항을 다시 설명하고 코드를 여러 번 수정·테스트해야 하므로 더 많은 시간과 노력이 듭니다.

따라서 다음 순서로 진행합니다.

업무 요구 전달
→ AI가 이해한 내용과 모호한 부분 정리
→ 누락·오해 수정
→ 기능범위·완료 기준·테스트방법 확정
→ 그다음 코드 작성 요청

코드를 받기 전에, AI가 내 요청을 제대로 이해했는지 먼저 확인합니다.

4. 한 번에 완성하지 않습니다

AI에게 모든 기능을 한꺼번에 요청하면 그럴듯한 결과는 빨리 나오지만,
어느 기능이 왜 작동하는지와 어디서 문제가 생겼는지 확인하기 어렵습니다.

오늘은 4가지 중간버전을 거친 후 정식 최종본을 완성하는 형태로 개발합니다.

내가 기준을 정한다 → AI에게 기능 하나만 요청한다
→ 직접 실행한다 → 내가 정답과 비교한다
→ 통과한 파일을 저장한 뒤 다음 기능으로 간다

5. 같은 도구는 같은 AI 대화에서 이어서 만듭니다

• v0.1부터 v0.4까지 같은 대화창을 사용합니다.
• 각 단계가 통과하면 HTML 파일은 컴퓨터에 별도로 저장합니다.
• AI의 대화기록이 아니라, 컴퓨터에 저장한 마지막 정상 파일이 기준입니다.
• AI가 이전 코드를 찾지 못하면 현재 정상 HTML 전체를 다시 붙여넣습니다.

6. 코드는 일부가 아니라 전체 파일로 받습니다

초보자가 “이 부분을 72번째 줄에 넣으세요”라는 지시를 따라 수정하기는 어렵습니다.
모든 제작·수정 프롬프트의 마지막에는 아래 조건을 넣습니다.

수정된 코드 조각만 주지 말고,
실행 가능한 전체 HTML을 하나의 코드 블록으로 출력해줘.

준비 - 실습 폴더 만들기

따라하기

1. 바탕화면이나 본인 교육 폴더에 새 폴더를 만듭니다.
2. 폴더 이름을 6주차_웹툴 로 지정합니다.
3. 오늘 만드는 HTML파일을 이 폴더에 저장합니다.

6주차_웹툴/
├─ 프로젝트실적검색기_v0.1.html
...

같은 버전에서 코드를 수정할 때는 해당 파일을 덮어쓰고 다시 테스트합니다. 다음 단계로 넘어갈 때는 새 버전 이름으로 저장합니다.

실습 1 - 코드 없이 명세와 테스트계획 확인하기

바로 코드를 요청하지 않습니다.
먼저 AI가 오늘 만들 도구를 정확히 이해했는지 확인합니다.
반드시 AI의 이해가 내 의도와 일치한 것을 확인한 뒤, 코드 작성을 요청합니다.

개발순서

오늘은 아래와 같이 총 4단계에 걸쳐 개발을 진행할 예정입니다.

1단계: 표 읽기·입력 건수
2단계: 부서 필터
3단계: 진행상태 필터·계약금액 합계
4단계: 오류 안내·초기화

따라하기

1. ChatGPT 또는 Claude를 엽니다.
2. 새 대화를 시작합니다.
3. 아래 프롬프트를 처음부터 끝까지 복사합니다.
4. AI 대화창에 붙여넣고 실행합니다.

복사 프롬프트 ① — 명세와 개발순서 확인

프로젝트 실적 검색·집계 웹툴을 만들려고 한다.

아직 HTML이나 코드를 작성하지 마.

[입력 열]
- No / 프로젝트명 / 부서 / 발주처 / 계약일 / 계약금액 / 진행상태 / 담당자

[최종적으로 필요한 기능]
- Excel에서 복사한 표 붙여넣기
- 부서 필터
- 진행상태 필터
- 두 필터를 함께 적용
- 검색 결과 목록
- 검색 결과 건수
- 검색 결과 계약금액 합계
- 전체 보기와 초기화
- 잘못된 입력의 위치와 원인 표시

지금은 아래 내용만 작성해줘.

1. 이 도구의 사용자·입력·처리·출력·예외
2. 만들지 않을 기능
3. 가장 작은 단위의 4단계 개발순서와 단계별 완료 기준
4. 내가 더 정해야 하거나 모호한 부분

내가 말하지 않은 기능은 추가하지 말고,
초보자가 확인하기 쉬운 표로 정리해줘.
아직 코드는 작성하지 마.

결과 확인

AI가 말한 내용들이 내가 의도한것과 동일한지 확인합니다.
가장 작은 단위의 4단계 개발순서가 아래와 유사하게 나와야 합니다.
프롬프트에 입력하지 않았기 때문에 다르게 나올 확률이 높습니다.

1단계: 표 읽기·입력 건수
2단계: 부서 필터
3단계: 진행상태 필터·계약금액 합계
4단계: 오류 안내·초기화

기획 수정

아래 “가장 작은 단위의 4단계 개발 순서를 다음과 같이 설정해줘” 와 같은 요청을 통해,
사용자가 의도하는 방향대로 기획을 수정할 수 있습니다.

+ 내가 더 정해야 하거나 모호한 부분은 메모해놓고 각 단계를 진행하면서 해결합니다.
(실제 직접 AI를 통한 개발진행시 중요한 항목입니다. 본 교안에서는 단계별로 해결할 예정이므로 넘어갑니다.)

완료 확인

• AI가 코드를 만들기 전에 업무 구조를 먼저 정리했다.
• 입력·처리·출력·예외가 구분되었다.
• 개발순서가 내가 의도한 v0.1~v0.4의 네 단계로 정리되었다.
• 요청하지 않은 기능은 제외했다.

실습 2 - v0.1: Excel 표 읽기와 입력 건수

첫 버전은 검색이나 합계를 하지 않습니다.
Excel 표를 읽고 화면에 보여주는 것만 확인합니다.

이번 단계에서 만들 기능

1. Excel 표를 붙여넣는 큰 입력창
2. 데이터 읽기 버튼
3. 읽은 데이터를 화면 표로 표시
4. 머리글을 제외한 입력 데이터 건수 표시

아직 만들지 않는 기능

• 부서 필터
• 진행상태 필터
• 계약금액 합계
• 오류 목록
• 다운로드·저장

따라하기

1. 실습 1에서 사용한 같은 AI 대화창을 사용합니다.
2. 아래 프롬프트를 복사해 이어서 AI 에게 요청합니다.
3. AI 답변을 HTML 파일로 저장하고 실행합니다.
4. 테스트 데이터를 붙여넣고 결과를 확인합니다.

복사 프롬프트 ② — v0.1 만들기

앞에서 정리한 명세 중 1단계만 구현해줘.

[이번에 만들 기능]
- Excel 표를 붙여넣는 입력창
- “데이터 읽기” 버튼
- 읽은 데이터를 화면 표로 표시
- 머리글을 제외한 입력 데이터 건수 표시

[입력 열]
- No / 프로젝트명 / 부서 / 발주처 / 계약일 / 계약금액 / 진행상태 / 담당자

[처리 규칙]
- 탭으로 열을 구분하고 줄바꿈으로 행을 구분
- 첫 행은 머리글로 사용하고 완전히 빈 행은 제외
- 붙여넣은 내용은 HTML로 실행하지 않고 글자 그대로 표시

이번에는 부서·상태 필터, 합계, 오류 목록, 다운로드 기능을 만들지 마.

하나의 HTML 파일로 만들어 브라우저에서 바로 실행되게 해줘.
외부 연결이나 저장 기능은 사용하지 마.
화면에 “학습용 v0.1”을 표시하고,
실행 가능한 전체 HTML을 하나의 코드 블록으로 줘.

[참고] AI 답변을 HTML 파일로 저장하고 실행하기

1. AI 답변에서 코드 오른쪽 위 복사 버튼을 누릅니다.
2. 메모장을 열고 붙여넣기합니다.
3. 파일 → 다른 이름으로 저장을 누릅니다.
4. 아래처럼 설정하고 저장합니다.
   • 저장 위치: 6주차_웹툴 폴더
   • 파일 이름: 프로젝트실적검색기_v0.1.html
   • 파일 형식: 모든 파일
   • 인코딩: UTF-8
5. 저장된 프로젝트실적검색기_v0.1.html 파일을 더블클릭합니다.
6. Chrome 또는 Edge에서 화면이 열리면 완료입니다.

파일명이 프로젝트실적검색기_v0.1.html.txt가 되면 실행되지 않습니다. 메모장에서 다시 저장할 때 파일 형식: 모든 파일을 꼭 선택하세요.

테스트 데이터 붙여넣기

1. 6주차_실습데이터.xlsx의 공통 테스트 데이터 5건 시트를 엽니다.
2. 머리글을 포함한 A1:H6을 선택하고 복사합니다.
3. 브라우저에 열린 웹툴의 큰 입력창을 클릭 후 붙여넣기 합니다.
4. 데이터 읽기 버튼을 누릅니다.

v0.1 정답 확인

• 입력 데이터가 5건으로 표시된다.
• 결과 표에 머리글을 제외한 5행이 표시된다.
• 첫 프로젝트가 하천정비 A다.
• 마지막 프로젝트가 하천정비 E다.
• 담당자와 계약금액이 원본 행과 맞다.

v0.1 변형 테스트 — 고정값이 아닌지 확인

1. 입력창에서 4번과 5번 데이터 행을 삭제합니다. 머리글과 1~3번 행만 남깁니다.
2. 데이터 읽기를 다시 누릅니다.
3. 아래 결과와 비교합니다.

• 입력 데이터가 3건으로 바뀐다.
• 첫 프로젝트는 하천정비 A다.
• 마지막 프로젝트는 하천조사 C다.
• 같은 데이터를 다시 읽어도 6건으로 누적되지 않고 3건이다.

3건 테스트가 끝나면 공통 테스트 데이터 5건을 다시 붙여넣습니다.

5건 테스트와 3건 테스트를 모두 통과해야, 건수가 코드에 고정되지 않고 입력에 따라 계산된다고 판단할 수 있습니다.

실습 3 - v0.2: 부서 필터 추가

v0.1이 통과한 뒤에만 진행합니다.
이번에는 부서 필터 하나만 추가합니다.

이번 단계에서 추가할 기능

1. 데이터를 읽으면 부서 선택목록 자동 생성
2. 기본값은 전체 부서
3. 선택한 부서의 행만 결과 표에 표시
4. 입력 데이터 건수는 유지하고, 현재 검색 결과 건수를 별도로 표시

따라하기

1. v0.1을 만든 같은 AI 대화창에 이어서 진행합니다.
2. 아래 프롬프트를 복사해 실행합니다.

복사 프롬프트 ③ — v0.2 부서 필터

v0.1 테스트를 통과했어.
이제 부서 필터만 추가해줘.

- 데이터를 읽으면 부서 선택목록 자동 생성
- 기본값은 “전체 부서”
- 선택한 부서의 행만 결과 표에 표시
- 입력 데이터 건수는 그대로 유지
- 검색 결과 건수는 선택한 부서에 맞게 변경

테스트 데이터 기준:
- 전체 부서 5건
- 수자원부 3건
- 도로부 1건
- 도시계획부 1건

기존 기능은 유지하고 다른 기능은 추가하지 마.
화면에 “학습용 v0.2”를 표시하고,
실행 가능한 전체 HTML을 다시 줘.

v0.2 파일 저장

1. AI가 준 전체 HTML을 복사합니다.
2. 새 메모장에 붙여넣습니다.
3. 6주차_웹툴 폴더에 아래 이름으로 저장합니다.

프로젝트실적검색기_v0.2.html

1. v0.1 파일 위에 덮어쓰지 않습니다.
2. v0.2를 더블클릭해 브라우저에서 실행합니다.
3. 화면에 학습용 v0.2가 보이는지 확인합니다.
4. 공통 테스트 데이터 5건을 붙여넣고 데이터 읽기를 누릅니다.

v0.2 새 기능 테스트

1. 데이터를 읽은 직후 부서 선택목록에 전체 부서·수자원부·도로부·도시계획부가 보이는지 확인합니다.
2. 기본값이 전체 부서인지 확인합니다.
3. 부서를 하나씩 선택하면서 결과 표와 검색 결과 건수를 아래 표와 비교합니다.
4. 필터를 바꿔도 입력 데이터 건수는 계속 5건인지 확인합니다.
5. 마지막에 전체 부서로 돌아가 결과가 다시 5건이 되는지 확인합니다.

v0.2 회귀 테스트

새 기능만 확인하지 않습니다. v0.1 기능도 다시 확인합니다.

• 데이터 읽기 버튼이 작동한다.
• 입력 데이터 건수는 필터와 관계없이 5건으로 유지된다.
• 전체 부서에서 5행이 표시된다.
• 첫 행과 마지막 행이 원본과 같다.
• 부서 필터를 바꾸면 결과 표와 건수가 함께 바뀐다.
• 전체 부서로 돌아가면 다시 5건이 나온다.

이전 단계의 기능이 다시 깨지지 않았는지 확인하는 것을 회귀 테스트 라고 합니다.

실습 4 - v0.3: 진행상태 필터와 계약금액 합계

v0.2의 모든 테스트를 통과한 뒤 진행합니다.

이번 단계에서 추가할 기능

1. 진행상태 선택 필터
2. 부서와 진행상태 조건을 함께 적용
3. 현재 검색 결과의 계약금액 합계
4. 금액을 천 단위 쉼표와 “원”으로 표시

복사 프롬프트 ④ — v0.3 상태 필터·금액 합계

v0.2 테스트를 통과했어.
이제 진행상태 필터와 계약금액 합계를 추가해줘.

- 상태 선택: 전체 상태 / 진행중 / 완료 / 보류
- 현재 검색 결과에 포함된 계약금액만 합산
- 금액은 천 단위 쉼표와 “원”으로 표시
- 부서와 진행상태 조건을 AND 조건으로 함께 적용
- “전체”를 선택한 조건은 적용하지 않음
- 필터가 바뀌면 결과 표·검색 결과 건수·합계를 함께 변경
- 입력 데이터 건수는 그대로 유지

대표 테스트:
- 전체: 5건 / 2,700,000,000원
- 수자원부 + 진행중: 2건 / 1,200,000,000원
- 도로부 + 진행중: 0건 / 0원

기존 기능은 유지하고 다른 기능은 추가하지 마.
화면에 “학습용 v0.3”을 표시하고,
실행 가능한 전체 HTML을 다시 줘.

v0.3 파일 저장

1. AI가 준 전체 HTML을 복사합니다.
2. 새 메모장에 붙여넣습니다.
3. 6주차_웹툴 폴더에 아래 이름으로 저장합니다.

프로젝트실적검색기_v0.3.html

1. 더블클릭해 브라우저에서 실행합니다.
2. 화면에 학습용 v0.3이 보이는지 확인합니다.
3. 공통 테스트 데이터 5건을 붙여넣고 데이터를 읽습니다.

v0.3 정답 테스트

1. 진행상태 선택목록에 전체 상태·진행중·완료·보류가 보이는지 확인합니다.
2. 부서와 진행상태를 하나씩 바꾸며 결과를 확인합니다.

Excel로 독립 검증하기

테스트 데이터 5건을 Excel A1:H6에 붙여넣었다고 가정합니다.

아래 수식으로 웹툴과 별도로 정답을 확인할 수 있습니다.

전체 계약금액
=SUM(F2:F6)

수자원부 건수
=COUNTIF(C2:C6,"수자원부")

수자원부 계약금액
=SUMIF(C2:C6,"수자원부",F2:F6)

수자원부 + 진행중 건수
=COUNTIFS(C2:C6,"수자원부",G2:G6,"진행중")

수자원부 + 진행중 계약금액
=SUMIFS(F2:F6,C2:C6,"수자원부",G2:G6,"진행중")

v0.3 회귀 테스트

• 데이터 5행을 읽는다.
• 부서 필터가 작동한다.
• 진행상태 필터가 작동한다.
• 두 필터가 함께 적용된다.
• 필터를 바꾸면 표·건수·합계가 함께 바뀐다.
• 전체 조건으로 돌아가면 5건·2,700,000,000원이 나온다.
• 결과가 없는 조건은 0건·0원으로 나온다.

실습 5 - v0.4: 오류 안내와 초기화

지금까지는 깨끗한 데이터만 사용했습니다.
실제 업무에서는 빈 입력, 잘못된 열 이름, 문자로 적힌 금액이 들어옵니다.

이번 단계에서는 새로운 업무기능을 추가하지 않고,
잘못된 입력을 조용히 처리하지 않는 도구로 만듭니다.

오류 처리 원칙

계약금액은 아래 표기까지 정상으로 읽게 합니다.

500000000
500,000,000
500,000,000원

아래처럼 단위 계산이 필요한 표기는 오늘 자동 변환하지 않습니다.

5억
2.5억원
금액 미정

복사 프롬프트 ⑤ — v0.4 오류 안내·초기화

v0.3 테스트를 통과했어.
기존 기능은 유지하고 오류 안내와 초기화만 추가해줘.

[필수 열과 순서]
No / 프로젝트명 / 부서 / 발주처 / 계약일 / 계약금액 / 진행상태 / 담당자

[데이터를 다시 읽을 때]
- 이전 결과표·필터 선택목록·건수·합계·오류 목록·안내문을 먼저 비운 뒤 새 입력을 처리
- 오류 안내는 알림창으로만 띄우지 말고 화면의 안내 영역에 표시

[처리를 중단하는 오류]
- 입력이 비어 있으면 “Excel 표를 붙여넣어 주세요.”라고 표시
- 필수 열이 없으면 “필수 열이 없습니다: [없는 열 이름]”이라고 표시
- 머리글 순서가 다르면 “머리글 순서가 올바르지 않습니다.”와 필요한 순서를 표시
- 위 세 경우에는 계산하지 않고 입력·정상·오류·검색 결과를 모두 0건, 합계를 0원으로 표시
- 결과표와 오류 목록은 빈 상태로 유지

[일부 행의 데이터 오류]
- 위 8개 필수값 중 빈 값이 있으면 오류 행으로 분류 (공백만 있는 값도 포함)
- 계약금액은 `500000000`, `500,000,000`, `500,000,000원`을 정상 처리
- 빈 금액, `5억`, `2.5억원`, `금액 미정`은 0원으로 바꾸지 말고 오류 행으로 분류
- 오류 목록에는 붙여넣은 표의 줄 번호, 프로젝트명, 문제항목, 원본 값, 이유 표시 (머리글 1행, 첫 데이터 2행)
- 빈 값의 이유는 “[항목명]이 비어 있습니다.”로 표시
- 숫자로 읽을 수 없는 금액의 이유는 “계약금액을 숫자로 읽을 수 없습니다.”로 표시
- 오류 행은 선택목록·검색 결과 건수·합계에서 제외
- 정상 행은 입력 순서대로 표시
- 입력·정상·오류·검색 결과 건수를 각각 표시
- 정상 행이 있으면 오류 행과 관계없이 결과표와 합계를 계속 계산
- 검색 결과가 없으면 0건·0원과 “조건에 맞는 결과가 없습니다.” 표시

[초기화]
- 입력창·필터·결과표·건수·합계·오류 목록을 모두 비우기

붙여넣은 내용은 일반 글자로 안전하게 표시하고,
외부 연결이나 저장 기능은 추가하지 마.
화면에 “학습용 v0.4”를 표시하고,
실행 가능한 전체 HTML을 다시 줘.

v0.4 파일 저장

1. AI가 준 전체 HTML을 복사합니다.
2. 새 메모장에 붙여넣습니다.
3. 6주차_웹툴 폴더에 아래 이름으로 저장합니다.

프로젝트실적검색기_v0.4.html

1. 브라우저에서 실행합니다.
2. 화면에 학습용 v0.4가 보이는지 확인합니다.

오류 테스트 A — 입력 없음

1. 아무 내용도 붙여넣지 않습니다.
2. 데이터 읽기 버튼을 누릅니다.

기대 결과

오류 테스트 B — 필수 열 누락

아래 데이터를 붙여넣고 실행합니다.
담당자 열이 빠져 있습니다.

No	프로젝트명	부서	발주처	계약일	계약금액	진행상태
1	하천정비	A	수자원부	A군	2026-01-15	500000000	진행중

기대 결과

• 담당자 열이 없다고 표시 (”필수 열이 없습니다: 담당자”)
• 결과 계산을 진행하지 않음
• 어떤 열이 빠졌는지 사람이 알 수 있음

오류 테스트 B-2 — 머리글 순서 오류

아래 데이터는 부서와 발주처의 순서가 바뀌어 있습니다.

No	프로젝트명	발주처	부서	계약일	계약금액	진행상태	담당자
1   하천정비 A  A군  수자원부    2026-01-15  500000000   진행중 김 대리

기대 결과

• 필요한 머리글 순서를 표시
• 현재 머리글 순서가 다르다고 안내
• 결과 계산을 진행하지 않음

오류 테스트 C — 읽을 수 없는 계약금액

No	프로젝트명	부서	발주처	계약일	계약금액	진행상태	담당자
1	하천정비 A	수자원부	A군	2026-01-15	금액 미정	진행중	김 대리
2	도로설계 B	도로부	B시	2026-02-01	300000000	완료	이 과장

기대 결과

오류 목록에는 아래 내용이 보여야 합니다.

붙여넣은 표 기준 줄 번호: 2행
프로젝트명: 하천정비 A
원본 계약금액: 금액 미정
이유: 숫자로 읽을 수 없음

오류 테스트 D — 쉼표와 원 표기

No	프로젝트명	부서	발주처	계약일	계약금액	진행상태	담당자
1	하천정비 A	수자원부	A군	2026-01-15	500,000,000원	진행중 김 대리
2	도로설계 B	도로부	B시	2026-02-01	300,000,000	완료	이 과장

기대 결과

• 정상 행 2건
• 오류 행 0건
• 계약금액 합계 800,000,000원

오류 테스트 E — 검색 결과 없음

1. 공통 테스트 데이터 5건을 다시 읽습니다.
2. 부서에서 도로부를 선택합니다.
3. 진행상태에서 진행중을 선택합니다.

기대 결과

• 0건
• 0원
• 조건에 맞는 결과가 없다는 안내

초기화 테스트

1. 공통 테스트 데이터 5건을 입력하고 필터를 선택합니다.
2. 초기화 버튼을 누릅니다.

기대 결과

• 입력창이 비어 있음
• 부서와 진행상태가 기본값으로 돌아감
• 결과 표가 비어 있음
• 입력·정상·오류 건수, 검색 결과 건수, 합계, 오류 목록이 초기상태로 돌아감

v0.4 전체 회귀 테스트

• 공통 테스트 데이터 5건을 읽는다.
• 전체 5건·2,700,000,000원이 나온다.
• 수자원부 3건·2,200,000,000원이 나온다.
• 수자원부+진행중 2건·1,200,000,000원이 나온다.
• 입력이 없으면 안내한다.
• 빠진 열 이름을 알려준다.
• 머리글 순서가 다르면 필요한 순서를 알려준다.
• 잘못된 금액을 0원으로 처리하지 않는다.
• 오류 행의 위치와 이유를 보여준다.
• HTML 모양의 입력도 명령이 아니라 글자로 표시한다.
• 초기화 버튼이 작동한다.

실습 6 - 전체 데이터 26건으로 최종 검증

이제 작은 테스트 데이터에서 통과한 v0.4를 전체 데이터로 확장합니다.
코드는 더 수정하지 않습니다. 입력만 26건으로 바꿉니다.

테스트전체 데이터 26건

6주차_실습데이터.xlsx의 전체 데이터 26건 시트에 들어 있습니다.
머리글을 포함한 A1:H27 범위를 사용합니다.

따라하기

1. 프로젝트실적검색기_v0.4.html을 엽니다.
2. 초기화를 누릅니다.
3. 위 26건 데이터를 머리글부터 전부 복사합니다.
4. 웹툴 입력창에 붙여넣습니다.
5. 데이터 읽기를 누릅니다.
6. 아래 정답표와 비교합니다.

전체 정답

부서별 정답

부서+진행상태 조합 정답

무작위 3건 내용 대조

결과 표에서 아래 세 프로젝트를 찾아 입력 데이터와 비교합니다.

• No 1 — 동강 하천정비 기본설계
• No 19 — 철도환승센터 건설사업관리
• No 26 — 하천기본계획 재수립

다음 값이 모두 같은지 확인합니다.

프로젝트명 / 부서 / 발주처 / 계약일 / 계약금액 / 진행상태 / 담당자

Excel에서 최종 대조

26건 데이터를 Excel A1:H27에 붙여넣으면 다음 수식으로 독립 확인할 수 있습니다.

전체 계약금액
=SUM(F2:F27)

진행중 프로젝트 건수
=COUNTIF(G2:G27,"진행중")

수자원부 계약금액
=SUMIF(C2:C27,"수자원부",F2:F27)

건설사업관리부 + 진행중 계약금액
=SUMIFS(F2:F27,C2:C27,"건설사업관리부",G2:G27,"진행중")

최종 통과 확인

• 입력 행 26건
• 정상 행 26건
• 오류 행 0건
• 전체 계약금액 15,150,000,000원
• 부서별 정답 5개 모두 일치
• 상태별 정답 3개 모두 일치
• 부서+상태 조합을 3개 이상 확인
• 무작위 3건의 실제 내용 일치
• 초기화 후 다시 실행해도 같은 결과

최종 파일 저장

1. 모든 테스트를 통과했다면 같은 6주차_웹툴 폴더 안에서 v0.4 파일을 복사하고 프로젝트실적검색기_v1.0.html 이름으로 저장합니다.
2. 메모장에서 해당 html 파일을 열고 v0.4를 v1.0 으로 수정합니다. (총 2곳)

v1.0은 기능을 더 추가한 파일이 아닙니다.
v0.4가 전체 테스트를 통과해 실제 사용 기준이 된 정식본이라는 표시입니다. 전체 테스트를 통과하기 전에는 이름을 v1.0으로 바꾸지 않습니다.

웹툴을 수정하거나 오류가 났을 때

AI에게 다음 내용을 알려주면 됩니다.

• 현재 사용 중인 버전
• 바꾸고 싶은 기능 또는 발생한 문제
• 문제를 다시 발생시키는 순서
• 기대한 결과와 실제 결과
• 현재 HTML 전체

요청 예시

이 파일은 프로젝트실적검색기_v0.3이야.

초기화 버튼을 눌러도 검색 결과 건수가 남아 있어.
재현 순서: 데이터 읽기 → 부서 선택 → 초기화
기대 결과: 입력과 검색 결과가 모두 초기화됨
실제 결과: 검색 결과 건수가 그대로 남아 있음

기존 검색·집계 기능은 유지해줘.
원인을 짧게 설명하고, 수정된 전체 HTML을 출력해줘.

[현재 HTML 전체 붙여넣기]

혼자 하다가 막혔을 때

HTML 대신 코드가 글자로 보일 때

가장 흔한 원인은 파일이 .html.txt로 저장된 경우입니다.

1. 파일을 우클릭합니다.
2. 이름 바꾸기를 선택합니다.
3. 끝부분이 .html인지 확인합니다.
4. 해결되지 않으면 메모장에서 다시 저장합니다.
5. 파일 형식은 “모든 파일”, 인코딩은 “UTF-8”을 선택합니다.

파일을 더블클릭했는데 메모장이 열릴 때

1. 파일 우클릭
2. 연결 프로그램
3. Chrome 또는 Microsoft Edge 선택

버튼을 눌러도 아무 반응이 없을 때

오류진단 프롬프트에 다음 여섯 가지를 줍니다.

1. 누른 버튼
2. 붙여넣은 입력
3. 기대 결과
4. 실제 결과
5. 재현 순서
6. 현재 HTML 전체

AI가 수정된 부분만 줄 때

나는 코드를 직접 찾아 수정할 수 없다.
수정 코드 조각이 아니라,
바로 저장해서 실행할 수 있는 전체 HTML을 다시 출력해줘.

AI가 요청하지 않은 기능을 추가했을 때

요청하지 않은 기능은 모두 제거해줘.
현재 단계의 필수 기능과 이미 통과한 기능만 남기고
전체 HTML을 다시 작성해줘.

수정 후 이전 기능이 사라졌을 때

1. 수정 중인 파일을 더 이상 덮어쓰지 않습니다.
2. 6주차_웹툴 폴더에서 마지막 정상작동 버전 파일을 엽니다.
3. 정상 파일이 여전히 작동하는지 확인합니다.
4. 한 번에 기능 하나만 다시 요청합니다.
5. 프롬프트에 “바뀌면 안 되는 기능”을 적습니다.

같은 AI 대화가 복잡해졌을 때

새 대화를 열고 아래 자료를 한 번에 전달합니다.

1. 도구의 목적
2. 현재 통과한 기능
3. 이번에 수정할 한 가지
4. 테스트 입력과 기대 결과
5. 마지막 정상 HTML 전체

10분 이상 해결되지 않을 때

• 마지막 정상 버전으로 돌아갑니다.
• 문제 기능은 오늘 범위에서 제외합니다.
• 다음 단계의 제공된 정상 파일이 있다면 그 파일에서 이어갑니다.
• 작동하는 핵심 기능을 지키는 것이 더 중요합니다.

결과물 저장하기

모든 결과물은 하나의 6주차_웹툴 폴더에 저장합니다.
하위 폴더 대신 파일 이름으로 내용과 상태를 구분합니다.

6주차_웹툴/
├─ 프로젝트실적검색기_v0.1.html
├─ 프로젝트실적검색기_v0.2.html
├─ 프로젝트실적검색기_v0.3.html
├─ 프로젝트실적검색기_v0.4.html
└─ 프로젝트실적검색기_v1.0.html

심화 과제 — Excel 파일을 직접 선택해 시트 읽기

기본 실습에서는 Excel 표를 복사해 웹툴에 붙여넣었습니다.
심화 과제에서는 .xlsx 파일을 선택하고, 파일 안의 시트를 골라 데이터를 읽도록 입력 방식을 개선해보세요.

완성 모습

1. Excel 파일 선택 버튼으로 .xlsx 파일을 선택합니다.
2. 파일 안의 시트 이름이 선택목록에 표시됩니다.
3. 사용할 시트를 선택하고 선택한 시트 읽기를 누릅니다.
4. 읽은 데이터로 기존의 부서·상태 검색과 계약금액 집계를 그대로 실행합니다.

구현 힌트

아래 내용을 참고해 본인의 말로 요청해 봅니다.

현재 버전의 검색·필터·집계·오류검사 기능은 유지하고,
복사·붙여넣기 대신 xlsx 파일과 시트를 선택해 읽는 기능을 추가하고 싶어.
기존 처리 로직을 재사용하는 수정 계획부터 설명해줘.

구현가능한 방식은 크게 4가지 입니다.

완료 확인

• 6주차_실습데이터.xlsx의 두 시트가 선택목록에 표시된다.
• 공통 테스트 데이터 5건을 선택하면 5건·2,700,000,000원이 나온다.
• 전체 데이터 26건을 선택하면 26건·15,150,000,000원이 나온다.
• 시트를 바꿨을 때 이전 시트의 결과가 누적되지 않는다.
• Excel 파일을 선택하지 않았거나 읽을 수 없는 파일이면 원인을 안내한다.
• v1.0의 부서·상태 필터와 오류 검사가 그대로 작동한다.

완성했다면 v1.0을 덮어쓰지 않고 아래 이름으로 저장합니다.

프로젝트실적검색기_v1.1_파일읽기.html

오늘 완료 확인

• 코드 전에 명세와 테스트계획을 확인했다.
• v0.1에서 5행과 3행 읽기·입력 건수를 통과했다.
• v0.2에서 부서 필터를 통과했다.
• v0.3에서 상태 필터·계약금액 합계를 통과했다.
• v0.4에서 입력 오류·금액 오류·초기화를 통과했다.
• 엑셀 데이터 26건 전체 결과가 정답표와 일치했다.
• 각 단계에서 이전 기능의 회귀테스트를 했다.
• 작동 버전을 서로 다른 파일로 보존했다.
• 웹툴이 자료를 저장하거나 외부로 전송하지 않는다.

오늘의 핵심

• 생성형 AI 채팅은 확률적인 결과물을 생성하고, 규칙형 웹툴은 정해진 규칙을 반복 실행한다.
• VBA와 웹툴은 실행환경은 다르지만 입력 → 처리 → 출력의 작업 흐름이 유사하다.
• 코드를 요청하기 전에 AI가 이해한 내용과 내 의도가 일치하는지 확인한다.
• 한 번에 완성하지 않고 작은 작동 버전을 단계별로 확장한다.
• 새 기능을 추가한 뒤에는 이전 기능도 다시 테스트한다.
• 코드를 외우는 대신 업무 규칙·완료 기준·정답을 정확히 설명한다.
• AI가 코드를 만들지만 기대 결과와 통과 여부는 내가 결정한다.
• 정상 버전을 덮어쓰지 않고, 실패하면 마지막 정상 버전으로 돌아간다.
• 실행됐다는 사실보다 Excel과 결과가 일치하는지 검증하는 것이 중요하다.

웹툴은 브라우저에서 바로 실행할 수 있고, 반복 업무를 정해진 기준에 따라 일관되게 처리합니다. 검색·집계뿐 아니라 파일 불러오기, 공공 API 연결, 결과 저장 등 필요한 기능을 계속 추가할 수 있어 다양한 업무도구로 확장할 수 있습니다.