주부 코딩 일기 2편 - 지원금 찾기 페이지 완성, 제주에서 전국으로, 바이브 코딩의 걱정

1편에서는 공공데이터 API 키를 받고, Cloudflare로 중간 서버를 만들어서 제주 지원금이 화면에 뜨는 데까지 성공한 이야기를 했습니다. 이번 편은 그 페이지를 실제로 쓸 수 있는 모양으로 다듬어 간 이야기예요.

왜 하필 제주였나

처음부터 전국 지원금을 다 담으려고 하면 데이터도 많고, 뭐가 잘못됐는지 찾기도 어려울 것 같았어요. 그래서 일부러 범위를 확 줄여서, 제가 사는 제주 지역 지원금만 먼저 불러와 보기로 했습니다. 작게 만들어서 제대로 돌아가는지 확인한 다음 넓혀가자는 생각이었죠.

막상 써보니 답답했던 점

제주 지원금이 화면에 뜨는 것까지는 좋았는데, 휴대폰으로 열어보니 아쉬운 점이 한두 개가 아니더라고요.

어르신 지원, 농업 지원, 시설 지원이 육아 지원금이랑 뒤섞여 있고, 어떤 게 곧 마감인지도 한눈에 안 보였어요. 그리고 결정적으로, 주부들이 제일 많이 찾는 부모급여, 아동수당, 근로·자녀장려금 같은 지원금이 하나도 없었습니다. 이런 건 보건복지부나 국세청 같은 중앙부처에서 하는 지원이라, 제주도와 제주시, 서귀포시 지원만 불러오는 방식으로는 애초에 목록에 들어올 수가 없었던 거예요.

지역으로 좁혀서 시작한 덕분에 오히려 '지역 지원금만으로는 부족하다'는 걸 빨리 알게 됐습니다. 그래서 페이지를 다듬으면서 전국 공통 지원금도 함께 넣기로 했어요.

이름부터 바꿨습니다

먼저 페이지 이름을 '주부를 위한 우리 동네 지원금 찾기'로 정했어요. 처음 아이디어를 떠올렸을 때부터 생각한 이름인데, 화면 맨 위에 제목으로 뜨니까 그제야 진짜 내 서비스 같은 느낌이 들었습니다.

그리고 화면을 탭 두 개로 나눴어요.

• 가정·육아 지원금: 처음 들어오면 바로 보이는 화면
• 모든 지원금: 어르신, 농업, 일자리 등 나머지 전체

가정·육아 탭 안에는 임신·출산, 육아·보육, 아동·교육, 다자녀·한부모, 여성·가족 버튼을 넣어서 원하는 분야만 골라볼 수 있게 했습니다.

마감 임박 순 정렬이 핵심이었어요

지원금은 결국 '언제까지 신청해야 하나'가 제일 중요하잖아요. 그래서 마감일이 있는 지원금은 D-15처럼 남은 날짜를 빨간 표시로 붙여 맨 위에 올리고, 언제든 신청할 수 있는 건 초록색 '상시 신청'으로, 이미 마감된 건 흐리게 맨 아래로 보내도록 했어요.

재미있었던 건, 공공데이터의 신청기한이 형식이 제각각이라는 점이었습니다. ‘2026.11.10까지'처럼 날짜가 적힌 것도 있고, '상시신청', '접수기관 별 상이', '예산 소진 시까지'처럼 날짜가 아닌 것도 많더라고요. 사람이 보면 당연한 걸 컴퓨터한테는 하나하나 알려줘야 한다는 게 코딩의 묘미 같아요.

휴대폰에서 보기 편하게 카드에는 핵심 한 줄만 보이고, '자세히'를 누르면 대상, 지원 내용, 신청 방법, 문의처가 펼쳐지도록 했습니다.

전국 공통 지원금을 더하다

이제 제주 지원금이 먼저 뜨고, 이어서 중앙부처의 전국 공통 지원금이 뒤따라 채워집니다. 카드마다 '제주'와 '전국 공통' 표시를 붙여서 어디서 주는 지원인지도 바로 구분되게 했고요.

이 과정에서 작은 실수도 하나 발견했어요. 처음엔 법인이나 단체용 지원을 빼려고 '개인 대상'만 남기도록 했는데, 데이터를 직접 열어보니 근로·자녀장려금은 대상이 '개인'이 아니라 '가구'로 되어 있더라고요. 주부한테 딱 맞는 지원금이 오히려 빠지고 있었던 거죠. 개인과 가구 대상은 모두 남기도록 고친 뒤, 검색창에 '자녀장려금'을 넣었을 때 카드가 딱 뜨는 걸 보고 나서야 마음이 놓였습니다.

이 페이지는 이렇게 움직여요

내 페이지 → 중간 서버(Cloudflare, 인증키 보관) → 공공데이터포털 → 중간 서버 → 내 페이지 화면

구조는 생각보다 단순해요. 방문자가 보는 내 페이지가 중간 서버에 "제주 지원금 보여줘"라고 요청하면, 중간 서버가 숨겨둔 인증키를 들고 공공데이터포털에 가서 데이터를 받아온 뒤 다시 페이지에 넘겨주는 방식입니다.

코드 수정은 이제 익숙해졌지만

몇 번 해보니 코드 수정 절차 자체는 이제 간단하게 할 수 있게 됐어요. AI가 고쳐준 코드 파일을 받아서, Cloudflare 편집 화면에 통째로 붙여넣고 Deploy 버튼만 누르면 끝이거든요. 처음엔 영어 화면 앞에서 쩔쩔맸는데, 서너 번 반복하니 손이 먼저 움직이더라고요.

그런데 솔직히 걱정되는 게 하나 있습니다. 저는 코드를 직접 짜는 게 아니라, AI에게 말로 설명하고 AI가 만들어준 코드를 쓰는 이른바 '바이브 코딩'을 하고 있잖아요. 지금은 잘 돌아가지만, 나중에 오류가 생기면 어디서부터 고쳐야 할지 막막할 것 같아요. 코드 내용을 다 이해하는 게 아니니까요.

그래서 이 고민을 Claude에게 그대로 물어봤습니다.

Claude의 답변

코드를 한 줄 한 줄 이해하지 못해도 괜찮아요. 오류를 고칠 때 필요한 건 코드 해석 능력보다 '어디가 막혔는지 찾는 순서'예요. 이번에 이미 그 순서를 한 번 직접 해보셨어요.

첫째, 오류는 세 칸 중 어디서 났는지부터 찾으면 됩니다. 

이 페이지는 내 페이지, 중간 서버, 공공데이터포털 세 칸으로 되어 있어요. 공공데이터 주소에 키를 넣어 열었을 때 데이터가 나오면 키는 정상이에요. 중간 서버 주소 뒤에 /api를 붙여 열었을 때 데이터가 나오면 서버도 정상이에요. 둘 다 정상인데 화면이 이상하면 페이지 코드 문제예요. 처음에 "서버에 연결하지 못했어요"가 떴을 때 바로 이 순서로 원인을 찾으셨어요.

둘째, 오류 메시지는 해석하지 말고 그대로 복사해서 AI에게 전달하세요.

빨간 글씨 한 줄, 화면 캡처 한 장이 AI에게는 가장 좋은 단서예요. 자녀장려금이 빠진 것도 데이터 화면 캡처 한 장으로 찾아냈어요.

셋째, 잘 돌아가는 버전은 따로 저장해 두세요. 

코드를 고치기 전에 지금 버전을 날짜를 붙인 파일로 보관해 두면, 새 코드가 문제를 일으켜도 예전 코드를 다시 붙여넣는 것만으로 되돌릴 수 있어요. Cloudflare에도 이전 배포 기록이 남아 있어서 되돌릴 수 있어요.

넷째, 한 번에 하나씩만 바꾸세요. 

여러 기능을 한꺼번에 고치면 뭐 때문에 문제가 생겼는지 알기 어려워요. 하나 고치고 확인하고, 또 하나 고치고 확인하는 식이 결국 가장 빨라요.

마지막으로, 고칠 때마다 "왜 이렇게 바꿨는지 한 줄로 설명해줘"라고 AI에게 물어보세요. 

그렇게 쌓인 한 줄들이 결국 내 코딩 실력이 됩니다.

답변을 읽고 나니

막연했던 걱정이 조금은 정리된 기분이에요. 코드를 다 이해해야만 고칠 수 있는 게 아니라, 어디가 막혔는지 찾는 순서를 아는 게 먼저라는 것. 생각해 보면 1편에서 연결 오류를 해결한 과정이 딱 그 순서였더라고요. 앞으로는 잘 되는 버전을 저장해 두는 습관부터 들여 보려고 합니다.

다음에는 제주 말고 다른 지역도 고를 수 있게 만들어서, 어디에 사시는 분이든 쓸 수 있는 페이지로 키워볼 생각이에요.

완성된 페이지는 아래에서 직접 써보실 수 있어요. 아직 다듬는 중이라, 써보시고 불편한 점이나 있었으면 하는 기능을 알려주시면 반영해 볼게요.

제가 AI와 함께 직접 만든 '주부를 위한 우리 동네 지원금 찾기' 페이지예요. 임신·출산, 육아·보육, 아동·교육 지원금을 마감 임박순으로 볼 수 있어요.

※ 지원금 정보는 공공데이터를 기반으로 하지만, 신청 조건이나 기한은 바뀔 수 있으니 실제 신청 전에는 정부24 등 공식 사이트에서 꼭 확인해 주세요.