Streamlit을 활용한 웹 앱 개발 및 Tistory 블로그 포스팅 가이드

Streamlit을 활용한 웹 앱 개발 및 Tistory 블로그 포스팅 가이드

Streamlit을 사용하여 웹 앱을 개발하고, 이를 Tistory 블로그에 포스팅하는 과정을 단계별로 안내해드리겠습니다. 이 가이드는 index.html, index.js, 그리고 데이터베이스로 사용할 bibleData.json 파일을 이미 보유하고 있으며, idx.google 환경에서 작업 중이라는 가정 하에 작성되었습니다.

1. 개발 환경 설정

Streamlit 설치

pip install streamlit

필요한 라이브러리 설치

pip install pandas numpy matplotlib

2. 프로젝트 구조 설정

idx.google/
│
├── app/
│   ├── main.py
│   ├── index.html
│   ├── index.js
│   └── bibleData.json
│
└── requirements.txt

3. Streamlit 앱 개발

**main.py 작성**

import streamlit as st
import json
import pandas as pd

# 데이터 로드
with open('bibleData.json', 'r') as file:
    bible_data = json.load(file)

def main():
    st.title("성경 검색 앱")

    # 검색 기능
    search_term = st.text_input("검색어를 입력하세요")
    if search_term:
        results = search_bible(search_term)
        st.write(results)

    # 통계 시각화
    st.subheader("성경 통계")
    show_statistics()

def search_bible(term):
    results = []
    for verse in bible_data:
        if term.lower() in verse['text'].lower():
            results.append(f"{verse['book']} {verse['chapter']}:{verse['verse']} - {verse['text']}")
    return results

def show_statistics():
    df = pd.DataFrame(bible_data)
    book_counts = df['book'].value_counts()
    st.bar_chart(book_counts)

if __name__ == "__main__":
    main()

4. Streamlit 앱 실행 및 테스트

streamlit run app/main.py

5. 앱 배포 준비

requirements.txt 작성

streamlit==1.10.0
pandas==1.3.3
numpy==1.21.2
matplotlib==3.4.3

6. GitHub에 프로젝트 업로드

git init
git add .
git commit -m "Initial commit"
git remote add origin <https://github.com/yourusername/bible-search-app.git>
git push -u origin master

7. Streamlit Cloud에 배포

1. Streamlit Cloud (https://streamlit.io/cloud) 접속
2. "New app" 클릭
3. GitHub 저장소 연결
4. 배포 설정 구성
5. "Deploy" 클릭

8. Tistory 블로그 포스팅 준비

1. 스크린샷 캡처: 앱의 주요 기능과 인터페이스
2. 앱 사용 방법 정리
3. 개발 과정 및 주요 코드 설명 준비

9. Tistory 블로그 포스팅 작성

제목: Streamlit으로 만든 성경 검색 웹 앱 개발기

소개

이번 프로젝트에서는 Streamlit을 활용하여 성경 검색 웹 앱을 개발했습니다. 이 앱은 사용자가 성경 구절을 쉽게 검색하고, 성경 책별 통계를 시각화하여 보여줍니다.

주요 기능

1. 성경 구절 검색
2. 성경 책별 통계 시각화

개발 과정

1. 환경 설정 Streamlit과 필요한 라이브러리를 설치했습니다.

2. 데이터 준비bibleData.json 파일을 사용하여 성경 데이터를 로드했습니다.

3. 앱 구조 설계

def main():
    # 메인 앱 로직
    pass

def search_bible(term):
    # 검색 기능 구현
    pass

def show_statistics():
    # 통계 시각화 구현
    pass

4. 검색 기능 구현

def search_bible(term):
    results = []
    for verse in bible_data:
        if term.lower() in verse['text'].lower():
            results.append(f"{verse['book']} {verse['chapter']}:{verse['verse']} - {verse['text']}")
    return results

5. 통계 시각화

def show_statistics():
    df = pd.DataFrame(bible_data)
    book_counts = df['book'].value_counts()
    st.bar_chart(book_counts)

배포 과정

1. GitHub에 프로젝트 업로드
2. Streamlit Cloud를 통한 앱 배포

앱 사용 방법

1. 검색창에 원하는 단어나 구절을 입력합니다.
2. 검색 결과가 표시됩니다.
3. 하단의 차트에서 성경 책별 통계를 확인할 수 있습니다.

개선 계획

• 고급 검색 기능 추가
• 다국어 지원
• 사용자 계정 기능

결론

Streamlit을 사용하여 간단하면서도 유용한 성경 검색 앱을 개발했습니다. 이 프로젝트를 통해 Streamlit의 강력함과 사용 편의성을 경험할 수 있었습니다.

앱 링크: 성경 검색 앱

GitHub 저장소: 프로젝트 코드

10. Tistory 블로그에 포스팅 업로드

1. Tistory 관리자 페이지 접속
2. '글쓰기' 클릭
3. 제목 입력 및 내용 붙여넣기
4. 이미지 업로드 및 삽입
5. 태그 추가: #Streamlit #웹앱개발 #파이썬
6. 미리보기로 확인 후 발행

11. SEO 최적화

1. 메타 설명 추가
2. 적절한 제목 태그(h1, h2, h3) 사용
3. 이미지에 alt 텍스트 추가
4. 내부 링크 추가

12. 소셜 미디어 공유

개발한 앱과 블로그 포스트를 Twitter, LinkedIn 등의 소셜 미디어 플랫폼에 공유하여 더 많은 사람들에게 알립니다.

결론

이 가이드를 따라 Streamlit을 사용하여 웹 앱을 개발하고, 이를 Tistory 블로그에 포스팅하는 과정을 완료했습니다. 이 과정을 통해 웹 앱 개발부터 배포, 그리고 콘텐츠 작성 및 공유까지의 전체 워크플로우를 경험할 수 있었습니다. 앞으로도 지속적인 개선과 업데이트를 통해 더 나은 앱과 콘텐츠를 제공할 수 있기를 바랍니다.

 

Citations:

[1] https://formason.tistory.com/23

[2] https://www.npmjs.com/package/tistory-skin/v/1.3.0?activeTab=dependencies

[3] https://github.com/iolo/hexo-migrator-tistory

[4] https://zeroradish.tistory.com/14

[5] https://eomiso.tistory.com/entry/How-to-use-Katex-in-Tistory-blogs티스토리에서-Latex-사용하기