나만의 웹서비스 런칭

'오늘의 운세' 웹앱 띄우기

① Streamlit 설치하기

먼저 도구를 설치합니다. 터미널에 (venv) 표시가 있는지 확인하고 입력하세요. (설치는 한 번만 하면 돼요.)

# (venv) 표시 확인 후 설치
pip install streamlit

② AI를 부르는 준비 — API 키와 ask_ai 함수

# Windows
New-Item .env

# Mac
touch .env

OPENAI_API_KEY=여기에_선생님이_알려준_키_붙여넣기

우리 앱은 AI에게 운세를 부탁할 거예요. 그러려면 두 가지가 필요해요.

그리고 AI를 부르는 짧은 함수 하나를 만들어 두면, 앞으로 계속 편하게 쓸 수 있어요. 이 함수는 한 번 만들어 두고 재사용합니다.

from openai import OpenAI
client = OpenAI()   # 키는 .env / secrets에서 자동으로 불러옴

def ask_ai(prompt):
    res = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[{"role": "user", "content": prompt}]
    )
    return res.choices[0].message.content

③ 운세 웹앱 코드 만들기

이제 화면을 만들어요. AI 도구에 아래 프롬프트를 직접 입력해 기본 코드를 받아 보세요. 프롬프트는 ① 무엇을 만들지 ② 어떻게 동작할지 ③ 키 처리 방법 세 가지를 분명히 적는 게 핵심이에요.

④ 핵심 구조 이해하기

코드에는 보통 이런 핵심 줄이 들어 있어요. 이 세 부분만 찾을 수 있으면 충분합니다.

import streamlit as st

# ── ① 화면 만들기 ──
st.title("🔮 오늘의 운세")

# ── ② 버튼을 누르면 실행 ──
if st.button("운세 뽑기"):
    result = ask_ai("오늘의 운세를 한 문장으로 말해줘")  # 위에서 만든 함수
    # ── ③ 결과 보여주기 ──
    st.write(result)

⑤ 앱 실행하기

코드를 app.py로 저장했다면, 이제 터미널에서 실행합니다. 실행하면 브라우저가 저절로 열려요.

streamlit run app.py

버튼을 누르면 브라우저에 이런 식으로 나와요.

🔮 오늘의 운세
[ 운세 뽑기 ]

오늘은 작은 행운이 당신을 따라다니는 날이에요.
망설이던 일에 용기를 내보세요!

import streamlit as st
from openai import OpenAI

client = OpenAI()   # 키는 .env / secrets에서 자동으로

def ask_ai(prompt):
    res = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[{"role": "user", "content": prompt}]
    )
    return res.choices[0].message.content

st.title("🔮 오늘의 운세")
if st.button("운세 뽑기"):
    st.write(ask_ai("오늘의 운세를 한 문장으로 말해줘"))

나만의 앱으로 꾸미기

기본 앱이 돌아간다면, 이제 내 취향을 더할 차례예요. 그런데 바로 정답을 보지 말고, 먼저 스스로 생각해 보는 것부터 시작해요.

스스로 프롬프트를 적어봤다면, 아래 예시와 비교해 보세요. 똑같지 않아도 괜찮아요 — 내 방식대로 요청해도 됩니다.

더 꾸미고 싶다면 — Streamlit 위젯

화면에 넣을 수 있는 요소를 위젯(widget)이라고 불러요. 아래 위젯들을 AI에게 "추가해줘"라고 요청하면 화면이 풍성해져요. 어떤 위젯이 있는지 알아두면, 무엇을 요청할지 스스로 정할 수 있어요.

이름을 입력하세요: [ 지민 ]
운세 주제: [ 공부 ▾ ]
[ 운세 뽑기 ]

✅ 지민님의 공부 운세
오늘 집중력이 평소보다 좋아요. 어려운 문제부터 도전!

name = st.text_input("이름을 입력하세요")
if st.button("운세 뽑기"):
    # 이름을 프롬프트에 직접 끼워 넣기
    st.write(ask_ai(f"{name}님을 위한 오늘의 운세를 한 문장으로"))

배포해서 폰으로 접속하기

이제 마지막 단계예요. 내 컴퓨터에서만 돌던 앱을 Streamlit Community Cloud라는 무료 서비스에 올리면, 전 세계 어디서나 열리는 주소가 생깁니다.

배포 3단계

배포에 꼭 필요한 파일

배포하려면 "이 앱은 어떤 라이브러리가 필요해요"를 알려주는 목록 파일이 있어야 해요. AI에게 "이 앱의 requirements.txt를 만들어줘"라고 요청하면 됩니다.

streamlit
openai

🃏 선택지 카드 — 배포 전에 무엇을 더할까?

배포하기 전, 앱에 하나만 더 추가해 봅시다. 하나를 골라 AI에게 요청해 보세요.

더 해보고 싶다면

미션 3까지 끝내고 시간이 남는다면 도전해 보세요. 끝내지 못해도 괜찮습니다.

보너스 ① 방문자 카운터 달기

앱에 접속한 사람 수를 세서 화면에 보여줍니다. "몇 명이나 내 운세를 봤을까?"를 확인할 수 있어요.

# 세션 안에서 숫자를 기억하기
if "count" not in st.session_state:
    st.session_state.count = 0

if st.button("운세 뽑기"):
    st.session_state.count += 1
    st.write(result)

st.caption(f"오늘 {st.session_state.count}번 뽑았어요!")

보너스 ② 친구에게 공유하고 후기 받기

완성된 주소를 친구 3명에게 보내고, 써 본 느낌을 물어보세요. "뭐가 제일 재밌었어? 뭘 더하면 좋을까?"를 물어 다음 주 개선 아이디어로 모읍니다.