🏠 월세방 스마트 체크리스트 & 대시보드

원룸을 발로 뛰며 본 기록을 점수로 비교하기 위한 도구입니다. 방을 보고 나오면 폰으로 체크리스트를 채우고, 쌓인 방들을 카드로 나열해 조건별로 걸러 봅니다.

📖 동작 방식 슬라이드 보기 →

6장짜리 슬라이드로 무엇을 하는 곳인지, 어떻게 굴러가는지, 고쳐서 올리는 법까지 그림으로 정리했습니다. 방향키·클릭·스와이프로 넘기고, F 로 전체화면. 특정 장은 #4 처럼 링크할 수 있습니다.

🏠 대시보드 열기 →

GitHub Pages 로도 열립니다 — 슬라이드 · 대시보드

무엇을 하는가

• 현장 체크리스트 — 방향·채광·수압·콘센트·곰팡이·누수·벌레·엘리베이터·중문·주차 등을 그 자리에서 기록
• 자동 점수 산정 + 근거 표시 — 기본 50점에서 항목별 가점·감점을 적용해 0~100점으로 환산하고, 남향 +10 곰팡이 −10 처럼 어떤 항목이 몇 점을 만들었는지 입력 화면과 상세 화면에 함께 보여줍니다
• 비교 대시보드 — 보증금·월세·도보시간·점수·방문일·부동산·평가 상태로 필터링하고 7가지 기준으로 정렬
• 요약 바 — 지금 보이는 목록의 개수·평균 점수·평균 월세·최고 점수 방·평가 분포를 한 줄로
• 방 나란히 비교 — 카드에서 최대 3개를 골라 표로 세워 놓고, 값이 다른 항목만 강조하고 유리한 쪽에 👑
• 사진 관리 — 구글 드라이브 폴더의 사진을 골라 붙이고, 이미 쓴 사진은 중복 선택 차단. 현장에서 찍은 사진을 그 자리에서 업로드(긴 변 1600px JPEG로 자동 축소)
• 주소 + 지도 링크 — 주소를 적어두면 상세 화면에서 카카오맵·네이버지도로 바로 연결
• 방별 계약 진행 체크리스트 — 등기부등본·건축물대장·특약·현장 점검 등 21개 항목을 방마다 따로 체크하고 진행률(%)을 카드·상세·정렬에 반영
• 모바일 대응 — 필터 접기, 한 줄 카드, 전체화면 모달, 하단 고정 저장 버튼

구조

브라우저 (index.html)  →  Apps Script 웹앱 (Code.gs)  →  Google Sheets + Drive

빌드 도구가 없고, 따로 구축한 서버도 없습니다. 정적 HTML 한 장을 Vercel·GitHub Pages가 파일 그대로 내려주고, 그 페이지가 Apps Script 웹앱 URL 하나와 통신합니다. 저장·검증 같은 서버 쪽 일은 구글이 Apps Script로 대신 돌려주고, 데이터베이스 자리에는 구글 시트가, 이미지 스토리지 자리에는 구글 드라이브 폴더가 들어갑니다.

파일	역할
index.html	프론트엔드 전체 (HTML·CSS·JS 단일 파일)
apps-script-Code.gs	Apps Script 백엔드 코드
about.html	동작 방식을 설명하는 1장짜리 소개 슬라이드

인증

조회는 공개이고, 등록·수정·삭제만 비밀번호로 보호합니다.

비밀번호는 프론트엔드 코드에 두지 않습니다. 클라이언트 JS에 담긴 값은 누구나 읽을 수 있으므로 비밀이 될 수 없기 때문입니다. 대신 이렇게 동작합니다.

1. 사용자가 입력한 비밀번호는 브라우저 메모리에만 보관 (새로고침하면 사라짐)
2. 모달에서 action: 'verify' 로 서버에 먼저 확인 — 틀리면 폼이 열리지 않음
3. 실제 저장·삭제 요청에도 비밀번호를 실어 보내고 서버가 다시 검증
4. 진짜 방어선은 Code.gs 의 isAuthorized() 한 곳뿐. 비밀번호는 Apps Script 스크립트 속성에 보관

직접 세팅하기

1. 구글 시트

첫 행에 아래 헤더를 만듭니다 (시트 이름은 시트1). 열 순서는 자유이며, 코드가 헤더 이름으로 찾습니다.

방문일자 | 방 이름 | 주소 | 부동산 이름 | 평가 | 보증금(만원) | 월세+관리비(만원) | 도보거리(분) |
구조 | 주차 | 방향 | 채광 | 수압 | 콘센트 | 엘리베이터 | 중문 | 공동현관비번 |
곰팡이 | 누수 | 벌레 | 옵션 | 최종점수 | 사진URL | 메모/특이사항 | 진행체크

이미 시트를 쓰고 있다면 맨 뒤에 주소 와 진행체크 두 열만 추가하면 됩니다. 두 열이 없어도 나머지는 그대로 동작하지만, 주소는 저장되지 않고 체크리스트 저장은 "진행체크 열을 추가해 주세요" 안내를 돌려줍니다.

진행체크 에는 L1,L2,I3 처럼 체크한 항목 id 가 쉼표로 들어갑니다. 항목 id 는 index.html 의 CHECKLIST_GROUPS 에 정의되어 있고, 한 번 쓴 id 는 바꾸지 않아야 기존 기록이 유지됩니다.

2. Apps Script

1. 시트에서 확장 프로그램 → Apps Script
2. apps-script-Code.gs 내용을 Code.gs 에 붙여넣기
3. 파일 맨 위 PHOTO_FOLDER_ID 를 본인 드라이브 폴더 ID로 교체 (사진 목록 조회와 업로드가 같은 폴더를 씁니다)
4. 프로젝트 설정 → 스크립트 속성 에 EDIT_PASSWORD = 원하는 비밀번호 추가
5. 배포 → 새 배포 → 웹 앱, 실행 계정 나, 액세스 권한 모든 사용자
6. 발급된 웹 앱 URL을 index.html 의 WEB_APP_URL 에 붙여넣기

📸 사진 업로드는 드라이브 쓰기 권한이 필요합니다. 기존에 배포해 둔 프로젝트라면 새 코드를 붙여넣고 편집기에서 아무 함수나 한 번 실행해 권한을 다시 승인한 뒤 재배포하세요. (기존 코드는 드라이브 읽기만 했기 때문입니다.)

⚠️ 코드를 수정한 뒤에는 반드시 재배포해야 합니다. 배포는 만든 시점의 코드 스냅샷에 고정되므로, 저장만 하면 배포된 URL은 옛 코드를 계속 실행합니다. 배포 → 배포 관리 → ✏️ → 버전 "새 버전" → 배포

3. 배포

정적 파일뿐이라 어디든 올라갑니다. Vercel은 설정 파일 없이 바로 됩니다.

1. vercel.com/new 에서 이 레포 Import
2. Framework Preset: Other (나머지 기본값)
3. Deploy

이후 main 에 푸시하면 자동으로 재배포됩니다.

GitHub Pages 도 함께 켜져 있습니다. .github/workflows/pages.yml 이 main 푸시마다 레포 루트를 그대로 Pages 에 올립니다 (actions/configure-pages 의 enablement: true 가 Pages 를 자동으로 활성화). 빌드 과정이 없으므로 Vercel 과 병행해도 서로 간섭하지 않습니다.

• Vercel: https://room-checklist-two.vercel.app/
• GitHub Pages: https://maybecocheon.github.io/room-checklist/

알려진 한계

• 조회는 완전 공개 — 웹앱 URL을 아는 사람은 시트 내용을 볼 수 있습니다. 읽기까지 막으려면 별도 설계가 필요합니다.
• 공용 비밀번호 하나 — 개인별 인증이 아니므로 아는 사람은 누구나 편집할 수 있습니다.
• 가족·친구끼리 쓰는 용도에 맞춘 수준이며, 민감한 데이터를 담기에는 적절하지 않습니다.

만든 방식

초안은 하루 만에 만들었습니다. Gemini와 대화하며 체크 항목·배점·특약 문구를 설계하고 코드로 고정한 뒤, 받은 코드를 직접 붙여 깃허브에 올렸습니다. 그 뒤로는 Claude Code로 옮겨 쓰면서 조금씩 고쳤습니다. 서버측 인증 도입·히스토리 정리·배포 디버깅부터 정렬·나란히 비교·사진 업로드까지, 코드 수정과 커밋·푸시는 모두 Claude Code가 했습니다. 자세한 흐름은 소개 슬라이드의 4~5장에 다이어그램으로 정리해 두었습니다.