단 한 줄의 코드로 어떤 웹사이트에든 실시간 날씨 카드를 추가해 보세요. 날씨 백엔드를 구축할 필요도 없고, 브라우저에 API 키가 노출될 일도 없습니다. 부동산 매물, 여행 및 이벤트 페이지, 행사장 안내, 대시보드 등에 완벽하게 어울립니다.
문제점
웹사이트를 운영할 때 실시간 지역 날씨를 보여주려면, 보통 날씨 API에 가입하고, 프록시 서버 코드를 작성하고, 할당량을 초과하지 않도록 응답을 캐싱하며, 클라이언트 측 코드에서 키가 유출되지 않도록 관리해야 합니다. 이건 하나의 거대한 프로젝트입니다. 여러분이 원한 건 그저 날씨 카드 하나였을 뿐인데 말이죠.
작동 방식
커스텀 요소를 임베드하기만 하면 끝입니다:
<script
src="https://app.weatherintouch.com/embed.js"
data-api-base="https://api.weatherintouch.com"
></script>
<wx-weather-card
lat="50.08"
lon="14.44"
lang="en"
theme="auto"
></wx-weather-card>
이 카드는 Shadow DOM 내부에서 렌더링되므로, 웹사이트의 CSS 스타일과 절대 충돌하지 않습니다. 현재 날씨 상태를 보여주며, 선택적으로 간단한 일기 예보도 표시할 수 있습니다. iframe을 선호하시나요? postMessage를 통해 높이를 자동 조절하는 변형 버전도 제공합니다. 좌표, 언어, 테마, API 키 등 모든 설정은 속성(attributes)으로 간단하게 제어할 수 있습니다.
차별점
- 공유 캐시. 위젯은 메인 앱과 동일한 일기 예보 캐시를 읽어옵니다. 웹사이트의 카드와 방문자가 띄워둔 메인 앱 탭이 같은 좌표를 가리킨다면, 업스트림 호출은 두 번이 아닌 한 번만 발생합니다.
- 키 유출 방지. 백엔드 일괄 처리(batch) 엔드포인트가 데이터를 제공합니다. API 키는 범위와 출처(origin)가 제한되어 있으며, 원본 프로바이더 키가 페이지에 직접 노출되지 않습니다.
- 스타일 간섭 없음. Shadow DOM으로 격리되어 있어 어느 사이트에서든 카드가 동일한 디자인으로 표시됩니다.
- 테넌트별 출처 허용 목록. 카드를 렌더링할 수 있는 도메인을 정확하게 제어할 수 있습니다.
요금
임베드형 위젯은 Pro 플랜 기능입니다. 테넌트별 API 키와 출처 허용 목록이 포함되어 있어, 여러분이 소유한 여러 웹사이트에 자유롭게 배포할 수 있습니다.
FAQ
어떻게 임베드하나요? 스크립트 태그와 좌표가 포함된 <wx-weather-card> 요소를 추가하거나, iframe 버전을 사용하세요.
커스텀 요소와 iframe 중 무엇을 써야 하나요? 커스텀 요소는 테마와 레이아웃 측면에서 더 긴밀하게 통합되며, iframe은 가장 완벽하게 격리된 형태로 가장 쉽게 추가할 수 있는 방법입니다.
테마를 지정할 수 있나요? 네, theme="auto|light|dark" 속성을 사용할 수 있으며, 지원되는 경우 카드가 웹사이트의 강조 색상(accent)을 반영합니다.
요청 제한(Rate limit)은 어떻게 되나요? 일괄 처리 엔드포인트는 트래픽을 조절하며 캐시를 우선적으로 사용합니다. 동일한 좌표는 중복 제거되므로, 일반적인 임베드 환경에서는 제한 한도를 넉넉하게 유지할 수 있습니다.
Weather InTouch 출처를 표기해야 하나요? 네, 데이터 제공업체의 약관에 따라 카드에 작은 출처 링크가 표시됩니다.