웹 챗봇으로 승격 — Streamlit으로 브라우저에서 띄우기 | 바이브 코딩 커리큘럼

이 챕터를 끝내면 ch14에서 만든 챗봇이 브라우저 안 채팅창으로 옮겨가요. 아직 인터넷에 올린 건 아니고 내 컴 안에서만 돌지만, "ChatGPT처럼 생긴 모양"으로 한 단계 올라서요. 친구한테 보낼 수 있는 형태는 ch17에서.

TIP· 이번 챕터 결과물

브라우저(http://localhost:8501)를 열면 ChatGPT처럼 생긴 채팅 UI가 떠 있고, 메시지를 보내면 Claude가 글쓰기 코치로 답해요. 대화 히스토리가 화면에 누적돼서 자연스러운 대화가 가능해요.

Streamlit이 뭐예요

Streamlit은 파이썬 한 파일로 웹 앱을 만들 수 있게 해주는 도구예요. 챗봇 UI 만드는 데에 거의 표준처럼 쓰여요.

비개발자가 알아둘 건 두 가지뿐:

HTML·CSS·JavaScript 안 짜요. Codex가 파이썬 한 파일에 챗봇 UI를 박아 넣어요.
로컬에서 동작. "브라우저로 보이지만 사실 내 컴이 호스팅 중"인 상태. 친구한테는 아직 안 보여요. ch17에서 인터넷 공개.

ch14 챗봇을 Streamlit으로 옮기기

ch14에서 만든 coach-bot/ 폴더를 그대로 써요. Codex 앱에서 같은 폴더로 프로젝트 열고, 새 스레드에서 부탁:

이 폴더의 챗봇을 Streamlit 웹 앱으로 바꿔줘.

요구사항:
- Streamlit의 chat 컴포넌트를 써서 ChatGPT처럼 생긴 UI로
- 사용자 메시지와 Claude 응답이 채팅 버블로 누적
- 페이지 상단에 챗봇 이름 ("내 글쓰기 코치") 한 줄
- 페르소나는 ch14의 .env 파일과 동일한 키 사용 (재발급 X)
- 대화 히스토리는 세션 동안 유지. 페이지 새로고침하면 리셋.
- 메시지 전송 중엔 "..." 같은 로딩 표시

기존 chat.py는 남겨도 되고 백업으로 옮겨도 돼. 새 진입점은 app.py로.

Codex가 app.py 한 파일을 새로 만들거나 chat.py를 발전시킨 형태로 결과를 만들어줘요. requirements.txt에 streamlit이 추가됐는지 확인.

실행 — Codex가 띄워줘요

Streamlit 앱은 일반 파이썬 스크립트와 실행 명령이 달라요. 그래도 직접 외울 필요 없어요.

방금 만든 Streamlit 앱 실행해줘. 라이브러리 부족하면 먼저 설치하고.
실행되면 어디로 접속하면 되는지 알려줘.

Codex가 라이브러리 설치 후 streamlit run app.py를 돌려요. 잠시 후 터미널에 다음 같은 줄이 떠요.

You can now view your Streamlit app in your browser.
Local URL: http://localhost:8501

이 URL이 브라우저로 자동으로 열리거나, 안 열리면 직접 복사해서 브라우저 주소창에 붙여 넣어요. ChatGPT랑 비슷하게 생긴 채팅 UI가 떠 있을 거예요.

주의· 실행 중인 동안엔 Codex 앱 끄지 마세요

Streamlit 서버는 Codex가 띄워둔 상태로만 동작해요. Codex 터미널에서 멈추면(Ctrl+C 또는 스레드 종료) 브라우저에서도 챗봇이 끊겨요. 채팅을 끝내면 Codex한테 "Streamlit 앱 종료해줘"로 깔끔하게 정리.

첫 대화 — UI에서 한번 굴려보기

채팅창에 입력해 보면 ch14에서 봤던 글쓰기 코치 응답이 ChatGPT처럼 생긴 버블로 보일 거예요.

"안녕" → 인사 응답
"내가 쓴 글 한번 봐줘: ..." → 톤·구조 첨삭
페이지 새로고침 → 대화 히스토리 초기화

자주 마주치는 문제

사례 1: 브라우저에 빈 화면만 떠요 → 보통 app.py에 챗봇 UI 코드가 안 박힌 경우. Codex한테 "app.py 안에 채팅 UI 코드가 제대로 들어 있는지 확인하고 빠진 부분 채워줘"로 점검.

사례 2: "ANTHROPIC_API_KEY not set" 에러가 브라우저에 빨간색으로 → Streamlit이 .env를 자동으로 읽지 못한 경우. Codex한테 "app.py에서 dotenv를 써서 .env를 명시적으로 로드하도록 고쳐줘".

사례 3: 메시지 보내면 응답 없이 멈춤 → API 호출 중 에러. Streamlit 화면 아래 로그 영역이나 Codex 터미널에 에러가 찍혀 있어요. "지금 어떤 에러가 나오고 있는지 확인하고 풀어줘"로 Codex한테 디버깅 맡기기.

사례 4: 매번 새로고침하면 대화가 사라져서 불편 → 의도된 동작. 영구 저장이 필요하면 ch16에서 다뤄요. 지금 단계는 "한 번 켰을 때 대화 누적되는 것"까지만.

사례 5: 포트 8501이 이미 사용 중이라는 메시지 → 이전 Streamlit 세션이 살아있는 경우. Codex한테 "기존 streamlit 프로세스 종료하고 다시 띄워줘".

코드 안 보고 가야 한다고요?

대부분 안 봐도 돼요. 그래도 호기심에 한 번쯤 들여다보고 싶다면 Codex한테:

지금 app.py 안에서 무엇이 어떤 역할을 하는지 한 단락으로 설명해줘.
줄 단위 해설은 빼고, 큰 블록 단위로.

Codex가 "이 부분이 UI를 그리는 영역, 이 부분이 Claude 호출, 이 부분이 히스토리 관리" 식으로 풀어줘요. 외우지 않아도 돼요. 다만 ch16에서 페르소나·시스템 프롬프트를 손볼 때 "Codex가 어떤 부분을 고치고 있는지" 감 잡기엔 도움이 돼요.

다음 챕터에서

UI는 잡혔어요. 다음은 챗봇 안에 들어 있는 시스템 프롬프트를 본격적으로 다듬는 단계. 페르소나·말투·자주 묻는 질문을 박아서, 같은 챗봇이 "내 글쓰기 코치"가 아니라 "우리 회사 FAQ 봇"이나 "회의록 요약 봇"으로 변신할 수 있게 만들어요.