💬말로 만드는 AI▶ 유튜브
⚡ 따라 하기 · 20

프로젝트 일정표(WBS) 만들기 — 바이브 코딩으로

이 페이지 목차시작 전에1단계 · 표 한 장을 한 파일로2단계 · 큰 묶음과 작은 일 — 단계(들여쓰기)3단계 · 간트 막대4단계 · 묶음 행의 진도는 자동으로 — 직접 못 고치게5단계 · 작업 더하고 지우기6단계 · 새로고침해도 남게 — 자동 저장 표시와 JSON 백업7단계 · 엑셀과 PDF 로 뽑기8단계 · 이상한 것을 보면 화면 그대로 말하기더 쉽게 — 템플릿 받아서 고치기다 됐습니다 — 이제 이렇게 말하면 됩니다막히면한 번에 맡기기 (익숙해진 다음에)내가 만들 때는저작권 · 라이선스

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

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

시작 전에

  • 빈 폴더 하나를 만들고(이름은 영문으로, 예: 문서 폴더 안 wbs-practice), 그 폴더에서 클로드(Claude Code)를 엽니다. 여는 법과 승인 방식은 02편 「시작 전에」와 같습니다.
  • 크롬·엣지 같은 브라우저가 필요합니다. 클로드는 브라우저를 직접 보지 못합니다. 여덟 번 모두 클로드가 「브라우저에서 열어 확인하지는 못했다」고 답했습니다. 클로드가 index.html 을 고치면 내가 새로고침(F5)해서 보고 이상한 곳을 말합니다. 이 왕복이 이 편의 전부입니다.
  • 클로드가 파일을 만들거나 고치려고 허락을 물으면 무엇을 하는지 읽고 허락하세요. 이 편에서는 폴더 안 index.html 하나만 만들고 고칩니다. 저는 파일 고치기만 허락하고 돌려서, 클로드가 node 로 점검하려던 명령은 실행되지 않았습니다(2·7단계).
  • 7단계의 엑셀·PDF 단추는 처음 누를 때 필요한 도구를 인터넷에서 받아 옵니다. 그때만 인터넷이 필요하고, 나머지는 인터넷 없이 돕니다.
  • 예시 작업의 날짜는 클로드가 정하고, 상태와 오늘 선은 오늘 날짜로 계산됩니다. 내 화면의 숫자는 이 글과 다를 수밖에 없습니다.
  • 클로드의 답이 글자 하나까지 같지는 않을 것입니다. 단계마다 쓴 「이렇게 나오면 성공」 표시만 맞으면 다음으로 가세요.
준비물 자세히 (용어)
  • WBS(작업 분해 구조)는 큰 일을 작은 작업으로 쪼개 표로 만든 일정표입니다. 이 편에서는 큰 묶음을 대단락 → 중단락 → 작업 세 단계로 나눕니다.
  • 간트 차트는 표의 시작일·종료일을 막대로 그린 그림입니다. 막대의 진한 부분이 진도(%)입니다.
  • 바이브 코딩은 코드를 직접 쓰지 않고 하고 싶은 일을 말로 하면 AI 가 코드를 쓰고, 사람은 결과를 보고 고칠 곳을 말하는 방식입니다.
  • 브라우저 저장소(localStorage)는 브라우저 안에 작은 데이터를 남겨 두는 기능입니다. 서버가 필요 없는 대신, 저장한 브라우저에서만 보입니다.
  • JSON은 데이터를 글자로 적은 파일 형식입니다. 이 편에서는 일정표를 통째로 담는 백업 파일입니다.

1단계 · 표 한 장을 한 파일로

먼저 가장 작은 모양을 만듭니다. 표 하나, 파일도 하나(index.html)입니다. 「한 파일」이라고 꼭 말해 두세요. 더블클릭 한 번으로 열립니다. 시킨 것은 네 칸뿐인데 클로드는 상태 칸·요약 카드·작은 막대까지 알아서 넣었습니다. 이런 일이 흔합니다.

✅ 이렇게 나오면 성공 — 폴더에 index.html 이 생기고, 더블클릭하면 6줄짜리 표와 위쪽 요약 카드가 열립니다. 이 단계의 표는 보기만 하는 표라 진도를 화면에서 바꿀 수는 없습니다(4단계에서 생깁니다). 작업 이름·날짜·상태 글자는 클로드마다, 날짜마다 다릅니다.

2단계 · 큰 묶음과 작은 일 — 단계(들여쓰기)

WBS 의 핵심은 큰 일을 작은 일로 쪼개 위아래로 묶는 것입니다. 줄마다 단계 숫자 하나(1 = 대단락, 2 = 중단락, 3 = 작업)와 줄 순서만으로 위아래를 정합니다. 제 파일도 같은 방식입니다(제 파일은 lv, 클로드는 level 이라고 불렀습니다).

✅ 이렇게 나오면 성공 — 새로고침(F5)하면 작업명 앞에 WBS 번호(1, 1.1, 1.1.1)가 붙고, 작업명이 단계만큼 안쪽으로 들어가 있습니다. 대단락·중단락의 날짜와 진도는 아래 작업에서 저절로 계산되어 있습니다. 「단계」 칸은 아직 보기만 하는 칸이라, 바꾸려면 파일 안 level 숫자를 고칩니다.

3단계 · 간트 막대

간트(막대로 보는 일정)는 표의 날짜를 그림으로 바꾼 것입니다. 1단계의 작은 막대를 날짜 칸이 있는 간트로 키웁니다. 이미 있는 것을 키워 달라는 것도 같은 방식으로 말하면 됩니다.

✅ 이렇게 나오면 성공 — 표 오른쪽에 월·날짜 칸이 있는 간트가 보이고, 막대는 진도만큼 진한 색, 남은 기간은 연한 색입니다. 주말은 옅게, 오늘은 빨간 세로선으로 보입니다. 처음 열면 오늘 근처로 저절로 스크롤되어 시작일·종료일 칸이 왼쪽에 숨어 있을 수 있습니다(왼쪽으로 스크롤하면 나옵니다).

4단계 · 묶음 행의 진도는 자동으로 — 직접 못 고치게

대단락의 진도는 아래 작업들에서 저절로 나와야 합니다. 계산 방법을 내가 정하고 **「그 줄은 직접 못 고치게」**를 꼭 붙이세요. 묶음 행에 사람이 숫자를 적을 수 있으면 아래를 고쳐도 위가 안 움직입니다. 제가 실제로 겪었습니다(아래 「내가 만들 때는」의 v28.4.41).

✅ 이렇게 나오면 성공 — 묶음 행의 진도 칸에는 입력 칸 없이 숫자와 「자동」만 보이고, 작업 행에는 날짜 선택 칸과 진도 숫자 칸이 생깁니다. 맨 아래 작업의 진도를 바꾸면 위 행의 숫자·막대·요약 카드가 같이 바뀝니다. 제 화면에서는 「경쟁사 분석」을 100 에서 0 으로 바꾸니 「시장 조사」가 100 에서 50 으로 내려갔습니다. 계산은 이제 단순 평균입니다. 다르게 하고 싶으면 「기간이 긴 작업에 더 큰 비중을 줘」처럼 말하세요.

5단계 · 작업 더하고 지우기

4단계까지는 작업을 더하거나 지우는 일을 파일 안에서만 할 수 있었습니다. 화면에서 줄을 더하고 지우는 단추를 답니다.

✅ 이렇게 나오면 성공 — 줄마다 + 와 × 가 보이고, 작업 줄의 + 를 누르면 그 바로 아래에 「새 작업」이 생기며 번호·진도·간트가 다시 계산됩니다. 묶음 줄의 + 는 그 묶음의 맨 끝 다음에 새 묶음(과 그 밑 「새 작업」 한 줄)을 넣고, 묶음 줄의 × 는 「그 아래 N개 줄을 함께 지울까요?」라고 먼저 묻습니다. 클로드가 내 말과 다르게 한 곳을 이유와 함께 알려 준 것에 주목하세요.

6단계 · 새로고침해도 남게 — 자동 저장 표시와 JSON 백업

4~5단계에서 클로드가 이미 이 브라우저에 저장하게 해 두었지만, 저장됐는지 보이지 않고 파일로 옮길 방법도 없습니다. 저장을 눈에 보이게 하고 JSON 내보내기·불러오기 단추를 답니다. 서버도 계정도 필요 없습니다.

✅ 이렇게 나오면 성공 — 표를 고치면 단추 옆 글이 「이 브라우저에 저장됨」과 시각으로 바뀌고, 새로고침(F5)해도 그대로입니다. 「JSON 내보내기」로 받은 .json 파일이 백업입니다. 잘못된 파일을 불러오면 몇 번째 줄이 왜 틀렸는지 알려 주고 표는 그대로 둡니다. 저장이 막힌 창에서는 빨간 경고가 뜹니다. 저장 실패를 화면에 보이게 하는 일은 제가 열흘을 놓친 뒤에야 배웠습니다(아래 「내가 만들 때는」의 7/17).

7단계 · 엑셀과 PDF 로 뽑기

일정표를 메일로 보내거나 인쇄할 일이 생기면 엑셀과 PDF 가 필요합니다. 두 가지를 한 번에 부탁해도 됩니다.

✅ 이렇게 나오면 성공 — 「엑셀(.xlsx) 내려받기」를 누르면 wbs-날짜.xlsx 가 내려받아지고, 열면 작업 표와 날짜 칸을 색칠한 간트가 있습니다. 날짜는 진짜 날짜 서식이고, 묶음 칸은 계산식입니다. 「PDF 내려받기」는 인쇄 창 없이 바로 PDF 파일을 만듭니다(제 시험에서는 A3 가로 한 장, 화면을 그림으로 떠서 약 34MB). 클로드가 「직접 확인하지 못했다」고 했으니 파일을 열어 보는 것은 내 몫입니다.

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

여기까지 오면 쓸 만한 일정표가 됩니다. 마지막은 고쳐 달라고 말하는 법입니다. 어느 줄의 종료일을 시작일보다 앞 날짜로 바꿔 보세요. 시작일이 아무 말 없이 종료일과 같은 날로 바뀌고 막대가 하루짜리로 쪼그라듭니다(제 화면에서 220px → 22px). 이렇게 조용히 바뀌는 곳이 가장 위험합니다. 내가 화면에서 본 것 그대로 말하세요.

✅ 이렇게 나오면 성공 — 종료일을 시작일보다 앞 날짜로 바꾸면 그 줄이 연한 빨간색이 되고, 간트에 빨간 빗금 막대와 「날짜 오류」가 보입니다. 표 위 빨간 상자가 어느 작업이 왜 틀렸는지 알려 주고, 날짜를 바로잡으면 사라집니다. 고친 뒤에는 꼭 일부러 틀리게 넣어 보세요.

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

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

처음부터 만들 시간이 없다면, 제가 쓰는 WBS 파일을 받아서 시작해도 됩니다. 위 단계들(단계 들여쓰기·간트·진도 합산·저장·엑셀과 PDF)에 해당하는 기능이 든 index.html 한 파일입니다. 설치도 서버도 필요 없습니다. 이 편에서 만든 것보다 많은 것이 들어 있습니다(개정 번호, 계획 대비 실적 요약인 EVMS 등).

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

위 세 말은 템플릿 README 에 적어 둔 예시이고, 이 편에서 제가 돌려 본 것은 아닙니다. 결과가 마음에 안 들면 같은 대화에서 「방금 것을 취소하고, 우선순위 칸은 상태 칸 앞에 넣어 줘」처럼 화면에서 본 대로 말하세요.

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

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

  • 「기획 대단락 아래에 중단락 『법규 검토』를 만들고, 그 아래 작업 세 개를 넣어 줘.」
  • 「진도가 100% 인 줄은 글자를 회색으로 바꿔 줘.」
  • 「상태가 지연인 줄만 골라 보는 단추를 달아 줘.」
  • 「JSON 내보내기 파일 이름에 시각도 붙여 줘.」
  • 「이 일정표를 처음 쓰는 사람용 사용법을 index.html 맨 아래에 써 줘.」

위 말은 예시이고 이 편에서 돌려 본 것은 아닙니다. 고치기 전에 index.html 을 복사해 두세요. 저장해 둔 JSON 백업과 함께 두면 마음이 편합니다.

막히면

  1. 내가 시키지 않은 칸·카드가 있거나, 반대로 빠진 기능이 있다 → 1단계에서 실제로 그랬습니다. 네 칸만 시켰는데 상태 칸과 요약 카드, 작은 막대까지 들어왔습니다. 필요 없으면: "상태 칸과 위쪽 요약 카드는 빼 줘." 어떤 기능이 있고 없는지 모르겠으면: "지금 일정표에 있는 기능과 없는 기능을 목록으로 알려 줘. 내가 필요한 것을 고를게." (둘 다 시험하지 않았습니다.)
  2. 진도 칸에 입력이 안 된다 → 고장이 아닙니다. 4단계에서 묶음 행 진도를 자동 계산으로 잠갔기 때문입니다. 맨 아래 작업의 진도를 고치세요. 다른 계산을 원하면: "묶음 행의 진도는 아래 작업의 기간이 긴 만큼 더 반영되게 계산해 줘."
  3. +를 눌렀는데 새 줄이 바로 아래가 아니다 → 묶음 줄(대단락·중단락)에서 누르면 클로드 설명대로 그 묶음의 맨 끝 다음에 들어갑니다(5단계). 바로 아래에 끼우고 싶으면: "묶음 줄도 바로 아래에 끼워 줘. 원래 하위 줄은 그 줄에 그대로 붙어 있게." (이 말은 시험하지 않았습니다.)
  4. 엑셀·PDF 단추를 눌러도 파일이 안 생긴다 → 두 단추 모두 처음 누를 때 필요한 도구를 인터넷에서 받아 옵니다. 인터넷이 안 되면 안내 문구가 뜬다고 클로드가 설명했습니다. 연결한 뒤 다시 누르세요. 인터넷 없이 쓰고 싶으면: "엑셀 대신 CSV 파일로 내려받는 단추도 달아 줘." (시험하지 않았습니다.)
  5. PDF 가 너무 크거나, 글자를 못 고른다 → 화면을 그림으로 떠 넣는 방식이라서입니다(7단계). 글자가 살아 있는 PDF 를 원하면: "PDF 단추는 파일을 만들지 말고 인쇄 창을 열어 줘. 나는 거기서 「PDF로 저장」을 고를게." (시험하지 않았습니다.)
  6. 다른 브라우저나 다른 컴퓨터에서 열었더니 예시로 돌아가 있다 → 자동 저장은 저장한 그 브라우저에만 남습니다(6단계). 원래 쓰던 곳에서 JSON 내보내기를 한 뒤, 새 곳에서 JSON 불러오기를 하세요.
  7. 클로드가 말한 숫자와 화면의 숫자가 다르다 → 1단계(「프로젝트 기간」 날짜가 표보다 하루 앞섬), 2단계(작업 13개 ↔ 화면 11개), 4단계(전체 진도 35% ↔ 화면 42%)에서 실제로 그랬습니다. 화면이 진짜입니다. 직접 세어 보고 말하세요: "화면에는 전체 진도가 42% 로 나오는데 설명한 숫자와 달라. 어느 쪽이 맞는지 계산 과정을 보여 줘." (이 말은 시험하지 않았습니다.)
  8. 고쳤더니 전에 되던 것이 안 된다 → 8단계의 「취소하고 바로 전 상태로」 말, 또는 17편의 저장 지점으로 돌아가세요. 방금 말한 것만 담아 새 대화로 다시 시키는 것도 방법입니다.

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

긴 프롬프트 펼치기 — 위 1\~8단계를 한 번에 시키는 말

일정표 만들기를 한 번에 맡깁니다. 빈 폴더에서 클로드를 연 뒤, 꺾쇠 <…> 자리를 내 것으로 바꿔 붙여 넣으세요. 이 편이 겪은 안전 규칙(저장 실패 숨기지 않기 · 다 불러오기 전엔 저장하지 않기 · 내가 쓴 글은 이스케이프)도 들어 있습니다. 새 빈 폴더에서 시켜 보니 클로드는 파일을 만들고도 **「아직 완료는 아닙니다」**라고 보고했습니다. 검증을 돌릴 node 실행 허락이 없었기 때문이고, 마지막 줄 「안 맞으면 완료로 보고하지 말 것」이 그대로 작동한 것입니다. 만들어진 파일을 제가 따로 열어 보니 (가)~(바)는 모두 맞았습니다. 다만 모양은 8단계 판과 달라서, 묶음 줄 날짜는 직접 넣어야 하고 PDF 는 인쇄 창을 열며 엑셀 도구는 받아 오기 전에 먼저 묻습니다. 엑셀·PDF 결과물은 클로드도 저도 열어 보지 못했으니, 다 만든 뒤 위 8단계의 「이렇게 나오면 성공」을 하나씩 확인하세요.

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

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

입력: <운영체제>, <쓰는 브라우저>, <예시 작업 수: 예 10>

작업:
① 확인 — 폴더에 index.html 이 이미 있으면 덮어쓰지 말고 멈춰서 어떻게 할지 묻는다.
② 표 — 작업명·시작일·종료일·진도(%) 칸이 있는 표. 날짜는 달력으로 고른다.
③ 단계 — 줄마다 단계 숫자 1·2·3(대단락·중단락·작업)을 고르고 단계만큼 들여써서 보여 준다. 위아래 관계는 부모 번호 칸 없이 줄 순서와 단계 숫자로만 정한다.
④ 간트 — 표 오른쪽에 월 눈금과 막대. 진도만큼 진한 색으로 채운다.
⑤ 진도 합산 — 아래에 작업이 있는 대단락·중단락의 진도는 아래 작업들의 평균으로 자동 계산하고, 그 칸은 직접 못 고치게 한다.
⑥ 줄 더하기·지우기 — 줄마다 + ✕ 단추. 하위 줄이 있는 줄을 지울 때는 먼저 묻는다.
⑦ 저장 — 고칠 때마다 이 브라우저에 자동 저장해 새로고침해도 남게 한다. 저장이 안 되면 화면에 경고를 띄운다(조용히 넘기지 않는다). 불러오기가 끝나기 전에는 저장하지 않는다. JSON 내보내기·불러오기 단추를 단다. 불러온 파일의 모양이 틀리면 거절하고 표는 그대로 둔다.
⑧ 뽑기 — 엑셀(.xlsx)과 PDF 로 내려받는 단추. 인터넷에서 받아 오는 도구가 필요하면 무엇인지 먼저 알린다.
⑨ 날짜 점검 — 종료일이 시작일보다 앞서면 그 줄을 빨갛게 하고 이유를 알린다.
⑩ 마무리 — 초보자 눈높이로 무엇이 됐고, 어떻게 열고, 고치고 싶을 때 어떻게 말하면 되는지 설명한다.

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

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

검증: 아래를 코드로 다시 확인해 모두 맞아야 "완료"라고 보고한다. 하나라도 안 맞으면 완료로 보고하지 말 것.
 (가) index.html 하나뿐이고 더블클릭으로 열린다.
 (나) 단계 숫자대로 들여쓰기되고, 묶음 행의 진도 칸은 직접 입력이 안 된다.
 (다) 아래 작업의 진도를 바꾸면 위 행의 진도와 막대가 바뀐다.
 (라) 줄을 더하고 지운 뒤 새로고침해도 그대로 남는다.
 (마) 작업명에 <b>글</b> 을 넣어도 굵은 글씨가 아니라 글자 그대로 보인다.
 (바) 종료일이 시작일보다 앞이면 그 줄이 빨갛게 된다.

내가 만들 때는

플랫폼보다 먼저, HTML 파일 하나짜리 일정표 도구가 있었습니다. 화면 제목은 「EPC Control」, 첫 파일은 4월 9일의 604줄입니다. 이틀 동안 판을 30번 갈아 가며 키웠고, 5월 21일 판(v27)에서 처음으로 브라우저 저장(localStorage)과 JSON 내보내기가 붙었습니다. 그 전에는 새로고침하면 다 사라지는 화면이었습니다. 이 편에서는 4~6단계가 그 자리입니다. 처음엔 클로드 채팅으로 만들었습니다. 채팅창에 필요한 것을 말하고, 받은 HTML 을 파일로 열어 보고, 이상한 곳을 다시 말하는 식이었습니다. 이 편은 같은 일을 클로드 코드로 합니다. 복사해 붙이는 대신 클로드가 폴더의 파일을 직접 고칩니다. 그 뒤 PDF, 엑셀, 3단계 이상 들여쓰기가 하나씩 붙었습니다. 코드는 지금도 HTML·CSS·평범한 자바스크립트 한 파일입니다. PDF 는 html2canvas 1.4.1 과 jsPDF 2.5.1, 엑셀은 xlsx-js-style 1.2.0, 압축은 JSZip 3.10.1 을 인터넷에서 불러다 씁니다. 부모 번호 칸은 없습니다. 위아래 관계는 줄 순서와 단계 숫자(lv) 로만 정하고, 이 편의 2단계와 같은 방식입니다. 진도는 부모 = 자식 평균이고, 사람이 직접 넣은 값이 있으면 그 값이 우선합니다.

7월 1일에 회사 플랫폼(SJ FLOW) 저장소를 새로 시작했을 때, 이 파일은 이미 4,148줄이었습니다. 지금은 약 4,685줄입니다. 플랫폼(v29) 안에서는 같은 파일이 틀(frame) 안에서 돌고, 프로젝트마다 문서 하나를 Firebase Firestore(구글의 클라우드 데이터베이스)에 저장합니다. 고칠 때마다 약 0.4초 뒤 저절로 저장되고, 개정 번호(Rev)와 이력 스냅샷, 부서별 보기, 변경 제안 → 승인 흐름이 붙었습니다. 이 편의 파일에는 없는 것들입니다.

그 사이 겪은 일을 적습니다. 대부분 여럿이 같이 쓰고 저장을 서버에 두게 된 뒤에 생긴 일입니다.

  • v28.4.41 — 복사한 작업이 전부 82%에서 멈췄습니다. 부모 행에 수동 진도가 들어 있어서 자식 진도가 위로 올라가지 못했습니다. 그래서 이 편 4단계에서 「묶음 행은 직접 못 고치게」 합니다.
  • v28.4.36 — 저장한 직후에 옛 서버 답이 와서, 방금 고친 내용을 덮어썼습니다. 늦게 온 옛 답은 무시하게 했습니다.
  • 7/17 — 저장이 실패하고 있었는데 오류를 삼켜서, 열흘 동안 아무도 몰랐습니다. 저장 실패는 화면에 보이게 했습니다.
  • v30.3 — 불러오기가 끝나기 전에 자동 저장이 돌아서, 빈 목록이 진짜 데이터를 덮어썼습니다. 다 불러오기 전에는 저장하지 않게 하고, 자동 복구를 붙였습니다.
  • v30.9 — 개정 번호(Rev)가 75까지 치솟았습니다. 저장할 때마다 올렸기 때문입니다. 날짜나 구조가 바뀔 때만 올리게 했습니다.
  • 9/19 — 하루 읽기 한도가 차자 화면이 아예 열리지 않았습니다. 브라우저에 남는 캐시를 두었습니다.
  • 9/27 — 작업명에 심어 넣은 코드가 그대로 실행되는 구멍(XSS)이 있었습니다. 화면에 보이는 글은 전부 이스케이프(특수 문자를 글자로만 보이게 바꾸기)합니다.

교훈은 넷입니다. 저장 실패를 삼키지 말 것 · 다 불러오기 전엔 저장하지 말 것 · 부모 행에 수동 진도를 두지 말 것 · Rev 는 의미 있는 변경에만. 이 편의 일정표는 서버 없이 내 브라우저에만 저장하니 둘째 위험(불러오기가 끝나기 전 저장)은 따로 겪지 않지만, 「한 번에 맡기기」의 긴 말에는 넣어 두었습니다. 첫째는 6단계에서 클로드가 「저장할 수 없습니다」 경고를 달아 주었고, 셋째는 4단계에서 미리 막았습니다.

→ 뒷이야기 1단계에서 이 도구가 플랫폼 이전에 먼저 있었던 사연을, 2단계에서 7월 1일 이후 저장이 Firestore 로 옮겨 가는 과정을 보세요.

저작권 · 라이선스

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