단일 HTML 일정 플래너, 마감일과 예상 시간만 넣고 오늘 순서 정하기
오전 화면에 할 일은 여러 줄인데, 무엇부터 열지 결정하는 데 시간이 걸릴 때가 있습니다. 마감일과 예상 시간을 같이 적으면 오늘의 시작 순서를 바로 볼 수 있는 단일 HTML 플래너를 만들 수 있습니다. 이 도구는 ‘가장 급한 일’과 ‘오래 걸리는 일’을 한 목록에서 비교하게 합니다. 서버나 앱 설치 없이 파일 하나를 브라우저로 여는 방식이라, 코딩을 처음 시작하는 사람도 AI와 대화하며 완성할 수 있습니다.
30초 요약
- 할 일 제목, 마감일시, 예상 시간을 입력하면 목록이 정렬됩니다.
- 첫 프롬프트를 AI에게 복사해 붙이면
planner.html한 파일이 만들어집니다.- 입력값은 브라우저 저장소에 남을 수 있으니 민감한 내용은 적지 않습니다.
- 자동 일정 최적화가 아니라, 오늘 시작할 일을 판단하는 개인용 MVP입니다.
이걸 만들면 무엇이 달라질까요?
예시 데이터로 견적서 검토 / 오늘 16:00 / 40분, 회의 자료 / 내일 10:00 / 90분, 메일 답장 / 오늘 14:00 / 15분을 넣어 보겠습니다. 마감이 더 가까운 일에 우선순위를 주되, 같은 조건이면 예상 시간이 긴 일을 먼저 보여주도록 만들면 ‘나중에 하자’던 긴 작업도 목록 아래로 사라지지 않습니다.
예시 데이터 · 정적 화면 (버튼은 작동하지 않습니다)
오늘 14:00 · 예상 15분 · 마감 임박
오늘 16:00 · 예상 40분 · 마감 임박
내일 10:00 · 예상 90분 · 준비 시간 확보
이 화면은 실행 결과 캡처가 아니라, 글에서 설명하는 MVP의 예시 화면입니다. 실제 정렬은 입력한 현재 시각과 마감일시를 비교해 계산하므로, 결과가 ‘정답’이라기보다 시작 판단을 돕는 기준이라는 점도 남겨 두겠습니다.
단일 HTML 파일은 왜 이 작업에 맞을까?
HTML은 브라우저가 읽는 화면의 뼈대이고, JavaScript는 그 화면에서 계산과 버튼 동작을 맡습니다. 이번에는 둘을 하나의 planner.html 파일에 넣습니다. 메모 앱을 새로 배우기보다 종이 한 장에 입력칸과 계산기를 붙이는 느낌에 가깝습니다.
브라우저의 localStorage는 키와 값 형태의 데이터를 같은 사이트 범위에 저장하는 기능입니다. MDN 문서에 따르면 브라우저를 닫았다 다시 열어도 남을 수 있지만, 브라우저 설정이나 저장 공간 때문에 사용할 수 없는 경우도 있습니다. 민감한 고객 정보·비밀번호는 이 플래너에 입력하지 않는 편이 안전합니다.
AI에게 이 첫 프롬프트를 붙여 넣으세요
ChatGPT, Claude, Gemini처럼 코드를 파일로 만들어 주는 AI 대화창을 엽니다. 아래 상자 전체를 복사해 붙여 넣고, 결과로 받은 코드를 메모장이나 텍스트 편집기에 그대로 넣어 planner.html로 저장합니다.
단일 파일 `planner.html`을 만들어 줘. 외부 라이브러리와 서버는 쓰지 말고 HTML, CSS, JavaScript만 사용해.
기능:
1) 할 일 제목, 마감일시(datetime-local), 예상 시간(분)을 입력하고 ‘할 일 추가’를 누른다.
2) 현재 시각과 마감일시의 차이가 짧을수록 앞에 오게 정렬한다.
3) 마감일까지 남은 시간이 같으면 예상 시간이 긴 일을 먼저 보여 준다.
4) 각 항목에 마감일시, 예상 시간, ‘마감 임박/여유 있음’ 상태를 표시한다.
5) 완료와 삭제 버튼을 넣는다. 완료한 일은 목록 아래로 보낸다.
6) 목록은 localStorage에 JSON 문자열로 저장하고, 페이지를 다시 열면 불러온다.
7) localStorage 저장이 실패하면 화면에 짧은 안내를 표시한다.
8) 모바일에서도 입력칸과 목록이 읽히는 밝은 화면으로 만든다.
정렬 기준을 코드 주석으로 설명하고, 결과는 HTML 전체 코드만 하나의 코드 블록으로 출력해 줘.
datetime-local은 날짜와 시·분을 함께 받는 HTML 입력칸입니다. 표시 방식은 기기마다 달라도 값은 YYYY-MM-DDTHH:mm 형식으로 다뤄집니다. 예상 시간은 ‘30’처럼 분 단위 숫자만 넣도록 요청했기 때문에, 계산 기준이 흔들리지 않습니다.
완성 파일은 이렇게 확인합니다
AI가 준 코드 전체를 복사합니다. Mac에서는 텍스트 편집기를 열어 서식 없는 텍스트로 붙여 넣고, 파일 이름을 planner.html로 저장합니다. Windows에서는 메모장에 붙여 넣고 저장할 때 파일 형식을 ‘모든 파일’로 바꾼 뒤 같은 이름을 씁니다.
저장한 파일을 더블클릭하면 브라우저가 열립니다. 제목·마감일시·예상 시간을 적고 ‘할 일 추가’를 누른 뒤, 새 항목이 목록에 보이면 첫 단계는 성공입니다. 이어 두세 항목의 마감과 시간을 다르게 넣어 정렬 순서가 바뀌는지 확인합니다.
입력 → 결과를 한 번에 확인하는 예시
입력: ‘회의 자료’, 내일 10:00, 90분 / ‘메일 답장’, 오늘 14:00, 15분
기대 결과: 현재 시각이 오늘 오전이라면 ‘메일 답장’이 먼저 보입니다. 다만 현재 시각에 따라 상태와 남은 시간은 달라집니다.
원하는 순서가 안 나오면 수정 프롬프트를 씁니다
처음부터 완벽한 화면이 나오지 않아도 괜찮습니다. 코드를 직접 고치기 전에, 현재 HTML 전체와 아래 수정 요청을 함께 AI에 넣는 편이 초보자에게는 더 안전합니다. ‘정렬이 안 돼요’보다 무엇을 비교하고 어디에 보여 줄지 적어 주면 결과가 선명해집니다.
아래 `planner.html`을 수정해 줘. 기존 기능은 지우지 말고 바꾼 뒤 HTML 전체를 다시 출력해 줘.
문제: 완료한 항목이 맨 아래로 내려가지 않거나, 마감일시가 비어 있을 때 정렬이 이상하다.
수정 조건:
- 완료한 항목은 항상 미완료 항목 뒤에 둔다.
- 마감일시가 비어 있으면 ‘마감일 미정’으로 표시하고 미완료 목록의 마지막에 둔다.
- 같은 마감일시라면 예상 시간이 큰 항목을 먼저 둔다.
- 정렬 기준을 화면 하단에 한 문장으로 표시한다.
흔한 오류는 이렇게 다음 행동으로 바꿉니다
화면에 코드 글자만 보인다면 파일 이름 끝이 .html이 아니라 .txt일 가능성이 큽니다. 파일 정보에서 확장자를 확인하고 planner.html로 다시 저장합니다.
버튼을 눌러도 아무 변화가 없으면 AI가 준 코드의 처음 <!doctype html>부터 마지막 </html>까지 빠짐없이 다시 붙여 넣고 저장한 뒤 새로고침합니다. 파일 일부만 고치기보다 HTML 전체를 다시 받는 편이 초보 단계에서는 누락을 줄입니다.
목록이 새로고침 뒤 사라지면 브라우저의 개인 정보 보호 모드나 저장소 제한을 먼저 의심합니다. Web Storage는 사용 가능 여부를 확인한 뒤 setItem(), getItem() 같은 메서드로 다루는 것이 권장됩니다. 여러 브라우저 창에서 같은 플래너를 동시에 편집하지 않는 편이 좋습니다.
이 플래너가 맞는 경우와 아닌 경우
오늘 해야 할 일을 스스로 입력하고, 마감·예상 시간을 보고 시작 순서를 정하려는 개인 작업에는 잘 맞습니다. 웹 서버 없이 파일 하나로 시작하므로, 작은 업무 도구를 바이브코딩으로 만들어 보는 첫 결과물로도 적당합니다.
반대로 팀원과 동시에 수정하거나 휴대폰과 노트북 사이에서 자동 동기화해야 한다면 이 방식만으로는 부족합니다. localStorage는 사이트별 브라우저 저장소이며 여러 창의 동시 읽기·수정·쓰기에는 잠금이 없다는 표준의 제약이 있습니다. 그런 경우에는 공유 캘린더나 별도 데이터베이스를 쓰는 도구를 검토해야 합니다.
마우스로 항목 순서를 직접 바꾸는 기능은 다음 단계로 넣을 수 있습니다. HTML Drag and Drop API는 페이지 안에서 항목을 끌어 놓는 상호작용을 제공하지만, 이 글의 MVP에서는 자동 정렬 기준을 먼저 확인하는 편이 낫습니다. 처음 버전의 목표는 멋진 앱이 아니라 ‘오늘 무엇부터 시작할지’ 보여 주는 화면입니다.
작업 환경을 함께 정리한다면
아래 두 카드는 플래너의 기능을 대신하지 않습니다. HTML 파일을 노트북에서 열고, 외부 화면·저장장치 연결 또는 화면 높이 조절이 필요한 작업 환경에만 맞는 선택지입니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
출처
- MDN Web Docs, Using the Web Storage API — localStorage의 저장 범위·지속성·사용 가능 여부 확인
- MDN Web Docs,
<input type="datetime-local">— 날짜와 시각 입력 형식 - MDN Web Docs, HTML Drag and Drop API — 드래그 앤 드롭의 범위
- WHATWG, HTML Living Standard: Web storage — 사이트별 저장 영역과 동시 편집 제약
핵심 정리: 다섯 가지 질문과 답
Q. 이 플래너는 무엇을 기준으로 오늘 순서를 보여 주나요?
마감까지 남은 시간과 예상 소요 시간을 함께 비교합니다.
Q. 설치해야 하나요?
아니요. AI가 만든 planner.html 파일을 브라우저로 열면 됩니다.
Q. 입력한 할 일은 어디에 남나요?
localStorage를 쓴 구현이라면 같은 브라우저·사이트 범위의 저장소에 남을 수 있습니다.
Q. 마감일이 없는 일도 넣을 수 있나요?
수정 프롬프트처럼 ‘마감일 미정’을 목록 마지막으로 보내는 규칙을 넣을 수 있습니다.
Q. 팀 일정 관리에도 쓸 수 있나요?
아니요. 동시 편집과 기기 간 동기화가 필요하면 공유용 서비스나 별도 서버가 필요합니다.
글을 읽어 주셔서 감사합니다.
이 글이 도움이 되었고 새로운 정보를 계속 받아보고 싶으시다면 구독해 주세요.
'AI > AI 활용 기초' 카테고리의 다른 글
| 여러 문서 의견 비교표 만들기, 붙여넣기만 하고 놓친 쟁점 찾기 (0) | 2026.09.29 |
|---|---|
| 인수인계서 HTML 만들기, 메모가 섞여도 다음 담당자 할 일이 보이게 (0) | 2026.09.28 |
| 지출 CSV 가계부, 빈 항목·잘못된 금액을 한 화면에서 찾는 단일 HTML (0) | 2026.09.26 |
| 설문 CSV 요약 도구 만들기, 엑셀에서 세지 말고 파일 한 장으로 비율 보기 (0) | 2026.09.25 |
| 휴가 캘린더 만들기, 팀원 일정이 겹칠 때 먼저 보이게 하는 HTML (0) | 2026.09.22 |
댓글