실서비스에서 줄줄이 터진 버그, 그리고 디자인을 통째로 갈아입힌 하루

📚 「AI 헬스케어 파이널 프로젝트」 연재 21편입니다. (20편: 진단받은 사람과 아직 아닌 사람을, 서비스가 다르게 대하도록)

📝 한줄 요약

드디어 우리 서비스를 진짜 서버(아마존 클라우드)에 올려 직접 써봤습니다. 그랬더니 테스트에서는 안 보이던 버그가 줄줄이 튀어나왔습니다. 챌린지가 중복으로 뜨고, 콩팥병 진단을 입력해도 화면이 옛날 등급을 붙들고 있고, 관리자 화면엔 생일이 그대로 노출돼 있었습니다. 하나씩 잡으면서, 오후엔 칙칙하던 화면 전체를 미니멀한 연보라 톤으로 통째로 갈아입혔습니다. 디자인 값을 한 곳에서만 관리하니 화면 수십 개가 한 번에 바뀌더군요.

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

진짜 서버에 올려 직접 써보니 테스트에서 못 본 버그가 무더기로 드러남
가장 중요한 수정: “콩팥병 진단을 입력했는데 화면이 안 바뀐다” → 계산 시점을 고쳐 뿌리째 해결
관리자가 사용자 화면을 읽기 전용으로 들여다보는 기능을 새로 붙임(누가 봤는지 기록까지 남김)
손으로 그리던 그래프를 전문 차트로, 칙칙하던 화면을 미니멀 연보라로 통째 교체
비결: 색·모서리·그림자 같은 디자인 값을 **한 곳에서 정의(단일 출처)**해 두고 거기만 바꿈
교훈: 실서비스는 직접 써봐야 안다. 디자인은 한 곳에서 관리하면 단번에 바뀐다

🎯 이런 분들께 도움돼요

만든 걸 실제로 띄워놓고 “왜 테스트랑 다르지?” 겪어본 분
화면 디자인을 한 번에 싹 바꾸고 싶은데 막막한 분
AI에게 버그 수정과 디자인 작업을 동시에 시켜보고 싶은 분

😫 문제 상황 (Before)

그동안은 제 컴퓨터 안에서만 돌려봤습니다. 이날은 달랐어요. 우리 서비스를 아마존 클라우드 서버에 올려, 인터넷 주소로 접속해 진짜 사용자처럼 써봤습니다.

그랬더니 바로 티가 났습니다. 챌린지(미션) 목록에 같은 항목이 두 번씩 떴어요. 콩팥병 진단을 “예”로 입력했는데 대시보드는 여전히 일반 등급을 보여줬습니다. 관리자 화면을 열어보니 사용자 생일이 가려지지도 않고 그대로 적혀 있었고요.

내 컴퓨터에선 멀쩡했던 것들이, 진짜 서버에선 줄줄이 어긋나 있었습니다. 디자인도 마음에 걸렸어요. 화면이 너무 밋밋하고 칙칙했습니다. “이대로 누구한테 보여줄 순 없는데” 싶었죠. 그래서 이날은 버그를 잡으면서 디자인까지 통째로 손보기로 했습니다.

🛠️ 사용한 도구

도구: Claude Code
모델: Claude Opus
특이사항: 진짜 서버를 직접 써보며 버그 발견 → 내 컴퓨터에서 고침 → 반영. 디자인은 AI 여러 명을 동시에 굴려 빠르게 교체

🔧 작업 과정

진짜 서버에 띄워보니, 안 보이던 게 보였다

지금 아마존 ec2애 배포를 완료한 상태인데
직접 사용해보니 안되는 부분들이 있거나 잘못된 부분들이 있어
ec2서버의 코드를 너가 확인할 방법은 없나?

저는 AI에게 서버 접속 열쇠 파일을 건네주고, 운영 중인 서버를 함께 들여다볼 수 있게 했습니다. 그리고 한 가지 원칙을 정했어요.

앞으로는 배포 버전을 기준으로 수정사항을 요청할께
수정은 로컬에해서 깃허브 -> 도커 순서로 원래대로 반영하는것이고
기억해

이게 의외로 중요했습니다. 급하다고 서버에서 직접 고치면, 다음에 새 버전을 올릴 때 그 수정이 덮어쓰여 사라집니다. 그래서 “발견은 진짜 서버에서, 수정은 내 컴퓨터에서, 반영은 정해진 통로로만” 하기로 못 박았죠.

💡 만든 건 반드시 진짜 환경에서 직접 써보세요. 내 책상에서 멀쩡한 게 실전에선 어긋납니다. 그리고 급해도 실전 화면을 직접 손대지 마세요. 정해진 통로로만 고쳐야 안 사라집니다.

”진단을 입력했는데 화면이 안 바뀐다” — 뿌리를 찾아서

가장 골치 아팠던 버그입니다. 사용자가 문진(설문)에서 “콩팥병 진단을 받았다”고 입력해도, 대시보드는 옛날 일반 등급을 그대로 보여줬어요. 처음엔 화면 쪽을 손보려 했는데, 주니가 못을 박았습니다.

아니 그럼 근본 해결해야지 백엔드 재계산부터

그 말이 맞았습니다. 화면만 슬쩍 가리는 건 임시방편이죠. AI와 함께 뿌리를 캐보니 원인이 뚜렷했습니다. 사용자의 건강 등급을 계산하는 시점이 문제였어요. 등급은 처음 건강검진을 입력할 때 딱 한 번 계산되고, 그 뒤에 문진에서 진단 여부를 바꿔도 다시 계산되지 않았던 겁니다. 그래서 옛날 등급에 그대로 머물러 있었죠.

해결은 단순했습니다. 문진을 저장하는 순간 등급을 다시 계산하게 만들었습니다. 진짜 서버에서 다시 시험해보니, 진단을 “예”로 바꾸자마자 화면이 콩팥병 관리군으로 바뀌었습니다.

💡 “화면이 이상하다”의 진짜 원인은 화면이 아닐 때가 많습니다. 보이는 곳만 가리지 말고, “이 값이 언제 계산되는가”처럼 한 단계 안쪽을 파야 다시는 안 터집니다.

관리자가 사용자 화면을 ‘들여다보는’ 기능

관리자 화면을 점검하다가 두 가지를 손봤습니다.

birthday가 의도인지 코드로 확인해줘

먼저, 관리자 화면에 사용자 생일이 가려지지 않고 그대로 떠 있었습니다. 이름·이메일·전화번호는 일부를 별표로 가렸는데 생일만 빠졌더군요. 생일도 엄연한 개인정보라, 만 나이로만 보이게 바꿨습니다.

그다음이 새 기능입니다.

관리자 기능에 더 추가할건 기능이 없을지 확인해주고
내가 추가하고 싶은 기능은 관리자 창, 사용자관리에서 사용자를 선택하면
그 사용자의 건강검진 및 문진 결과 값이 일반창에 적용되게 만들어줘

쉽게 말해, 관리자가 특정 사용자를 골라 그 사람이 보는 화면을 그대로 들여다보는 기능입니다(전문용어로 임퍼소네이션, “사용자 화면 들여다보기”). 사용자가 뭘 보는지 알아야 문의에 답하거나 문제를 진단할 수 있으니까요.

다만 위험합니다. 관리자가 남의 화면을 마음대로 휘젓고 수정하면 안 되죠. 그래서 안전장치를 깔았습니다. 들여다보는 동안은 읽기 전용이라 어떤 수정도 서버가 막습니다. 누가 누구의 화면을 봤는지 **기록(감사 로그)**도 남기고, 30분이 지나면 자동으로 풀리게 했습니다.

💡 편한 기능일수록 안전장치를 같이 설계하세요. “들여다보기”는 편하지만, “읽기만 가능 + 누가 봤는지 기록”이 없으면 위험한 권한이 됩니다. AI에게 기능과 함께 안전장치를 요구하세요.

데모용 가상 사용자 16명, 손으로 그리던 그래프도 교체

발표·시연을 앞두고 가상 사용자 16명을 만들었습니다. 팀이 준비한 인물 설정(분류군별 남녀)을 입력해, 건강 상태가 제각각인 계정을 한 번에 찍어냈죠. 이러면 시연할 때 “건강한 사람은 이렇게, 관리가 필요한 사람은 이렇게 보인다”를 바로 보여줄 수 있습니다.

화면 안의 그래프도 손봤습니다.

[이미지] 여백없이 그래프 자동 크기 조절 필요

그동안은 그래프를 거의 손으로 그리다시피 해서, 화면 크기에 따라 여백이 들쭉날쭉했습니다. 이걸 전문 차트 도구로 바꾸니 화면에 꽉 맞게 자동으로 늘었다 줄었다 했어요. 출석을 표시하는 잔디(달력)도 가로축에 날짜를 채우고 칸을 정렬해 알아보기 쉽게 다듬었습니다.

💡 시연 전엔 ‘보여줄 데이터’와 ‘보기 좋은 화면’을 함께 준비하세요. 기능이 멀쩡해도, 빈 화면이나 들쭉날쭉한 그래프는 신뢰를 깎습니다.

칙칙하던 화면을 미니멀 연보라로 — 한 곳만 바꿨더니 전부 바뀌었다

이날의 백미입니다. 화면 디자인 전체를 갈아입혔어요. 주니가 원하는 느낌의 참고 이미지를 보여줬습니다.

[이미지] 이 디자인처럼

선명한 의료 블루로 한번 만들어봤다가, 주니가 보여준 깔끔한 어드민 느낌을 보고 방향을 틀었습니다. 최종은 미니멀한 연보라(periwinkle) 톤. 색은 차분한 보라빛 파랑, 모서리는 둥글지 않게 살짝 각지게, 그림자는 옅게. 배치는 그대로 두고 옷만 갈아입히는 방식이었죠.

비결이 핵심입니다. 보통 화면이 수십 개면 색을 바꾸려고 일일이 수십 곳을 고쳐야 합니다. 그런데 우리는 색·모서리·그림자 같은 디자인 값을 한 곳에 모아둔 단일 출처(전문용어로 디자인 토큰)를 써뒀어요. 그 한 곳만 연보라로 바꾸니, 37개 화면이 한꺼번에 따라 바뀌었습니다. 옷장에서 색을 한 번 정하면 모든 옷이 그 색으로 물드는 셈이죠.

확산도 빨랐습니다. AI 여러 명을 동시에 굴려, 각자 다른 화면 묶음(로그인·챌린지·리포트·검진·기록 등)을 맡겨 한꺼번에 손봤습니다. 개발용으로 화면마다 붙어 있던 파란 안내 띠도 한 번에 떼어냈고요.

[이미지] 위에 이 표시 다 지워줘
[이미지] 여기도 모서리 각 맞춰줘

주니가 화면을 보며 “여긴 모서리가 둥글다”, “이 칩도 각지게” 짚어주면, 그걸 토대로 둥근 조각들을 일관되게 각지게 통일했습니다. 단, 동그래야 자연스러운 것(프로필 사진, 작은 점, 진행 막대)은 일부러 둥글게 남겨뒀죠.

💡 디자인 값을 ‘한 곳’에서 관리하면 전체를 단번에 바꿉니다. 색·여백·모서리를 화면마다 박아두지 말고, 한 군데 모아 정의하세요. 거기만 바꾸면 전부 따라옵니다. 이게 디자인을 빠르게 갈아입는 비결입니다.

✅ 결과 (After)

Before vs After

항목	Before	After
점검 방식	내 컴퓨터에서만	진짜 서버를 직접 사용해 버그 발굴
진단 반영	등급이 옛날 값에 고착	문진 저장 시 다시 계산, 즉시 반영
관리자 화면	생일 노출, 들여다보기 없음	만 나이로 가림 + 읽기전용 들여다보기(기록 남김)
그래프	손으로 그려 여백 들쭉날쭉	전문 차트로 자동 크기 조절
디자인	칙칙한 기본 톤	미니멀 연보라로 37개 화면 일괄 교체

결과물

진짜 서버 기준으로 잡은 실서비스 버그 무더기 수정·반영
관리자 읽기전용 들여다보기 기능(개인정보 보호 + 감사 기록)
시연용 가상 사용자 16명 + 보기 좋게 정비한 그래프·달력
미니멀 연보라로 통일된 화면 전체

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

효과적이었던 것

진짜 환경에서 직접 써보기: 테스트에서 안 보이던 버그가 실서버에서 무더기로 드러남
뿌리부터 고치기: “화면이 이상하다”를 화면이 아니라 “값이 언제 계산되나”로 파고듦
한 곳에서 디자인 관리: 디자인 값을 한 군데 모아두고 거기만 바꿔 화면 전체를 단번에 교체
AI 여러 명 동시 가동: 화면 묶음을 나눠 맡겨 디자인 확산을 빠르게

이렇게 하면 안 돼요

실서버를 직접 핫픽스: 다음 배포에 덮어써져 사라짐. 정해진 통로로만 고치기
보이는 곳만 가리기: 임시방편은 또 터짐. 근본 원인을 먼저
편한 기능을 안전장치 없이: “들여다보기” 같은 강한 권한엔 읽기전용·기록을 꼭 같이

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

코드가 아니어도 똑같습니다. 보고서 양식을 만들 때, 글꼴·색·여백을 슬라이드마다 박아두면 나중에 바꾸기가 지옥입니다. 대신 ‘서식’을 한 번 정의해 두면, 그것만 고쳐도 문서 전체가 따라옵니다. 디자인 값을 한 곳에서 관리한다는 발상은 문서·자료·브랜드 어디에나 통해요.

버그 이야기도 마찬가지입니다. 내 책상에서 잘 돌아가는 것과 진짜 현장에서 잘 돌아가는 건 다릅니다. 시연 전엔 반드시 실제 환경에서 직접 한 바퀴 돌려보세요. 거기서야 진짜 문제가 보입니다.

🚀 앞으로의 계획

디자인 톤은 갈아입혔지만, 정작 화면의 배치는 그대로였습니다. 정보가 위아래로 길게 늘어져 있어서, 한눈에 잘 안 들어왔어요. 그래서 다음 편에서는 화면을 2열로 다시 짜는 작업을 다룹니다. 대시보드와 로그인 화면을 좌우로 나눠, 중요한 정보가 한눈에 들어오게 만드는 이야기예요. “한눈에 들어오게 — 대시보드와 로그인 화면을 2열로 다시 짠 하루”로 다음 막에서 풀어볼게요.

📋 재사용 가능한 프롬프트

프롬프트 1: 실서버 기준 수정 원칙 정하기

앞으로는 [실제 배포된 버전]을 기준으로 수정사항을 요청할게. 수정은 내 작업 환경에서 하고, [정해진 통로]로만 반영하는 거야. 실서버를 직접 고치지 말 것. 기억해줘.

프롬프트 2: 보이는 문제의 뿌리 찾기

[화면에서 이상한 점]이 보여. 화면만 가리지 말고 이 값이 언제·어디서 계산되는지부터 따져서, 근본 원인을 찾아 고쳐줘.

프롬프트 3: 디자인을 한 곳에서 일괄 교체

화면 전체를 [원하는 톤]으로 바꾸고 싶어. 단, 배치는 그대로 둬. 색·모서리·그림자 같은 값을 한 곳에 모아두고, 거기만 바꿔도 모든 화면이 따라 바뀌게 만들어줘.

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