Streamlit 인터페이스에서 구현한 면접 챗봇 흐름

1. Streamlit UI 구성 방식

이 프로젝트는 웹 프레임워크 대신 Streamlit의 멀티 페이지 구조를 활용하여 빠르고 직관적인 인터페이스를 구성했습니다.

🗂 페이지 구성

📂 pages/
├── home.py      # 챗봇 소개 및 사용 방법 안내
├── chat.py      # 실질적인 질문/응답 챗봇 페이지
└── history.py   # 사용자별 면접 기록 조회 페이지

• main.py: 로그인 및 회원가입 처리 포함, 진입점 역할
• 각 페이지는 세션 상태와 DB를 기반으로 작동함

2. 로그인 흐름 (main.py)

main.py는 로그인/회원가입 폼을 구성하며, Streamlit의 st.session_state를 활용해 인증 상태를 관리합니다.

if "user" in st.session_state:
    st.switch_page("pages/home.py")

• 로그인 성공 시 사용자 세션 상태 저장
• 이후 페이지들에서는 이 상태를 기반으로 사용자별 정보 접근

또한, backend/utils.py의 show_sidebar()를 통해 로그인 상태를 UI로 표현하고 로그아웃 기능도 제공합니다.

3. 챗봇 흐름 (chat.py)

chat.py는 LangChain 기반 챗봇 체인을 실행하는 중심 페이지입니다.

• 사용자의 질문 입력을 st.chat_input()으로 받고
• LangChain RAG 체인을 실행한 결과를 실시간으로 출력

prompt = st.chat_input("질문을 입력하세요...")
response = get_openai_response(...)
st.markdown(response)

• 질문/답변/피드백은 모두 DB에 저장됨 (backend/db.py)
• 챗봇 초기 메시지는 SYSTEM_MESSAGE로 구성되어 면접관 스타일 유지

4. 대화 기록 조회 (history.py)

이 페이지는 사용자별 면접 기록을 PostgreSQL에서 불러와 출력합니다.

• chat_sessions, chat_messages 테이블을 활용해
• 세션별 대화 내역을 시간 순으로 출력

with st.expander(f"세션 {session_id} - {created_at}"):
    for row in messages:
        st.write(f"{row['sender']}: {row['message']}")

간단하지만, 개인의 성장 추적이라는 프로젝트 목표에 있어 핵심적인 기능입니다.

5. CI 자동화 (GitHub Actions)

Streamlit Cloud 배포 외에도 GitHub Actions를 활용해 CI 테스트 자동화를 구현했습니다.

- name: Run Pytest
  run: pytest

• .github/workflows/ci.yml에서 테스트 실행
• PR 또는 커밋 시점에 자동으로 작동해 코드 안정성 확보

6. 마무리

Streamlit은 별도의 서버 없이도 UI와 로직을 통합해 빠른 챗봇 프로토타입을 만들 수 있는 도구입니다. 이번 프로젝트에서는 st.session_state, st.chat_input, 멀티 페이지 구조 등을 적극 활용해 사용자 친화적인 면접 챗봇 인터페이스를 완성할 수 있었습니다.