| name | weather-html-report |
| description | 사용자가 도시 이름을 알려주면 그 도시의 오늘 날씨를 본 Skill에 포함된 weather-template.html(iPhone mockup·Pretendard·9가지 weather state 자동 매핑)에 채워서 새 HTML 리포트 파일로 작업공간에 저장한다. 사용자가 날씨 리포트 파일을 만들어달라고 하거나 HTML로 저장해달라고 할 때 사용한다. |
날씨 HTML 리포트 Skill
사용자가 도시를 입력하면 본 Skill에 포함된 슬롯 템플릿(weather-template.html)에 오늘 날씨를 채워 넣어 파일 산출물로 저장한다. 템플릿은 iPhone mockup 디자인·9가지 weather state별 그라데이션·SVG 아이콘·4가지 미세먼지 등급 배지·우산 강조 색을 모두 내장하고 있어, 슬롯과 data attribute 텍스트만 정확히 채우면 자동으로 알맞은 톤이 표시된다.
순서
1. 오늘 날씨 정리
다음 항목으로 정리한다. 1~9번은 stage 2 weather-summary Skill의 출력 형식과 동일하고, 나머지는 stage 3가 자체 보강하는 추가 항목이다.
stage 2와 동일한 9개 항목
- 온도: 정수 (예:
19)
- 체감: 한 단어 — 추움/선선/쾌적/더움/매우 더움
- 날씨: 다음 9가지 중 하나 —
맑음/구름조금/구름많음/흐림/비/소나기/천둥번개/눈/안개
- 바람: 풍속 수치 (m/s, 예:
2.4) + 한 단어(약함/보통/강함)
- 습도: 정수 (예:
38) + 한 단어(건조/적정/높음)
- 미세먼지(PM10):
좋음/보통/나쁨/매우 나쁨 중 한 단어
- 초미세먼지(PM2.5):
좋음/보통/나쁨/매우 나쁨 중 한 단어
- 우산 필요?:
필요해요 또는 필요없음 + 짧은 이유
- 옷차림: 한 줄 권고
stage 3 자체 보강 항목
- 기준 시각: 정수 시 (예:
14) — <HH>시 형식
- 최고/최저: 정수 두 개 (예:
22 / 11) — 오늘의 최고·최저
- 날씨 한 줄 설명: 시즌·기온을 반영한 톤 있는 한 줄 (예:
맑고 따뜻한 봄날)
- 풍향: 8방위 (북풍/북동풍/동풍/남동풍/남풍/남서풍/서풍/북서풍 중)
- 강수확률: 정수 (%)
- 자외선: 한 단어(낮음/보통/높음/매우높음) + 정수 지수 (예:
높음 / 6)
- PM10 농도: 정수 (㎍/㎥)
- PM2.5 농도: 정수 (㎍/㎥)
- 옷차림 부연: 한 줄(예:
낮에는 반팔도 좋아요)
- 우산 부연: 한 줄(예:
필요 없어요)
- 외출 코멘트: 짧은 격려 한 문장 (예:
산책하기 딱 좋은 날이에요)
2. 템플릿 파일 읽기
본 Skill에 포함된 weather-template.html 파일을 읽는다. 작업공간이 아니라 본 Skill의 리소스에서 읽는다.
3. 슬롯 치환
템플릿의 다음 슬롯을 위에서 정리한 값으로 정확히 치환한다.
| 슬롯 | 값 | 비고 |
|---|
{{location}} | 도시·구·동까지 명시 (예: 서울특별시 강남구 역삼동). 사용자가 짧게 주면 그대로 + 현재위치 | |
{{date}} | M월 D일 요일 (예: 5월 9일 토요일) | |
{{hour}} | HH시 (예: 14시) | |
{{temperature}} | 정수 (예: 19) | hero에 ° 단위는 템플릿이 붙임 |
{{feels_like}} | 정수 (예: 21) — 체감 온도 숫자만 | 한 단어(쾌적·선선 등)는 {{desc}}에 |
{{high}} | 정수 (예: 22) | |
{{low}} | 정수 (예: 11) | |
{{desc}} | 한 줄 설명 (예: 맑고 따뜻한 봄날) | 9가지 weather 단어를 직접 쓰지 않고 톤 있는 한 줄 |
{{comment}} | 외출 코멘트 칩 (예: 산책하기 딱 좋은 날이에요) | |
{{outfit}} | 한 줄 권고 (예: 얇은 가디건) | |
{{outfit_detail}} | 부연 (예: 낮에는 반팔도 좋아요) | |
{{umbrella}} | 필요해요 또는 필요없음 (정확히 두 단어 중 하나) | 자동 강조 색 매핑됨 |
{{umbrella_detail}} | 부연 (예: 필요 없어요 또는 오후 소나기 가능) | |
{{humidity}} | 정수 (예: 38) | % 단위는 템플릿이 붙임 |
{{wind}} | 풍속 수치 (예: 2.4) | m/s 단위는 템플릿이 붙임 |
{{wind_dir}} | 8방위 (예: 남동풍) | |
{{rain_prob}} | 정수 (예: 0) | % 단위는 템플릿이 붙임 |
{{uv_label}} | 한 단어(낮음/보통/높음/매우높음) | |
{{uv}} | 정수 (예: 6) | |
{{pm10}} | 좋음/보통/나쁨/매우 나쁨 중 하나 (정확히 이 표기) | 자동 배지 색 매핑됨 |
{{pm10_value}} | 정수 (예: 28) | |
{{pm25}} | 좋음/보통/나쁨/매우 나쁨 중 하나 | 자동 배지 색 매핑됨 |
{{pm25_value}} | 정수 (예: 14) | |
{{weather_state}} | 9가지 weather 단어 중 하나 (맑음·구름조금·구름많음·흐림·비·소나기·천둥번개·눈·안개) | hero data-weather attribute에 박힘 → 그라데이션·아이콘 자동 매핑 |
4. 새 파일로 저장
치환된 결과를 weather-report-<도시>-<YYYY-MM-DD>.html 파일명으로 작업공간에 새로 저장한다.
5. 사용자에게 안내
저장된 파일의 경로를 사용자에게 알린다 (예: weather-report-서울-2026-05-09.html 파일을 작업공간에 저장했습니다.).
규칙
- 슬롯 이름과 매칭되지 않는 추가 텍스트는 절대 템플릿에 끼워 넣지 않는다.
- 슬롯이 그대로
{{...}}로 남는 일이 없도록 한다 — 모든 슬롯은 빠짐없이 채운다.
- 9가지 날씨 단어 (
맑음·구름조금·구름많음·흐림·비·소나기·천둥번개·눈·안개) 외 다른 표현은 {{weather_state}}에 사용하지 않는다 — CSS가 이 정확한 텍스트로 그라데이션·아이콘을 자동 매핑한다.
- 미세먼지 등급도 4가지(
좋음·보통·나쁨·매우 나쁨) 외 다른 표현 금지 — {{pm10}}·{{pm25}}가 그대로 data-grade attribute에 박혀 배지 색을 결정한다.
- 우산 표기는
필요해요/필요없음 두 단어만 — data-need attribute가 강조 색을 결정한다.
- 도시를 명시하지 않으면 한 줄로 다시 묻는다.
- 실시간 데이터에 접근할 수 없는 경우에도 형식과 절차는 유지하고, 사용자 안내 문구에 한 줄로 그 사실을 함께 알린다.
포함 파일
weather-template.html — 슬롯 + data attribute가 박힌 HTML 템플릿. 9가지 weather state별 그라데이션·SVG 아이콘 9개·4가지 미세먼지 등급 배지·우산 강조 색이 내장되어 있어, 위 슬롯만 정확히 채우면 자동으로 알맞은 톤이 표시된다.
호출 예시
사용자: 서울 강남구
기대 동작:
- 오늘 서울 강남구 날씨를 위 항목으로 정리
weather-template.html 읽기- 슬롯 치환 (
{{weather_state}}에 9가지 중 하나, {{pm10}}·{{pm25}}에 4가지 중 하나, {{umbrella}}에 필요해요/필요없음)
weather-report-서울강남구-2026-05-09.html로 작업공간에 저장- "서울 강남구 날씨 리포트를
weather-report-서울강남구-2026-05-09.html 파일로 저장했습니다." 안내
