6 / 10약 30분입문

실습 3 · 나만의 기록 도구

입력·목록·삭제·엑셀보내기 — 파일 하나로 끝나는 도구

이 장을 끝내면

브라우저에 저장되는 기록 도구 만들기
선택지 항목을 정확한 값으로 맞추기
삭제 확인·최신순 정렬·CSV보내기 붙이기

오늘 만들 것

상담(또는 민원·점검·회의) 내용을 입력하고 목록으로 보는 도구
삭제 · 최신순 정렬 · 전체를 엑셀(CSV)로 내려받기
인터넷 없이 더블클릭으로 열리고, 입력 내용은 브라우저에 저장되어 새로고침해도 남습니다
완성까지 보통 요청 세 번입니다. 한 번에 완성하려 하지 마세요

카드 A · 도구 뼈대 만들기

카드를 그대로 복사해 붙여 넣으세요. 항목(상담일자·기업명…)은 본인 업무에 맞게 바꿔도 됩니다.

지금 하기

만들어진 HTML 파일을 저장하고 더블클릭으로 연다
테스트로 한 건 입력해 보고 새로고침해도 남아 있는지 본다

에이전트에게 복붙

기업 상담기록을 관리하는 웹 페이지를 HTML 파일 하나로 만들어 주세요.

- 무엇을: 상담 내용을 입력하고 목록으로 보는 도구
- 누구를 위해: 기업 지원기관에서 상담을 기록하는 담당자
- 어떤 데이터로: 상담일자, 기업명, 상담분야, 상담내용, 담당자, 처리상태
- 어떤 화면으로: 왼쪽에 입력 폼, 오른쪽에 목록 표
- 제약: 파일 하나로 끝나야 하고, 인터넷 연결 없이 더블클릭으로 열려야 합니다.
  입력한 내용은 브라우저에 저장되어 새로고침해도 남아 있어야 합니다.
  외부 라이브러리는 쓰지 마세요. 코드에 한국어 주석을 달아 주세요.

카드 B · 화면 다듬기와 항목 맞추기

새 기능이 아니라 화면과 선택지를 다듬는 단계입니다. AI가 만든 색이 화려하면 이 카드로 눌러 주세요.

지금 하기

선택지 개수(분야 7개·상태 4개)가 정확한지 확인한다
기능은 그대로 두고 화면만 고쳐졌는지 확인한다

에이전트에게 복붙

지금 열려 있는 파일의 화면을 다듬고 입력 항목을 정확한 값으로 맞춰 주세요.

- 무엇을: 새 기능을 추가하지 말고 화면 디자인과 입력 항목의 선택지를 다듬는 작업
- 누구를 위해: 이 화면을 하루 종일 들여다보는 상담 담당자
- 어떤 데이터로: 상담분야 선택지는 정확히 기술지원, 시험분석 의뢰, 자금지원,
  인증취득, 판로개척, 인력채용, 설비도입 7개여야 하고, 처리상태 선택지는
  정확히 접수, 진행중, 완료, 보류 4개여야 합니다
- 어떤 화면으로: 글자 크기와 여백을 정돈하고, 목록이 비어 있을 때는
  안내 문구를 보여주고, 화면이 좁아지면 입력 폼과 목록이 세로로 쌓이게 해 주세요
- 제약: 강조 색상은 하나만 쓰고 나머지는 회색 계열로 눌러 주세요.
  화려한 그라디언트나 그림자, 반짝이는 효과는 넣지 마세요.
  저장하고 불러오는 방식은 지금 그대로 유지해 주세요.

카드 C · 삭제·정렬·CSV보내기

'엑셀에서 한글이 깨지지 않게'라는 한 줄이 핵심입니다. 없으면 나중에 파일을 열었을 때 글자가 깨집니다.

지금 하기

새 기록을 등록해 목록 맨 위에 오는지 확인한다
삭제 버튼이 확인 없이 바로 지우면 확인 절차를 다시 요청한다
내려받은 CSV를 엑셀로 열어 한글이 안 깨지는지 확인한다

에이전트에게 복붙

지금 열려 있는 파일의 목록에 삭제, 정렬, CSV보내기 세 가지 기능을 추가해 주세요.
- 무엇을: 목록에서 각 상담기록을 삭제하고, 목록을 최신순으로 정렬하고,
  전체 기록을 CSV 파일로 내려받는 기능
- 누구를 위해: 상담기록이 쌓일수록 최근 기록을 먼저 보고, 필요할 때
  전체 자료를 뽑아 써야 하는 담당자
- 어떤 데이터로: 지금 목록에 있는 상담일자, 기업명, 상담분야, 상담내용,
  담당자, 처리상태 항목 전부
- 어떤 화면으로: 목록의 각 행마다 삭제 버튼을 두고, 목록은 상담일자가
  최신인 기록이 위로 오도록 정렬해서 보여주세요. 목록 위에는 지금까지
  저장된 상담기록 전체를 CSV 파일로 내려받는 버튼을 하나 두세요
- 제약: 삭제 후에도 새로고침하면 바뀐 내용이 그대로 남아 있어야 합니다.
  실수로 삭제하는 것을 막기 위해 삭제 전에 한 번 확인하는 절차를 넣어 주세요.
  CSV 파일은 엑셀에서 열었을 때 한글이 깨지지 않게 저장해 주세요.

체크포인트 — 다섯 개면 완성

입력·저장하면 목록에 나타남
새로고침해도 내용 유지
삭제 버튼 → 확인 후 삭제
최신 날짜가 맨 위
보내기 버튼으로 CSV 다운로드

막히면

5분 넘게 막히면: 화면에 무엇이 잘못됐는지 그대로 말하세요 ("표가 안 보여요")
파일이 망가졌으면: "방금 바꾼 것을 원래대로 되돌려 주세요" 후 카드부터 다시

내 업무로 바꾸기 — 항목 이름만 바꾸면 끝

이 카드들은 상담기록이 아니어도 그대로 씁니다. 점검일지, 민원 기록, 회의 참석부, 자산 대장 — '어떤 데이터로' 칸의 항목 이름만 바꾸면 됩니다. 만든 파일은 USB나 메일로 자신에게 보내 두세요. 입력한 데이터는 그 브라우저에만 저장되므로, 다른 컴퓨터에서 쓰려면 CSV보내기로 데이터를 따로 챙겨야 합니다.

기업 상담기록을 관리하는 웹 페이지를 HTML 파일 하나로 만들어 주세요. - 무엇을: 상담 내용을 입력하고 목록으로 보는 도구 - 누구를 위해: 기업 지원기관에서 상담을 기록하는 담당자 - 어떤 데이터로: 상담일자, 기업명, 상담분야, 상담내용, 담당자, 처리상태 - 어떤 화면으로: 왼쪽에 입력 폼, 오른쪽에 목록 표 - 제약: 파일 하나로 끝나야 하고, 인터넷 연결 없이 더블클릭으로 열려야 합니다. 입력한 내용은 브라우저에 저장되어 새로고침해도 남아 있어야 합니다. 외부 라이브러리는 쓰지 마세요. 코드에 한국어 주석을 달아 주세요.

지금 열려 있는 파일의 화면을 다듬고 입력 항목을 정확한 값으로 맞춰 주세요. - 무엇을: 새 기능을 추가하지 말고 화면 디자인과 입력 항목의 선택지를 다듬는 작업 - 누구를 위해: 이 화면을 하루 종일 들여다보는 상담 담당자 - 어떤 데이터로: 상담분야 선택지는 정확히 기술지원, 시험분석 의뢰, 자금지원, 인증취득, 판로개척, 인력채용, 설비도입 7개여야 하고, 처리상태 선택지는 정확히 접수, 진행중, 완료, 보류 4개여야 합니다 - 어떤 화면으로: 글자 크기와 여백을 정돈하고, 목록이 비어 있을 때는 안내 문구를 보여주고, 화면이 좁아지면 입력 폼과 목록이 세로로 쌓이게 해 주세요 - 제약: 강조 색상은 하나만 쓰고 나머지는 회색 계열로 눌러 주세요. 화려한 그라디언트나 그림자, 반짝이는 효과는 넣지 마세요. 저장하고 불러오는 방식은 지금 그대로 유지해 주세요.

지금 열려 있는 파일의 목록에 삭제, 정렬, CSV보내기 세 가지 기능을 추가해 주세요. - 무엇을: 목록에서 각 상담기록을 삭제하고, 목록을 최신순으로 정렬하고, 전체 기록을 CSV 파일로 내려받는 기능 - 누구를 위해: 상담기록이 쌓일수록 최근 기록을 먼저 보고, 필요할 때 전체 자료를 뽑아 써야 하는 담당자 - 어떤 데이터로: 지금 목록에 있는 상담일자, 기업명, 상담분야, 상담내용, 담당자, 처리상태 항목 전부 - 어떤 화면으로: 목록의 각 행마다 삭제 버튼을 두고, 목록은 상담일자가 최신인 기록이 위로 오도록 정렬해서 보여주세요. 목록 위에는 지금까지 저장된 상담기록 전체를 CSV 파일로 내려받는 버튼을 하나 두세요 - 제약: 삭제 후에도 새로고침하면 바뀐 내용이 그대로 남아 있어야 합니다. 실수로 삭제하는 것을 막기 위해 삭제 전에 한 번 확인하는 절차를 넣어 주세요. CSV 파일은 엑셀에서 열었을 때 한글이 깨지지 않게 저장해 주세요.