https://gemini.google.com/share/0aac75a9ddae
날씨 앱 제작 COSTAR 프롬프트
1. Context (컨텍스트)
사용자는 한국 내 다양한 지역의 날씨를 확인하고 싶어 합니다. 기존의 무료 지오코딩 API들은 '부산'이나 '거제' 검색 시 한국의 상세 행정구역을 오인하여 엉뚱한 지역(예: 전남의 작은 마을)을 보여주는 문제가 있습니다. 이를 해결하기 위해 한국 주요 도시 데이터를 내장하고 정확한 기상 정보를 제공하는 웹 앱이 필요합니다.
2. Objective (목표)
API 키 없이 무료로 작동하며, 한국 지명에 최적화된 고정밀 날씨 예보 웹 애플리케이션을 단일 HTML 파일로 개발합니다.
3. Style (스타일)
UI/UX: 모던하고 미니멀한 '글래스모피즘(Glassmorphism)' 스타일.
분위기: 시간대(낮/밤)에 따라 배경 그라데이션이 변하는 동적인 디자인.
컴포넌트: Tailwind CSS를 사용하고 Font Awesome 아이콘으로 시각적 직관성 확보.
4. Tone (톤)
전문적이면서도 사용자 친화적이어야 하며, 데이터 로딩 중에는 애니메이션을 통해 시스템이 작동 중임을 명확히 알립니다.
5. Audience (청중)
복잡한 설정 없이 한국 지역 날씨를 정확하고 빠르게 확인하고 싶은 일반 한국인 사용자.
6. Response (응답 구조 및 제약 사항)
필수 기능:
데이터 내장(Hard-coded Data): 지명 검색 오류 방지를 위해 한국의 주요 광역시 및 시/군(거제, 부산, 서울 등)의 정확한 좌표와 행정구역명을 JSON 객체 형태로 내부에 포함할 것.
날씨 API: Open-Meteo API(무료, 키 불필요)를 사용하여 실시간 기온, 습도, 강수량, 풍속 데이터를 호출할 것.
검색 로직: 사용자가 입력한 키워드에 따라 내장된 도시 리스트에서 즉시 필터링하여 결과를 보여주는 검색창 구현.
자동 위치 파악: 브라우저 Geolocation API를 사용하여 접속 시 현재 위치 날씨를 먼저 보여주고, 거부 시 기본값으로 '부산' 또는 '거제'를 출력.
시간별 예보: 향후 24시간 동안의 기온 변화를 가로 스크롤 형태로 제공.
반응형 디자인: 모바일과 데스크톱 모두에서 최적화된 뷰를 제공할 것.
기술 스택:
HTML5, CSS3 (Tailwind CSS CDN), JavaScript (ES6+), Font Awesome (Icon).
파일 구조:
모든 HTML, CSS, JS는 하나의
.html파일 안에 포함되어야 함.
