Phase 1: MVP 우선 순위

👨‍💻 프론트엔드(최혁) MVP Action Plan

현재 더미 데이터로 구성된 프로토타입에 실시간 Raw 데이터(기상/대기질)를 연동하고,
AWS CDN 및 보안 환경을 구축하여 안전한 정적 웹 호스팅 배포를 완료하는 가이드입니다. (AI 옷 추천 연동은 차후 진행)

1

실시간 기상/대기질 데이터 연동 (더미 데이터 교체)

백엔드(고원영)가 제공하는 Lambda URL(실시간 조회 API)을 호출하여 화면의 더미 데이터를 실제 관측 데이터로 교체합니다.

  • 백엔드 API 호출: 사용자 위치(좌표/지역코드)를 기반으로 현재 온도, 강수량, 미세먼지 수치 등을 요청합니다.
  • 데이터 바인딩: API 응답 데이터를 UI(온도계, 날씨 아이콘, 수치 텍스트)에 매핑합니다.
  • 주의: AI 의상 추천 영역은 아직 백엔드 구현 전이므로 프로토타입 상태(Loading 또는 더미)로 유지합니다.
2

마스크 / 우산 여부 룰베이스 UI 렌더링

마스크 착용과 우산 필요 여부는 AI를 거치지 않고 백엔드에서 룰베이스(Rule-based)로 즉시 판단하여 API 응답에 포함해 줍니다. 이를 바탕으로 직관적인 UI/UX를 제공합니다.

마스크 렌더링

API 응답 중 mask_needed: true 일 경우 마스크 착용 권장 뱃지나 알림을 화면 상단에 띄웁니다.

우산 렌더링

API 응답 중 umbrella_needed: true 일 경우 우산 아이콘을 활성화하여 시각적으로 안내합니다.

3

운영 환경 인프라 배포 (S3 + CloudFront + WAF)

로컬 환경을 벗어나 실제 사용자가 접근할 수 있도록 AWS 보안 인프라를 거쳐 정적 웹을 배포합니다.

설정 항목 액션 플랜
S3 호스팅 빌드 파일(dist)을 inhatc-team2-3-frontend 버킷에 업로드
CloudFront (CDN) OAC 설정을 통해 S3 직접 접근을 차단하고 엣지 캐싱 활성화
HTTPS & 도메인 Route53 도메인 연결 및 ACM SSL 인증서 발급/적용
WAF (보안 방화벽) CloudFront에 AWS WAF를 연결하여 악성 요청 및 DDoS 방어 규칙 생성
문서 포털로 돌아가기