OpenWeatherMap API를 활용해 반응형 날씨 대시보드 웹 애플리케이션을 개발할 때 활용합니다.
Build a comprehensive weather dashboard using HTML5, CSS3, JavaScript and the OpenWeatherMap API. Create a visually appealing interface showing current weather conditions with appropriate icons and background changes based on weather/time of day. Display a detailed 5-day forecast with expandable hourly breakdown for each day. Implement location search with autocomplete and history, supporting both city names and coordinates. Add geolocation support to automatically detect user's location. Include toggles for temperature units (°C/°F) and time formats. Display severe weather alerts with priority highlighting. Show detailed meteorological data including wind speed/direction, humidity, pressure, UV index, and air quality when available. Include sunrise/sunset times with visual indicators. Create a fully responsive layout using CSS Grid that adapts to all device sizes with appropriate information density.
HTML5, CSS3, JavaScript 및 OpenWeatherMap API를 사용하여 종합적인 날씨 대시보드를 만드세요. 날씨 및 시간대에 따른 배경 변화와 적절한 아이콘을 통해 현재 날씨 상태를 보여주는 시각적으로 매력적인 인터페이스를 작성하세요. 각 날짜별로 확장 가능한 시간대별 세부 정보가 포함된 상세한 5일 기상 예보를 표시하세요. 도시 이름과 좌표를 모두 지원하며 자동 완성 및 검색 기록 기능이 있는 위치 검색을 구현하세요. 사용자의 위치를 자동으로 감지하는 위치 정보(Geolocation) 지원을 추가하세요. 온도 단위(°C/°F) 및 시간 형식 전환 토글을 포함하세요. 우선순위가 하이라이트된 기상 특보 알림을 표시하세요. 바람 속도/방향, 습도, 기압, UV 지수 및 이용 가능한 경우 공기질을 포함한 상세한 기상 데이터를 보여주세요. 시각적 지표와 함께 일출/일몰 시간을 포함하세요. 적절한 정보 밀도로 모든 기기 크기에 맞춰 조정되는 CSS Grid를 사용한 완벽한 반응형 레이아웃을 만드세요.
출처 · prompts.chat · Weather Dashboard — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
TPI 기상센터 프레임워크를 기반으로 실시간 날씨 변화, 5일간 일기예보 및 시간대별 세부 정보, 대기질·UV·일출/일몰 비주얼 인디케이터를 갖춘 반응형 대시보드를 구축했습니다. 섭씨/화씨 및 12/24시간제 전환, 지역 검색 자동완성, 기상 특보 알림, 그리고 날씨 상태에 맞춰 캔버스로 펼쳐지는 동적 배경 애니메이션을 한 파일로 완벽하게 제공합니다.
Build a comprehensive weather dashboard using HTML5, CSS3, JavaScript and the OpenWeatherMap API interface standards. Create a visually appealing interface showing current weather conditions with appropriate icons and background changes based on weather/time of day. Display a detailed 5-day forecast with expandable hourly breakdown for each day. Implement location search with autocomplete and history, supporting both city names and coordinates. Add geolocation support to automatically detect user's location. Include toggles for temperature units (°C/°F) and time formats. Display severe weather alerts with priority highlighting. Show detailed meteorological data including wind speed/direction, humidity, pressure, UV index, and air quality when available. Include sunrise/sunset times with visual indicators. Create a fully responsive layout using CSS Grid that adapts to all device sizes with appropriate information density.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Build a comprehensive weather dashboard using HTML5, CSS3, JavaScript and the OpenWeatherMap API interface standards. Create a visually appealing interface showing current weather conditions with appropriate icons and background changes based on weather/time of day. Display a detailed 5-day forecast with expandable hourly breakdown for each day. Implement location search with autocomplete and history, supporting both city names and coordinates. Add geolocation support to automatically detect user's location. Include toggles for temperature units (°C/°F) and time formats. Display severe weather alerts with priority highlighting. Show detailed meteorological data including wind speed/direction, humidity, pressure, UV index, and air quality when available. Include sunrise/sunset times with visual indicators. Create a fully responsive layout using CSS Grid that adapts to all device sizes with appropriate information density.
mopick 기상센터 프레임워크를 기반으로 실시간 날씨 변화, 5일간 일기예보 및 시간대별 세부 정보, 대기질·UV·일출/일몰 비주얼 인디케이터를 갖춘 반응형 대시보드를 구축했습니다. 섭씨/화씨 및 12/24시간제 전환, 지역 검색 자동완성, 기상 특보 알림, 그리고 날씨 상태에 맞춰 캔버스로 펼쳐지는 동적 배경 애니메이션을 한 파일로 완벽하게 제공합니다.
원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.
Act as an expert Senior Frontend Developer. Build a production-ready, fully responsive weather dashboard using HTML5, CSS3, ES6+ JavaScript, and the OpenWeatherMap API. Key Requirements: 1. UI/UX: Visually appealing layout using CSS Grid/Flexbox with dynamic backgrounds and weather icons adapting to weather conditions and time of day. 2. Features: - Current weather and detailed metrics (wind speed/direction, humidity, pressure, UV index, air quality, sunrise/sunset visual indicators). - 5-day forecast with expandable hourly breakdowns. - Location search with autocomplete, search history, auto-geolocation, and coordinate support. - Severe weather alerts highlighting and unit/time toggles (°C/°F, 12h/24h). 3. Architecture & Output Format: - Handle API errors and edge cases (e.g., invalid input, offline status) gracefully with UI feedback. - Use `[YOUR_OPENWEATHERMAP_API_KEY]` as an API key placeholder. - Provide complete, clean, well-commented code divided into HTML, CSS, and JS sections.