주부 코딩 일기 - 공공데이터 API, Cloudflare 중간 서버, 지원금 찾기 페이지
솔직히 오늘 아침까지만 해도 ‘API’라는 말이 정확히 뭔지 몰랐습니다. 블로그를 하다 보니 지원금 관련 글을 자주 쓰게 되는데, 매번 정부24에 들어가서 하나하나 찾아보는 게 은근히 번거롭더라고요. 그러다 문득 '지역만 고르면 지원금이 쭉 뜨는 페이지를 내가 직접 만들 수는 없을까?' 하는 생각이 들었고, 오늘 그 첫 단추를 끼웠습니다.
결론부터 말하면, 오늘 하루 만에 제주 지역 지원금이 화면에 쭉 뜨는 나만의 페이지가 인터넷에 올라갔어요. 그 과정에서 "연결하지 못했어요"라는 빨간 글씨를 몇 번이나 봤는지 모릅니다.
왜 앱이 아니라 웹페이지였나
처음엔 PT 앱처럼 휴대폰 앱으로 만들까 생각했는데, 앱스토어 등록비와 심사 과정이 생각보다 번거롭더라고요. 이미 전국 단위 지원금 앱도 여러 개 나와 있고요.
그래서 방향을 바꿨습니다. 크게 경쟁하기보다 블로그와 연결되는 작은 웹페이지 하나로 시작하고, 대상도 주부를 위한 가정·육아 중심 지원금으로 좁혀보기로 했어요. 블로그 글마다 링크를 걸 수 있고, 만드는 과정 자체가 이렇게 일기 글감이 되니까 일석이조죠.
1단계 - 공공데이터포털에서 API 키 받기
 |
| [DATA웹페이지] |
정부 지원금 정보는 공공데이터포털(data.go.kr)에서 무료로 제공합니다. 제가 신청한 데이터는 '행정안전부_대한민국 공공서비스(혜택) 정보'인데, 보조금24에 나오는 중앙부처, 지자체, 공공기관 혜택 정보를 불러올 수 있는 데이터예요.
과정은 생각보다 간단했습니다.
- 공공데이터포털 회원가입
- 데이터 이름으로 검색 후 '활용신청' 클릭
- 활용 목적에 간단한 설명 작성 (자동승인이라 바로 처리돼요)
- 마이페이지에서 인증키 확인
여기서 말하는 인증키가 바로 API 키입니다. 쉽게 말하면 "이 사람은 데이터를 받아가도 되는 사람이에요"라는 출입증 같은 거예요. 그래서 남에게 보여주면 안 되고, 캡처할 때도 꼭 가려야 합니다.
키가 잘 작동하는지는 크롬 주소창에 정해진 주소와 키를 넣어 확인했는데, 화면에 한글로 된 지원금 정보가 잔뜩 쏟아지는 걸 보고 순간 꽤 신기했습니다.
2단계 - "서버에 연결하지 못했어요"의 정체
문제는 여기서부터였어요. Claude가 만들어준 시험 페이지에 키를 넣고 버튼을 눌렀는데, 계속 연결 실패가 뜨는 겁니다. 키는 분명 정상인데 말이죠.
알고 보니 원인은 브라우저 보안 규칙이었습니다. 내 컴퓨터에 저장된 파일이 외부 서버에서 마음대로 정보를 가져오지 못하도록 브라우저가 막아버리는 거예요. 거기다 키를 페이지 안에 그대로 넣으면, 페이지를 보는 누구나 내 키를 볼 수 있다는 문제도 있었고요.
그래서 필요한 게 '중간 서버'였습니다. 내 페이지와 공공데이터 사이에서 대신 심부름을 해주는 작은 서버예요. 키는 이 중간 서버 안에 숨겨두고, 페이지는 중간 서버에만 요청을 보내는 구조입니다.
3단계 - Cloudflare로 무료 중간 서버 만들기
 |
| [Cloudflare웹페이지] |
중간 서버는 Cloudflare라는 곳의 Workers 기능으로 만들었어요. 무료이고, 가입 후 버튼 몇 번 누르는 정도라 생각보다 어렵지 않았습니다. 다만 화면이 전부 영어라 처음엔 좀 당황스러웠어요.
제가 한 일을 정리하면 이렇습니다.
- Cloudflare 가입 후 Worker 하나 만들기
- Claude가 짜준 코드를 통째로 붙여넣고 Deploy 누르기
- 설정에서 SERVICE_KEY라는 이름으로 인증키를 비밀값(Secret)으로 저장하기
그런데 여기서 또 한 번 막혔습니다. 중간 서버 주소로 직접 들어가면 데이터가 잘 나오는데, 시험 페이지에서는 여전히 연결 실패가 뜨는 거예요. 확인해 보니 제가 시험 페이지를 Claude 화면 안에서 미리보기로 열고 있었고, 그 미리보기 안에서는 외부 연결이 막혀 있었던 겁니다.
해결 방법은 의외로 간단했어요. 중간 서버가 데이터뿐 아니라 페이지 자체도 같이 보여주도록 코드를 바꾼 거죠. 그랬더니 중간 서버 주소로 들어가기만 하면 지원금 페이지가 바로 뜨고, 이 주소가 그대로 블로그에 걸 링크가 됐습니다.
화면에 "제주 관련 지원금을 찾았어요"라는 문구와 함께 지원금 카드가 쭉 뜨는 순간, 혼자 박수를 쳤습니다.
오늘 배운 것
코딩을 해보면서 느낀 건, 막히는 순간이 실패가 아니라 원인을 하나씩 좁혀가는 과정이라는 점이었어요. 오늘만 해도 키 문제인지, 서버 문제인지, 브라우저 문제인지 하나씩 확인하다 보니 결국 답이 나왔으니까요.
그리고 처음 들었던 낯선 용어들도 이제는 조금 감이 옵니다.
- API: 다른 곳의 데이터를 정해진 방식으로 받아오는 통로
- API 키(인증키): 그 통로를 이용할 수 있는 출입증
- 중간 서버: 키를 숨긴 채 대신 데이터를 받아다 주는 심부름꾼
- Deploy: 만든 코드를 실제로 인터넷에 적용하는 버튼
다음 일기 예고
지금 페이지는 아직 시험용이라 어르신 지원, 농업 지원 같은 항목도 섞여 있어요. 다음에는 가정·육아 관련 지원금을 앞쪽에 보여주고, 마감일 순으로 정렬하고, 휴대폰에서 보기 편하게 디자인을 다듬어볼 생각입니다. 어느 정도 모양이 갖춰지면 블로그 글에 링크도 걸어둘게요.
코딩을 전혀 모르는 주부도 AI와 함께라면 하루 만에 여기까지 올 수 있다는 걸, 저도 오늘 처음 알았습니다.