Week 3 실습 - Streamlit GUI

📖 개념 먼저 읽고 오셨나요? → Streamlit 가이드

이번 주 목표

Week 2에서 CLI로 했던 작업을 GUI로 바꿔보고,
Streamlit이 CLI보다 진짜로 유리한 상황이 어디인지 체감합니다.

Week 2 복습:  터미널 → 명령어 → 결과 (텍스트)
Week 3 목표:  브라우저 → 클릭/드래그 → 결과 (시각화)

실습 전 준비

패키지 설치 (최초 1회)

# 실습 폴더로 이동
cd C:\Developer\vibe-coding\tutorials\week03-gui

# 가상환경 생성 및 활성화
python -m venv .venv
.venv\Scripts\activate

# 패키지 설치
pip install streamlit pandas plotly pillow python-dotenv

Streamlit 실행 방법

streamlit run app.py
# 브라우저가 자동으로 열립니다 (http://localhost:8501)

코드를 수정하면 브라우저에서 Rerun 버튼을 누르거나 저장하면 자동 반영됩니다.

🛠️ 도구 탐색 — AI에게 먼저 물어보기

각 Phase를 시작하기 전, “어떤 패키지를 써야 하나요?” 를 AI에게 물어보는 것부터 시작하세요.
이게 바이브코딩의 핵심 습관입니다.

Python으로 [내가 하고 싶은 것]을 웹 앱으로 만들고 싶어.
코드를 잘 모르는 초보자도 쉽게 쓸 수 있게 하려면
어떤 라이브러리 조합이 좋을지 추천해줘.
설치 방법도 알려줘.

🎯 Phase 1 — 워터마크 GUI (CLI → GUI 전환)

목표: Week 2 미션 5에서 CLI로 했던 워터마크 처리를 브라우저 앱으로 만들기
핵심 질문: CLI 1줄 vs GUI 앱 — 어느 게 더 편한가? 언제?

Phase 1-A: 기본 앱 구현

AI에게 요청하세요:

Streamlit 앱을 만들어줘.

[기능]
- 이미지 파일을 업로드하면 "Confidential" 워터마크를 추가해서
  미리보기로 보여주고, 다운로드 버튼을 제공해줘

[조건]
- 이미지 처리는 Pillow(PIL) 사용
- 워터마크는 대각선으로 반투명하게 3곳에 찍기
- 파일명: app.py

실행 확인:

streamlit run app.py

체크포인트 ✅

• 이미지 업로드가 되는가?
• 워터마크가 찍힌 결과가 미리보기로 보이는가?
• 다운로드 버튼이 동작하는가?

Phase 1-B: 옵션 추가

AI에게 추가 요청하세요:

앱에 아래 옵션을 추가해줘.

[추가 기능]
1. 워터마크 텍스트를 직접 입력할 수 있게 해줘 (기본값: "Confidential")
2. 이미지를 여러 장 한 번에 업로드해서 일괄 처리하고
   ZIP으로 다운로드할 수 있게 해줘

체크포인트 ✅

• 텍스트 입력창이 나타나는가?
• 여러 파일을 한 번에 올릴 수 있는가?
• ZIP 다운로드가 동작하는가?

잠깐, CLI vs GUI 비교해보기

💡 CLI가 더 나은 경우: 자동화 스케줄링, 1000개 이상 대량 처리
GUI가 더 나은 경우: 비개발자 동료와 협업, 결과 즉시 확인이 필요한 경우

🎯 Phase 2 — 실험 데이터 뷰어

목표: 엑셀로 열어서 눈으로 훑던 작업을 Streamlit으로
핵심 질문: 엑셀 대비 Streamlit이 진짜 빠른 게 맞나?

실습 데이터 위치:

tutorials/week03-gui/data/
├── stability_week01.csv  (80행)
├── stability_week02.csv  (80행)
├── stability_week03.csv  (80행, 이상값 포함)
└── stability_week04.csv  (80행, 이상값 포함)

데이터 구조:

Phase 2-A: 기본 데이터 뷰어

기존 app.py를 그대로 두고 새 파일로 시작하세요.

AI에게 요청하세요:

Streamlit 앱을 만들어줘.

[기능]
- CSV 파일을 업로드하면 표로 보여줘
- 전체 행 수, 컬럼 목록, 결측값(NaN)이 있는 컬럼과 개수를
  자동으로 표시해줘
- 결측값이 있는 행은 표에서 노란색으로 강조해줘

[조건]
- pandas로 CSV 읽기
- 파일명: qc_app.py

실행:

streamlit run qc_app.py

stability_week03.csv를 올려서 확인해보세요.

체크포인트 ✅

• 표가 나타나는가?
• 결측값이 있는 컬럼이 자동으로 표시되는가?
• 결측값 행이 노란색으로 강조되는가?

Phase 2-B: 시각화 추가

AI에게 추가 요청하세요:

앱에 그래프 기능을 추가해줘.

[추가 기능]
1. X축과 Y축 컬럼을 드롭다운으로 선택할 수 있게 해줘
2. 선택하면 plotly로 선 그래프를 그려줘
3. 이상값(평균에서 표준편차 3배 이상 벗어난 값)이 있으면
   그래프에 빨간 점으로 표시해줘

stability_week03.csv에서 Y축에 pH를 선택해보면 이상값(5.x대)이 빨간 점으로 나타납니다.

체크포인트 ✅

• 드롭다운에서 컬럼을 선택할 수 있는가?
• 그래프가 그려지는가?
• 이상값이 빨간 점으로 표시되는가?

Phase 2-C: 여러 파일 비교

AI에게 추가 요청하세요:

앱에 파일 비교 기능을 추가해줘.

[추가 기능]
- CSV 파일을 여러 개 동시에 업로드할 수 있게 해줘
- 각 파일에서 같은 컬럼을 선택하면 한 그래프에 겹쳐서 보여줘
  (파일마다 다른 색으로)
- 파일별로 이상값 개수를 요약 표로 보여줘

stability_week01.csv ~ week04.csv 4개를 올리고 pH 컬럼을 선택해보세요.
week3~4에서 이상값이 집중되는 게 한눈에 보입니다.

체크포인트 ✅

• 파일 여러 개 업로드가 되는가?
• 같은 그래프에 여러 선이 겹쳐서 그려지는가?
• 파일별 이상값 개수 요약이 표로 나타나는가?

🎯 Phase 3 — LLM 연동 (AI 분석 맛보기)

목표: 데이터를 눈으로 보는 것에서 AI가 해석해주는 것으로
핵심 질문: LLM이 데이터를 얼마나 잘 읽어내는가?

API 키 설정

먼저 .env 파일을 만드세요:

GOOGLE_API_KEY=여기에_Gemini_API_키_입력

API 키 발급: Google AI Studio

Phase 3-A: AI 분석 버튼 추가

AI에게 추가 요청하세요:

앱에 AI 분석 기능을 추가해줘.

[추가 기능]
- "AI 분석" 버튼을 만들어줘
- 버튼을 누르면 현재 데이터의 요약 정보(행 수, 컬럼별 평균,
  이상값 위치, 결측값 현황)를 Gemini API에 보내서
  한국어로 특이사항과 주의할 점을 해석해달라고 요청해줘
- 결과는 버튼 아래에 텍스트로 표시해줘
- API 키는 .env 파일에서 불러와줘

[조건]
- 어떤 Gemini 모델을 써야 할지 모르겠어. 최신 경량 모델로 추천해줘.

💡 마지막 줄이 포인트입니다. “어떤 모델을 써야 할지 모르겠어”라고 AI에게 물어보면
모델명을 직접 찾아서 코드에 넣어줍니다. 패키지 탐색과 같은 패턴이에요.

체크포인트 ✅

• “AI 분석” 버튼이 나타나는가?
• 버튼을 누르면 로딩 후 텍스트가 나타나는가?
• 이상값이나 결측값에 대한 언급이 있는가?

Phase 3-B: 보고서 초안 생성

AI에게 추가 요청하세요:

앱에 보고서 초안 생성 기능을 추가해줘.

[추가 기능]
- "주간 보고 초안 생성" 버튼을 만들어줘
- 버튼을 누르면 분석 결과를 바탕으로
  팀장에게 보고하는 슬랙 메시지 형태로 작성해줘
  (파일명, 이상값 건수, 주요 특이사항, 후속 조치 제안 포함)
- "복사하기" 버튼도 같이 만들어줘

체크포인트 ✅

• 보고 초안 텍스트가 생성되는가?
• 데이터 내용(이상값 위치 등)이 실제로 반영되어 있는가?
• 복사 버튼이 동작하는가?

📋 실습 흐름 요약

[Phase 1] 워터마크 GUI
    CLI에서 이미 해봄 → GUI로 바꾸면 뭐가 달라지나?
    → 비개발자 동료에게 URL 하나로 공유 가능

[Phase 2] 데이터 뷰어
    엑셀로 하나씩 열어보던 것 → 업로드 즉시 이상값 자동 감지
    → 4개 파일 비교를 그래프 한 장으로

[Phase 3] LLM 연동
    눈으로 읽던 것 → AI가 요약해서 보고 초안까지
    → "버튼 클릭 = 슬랙 메시지 완성"

💡 AI 요청 시 자주 쓰는 패턴

기능 추가할 때:

기존 앱에 [기능]을 추가해줘.
현재 코드는 이거야: [코드 붙여넣기]

에러가 났을 때:

아래 에러가 났어. 고쳐줘.
[에러 메시지 그대로 붙여넣기]

모르는 패키지를 써야 할 때:

[하고 싶은 것]을 Python으로 하려면 어떤 라이브러리를 써야 해?
초보자가 쓰기 쉬운 걸로 추천해줘.

🔗 다음 단계

Phase 2에서 파일 4개를 업로드해서 비교했는데,
이걸 자동으로 합쳐서 분석하려면 pandas가 필요합니다.
→ Week 4 실습