콩팥 건강을 게임으로 — 챌린지를 통째로 다시 설계한 날

📚 「AI 헬스케어 파이널 프로젝트」 연재 17편입니다. (16편: 리포트 여는 데 25초? 7밀리초로 줄였다)

📝 한줄 요약

콩팥 건강을 챙기는 **습관 미션(챌린지)**을 게임처럼 통째로 다시 설계한 날입니다. 챌린지를 맡은 팀원이 보내준 기획서와 화면 시안을 받아, 사용자 유형별로 미션을 자동으로 나눠주고, 캐릭터가 단계마다 자라는 구조로 바꿨습니다. 작업 중에 “캐릭터 배경이 왜 안 바뀌지?”라는 작은 의문을 파다가, 알고 보니 단계를 올려주는 로직이 코드에 아예 없었던 숨은 버그까지 잡았습니다.

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

받은 기획서·화면 시안을 그대로 옮기되, 우리 서비스의 게임화 흐름과 합치는 게 핵심
미션을 **사용자 유형별 5개 갈래(트랙)**로 나누고, 진단 여부·위험도에 따라 자동 배정
받은 화면 디자인을 실제로 움직이는 화면으로 옮기고, 캐릭터·단계·필수 체크를 통합
숨은 진짜 원인 발견: 캐릭터 배경이 안 자라던 게, 알고 보니 단계 값을 올려주는 로직이 아예 없어서 전부 1단계에 묶여 있던 것
작은 화면에선 메뉴가 자동으로 하단 탭바로 바뀌게(데스크탑 화면은 그대로 보존)

🎯 이런 분들께 도움돼요

누가 만들어준 기획서나 디자인 시안을 실제 결과물로 옮겨야 하는 분
“분명 있을 텐데 왜 안 보이지?” 하는 잘 안 보이는 버그에 시달리는 분
딱딱한 기능을 게임처럼 재미있게 바꿔보고 싶은 분

😫 문제 상황 (Before)

우리 서비스에는 원래도 챌린지가 있었습니다. “물 마시기”, “체중 재기” 같은 건강 습관 미션이죠. 그런데 그동안의 챌린지는 모두에게 똑같은 한 덩어리였습니다. 콩팥병 진단을 받은 사람도, 아직 건강한 사람도, 위험 신호가 보이기 시작한 사람도 같은 미션을 받았습니다.

이건 좀 이상했습니다. 투석을 받는 분에게 필요한 습관과, 아직 진단 전이지만 혈압이 슬슬 높아지는 분에게 필요한 습관이 같을 리 없으니까요. 마침 챌린지를 맡은 팀원이 새로운 설계서와 화면 시안을 보내줬습니다. 사용자 유형별로 미션을 나누고, 캐릭터가 단계마다 자라는 게임 요소까지 담은 기획이었죠.

제 일은 이걸 우리 서비스에 그대로 옮겨 붙이는 것이었습니다. 단순한 복사가 아니었습니다. 받은 시안을 우리가 이미 만들어 둔 캐릭터·게임 요소와 어색하지 않게 합쳐야 했거든요.

🛠️ 사용한 도구

도구: Claude Code
모델: Claude Opus
특이사항: 팀원이 준 기획서·HTML 시안 → 실제 서비스로 이식. 오전엔 미션 구조(백엔드), 오후엔 화면(프론트). 작은 화면 대응까지

🔧 작업 과정

미션을 5개 갈래로 — “한 덩어리”를 사람에 맞게 쪼개다

다음으로 챌린지 기능을 구현해보자
챌린지 담당 팀원으로부터 아래의 파일을 받았어
파일을 따로 저장해주고
아래 파일을 참고해 챌린지 기능을 지금 우리 기능에 결합해줘

팀원이 보내준 건 화면 시안 파일과 구성 기획서였습니다. 저는 우선 받은 파일을 안전한 자리에 따로 보관해 두고, AI에게 그 내용을 기준으로 우리 서비스에 합쳐달라고 했습니다.

핵심은 미션을 사람에 맞게 쪼개는 일이었습니다. 기존엔 미션 갈래(트랙, 미션을 묶는 큰 분류)가 2개뿐이었는데, 이걸 5개로 늘렸습니다. 투석 중인 분, 콩팥병 진단을 받은 분, 위험 신호가 또렷한 분, 가벼운 관리만 필요한 분, 그리고 아직 예방 단계인 분. 각 갈래 안에서 미션의 종류(카테고리, 미션을 성격별로 나눈 작은 분류)도 5종에서 9종으로 넓혔습니다. 교육·기록·관찰·감정 같은 결까지 담기 위해서요.

가장 마음에 든 건 자동 배정이었습니다. 사용자가 검진 정보를 넣으면, 진단을 받았는지·위험도가 어느 정도인지를 보고 알맞은 갈래를 알아서 골라줍니다. 투석 중이면 투석 갈래로, 아직 진단 전이지만 위험 신호가 또렷하면 집중 관리 갈래로. 사용자가 “나는 어디에 속하지?”를 고민할 필요 없이, 서비스가 먼저 자리를 잡아주는 거죠.

💡 “모두에게 똑같이”는 공평해 보이지만 맞춤은 아닙니다. 받은 사람을 유형별로 나누고, 그 분류를 시스템이 자동으로 골라주게 하면 사용자가 고민할 일이 줄어듭니다.

받은 디자인을, 실제로 움직이는 화면으로

미션 구조를 다 짠 다음엔, 받은 화면 시안을 실제로 동작하는 화면으로 옮길 차례였습니다. 시안은 보기엔 멋지지만 그냥 그림에 가깝습니다. 버튼을 눌러도 아무 일이 안 일어나죠. 이걸 진짜로 클릭되고, 미션이 체크되고, 캐릭터가 반응하는 화면으로 다시 지어야 했습니다.

여기서 제가 정한 원칙은 **“받은 시안을 그대로 옮기되, 우리 게임 흐름과 합치기”**였습니다. 받은 디자인의 색감과 구성은 살리되, 우리가 이미 만들어 둔 캐릭터·단계·점수 같은 게임 요소와 자연스럽게 연결했습니다. 예를 들어 선택형 미션을 체크하면 그 자리에서 바로 참여 처리가 되고, 체크를 풀면 참여도 취소됩니다. 사용자는 그냥 체크 한 번만 하면 되는 거죠.

이 과정에서 작은 함정도 있었습니다. 미션 종류를 5개에서 9개로 늘렸더니, 예전 화면에서 5개만 가정하고 만든 부분들이 어긋났습니다. 늘어난 4종을 빠짐없이 채워 넣어야 화면이 멀쩡하게 돌아갔습니다. 구조를 바꾸면, 그 구조를 쓰던 곳도 같이 손봐야 한다는 걸 다시 배웠습니다.

💡 시안은 사진, 화면은 영상입니다. 멋진 그림을 받아도 “눌리고 반응하는” 살아 있는 화면으로 다시 짓는 건 별개의 일이에요. 그리고 한 군데 구조를 바꾸면, 그걸 쓰던 다른 곳도 반드시 같이 점검하세요.

”배경이 왜 안 바뀌지?” — 잔디에 묶인 캐릭터의 비밀

챌린지 페이지 상단에 아래 대시보드의 캐릭터 창이 연동되서 보이게 해줘
그리고 우리 챌린지 단계에 따라서 배경이 바뀌는데 잔디 외에는 배경이미지가 없어서 변경이 안되는건가?

우리 서비스에는 사용자를 따라다니는 캐릭터가 있습니다. 미션을 잘 해내면 캐릭터가 성장하고, 단계가 오르면 배경 풍경도 함께 바뀌게 설계돼 있었죠. 1단계는 잔디밭, 점점 더 멋진 풍경으로. 그런데 아무리 미션을 해도 배경이 잔디에서 안 바뀌는 겁니다. 저는 처음에 “다른 배경 그림이 아직 없어서 그런가?” 하고 의심했습니다.

그래서 AI와 함께 차근차근 파봤습니다. 그랬더니 뜻밖의 사실이 드러났습니다. 배경 그림은 1단계부터 4단계까지 네 종류가 멀쩡히 다 있었습니다. 그림이 없는 게 아니었어요. 진짜 문제는 따로 있었습니다 — 캐릭터의 성장 단계 값을 ‘올려주는’ 로직이 코드에 아예 없었던 겁니다. 그래서 모든 사용자가 영원히 1단계에 묶여 있었고, 1단계 배경인 잔디만 계속 보였던 거죠.

이건 흔한 종류의 버그가 아니었습니다. 보통 버그는 “코드가 잘못 동작하는” 것인데, 이건 “있어야 할 코드가 아예 없는” 쪽이었습니다. 잘못 짜인 게 아니라 빠져 있던 거예요. 그래서 미션 단계가 오를 때마다 캐릭터의 성장 단계도 같이 올라가도록 연결고리를 새로 달았습니다. 기존 사용자들의 단계도 한꺼번에 맞춰줬고요. 고치고 나니 미션을 진행할수록 배경이 잔디밭에서 점점 다른 풍경으로 바뀌었습니다.

💡 안 보이던 버그의 진짜 원인은, “있어야 할 게 아예 없는 것”일 수 있습니다. “왜 안 되지?”를 “어디가 잘못됐지?”로만 보지 마세요. 때로는 잘못된 게 아니라 빠져 있는 겁니다. 그림 탓을 하기 전에, 그림을 골라주는 손이 있는지부터 확인하세요.

작은 화면에선 메뉴를 아래로 — 데스크탑은 그대로

폭을 넓히면 뒤에 배경이 잘리고
폭을 좁히면 배경은 괜찮은데, 위에 메뉴 글씨 정렬이 깨지네

이제 화면을 직접 써보니 또 다른 문제가 보였습니다. 우리 서비스는 원래 넓은 컴퓨터 화면을 기준으로 만들어졌습니다. 그래서 화면을 좁히면(휴대폰 화면처럼) 위쪽 메뉴 글씨가 줄줄이 깨지고, 반대로 너무 넓히면 캐릭터 배경이 잘렸습니다.

그래서 **반응형(화면 크기에 따라 알아서 모양을 바꾸는 방식)**으로 손봤습니다. 작은 화면에서는 위쪽 가로 메뉴를 숨기고, 대신 휴대폰 앱처럼 화면 아래에 탭바를 띄웠습니다. 엄지로 누르기 편한 자리죠. 캐릭터 배경도 화면이 넓어져도 잘리지 않게 비율을 고정했습니다.

여기서 제가 신경 쓴 건 **“데스크탑 화면은 절대 건드리지 않기”**였습니다. 작은 화면을 고치다가 멀쩡하던 큰 화면까지 망가뜨리면 안 되니까요. 그래서 변경 하나하나를 “작은 화면일 때만” 적용되도록 조건을 달았습니다. 큰 화면은 예전 그대로, 작은 화면만 새 모습으로.

💡 새로 고치는 게 옛것을 망가뜨리면 안 됩니다. “이 변경은 작은 화면일 때만”처럼 적용 조건을 명확히 달면, 잘 되던 부분을 지키면서 새 환경만 챙길 수 있어요.

”내가 안 했는데 머지가 돼 있네?”

내가 안했는데 머지가 되어 있는거 같은데?

마지막에 재미있는 일이 있었습니다. 챌린지 화면 작업을 정리해 공유 작업본에 반영(머지)하는 단계가 있는데, 주니인 제가 분명 직접 누른 기억이 없는데 이미 반영돼 있었던 거죠. “내가 안 했는데?” 하고 갸웃했습니다.

확인해보니, 제 깃허브 계정으로 제가 직접 반영한 기록이 남아 있었습니다. AI가 임의로 한 게 아니었어요. 평소 저는 공유 작업본에 합치는 건 꼭 제가 직접 하기로 원칙을 세워뒀는데, 그 원칙대로 제가 누른 걸 잠깐 잊었던 거였습니다. 사람의 기억보다 기록이 정확하다는 걸 다시 느낀 순간이었죠.

💡 “누가 했는지”가 헷갈릴 땐 기억이 아니라 기록을 보세요. 협업 도구는 누가 언제 무엇을 했는지 다 남깁니다. 특히 중요한 작업일수록, 기억에 기대지 말고 기록으로 확인하는 습관이 안전합니다.

✅ 결과 (After)

Before vs After

항목	Before	After
미션 갈래(트랙)	2개, 모두 동일	5개, 사용자 유형별
미션 종류(카테고리)	5종	9종(교육·기록·관찰·감정 추가)
배정 방식	사용자가 직접 고름	진단·위험도 보고 자동 배정
캐릭터 배경	영원히 잔디(1단계 고정)	단계 따라 풍경 변화(숨은 버그 수정)
작은 화면	메뉴 깨짐	하단 탭바로 자동 전환(데스크탑은 그대로)

결과물

사용자 유형별로 미션을 자동 배정하는 챌린지 구조(갈래 5종·종류 9종)
받은 디자인 시안을 실제로 움직이는 게임형 화면으로 이식
캐릭터 성장 단계와 배경이 함께 자라는 구조(숨은 버그 수정 포함)
휴대폰에서도 깨지지 않는 화면

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

효과적이었던 것

받은 자료를 먼저 보관하고 시작: 팀원이 준 기획서·시안을 안전한 자리에 저장해 두고, 그걸 기준 삼아 옮김
“왜 안 되지?”를 끝까지 파기: 배경이 안 바뀐 원인을 “그림이 없어서”로 단정하지 않고 AI와 함께 추적 → 진짜 원인(빠진 로직) 발견
변경 조건 명확히 달기: “작은 화면일 때만”처럼 적용 범위를 좁혀 멀쩡하던 부분을 지킴

이렇게 하면 안 돼요

시안을 그대로 복사로만 끝내기: 시안은 그림일 뿐, 우리 게임 흐름과 합치는 작업이 진짜 일
표면 증상에서 멈추기: “배경이 안 바뀌네” 같은 증상만 보고 그림 탓으로 끝내면 진짜 원인을 놓침
기억에 기대 작업 주체 단정하기: 누가 했는지 헷갈릴 땐 기록을 확인

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

“받은 자료를 내 결과물로 옮기는” 일은 어디에나 있습니다. 디자이너가 준 시안, 기획자가 준 문서, 다른 부서가 보내준 양식. 이때 핵심은 두 가지예요. 그대로 옮기되 내 흐름과 합치는 것, 그리고 잘 안 풀리는 문제는 표면이 아니라 진짜 원인까지 파는 것. 특히 “분명 있을 텐데 왜 안 보이지?” 싶을 땐, 잘못된 걸 찾기 전에 **“있어야 할 게 빠진 건 아닌지”**를 의심해보세요. 의외로 그 경우가 많습니다.

🚀 앞으로의 계획

이번에 챌린지의 큰 틀을 게임처럼 다시 짰습니다. 그런데 게임이 재미있으려면 “내가 진짜로 뭘 했는지”가 차곡차곡 쌓여야 합니다. 오늘 물을 얼마나 마셨는지, 체중은 어땠는지, 잠은 잘 잤는지를 손쉽게 적고, 그게 미션과 연결돼야 하죠. 그래서 다음 편에서는 물·체중·수면·운동까지, 건강 기록 기능 7종을 완성한 이야기를 풀어봅니다. 게임의 뼈대 위에 진짜 데이터를 채워 넣는 작업이에요. 다음 막에서 이어가겠습니다.

📋 재사용 가능한 프롬프트

프롬프트 1: 받은 시안·기획서를 내 서비스에 합치기

팀원에게서 [화면 시안 / 기획서 파일]을 받았어. 먼저 이 파일을 안전한 자리에 따로 보관해줘. 그다음 이 자료를 기준으로, 우리가 이미 만들어 둔 [기존 기능]과 어색하지 않게 합쳐줘. 그냥 복붙이 아니라, 우리 흐름에 맞게 다시 정리하는 게 목표야.

프롬프트 2: 잘 안 보이는 버그의 진짜 원인 찾기

[이 기능]이 분명 동작해야 하는데 안 돼. 표면 증상은 [예: 배경이 안 바뀜]이야. “코드가 잘못된 것”뿐 아니라 “있어야 할 코드가 아예 빠진 것”일 가능성도 같이 따져줘. 추측하지 말고, 관련 부분을 직접 짚어가며 진짜 원인을 찾아줘.

프롬프트 3: 옛것을 지키면서 작은 화면만 손보기

[이 화면]을 작은 화면(휴대폰)에서도 안 깨지게 고쳐줘. 단, [넓은 화면]은 지금 그대로 보존해야 해. 변경은 전부 “작은 화면일 때만” 적용되도록 조건을 달아서, 큰 화면이 영향받지 않게 해줘.

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