바이브코딩 다음은 클라우드 배포

내 PC에서만 열리던 도서관 대시보드를 HTTPS 주소로 공개하고 스마트폰에서 확인합니다. 이 사이트에 게시한 완성 예제를 먼저 열어보세요. 교재의 별도 Cloudflare 계정 배포는 학습자가 직접 진행하는 단계이며, 예제 사이트의 주소가 학습자의 배포 결과는 아닙니다.

이번에는 HTML·CSS·JS·JSON으로만 구성한 정적 웹앱을 배포합니다. Python API 서버, 로그인, 데이터베이스, 실시간 수집기는 포함하지 않습니다. 처음부터 모든 운영 요소를 섞지 않고 “어떤 파일을 어디에 올리는지”부터 확인합니다.

준비물: 실습 키트, Node.js 지원 LTS 버전, npm, 본인의 Cloudflare 계정. 계정의 요금·한도는 배포 시 확인합니다. 별도 도메인 구매 없이 제공되는 주소로 실습할 수 있습니다.

AI가 코드를 만들어준 것과 실제 서비스가 완성된 것은 다릅니다. 먼저 python3 server.py(Windows는 py server.py)로 원본을 실행합니다. 전체 6곳·400석, 해솔시 3곳·200석을 확인하세요.

파일 역할은 다음과 같습니다.

파일	역할	공개 여부
dashboard/index.html	화면 구조	공개
dashboard/styles.css	디자인	공개
dashboard/app.js	필터·집계 동작	공개
dashboard/data/libraries.json	화면에 표시할 자료	공개
server.py	PC 연습용 서버	이번 배포에서 제외
wrangler.jsonc	배포 폴더 설정	배포 도구가 읽음

dashboard 안의 파일은 방문자가 볼 수 있습니다. 인증키·기관 내부 자료·개인정보가 들어 있지 않은지 확인합니다. 첫 배포는 가상 자료 그대로 진행하세요.

폴더를 복사해 원본을 보존하고 ai-request.md를 읽습니다. 원하는 변경을 하나만 지정하면 오류의 원인을 찾기 쉽습니다. 예를 들어 도서관 이름 검색을 추가합니다.

기존 dashboard 파일에 도서관 이름 검색 입력창을 추가해줘.
지역 선택과 검색어가 함께 적용되어야 해.
해솔시 + 어린이 → 1곳·60석,
검색어 지우기 → 3곳·200석이 완료 기준이야.
외부 라이브러리나 API 키 없이 구현해줘.
바꾼 파일, 확인 방법, 되돌리는 방법을 알려줘.

코드를 적용한 뒤 완료 기준을 직접 확인합니다. 실패하면 오류 메시지와 해당 코드만 전달해 수정하고, 동작이 확인되기 전에는 배포하지 않습니다. 이 변경은 선택 실습이며 키트 원본에는 이름 검색이 들어 있지 않습니다.

터미널에서 node --version, npm --version으로 설치를 확인합니다. tech-practice 폴더에서 제공된 wrangler.jsonc를 열면 다음 구조입니다.

{
  "name": "my-library-dashboard",
  "compatibility_date": "2026-09-20",
  "assets": { "directory": "./dashboard" }
}

name은 본인 계정 안에서 구별할 프로젝트 이름입니다. 영문 소문자·숫자·하이픈으로 수정할 수 있습니다. assets.directory가 ./dashboard인지 확인하세요. 프로젝트 전체를 올리는 설정으로 바꾸지 않습니다.

이 교재는 Workers의 정적 자산 기능을 사용합니다. 복잡한 프레임워크 빌드 없이 준비된 파일을 올리는 경로입니다. 기존 Next.js 앱 전체를 같은 설정으로 옮길 수 있다는 뜻은 아닙니다.

npx wrangler@4 login
npx wrangler@4 dev

처음 실행할 때 패키지 설치 확인이 나올 수 있습니다. 로그인 명령은 브라우저에서 Cloudflare 계정 승인을 진행합니다. 여러 계정이 있으면 배포 대상 계정을 확인합니다. 기관 공용 계정이라면 계정 운영 규칙을 따르세요.

dev가 출력하는 로컬 주소를 열어 원본과 같은 화면이 나오는지 확인합니다. Python 서버의 8765와 다른 주소일 수 있습니다. 터미널에 나온 주소를 그대로 사용하세요. 검사가 끝나면 Ctrl+C로 미리보기를 종료합니다.

성공 확인: 전체·지역 필터가 동작하고 개발자 도구에 JSON 파일 404 오류가 없습니다. Wrangler는 외부 도구이므로 설치·로그인·실행 결과는 PC와 계정 환경에서 확인해야 합니다.

npx wrangler@4 deploy

완료 출력의 HTTPS 주소를 복사해 새 브라우저 창에서 엽니다. 주소를 임의로 조합하지 말고 도구가 표시한 실제 주소를 사용합니다. 이어서 스마트폰에서도 열어봅니다.

• 첫 화면에 연습 자료 표시와 출처가 있는가?
• 전체 6곳·400석, 해솔시 3곳·200석이 맞는가?
• 작은 화면에서 지역 선택과 표를 사용할 수 있는가?
• 새로고침해도 JSON 파일을 정상적으로 읽는가?

이 구조는 배포한 JSON의 스냅샷입니다. PC의 CSV를 바꿔도 공개 사이트가 자동으로 갱신되지 않습니다. 다시 변환하고 검증한 뒤 배포해야 바뀝니다. 자동 갱신은 이후 API·자동화 실습에서 확장할 별도 기능입니다.

변경 전 dashboard 폴더를 날짜가 포함된 이름으로 복사해 보관합니다. CSV를 수정·변환하고 로컬에서 확인한 뒤 동일한 deploy 명령으로 올립니다. 작업 기록에는 변경 내용·배포 날짜·검증 결과를 남깁니다.

문제가 생기면 정상 작동하던 백업으로 dashboard를 복원하고 다시 배포합니다. 파일 기반 실습에서 이해하기 쉬운 복원 방법입니다. Cloudflare의 배포 이력과 rollback 기능도 있지만 데이터베이스 변경까지 자동으로 되돌려주는 것은 아닙니다.

공개를 끝내려면 Cloudflare 대시보드에서 이번에 만든 프로젝트 이름을 확인한 후 해당 프로젝트의 삭제 절차를 따릅니다. 연결한 사용자 도메인이 있다면 연결 상태도 함께 확인하세요. 다른 서비스 프로젝트를 선택하지 않도록 주의합니다.

증상	확인 순서
npm 명령 없음	Node.js 설치 → 터미널 다시 열기
로그인 또는 권한 오류	브라우저 계정 → 선택한 계정 → Workers 권한
assets 폴더 없음	현재 위치와 wrangler.jsonc의 상대 경로 확인
화면은 뜨는데 표가 비어 있음	data/libraries.json 요청 상태 → JSON 구조 → 브라우저 오류
API 주소만 404	파일 기반 원본인지 확인. Python 서버는 배포되지 않음
공개 주소에 이전 자료가 보임	로컬 JSON → 배포 성공 → 새로고침 순서로 확인

실제 HTTPS 주소와 스마트폰 확인 결과, 수정 이력, 복원용 백업이 있으면 완료입니다. 외부 계정 배포를 진행하지 않았다면 “로컬 완료”로 기록하고 공개 완료로 표시하지 않습니다.

다음 n8n 교재에서는 반복 집계를 흐름으로 만들고, 사람이 검토할 결과를 생성합니다. 더 깊은 서버·컨텍스트·에이전트 학습은 엔지니어링 심화, 더 많은 코딩 사례는 바이브코딩으로 이어집니다.

• Cloudflare Workers 정적 자산
• 정적 사이트 시작하기
• Wrangler 설정
• Wrangler 명령과 rollback
• Node.js 다운로드

공식 문서 확인일: 2026-09-20. 명령·계정 화면은 버전에 따라 달라질 수 있습니다.