소개
병원 검사지가 계속 쌓이는데 "지난번보다 좋아졌나"를 알 수가 없어서, 이런 걸 만들기로 했습니다.
입력: 검사결과·혈압 등 건강기록 사진을 AI에게 주면 → AI가 판독해서 DB에 직접 저장
조회: 웹페이지에서 추이 그래프와 참고범위 대비 현황 확인
분석: "이 전 검사 대비 뭐가 좋아지고 나빠졌는지"를 자동으로 정리
공유: 스터디에 공유할 샘플 페이지와, 나만 보는 실제 데이터 페이지를 분리
도구
역할
Claude (웹)
사진 판독, SQL 실행, HTML 작성
Claude Code (로컬)
GitHub 업로드, 배포 문제 진단
Supabase
DB + 로그인
GitHub + Vercel
배포
1. 구성
[작업] 검사지 사진 → Claude가 판독 → Supabase에 INSERT
(Claude-Supabase 커넥터)
[배포] HTML → GitHub → Vercel
[조회] 브라우저 → Supabase API 직접 호출
(HTML에 박아둔 주소 + anon key 사용)
GitHub·Vercel과 Supabase는 서로 연결하지 않습니다. HTML 안에 접속 정보가 들어 있어서 브라우저가 알아서 호출합니다.
2. Supabase 세팅
Claude 설정에서 Supabase 커넥터를 추가하고 OAuth 승인을 하면, Claude가 Supabase를 직접 조작할 수 있습니다. 이후 다음을 요청했습니다.
프로젝트 생성 (서울 리전, 무료 플랜)
테이블 5개 생성:
users,blood_pressure,weight_logs,blood_tests(44개 항목 컬럼),urine_tests(26개 항목 컬럼)개인용/샘플용 사용자 2개 등록
혈압 테이블에는 측정 시각으로 시간대(새벽/아침/오후/저녁)를 자동 계산하는 컬럼을 넣었습니다.
3. 데이터 입력
검사지 사진을 올리면 Claude가 항목과 수치를 읽어 저장합니다. 새 검사 항목이 나오면 ALTER TABLE ADD COLUMN으로 컬럼을 추가하고 넣기로 했습니다.
여기서 시간을 제일 많이 썼습니다. AI가 정리해준 결과에 누락이 반복적으로 발생했습니다.
같은 혈압 수치가 두 날짜에 중복 입력
혈액검사 13개 항목 누락
2월 검사 전체 누락 (AI는 "2월엔 검사를 안 하신 것 같습니다"라고 답했었음)
전부 제가 원본 사진을 다시 올려서 잡았습니다.
4. HTML 생성
페이지 5개를 만들었습니다 — 대시보드 + 지표별 상세 4개(체중/혈압/혈액검사 등)
처음엔 CSS와 JS를 style.css, app.js로 분리했는데 환경에 따라 로드가 안 돼서 화면이 깨졌습니다. 모든 스타일·스크립트를 각 HTML 안에 인라인으로 넣는 방식으로 바꿨습니다. 외부 의존은 Supabase SDK(CDN) 하나만 남겼습니다.
페이지와 DB는 별도 연동 설정 없이 HTML 안에 주소와 키를 상수로 넣어 연결했습니다.
javascript
const SB_URL='<https://xxxxx.supabase.co>';
const SB_KEY='eyJhbGci...'; // anon key
브라우저가 이 값으로 Supabase에 직접 요청합니다. GitHub와 Vercel은 HTML 파일을 전달만 하고, 데이터는 브라우저가 Supabase에서 바로 가져오는 구조입니다. 그래서 빌드 설정이나 환경변수, 서버 코드가 전혀 없습니다.
분석 기능은 DB에 저장하지 않고 페이지를 열 때 JS가 계산하도록 했습니다. 이전 검사와 공통으로 측정된 항목만 비교해서 이런 문장을 만듭니다.
계속 기준 밖인 항목: ALP 200 → 129 하락 / 콜레스테롤 246 → 273 상승
정상으로 돌아온 항목: 인(P) 4.6 → 3.8
혈액검사 마지막 기록 5/28 · 61일 경과
5. 접근 제어
"비밀번호 걸어줘"라고 했더니 Claude가 거절했습니 다. HTML에 비밀번호를 넣고 JS로 검사하는 방식은 소스보기로 다 보이고, DB가 "누구나 조회 가능" 상태면 페이지를 우회해서 데이터를 직접 가져갈 수 있다는 이유였습니다.
대신 이렇게 했습니다.
Supabase Auth로 실제 로그인 기능 적용
RLS(행 수준 보안) 설정: 비로그인은 샘플 데이터만, 로그인해야 개인 데이터 조회
쓰기 권한은 아예 없음 (입력은 AI가 관리자 권한으로만)
계정 생성은 제가 직접 했습니다. Supabase 대시보드 → Authentication → Users → Add user, Auto Confirm User 체크. 이거 안 켜면 인증 대기 상태라 로그인이 안 됩니다.
6. GitHub 업로드와 배포
로컬에서 Claude Code로 처리했습니다. 기존 원격 저장소에 다른 히스토리가 있어서 push가 거부돼, 아래로 병합했습니다.
bash
git pull origin main --allow-unrelated-histories -X ours
저장소는 Vercel과 연동돼 있어서 push하면 자동으로 재배포됩니다. 별도로 배포 명령을 실행할 필요가 없고, 1분 정도 후 프로덕션 URL에 반영됩니다.
Supabase는 배포 대상이 아닙니다. 계속 떠 있는 서버라서 테이블을 만들거나 데이터를 넣으면 그 즉시 적용됩니다. 그래서 배포가 필요한 경우는 제한적입니다.
작업
배포 필요 여부
혈압·체중·검사 결과 추가
불필요 (새로고침만)
기존 데이터 수정·삭제
불필요
HTML 수정
필요 (push하면 자동)
페이지가 데이터를 품고 있지 않고 열릴 때마다 Supabase에서 가져오기 때문입니다. 예외는 새 검사 항목이 생겨 컬럼을 추가할 때인데, DB에는 바로 들어가지만 화면에 제대로 표시하려면 HTML 안의 참고범위·라벨 목록에도 항목을 추가해야 해서 이때는 push가 필요합니다.
배운 점 정리
데이터를 맡길 때
AI 요약본이 아니라 원본으로 되돌아가서 재확인하기
AI가 "없다"고 해도 내가 있다고 생각하면 한 번 더 물어보기
막혔을 때
추측 말고 "로그를 조회해서 확인해줘" - 실제 수행여부 확인하기
웹 AI가 못 보는 건 로컬 AI에게 넘기기
커넥터 오류는 일단 한 번 더 시도
