일정 달력 만들기 — 월간·주간, 바이브 코딩으로

💻 완성 소스: github.com/cwkim83/calendar-template — index.html 과 날짜 계산을 맡은 cal.js. 내려받아 index.html 을 더블클릭하면 열리고, 데이터는 내 브라우저 안에만 저장됩니다(백업은 JSON 내보내기).
© 2026 crazy4eu (cwkim83) · 코드는 개인·사내·교육용 자유, 판매 금지 — 맨 아래 「저작권 · 라이선스」

「멋진 일정 달력 만들어 줘」 한마디로 시키지 않고, 기능 한 가지씩 말하고 → 브라우저에서 열어 보고 → 이상한 곳을 말합니다. 이렇게 말로 만드는 방식을 바이브 코딩이라고 부릅니다. 아래 말을 순서대로 한 줄씩 치면 됩니다. (클로드의 답은 2026-10-13 에 빈 폴더에서 같은 여덟 마디를 순서대로 쳐서 실제로 받은 것을 줄였고, 줄인 곳은 「…」로 표시했습니다. 같은 말을 해도 내 화면의 모양과 문장은 다르게 나오고, 클로드가 시키지 않은 것까지 넣는 일도 흔합니다.)

시작 전에

• 빈 폴더 하나를 만들고(이름은 영문으로, 예: 문서 폴더 안 calendar-practice), 그 폴더에서 클로드(Claude Code)를 엽니다. 여는 법과 승인 방식은 02편 「시작 전에」와 같습니다.
• 크롬·엣지 같은 브라우저가 필요합니다. 클로드는 브라우저를 직접 보지 못합니다. 여덟 번 모두 클로드가 「브라우저에서 직접 열어 확인하지는 못했다」고 답했습니다. 클로드가 index.html 을 고치면 내가 새로고침(F5)해서 보고 이상한 곳을 말합니다. 이 왕복이 이 편의 전부입니다.
• 클로드가 파일을 만들거나 고치려고 허락을 물으면 무엇을 하는지 읽고 허락하세요. 이 편에서는 폴더 안 index.html 하나만 만들고 고칩니다. 저는 파일 고치기만 허락하고 돌려서, 클로드가 node 로 문법 검사를 하려던 명령은 실행되지 않았습니다(2·5·6단계).
• 인터넷은 필요 없습니다. 여덟 단계의 파일 모두 인터넷 주소를 쓰지 않았습니다.
• 「오늘」은 내 컴퓨터의 오늘 날짜라서 내 화면은 이 글(10월)과 다릅니다. 클로드의 답도 글자 하나까지 같지는 않으니, 단계마다 쓴 「이렇게 나오면 성공」 표시만 맞으면 다음으로 가세요.

1단계 · 이번 달 달력 한 장을 한 파일로

먼저 가장 작은 모양을 만듭니다. 달력 하나, 파일도 하나(index.html)입니다. 「한 파일」이라고 꼭 말해 두세요. 더블클릭 한 번으로 열립니다.

✅ 이렇게 나오면 성공 — 폴더에 index.html 이 생기고, 더블클릭하면 「2026년 10월」 같은 달력이 열려 오늘 날짜에 파란 동그라미가 있습니다. 「다음 달 ▶」「◀ 이전 달」로 달이 바뀌고, 12월에서 넘기면 「2027년 1월」이 됩니다. 아직 일정은 넣을 수 없는 작은 달력(폭 420px)입니다.

2단계 · 날짜를 눌러 일정 넣기

이제 날짜 칸을 눌렀을 때 일정을 적는 창을 답니다.

✅ 이렇게 나오면 성공 — 날짜 칸을 누르면 제목·시작과 끝 시각·장소·메모 칸이 있는 창이 뜨고, 저장하면 그 칸에 「09:00 주간 회의」 같은 작은 막대가 생깁니다. 막대를 누르면 같은 창에서 고치거나 지울 수 있습니다. 제목을 비우거나 끝 시각을 시작보다 앞으로 하면 저장되지 않고 이유가 뜹니다. 클로드는 시키지 않은 저장까지 이 단계에서 이미 해 두었습니다(5단계에서 다시 나옵니다).

3단계 · 월 보기와 주 보기

한 달이 한눈에 보이는 월 보기와, 일주일을 크게 보여 주는 주 보기를 오가게 합니다.

✅ 이렇게 나오면 성공 — 위쪽에 「월 | 주」 단추가 생기고, 「주」를 누르면 오늘이 든 주(「2026년 10월 11일 – 17일」)의 7칸이 나옵니다. 일정마다 시각·제목·장소가 다 보이고, 이전·다음 단추는 「이전 주 / 다음 주」로 바뀌어 일주일씩 움직입니다. 마지막 줄의 시간표 모양 제안은 아래 「더 쉽게」 예시와 같은 방향입니다.

4단계 · 여러 날에 걸친 일정

출장이나 휴가는 하루가 아닙니다. 걸친 날마다 칸에 보여야 합니다.

✅ 이렇게 나오면 성공 — 일정 창에 「시작 날짜」「끝 날짜」 칸이 생깁니다. 15일에서 끝 날짜를 17일로 하면 15·16·17일 세 칸에 주황색 「부산 출장 (1/3일)」「(2/3일)」「(3/3일)」이 보이고, 어느 칸의 막대를 눌러도 같은 일정이 열립니다. 10월 30일~11월 2일처럼 달을 넘겨도 양쪽 달에 보입니다. 끝 날짜를 시작보다 앞으로 하면 저장되지 않습니다. 칸마다 따로 막대가 생기는 방식이고, 한 줄로 쭉 이어지지는 않습니다.

5단계 · 새로고침해도 남게 — JSON 백업

일정이 새로고침해도 남는 것은 2단계부터였습니다. 이 단계에서는 파일로 옮겨 두는 길(JSON 내보내기·불러오기)을 답니다. 서버도 계정도 필요 없습니다.

✅ 이렇게 나오면 성공 — 일정을 넣고 새로고침(F5)해도 그대로입니다. 「JSON 내보내기」를 누르면 calendar-날짜.json 이 내려받아지고, 같은 파일을 「JSON 불러오기」로 다시 고르면 「일정 0개를 새로 넣고, 2개를 파일 내용으로 바꿨습니다.」처럼 알려 주며 일정이 두 번 생기지 않습니다. 저장이 막히면 빨간 안내가 뜹니다. 구멍이 하나 있습니다. 정상 1개와 이상한 4개를 섞은 파일을 불러오니, 2개(제목 없음, 「2026/10/24」)는 말없이 버려지고 「2026-02-31」과 시각 「25:99」는 그대로 받아들여졌습니다. 알림은 「3개를 새로 넣고」 한 줄뿐이었습니다. 다음 단계가 이 구멍입니다.

6단계 · 잘못된 날짜·시각 거르기

사람이 적은 값에도, 불러온 파일에도 이상한 값이 섞일 수 있습니다. 「안 된다」만 알려 주면 어디를 고칠지 모릅니다. 이유를 쉬운 말로 알려 달라고 하세요.

✅ 이렇게 나오면 성공 — 제목을 비우고 저장하면 「저장하지 않았어요. · 제목이 비어 있어요.」, 끝 날짜를 시작보다 앞으로 하면 「끝 날짜(2026년 10월 12일)가 시작 날짜(2026년 10월 13일)보다 앞이에요…」가 뜨고 창은 열려 있습니다. 이상한 항목이 든 파일을 불러오면(내보낸 JSON 을 메모장으로 열어 날짜 하나를 2026-02-31 로 고쳐 저장하면 됩니다) 「3번째 일정 「2월 31일 일정」: … 2026년 2월은 28일까지 있어요」처럼 몇 번째 일정이 왜 틀렸는지 알려 주고 아무것도 불러오지 않습니다. 단, 클로드가 직접 밝혔듯이 이미 저장돼 있던 이상한 항목은 알림 없이 화면에서만 빠집니다(제 시험에서 저장돼 있던 3개 중 2개). 이 편에서 가장 조심할 곳이라 아래 「내가 만들 때는」에서 다시 말합니다.

7단계 · 휴대폰 화면

휴대폰으로도 일정을 보려면 좁은 화면에 맞춰야 합니다. 브라우저 창 폭을 600px 아래로 줄여 보면 휴대폰과 같은 모양이 됩니다.

✅ 이렇게 나오면 성공 — 창을 좁히면 옆으로 밀지 않아도 7칸이 한 화면에 들어오고, 주 보기는 「13 화요일 …」처럼 하루씩 세로로 늘어서며, 일정 창도 화면 안에 들어옵니다. 제 시험(폭 375px 흉내)에서 문서 폭이 화면 폭과 같았습니다. 클로드의 말과 다른 곳이 있습니다. 「제목이 서너 글자 정도 보인다」고 했지만, 하루에 일정이 여럿이면 칸 안에는 「09:00 …」처럼 시각만 보였습니다. 실제 휴대폰으로 열어 본 것은 아닙니다.

8단계 · 이상한 것을 보면 화면 그대로 말하기

여기까지 오면 쓸 만한 달력이 됩니다. 마지막은 고쳐 달라고 말하는 법입니다. 휴대폰 폭에서 하루에 일정을 네 개쯤 넣고 월 보기를 보세요. 칸에 「09:00 …」「12:00 …」만 보여서 무슨 일정인지 알 수 없습니다. 클로드는 이 화면을 볼 수 없으니, 내가 본 것 그대로, 원하는 모양까지 말하세요.

✅ 이렇게 나오면 성공 — 좁은 화면의 월 보기에서 일정이 칸마다 점(하루 일정 파랑, 여러 날 주황)으로 줄고, 날짜를 누르면 달력 아래에 「10월 13일 화요일」과 그날 일정 목록(시각·제목·장소)이 나옵니다. 제 시험에서는 일정 4개인 날에 점 3개와 「+1」이 보였습니다(클로드가 든 「+2」는 예시입니다). 목록의 일정을 누르면 고치는 창이 열리고, 일정 없는 날은 「이 날은 일정이 없어요.」가 나옵니다. 넓은 화면은 전과 같이 칸 안에 막대입니다.

고친 것이 오히려 나빠졌다면, 같은 대화에서 이렇게 말하세요. 「방금 고친 건 취소하고 바로 전 상태로 돌려 줘. 무엇을 되돌렸는지 말해 줘.」 (이 말은 이 편에서 시험하지 않았습니다.) 더 든든하게 하려면 고치기 전에 저장 지점을 만들어 두는 17편을 먼저 해 두세요.

더 쉽게 — 템플릿 받아서 고치기

처음부터 만들 시간이 없다면, 제가 만든 달력 파일을 받아서 시작해도 됩니다. 위 단계들과 같은 종류의 달력(월·주 보기, 일정 창, 저장과 JSON 백업)이 든 index.html 과 cal.js(날짜 계산) 두 파일입니다. 설치도 서버도 필요 없습니다.

1. github.com/cwkim83/calendar-template 을 엽니다. 초록색 Code 단추를 누르고 Download ZIP 을 고릅니다(GitHub 공식 안내). ZIP 을 풀면 나오는 index.html 과 cal.js 를 같은 영문 이름 폴더에 두세요.
2. index.html 을 더블클릭하면 브라우저에서 열립니다. 먼저 구경하고 싶으면 🧪 예시 넣기 를 누르세요. 고친 내용은 이 브라우저 안에만 저장됩니다. 다른 브라우저나 다른 PC 에서는 안 보이니, 중요한 일정은 JSON 내보내기로 파일을 따로 받아 두세요.
3. 고치고 싶은 곳이 있으면 그 폴더에서 클로드를 열고 말로 시킵니다. 고치기 전에 두 파일을 복사해 두거나 17편처럼 저장 지점을 만들어 두면, 망가져도 돌아올 수 있습니다.

위 세 말은 템플릿 안내(README)에 예시로 든 것이고, 이 편에서 제가 돌려 본 것은 아닙니다. 결과가 마음에 안 들면 같은 대화에서 「방금 것을 취소하고, 시간표는 8시부터 보이게 해 줘」처럼 본 대로 말하세요.

다 됐습니다 — 이제 이렇게 말하면 됩니다

항상 index.html 이 든 폴더에서 클로드를 열고 이야기합니다.

• 「주 시작을 월요일로 바꿔 줘.」
• 「일정마다 색을 고를 수 있게 해 줘.」
• 「매주 반복되는 일정을 넣을 수 있게 해 줘.」
• 「이 달력을 처음 쓰는 사람용 사용법을 index.html 맨 아래에 써 줘.」

위 말은 예시이고 이 편에서 돌려 본 것은 아닙니다. 고치기 전에 index.html 을 복사해 두세요.

막히면

1. 내가 시키지 않은 기능이 들어왔다 → 1~5단계에서 실제로 그랬습니다. 「오늘로 이동」 단추, 일정 고치기·지우기, 저장, 다른 탭과 맞추기 같은 것이 말없이 들어왔습니다. 필요 없으면: "오늘로 이동 단추는 빼 줘." 무엇이 있는지 모르겠으면: "지금 달력에 있는 기능과 없는 기능을 목록으로 알려 줘." (둘 다 시험하지 않았습니다.)
2. 일정이 사라졌다 / 다른 브라우저에서 안 보인다 → 저장은 이 브라우저 안에만 됩니다(2·5단계). 브라우저의 「사이트 데이터 지우기」를 하면 일정도 함께 지워집니다. 원래 쓰던 곳에서 JSON 내보내기를 해 두었다가 새 곳에서 JSON 불러오기를 하세요.
3. 클로드가 「확인하지 못했다」고 한다 → 정상입니다. 클로드는 브라우저를 못 봅니다. 내가 열어 보고 본 대로 말하세요. 5·6단계에서 클로드는 처음 쓴 코드가 저장된 일정을 못 읽어 빈 달력이 보일 뻔했다며 스스로 고쳤다고 했고, 고쳐진 파일은 제 시험에서 저장된 일정을 잘 읽었습니다. 내 화면이 비어 있으면: "새로고침하면 달력이 비어 있어. 저장된 일정을 못 읽는지 확인해 줘." (시험하지 않았습니다.)
4. 저장해 둔 일정이 말없이 안 보인다 → 6단계에서 클로드가 밝힌 한계입니다(이미 저장된 이상한 항목은 알림 없이 빠짐). 이렇게 말하세요: "저장된 일정 중 형식이 이상해서 화면에서 뺀 것이 있으면, 몇 개를 왜 뺐는지 달력 위에 알려 줘. 원본은 지우지 말고 남겨 줘." (이 말은 시험하지 않았습니다. 「한 번에 맡기기」의 긴 말은 이 칸까지 시켜서 그대로 되었습니다.)
5. 클로드가 말한 설명과 화면이 다르다 → 7단계에서 실제로 그랬습니다(「제목이 서너 글자 보인다」 ↔ 시각만 보임. 「긴 제목이면 달력이 옆으로 밀렸다」는 고치기 전 파일에서도 제 시험에서는 밀리지 않아 확인하지 못했습니다). 화면이 진짜입니다: "화면에는 이렇게 보이는데 설명과 달라. 어느 쪽이 맞는지 코드를 보고 알려 줘." (이 말은 시험하지 않았습니다.)
6. 막대가 한 줄로 안 이어진다 / 주 보기가 시간표 모양이 아니다 → 3·4단계에서 클로드가 직접 다른 모양(시간표 모양 주 보기, 길게 이어지는 막대)을 제안했습니다. 원하면 "그렇게 바꿔 줘"라고 하세요. 코드가 복잡해진다고 했으니 복사본을 먼저 만들어 두세요.
7. 고쳤더니 전에 되던 것이 안 된다 → 8단계의 「취소하고 바로 전 상태로」 말, 또는 17편의 저장 지점으로 돌아가세요. 방금 말한 것만 담아 새 대화로 다시 시키는 것도 방법입니다.

한 번에 맡기기 (익숙해진 다음에)

역할: 너는 내 PC 에서 일하는 도우미다. 이 폴더에 일정 달력 프로그램을 index.html 한 파일로 만들어 준다. 나는 초보자이니 어려운 말은 풀어서 말해 줘.

맥락: 지금 열려 있는 폴더가 작업 폴더다. 결과물은 index.html 하나(HTML·CSS·자바스크립트만)이고, 더블클릭하면 브라우저에서 열려야 한다. 서버·설치·계정은 없다. 데이터는 이 브라우저(localStorage)에만 저장한다. 예시 일정은 가짜 이름으로 <예시 주제: 예 사무실 이전 준비> 에 맞춰 만든다.

입력: <운영체제>, <쓰는 브라우저>

작업:
① 확인 — 폴더에 index.html 이 이미 있으면 덮어쓰지 말고 멈춰서 어떻게 할지 묻는다.
② 월 보기 — 한 달씩 보여 주고, 오늘을 표시하고, 이전 달·다음 달·오늘 단추를 단다.
③ 일정 넣기 — 날짜 칸을 누르면 창이 뜬다(제목·시작 날짜·시작 시각·끝 날짜·끝 시각·장소·메모). 일정을 누르면 고치기·지우기(지우기 전에 먼저 묻는다).
④ 여러 날 — 끝 날짜가 시작 날짜보다 뒤면 걸친 모든 날 칸에 보인다.
⑤ 주 보기 — 월/주 전환 단추. 주 보기는 일주일을 한 화면에 보여 준다.
⑥ 저장 — 고칠 때마다 이 브라우저에 저장해 새로고침해도 남게 한다. 저장이 안 되면 화면에 경고를 띄운다(조용히 넘기지 않는다). JSON 내보내기·불러오기 단추를 단다.
⑦ 거르기 — 저장할 때와 JSON 을 불러올 때, 없는 날짜(2월 31일 등)·이상한 시각·끝이 시작보다 빠른 경우를 검사하고 이유를 쉬운 말로 알린다. 이미 저장된 자료에 이상한 항목이 섞여 있으면 화면을 멈추지 말고 그 항목만 건너뛰되, 몇 개를 왜 건너뛰었는지 화면에 알린다.
⑧ 휴대폰 — 폭 600px 이하에서는 옆으로 밀지 않아도 되고, 월 보기는 점으로 줄이고 날짜를 누르면 그날 목록이 보인다.
⑨ 마무리 — 초보자 눈높이로 무엇이 됐고, 어떻게 열고, 고치고 싶을 때 어떻게 말하면 되는지 설명한다.

제약: 아무것도 설치하지 않는다. 사람이 입력한 글(제목 등)을 화면에 넣을 때는 HTML 로 그대로 넣지 말고 글자로만 보이게(이스케이프) 한다. 비밀키·토큰·개인정보를 넣지 않는다. 이 폴더 밖의 파일은 읽지도 쓰지도 않는다. 인터넷 주소는 쓰지 않는다.

출력: 만든 파일, 열어 보는 법, 기능별로 된 것과 안 된 것, 남은 문제.

검증: 아래를 코드로 다시 확인해 모두 맞아야 "완료"라고 보고한다. 하나라도 안 맞으면 완료로 보고하지 말 것.
 (가) index.html 하나뿐이고 더블클릭으로 열린다. 인터넷 주소가 없다.
 (나) 3일짜리 일정은 3일 칸에 모두 보인다.
 (다) 일정을 넣고 새로고침해도 그대로 남는다.
 (라) 끝 날짜가 시작 날짜보다 빠르면 저장되지 않고 이유가 보인다.
 (마) 제목에 <b>글</b> 을 넣어도 굵은 글씨가 아니라 글자 그대로 보인다.
 (바) 저장된 자료에 이상한 항목(2월 31일 등)이 섞여 있어도 화면은 멈추지 않고, 나머지 일정은 보이고, 건너뛴 항목이 화면에 알려진다.

내가 만들 때는

이 달력은 개인 AI 비서 「Sancho」를 만드는 강좌 2편에서 만들었습니다. 10월 6일에 Claude 데스크톱 앱의 Code 탭에 이렇게 시켰습니다(줄이고 쉬운 말로 풀었습니다). 「일정 메뉴를 만들어 줘. 월 보기 / 주 보기 전환, 오늘 표시, 이전·다음 달. 칸을 누르면 일정 추가 창, 일정을 누르면 수정·삭제. 할 일의 마감일도 작은 점으로. 파일이 바뀌면 새로고침 없이 반영.」 한 번에 길게 시킨 말입니다. 이 편은 같은 일을 짧은 말 여덟 마디로 나눈 것입니다.

Sancho 의 달력은 자기 데이터를 갖고 있지 않습니다. 일정은 서버 폴더의 파일 하나(data/db/events.json)에 있고, 달력은 그 파일을 읽어 그립니다(사람이 칸을 눌러 고치면 같은 파일에 씁니다). 비서(AI)에게 「내일 오후 세 시에 … 일정 잡아줘」라고 하면 비서가 같은 파일을 직접 고치고, 열려 있는 달력이 새로고침 없이 따라 바뀝니다. 비서가 일정을 「기억」하는 방법이 따로 있는 것이 아니라, 그 파일에 적는 것이 전부입니다. 비서에게 준 것은 도구가 아니라 규칙 문서입니다. 날짜는 YYYY-MM-DD, 시각은 HH:MM, 끝 시각을 모르면 시작 한 시간 뒤로 하고 그렇게 했다고 알리기, 미룰 때는 길이 유지하기, 지우기 전에 먼저 묻기. 정해진 시각에 비서가 일하는 「예약」은 이 파일이 아니라 Sancho 4편의 data/schedule.json 입니다. 템플릿에는 서버가 없어서 비서가 파일을 고치는 길, 「✳ 비서에게 시키기」 단추, 파일 감시는 뺐습니다. 날짜 계산(cal.js)과 화면을 나눈 구조는 같습니다.

조용히 사라지는 일정. 같은 날 밤, Opus 에게 점검을 시켜 틀린 일정을 섞어 넣어 보게 했습니다. 날짜가 「2026/10/07」이나 「10월 7일」이거나 끝 날짜가 시작보다 빠르면, 달력과 대시보드에서 경고 없이 사라졌습니다. 비서가 파일을 직접 고치는 구조라 형식을 어긴 일정이 들어올 수 있고, 그러면 그 일정은 그냥 안 보입니다. 안 보이니 틀린 줄도 모릅니다. 그래서 날짜·시각·번호의 모양을 검사해 틀린 항목은 계산에서 빼 멈추지 않고 건너뛰되, 화면 위에 「형식이 맞지 않아 제대로 안 보이는 항목 N개」와 항목마다 이유를 알리게 했습니다(cal.js 의 problems()). 일정 창에서 저장을 누를 때는 따로 쉬운 말(「종료 날짜가 시작 날짜보다 빨라요.」)로 막습니다. 이때 추가한 자동 시험은 고치기 전 코드에서는 실패하는 것도 확인했습니다.

이 편의 6단계가 그 두 겹(저장할 때 막기, 이미 있는 것은 건너뛰며 알리기)입니다. 6단계의 클로드는 앞의 겹만 만들었고, 한 번에 맡기기의 긴 말은 ⑦·(바) 줄로 뒤의 겹까지 시켜서 만들어졌습니다. 빠진 곳은 클로드가 먼저 알려 주지 않으니, 「이상한 값이 들어오면 어떻게 보이나」를 내가 먼저 물어야 합니다.

휴대폰은 10월 7일에 붙였습니다. 이 편의 7·8단계처럼 폰에서는 월 보기를 점·색 줄로 줄이고, 날짜를 누르면 그 주의 세로 목록을 보여 주며, 「＋ 추가」 단추를 따로 두었습니다.

→ 비서가 일정을 잡는 과정은 Sancho 2편의 6단계 「말로 일정 잡기」에서, 예약은 4편에서 보세요.

저작권 · 라이선스

• 이 글: 아래 저작권 칸을 따릅니다.
• 달력 코드(calendar-template): 개인·사내·교육용으로 자유롭게 쓰고 고쳐 쓸 수 있습니다. 판매는 금지입니다.