팀원 이름과 휴가 시작·종료일을 넣으면, 같은 날짜에 비는 사람이 2명 이상인 날을 표시하는 단일 HTML 페이지를 만들 수 있습니다. 엑셀에서 날짜 칸을 색칠하며 대조하던 일을 브라우저 한 화면으로 옮기는 방식입니다. 이 도구는 서버 없이 한 파일로 시작하고, 입력한 브라우저에만 데이터를 저장합니다.
30초 요약
- 이름·시작일·종료일을 넣고, 날짜별 휴가자를 모읍니다.
- 한 날짜에 두 명 이상이면 ‘겹침’이라는 텍스트도 함께 표시합니다.
localStorage는 같은 브라우저 저장일 뿐, 팀 공유 기능이 아닙니다.
이걸 만들면 무엇이 달라질까요?
민지가 10월 2~4일, 준호가 10월 4~6일 휴가라면 4일이 겹칩니다. 목표는 휴가 승인 시스템이 아니라 일정 대조입니다. 승인과 인력 계획은 팀 규칙으로 별도 판단해야 합니다.
휴가 겹침 캘린더 · 예시 화면
민지
민지 · 준호
겹침
준호
예시 데이터이며 실제 작동 앱 화면이 아닙니다.
첫 프롬프트에 결과와 규칙을 함께 적으세요
바이브코딩은 원하는 결과와 규칙을 자연어로 설명해 AI에게 초안을 받는 방식입니다. HTML은 화면의 뼈대, CSS는 모양, JavaScript는 입력 뒤 계산을 맡는다고 생각하면 됩니다.
이름, 시작일, 종료일, 겹침 기준, 삭제와 저장 여부를 함께 지정해야 합니다. 아래 문장을 그대로 붙여 넣으세요.
팀 휴가 겹침을 확인하는 단일 HTML 파일을 만들어줘.
입력은 팀원 이름, 휴가 시작일, 휴가 종료일이고 추가·삭제가 가능하게 해줘.
날짜별 휴가자 이름을 표시하고, 2명 이상이면 빨간 테두리와 ‘겹침’ 문구를 보여줘.
시작일이 종료일보다 늦을 때만 오류를 안내해줘.
localStorage에 JSON으로 저장하고, 외부 라이브러리 없이 모바일용 HTML·CSS·JavaScript 한 파일로 작성해줘.
휴가 사유를 입력하지 말라는 개인정보 안내도 화면에 표시해줘.
leave-calendar.html로 저장해 더블클릭합니다. 이름·날짜 입력 칸과 추가 버튼이 보이면 첫 단계는 성공입니다.
날짜 겹침은 날짜별로 이름을 모아 세면 됩니다
휴가 한 건을 { name, start, end }로 두고 시작일부터 종료일까지 날짜를 하나씩 만듭니다. 같은 날짜에 모인 이름이 둘 이상이면 겹침으로 표시합니다.
종료일도 휴가에 포함하는지 먼저 정해야 복귀일 해석이 엇갈리지 않습니다.
const byDate = {};
for (const leave of leaves) {
for (let day = new Date(leave.start); day <= new Date(leave.end); day.setDate(day.getDate() + 1)) {
const key = day.toISOString().slice(0, 10);
(byDate[key] ??= []).push(leave.name);
}
}
const overlaps = Object.entries(byDate).filter(([, names]) => names.length >= 2);
‘민지 / 2026-10-02 / 2026-10-04’와 ‘준호 / 2026-10-04 / 2026-10-06’을 넣으면 2026-10-04: 민지, 준호가 나와야 합니다. 이 예시는 문서 기반 설명이며 실행 성능을 주장하지 않습니다.
완성 화면은 작은 입력 두 건으로 확인하세요
먼저 하루짜리 일정 하나를 넣어 목록과 날짜 표시를 확인한 뒤, 같은 날짜를 포함한 두 번째 일정을 넣습니다. 날짜가 하루 밀리면 toISOString()의 UTC 변환이 섞였을 수 있으니, AI에게 로컬 날짜 YYYY-MM-DD 함수를 쓰고 UTC 변환을 피하도록 요청하세요.
localStorage는 브라우저의 키-값 저장 기능입니다. 같은 컴퓨터에서 편리한 저장일 뿐, 팀원이 함께 보는 공유 데이터베이스는 아닙니다.
개인정보과 도구의 한계도 같이 정하세요
이 MVP에는 이름 또는 이니셜과 날짜만 넣습니다. 휴가 사유·연락처·개인 일정은 겹침 확인에 필요하지 않습니다.
색만으로 겹침을 알리지 말고 이름과 ‘겹침’ 문구를 함께 보여 달라고 요청하세요. 색을 구분하기 어려운 화면에서도 같은 정보를 읽을 수 있게 하는 장치입니다.
승인 이력, 권한, 자동 알림, 동시 수정이 필요하면 단일 HTML은 부족합니다. ‘겹침 확인’과 ‘휴가 관리 시스템’을 같은 문제로 보지 않는 것이 선택 기준입니다.
작업 환경을 함께 정리한다면
코드와 브라우저 결과를 나란히 비교하는 작업 환경에만 연결한 카드입니다. 휴가 관리 기능의 필수품은 아닙니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
출처
- MDN Web Docs, Using the Web Storage API, 2026-09-22 확인.
- MDN Web Docs, : The Input (Form Input) element, 2026-09-22 확인.
핵심 정리: 다섯 가지 질문과 답
Q. 휴가 겹침은 어떻게 찾나요?
각 휴가 기간을 날짜별로 펼친 뒤 이름이 두 명 이상 모인 날짜만 표시합니다.
Q. 첫 프롬프트에 무엇을 넣나요?
이름·시작일·종료일·2명 이상 겹침·삭제·단일 HTML 조건을 적습니다.
Q. 무엇부터 검증하나요?
하루 일정 한 건과 같은 날짜가 포함된 두 번째 일정을 순서대로 넣습니다.
Q. localStorage는 공유되나요?
아닙니다. 공유·권한 관리에는 별도 시스템이 필요합니다.
Q. 개인정보는 어떻게 줄이나요?
이름 또는 이니셜과 날짜만 쓰고 사유·연락처는 넣지 않습니다.
'AI > AI 활용 기초' 카테고리의 다른 글
| 지출 CSV 가계부, 빈 항목·잘못된 금액을 한 화면에서 찾는 단일 HTML (0) | 2026.09.26 |
|---|---|
| 설문 CSV 요약 도구 만들기, 엑셀에서 세지 말고 파일 한 장으로 비율 보기 (0) | 2026.09.25 |
| 바이브코딩 업무 보드, 요청 붙여넣자 담당자별 접수 목록이 보이게 만들기 (0) | 2026.09.21 |
| 명단 비교 HTML, 엑셀 눈대중 대조를 누락자 목록으로 바꾸기 (0) | 2026.09.20 |
| 메모만 붙여넣으면 업무보고 표 완성, 단일 HTML 도구 만들기 (0) | 2026.09.19 |
댓글