AI로 일기예보 사이트 만들기

AI로 일기예보 사이트 만들기,

기상청에서의 제공하는 일기 예보정보.
내 사이트에서도 제공할 수 있을까요?

오픈 메티오 ( open meteo ) 사이트를 이용하면 일기 데이터를 받는건 쉽습니다.

보통 일기예보같은 정보는 API KEY 라는게 있어야 가능한데요.
이 사이트는 그런것 조차도 없이 사용할 수 있거든요.

다만 프롬프트를 어떻게 할지 깜깜하네요.
AI에게 프롬프트를 만들어 달라고 해도 되지만 의존성을 줄이기 위해 직접 프롬프트를 시도했습니다.
일기예보 캡쳐 이미지를 하나 붙여넣은 다음 아래와 같이 윈드서프에게 요청하겠습니다.

일기예보 사이트를 만들거야. open medeo 에서 날씨를 받아와줘.
canvas html 로 대한민국 지도를 그리고 주요 도시의 일기를 애니메이션으로 표시해줘. 
디자인은 첨부 이미지와 유사하게 만들고 도시를 클릭하면 해당 도시의 일주일 날씨를 
지도 하단에 표로 구성해줘. 
예쁘게 만들어줘.

써놓고 보니 프롬프트에 욕심이 많이 들어간 것 같습니다.

완성했다고 하는데 실행해보니 지도가 전혀 뜨질 않는군요.
이럴 때는 F12 키를 누르고 Console 탭을 선택하면 오류를 확인할 수 있습니다.
역시나 오류가 났네요.

이 오류 화면을 캡쳐해 채팅창에 붙여넣고 수정해 달라면 됩니다.

에러가 나는데 봐줄래?

이! 이런 지도가 참.. 한국 맞아? 이런건 생각보다 잘 못하네요.

하지만 점을 클릭하면

하단에 날씨 정보는 잘 표현됩니다.

이어서 요청해볼까요?

지도 그림이 좀 엉성한것 같아. 서울, 인천등 표시지역하고도 위치가 안 맞는데 바르게 그려줘.

음... 한국지도 이미지를 검색해 캡쳐해서 붙여넣어 보았습니다.

지도가 더 정교하면 좋겠어. 이 이미지처럼 디테일하게 그려줘

흠.. 아무래도 Claude Sonet 는 이미지 생성에 약한것 같습니다.

모델을 구글 제미나이로 바꿔서 시도해보겠습니다.

지도를 정교하게 그려줘. svg 말고 png면 좋을것 같아.

가끔 위 단계에서 계속 멈춰 있을때가 있는데요.
그럴 경우 정지 버튼을 누르고 다음과 같이 지시를 내리면 대부분 됩니다.

계속해줘. 컨텍스트다 크면 2~3k단위로 점진적으로 작업해줘.

다 되었다고 하는데 지도가 또 안 나옵니다.
확인해보니 없는 URL을 참조했네요. 그냥 다시 그려 달라고 했습니다.
하하하.. 코딩 AI라서 확실히 그림에 서툰것 같습니다.
도시 위치는 얼추 맞네요.

구글 제미나이(웹)가 그림을 빨리 잘 그리니 제미나이에 우선 요청했습니다.
https://gemini.google.com/

대한민국 지도를 단순하게 그려줘

괜찮네요.

이제 위 이미지를 다운로드, Windsurf 현재 오픈 폴더에 붙여넣고,

Windsurf 에 요청했지요.

지도 이미지를 korea=map.png  로 적용해줘. 도시 위치도 재조정해주고.

으.. 너 이러기야?.. 만만치가 않네요.

제가 즐겨쓰는 픽픽이 그림 편집기 신공을 발휘해서 아래와 같은 이미지를 만들고

`

위치가 대체적으로 안 맞아. 이렇게 수정해줘

위 과정이 잘 안 맞아 2번 더 시도했습니다.. 그랬더니 헉.. 협업하자네요.

계속해서 불편을 드려 죄송합니다. 
제가 이미지 만으로 좌표를 정확히 맞추는 데 어려움이 있는 것 같습니다.
이 문제를 확실하게 해결하기 위해, 사용자님께서 직접 원하시는 위치의 좌표를 찾으실 수 
있도록 특별한 기능을 잠시 추가하겠습니다.

지도의 위치를 클릭하면 좌표가 표시되니 그걸로 수동으로 찍어서 알려달라는 것입니다.
어려우니 이런 아이디어를 내주네요 헛헛..
조사가 끝나면 이렇게 알려달라고 하네요 ㅎ..

각 도시의 정확한 (x, y) 좌표를 메모해 두셨다가, 아래와 같은 형식으로 저에게 알려주세요.
서울: (x, y)
부산: (x, y)
인천: (x, y)
... (모든 도시)

조사를 해서 알려주었습니다.

인천: (315, 191)
서울: (340, 184)
대전: (334, 316)
울산: (570, 419)
부산: (546, 467)
광주: (292, 509)
제주: (286, 706)

으하하 완성!

쪼금 힘들긴 했지만, 그래도 이런 서비스를 만든게 통쾌하네요!
결과는 아래 URL에서 보실수 있습니다.

https://cray7.mycafe24.com/weather/

오늘도 흥미로운 주제가 되셨을지요.
방문 감사합니다!