극초보 바이브코딩 #14 · HTML 파일 하나

기념일 D-Day 계산기 만들기

"이틀 전에야 생각남"을 끝내는 페이지. 13화에서 배운 저장에 날짜 계산을 더해요. 날짜 계산에는 AI도 자주 헷갈리는 함정이 세 개 있어요.

바로 쓰기: 기념일 D-Day

    가까운 순으로 보여 줘요. 계산은 오늘 날짜와 기념일 날짜끼리만 비교해서, 몇 시에 열어도 똑같아요. 목록은 이 브라우저 안에만 저장되고 밖으로 보내지 않아요. 가족의 실제 생년월일은 본인 확인에 쓰이는 정보라 연도 없이 월·일만 맞춰 넣는 것도 방법이에요.

    며칠째일까

    1AI에게 세 줄로 요청하기

    기념일을 이틀 전에야 생각나 허둥대던 직장인이, D-Day 목록 화면으로 미리 알고 선물을 준비하는 그림
    HTML 파일 하나로, 기념일 체크 페이지를 만들어줘.
    이름과 날짜를 입력해서 추가하면 목록에 쌓이고, 오늘부터 며칠 남았는지 D-12 같은 모양으로 보여줘.
    인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

    저장·매년 반복·정렬·오늘 강조는 일부러 말하지 않았어요. 연습할 때는 실제 가족의 생년월일 대신 가짜 날짜를 쓰세요.

    2연습장에서 실행하기

    처음 확인은 간단해요. 오늘·내일·어제 날짜를 넣어서 D-Day / D-1 / D+1이 나오면 성공이에요. 연습장의 자동 검사는 시계를 바꿔 가며 새벽 0시 30분, 아침 8시 59분, 밤 11시 30분에도 계산이 맞는지 확인해요. 아침까지 기다리지 않아도 돼요.

    3미션: 하루도 어긋나지 않는 달력

    1. 기본: 오늘·내일·어제

      오늘은 D-Day, 내일은 D-1, 어제는 D+1. 자동 검사는 오후 3시로 시계를 맞춰 확인해요.

    2. 몇 시에 열어도 맞을까 ⭐

      AI에게 "남은 날짜를 어떻게 계산해? 지금 시각(시·분)이 계산에 영향을 주지는 않아? 코드 말고 말로 설명해줘."라고 물어보세요. 아침에만, 또는 밤에만 하루 어긋난다면 힌트: "지금 시각은 무시하고, 오늘 날짜와 기념일 날짜끼리만 비교해서 며칠 차이인지 계산해줘."

    3. 새로고침해도 남게

      13화에서 한 거예요. "13화처럼 새로고침하거나 브라우저를 닫았다 열어도 기념일이 그대로 남게 해줘."

    4. 매년 돌아오는 기념일 + 2월 29일

      "매년 반복" 체크칸을 만들고, 올해 날짜가 지났으면 내년 날짜로. 2월 29일 생일은 평년에 2월 28일로 볼지 3월 1일로 볼지 직접 정해서 말하세요. 정답이 하나가 아니라 내가 정하는 규칙이에요.

    5. 가까운 순으로, 오늘은 눈에 띄게

      힌트: 정렬 기준은 "남은 날짜가 적은 순". 매년 반복 항목은 "다음에 오는 날짜" 기준으로 비교하라고 말해야 해요. 오늘인 항목은 색을 다르게.

    6. 자유

      만난 지 100일·1000일 날짜 (아래 실험 ③을 먼저 보세요), 기념일 메모, N주년 표시, 입사일 기준 오늘이 며칠째인지

    안 될 때 확인할 것

    증상원인과 해결
    아침에만(또는 밤에만) 하루가 어긋난다 / 오늘인데 D-1지금 시각을 섞어서 계산했어요. "시각은 무시하고 날짜끼리만 비교해줘"
    기념일이 한 달씩 밀려 나온다프로그램은 달을 0부터 세기도 해요(11월이 10). "달 숫자를 1월=1, 12월=12가 되게 확인해줘"
    2월 29일이 3월 1일로 나온다없는 날짜를 만들면 조용히 다음 날로 넘어가요. "평년에는 2월 28일(또는 3월 1일)로 계산해줘"
    100일이 하루 어긋난다시작한 날을 1일로 셀지 말하지 않았어요. "만난 날을 1일로 세서 100일째 날짜를 계산해줘"
    생일이 지났는데 D+120처럼 나온다매년 돌아오는 날짜를 다시 계산하지 않았어요. "지났으면 내년 날짜 기준으로 보여줘"
    날짜를 글자로 직접 쳐야 한다"날짜는 달력으로 고르는 입력칸으로 만들어줘"
    새로고침하니 목록이 사라졌다미션 3. 파일로 저장해서 더블클릭으로 열어 확인 (#13 참고)
    미션을 요청했더니 원래 기능이 사라졌다"기존 기능은 그대로 두고, 전체 코드를 처음부터 끝까지 줘"

    실험 ①: "지금 시각"을 섞으면 하루가 어긋나요

    지금 시각을 섞으면 아침에는 내일까지 2일로 틀리고, 날짜끼리만 비교하면 아침이든 오후든 1일로 맞는 그림

    흔한 계산은 "내일 날짜 − 지금 시각"을 24시간으로 나누는 거예요. 소수점이 생기니 올림·내림·반올림 중 하나를 쓰죠. 아래 표는 이 브라우저가 오늘 날짜에 시계만 바꿔 가며 "내일까지 며칠?"을 실제로 계산한 값이에요. 정답은 모두 1일이에요.

    원인은 날짜만 쓴 값(2026-10-27)을 컴퓨터가 영국 시간 0시로 읽기 때문이에요. 한국 시간으로는 오전 9시죠. "내일 오전 9시"와 "지금"을 비교하니 오전 9시를 기준으로 답이 뒤집혀요. 원문에서는 오전 0:30~8:59에 "오늘 날짜"를 영국 기준 표기로 뽑으면 어제 날짜가 나오는 것도 확인했어요. (AI가 첫 요청에서 정말 이 식을 쓰는지는 확인하지 못했어요. 그래서 미션 2에서 직접 물어보는 거예요.)

    실험 ②: 달은 0부터, 없는 날짜는 다음 날로

    윤년 2월에는 29일이 있고 평년 2월에는 없어서, 2월 29일 생일을 평년에 2월 28일로 볼지 3월 1일로 볼지 정해야 한다는 그림

    달을 0부터 세는 방식(1월=0)이 있어서 사람이 아는 "11월"과 한 칸 어긋나요. 그리고 없는 날짜를 만들면 에러 없이 조용히 다음 날로 넘어가요. 2월 29일 생일을 평년에 어떻게 볼지는 정해진 답이 없어서, 미션 4처럼 직접 정해서 말해야 해요.

    실험 ③: "100일째"는 세는 법을 정해야 해요

    한국에서 "100일"은 보통 만난 날을 1일로 세서 100번째 날이에요. 그러면 시작일에 99일을 더한 날이 100일이죠. "100일 뒤"를 그대로 계산하면 하루 늦어져요. 누가 틀린 게 아니라, 어느 쪽으로 셀지 말하지 않아서 생기는 일이에요. (세는 방식은 문화나 사람마다 다를 수 있어요.)

    한 걸음 더: 열지 않아도 알려 주는 기념일

    오늘 만든 페이지는 열어 봐야 알 수 있어요. 진짜 쓸모는 내가 열지 않아도 "내일이 엄마 생신이에요"라고 알려 주는 것이죠. 그건 파이썬 같은 언어로 매일 아침 확인하고 폰으로 보내는 일이에요. 먼저 이렇게 물어보세요. "기념일 목록을 파일에 저장해 두고, 매일 아침 오늘이나 내일 기념일이 있으면 폰으로 알려주는 파이썬 프로그램은 어떤 부품들로 구성돼? 코드 말고 구성만 말로 설명해줘." 알림을 보내는 순간 기념일이 바깥 서비스를 거치게 되니, 알림 문구에 실명이나 생년월일 전체는 넣지 마세요.

    블로그 원문: [극초보 바이브코딩 #14] 기념일 D-Day (실행 방법 그림 설명, 직접 잰 결과 캡처)

    이전 실습: #13 할 일 체크리스트 · 다음: #15 랜덤 추첨기 · 전체 실습 목록

    자주 묻는 질문

    D-Day는 몇 시를 기준으로 바뀌나요?

    이 페이지는 내 컴퓨터 시계의 날짜가 바뀌는 자정에 바뀌어요. 시각은 계산에 쓰지 않아요.

    2월 29일 생일은 평년에 언제로 계산하나요?

    정해진 답이 없어서 2월 28일과 3월 1일 중 고를 수 있게 했어요. 기본은 2월 28일이에요.

    100일은 시작일에 며칠을 더하나요?

    시작한 날을 1일로 세면 99일을 더한 날이 100일째예요. 0일로 세면 100일을 더해요.