구글 블로그 html 날씨 위젯 - 다크 스카이(Dark Sky)

구글 블로그에서 방문자에게 날씨 정보를 보여주고 싶을 경우, 사이드바에 위젯을 추가하여 날씨 상황을 표시할 수 있습니다. 인터넷에서 검색을 통해 날씨 상황을 알 수도 있지만 내 블로그를 관리하면서 날씨도 확인할 수 있다면 편리할 것입니다.

이 포스팅에서는 다크스카이에서 제공하는 서비스를 활용하여 구글 블로그에 날씨 위젯을 추가하는 방법에 대해 알아보겠습니다.

다크스카이(Dark Sky)

다크스카이는 분 단위로 날씨 예보를 제공하는 날씨 앱으로, 2020년 애플이 인수하여 아이폰(iOS 15)에서 기본 앱으로 지원되고 있습니다. 자신의 현재 위치를 설정하면 그 지역의 일기 예보를 알려줍니다.

전 세계 어느 나라이든 상관없습니다. 원하는 곳의 위도와 경도를 알고 있다면 그 위치를 세밀하게 변경이 가능합니다. 위치 설정을 완료하면 날씨 정보가 표시됩니다. 여기에 우리가 자바스크립트로 몇 초마다 새로고침할 것인지 정하면 완벽한 날씨 위젯을 만들 수 있습니다.

또한 위 사진처럼 화면 크기가 작아진 모바일 장치에서 온도 막대가 없어지고 현재 날씨만 표시합니다. 반응형 레이아웃으로 화면 크기에 맞게 위젯의 콘텐츠가 자동 조정됩니다.

STEP 1. 위치 설정하기

위치 정보를 가져오기 위해 darksky.net으로 이동합니다. 검색창 좌측에 위치 아이콘을 클릭합니다. 내 위치 확인에 대한 권한을 허용합니다. 만약 위치 아이콘이 보이지 않는다면 검색창에 도로명 주소를 입력해도 됩니다.

그리고 상단 주소표시줄의 URL을 살펴보면 위도와 경도를 확인할 수 있습니다. URL은 다음과 같습니다.

https://darksky.net/forecast/37.5662,126.9785/us12/en

STEP 2. 코드 수정 및 삽입

메모장에 다음 iframe 코드를 붙여넣습니다.

<iframe width="100%" height="245" src="https://forecast.io/embed/#lat=37.5662&lon=126.9785&name=서울&color=&font=arial&units=si" frameborder="0"></iframe>

위 코드에서 표시 된 부분을 STEP 1에서 찾은 위도와 경도로 바꿔줍니다.

다음으로 Blogger 대시보드 > 레이아웃 > 가젯 추가 > HTML/자바스크립트 선택합니다. 수정한 코드를 붙여넣은 후 저장합니다.

STEP 3. 디자인 맞춤 설정

변경 가능한 옵션은 다음과 같습니다.

온도 막대 그래프 색상
글꼴 유형
기온 및 풍속 단위
도시 이름

온도 막대 그래프 색상 변경

주소의 color 매개변수에 HEX 색상 코드를 입력합니다.

<iframe width="100%" height="245" src="https://forecast.io/embed/#lat=37.5662&lon=126.9785&name=서울&color=#F6A8A6&font=arial&units=si" frameborder="0"></iframe>

<iframe width="100%" height="245" src="https://forecast.io/embed/#lat=37.4496&lon=126.7074&name=인천&color=#0000FF&font=arial&units=si" frameborder="0"></iframe>

<iframe width="100%" height="245" src="https://forecast.io/embed/#lat=33.5007&lon=126.5288&name=제주&color=#ffc261&font=arial&units=si" frameborder="0"></iframe>

글꼴 유형

아쉽지만 한국어 폰트는 지원하지 않습니다. 사용 가능한 옵션은 다음과 같습니다.

Arial
Roboto
Georgia
Helvetica
Noto Sans
Trebuchet MS
Courier New
Verdana

<iframe width="100%" height="245" src="https://forecast.io/embed/#lat=37.5662&lon=126.9785&name=Seoul,서울&color=&font=Arial&units=si" frameborder="0"></iframe>

기온 및 풍속 단위

si : 온도 °C, 풍속 m/s
us : 온도 °F, 풍속 mph
uk : 온도 °C, 풍속 mph
ca : 온도 °C, 풍속 km/h

<iframe width="100%" height="245" src="https://forecast.io/embed/#lat=37.5662&lon=126.9785&name=Seoul,서울&color=&font=Arial&units=si" frameborder="0"></iframe>

도시 이름 변경

162개의 대한민국 도시 코드를 보려면 스프레드시트를 방문하세요.

자동 새로고침 코드 추가(선택)

사용자가 정해진 시간 마다 날씨 상황을 자동으로 새로고침 할 수 있습니다. iframe 코드와 함께 구글 블로그에 적용해보시기 바랍니다.

30초 마다 새로고침의 예:

<script>/*<![CDATA[*/
$(document).ready(function(){setTimeout(function(){window.location.reload(1)},30000)})
/*]]>*/</script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>

다크스카이에서 제공하는 Embeded iframe으로 Blogger에 날씨 위젯 설치 단계를 모두 마쳤습니다. 이해되지 않는 것이 있거나 질문이 있는 경우 댓글을 남겨주세요.

내 블로그에 추가하기

미리 보기

참조:
www.c5insight.com/Resources/Blog/tabid/148/entryid/723/easily-load-dark-sky-weather-widget-on-your-sharepoint-page.aspx
www.darksky.net\

구글 블로그 만들기