AI AGENT · 업무에 쓰는 웹사이트와 도구

내 업무를 설명하고,
필요한 도구를 만듭니다

커피 클래스 수강생 모집부터 품질 현황과 영업 관리까지.
만들고 싶은 것과 실제로 사용할 방식을 AI에게 설명합니다.

COURSE MAP세 가지 프로젝트를 직접 만듭니다

자료는 출발점,
업무 방식은 내가 설명합니다

AI가 자료를 정리하고 화면을 만드는 동안, 나는 누가 쓸지와 무엇을 할 수 있어야 하는지를 정합니다. 결과를 열어보고 필요한 부분을 바꾸며 실제로 쓸 수 있는 형태로 완성합니다.

프롬프트 사용법

각 실습은 순서대로 진행합니다. 프롬프트 상자의 마크다운 기호를 포함한 전체 내용을 입력하고, AI 작업이 끝나면 다음 단계로 넘어갑니다. 대괄호로 표시된 입력 자리는 내 값으로 바꿉니다.

준비작업 폴더 연결

자료를 읽고 파일을 만들
작업 폴더를 엽니다

커피 교육자 김하늘이 ‘집에서 즐기는 핸드드립 클래스’를 운영하는 교육용 가상 사례입니다. 클래스 운영자의 입장에서 진행자를 소개하고, 수강 신청을 안내하는 랜딩페이지를 만듭니다.

  1. Claude Desktop을 설치하고 Code를 사용할 수 있는 계정으로 로그인합니다.
  2. 컴퓨터에 coffee-class라는 빈 폴더를 만듭니다.
  3. Claude의 Code 탭에서 실행 환경을 Local로 선택하고, 작업 폴더로 coffee-class를 엽니다.
  4. 다음 절의 진행자 소개 자료를 받아 이 폴더에 넣고, 첫 프롬프트에 첨부합니다.
원자료진행자 소개 자료
notes 폴더정리한 제작 자료
public 폴더공개할 웹페이지
작업 시작

첫 실습은 Manual 모드로 진행하면 파일 변경과 실행 요청을 보며 승인할 수 있습니다. 같은 웹사이트를 만드는 동안에는 이 폴더와 대화를 계속 사용합니다.

웹사이트 제작소개 자료 정리

진행자의 경험을
수강생을 위한 소개로 정리합니다

진행자의 경력만 나열하기보다 수강생이 무엇을 배울 수 있는지 드러나야 합니다. 소개 자료를 읽고, 집에서도 원하는 커피 맛을 낼 수 있도록 돕는 교육자의 강점을 정리합니다.

실습 자료 · TXT

진행자 소개 자료

커피 교육자 김하늘의 경력, 수업 방식, 공개 연락처

자료 다운로드
PROMPT 1 · 진행자 소개 자료 정리
# 과업
나는 ‘집에서 즐기는 핸드드립 클래스’를 운영하고 있어.
수강생이 나에게 무엇을 배울 수 있는지 알 수 있도록 첨부한 진행자_소개자료.txt를 읽고 소개 내용을 정리해줘.

## 소개할 내용
- 커피 교육자 김하늘의 바리스타 경험과 클래스 운영 경험
- 입문자가 집에서도 원하는 커피 맛을 낼 수 있도록 가르치는 내용과 방식
- 공개할 이름과 문의 이메일

## 정리 방향
- 경력 나열보다 수강생이 배울 수 있는 것을 쉽게 이해하도록 써줘.
- 자료에 없는 경력이나 자격은 추가하지 말아줘.

## 파일 정리
- 원자료와 소개 정리본은 notes 폴더에, 앞으로 공개할 웹파일은 public 폴더에 모아줘.
- 소개 정리본을 notes/profile.md로 저장해줘.
다음 단계

notes/profile.md를 열어 소개 내용을 읽습니다. 원자료와 다르거나 과장된 표현은 이 단계에서 바로 알려줍니다.

웹사이트 제작진행자 소개 페이지

누구와 무엇을 배울지 보이는
작은 소개 페이지를 만듭니다

방문자는 이 진행자에게 배우면 집에서 어떤 커피를 내릴 수 있는지 알고 싶어 합니다. 전문성을 뒷받침하는 경험과 수업의 가치, 연락 방법이 담긴 작은 소개 페이지를 만듭니다.

PROMPT 2 · 진행자 소개 페이지 제작
# 과업
notes/profile.md를 바탕으로 핸드드립 클래스 진행자를 소개하는 작은 페이지를 만들어줘.
방문자가 나에게 배워 집에서 커피 한 잔을 직접 내리는 모습을 떠올릴 수 있었으면 해.

## 페이지에 담을 내용
- 첫 화면: 이름과 집에서 즐길 커피를 배운다는 한 줄 소개
- 본문: 바리스타·클래스 운영 경험과 입문자에게 가르치는 내용
- 연락 방법: 공개 문의 이메일

## 표현과 저장
- 사진 없이도 신뢰감 있게 읽히는 단정한 구성으로 만들어줘.
- 휴대폰으로 링크를 열어도 소개와 연락 방법이 잘 보여야 해.
- 페이지 하단에 교육용 가상 사례임을 짧게 표시해줘.
- 브라우저에서 열 수 있는 public/profile.html로 만들고 미리보기를 열어줘.
화면에서 판단

소개를 읽고 마음에 걸리는 문구나 배치를 직접 짚어 요청합니다. 아래 예시는 첫 화면에서 전달할 메시지를 바꾸는 요청입니다. 본인이 바꾸고 싶은 내용으로 바꿔 입력합니다.

PROMPT 3 · 방문자에게 전달할 메시지 수정
# 과업
핸드드립을 처음 배우는 사람의 입장에서 public/profile.html의 소개 문구를 다듬어줘.

## 바꿀 내용
- 첫 화면에서 경력보다 ‘집에서도 내 입맛에 맞는 커피 한 잔을 내릴 수 있다’는 가치를 먼저 보여줘.
- 원두 분쇄도, 물 온도, 붓는 방식을 배우면 무엇이 달라지는지 쉬운 말로 설명해줘.
- notes/profile.md에도 이 소개 표현을 반영해줘.
웹사이트 제작디자인 방향 정리

참고 화면과 원하는 느낌을
함께 전달합니다

“깔끔하게”라는 말에 더해 좋아하는 배치와 원하는 색 계열을 전달합니다. 선택한 디자인을 저장해 두면, 다음에 notes/class.md로 클래스 안내를 정리하고 public/index.html로 모집 페이지를 만들 때 같은 분위기를 이어갈 수 있습니다.

  1. TemplateMo에서 참고할 화면을 고릅니다. 평소 좋아하는 웹사이트나 직접 준비한 디자인도 좋습니다.
  2. 마음에 든 부분을 캡처해 프롬프트에 첨부합니다. 참고 사이트의 주소도 함께 보낼 수 있습니다.
  3. 아래 대괄호 부분을 고른 화면의 특징으로 바꿉니다. 색 계열도 원하는 분위기에 맞게 조정합니다.
PROMPT 4 · 참고 디자인 적용과 가이드 저장
# 과업
진행자 소개와 앞으로 만들 클래스 안내가 하나의 웹사이트처럼 보였으면 해.
첨부한 참고 화면을 바탕으로 public/profile.html의 디자인을 다듬어줘.

## 원하는 느낌
- 참고 화면의 [마음에 든 배치나 표현]을 반영해줘.
- 커피 클래스에 어울리는 따뜻한 갈색 계열을 사용해줘.
- 소개 문구는 유지하고, 내 내용에 맞게 화면을 구성해줘.

## 다음 페이지에도 사용할 기준
- 적용한 색상, 제목과 본문, 여백, 버튼의 스타일을 notes/design-guide.md에 짧게 정리해줘.
profile.md · 소개 내용+design-guide.md · 표현 방식클래스 안내에 함께 사용
웹사이트핸드드립 클래스 안내 자료

운영 중인 클래스를
참가자가 이해할 안내로

교육용 가상 커피 전문가 김하늘은 ‘집에서 즐기는 핸드드립 클래스’를 운영하고 있습니다. 제공된 운영 메모를 바탕으로 누구를 위한 수업인지, 무엇을 배우고 가져가는지 정리합니다.

실습 자료 · TXT

클래스 운영 메모

수업 내용과 운영 조건이 담긴 실습 자료입니다. 내려받아 coffee-class 프로젝트의 notes 폴더에 넣습니다.

메모 내려받기
PROMPT 5 · 클래스 안내 내용 정리
# 과업
내가 운영하는 '집에서 즐기는 핸드드립 클래스'의 수강생 모집 페이지를 준비하려고 해.
notes/클래스_운영메모.txt와 notes/profile.md를 읽고, 모집 랜딩페이지에 사용할 안내 내용을 notes/class.md로 정리해줘.

## 안내할 내용
- 수업 대상, 배우는 내용과 참가자가 가져갈 결과
- 진행 순서, 소요 시간, 정원, 참가비와 포함 사항
- 일정, 장소, 준비물
- 진행자 소개와 참가 희망·문의를 받은 뒤 안내할 방법

## 작성 방향
- 참가자가 자신의 관심과 경험 수준에 맞는 클래스인지 판단할 수 있게 써줘.
- 클래스 이름, 수업 순서, 일정, 가격 등 제공된 운영 사실을 그대로 사용해줘.
- 설명을 듣고 직접 내려 본 뒤 집에서 다시 활용할 수 있다는 가치를 쉽게 전달해줘.
- 자료에 없는 자격, 실적, 후기를 추가하지 마.
- 접수 후 운영자가 일정과 잔여 자리를 이메일로 안내하고 참가를 확정한다고 적어줘.
- 접수만으로 예약이 확정되거나 결제되는 것은 아니라는 점을 짧게 적어줘.
원자료와 나란히 읽기

notes/class.md를 운영 메모와 비교합니다. 수업 내용과 운영 조건이 정확한지, 참가자가 가져갈 결과가 잘 드러나는지 살펴본 뒤 페이지 문구의 기준으로 사용합니다.

웹사이트핸드드립 클래스 모집 페이지

클래스 소개부터 신청까지
한 페이지에 연결하기

핸드드립을 처음 배우려는 사람이 수업 내용을 읽고 참가 희망이나 문의를 남길 수 있게 만듭니다. 앞서 만든 김하늘 전문가의 소개 페이지와 디자인 기준을 함께 사용합니다.

PROMPT 6 · 핸드드립 클래스 랜딩페이지 만들기
# 과업
'집에서 즐기는 핸드드립 클래스'의 참가자를 모집할 랜딩페이지를 public/index.html로 만들어줘.
notes/class.md의 내용과 notes/design-guide.md의 디자인을 사용해줘.

## 페이지 흐름
- 첫 화면에서 집에서 커피를 내려 마시고 싶은 초보자를 위한 핸드드립 수업임을 전달해줘.
- 함께할 내용 → 가져갈 결과 → 운영 안내 → 진행자 소개 → 신청·문의 순서로 구성해줘.
- 운영 안내에는 notes/class.md의 일정, 장소, 정원, 참가비와 포함 사항, 준비물을 정리해줘.
- 진행자 소개는 notes/profile.md를 요약하고, public/profile.html의 상세 소개로 연결해줘.
- '참가 희망·문의 남기기' 버튼을 누르면 페이지 하단의 신청·문의 영역으로 이동하게 해줘.

## 표현 방식
- 긴 설명은 짧은 문장과 항목으로 정리해줘.
- 직접 커피를 내려보고 피드백받은 내용을 집에서도 활용할 수 있다는 가치를 보여줘.
- 신청·문의 영역에는 참가 희망 또는 문의를 선택해 남길 수 있다고 안내해줘.
- 접수 후 운영자가 일정과 잔여 자리를 이메일로 안내하고 참가를 확정하며, 자동 예약·결제는 아니라는 점을 짧게 적어줘.
- 없는 자격과 후기를 만들지 말고, 휴대폰에서도 내용을 읽고 버튼을 누르기 편하게 만들어줘.
- 페이지 하단에 교육용 가상 클래스임을 짧게 표시해줘.
화면에서 보기

public/index.html을 열어 클래스 소개에서 진행자 소개와 신청·문의 영역으로 이동해 봅니다. 관심 있는 사람이 참가 여부를 판단하고 다음 행동을 찾기 쉬운지 보면서 문구와 순서를 조정합니다.

신청·문의입력 화면

참가 희망과 문의를
한곳에서 받기

클래스에 참가하고 싶은 사람과 먼저 궁금한 점을 묻고 싶은 사람을 구분해 받습니다. 회신에 필요한 이름과 이메일을 받고, 희망 일정과 남길 말은 선택해서 적게 합니다.

방문자참가 희망·문의 남기기
Apps Script접수 내용 전달
클래스 운영자구글 시트에서 관리
PROMPT 7 · 신청·문의 입력 화면 만들기
# 과업
public/index.html의 신청·문의 영역에 입력 폼을 만들어줘.
핸드드립 클래스에 관심 있는 사람이 참가 희망이나 문의를 남기고, 내가 이메일로 회신할 수 있는 화면이 필요해.

## 받을 정보
- 접수구분: '참가 희망' 또는 '문의' 중 하나를 필수로 선택
- 이름, 이메일은 필수
- 희망일정, 남길말은 선택
- 신청·문의 응대를 위한 개인정보 이용 안내와 필수 동의 체크박스

## 입력 흐름
- 필수 항목을 빠뜨리면 해당 항목 옆에 안내해줘.
- 버튼 문구는 '참가 희망·문의 보내기'로 해줘.
- 접수는 예약 확정이나 결제가 아니며, 운영자가 일정과 잔여 자리를 이메일로 안내한 뒤 참가를 확정한다고 짧게 적어줘.
- 이 단계에서는 입력 화면을 만들고, 실제 저장은 다음 단계에서 연결할 거야.
- 저장 기능을 연결하기 전에는 접수가 완료됐다는 메시지를 보여주지 마.
신청·문의구글 시트 연결

관심을 남긴 사람들을
나의 접수표에 모으기

Apps Script는 신청·문의 화면과 구글 시트를 이어 주는 작은 접수 창구입니다. 코드는 AI에게 맡기고, 내가 접수 내용을 관리할 시트와 접수 주소를 연결합니다.

  1. 빈 구글 스프레드시트를 만들고 파일 이름을 클래스 접수로 바꿉니다.
  2. 주소의 /d//edit 사이를 복사합니다. 이것이 아래 프롬프트에 넣을 스프레드시트 ID입니다. 시트 공유 설정은 제한됨으로 둡니다.
PROMPT 8 · 클래스 접수 저장 기능 만들기
# 과업
웹사이트에서 받은 클래스 참가 희망과 문의를 구글 스프레드시트에 모아 관리하려고 해.
public/index.html의 입력 항목과 각 항목명을 읽고, 저장 기능을 Google Apps Script용 notes/Code.gs로 만들어줘.

## 저장할 곳
- 스프레드시트 ID: [여기에 복사한 스프레드시트 ID 붙여넣기]
- 코드의 SPREADSHEET_ID에 이 ID를 넣고 해당 파일을 열어줘.
- setupSheet를 한 번 실행하면 '접수내역' 탭과 열 제목이 준비되게 해줘.
- 열은 접수시각, 접수구분, 이름, 이메일, 희망일정, 남길말, 동의여부 순서로 해줘.

## 접수 규칙
- 폼의 항목명과 doPost에서 읽는 항목명을 일치시켜줘.
- doPost로 접수를 받아 접수구분, 이름, 이메일과 동의를 검사한 뒤 새 행으로 추가해줘.
- 접수구분은 '참가 희망'과 '문의'만 받고, 희망일정과 남길말은 비어 있어도 저장해줘.
- 접수시각은 서버에서 기록하고, 기존 접수를 보존하며 여러 사람이 동시에 보내도 빠짐없이 저장해줘.
- 입력한 내용은 수식으로 실행되지 않도록 문자로 저장해줘.
- 저장한 뒤에는 접수 안내 화면을, 저장하지 못하면 실패 안내 화면을 보여줘.
- 접수 안내에는 예약 확정이나 결제가 아니며, 운영자가 일정과 잔여 자리를 이메일로 안내한다는 점을 짧게 넣어줘.
  1. 시트의 확장 프로그램 → Apps Script를 엽니다. 기본 코드를 지우고 생성된 notes/Code.gs 내용을 붙여넣어 저장합니다.
  2. 상단 함수 목록에서 setupSheet를 선택해 실행합니다. 처음 열리는 권한 검토 화면에서 내 계정과 직접 만든 프로젝트인지 확인하고 시트 접근을 승인합니다. 시트로 돌아가 접수내역 탭과 열 제목을 봅니다.
  3. Apps Script에서 배포 → 새 배포 → 유형 선택 → 웹 앱을 선택합니다. 실행할 사용자는 , 액세스 권한은 로그인 없이 접수할 수 있는 모든 사용자로 설정해 배포합니다.
  4. 배포 화면의 웹 앱 URL을 복사합니다. 끝이 /exec인 주소를 아래에 넣습니다. /dev는 편집자용 테스트 주소입니다.
PROMPT 9 · 신청·문의 화면과 접수 주소 연결
# 과업
public/index.html의 신청·문의 폼을 방금 배포한 접수 주소와 연결해줘.

## 접수 주소
- 웹 앱 URL: [여기에 /exec로 끝나는 웹 앱 URL 붙여넣기]

## 제출 흐름
- notes/Code.gs가 받는 항목명에 맞춰 브라우저의 기본 폼 제출 방식인 POST로 보내줘.
- 참가 희망이나 문의를 보내면 새 탭에서 실제 저장 결과를 보여주고, 원래 클래스 페이지는 유지해줘.
- 버튼을 연속해서 눌러 같은 접수가 반복 전송되지 않도록 해줘.
- 사이트에서 임의로 성공 메시지를 띄우지 말고, 저장 기능이 돌려준 결과를 보여줘.
직접 접수해 보기

가상 이름과 test@example.com으로 ‘참가 희망’과 ‘문의’를 각각 보내 봅니다. 선택 항목을 비워도 접수되는지, 동의하지 않으면 제출을 막는지 살펴봅니다. 새 탭의 안내와 접수내역 탭에 추가된 행을 함께 보고, 공개 후에도 같은 방법으로 접수해 봅니다.

공개GitHub → Vercel

보여 줄 파일을 올리고
공유할 링크 만들기

내 PC의 파일을 다른 사람에게 보내는 대신, 웹 주소 하나로 안내합니다. GitHub에는 페이지 파일을 보관하고 Vercel은 그 파일을 웹사이트로 보여줍니다.

내 프로젝트public 안의 파일
GitHub저장소 맨 위에 업로드
Vercel공개 URL 생성
  1. GitHub에서 새 저장소를 만듭니다. 개인 계정 아래에 coffee-class라는 이름을 정하고 Private을 선택합니다.
  2. 저장소의 uploading an existing file 또는 Add file → Upload files를 엽니다. 프로젝트의 public 폴더를 열어 그 안의 파일과 하위 폴더를 끌어 넣고 저장합니다.
  3. 저장소 맨 위에 index.html, profile.html이 보여야 합니다. 이미지·스타일 파일도 기존 위치 관계를 유지해 함께 올립니다. notes, 원자료, Code.gs는 PC에 보관합니다.
  4. Vercel에서 새 프로젝트를 만들고 GitHub 계정을 연결합니다. 방금 만든 저장소를 선택해 가져옵니다.
  5. Framework Preset: Other, Root Directory: 저장소 기본 위치, Build Command: Override를 켜고 비움, Output Directory: Override를 켜고 .로 설정한 뒤 Deploy를 누릅니다. 점 하나는 저장소 맨 위를 뜻합니다.
  6. 발급된 URL을 열어 클래스 페이지, 진행자 소개 링크, 참가 희망·문의 접수를 사용해 봅니다. 다른 사람에게 공유할 주소는 이 URL입니다.
내용이 바뀌면

AI에게 변경 내용을 전달해 PC의 파일을 수정합니다. 수정된 public 안 파일을 GitHub의 같은 위치에 다시 올리면 Vercel이 새 버전을 배포합니다.

재사용다른 커피 클래스를 소개할 때

내용은 바꾸고
잘 만든 기준은 다시 쓰기

다른 커피 클래스를 소개할 때도 전문가 소개와 디자인을 다시 사용할 수 있습니다. 새 클래스의 운영 자료를 받아 안내 페이지를 만드는 순서를 저장합니다.

사실과 내용profile.md · class.md
표현 기준design-guide.md
반복 작업 방법Skill
다음 작업의 시작

다른 커피 클래스를 소개할 때는 전문가 소개와 디자인 자료를 가져오고, 해당 클래스의 운영 자료를 넣습니다. Skill은 이런 반복 작업의 순서와 주의점을 AI가 다시 사용할 수 있도록 저장한 작업 안내서입니다.

선택 PROMPT 10 · 클래스 페이지 제작 방법 저장
# 과업
앞으로도 김하늘 전문가의 다른 커피 클래스를 소개하고 참가 희망과 문의를 받는 페이지를 만들 거야.
이번에 사용한 자료 정리, 페이지 제작, 접수 연결 과정을 다음 클래스에서도 쓸 수 있는 Skill로 정리해줘.

## 재사용할 기준
- 해당 클래스의 운영 자료를 받아 notes/class.md에 안내 내용을 먼저 정리한다.
- 진행자 소개와 디자인 기준은 notes/profile.md와 notes/design-guide.md를 사용한다.
- 클래스 내용, 시트 ID, 접수 주소는 프로젝트마다 새로 받는다.
- 접수구분, 이름, 이메일과 개인정보 이용 동의는 필수로 받고 희망일정과 남길말은 선택으로 받는다.
- 폼과 저장 코드의 항목명을 맞추고, 실제 시트에 저장되는지 살펴본다.
- 공개할 페이지 파일은 public에, 내부 자료와 작업 파일은 별도로 보관한다.
- 클래스 이름, 수업 순서, 일정과 비용은 제공된 운영 자료를 따르고 없는 자격과 후기를 만들지 않는다.

## 저장과 사용
- 지금 사용하는 AI 에이전트가 읽을 수 있는 프로젝트용 Skill로 저장해줘.
- 다음 클래스에 가져갈 파일과 호출 방법을 짧게 알려줘.
실습 02품질검사 대시보드

품질검사
대시보드 만들기

질문을 받을 때마다 엑셀을 다시 집계하던 일을 화면 하나로 줄입니다. 라인·자재·기간을 선택해 현황을 보고, 엑셀에 저장한 새 값도 같은 화면에서 확인합니다.

만들 화면 미리보기크게 보기 ↗
품질 대시보드 샘플. 상단 필터와 검사 현황 카드, 라인별 불합격률·불량유형·주간 추이 차트, 검사자별 집계표가 배치된 화면.
품질 대시보드 화면 구성 예시 · 클릭하면 크게 볼 수 있습니다.
01데이터 설명 만들기
02대시보드 만들기
03엑셀 저장과 연결하기
준비실습 파일

자료를 작업 폴더에 넣습니다

XLSX

품질검사 실습 데이터

품질검사_데이터.xlsx

엑셀 자료 받기
  1. 품질대시보드 폴더를 만들고 내려받은 엑셀을 넣습니다.
  2. AI Agent에서 이 폴더를 작업 폴더로 선택합니다.
  3. 이 폴더의 새 작업을 시작하고, 같은 대화에서 아래 프롬프트를 순서대로 입력합니다. 대시보드는 Chrome 또는 Edge에서 엽니다.
STEP 1데이터 설명 만들기

엑셀을 이해하고,
설명 파일로 남깁니다

엑셀의 구조와 업무에 쓸 항목을 AI가 설명하도록 요청합니다. 정리한 내용을 데이터설명.md로 저장해, 다음 단계의 대시보드 제작에 활용합니다.

PROMPT 11 · 엑셀 이해와 설명 파일 작성
# 과업
출하검사 결과에서 불합격이 늘어난 라인과 주요 불량유형을 파악하려고 해.
대시보드를 만들기 전에, 이 자료를 어떻게 읽고 활용할지 정리해두고 싶어.

## 엑셀 파악
- `품질검사_데이터.xlsx`를 읽고, 어떤 업무 기록인지와 시트 구성, 한 행이 뜻하는 내용을 쉽게 설명해줘.
- 주요 항목의 의미와 관계를 정리하고, 라인별 현황·주간 변화·불량유형을 보려면 어떤 항목을 함께 봐야 하는지 알려줘.
- 날짜나 빈칸처럼 집계할 때 주의할 점도 찾아줘.

## 설명 파일 작성
- 위 내용을 다음 대시보드 제작에 참고할 수 있도록 같은 폴더의 `데이터설명.md`에 간결하게 정리해줘.
- 원본 엑셀은 수정하지 말고, 대시보드는 아직 만들지 마.
설명 파일 살펴보기

생성된 데이터설명.md를 열어 엑셀의 항목을 어떻게 해석했는지 살펴봅니다. 이 파일을 같은 폴더에 두고 다음 요청을 이어갑니다.

STEP 2대시보드 만들기

보고 싶은 정보와
사용 방식을 요청합니다

앞서 정리한 데이터 설명을 바탕으로 확인할 지표와 필터, 집계 기준을 정해줍니다. 정한 기준은 설명 파일에도 반영해, 화면을 만들고 고칠 때 함께 참고합니다.

PROMPT 12 · 품질 대시보드 만들기
# 과업
라인·자재·기간별로 출하검사 결과를 확인하고, 어느 라인과 불량유형부터 살펴볼지 판단하고 싶어.
앞서 만든 `데이터설명.md`를 참고하고, `품질검사_데이터.xlsx`의 실제 값으로 대시보드를 만들어줘.

## 화면에서 확인할 내용
- 라인, 자재명, 시작일·종료일을 선택하거나 초기화할 수 있게 해줘. 선택한 조건을 카드·차트·표에 함께 반영해줘.
- 검사 건수, 불합격 건수, 불합격률, 불합격률이 가장 높은 라인을 요약 카드로 보여줘.
- 라인별 불합격률, 불량유형 TOP5, 라인별 주간 불합격률 추이를 차트로 보여줘.
- 검사자별 검사 건수·불합격 건수·불합격률은 표로 볼 수 있게 해줘.

## 집계 기준
- 불합격률은 검사 건수 대비 불합격 건수로 계산하고 소수 첫째 자리까지 표시해줘.
- 불량유형은 불합격 건만 집계하고, 유형이 비어 있으면 ‘미기재’로 묶어줘.
- 주간 추이는 월요일부터 일요일까지 묶고 주 시작일로 표시해줘.
- 이 집계 기준도 `데이터설명.md`에 반영해줘.

## 사용 방식
- `품질대시보드.html` 파일 하나로 만들고, 브라우저에서 열 수 있게 해줘.
- 화면에서 엑셀 파일을 선택해 데이터를 불러오게 해줘.
- 원본 엑셀은 수정하지 않고, 데이터는 외부 서버로 보내지 마.
- 흰 배경에 주황색을 포인트로 쓰고, 숫자와 차트가 읽기 쉬운 업무용 화면으로 만들어줘.
만든 화면 열기

품질대시보드.html을 브라우저로 열고 실습용 엑셀을 선택합니다. 라인이나 기간을 바꿔 현황을 살펴봅니다.

STEP 3엑셀 저장과 연결하기

저장한 내용이
화면에 따라오게 합니다

엑셀이 바뀔 때마다 파일을 다시 불러오는 일을 줄입니다. 자동으로 갱신하면서도 보고 있던 라인과 기간은 유지하도록 요청합니다.

PROMPT 13 · 엑셀 자동 갱신
# 과업
검사 결과는 계속 엑셀에 입력할 거야. 저장할 때마다 파일을 다시 불러오지 않고, 대시보드에서 최신 현황을 보고 싶어.

## 저장 내용 자동 반영
- `품질대시보드.html`에서 엑셀 파일을 한 번 선택하면, Chrome이나 Edge에서 3초마다 변경 여부를 확인해줘.
- 파일이 바뀌면 카드·차트·표를 갱신하되, 내가 보고 있던 라인과 기간 등의 필터는 유지해줘.
- 최신 자료가 반영됐는지 알 수 있도록 연결한 파일명, 자동 갱신 상태, 마지막 갱신 시각을 보여줘.
- 엑셀이 저장 중이라 잠깐 읽히지 않으면 다음 주기에 다시 시도해줘.
- 자동 갱신이 안 되는 환경에서는 파일을 다시 선택해 갱신할 수 있게 해줘.
- 기존 화면 구성과 집계 방식은 유지해줘.
엑셀을 바꿔보기

대시보드에서 엑셀을 다시 선택하고 필터를 초기화합니다. 엑셀의 합격 한 건불합격으로 바꾸고 불량유형에 출력미달을 입력한 뒤 저장합니다. 대시보드의 변화를 보고, 바꾼 셀은 원래 값으로 되돌려 저장합니다.

엑셀 수정·저장변경 확인대시보드 갱신
실습 03견적·납기·목표매출 관리

견적·납기·목표매출
관리 웹앱 만들기

견적용 단가표, 납품 일정, 팀의 목표와 실적은 업무별 엑셀로 관리합니다. 필요한 파일과 내가 알고 있는 업무 규칙을 차례로 전달해, 세 가지 일을 처리하는 웹앱 하나를 만듭니다.

화면 구성 예시 · 이미지를 누르면 크게 볼 수 있습니다.

STEP 1견적 자료 읽기
STEP 2견적서 만들기
STEP 3납기 관리 추가
STEP 4목표매출 확인
만들 도구왜 단일 HTML인가

파일 하나를 열면,
세 가지 업무 화면이 뜹니다

견적·납기·목표매출 자료는 업무별 엑셀 세 개로 관리하고, 도구는 pms.html 하나로 만듭니다. 각 업무의 자료와 규칙을 AI Agent에게 전달하면 브라우저에서 견적서·납기·목표매출을 사용할 수 있습니다. 파일을 공유해도 여러 사람의 입력이 자동으로 합쳐지지는 않습니다.
단일 HTML로 만드는 업무 도구16:9 장표 이미지 받기 ↓
준비업무별 실습 엑셀

견적부터 시작하고,
필요한 자료를 차례로 더합니다

견적 파일은 단가와 양식, 납기 파일은 소요일수와 주문 일정, 목표매출 파일은 팀의 목표와 실적을 담습니다. 먼저 견적 자료만 넣고 시작한 뒤, 기능을 추가할 때 해당 업무 파일을 같은 폴더에 넣습니다.

견적 자료단가·견적 작성과 출력
납기 자료납기 계산·주문 일정
목표매출 자료목표 대비 수주 실적
XLSX

견적 실습자료

견적_실습자료.xlsx

견적 자료 받기
  1. 영업관리_PMS 폴더를 만들고 견적_실습자료.xlsx를 넣습니다.
  2. AI Agent에서 이 폴더를 작업 폴더로 선택합니다.
  3. 새 작업을 시작합니다. 이후 납기·목표매출도 같은 폴더와 같은 대화에서 이어갑니다.
STEP 1견적 자료 읽기

견적 자료를 읽히고,
적용할 기준을 설명합니다

견적서를 작성할 때 어떤 자료가 필요한지 먼저 파악하게 합니다. 할인처럼 실무자가 알고 있는 업무 규칙은 다음 요청에서 직접 설명합니다. 아래 규칙을 우리 팀의 기준으로 가정하고 진행합니다.

엑셀의 자료내가 설명한 업무 규칙업무용 웹앱
PROMPT 14 · 견적 자료 읽기
# 과업
거래처에서 품목과 수량을 보내오면, 단가를 찾아 우리 양식에 맞는 견적서를 작성해야 해.
이 일을 간편하게 처리하는 웹앱을 만들기 전에 견적 자료부터 살펴보고 싶어.

## 먼저 자료 검토
- `견적_실습자료.xlsx`의 자료와 견적서 양식을 살펴봐줘.
- 거래처·담당자 선택, 품목별 금액 계산, 견적번호 부여에 어떤 자료를 쓸지 간단히 정리해줘.
- 할인과 주문 기준은 다음 요청에서 설명할게. 아직 파일을 만들거나 수정하지 마.
STEP 2견적서 만들기

품목과 수량을 넣으면
견적서가 채워집니다

평소 적용하던 수량 할인과 주문 기준을 설명하고, 입력부터 견적서 출력까지 연결합니다. 먼저 견적서 탭을 만들고, 납기·목표매출 탭은 다음 단계에서 차례로 추가합니다.

PROMPT 15 · 견적서 만들기
# 과업
거래처에서 품목과 수량을 알려주면, 우리 단가와 할인 기준을 적용해 견적서를 작성하고 PDF로 전달하고 싶어.

## 견적 작성 흐름
1. 거래처를 목록에서 고르거나 직접 입력하고, 담당자를 선택하게 해줘.
2. 품목과 수량을 입력하면 단가·할인·부가세·합계를 계산해줘. 품목은 여러 개 추가하거나 삭제할 수 있게 해줘.
3. 엑셀의 견적서 양식에 맞춰 보여주고, 견적서만 A4 한 장으로 인쇄하거나 PDF로 저장하게 해줘.

## 우리 팀의 견적 기준
- 품목별 주문수량에 따라 1~9개는 할인 없음, 10~49개는 3%, 50~99개는 5%, 100개 이상은 8% 할인해줘.
- 할인한 단가에 수량을 곱해 공급가를 구하고, 공급가 합계에 부가세 10%를 더해줘. 부가세는 원 미만 반올림하고, 견적서에는 할인 적용 단가와 할인율을 표시해줘.
- 제품단가표의 최소수량보다 적게 주문하면 안내하되, 견적 계산은 계속할 수 있게 해줘.
- 새 견적번호는 견적이력의 가장 큰 번호 다음부터 이어서 부여하고, 한 견적의 여러 품목에는 같은 번호를 써줘.

## 화면과 자료 사용
- `pms.html` 파일 하나로 열리게 해줘. 이번에는 견적서 탭을 만들고, 이후 납기·목표매출 탭을 추가할 거야.
- `견적_실습자료.xlsx`의 자료를 앱에 담아 처음부터 바로 작업할 수 있게 해줘.
- 견적서 탭에 ‘견적 자료 다시 불러오기’를 두고, 단가나 견적 이력이 바뀐 파일을 반영할 수 있게 해줘. 작성 중인 견적 입력은 유지하고, 이후 추가할 납기·목표매출 자료는 건드리지 마.
- 원본 엑셀은 수정하지 않고, 데이터는 외부 서버로 보내지 마.
- 주황색 계열의 단정한 업무용 화면으로 만들어줘.
견적 한 건 만들기

pms.html을 열고 거래처·담당자를 선택합니다. 품목 두 개와 수량을 넣은 뒤 인쇄 미리보기에서 견적서를 살펴봅니다.

STEP 3납기 관리 추가하기

언제 납품할 수 있고,
어떤 주문을 먼저 봐야 할까요?

납기일을 세는 방식, 긴급 주문의 단축 기간, 먼저 챙길 주문의 기준을 설명합니다. 이 기준으로 납기 계산과 주문 목록이 작동하게 합니다.

XLSX

납기 실습자료

납기_실습자료.xlsx

납기 자료 받기
파일 추가 후 요청하기

납기_실습자료.xlsxpms.html이 있는 영업관리_PMS 폴더에 넣습니다. 견적서를 만들던 대화에서 아래 요청을 이어갑니다.

PROMPT 16 · 납기 관리 추가
# 과업
거래처에 예상 납기일을 안내하고, 지연됐거나 곧 납품해야 할 주문을 먼저 챙기고 싶어.

## 사용할 자료
- 새로 넣은 `납기_실습자료.xlsx`를 읽고, 납기 계산과 주문 목록에 필요한 자료를 파악해줘.
- 이 파일의 자료를 `pms.html`에 담아 납기 탭을 추가해줘.

## 우리 팀의 납기 기준
- 기본 소요일수는 자재리드타임 시트의 표준리드타임일을 쓰고, 수주일 다음 날부터 세어줘.
- 태양광모듈·인버터·ESS는 토·일요일과 공휴일 시트의 날짜를 빼고, 전력기기는 주말·공휴일을 포함해서 계산해줘.
- 긴급 주문은 기본 소요일수에서 태양광모듈 3일, 인버터 2일, ESS 5일, 전력기기 2일을 줄인 뒤 납기일을 계산해줘.
- 납품완료는 알림에서 제외해줘. 납기일이 지났거나 진행상태가 ‘지연’이면 지연, 그 외에 기준일부터 3일 뒤까지 납기인 주문은 임박으로 구분해줘.

## 화면에서 할 일
- `pms.html`의 납기 탭에서 자재, 수주일, 긴급 여부를 입력하면 예상 납기일을 계산해줘.
- 계산에 적용한 기간과 제외한 날짜를 함께 보여줘.
- 수주납기 시트의 기존 납기일을 기준으로, 주문별 담당자와 남은 날짜 수를 보여줘. 지연·임박 주문은 위쪽에 모으고 각각 몇 건인지 표시해줘.
- 오늘 기준으로 보여주되, 다른 날짜를 기준으로도 현황을 조회할 수 있게 해줘.
- 납기 탭에 ‘납기 자료 다시 불러오기’를 두어 바뀐 일정 자료를 반영하게 해줘. 보고 있던 기준일과 계산 입력은 유지하고, 다른 탭의 자료와 입력도 유지해줘.
- 기존 견적서 기능과 디자인은 유지해줘.
납기 비교하기

자재와 수주일을 입력하고 긴급 여부를 바꿔봅니다. 목록의 기준일을 바꾸면서 지연·임박 주문이 어떻게 달라지는지도 살펴봅니다.

STEP 4목표매출 확인하기

이번 달 목표를
얼마나 채웠는지 봅니다

어떤 상태의 금액을 어느 달의 실적으로 볼지 정해줍니다. 같은 기준으로 팀원별·팀 전체의 목표 달성률을 확인합니다.

XLSX

목표매출 실습자료

목표매출_실습자료.xlsx

목표매출 자료 받기
파일 추가 후 요청하기

목표매출_실습자료.xlsx를 같은 영업관리_PMS 폴더에 넣고, 납기를 추가하던 대화에서 아래 요청을 이어갑니다.

PROMPT 17 · 목표 대비 실적
# 과업
이번 달에 팀원별로 목표를 얼마나 채웠는지, 팀 전체 실적은 어느 정도인지 확인하고 싶어.
월을 바꿔 지난달 실적도 같은 방식으로 보고 싶어.

## 사용할 자료
- 새로 넣은 `목표매출_실습자료.xlsx`를 읽고, 팀원별 목표와 월별 실적에 필요한 자료를 파악해줘.
- 이 파일의 자료를 `pms.html`에 담아 목표매출 탭을 추가해줘.

## 우리 팀의 실적 기준
- 견적실적에서 ‘수주’ 상태인 견적금액만 실적으로 잡고, 수주일이 속한 달에 반영해줘.
- 팀원목표 시트의 월목표매출과 선택한 달의 수주 금액을 비교해줘.
- 팀 전체 달성률은 팀의 목표 합계 대비 수주 금액 합계로 계산해줘.

## 화면에서 확인할 내용
- `pms.html`의 목표매출 탭에서 월을 선택하게 해줘.
- 팀원별 목표·수주 금액·달성률을 보여주고, 달성률은 진행 막대로 표시해줘.
- 팀 전체의 목표, 수주 금액, 달성률도 함께 보여줘.
- 목표매출 탭에 ‘목표매출 자료 다시 불러오기’를 두어 바뀐 목표와 실적을 반영하게 해줘. 선택한 월과 다른 탭의 자료·입력은 유지해줘.
- 기존 기능과 디자인은 유지해줘.
목표를 바꿔 반영하기

월을 바꿔 팀원별 달성률을 비교합니다. 목표매출_실습자료.xlsx의 팀원목표 시트에서 한 사람의 목표를 바꿔 저장한 뒤, 해당 탭의 목표매출 자료 다시 불러오기로 반영해봅니다.

견적서 작성·출력납기 계산·확인월 목표와 실적 비교