brunch

매거진 개발일지

You can make anything
by writing

C.S.Lewis

by yurikim Dec 10. 2022

기상청 오픈API 활용해서 날씨안내 웹서비스 만들기 1

과연 제가 이걸 해낼 수 있을까요?

웹개발 종합반 수업에서 정보를 받아와 결과에 따라 다른 값을 노출하는 것을 배웠다. 그래서 날씨 값을 받아와 날씨에 따라 다른 스타일의 이미지를 노출하는 서비스를 만들어보기로 하였다.


우연히 인스타그램 광고에서 이런 인터렉티브 수업이 있다는 것을 보고 어 ? 나 이거 배운건데? (어처구니 없는 자신감) 싶어서 호기롭게 시작해봄... 이 글을 쓰려고 링크받으러 들어가보니 생각보다 어마무시한스킬을 알려주는 수업이었다. 하다가 실패하면 나도 저 수업 듣는걸로...!!!!

https://coloso.co.kr/products/graphicdesign-goyunseo

광고 아닙니다. 저 강의가 멋져서 따라하려고 시작하게 되었어요. 저 사이트에는 인터렉티브도 구현되어있었으나... 그것은 내겐 아주 먼일이기때문에 날씨에 따라 다른 결과값이나 노출해보자.




먼저 날씨 api를 받아와야하는데 웹개발종합반에서는 다 정리되어있는 정보만 갖고 진행을 했었다. 하지만 현실은 정글과 같았다.

https://wikidocs.net/83104

api주소와 승인받은 코드를 강과 같은 블로그의 파이썬코드를 이용해 요청했다. 내 파이썬 화면에는 이와같이 떠있을 뿐이었다.

맑음이나 흐림 0 1 2 이런값이 나와서 블라블라가 0일땐 css 이거~ 이렇게 하려고 했는데.... 가이드를 많이 정독해야 할 것 같았다. 


{"baseDate":"20221210","baseTime":"1400","category":"PTY","nx":18,"ny":1,"obsrValue":"-999"}


basedate는 오늘 12월10일이고

basetime은 14시00분

category pty는 강수량

obsrValue 는 왜 -999?? 강수 0이면 0이라구 해야되는거 아닌감...



강과 같은 블로그를 돌아보니, 좌표값을 설정한 내용은 나중에 있어서 일단 난 경기도민이지만 서울의중심인 종로구 좌표값을 찾아보기로 했다ㅋㅋㅋ 위치정보를 사용자로부터 불러올 수있으면 격자값에 대입해서 그 위치의 날씨정보도 가져올 수 있을 것 같았다...그건 다음에 배워보기로하자...핳


다시 xy값에 60과 127을 입력하고 출력해본다.


{"baseDate":"20221210","baseTime":"1100","category":"PTY","nx":60,"ny":127,"obsrValue":"0"}

pty 강수 0은 맞는 값같다.


"category":"REH","nx":60,"ny":127,"obsrValue":"29"

REH는 습도 29% 오오 된당~


근뎅 이 정보를 위에 강좌의 결과물처럼 맑음/흐림/눈/비로 쓰려면 조금 복잡할 것 같았다. 

하늘 상태를 나타내는 SKY는 단기예보에 있고 맑음1,구름많음3,흐림4 이렇게 나타나있고

강수형태를 나타내는 PTY는 눈/비 따로 나타나 있었기 때문이다. 나는 실시간 하늘 상태를 이용하고자 하였는데, 초단기예보랑 초단기실황중의 두 데이터중에 선택해서 써야할 것 같았다. 

pty랑 sky를 같이 보려면 초단기예보를 쓰는 것이 좋을 것 같았다. 물론 나는 스터디중이니 10분 전후나 뭐 크게 상관없고 현재시간정보만 가져와서 그걸로 쓸 예정이었다. api 제공시간이 기준시간보다 45분이나 뒤에 있고 예보에 포함되는 시간은 기준시간부터 +1시간 이기 때문에 현재시간-1시간의 예보를 가져다 써도 될 것으로 생각됐다. 


base_time은 현재시간을 불러와서 -1시간하고 데이터는 sky와 pty항목을 사용하기로 했다.



sky는 맑음(1), 구름많음(3), 흐림(4) 의 세가지 항목/ PTY는 없음(0), 비(1),비/눈(2), 눈(3), 빗방울(5), 빗방울 눈날림(6), 눈날림(7)로 되어있다.


4가지 정도로 정리해서 만든다고 치면 맑음은 sky = 1 / 흐림은 sky= 3 or 4 / 비는 PTY = 1,2,5,6 / 눈은 PTY=3,7  정도로 표현할 수 있을 것 같았다.

추가적으로 불러와야 하는 데이터는 아직까지는 현재시간 정도만 필요했다. 저번에 탐독의 시간 하면서 날짜를 불러와본적이 있어서... 그 방식을 쓰면 될 것 같았다. 


다음에는 index랑 py를 연결하고 스크립트랑 데이터를 연동해보겠다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari