🔎 3주차 학습 목표 및 개요
이번 주는 파이썬 시각화 도구와 대시보드 제작, 그리고 프롬프트 엔지니어링까지 학습하는 것을 목표로 하였습니다.
Seaborn, Plotly, Folium을 통해 다양한 그래프와 지도 시각화를 실습하였고, Streamlit으로 대시보드를 구성해 실제 프로젝트에 적용 가능한 형태를 만들어 보았습니다.
또한 생성형 AI 활용을 위해 프롬프트 엔지니어링과 LangChain 개념을 접하며, 투자보고서 생성 서비스 예제를 실습했습니다.
📚 주요 학습 및 진행 내용 정리 (3주차)
1. 파이썬 시각화 확장
- Seaborn & Plotly: 기본 시각화 외에 다중축, Annotate, 강조선, 로그스케일 적용 등 고급 기능 학습
- Folium: 실제 스타벅스 매장 위치 데이터를 지도에 마커로 표시하며 위치 기반 시각화 경험
2. Streamlit을 통한 대시보드 제작
- 구성 요소 학습: 헤더, 체크박스, 슬라이더, 사이드바, 탭 등 기본 UI 요소 실습
- 레이아웃 구성: 여러 그래프와 데이터를 한 페이지에 배치, 탭별 분리로 서비스 대시보드 형태 구현
- 배포 실습: Streamlit 배포 과정을 체험하며 프로젝트 응용 가능성 확인
3. 프롬프트 엔지니어링 & AI 서비스 실습
- 프롬프팅 기법 학습: 원하는 답변을 얻기 위한 프롬프트 설계 방식 학습
- LangChain 이해: 단일 API 호출과의 차이를 고민하며 프롬프트 엔지니어링에 활용
- 투자보고서 생성 서비스: GPT API와 LangChain을 연결해 서비스 흐름을 체험
🎮 실습/과제 수행 및 문제 해결 과정
이번 주에 실습하면서 겪었던 어려움이나 궁금증의 해결 과정을 기록하였습니다
다음은 대시보드 제작 실습을 수행하면서 겪었던 어려움 입니다
다음주에 있을 2차 프로젝트를 위해 대시보드 제작 실습을 우리 서비스에 맞게 간단하게 구현을 하는 시간을 가졌습니다.
프로젝트 주제가 ’AI챗봇 기반 심리케어 서비스‘인 만큼 대시보드에서 더 나아가 openai와 연동된 채팅화면까지 구현하고 싶었는데 streamlit의 채팅기능을 GPT api와 연동해서 채팅을 구현한다는 생각을 하지 못하였습니다.
따라서 다음과 같이 같이 1차 프로젝트에서 제작했던 html 기반 프로토타입을 ngrok을 이용하여 외부링크로 걸어둔 다음 streamlit의 채팅화면에서 프로토타입을 작동할 수 있게 해두었습니다.
### 채팅 화면 구성
elif selected_menu == '채팅하기':
st.subheader('Chat - 아래의 서비스를 이용하세요!')
# user_input = st.text_input('채팅을 입력하세요')
# if st.button('전송하기', icon='📤'):
# st.write(" 당신의 입력:", user_input)
NGROK_URL = "https://5217387dab82.ngrok-free.app"
st.components.v1.iframe(src=NGROK_URL, height=760, scrolling=True)하지만 ngrok을 이용한 채팅 ui구현은 보안과 UI 통일성, 그리고 유지보수면에서 문제점이 있다고 생각을 하였습니다
해결방안을 고민하던 중에 강사님께서 스트림릿의 자체적인 채팅 기능에서 gpt와 연동을 해주는 코드가 올라와있는 깃헙을 공유해주셨고 내용을 참고하여 채팅 ui를 완성시킬 수 있었습니다. (내 걱정고 다르게 생각보다 코드가 간단했다)
### 채팅 화면 구성
elif selected_menu == '채팅하기':
st.subheader('Chat - 아래의 서비스를 이용하세요!')
openai_api_key = st.text_input("OpenAI API Key", key="chatbot_api_key", type="password")
if "messages" not in st.session_state:
st.session_state["messages"] = [{"role": "assistant", "content": "How can I help you?"}]
for msg in st.session_state.messages:
st.chat_message(msg["role"]).write(msg["content"])
if prompt := st.chat_input():
if not openai_api_key:
st.info("Please add your OpenAI API key to continue.")
st.stop()
client = OpenAI(api_key=openai_api_key)
st.session_state.messages.append({"role": "user", "content": prompt})
st.chat_message("user").write(prompt)
response = client.chat.completions.create(model="gpt-3.5-turbo", messages=st.session_state.messages)
msg = response.choices[0].message.content
st.session_state.messages.append({"role": "assistant", "content": msg})
st.chat_message("assistant").write(msg)Streamlit의 채팅 컴포넌트를 GPT API와 연동하니, 훨씬 안정적이고 확장성 있는 채팅 환경을 구현할 수 있었고 추후 프로젝트에서 사용자의 채팅데이터를 수집하기도 더 용이하겠다는 생각을 하였습니다.
또한 현재는 api키를 직접 입력하는 방식으로 만들어 두었는데 env파일안에 api키를 넣어두고 화면에서는 키 입력 없이 작동하도록 만들 계획이다
🔮 3주차 주간 회고 (4L)
💎 Liked (좋았던 점)
- Seaborn, Plotly, Folium 등 다양한 파이썬 시각화 도구를 직접 다뤄보고 비교할 수 있었음.
- Streamlit을 활용해 웹 대시보드를 빠르고 간단하게 제작할 수 있다는 점을 체험한 것이 유익했음.
- GPT API와 LangChain을 연결하여 생성형 AI 서비스의 흐름을 직접 경험할 수 있었음.
- 매일 실습한 내용을 실제 프로젝트에 적용할 수 있을 것 같아 동기부여가 되었음.
🌱 Learned (배운 점)
- 고급 시각화 기법: 다중축, Annotate, 색상 강조, 로그스케일 등 세부 그래프 설정 방법.
- Folium 활용법: 실제 위치 데이터를 지도에 시각화하고 마커를 추가하는 방식 학습.
- Streamlit: 체크박스, 슬라이더, 탭, 사이드바 등 다양한 구성 요소를 이용해 서비스 대시보드 구현 가능.
- 프롬프팅 기법: 원하는 답변을 얻기 위한 효과적인 프롬프트 작성 방식.
- LangChain: 단순 OpenAI API 호출과 달리, 체인 구조로 다양한 처리 과정을 연결할 수 있다는 점 이해.
💡 Lacked (부족했던 점)
- Plotly와 Seaborn의 차이를 명확히 이해하지 못해 사용 시 혼동이 있었음.
- FacetGrid + Annotate 활용 시 원하는 결과가 나오지 않아 디버깅이 필요했음.
- Streamlit에서 여러 그래프 변수를 같은 이름으로 지정해 KeyError 발생 → 변수 관리 이해 부족.
- GPT API를 Streamlit UI에 직접 연결하지 못해 외부 HTML로 임시 대체.
- LangChain의 존재 의의와 활용 맥락을 깊이 이해하지 못함.
🚀 Longed for (바라는 점 / 다음 목표)
- 시각화 도구 가이드라인을 스스로 정리해, 상황별로 어떤 도구를 사용하는 게 적절한지 기준을 만들기.
- Streamlit을 활용해 프로젝트 대시보드 프로토타입을 직접 구상하고 구성요소별로 데이터 매핑해보기.
- GPT API를 Streamlit UI와 연동해 대화형 챗봇 서비스를 완성도 있게 구현하기.
- LangChain 개념을 보완해, 체인 구조가 필요한 실제 사례를 찾아보고 학습하기.
📆 이번 주말 학습 계획
이번 주말에는 이번 대시보드 시각화 수업에서 배운 것을 복습하면서
다음주 시각화 대시보드 프로젝트 계획을 준비할 것입니다.
