[250821목1910H] 웹프레임워크 & Streamlit (1)

윤승호·2025년 8월 21일
이론&방법론

비전공자 부트캠프 생존기

목록 보기
135/169

다행이도 Streamlit은 지난 플젝에서도 사용했고 FastAPI와 함께 미리 조금씩 공부해둔 덕분에 수업을 무난히 따라갈 수 있었다. 근데 생각보다 기능이 많아서 놀랐다. 확실히 머신러닝 관련 프로토타입 간단히 만들기엔 이것만큼 좋은 게 없는 것 같다.

학습시간 09:00~01:00(당일16H/1910H)

◆ 학습내용

1. 웹 서비스 기초

(1) 웹 서비스의 구성

A. 클라이언트(Client)

  • 사용자의 기기에서 실행되는 부분
  • 프론트엔드(frontend) 시스템이라고도 불림
  • 예: 웹 브라우저

B. 서버(Server)

  • 클라이언트의 요청을 처리하고 데이터를 저장, 가공, 응답하는 부분
  • 백엔드(backend) 시스템이라고도 불림

C. 요청과 응답(Request & Response)

  • 클라이언트가 서버로 필요한 것을 요청(Request)
  • 서버는 요청을 처리한 후 결과물을 응답(Response)
  • HTML, CSS, JS 파일 등을 주고받음
# 간단한 클라이언트-서버 상호작용 개념
import torch

# Client-side (사용자 요청)
def send_request(data):
    print(f"서버에 데이터 요청: {data}")
    # 서버로 데이터 전송하는 로직 (가정)
    return get_response_from_server(data)

# Server-side (서버 응답)
def get_response_from_server(request_data):
    # 요청 데이터를 파이토치 텐서로 변환
    tensor = torch.tensor(request_data)
    # 간단한 연산 후 결과 반환
    result = tensor * 2
    print(f"클라이언트에 결과 응답: {result}")
    return result

# 실행
user_data = [1, 2, 3]
server_response = send_request(user_data)
구분역할주요 기술 예시
클라이언트사용자 인터페이스(UI), 사용자 경험(UX) 제공React, Angular, Vue.js
서버데이터 처리, 저장, 비즈니스 로직 수행Node.js, Django, Flask

(2) 웹 프레임워크

A. 웹 프레임워크란?

  • 웹 개발을 간소화하고 구조화할 수 있도록 도와주는 소프트웨어

B. 종류

  • 클라이언트 사이드(Frontend): 사용자에게 보이는 부분을 개발
  • 서버 사이드(Backend): 서버의 동작 및 데이터 관리를 개발
  • 풀스택(Full-stack): 클라이언트와 서버 사이드를 모두 포함

C. 2024년 인기 웹 프레임워크

  • 1위: Node.js (40.8%)
  • 2위: React (39.5%)
  • 3위: jQuery (21.4%)
  • 기타: Next.js, Express, Flask, Django 등

D. 웹사이트 기술 스택 확인법

  • 'Wappalyzer' 크롬 익스텐션을 사용하면 해당 사이트가 어떤 기술로 만들어졌는지 쉽게 확인 가능
프레임워크종류2024년 사용률
Node.jsBackend/Full-stack40.8%
ReactFrontend39.5%
DjangoBackend12%
FlaskBackend12.9%

2. Streamlit

(1) Streamlit 소개 및 특징

A. Streamlit이란?

  • 데이터 스크립트를 공유 가능한 웹 앱으로 몇 분 만에 만들어주는 파이썬 라이브러리
  • 프론트엔드 경험이 필요 없음

B. 장점

  • 구현이 매우 쉬움

C. 단점

  • 많은 트래픽을 처리하기에 한계가 있음
  • 속도가 느릴 수 있음
  • UI 커스터마이징에 제약이 있음
  • 배포 시 컴퓨팅 리소스가 제한됨 (1GB 메모리, 800MB 저장 공간)

D. 추천 용도

  • 간단한 대시보드 제작, 머신러닝 모델 서빙 등 테스트 용도에 적합
# Streamlit 기본 코드
import streamlit as st
import torch

st.title("파이토치 텐서 출력 예제 📝")

# 파이토치 텐서 생성
tensor = torch.rand(3, 4)

st.write("아래는 랜덤하게 생성된 파이토치 텐서:")
st.write(tensor) # st.write는 다양한 형태의 데이터를 출력 가능
구분내용
장점쉬운 구현, 빠른 프로토타이핑
단점성능 한계, 커스텀 제약, 리소스 제한
적합 용도간단한 대시보드, 모델 서빙 테스트

(2) 환경 설정 및 실행

A. 설치 및 가상 환경 설정

  • Streamlit 설치: pip install streamlit
  • 가상 환경 생성: python -m venv myenv
  • 가상 환경 활성화 (Windows): myenv\Scripts\activate
  • 가상 환경 활성화 (Mac/Linux): source myenv/bin/activate
  • 비활성화: deactivate

B. 실행 방법

  • 기본 실행: streamlit run 파일명.py
  • 포트 고정 실행: streamlit run 파일명.py --server.port 8501

C. VSCode 팁

  • simple browser: show 확장 기능으로 실시간 디버깅 가능
  • 자동 완성이 불편하다면 copilot completions 기능 비활성화
# 터미널 명령어 예시 (실행 X)

# 1. 가상환경 생성 및 활성화
python -m venv .venv
source .venv/bin/activate

# 2. 라이브러리 설치
pip install streamlit torch

# 3. Streamlit 앱 실행 (8502번 포트 사용)
streamlit run my_app.py --server.port 8502
print("터미널에서 위 명령어들을 순서대로 입력하여 환경 설정 및 실행")
명령어설명
pip install streamlitStreamlit 라이브러리 설치
python -m venv myenvmyenv라는 이름의 가상 환경 생성
streamlit run app.pyapp.py 파일을 Streamlit 앱으로 실행
--server.port 8501앱 실행 포트를 8501로 지정

(3) 기초 문법

A. 텍스트 입력

  • st.title, st.header: 제목, 부제목 표시
  • st.write, st.markdown: 일반 텍스트 및 마크다운 표시
  • st.code: 코드 블록 표시
  • st.magic: 변수나 문서를 자동으로 마크다운처럼 표시

B. 그래프

  • st.line_chart, st.bar_chart, st.area_chart, st.scatter_chart 등 다양한 차트 지원

C. 위젯 (Widgets)

  • st.button, st.checkbox: 버튼, 체크박스
  • st.text_input, st.slider: 텍스트 입력, 슬라이더
  • st.file_uploader, st.camera_input: 파일 업로드, 카메라 입력
  • st.selectbox: 드롭다운 선택 메뉴

D. 레이아웃

  • st.sidebar: 사이드바 영역 생성
  • st.columns: 화면을 여러 열로 분할
  • st.form: 여러 위젯을 하나의 폼으로 묶어 제출 버튼 생성

E. 캐싱 및 세션 관리

  • @st.cache_data: 반환값이 변하지 않는 함수 결과를 캐싱하여 속도 향상
  • st.session_state: 사용자 세션 간 데이터 유지
import streamlit as st
import torch
import torch.nn as nn

st.title("간단한 파이토치 모델 테스트 ⚙️")

# 세션 상태 초기화
if 'model' not in st.session_state:
    # 간단한 선형 모델을 세션에 저장
    st.session_state.model = nn.Linear(10, 1)

# 사이드바에서 입력값 받기
with st.sidebar:
    st.header("입력 옵션")
    input_value = st.slider("입력 텐서의 표준편차", 0.1, 1.0, 0.5)

# 메인 화면
st.write("모델 구조:")
st.code(str(st.session_state.model))

if st.button("랜덤 텐서로 예측 실행"):
    # 랜덤 텐서 생성
    input_tensor = torch.randn(1, 10) * input_value
    # 예측
    with torch.no_grad():
        output = st.session_state.model(input_tensor)
    st.write("예측 결과:")
    st.success(output.item())
기능 종류주요 함수
텍스트st.title, st.header, st.write, st.code
그래프st.line_chart, st.bar_chart, st.plotly_chart
위젯st.button, st.slider, st.text_input, st.file_uploader
레이아웃st.sidebar, st.columns, st.form
상태 관리@st.cache_data, st.session_state

3. 배포 및 관리

(1) Streamlit Cloud 배포

A. 배포 절차

  • 1단계: Streamlit Cloud 사이트에 가입
  • 2단계: GitHub에 공개(public) 저장소(repository)를 만들고 코드를 업로드
  • 3단계: Streamlit Cloud에서 'Create app'을 눌러 GitHub 저장소와 연동

B. 특징

  • 별도의 가상 환경(venv) 설정이나 requirements.txt 파일이 필수는 아님
  • Docker 환경으로 배포할 경우에는 패키지 세팅이 필요
# GitHub Actions를 사용한 자동 배포 workflow 예시 (.github/workflows/deploy.yml)
# name: Streamlit App CI/CD

# on:
#   push:
#     branches: [ main ]

# jobs:
#   build:
#     runs-on: ubuntu-latest
#     steps:
#     - uses: actions/checkout@v2
#     - name: Set up Python
#       uses: actions/setup-python@v2
#       with:
#         python-version: '3.9'
#     - name: Install dependencies
#       run: |
#         python -m pip install --upgrade pip
#         pip install -r requirements.txt
#     # 여기에 배포 관련 스크립트 추가 (e.g., to Streamlit Cloud, AWS, GCP...)
#     - name: Deploy to Cloud
#       run: echo "Deploying to production server..."

print("GitHub에 코드 push 시 자동으로 배포하는 CI/CD 파이프라인 개념도")
단계작업 내용
1Streamlit Cloud 가입
2GitHub 공개 저장소에 코드 업로드
3Streamlit Cloud와 GitHub 저장소 연동 및 앱 생성

(2) 실제 웹 애플리케이션 관리

A. 고려사항

  • Streamlit Cloud의 제한적인 배포를 넘어 실제 서비스에서는 더 많은 관리가 필요

B. 주요 관리 항목

  • CI/CD: 코드를 Docker 이미지로 만들어 클라우드(AWS, GCP, Azure) 인스턴스에 자동 배포
  • 버전 관리: Git 등을 이용해 코드 변경 이력 관리
  • 인프라 설정: 도메인 연결, 네트워크(방화벽 등) 설정
  • 모니터링 및 로깅: 서버 리소스 사용량 모니터링, 에러 발생 시 로그 기록 및 분석
# 기본적인 웹 앱용 Dockerfile 예시

# 베이스 이미지 선택 (Python 3.9)
FROM python:3.9-slim

# 작업 디렉토리 설정
WORKDIR /app

# 의존성 파일 복사 및 설치
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# 소스 코드 복사
COPY . .

# 앱 실행 포트 노출
EXPOSE 8501

# 앱 실행 명령어
CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

print("Streamlit 앱을 Docker 이미지로 만들기 위한 Dockerfile 예시")
관리 항목설명주요 도구/서비스
CI/CD코드 빌드, 테스트, 배포 자동화Docker, GitHub Actions, Jenkins
버전 관리코드 변경 이력 추적 및 협업Git, GitHub, GitLab
인프라도메인, 네트워크, 서버 등 설정AWS, GCP, Azure
모니터링리소스 사용량 및 장애 발생 추적Prometheus, Grafana, Sentry
profile
윤승호
나는 AI 엔지니어가 된다.
이전 포스트

[250820수1894H] 모델 배포 실습 (2)

다음 포스트

[250822금1927H] 웹프레임워크 & Streamlit (2)

0개의 댓글