드론 띄우기 전엔 창밖 보고 날씨 앱 켜고 🛸
공방 들어가선 또 온습도계 들여다보고. 😮💨
매번 이게 너무 귀찮았어.
드론은 바람이 핵심이고, 공방 UV 프린터는 온습도가 생명인데, 둘을 따로따로 확인하는 게 일이더라고.
그래서 그냥 만들어버렸어. 위치만 고르면 "지금 드론 띄워도 돼?"랑 "지금 공방 작업해도 돼?"를 한 화면에서 판정해주는 날씨 대시보드를. 그것도 하루 만에.
(물론 날씨 정보만 가지고 만들어서 기능은 아직 미흡하지만, 내가 원하는 기능을 앞으로 계속 추가해서 완성해 나갈 수 있다는 걸 알려주고 싶어)
오늘은 그 과정을 통째로 공유할게.
핵심은 하나야 — 공공데이터(data.go.kr) 하나만 잘 가공해도, 누구나 '나만 쓰는 도구'를 만들 수 있다는 것. 코딩 잘 몰라도 돼. 진짜로.
⭐ 30초 요약
data.go.kr 기상청 단기예보 API로 현재·시간별·3일 날씨를 받아, 드론 비행 적합도와 공방 작업 환경을 자동 판정하는 단일 페이지 대시보드를 만들었어. 기획은 채팅으로, 개발은 Claude Code + MOAI ADK, 디자인은 Claude Design, 배포는 Netlify. 인증키는 Netlify Functions 뒤에 숨겨서 안전해. 실제 접속은 👉 weather.n8n-diy.com
data.go.kr 기상청 단기예보 API, 그게 뭔데? 🤔
공공데이터포털(data.go.kr)에서 무료로 제공하는, 기상청 날씨 예보 데이터 조회 서비스야.
신청만 하면 누구나 인증키를 받아서 쓸 수 있어. 이번에 쓴 건 그중 단기예보 조회서비스고.
특징 몇 가지만 짚자면:
- 하루 8번 발표 — 02·05·08·11·14·17·20·23시에 새 예보가 올라와.
- 격자 좌표(nx·ny) 기반 — 위경도가 아니라 기상청 격자 번호로 위치를 찍어. 예를 들어 우리 공방(화성 우정읍)은
nx 57, ny 117이야. - 현재 실황 + 시간별 + 단기 예보까지 한 번에 받을 수 있어.
중요한 건, 이 데이터는 "그냥 날씨 숫자"라는 거야. 26.6도, 풍속 5.3m/s… 이 숫자를 내 상황에 맞는 판단으로 바꾸는 게 진짜 핵심이지. 그래서 다음 얘기가 중요해.
왜 같은 날씨로 두 가지를 판정하게 만들었을까? 🎯
이 대시보드의 핵심은 "하나의 날씨 데이터 → 두 개의 판정"이야. 똑같은 기상 정보를 가지고 완전히 다른 두 가지 질문에 답하게 했어.
여기에 위치 선택(공방·집·회사), 현재 실황, 시간별 예보, 3일 예보까지 붙였어.
백문이 불여일견이니, 실제 라이브 응답을 그대로 보여줄게. 👇
📍 공방 · 14:00 발표 기준 (실제 데이터)
| 항목 | 값 | 판정 |
|---|---|---|
| 기온 | 26.6°C | — |
| 풍속 | 5.3 m/s | — |
| 습도 | 73% | — |
| 🛸 드론 | 풍속 과다 | 불가 — 비행 보류 |
| 🖨️ 공방 | 고온 + 습도 73% | 부적합 — 제습 후 작업 |
이날은 둘 다 빨간불이었어. 드론은 풍속 5.3m/s가 과해서 보류, 공방은 고온(잉크 묽어짐·파우더 조기 활성) + 높은 습도 때문에 부적합.
만약 양호한 날이면 드론 카드는 "안정 비행 가능" 초록불로, 작업장은 "온도 적정·습도 적정"으로 떠.
바로 이게 포인트야. 그냥 "26.6도, 5.3m/s"라는 날 데이터를, "오늘은 띄우지 마 / 작업하지 마"라는 한 줄 의사결정으로 바꿔준 거지. 공공데이터를 내 문제에 맞게 가공했다는 게 이 프로젝트의 전부라고 봐도 돼.
채팅 기획부터 배포까지, 어떻게 하루 만에 끝냈을까? ⚡
"하루 만에?" 싶을 거야. 근데 이게 가능했던 건 내가 천재라서가 아니라, 역할을 나눠서 AI 도구를 물 흐르듯 연결했기 때문이야. 순서대로 보여줄게.
- Claude Chat을 사용해 채팅으로 기획 — 무슨 데이터를 쓸지, 어떤 판정을 할지 먼저 대화로 정리했어. 여기서 데이터 계약(스키마)이랑 판정 기준이 잡혀.
- Claude Code + MOAI ADK로 개발 — 평소대로 Plan ＞ TDD ＞ Sync 루프로 돌렸어. 모델은 Claude Opus 4.8 + GLM-5.2 조합. SPEC 먼저, 테스트가 그 다음, 마지막으로 구현.
- Claude Design으로 UI — 이 부분이 제일 매끄러웠어. 따로 떼서 설명할게.
🎨 Claude Design 연계 루프 (핵심!)
① Claude Code에서 claude-design-brief.md 작성 (뭘 만들지, 어떤 필드를 그릴지 정리한 디자인 브리프)
② 그 브리프를 Claude Design에 전달 → 대시보드 디자인 생성
③ 디자인을 standalone HTML 파일로 받음
④ 그 HTML을 다시 Claude Code에 넘겨서 실제 코드(React)랑 데이터 연동
이 왕복이 "한방에 진행"의 실체야. 디자이너 따로, 퍼블리셔 따로 안 거치고, 브리프 한 장 → 디자인 → 코드까지 한 흐름으로 이어진 거지.
조만간에 더 간단하게 Claude code와 Claude design 사이가 연결될꺼라고 봐.
Claude code에서 '/design-sync' 명령어를 사용해 코드베이스의 디자인을 클로드 디자인으로 가져올 수 있다고 해. 그런데, 이번에는 아직 잘 안되었어. 곧 되리라 생각해.
솔직히 말하면, 이런 흐름을 여러 번 해봐서 이번엔 막히는 데 없이 스무스했어.
처음이면 좀 헤맬 수 있는데, 한두 번 손에 익으면 진짜 빨라져. 😎
API 키는 어떻게 숨겼을까? — Netlify Functions 구조 🔐
공공데이터 API를 쓸 때 제일 흔한 실수가 있어.
인증키를 프론트엔드 코드에 그대로 박아버리는 것.
그러면 브라우저 개발자도구만 열어도 키가 다 보여. 남이 내 키로 호출해버릴 수 있다는 뜻이야.
그래서 구조를 이렇게 짰어:
- 프론트(React + Vite)는 Netlify에 정적 배포. 키를 아예 모름.
- Netlify Functions(서버리스)가 중간에서 대신 호출해. 프론트는
/.netlify/functions/forecast만 부르면 끝. - 인증키는 서버 환경변수에만 있어서 외부에 안 새. 함수가 기상청 API를 호출하고, 가공된 JSON만 프론트로 돌려줘.
- 판정 로직도 백엔드가 끝냄 — 프론트는 "불가/부적합" 같은 결과만 받아서 그리기만 해. 화면에서 다시 계산 안 해.
위치 정보(공방·집·안성의 격자 좌표)는 저장할 게 많지 않아서, Netlify Blobs로 간단하게 처리했어. 별도 DB 띄울 필요 없이 함수랑 한 세트로 굴러가니까 운영이 진짜 가벼워. 👍
도메인 weather.n8n-diy.com은 기존 호스팅에 CNAME만 추가했어.
Netlify Domain management 메뉴에서 서브도메인으로 연결했어.
HTTPS SSL/TLS cetificate도 자동으로 관리해줘서 편해. 이것도 클릭 몇 번이면 돼.
💡 정리하면 — 프론트는 키를 모르고, 키는 서버에만 있고, 무거운 판단은 서버가 끝낸다. 단순하지만 안전한 구조야
여기서 끝일까? — n8n 붙이면 '자동 알림'까지 🔔
지금 이 대시보드는 내가 직접 들어가서 봐야 알 수 있어.
띄울지 말지 궁금하면 사이트를 켜는 거지. 근데 여기서 한 단계만 더 가면 완전히 달라져.
바로 중간에 n8n 워크플로우를 끼워 넣는 것. 그러면 이렇게 돼:
⏰ n8n 스케줄 트리거 → 🌤️ 예보 함수 호출 → ✅ "드론 양호?" 조건 체크 → 📲 조건 충족 시 텔레그램·메일로 자동 알림
"내일 아침 9시에 드론 띄우기 좋은 날이면 알려줘" 같은 게 가능해지는 거야.
내가 사이트를 안 켜도, n8n이 대신 지켜보다가 톡 쏴주는 거지.
평소에 n8n으로 자동화 많이 하니까, 이 확장은 자연스러운 다음 수순이야.
그리고 여기서 진짜 하고 싶은 말. 데이터를 더 엮으면 시스템은 무한히 커져. 미세먼지 API 붙이고, 일출·일몰 붙이고, 공역 정보 붙이고… 공공데이터끼리 조합하면 시중 앱엔 없는 '나만의 복잡한 시스템'을 만들 수 있어. 오늘 만든 건 그 출발점일 뿐이야.
자주 묻는 질문 (FAQ) 💬
Q. 코딩을 잘 몰라도 이런 사이트를 만들 수 있나요?
응, 가능해. 핵심은 직접 코드를 다 짜는 게 아니라, 기획을 명확히 하고 AI 도구(Claude Code·Design)를 연결하는 흐름을 익히는 거야. SPEC을 잘 쓰면 나머지는 꽤 잘 따라와.
Q. 공공데이터 API 키가 노출될 위험은 없나요?
키를 프론트에 두지 않고 Netlify Functions(서버) 뒤에 숨기면 안전해. 브라우저는 함수만 부르고, 실제 키는 서버 환경변수에만 있어.
Q. 기상청 단기예보 API는 어디서 신청하나요?
공공데이터포털(data.go.kr)에서 '단기예보 조회서비스'를 검색해 활용 신청하면 인증키를 받을 수 있어. 위치는 위경도가 아니라 격자 좌표(nx·ny)로 지정한다는 점만 기억해.
Q. 비용은 얼마나 드나요?
공공데이터포털 API는 무료 신청이고, 이런 개인용 정적 사이트 + 서버리스 함수 정도는 Netlify 무료 플랜으로 시작하기 충분해. 부담 없이 만들어볼 수 있어.
🚀 공공데이터, 보기만 하지 말고 '내 도구'로 만들어봐
날씨 숫자 하나도 내 상황에 맞게 가공하면 의사결정 도구가 돼.
거창한 기술 없어도, 기획 → AI 도구 연결만 익히면 누구나 만들 수 있어. 💪
댓글 쓰기