Streamlit 웹앱
완전 정복 가이드
코드 작성부터 인터넷 배포까지!
초보자도 따라할 수 있는 단계별 완전 가이드
전체 과정 한눈에 보기
이 교재에서 배울 6단계 과정입니다
코드 작성
AI로 생성
폴더·파일
탐색기
VS Code
붙여넣기
터미널
실행·배치
GitHub
저장
배포 완료
🌍 공개
요리로 비유하면?
① 레시피 작성 → ② 주방(폴더) 준비 → ③ 재료(코드) 담기 →
④ 요리 시작(실행) → ⑤ 레시피북(GitHub)에 저장 → ⑥ 식당 오픈(배포) 🍽️
코드 작성하기
Claude AI를 이용해서 앱 코드를 자동으로 만드는 방법
코드(Code)는 컴퓨터에게 내리는 명령어 모음이에요. 우리가 읽는 글처럼 컴퓨터도 코드를 읽고 그대로 실행합니다. 마치 악보가 있으면 누구나 같은 음악을 연주할 수 있듯, 코드가 있으면 누구나 같은 앱을 만들 수 있어요!
바이브코딩이란? 코드를 직접 작성하는 대신, AI(클로드, GPT 등)에게 원하는 것을 말로 설명하면 AI가 코드를 대신 만들어주는 방식입니다. 코딩을 몰라도 앱을 만들 수 있어요!
-
claude.ai 접속
브라우저에서 claude.ai 접속 후 로그인
-
원하는 앱 설명하기
채팅창에 만들고 싶은 앱을 자세히 설명 (예: “CSV 파일을 업로드하면 자동으로 분석하는 Streamlit 앱 만들어줘”)
-
코드 받기
Claude가 완성된 코드를 생성해 줌 → 이 코드를 복사
이번 실습에서 만든 앱: CSV/Excel 파일을 업로드하면 판매·출석·만족도 데이터를 자동으로 분석하고, 그래프와 Word 보고서를 생성하는 웹앱
라이브러리 = 남이 만들어 놓은 기능 묶음 (무료로 가져다 쓸 수 있어요)
| 라이브러리 | 하는 일 | 비유 |
|---|---|---|
streamlit | 웹 앱 화면 만들기 | 건물 뼈대 |
pandas | 표(데이터) 처리 | 엑셀 기능 |
matplotlib | 그래프 그리기 | 차트 도구 |
openpyxl | Excel 파일 읽기 | Excel 열쇠 |
python-docx | Word 문서 만들기 | Word 기능 |
윈도우 탐색기에서 폴더·파일 만들기
코드를 담을 그릇(폴더)과 파일을 준비합니다
폴더 = 서랍장 📦
파일 = 서랍 안에 넣는 종이 📄
auto_report_streamlit 폴더 안에 app.py, requirements.txt 파일을 넣어두는 것!
📄 app.py ← 메인 앱 코드
📄 requirements.txt ← 필요한 라이브러리 목록
📄 run.bat ← 더블클릭 실행파일
📄 README.txt ← 사용 설명서
-
폴더 만들기
바탕화면 또는 원하는 위치에서 마우스 우클릭 → 새로 만들기 → 폴더 → 이름:
auto_report_streamlit -
파일 확장명 보이게 설정
탐색기 상단 보기 → 파일 확장명 체크 ON
이렇게 해야 .txt → .py로 바꿀 수 있어요 -
app.py 파일 만들기
폴더 안에서 우클릭 → 새로 만들기 → 텍스트 문서 → 이름을
app.py로 변경
⚠️ .txt 지우고 .py로 바꿔야 해요! -
requirements.txt 파일 만들기
같은 방법으로
requirements.txt파일 생성
📄 app.py ← 새로 만든 파일
📄 requirements.txt ← 새로 만든 파일
VS Code에서 코드 붙여넣기
VS Code는 코드를 편집하는 전문 프로그램입니다 (무료)
메모장으로도 코드를 쓸 수 있지만…
VS Code는 코드 전용 워드프로세서예요!
맞춤법 검사, 자동완성, 색깔 구분 등 편리한 기능이 가득 💪
-
다운로드
구글에서 VS Code 다운로드 검색 → code.visualstudio.com 접속
-
설치
다운로드한 파일 실행 → 다음다음 클릭 → 설치 완료!
-
한국어 설정 (선택)
VS Code 열기 → Ctrl+Shift+P → “Korean” 검색 → 한국어 팩 설치
-
방법 1: 탐색기에서 바로 열기 (가장 쉬움!)
auto_report_streamlit폴더에서 마우스 우클릭 → “Code(으)로 열기” 클릭 -
방법 2: VS Code 메뉴에서 열기
VS Code 실행 → 파일 → 폴더 열기 → 폴더 선택
-
Claude에서 코드 전체 복사
Claude 채팅창에서 코드 블록 위에 있는 📋 복사 버튼 클릭
또는 코드 전체 선택(Ctrl+A) → 복사(Ctrl+C) -
VS Code에서 app.py 클릭
왼쪽 파일 목록에서
app.py클릭 → 편집 화면 열림 -
붙여넣기 후 저장
편집 화면 클릭 → Ctrl+V (붙여넣기) → Ctrl+S (저장)
-
requirements.txt도 작성
requirements.txt 클릭 후 아래 내용 붙여넣기 → Ctrl+S
2import streamlit as st
3import pandas as pd
4import matplotlib.pyplot as plt
5# … (1000줄 이상의 코드)
터미널에서 실행하기
터미널로 라이브러리 설치 후 앱을 실행합니다
평소엔 마우스로 클릭클릭 → 그림(GUI) 방식
터미널은 키보드로 명령어 직접 입력 → 텍스트 방식
식당에서 메뉴판 손가락으로 가리키기 = 마우스 클릭
“김치찌개 주세요” 직접 말하기 = 터미널 명령어
단축키: Ctrl + ` (백틱 = 키보드 숫자 1 왼쪽 키)
또는 상단 메뉴 → 터미널 → 새 터미널
터미널이 VS Code 아래쪽에 검은 창으로 열립니다.
① 폴더 이동 (맨 처음 1회)
② 라이브러리 설치 (최초 1회만)
③ 앱 실행!
성공 메시지:
Local URL: http://localhost:8501
Network URL: http://192.168.x.x:8501
→ 브라우저가 자동으로 열립니다!
앱 종료할 때: 터미널에서 Ctrl + C 누르기
검은 창을 닫으면 앱도 같이 꺼져요!
매번 터미널에 명령어 입력하기 번거롭죠? run.bat 파일을 만들면 더블클릭 한 번으로 자동 실행!
bat = batch(배치) = 묶음
명령어 여러 개를 묶어서 순서대로 자동 실행하는 파일
마치 “아침 루틴을 자동화”하는 것처럼! ⏰
터미널 명령어로 만들기
Claude Code 채팅창으로 만들기
🖥️ 방법 1 — VS Code 터미널 명령어
-
VS Code 터미널 열기
단축키 Ctrl + ` 또는 상단 메뉴 → 터미널 → 새 터미널
-
아래 명령어 전체 복사 → 붙여넣기 → Enter!
명령어 한 줄이 run.bat 파일을 자동으로 완성시켜줘요
명령어 핵심 원리:
echo 내용 > run.bat = 새 파일 만들고 첫 줄 쓰기
echo 내용 >> run.bat = 기존 파일에 줄 추가하기
& = 명령어를 이어서 실행
-
파일 생성 확인
TERMINALdir run.bat # run.bat 이름과 파일 크기가 나오면 성공! # 또는 탐색기에서 폴더 열어서 확인 🎉
🤖 방법 2 — Claude Code 채팅창 프롬프트
-
VS Code 오른쪽 Claude Code 패널 열기
VS Code 왼쪽 메뉴에서 🤖 Claude Code 아이콘 클릭
또는 상단 메뉴 → 보기 → Claude Code -
아래 프롬프트를 입력창에 붙여넣기 → Enter!
Claude가 자동으로 run.bat 파일을 만들어줘요
Claude Code가 자동으로 해주는 것:
① run.bat 파일 내용 자동 작성
② 현재 폴더에 파일 자동 저장
③ 파일 생성 완료 확인까지!
→ 터미널 명령어 몰라도 OK 😊
-
Claude Code가 만들어준 run.bat 확인
왼쪽 파일 목록에
run.bat이 생겼으면 성공!
클릭해서 내용 확인 가능
📄 완성된 run.bat 내용 (두 방법 모두 동일)
run.bat 더블클릭 한 번이면!
라이브러리 자동 설치 → 앱 자동 실행 → 브라우저 자동 오픈
터미널 명령어 전혀 몰라도 사용 가능해요!
📊 두 방법 비교
| 항목 | 🖥️ 터미널 명령어 | 🤖 Claude Code |
|---|---|---|
| 난이도 | 보통 (명령어 복사) | ✅ 쉬움 (말로 요청) |
| 속도 | ✅ 빠름 (즉시) | 보통 (AI 응답 대기) |
| 커스터마이징 | 명령어 수정 필요 | ✅ 말로 요청 가능 |
| 추천 대상 | 명령어 익숙한 분 | 초보자 · 편리함 원할 때 |
| 주소 | 누가 접속 가능? | 용도 |
|---|---|---|
http://localhost:8501 |
내 PC에서만 | 혼자 테스트 |
http://192.168.x.x:8501 |
같은 와이파이 연결 시 모두 | 수업 시연용 |
수업 활용 팁: Network URL을 칠판에 적어두면 수강생들이 스마트폰으로 접속 가능! (같은 와이파이 필요)
GitHub에 저장하기
코드를 인터넷 창고(GitHub)에 저장하는 방법
GitHub = 코드 전용 구글 드라이브
📁 구글 드라이브 → 문서·사진 저장
🐙 GitHub → 코드 저장 + 버전 관리
언제 어디서든 코드를 꺼낼 수 있고
“예전 버전으로 되돌리기”도 가능해요!
GitHub 기본 사용은 무료! 코드 저장, 배포 연동 모두 무료로 이용 가능합니다.
-
github.com 접속 → 계정 만들기
Sign up → 이메일, 비밀번호 입력 → 계정 생성
-
새 저장소(Repository) 만들기
로그인 후 오른쪽 상단 + → New repository 클릭
-
저장소 정보 입력
Repository name:
auto-report-streamlit
Visibility: Public 선택 (무료 배포 필수!)
→ Create repository 클릭 -
파일 업로드
uploading an existing file 링크 클릭
→ 파일 4개 드래그 앤 드롭
→ Commit changes 클릭
-
소스 제어 아이콘 클릭
VS Code 왼쪽 메뉴에서 🔀 아이콘 클릭 (단축키: Ctrl+Shift+G)
-
“리포지토리 게시” 클릭
소스 제어 패널에서 리포지토리 게시 버튼 클릭
-
GitHub 로그인
브라우저 팝업에서 GitHub 로그인 → VS Code로 자동 복귀
-
Public 선택 후 게시
Public 선택 → 게시 클릭 → 완료!
나중에 코드 수정 후 다시 올릴 때:
소스 제어 클릭 → 메시지 입력 → ✓ 커밋 → 🔄 변경 내용 동기화
단 3번 클릭으로 끝!
Streamlit Cloud 배포하기
전 세계 누구나 접속할 수 있는 인터넷 주소를 만듭니다
지금까지는 내 집 주방에서만 요리 가능 = 내 PC에서만 실행
배포 = 식당 오픈! 🍽️
인터넷에 올려서 전 세계 누구나 접속 가능하게 만드는 것
Streamlit Cloud = 무료 식당 자리를 빌려주는 곳
-
share.streamlit.io 접속
브라우저에서 share.streamlit.io 접속
-
GitHub로 로그인
Sign in with GitHub 클릭 → GitHub 계정으로 로그인
-
새 앱 만들기
Create app → Deploy a public app from GitHub 선택
-
정보 입력
Repository:
GAMJAGF/auto-report-streamlit
Branch:main
Main file path:app.py -
Deploy! 클릭 → 3~5분 기다리기
자동으로 라이브러리 설치 후 앱 실행 → 완료!
| 방식 | 접속 범위 | 조건 | 추천 |
|---|---|---|---|
| localhost:8501 | 내 PC만 | 항상 가능 | 개발·테스트 |
| 192.168.x.x:8501 | 같은 와이파이 | PC 켜져있을 때 | 수업 시연 |
| streamlit.app | 전 세계! | 항상 (무료) | ✅ 배포용 |
자주 묻는 질문 (FAQ)
수업 중 자주 나오는 질문들을 모았습니다
localhost:8501을 입력하면 돼요!전체 과정 최종 정리
오늘 배운 내용을 한 장에 정리했습니다
| 단계 | 할 일 | 도구 | 핵심 키워드 |
|---|---|---|---|
| STEP 1 | 코드 작성 | Claude AI | 바이브코딩, 프롬프트 |
| STEP 2 | 폴더·파일 만들기 | 윈도우 탐색기 | 폴더, .py, .txt |
| STEP 3 | 코드 붙여넣기 | VS Code | Ctrl+V, Ctrl+S |
| STEP 4 | 실행하기 | 터미널 | pip install, streamlit run, .bat |
| STEP 5 | GitHub 저장 | github.com | Repository, Public, Commit |
| STEP 6 | 인터넷 배포 | Streamlit Cloud | Deploy, streamlit.app |