인터넷에 올리기 — Streamlit Cloud로 친구한테 링크 보내기

이 챕터를 끝내면 챗봇이 인터넷에 공개된 URL(https://...streamlit.app)로 동작하고, 카톡으로 그 링크를 친구한테 보내면 친구도 자기 폰에서 그대로 대화할 수 있어요. API 키 노출도 막혀 있고, 비용 한도도 박혀 있어 마음 놓고 공유할 수 있는 상태예요.

배포 흐름 한 눈에

GitHub에 코드 올리고, Streamlit Cloud가 그 코드를 보고 자동으로 인터넷에 띄워주는 구조예요.

1. GitHub 가입 — 코드 저장소 호스팅. 무료.
2. 로컬 코드 → GitHub 업로드 — Codex가 처리.
3. Streamlit Cloud 가입 — GitHub 계정으로 OAuth.
4. 앱 연결 — GitHub의 챗봇 레포 지정. 자동으로 빌드·배포.
5. Secrets 입력 — API 키를 Streamlit Cloud에만 안전하게 박기.
6. API 비용 한도 박기 — Anthropic 콘솔에서 자동 차단 한도 설정.

다 무료 또는 저비용. 학습 단계에선 추가 비용 거의 없어요.

1. GitHub 가입과 첫 레포 만들기

GitHub은 코드 저장소 서비스예요. ch11에서 Plugin으로 살짝 다뤘는데, 이번엔 정식으로 가입.

1. github.com 가입

   github.com 접속 → Sign up. 이메일·비밀번호·사용자명. 이메일 인증 끝나면 진입.

2. 새 레포지토리 만들기

   오른쪽 상단 + 버튼 → New repository. 이름 정하기 (예: coach-bot). 공개(public)·비공개(private) 중 선택 — 학습용은 비공개 권장 (코드를 친구·동료한테 안 보이게).

   "Initialize" 옵션은 다 비워두고 (Codex가 만들 예정) Create repository 클릭.

레포가 만들어지면 비어 있는 레포 화면이 떠요. URL이 https://github.com/사용자명/coach-bot 같은 모양일 거예요. 이 주소만 기억해두면 됩니다.

2. 로컬 코드 → GitHub 업로드

이제 Codex 차례. ch15·ch16에서 작업한 폴더로 가서 새 스레드:

이 폴더의 코드를 GitHub에 올려줘.

레포 주소: https://github.com/(내 사용자명)/coach-bot

요구사항:
- .env 파일은 절대 올리지 마. .gitignore에 .env가 들어 있는지 먼저 확인.
- API 키가 코드 어디에도 박혀있지 않은지 한 번 더 확인.
- 첫 커밋 메시지는 "init: 글쓰기 코치 챗봇" 정도로.

올리기 전에 어떤 파일이 올라갈지 목록을 먼저 보여줘.
내가 '진행' 하면 그때 push 해줘.

Codex가:

1. 어떤 파일이 올라갈지 목록 출력 (.env가 빠져 있는지 반드시 확인)
2. GitHub 인증 (브라우저로 OAuth 창이 뜨거나 1회용 코드 입력)
3. 첫 commit + push

push가 끝나면 GitHub 레포 페이지를 새로고침했을 때 파일들이 보여요. .env 파일이 안 보이면 성공. 보이면 즉시 Codex한테 "방금 push에서 .env가 들어갔어. 키 노출됐으니 콘솔에서 새 키 발급하고 push 정리해줘"로 처리.

3. Streamlit Cloud 가입과 앱 연결

1. share.streamlit.io 접속해서 GitHub 로그인

   가입·로그인은 share.streamlit.io에서 진행해요 (streamlit.io/cloud는 안내 페이지, 실제 워크스페이스는 share.streamlit.io). Continue with GitHub 버튼으로 방금 만든 GitHub 계정 OAuth. 첫 진입 시 약관 동의·이름 입력 단계가 한 번 있어요.

2. Create app — 우상단 버튼

   워크스페이스에 들어가면 우상단 'Create app' 버튼이 보여요. 클릭하면 "이미 앱이 있어요?" 같은 안내가 떠요. "Yup, I have an app" 선택.

3. 레포 정보 입력
   • Repository: 사용자명/coach-bot
   • Branch: main (또는 master)
   • Main file path: app.py (ch15에서 만든 파일)
   • App URL: https://coach-bot-xxxxx.streamlit.app 형식으로 자동 생성. 원하면 일부를 본인 마음에 드는 단어로 변경 가능.

   GitHub URL을 통째로 붙여넣는 'Paste GitHub URL' 옵션도 있어요.

4. Advanced settings → Secrets에 TOML 붙여넣기

   양식 아래 Advanced settings를 펴면 Python 버전 선택과 Secrets 입력란이 나와요. Secrets엔 로컬 .streamlit/secrets.toml 파일과 같은 TOML 형식으로 통째로 붙여넣어요.

   ANTHROPIC_API_KEY = "sk-ant-api03-..."
   

   여기 입력한 값은 Streamlit Cloud 안에만 저장되고 GitHub·외부에 노출 안 됨. 코드에선 st.secrets["ANTHROPIC_API_KEY"] 또는 ch15에서 쓰던 환경변수 방식 그대로 읽어요. (Codex가 짠 코드가 어느 쪽이든 둘 다 동작해요.)

5. Deploy 클릭

   2~3분 기다리면 빌드가 끝나고 URL로 접속 가능. 채팅 UI가 ch15때와 똑같은 모습으로 떠요. 이번엔 인터넷 어디서나 접속 가능.

생성된 URL을 카톡으로 친구한테 보내봐요. 친구도 자기 폰에서 챗봇과 대화할 수 있어요.

4. API 비용 한도 박기 — 폭주 방지

링크를 친구한테 보냈는데 친구가 의도치 않게 100번 대화하면 비용도 100번분 발생. 자동 차단 한도를 박아서 안심하고 공유할 수 있게 해요.

1. Anthropic 콘솔 → Settings → Billing → Limits

   console.anthropic.com → Settings → Billing → Spend Limits 또는 Usage Limits 항목.

2. 월 한도 설정

   Monthly limit에 안전한 금액 입력 (학습용·소규모 공유라면 $5~10 정도 권장).

   도달하면 자동으로 API 호출이 차단되고 청구도 거기서 멈춰요. 챗봇은 "현재 사용량 한도 초과"로 응답하지만 비용은 안 나가요.

3. 알람 임계치 설정

   Alert threshold — 한도의 80%·90% 시점에 이메일 알람. 평소엔 사용량을 잊고 있어도 임박하면 알려줌.

이 한도 박아두면 "친구한테 링크 보내고 잊어도" 비용 폭주 위험은 사실상 없어져요.

5. 친구한테 보내기 전 체크리스트

배포된 URL을 공유하기 전 5분만 점검:

• 시스템 프롬프트 한 번 읽기 — 노출돼서 곤란한 정보(내 회사 내부 자료 등) 안 들어 있는지
• 거절 조건 동작 확인 — "주식 추천해줘" 같은 범위 밖 질문이 의도대로 거절되는지
• API 비용 한도 박혀 있는지 — Anthropic 콘솔 Billing 다시 확인
• 모바일에서 한 번 테스트 — Streamlit chat UI는 모바일도 잘 되지만 한 번은 직접 확인
• 새로고침 시 대화 초기화 OK인지 — 친구가 매번 처음부터 시작하는 게 자연스러운 시나리오인지

한 가지라도 걸리는 게 있으면 Codex한테 부탁해서 손 본 뒤 다시 push.

자주 마주치는 문제

사례 1: Streamlit Cloud 빌드가 실패함 → 보통 requirements.txt에 라이브러리가 빠진 경우. Codex한테 "Streamlit Cloud 빌드 로그 보고 빠진 의존성 채워서 다시 push해줘". 빌드 로그는 Streamlit Cloud 대시보드의 앱 상세에서 확인 가능.

사례 2: 빌드는 됐는데 챗봇이 "API 키 없음"으로 빨간 화면 → Streamlit Cloud Secrets 영역에 키가 안 들어갔거나 키 이름이 다른 경우. 대시보드 → Settings → Secrets에서 정확히 ANTHROPIC_API_KEY = "..." 형식인지 확인.

사례 3: GitHub OAuth가 자꾸 막힘 → 회사 GitHub 계정에 보안 정책이 강한 경우. 개인 계정으로 새로 만들어 시도. 학습용은 개인 계정 권장.

사례 4: 배포 URL을 친구한테 보냈는데 안 열린다고 함 → Streamlit Community Cloud 무료 플랜은 트래픽이 일정 시간(현재 약 12시간) 없으면 자동 슬립. 첫 접속자 화면에 "Yes, get this app back up!" 버튼이 떠요. 친구가 직접 클릭해서 깨워도 되고, 친구한테 보내기 전에 본인이 한 번 깨워두면 더 깔끔해요.

사례 5: 사용량 한도에 너무 빨리 도달함 → 응답 길이가 길거나 시스템 프롬프트가 너무 무거운 경우. Codex한테 "응답 토큰 수 줄이고 시스템 프롬프트 압축해줘"로 비용 최적화.

Part 4 마무리 — 그리고 입문 커리큘럼 졸업

여기까지 다 따라왔으면 손에 쥐어진 게 이만큼이에요.

• Part 1 — Codex 셋업 + AGENTS.md로 내 환경 박기 (ch1~4)
• Part 2 — 첫 웹페이지 + favicon·OG 이미지까지 다듬은 한 작품 (ch5~8)
• Part 3 — 파일 정리·CSV·Gmail·자동화로 반복 업무를 Codex한테 (ch9~12)
• Part 4 — 인터넷에 공개된 내 챗봇 한 개 (ch13~17)

코드는 한 줄도 외우지 않았어요. 매번 Codex한테 결정만 내려줬을 뿐. 이제부턴 같은 흐름을 본인 시나리오에 적용하는 단계예요. **"이런 게 만들고 싶은데"**라고 한 마디 시작할 수 있는 자리에 도착했어요.

이 커리큘럼은 여기서 끝이지만, 더 깊게 가고 싶다면 딥다이브 시리즈로. 챕터별 주제(DESIGN.md, Claude Code 워크플로우 등)를 한 번에 한 주제씩 깊게 파봐요.