물·체중·수면·운동까지 — 건강 기록 기능 7종을 완성한 날

📚 「AI 헬스케어 파이널 프로젝트」 연재 18편입니다. (17편: 콩팥 건강을 게임으로)

📝 한줄 요약

오늘은 사용자가 매일 자기 건강을 적어 둘 수 있는 기록 기능 7종을 전부 완성한 날입니다. 물 얼마나 마셨는지, 체중, 수면, 스트레스, 운동, 검사 수치, 병원 진료일까지요. 같은 틀로 빠르게 찍어내되, 손이 많이 가는 둘(검사 수치·캘린더)은 따로 떼어 전용 화면으로 만들었습니다. 지난 편에서 챌린지를 게임처럼 바꿨다면, 이번엔 그 게임에 매일 기록할 거리를 채워 넣은 셈이에요.

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

건강 기록 7종을 하나의 공통 틀로 만들어, 한 번 잘 만든 구조를 계속 재사용
무거운 기능(검사 수치·캘린더)은 억지로 한 틀에 욱여넣지 않고 따로 떼어 전용 화면으로
기록하면 그날 챌린지 체크인(오늘 할 일에 도장 찍기)까지 자동으로 연결
화면이 세로로 길쭉하게 깨지던 버그를, 추측 대신 브라우저에서 실제 계산값을 재서 원인을 확정 — 어떤 설정값이 12픽셀로 망가져 있었어요
검사 수치는 일부만 다시 저장해도 기존 값이 사라지지 않게 합쳐서 저장

🎯 이런 분들께 도움돼요

비슷한 기능을 여러 개 빠르게 만들어야 하는데 어디까지 같은 틀로 묶을지 고민인 분
“분명 똑같이 만들었는데 화면이 이상하게 깨진다”를 겪어본 분
AI에게 작업을 한 덩어리씩 끊어서 안전하게 시키는 방법이 궁금한 분

😫 문제 상황 (Before)

지난 편까지 우리 서비스는 “콩팥 건강 챌린지”라는 뼈대를 갖췄습니다. 매일 미션을 주고, 해내면 도장을 찍고, 캐릭터가 자라는 구조요. 그런데 정작 사용자가 자기 몸 상태를 적어 둘 자리가 비어 있었습니다. 물을 얼마나 마셨는지, 어젯밤 잘 잤는지, 이번 주 운동은 했는지. 이런 걸 기록해야 챌린지도 의미가 생기고, 나중에 추세도 볼 수 있으니까요.

만들 기능을 적어 보니 일곱 개였습니다 — 수분, 체중, 수면, 스트레스, 운동, 검사 수치, 병원 진료일. 일곱 개를 하나하나 처음부터 만들면 시간이 끝없이 들고, 만들 때마다 미묘하게 달라져 나중에 손보기도 힘들어집니다. 그래서 정한 원칙이 하나 있었어요. 닮은 건 같은 틀로 찍어내고, 진짜 다른 것만 따로 만든다.

🛠️ 사용한 도구

도구: Claude Code
모델: Claude Opus
특이사항: 기능 하나(슬라이스)마다 “구상 → 계획서 → 한 덩어리씩 실행 → 실제 화면 점검” 순서를 반복. AI가 만들면 또 다른 AI가 검수하는 2단계 리뷰

🔧 작업 과정

멈춘 자리에서 다시, 그런데 로그인이 안 된다

이전 세션에서 /end-session 으로 저장해 둔 작업 상태를 복원해서, 끊김 없이 이어서 작업할 수 있게 해줘.

어제 작업한 내용을 불러와 이어가려는데, 로그인부터 막혔습니다. “일시적 오류가 발생했습니다”라는 메시지만 뜨더군요. 코드를 의심하기 전에 환경부터 봤습니다. 알고 보니 맥을 한 번 재시작했더니, 우리 서비스를 띄워 주는 프로그램(도커)이 꺼져 있었던 거예요. 다시 켜니 멀쩡했습니다.

💡 “오류가 났다”고 무조건 코드를 의심하지 마세요. 껐다 켰더니 사라지는 문제도 많습니다. 환경이 멀쩡한지부터 확인하는 게 빠른 길일 때가 있어요.

기능 하나를 ‘틀’로 만들어 두니, 나머지는 찍어내기

기록 기능 일곱 개 중 첫 몇 개를 만들 때 가장 공들인 건 공통 틀이었습니다. “사용자가 숫자나 메모를 입력 → 저장 → 목록으로 보기”라는 흐름은 일곱 개가 거의 똑같으니까요. 이 흐름을 한 번 잘 만들어 두면, 다음 기능은 거기에 살만 바꿔 끼우면 됩니다.

그래서 작업을 이렇게 끊었습니다. 스트레스 기록을 하나 만들고 머지(완성본에 합치기)한 뒤, “다음은 운동”, “다음은 검사 수치” 하는 식으로요. 매번 같은 신호를 보냈습니다.

머지했어, develop 최신화하고 스트레스 슬라이스 진행

이렇게 한 덩어리씩 끊어 진행한 이유가 있습니다. 일곱 개를 한꺼번에 만들라고 시키면, 어디서 무엇이 틀어졌는지 알기 어렵습니다. 하나씩 만들어 그때그때 화면으로 확인하면, 문제가 생겨도 범위가 좁아 잡기 쉬워요.

💡 닮은 일이 여러 개면, 첫 하나를 ‘틀’로 정성껏 만드세요. 그다음부터는 속도가 붙습니다. AI에게도 “이 틀 그대로, 이번엔 운동 버전” 하고 시키면 훨씬 정확하게 만들어 줍니다.

무거운 기능은 억지로 같은 틀에 넣지 않았다

같은 틀이 좋다고 모든 걸 거기 욱여넣으면 오히려 망가집니다. 일곱 개 중 둘은 성격이 달랐어요.

검사 수치는 혈압·혈당 같은 값이 여러 개 묶여 들어오고, 나중에 일부만 고칠 일도 많습니다. 병원 진료일 캘린더는 날짜를 다루고 “며칠 남았는지”까지 보여줘야 하죠. 이 둘을 다른 가벼운 기록과 같은 틀에 넣었다면, 그 틀이 점점 뚱뚱해져 결국 다섯 개 기능 전부가 복잡해졌을 겁니다.

머지했어, develop 최신화하고 검사 수치 슬라이스 진행

그래서 검사 수치와 캘린더는 각자 전용 화면으로 따로 떼어 냈습니다. 가벼운 다섯 개는 공통 틀을 공유하고, 무거운 둘은 자기 집을 따로 갖는 식이죠. 덕분에 공통 틀은 날씬하게 유지됐고, 무거운 둘도 자기 사정에 맞게 마음껏 자랐습니다.

💡 “같은 틀로 묶기”의 반대편엔 “따로 떼기”가 있습니다. 둘 다 필요해요. 성격이 확 다른 건 억지로 합치지 말고 따로 두는 게, 길게 보면 전부를 깔끔하게 합니다.

검사 수치: 일부만 다시 저장해도 나머지가 안 사라지게

검사 수치에서 까다로운 함정이 하나 숨어 있었습니다. 사용자가 오늘 혈압만 적었다가, 나중에 혈당을 추가로 적는다고 해 봅시다. 순진하게 만들면 두 번째 저장이 첫 번째를 통째로 덮어써서, 먼저 적은 혈압이 사라지는 사고가 납니다.

이걸 검수 단계에서 AI가 잡아 줬습니다. 해법은 단순했어요. 새로 저장할 때 기존 값과 합쳐서 저장하기. 새로 들어온 것만 갱신하고, 이미 있던 건 그대로 둡니다. “덮어쓰기”가 아니라 “합치기”인 거죠.

💡 저장은 ‘덮어쓰기’가 기본이라 위험할 때가 있습니다. 일부만 고치는 화면이라면 “기존 걸 지우지 말고 합쳐라”를 꼭 챙기세요. 안 그러면 멀쩡하던 데이터가 조용히 사라집니다.

화면이 세로로 길쭉하게 깨졌다 — 추측 대신 ‘재서’ 확정

검사 수치 화면을 띄웠더니 글자가 한 글자씩 세로로 흘러내려 화면이 길쭉하게 깨졌습니다. 이런 건 “여기가 문제겠지” 하고 짐작으로 고치다 시간을 버리기 쉽습니다. 저도 두 번쯤 추측으로 고쳤다가 실패했어요.

그래서 방식을 바꿨습니다. 브라우저에서 그 화면의 실제 계산값을 직접 재 본 겁니다. 화면 폭이 실제로 몇 픽셀인지 측정했더니, 글자가 들어갈 칸의 너비가 12픽셀로 잡혀 있었습니다. 한글 한 글자도 못 들어가는 폭이니, 글자가 세로로 한 줄씩 떨어질 수밖에요. 원인은 화면 폭을 정하는 설정값 하나가 엉뚱하게 망가져 있던 거였습니다. 그 값을 정확한 수치로 바꿔 주니 단번에 펴졌습니다.

💡 “왜 깨졌지?”는 추측하지 말고 재 보세요. 브라우저는 지금 화면이 실제로 몇 픽셀인지 알려줍니다. 그 숫자 하나가 “어디가 망가졌는지”를 곧장 가리켜 줘요. 짐작 세 번보다 측정 한 번이 빠릅니다.

병원 진료일과 ‘며칠 남았는지’

마지막은 병원 진료일 캘린더였습니다. 진료 날짜를 등록하면 “며칠 남았다”를 보여 주는 기능이죠.

머지했어, develop 최신화하고 병원 캘린더 진행

여기서 잠깐 헷갈린 일이 있었습니다. 시험 삼아 돌려 보니 “며칠 남았는지”가 하루씩 틀리게 나오는 거예요. 코드를 한참 의심했는데, 범인은 엉뚱한 데 있었습니다. 서비스를 돌리는 가상 환경의 시계가 실제 시간보다 하루 느리게 가고 있었던 겁니다(컴퓨터가 절전 모드를 거치며 생긴 일이었어요). 환경을 다시 켜서 시계를 맞추니 정확해졌습니다. 코드는 처음부터 멀쩡했던 거죠.

💡 날짜·시간이 틀리면 코드만 보지 말고 ‘시계’부터 의심하세요. 컴퓨터의 시간 자체가 어긋나 있으면, 코드가 완벽해도 결과는 하루씩 틀립니다.

도장이 찍히는데 포인트는 회수가 안 된다

기록과 챌린지를 연결하다 보니 작은 사고가 하나 드러났습니다. 미션을 완료하면 포인트가 올라가는데, 완료를 취소하면 포인트가 제대로 돌아오지 않는 문제였어요.

완수를하면 포인트가 +20인데 취소를 하면 -100이 되네

완료하면 20점이 붙는데, 취소를 누르면 100점이 깎이는 식이었습니다. 주고받는 점수가 짝이 안 맞은 거죠. 이런 건 대충 “여기 숫자 고치면 되겠지”로 손대면 다른 데서 또 터집니다. 그래서 차분히 근본 원인을 먼저 찾고 고쳤습니다. 완료할 때 더하는 점수와 취소할 때 빼는 점수가 정확히 같은 짝이 되도록 맞췄어요.

💡 “준 만큼만 돌려받는다”가 기본입니다. 더하기와 빼기가 짝이 안 맞으면, 사용자는 손해 보거나 이득 보고 신뢰가 깨집니다. 숫자를 급히 바꾸기 전에 “왜 어긋났는지”부터 찾으세요.

✅ 결과 (After)

Before vs After

항목	Before	After
건강 기록	적어 둘 자리 없음	7종 완성 (수분·체중·수면·스트레스·운동·검사·병원 진료일)
만드는 방식	매번 처음부터	공통 틀로 찍어내기 + 무거운 둘은 따로 떼기
챌린지 연결	따로 놂	기록하면 그날 체크인 자동 연동
화면 깨짐	원인 짐작 → 반복 실패	실제 값 측정으로 12픽셀 깨짐 확정·수정

결과물

매일 쓸 수 있는 건강 기록 기능 7종(수분·체중·수면·스트레스·운동·검사 수치·병원 진료일 캘린더)
가벼운 다섯은 공통 틀, 무거운 둘은 전용 화면으로 분리
기록 시 챌린지 자동 체크인 연동, 검사 수치는 ‘합쳐 저장’으로 데이터 보호

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

효과적이었던 것

첫 하나를 틀로: 닮은 작업이 여럿이면 첫 하나를 잘 만들어 두고 “이 틀 그대로 다음 버전” 식으로 시키면 빠르고 정확함
한 덩어리씩 끊기: 일곱 개를 한 번에가 아니라 하나씩 만들고 그때그때 화면 확인 → 문제 범위가 좁아 잡기 쉬움
만든 걸 또 검수시키기: AI가 만든 결과를 다른 AI가 점검 → 데이터 사라지는 사고를 미리 발견

이렇게 하면 안 돼요

모든 걸 한 틀에 욱여넣기: 성격이 다른 건 따로 떼야 전부가 깔끔해짐
화면 깨짐을 짐작으로 고치기: 추측 말고 실제 값을 재서 원인을 짚을 것
숫자를 급히 바꿔 끄기: 더하기·빼기가 어긋나면 근본 원인부터. 땜질은 또 다른 곳에서 터짐

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

이건 코드가 아니어도 똑같이 통합니다. 비슷한 문서를 여러 개 만들어야 하면 첫 하나를 양식(틀)으로 잘 잡아 두는 게 제일 빠릅니다. 다만 성격이 확 다른 건 억지로 같은 양식에 넣지 말고 따로 만드세요. 무리하게 통일하면 양식이 누더기가 됩니다. 그리고 “왜 이상하지?” 싶을 땐 짐작으로 고치지 말고 실제 숫자를 한 번 재 보는 것 — 표가 안 맞으면 합계를 직접 더해 보고, 날짜가 틀리면 시계부터 확인하는 식이죠. 측정 한 번이 추측 세 번을 이깁니다.

🚀 앞으로의 계획

기록이 쌓이면 다음 질문이 자연스럽게 생깁니다 — “이 사람한테 맞는 챌린지가 제대로 가고 있나?” 그런데 다음 편에서 황당한 장면을 마주합니다. 대시보드에는 “당신은 관리가 필요한 위험군”이라고 떠 있는데, 정작 챌린지는 엉뚱한 코스를 주고 있는 거예요. 화면 따로, 배정 따로 노는 상황이었죠. 다음 편에서는 이 자동 배정 버그를, 추측이 아니라 데이터로 끝까지 추적해 잡는 이야기를 풀어 보겠습니다. 다음 막에서 이어집니다.

📋 재사용 가능한 프롬프트

프롬프트 1: 닮은 작업을 ‘틀’로 만들어 반복

[비슷한 작업 여러 개]를 만들어야 해. 먼저 첫 하나를 공통 틀로 잘 만들고, 그다음부터는 “이 틀 그대로, 이번엔 [다른 버전]” 식으로 하나씩 끊어서 진행해줘. 매번 끝나면 실제 화면으로 확인하고 다음으로 넘어가자.

프롬프트 2: 화면 깨짐을 측정으로 확정

[이 화면]이 이상하게 깨졌어. 짐작으로 고치지 말고, 브라우저에서 실제 계산된 값(폭·높이 등)을 직접 재서 어디가 잘못된 숫자인지 먼저 확인한 다음 고쳐줘.

프롬프트 3: 일부만 저장해도 기존 값 보호

[이 기록 화면]은 한 번에 일부만 입력할 수 있어. 새로 저장할 때 기존에 적어 둔 값을 덮어쓰지 말고, 새로 들어온 것만 갱신하고 나머지는 그대로 합쳐서 저장해줘.

📌 「AI 헬스케어 파이널 프로젝트」 연재 18편입니다. 다음 막에서 또 이어집니다.