왜 웹 서비스인가?

분석 코드를 직접 실행하지 못하는 사용자들에게 결과를 공유하는 가장 강력한 방법입니다.

• 접근성: 브라우저만 있으면 어디서든 데이터 확인
• 상호작용: 클릭 한 번으로 기간별, 장치별 필터링
• 자동화: 데이터가 업데이트되면 대시보드도 실시간 반영

주요 기술 사양

Step 1: 웹 개발 환경 선언

복잡한 가상환경과 라이브러리 설정을 AI에게 한 번에 맡깁니다.

• 전용 가상환경: web-env 생성
• 필수 패키지: Flask, Plotly, Pandas 설치
• 구조 설계: 웹 페이지(Template)와 로직(App) 분리

Step 2: 웹 서비스 통합 프롬프트

아래 프롬프트를 복사하여 Copilot Chat에 입력하십시오.

"나는 지금 Windows 환경이야. F71-72-74-76-78-27-resampled-30m - 복사본.csv 데이터를 시각화해서 보여주는 실시간 웹 대시보드를 만들고 싶어. 다음 지침을 따라줘:

1. 환경 설정: 'web-env' 가상환경을 만들고 활성화한 뒤, flask, pandas, plotly를 설치해줘.
2. 웹 서버 코드 (app.py):
- Flask 프레임워크를 사용해줘.
- CSV 데이터를 읽고(cp949), 'REG_DATE'와 G열 '발전량'을 추출해.
- Plotly를 사용하여 시간에 따른 발전량 변화 그래프를 JSON 데이터로 변환해서 웹으로 전달하는 /chart-data API를 만들어줘.
3. 화면 디자인 (index.html):
- templates 폴더 안에 생성해줘.
- Tailwind CSS를 사용해서 모던하고 세련된 UI를 짜줘. (다크 모드 가미)
- 상단에는 '태양광 발전 실시간 모니터링'이라는 제목을 넣고, 아래에 큰 그래프 영역을 만들어줘.
4. 실행: Flask 서버를 실행해줘."

Step 3: 서비스 가동 및 접속

서버가 실행되면 다음 주소로 접속하여 대시보드를 확인합니다.

심화 실습: 기능 추가하기

Copilot에게 기존 코드를 개선하도록 요청해보세요.

"지금 만든 대시보드 상단에 '현재 발전량'을 큰 숫자로 보여주는 요약 카드를 추가해주고, 배경색을 좀 더 짙은 네이비 톤으로 바꿔줘."

웹 환경 문제 해결

# 가상환경 활성화
.\web-env\Scripts\activate

# 서버 실행
python app.py