코피야

조이의 AI 작업 매뉴얼
← 홈
🚗 개인 웹앱 · 친구용

수연이 차계부

수연이가 쓸 차량 관리 웹앱. Cloudflare Pages + D1로 배포하고, 관리자(나)만 비밀번호로 수정할 수 있는 구조야.

미리 알아두면 좋아
Cloudflare Pages라는 무료 서비스 위에서 동작해. 계정만 있으면 되고 서버·프로그램 설치는 필요 없어. 처음이면 이 링크에서 이메일로 무료 가입부터.
1Cloudflare Pages에서 ZIP 업로드
  1. Cloudflare 대시보드에 로그인
  2. 왼쪽 메뉴 Workers & Pages → 오른쪽 위 만들기(Create) → Pages 탭
  3. Upload assets / Direct Upload 선택
  4. 프로젝트 이름 입력 (영문·숫자·하이픈만) 예: my-car-log
  5. 받은 ZIP 그대로(압축 풀지 않고) 업로드
  6. 배포(Deploy site) 클릭
2Cloudflare D1 데이터베이스 만들기
  1. 대시보드 왼쪽 Storage & Databases → D1 SQL Database
  2. Create database 클릭
  3. 이름 입력 (다시 볼 일 거의 없음) 예: car-log-db
  4. 생성(Create)으로 완료
  5. 차량 정보·주유·정비·알림이 여기 저장됨. 표(테이블)는 앱 첫 실행 시 자동 생성
3Pages 프로젝트에 D1 바인딩 추가
  1. Workers & Pages로 돌아가 1단계에서 만든 프로젝트 클릭
  2. 상단 Settings
  3. Functions 또는 Bindings 메뉴 찾기
  4. D1 database bindings → Add binding
  5. 2단계에서 만든 데이터베이스 선택
4바인딩 변수 이름을 DB로 설정
  1. Variable name 칸에 정확히 대문자로 입력해야 코드가 데이터베이스를 찾음
Variable name 칸에 정확히 DB (대문자) 입력 → Save
5관리자 비밀번호(ADMIN_PASSWORD) 등록
  1. 같은 Settings 화면 → Environment variables → Add variable
  2. 이름(Name)에 정확히 ADMIN_PASSWORD
  3. 값(Value)에 사용할 비밀번호 (8자 이상 추천)
  4. 반드시 Encrypt / Secret 옵션 켜기 — 화면·로그에 노출 안 되게
  5. Save
6세션 서명 키(SESSION_SECRET) 등록
  1. Add variable 한 번 더
  2. 이름(Name)에 정확히 SESSION_SECRET
  3. 값(Value)에 의미 없는 긴 문자열, 영문+숫자 32자 이상. 예시를 그대로 쓰지 말고 직접 새로 생성
  4. 이 값도 반드시 Encrypt / Secret 켜기
  5. Save — 관리자 로그인 상태를 안전하게 유지하는 서명용 키. 비밀번호처럼 남에게 알려줄 필요는 없음
7설정 반영을 위해 같은 ZIP 재배포
  1. 프로젝트 화면 상단 Deployments 탭
  2. Create deployment 또는 Retry deployment
  3. 처음 올렸던 것과 같은 ZIP을 수정 없이 그대로 다시 업로드
  4. 배포 완료까지 대기 (보통 1분 이내)
바인딩·환경 변수는 다음 배포부터 적용되기 때문에 한 번 더 배포해야 해.
8완성된 웹앱 주소 확인
  1. 배포 완료 후 프로젝트 상단에 https://프로젝트이름.pages.dev 주소 표시
  2. 이 주소로 열면 완성된 차계부. 수연이에게 이 주소를 공유하면 비밀번호 없이도 조회는 가능
9관리자 비밀번호 입력 테스트
  1. 웹앱 오른쪽 상단 자물쇠 아이콘 클릭
  2. 5단계에서 등록한 관리자 비밀번호 입력
  3. '관리자 모드로 전환했어요' 안내 + 자물쇠가 열린 모양 + 추가·수정·삭제 버튼이 보이면 정상
  4. 설정 화면에서 차량 정보(별명·차종·누적 주행거리)부터 등록. 등록 전엔 홈 화면에 기본 안내 문구만 표시됨
10일반 방문자 화면(읽기 전용) 확인
  1. 관리자 모드 종료 (설정 화면 '관리자 모드 종료' 또는 자물쇠 아이콘)
  2. 또는 다른 브라우저·시크릿 모드로 같은 주소 접속
  3. 추가·수정·삭제 버튼이 안 보이고 자물쇠 아이콘만 보이면 정상
  4. URL만 아는 사람은 조회만 가능, 비밀번호 없이는 아무것도 못 바꿈
🙋 Q. 비밀번호를 바꾸고 싶어요
Settings의 Environment variables에서 ADMIN_PASSWORD 값을 수정·저장 후, 7단계처럼 같은 ZIP으로 다시 배포하면 돼.
🙋 Q. 데이터가 사라질까 걱정돼요
모든 데이터는 코드가 아니라 D1 데이터베이스에 저장돼. 앱을 다시 배포해도 D1 안 데이터는 그대로 유지돼.
🙋 Q. 관리자 모드가 자꾸 풀려요
관리자 세션은 12시간 유지. 이후엔 안전을 위해 자동 로그아웃되고, 자물쇠 아이콘으로 다시 로그인하면 돼.
이 방법으로 작업하면서 남긴 메모야. "수연이 차계부" 기록은 다른 카드와 별도로 저장돼서, 여기서 지워도 다른 곳엔 영향 없어.
기록 목록
불러오는 중…
＋ 새 기록 추가
예전에 어떻게 했는지 헷갈릴 때 이 순서대로 따라가면 돼.