① 어떤 상황에서 AI를 활용했나요?
AI는 웹 도구의 코드를 생성하는 과정과, 실제 사용 경험을 반영해 수정하는 과정에 활용했습니다.
개발 언어보다 업무 흐름과 원하는 동작을 구체적으로 설명하는 방식으로 ChatGPT에 요청했습니다. "출장정보를 입력하고 영수증 사진과 PDF를 올리면, 개인별 증빙자료가 PDF 한 건으로 정리되는 웹페이지 코드를 만들어줘."라는 요청에서 시작해, 내·외부망에서 웹으로 사용, 휴대전화 촬영·사진 선택 지원, JPG·PNG뿐 아니라 PDF 업로드, 개인별·항목별 증빙 자동 배치, 비고와 지도 등 설명자료 첨부, 최종 증빙을 PDF 1건으로 생성 등 필요한 기능과 판단 경계를 하나씩 설명했습니다.
AI는 입력칸·버튼·화면 구조(HTML), 색상·간격·모바일 배치(CSS), 파일 첨부·PDF 생성 동작(JavaScript)을 한 파일(index.html)에 담아 브라우저에서 바로 실행되는 코드를 생성했습니다. 생성된 파일은 Netlify에 끌어다 놓는 방식으로 배포해 별도 서버 구축 없이 외부망에서 접속할 수 있는 웹주소를 만들었습니다.
이후 '만들기 → 사용해 보기 → 불편 알려주기 → 다시 수정하기'의 순환 방식으로 여섯 가지 개선축을 반복했습니다.
1. 기본 구조: 출장개요·집행내역·증빙으로 화면과 출력물의 뼈대 구성
2. 첨부 방식: 사진 촬영·이미지·PDF를 같은 흐름에서 첨부
3. 출력 구성: 목차·항목·금액 순서를 정산 서류에 맞게 정리
4. 예외 설명: 비고 입력과 지도 경로 첨부로 예외적인 이동경로 설명
5. 판단 경계: 출장이행 증빙의 적정성은 검토하지 않도록 역할 한정
6. 모바일 확인: iOS·Android 실사용 화면에서 첨부와 저장 흐름 점검
AI가 초안을 생성하고, 사용자가 여비규정·문구·예외조건·화면 동작을 검토하여 수정하는 방식으로 업무에 맞는 도구로 구체화했습니다.

② 어떤 AI를 사용했나요?
AI는 웹 도구의 코드를 생성하는 과정과, 실제 사용 경험을 반영해 수정하는 과정에 활용했습니다.
개발 언어보다 업무 흐름과 원하는 동작을 구체적으로 설명하는 방식으로 ChatGPT에 요청했습니다. "출장정보를 입력하고 영수증 사진과 PDF를 올리면, 개인별 증빙자료가 PDF 한 건으로 정리되는 웹페이지 코드를 만들어줘."라는 요청에서 시작해, 내·외부망에서 웹으로 사용, 휴대전화 촬영·사진 선택 지원, JPG·PNG뿐 아니라 PDF 업로드, 개인별·항목별 증빙 자동 배치, 비고와 지도 등 설명자료 첨부, 최종 증빙을 PDF 1건으로 생성 등 필요한 기능과 판단 경계를 하나씩 설명했습니다.
AI는 입력칸·버튼·화면 구조(HTML), 색상·간격·모바일 배치(CSS), 파일 첨부·PDF 생성 동작(JavaScript)을 한 파일(index.html)에 담아 브라우저에서 바로 실행되는 코드를 생성했습니다. 생성된 파일은 Netlify에 끌어다 놓는 방식으로 배포해 별도 서버 구축 없이 외부망에서 접속할 수 있는 웹주소를 만들었습니다.
이후 '만들기 → 사용해 보기 → 불편 알려주기 → 다시 수정하기'의 순환 방식으로 여섯 가지 개선축을 반복했습니다.
1. 기본 구조: 출장개요·집행내역·증빙으로 화면과 출력물의 뼈대 구성
2. 첨부 방식: 사진 촬영·이미지·PDF를 같은 흐름에서 첨부
3. 출력 구성: 목차·항목·금액 순서를 정산 서류에 맞게 정리
4. 예외 설명: 비고 입력과 지도 경로 첨부로 예외적인 이동경로 설명
5. 판단 경계: 출장이행 증빙의 적정성은 검토하지 않도록 역할 한정
6. 모바일 확인: iOS·Android 실사용 화면에서 첨부와 저장 흐름 점검

③ 활용 결과 어떤 변화가 있었나요?
출장정보 입력 → 증빙 첨부 → 세부내용 확인 → PDF 만들기의 네 단계로, 브라우저에서 출장정보와 증빙을 한 번에 정리할 수 있게 되었습니다.
기존에는 파일을 내부망으로 옮기고 파일명을 바꾼 뒤 항목별로 개별 첨부해야 했지만, 이제는 웹에서 첨부하면 출장개요·집행내역·증빙이 통합된 PDF 1건이 생성됩니다. 숙박비 PNG, 철도·버스 운임 PNG, 통행료 PDF처럼 항목별 파일 형식이 달라도 같은 흐름에서 첨부·배치됩니다.
예외적인 이동경로는 '증빙 + 설명'으로 남길 수 있게 되었습니다. 예를 들어 오송역 → 수서역 → 서울역으로 이동하면서 오송역 → 수서역 구간만 청구한 경우, 비고에 사유를 적고 지도 경로 자료를 첨부해 청구 구간과 미청구 구간을 함께 설명할 수 있습니다.
휴대전화에서도 설치 없이 사용할 수 있어 비고 입력과 경로자료 첨부를 출장 중에 바로 처리할 수 있습니다. iOS·Safari에서는 미리보기 후 공유·파일 저장으로, Android·Chrome에서는 다운로드 또는 PDF 뷰어로 저장하는 것을 실사용 가능합니다.
망 간 이동·파일명 변경·개별 첨부 과정이 줄어 정리시간이 감소하고, 개인별·항목별 증빙 구분이 쉬워져 자료 관리가 효율화되었으며, 예외사항 처리가 간소화된 것이 가장 큰 변화입니다.

④ 나만의 방식 또는 개선 포인트는 무엇인가요?
1. 코드를 모르는 업무 담당자가 필요한 기능과 판단 경계를 구체적으로 설명하는 것만으로 실행 가능한 HTML 파일을 만들었습니다.
2. 실제 사용 장면을 반복 개선했습니다. 완성된 결과를 한 번에 요구하지 않고, 직접 써보며 불편한 점을 AI에 알려주고 다시 수정하는 순환을 여섯 번 반복해 실제 규정·사용경험·모바일 화면을 계속 반영했습니다.
3. 판단은 사람이, 정리는 도구가 담당하도록 경계를 정했습니다. 사이트는 입력정보와 첨부파일의 항목별 정리, 사진·PDF의 문서 내 배치, 출장개요·집행내역·증빙 PDF 생성만 담당합니다. 출장이행 확인자료의 필수 여부 판단, 통행료·주차료 등 증빙 조합의 적정성 판정, 여비 지급·정산 승인 여부 결정은 하지 않으며, 최종 입력내용과 첨부자료는 제출자가 확인하고 실제 지급·정산은 여비규정과 내부 절차에 따릅니다.
4. 서버 없이 배포했습니다. HTML 파일 하나를 Netlify에 끌어다 놓는 것만으로 외부망 주소를 만들고, 수정된 파일을 다시 올려 최신 버전으로 갱신합니다.
추가로, 앞으로는 전 직원 시범 사용으로 오류·불편사항을 수렴하고, 자주 쓰는 비고 문구와 사용안내를 보완하며, 개선 전후 처리시간 등 효과를 측정하고, 다른 반복업무를 자동화하는 사이트도 추가로 제작하고자 합니다.

⑤ 다른 사람도 따라 할 수 있나요?
영수증과 증빙을 모아 정산하는 업무가 있는 사람이라면 같은 방식을 참고할 수 있습니다. 핵심은 '반복되는 정리 업무를 AI에 설명해 웹 도구로 만들고, 판단은 사람이 한다'는 활용 방식입니다.
먼저 자신의 업무에서 어떤 정리 작업이 반복되는지 확인합니다. 이후 ChatGPT 등 생성형 AI에 입력 항목, 첨부 파일 종류, 출력물 형태를 업무 용어로 설명해 HTML 파일을 생성하고, 브라우저에서 열어 동작을 확인합니다. 화면 순서·항목명·예외조건은 대화로 계속 수정하면 됩니다.
영수증에는 결제정보와 개인정보가 포함될 수 있으므로, 실제 업무자료에 사용하기 전에 기관의 보안·개인정보 처리 기준을 확인해야 합니다.
이처럼 업무의 불편을 개선의 시작으로 삼아 작은 기능부터 적용하면, 작은 아이디어가 더 나은 일하는 방식으로 이어질 수 있습니다.