프로젝트 기획

주제

다양한 캐릭터가 알려주는 실시간 날씨 정보 제공 웹어플리케이션

이름: WeatherTalk

목표

• 사용자의 현재 위치에 따라 내가 선택한 캐스터가 실시간 날씨와 관련된 메세지를 보여주는 웹어플리케이션
• 사용자가 웹사이트를 방문할 때마다 현재 위치를 기반으로 날씨 정보를 가져와서 캐스터가 읽어줌
• 사용자가 선택한 캐스터를 저장하여 다음 방문 시에도 동일한 설정을 유지
• 캐스터 랜덤 선택시 일정 시간 간격으로 랜덤한 캐스터가 나와 날씨정보를 알려줌

대상 사용자

• 날씨 정보를 얻고자 하는 모든 사용자

기능 목록

필수기능

• 사용자가 웹사이트를 방문할 때마다 현재 위치를 기반으로 캐스터가 날씨 정보를 전달
• 캐스터 랜덤 선택 기능
• 사용자가 선택한 캐스터와 시간대를 로컬 스토리지에 저장하여 다음 방문 시에도 적용

추가기능

• 날씨 정보를 소셜 미디어에 공유하는 기능

기술 스택 선정

• 프론트엔드: Next.js, TypeScript, TailwindCSS
• 날씨 API: OpenWeatherMap API
• 역 지오코딩 API: OpenWeatherMap Geocoding API
• 로컬 스토리지: 브라우저 내장 기능
• 배포 플랫폼: Vercel

와이어프레임 및 디자인

와이어프레임

• 메인 페이지: 날씨 정보 표시 영역, 캐스터 선택 및 시간대 설정 인터페이스

디자인

• 깔끔하고 미니멀한 UI, 날씨와 관련된 아이콘 활용

API 설계

날씨 정보 관련 API

• GET/api/weather: 현재 위치를 기반으로 날씨 정보 가져오기

역 지오코딩 API

• GET/api/geocode: 위도와 경도를 입력으로 받아 위치 이름 가져오기

개발 일정 계획

• 프로젝트 설정 및 기본 구조 구현 (Next.js, TypeScript 설정), 날씨 API 연동
• 캐스터 선택 인터페이스 구현, 로컬 스토리지 연동
• 사용자의 현재 위치 가져오기 및 날씨 정보 표시 기능 구현
• 반응형 디자인 및 UI 개선
• 소셜 미디어 공유 기능 추가
• 테스트 및 디버깅
• 배포 및 최종 검토

배포 계획

• 배포 플랫폼: Vercel을 사용하여 Next.js 애플리케이션 배포
• 배포 절차: GitHub에 소스코드 푸시 -> Vercel 자동 배포