건강기록 대시보드, 두 번째 이야기 — 기록 입력 기능 추가하기

📝 한줄 요약

지난번엔 흩어져 있던 건강기록을 Claude Code로 한 페이지에 모아 대시보드를 만들었다면, 이번엔 그 대시보드에 "기록을 직접 넣는" 기능을 추가한 이야기입니다.

바쁘시면 이것만 읽어도 돼요:

• Claude Code로 체중·혈압 대시보드에 수동 입력 UI와 사진 업로드 기능을 추가

• 사진 인식에 별도 유료 API를 쓰지 않고, AI 에이전트가 직접 사진을 읽어 값을 채워 넣는 방식으로 비용 없이 해결

• 로컬 작업 폴더 구조와 실제 배포되는 파일 구조가 달라서, AI가 통째로 옮기려다 기존 링크가 깨질 뻔한 시행착오 겪음 → 원하는 배포 구조를 명확히 짚어주고 나서야 바로잡힘

• 예전에 겪은 "배포 링크를 못 찾겠다"는 문제도, AI의 첫 가설을 그대로 믿지 않고 계속 되물은 끝에 진짜 원인을 찾아낸 적이 있음

• Claude Code가 세션을 넘길 때마다 자동으로 기억해두는 메모(배포 주소, 보안 규칙, 기능 설계 방향 등) 덕분에, 오늘은 예전에 이미 정리해둔 내용을 다시 설명할 필요 없이 바로 작업에 들어갈 수 있었음

• 배운 점: AI가 내놓은 가설이나 결과물을 곧이곧대로 받아들이지 않고, 계속 확인하고 되묻는 게 결국 제일 빠른 길이었음

🎯 이런 분들께 도움돼요

• AI로 나만의 개인 프로젝트(웹페이지, 대시보드 등)를 만들어보고 싶은 비개발자

• 병원 진료나 검진 때 참고할 자료를 스스로 정리해두고 싶은 분

• AI에게 작업을 맡겼다가 "생각과 다르게 만들어져서" 당황했던 경험이 있는 분

😫 문제 상황 (Before)

흩어진 건강기록을 한눈에 보고, 정기검진 때 의사선생님께 "이렇게 관리해왔다"고 바로 보여드릴 수 있는 자료가 필요해서 Claude Code로 대시보드를 만들었습니다.

그런데 대시보드를 만든 이후에도 여전히 불편한 게 있었습니다. 새 기록이 생길 때마다 화면에서 바로 입력할 수가 없어서, 데이터베이스(Supabase)에 직접 값을 넣어줘야 했습니다. 대시보드는 "보는" 용도로는 완성됐지만, "기록하는" 용도로는 아직 절반짜리였던 셈입니다.

🛠️ 사용한 도구

• 도구: Claude Code (터미널 AI 에이전트), Claude in Chrome (브라우저 자동화)

• 연동 서비스: Supabase(데이터베이스·로그인·파일 저장소), Vercel(배포), GitHub(코드 저장)

🔧 작업 과정

예전 이야기 하나 — "배포 링크를 못 찾겠다"는 미스터리

기록 기능을 붙이기 전, 다른 기기에서 대시보드 주소를 찾지 못하는 일이 있었습니다. Claude Code에게 원인을 물었더니, 처음엔 "최근 작업 내용이 아직 GitHub에 안 올라가서 그런 것 같다"는 가설을 내놨습니다. 그럴듯해 보였지만 뭔가 이상해서 더 캐물었습니다.

아니 내가 github 저장소를 수동으로 정리했어. main 삭제하고 master 만 남겨놨어

잘못 말했다 master 지우고 main 만 남겨놨어. 너가 하려는 작업 왜 해야하는건데?

이렇게 계속 되묻자 Claude Code는 자기가 세운 가설을 접고 처음부터 다시 조사했습니다. 결과는 의외였습니다 — 애초에 "배포 주소"라는 정보 자체가 코드나 저장소 어디에도 적혀 있지 않았던 겁니다. 업로드가 안 된 게 문제가 아니라, 누구도 그 주소를 기록해둔 적이 없었던 것이 진짜 원인이었습니다. 실제 배포 주소를 직접 알려주고 나서야 문제가 풀렸습니다.

이 경험으로 "AI가 내놓은 첫 번째 가설을 그대로 믿지 않고 계속 되묻는 것"이 얼마나 중요한지 체감했습니다.

기록을 직접 입력할 수 있게 만들기

대시보드에 체중·혈압 페이지에 입력 버튼을 붙여달라고 요청했습니다. Claude Code는 페이지에 "+ 기록 추가" 버튼과 입력창을 만들고, 입력한 값이 안전하게 저장되도록 로그인한 사람인지 서버에서 한 번 더 확인하는 절차까지 함께 구성했습니다. 이제 데이터베이스를 직접 열지 않고도 페이지에서 바로 기록을 남길 수 있게 됐습니다.

사진 한 장으로 끝내는 기록 — 비용 없이 해결한 방법

수동 입력만으로는 여전히 매번 타이핑을 해야 하는 게 번거로웠습니다. 그래서 병원에서 받은 검진지나 혈압계 화면을 사진으로 찍어 올리면 자동으로 기록되면 좋겠다고 이야기했습니다.

보통 이런 기능은 사진 속 글자를 읽어내는 별도의 유료 AI 서비스를 붙여야 한다고 생각했는데, Claude Code가 제안한 방식은 달랐습니다. 사진 인식 API를 따로 쓰는 대신, 사진을 저장 공간에 올려두기만 하면 이후 Claude 에이전트가 직접 그 사진을 열어보고 값을 읽어서 기록에 채워 넣는 방식이었습니다. 추가 비용 없이 원하는 결과를 얻을 수 있는 방법을 AI 스스로 제안했다는 점이 이번 작업에서 가장 인상적이었습니다.

시행착오 — 정해둔 규칙에서 AI가 잠깐 벗어났을 때

제 컴퓨터에는 작업용 폴더(dev)와 실제로 사이트에 반영되는 폴더가 따로 있습니다. 원래 정해둔 규칙은 "수정은 항상 작업용 폴더 안에서만 하고, 배포할 때는 그 내용을 실제 폴더에 덮어쓴다"는 것이었습니다. 그런데 이번에 기록 입력 기능을 만들다가, AI가 이 규칙을 벗어나 작업용 폴더 바깥(실제 배포 폴더)에 바로 새 파일을 만들어버렸습니다.

왜 dev 폴더 바깥에 새로운 파일을 만들었어. 헷갈렸잖아. 로컬에서는 dev폴더 안에 파일만 수정하고 git에 올릴 때는 main에 바로 dev 폴더 내부 파일을 덮어쓰기해서 업데이트 할거야

이렇게 원래 규칙을 다시 짚어주고 나서야 두 폴더가 다시 같은 내용으로 맞춰졌습니다. 한 번 정해둔 작업 방식이라도, AI가 매번 그대로 지킨다는 보장은 없으니 어긋난 걸 발견하면 바로 짚어줘야 한다는 걸 다시 확인한 순간이었습니다.

✅ 결과 (After)

Before vs After

결과물

• 체중·혈압 페이지에 "+ 기록 추가" 입력창과 "사진으로 추가" 탭 추가

• 실제 서비스 주소: 사용자에게만 공유되는 개인용 배포 링크

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. AI가 세운 가설을 그대로 믿지 않고 되묻기 — 배포 링크 미스터리처럼, "그거 아닌 것 같은데?"라고 한 번만 더 물어봐도 AI가 스스로 가설을 접고 재조사함

2. 원하는 결과물의 범위를 구체적으로 말해주기 — "폴더 구조를 이렇게 유지하고 싶다"처럼 명확히 짚어주면 AI가 임의로 재구성하는 일을 막을 수 있음

3. 한 번 정한 규칙은 "기억"에 남겨두기 — 배포 주소, 보안 원칙, 기능 설계 방향처럼 반복될 만한 내용을 AI가 메모해두게 하면, 다음번엔 처음부터 다시 설명하지 않아도 됨

이렇게 하면 안 돼요

1. 파일/폴더 구조를 정확히 안 정해주면, AI가 작업하기 편한 방식대로 옮기다가 실제 서비스에 영향을 줄 수 있음 — 특히 "이 폴더는 작업용, 실제 반영은 저 폴더" 같은 구분이 있다면 미리 알려줄 것

2. "안 될 이유가 없어 보인다"는 AI의 첫 설명을 결론으로 받아들이지 말 것 — 특히 "왜 안 되는지 모르겠다" 같은 문제는 첫 가설이 틀릴 때가 많음

🌍 다른 업무에 적용한다면?

꼭 개발 프로젝트가 아니어도, 반복적으로 손으로 옮겨 적어야 하는 기록 업무(가계부, 운동 기록, 업무 일지 등)에 같은 방식을 적용할 수 있습니다. "사진 한 장 → AI가 읽어서 정리"하는 흐름은 영수증 정리나 회의록 요약 같은 곳에도 그대로 써먹을 수 있을 것 같습니다.

🚀 앞으로의 계획

• 지금은 사진을 올리면 제가 직접(또는 세션 중에) 확인해서 값을 채우는데, 이 확인 과정을 매일 자동으로 도는 루틴으로 더 안정적으로 다듬을 예정

• 혈액검사 이상치 추이처럼, 숫자 나열이 아니라 AI가 해석까지 붙여주는 분석 기능 강화

• 이번에 배포 주소를 못 찾아 헤맸던 경험을 반복하지 않도록, 배포 정보를 README에 고정해두는 등 기본 문서화 정리

📋 재사용 가능한 프롬프트

프롬프트 1: 반복 입력 업무에 사진 기반 기록 기능 붙이기

[기존에 만든 대시보드/페이지]에 사진을 올리면 자동으로 값을 채워주는 기능을 추가해줘. 별도 유료 이미지 인식 API는 쓰지 말고, 사진을 저장해두면 이후에 네가 직접 읽어서 기록에 채워 넣는 방식으로 해줘.

프롬프트 2: AI 가설을 검증할 때

방금 말한 원인이 맞는지 확실해? 다른 가능성은 없는지 처음부터 다시 확인해줘.