최근 파이썬 데이터 생태계를 공부하면서 Pandas나 Plotly 같은 라이브러리를 통해 데이터를 분석하고 시각화하는 방법을 다뤄왔다. 하지만 분석 결과를 나만 보는 것이 아니라 다른 사람과 웹 상에서 공유하고 인터랙션하게 만들려면 프론트엔드 작업이 필수적이다.
이 간극을 채워주는 가장 완벽한 도구가 바로 Streamlit(스트림릿)이다. 단순히 파이썬 스크립트 몇 줄만 작성하면 번거로운 HTML, CSS, JS 작성 없이도 곧바로 웹 애플리케이션이 뚝딱 만들어진다. 이번에는 공식 홈페이지에서 제공하는 30 Days of Streamlit 챌린지를 따라가보며 핵심 기능들을 실습해봤다.
30일 챌린지는 단순 텍스트(st.write) 출력부터 시작해서, 체크박스나 슬라이더 같은 기본 위젯, 그리고 캐싱(@st.cache_data)과 세션 상태(st.session_state)를 활용한 최적화 알고리즘까지 점진적으로 난이도가 올라간다.
가장 인상적이었던 두 가지 실습을 꼽아 정리해본다.
웹 개발 경험이 있다면, 사용자에게 URL을 입력받고 외부 API로 이미지를 긁어와 화면에 뿌려주는 작업이 은근히 손이 많이 간다는 걸 알 것이다. 스트림릿에서는 이 과정이 믿을 수 없을 만큼 간결하다.
import streamlit as st
st.title('🖼️ yt-img-app')
st.header('YouTube Thumbnail Image Extractor App')
# 사이드바에서 이미지 화질 셋팅 메뉴 구성
st.sidebar.header('Settings')
img_dict = {'Max': 'maxresdefault', 'High': 'hqdefault', 'Medium': 'mqdefault', 'Standard': 'sddefault'}
selected_img_quality = st.sidebar.selectbox('Select image quality', ['Max', 'High', 'Medium', 'Standard'])
img_quality = img_dict[selected_img_quality]
yt_url = st.text_input('Paste YouTube URL', 'https://youtu.be/JwSS70SZdyM')
def get_ytid(input_url):
if 'youtu.be' in input_url:
ytid = input_url.split('/')[-1]
if 'youtube.com' in input_url:
ytid = input_url.split('=')[-1]
return ytid
if yt_url != '':
ytid = get_ytid(yt_url)
yt_img = f'http://img.youtube.com/vi/{ytid}/{img_quality}.jpg'
st.image(yt_img)
st.write('YouTube video thumbnail image URL: ', yt_img)
st.sidebar.selectbox로 좌측 셋팅바를 순식간에 구현하고, st.text_input으로 URL을 받자마자 파이썬의 문자열 파싱 로직을 거쳐 st.image로 뿌려주는 구조다. 복잡한 라우팅이나 상태 관리 없이 코드가 위에서 아래로 물 흐르듯 실행된다는 점이 매력적이다.
Day 27에서는 streamlit-elements를 사용해 크기 조절과 드래그 앤 드롭이 가능한 대화형 대시보드를 구성하는 실습을 진행했다. 기본 제공 위젯만으로는 아쉬운 고차원적 UI 구성을 Material UI, Nivo 차트, Monaco 에디터 등을 융합해 해결하는 방법이다.
from streamlit_elements import elements, dashboard, mui, editor, media, lazy, sync, nivo
# ... 중략 (데이터 초기화 로직) ...
layout = [
dashboard.Item("editor", 0, 0, 6, 3),
dashboard.Item("chart", 6, 0, 6, 3),
dashboard.Item("media", 0, 2, 12, 4),
]
with elements("demo"):
with dashboard.Grid(layout, draggableHandle=".draggable"):
# 1. 코드 에디터 (Monaco)
with mui.Card(key="editor", sx={"display": "flex", "flexDirection": "column"}):
mui.CardHeader(title="Editor", className="draggable")
with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
editor.Monaco(
defaultValue=st.session_state.data,
language="json",
onChange=lazy(sync("data"))
)
with mui.CardActions:
mui.Button("Apply changes", onClick=sync())
# 2. 범프 차트 (Nivo Bump Chart)
with mui.Card(key="chart", sx={"display": "flex", "flexDirection": "column"}):
mui.CardHeader(title="Chart", className="draggable")
with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
nivo.Bump(
data=json.loads(st.session_state.data),
# 차트 파라미터 세팅...
)
처음에는 React 기반의 컴포넌트를 파이썬 코드 안으로 가져오는 개념을 이해하는 게 조금 어려웠다. 하지만 원리는 명확했다. 에디터 컴포넌트(Monaco)의 onChange 이벤트에 sync("data")를 묶어 Streamlit의 세션 상태(st.session_state.data)와 실시간으로 동기화시키고, 이를 옆에 있는 차트(Nivo Bump)가 바라보게 만드는 것이다.
lazy() 래퍼를 통해 의미 없는 리렌더링을 방지하는 최적화 패턴까지, 인터랙티브 대시보드의 기초 체력을 다지는데 큰 도움이 되었다.
이번 30일 챌린지를 진행하며 느낀 가장 큰 허들은 바로 “Streamlit의 작동 방식(실행 흐름)에 대한 이해”였다.
일반적인 웹이나 GUI 앱은 이벤트 기반으로 돌지만, 시스템의 입력값이 변할 때마다 Streamlit은 냅다 전체 스크립트를 재실행(Rerun)해버린다. 편리하지만 무거운 연산이 끼어있다면 극악의 성능 저하를 부를 수 있다.
이를 방지하기 위해 사용했던 핵심 무기들이 있다.
@st.cache_data 머신러닝 모델 로드나 무거운 CSV 파일 읽기에 데코레이터를 붙여 한 번 얹어둔 데이터를 재사용했다.st.session_state 버튼을 누르거나 페이지가 새로고침되어도 유지되어야 하는 상태값을 관리할 수 있었다. 폼(Form)을 활용한 일괄 제출(st.form_submit_button)도 렌더링을 최소화하는데 유용했다.이번 챌린지를 기점으로 파이썬 코드를 웹 기반 인터페이스로 단번에 띄우는 역량을 갖추게 되었다. 앞으로의 실제 장기 프로젝트나 업무 환경에서는 다음과 같이 적극 도입할 예정이다.
st.slider나 st.number_input으로 하이퍼파라미터를 입력받고 실시간으로 SHAP value나 모델 정확도를 렌더링하는 디버깅 포탈 제작.React나 Vue처럼 본격적인 클라이언트 사이드 고도화를 노린다면 한계가 있을 수 있겠지만, “데이터 툴”이나 “AI 모델 시연”이라는 도메인 한정으로는 Streamlit만큼 속도감 있고 훌륭한 생산성을 보여주는 프레임워크는 드물다. 기본기를 단단히 다진 만큼, 이제는 배운 것들을 응용하여 작은 나만의 도구들을 하나씩 찍어낼 일만 남았다.
2026년 2월 5일, AI 업계의 양대 산맥인 Anthropic과 OpenAI가 약속이나 한 듯 동시에 차세대 모델을 내놓았다. Claude Opus 4.6과 GPT-5.3-Codex가 그 주인공이다.
두 모델 모두 단순한 성능 개선을 넘어, “AI가 코딩을 도와주는 도구”에서 “스스로 생각하고 일하는 동료”로의 정체성 전환을 선언했다는 점에서 의미가 크다. 이번 포스팅에서는 각 모델의 핵심 변화를 분석하고, 이 동시 출시가 AI 생태계에 던지는 메시지를 정리해본다.
Anthropic은 Opus 4.5 출시 불과 2개월 만에 4.6 버전을 선보였다. 버전 넘버링은 소폭 상승이지만, 담고 있는 철학의 변화는 작지 않다.
이번 업데이트의 백미다. 기존 AI가 “만능 프리랜서”처럼 혼자 모든 일을 처리했다면, Opus 4.6은 “역할 분담이 된 팀”처럼 작동한다. 여러 에이전트가 각자의 전문 영역(기획, 코딩, 리뷰 등)을 맡아 병렬로 작업을 수행하고 조율한다. 이는 복잡한 대규모 프로젝트를 처리할 때 효율성과 정확도를 비약적으로 높여준다.
Opus 계열 최초로 100만 토큰을 지원한다(베타). Opus 4.5(20만 토큰) 대비 5배 늘어난 수치다. 책 수십 권, 혹은 거대한 레거시 코드베이스를 통째로 메모리에 올리고 작업할 수 있게 되었다.
“생각하는 시간”을 AI가 상황에 맞춰 스스로 조절한다. 간단한 질문에는 즉답을, 심층 분석이 필요한 과제에는 시간을 들여 추론한다. 개발자는 /effort 파라미터로 이 밸런스를 강제 조정할 수도 있다.
OpenAI는 “Codex”라는 브랜드를 통해 코딩 전문 모델의 입지를 굳혀왔다. 5.3 버전은 그 정점에 서 있다.
가장 충격적인 변화다. GPT-5.3-Codex는 자신의 개발 과정에 직접 참여했다. 훈련 데이터 정제, 디버깅, 배포 관리까지 AI가 수행했다. OpenAI 연구팀조차 “Codex가 자체 개발 가속화에 기여한 정도에 경탄했다”고 밝힐 정도다.
기존에는 코딩(Codex)과 추론(GPT-n)이 분리되어 있었다면, 5.3은 이를 하나로 합쳤다. 코드를 짜다가 기획서를 쓰고, 다시 엑셀 데이터를 분석하는 흐름이 하나의 에이전트 안에서 매끄럽게 이어진다.
이전 모델 대비 25% 빨라졌다. 특히 긴 호흡의 작업(long-running tasks)에서 체감 성능 향상이 뚜렷하며, 비용 효율성도 개선되었다.
두 모델을 나란히 놓고 보면 각자의 지향점이 명확히 드러난다.
| 비교 항목 | Claude Opus 4.6 | GPT-5.3-Codex |
|---|---|---|
| 핵심 철학 | 협업하는 에이전트 팀 | 스스로 진화하는 통합 엔지니어 |
| 컨텍스트 | 100만 토큰 | (기존 유지) |
| 강점 벤치마크 | ARC AGI 2 (68.8%), OSWorld (72.7%) | Terminal-Bench 2.0 (77.3%) |
| 주요 신기능 | 에이전트 팀, 적응형 사고 | 셀프 빌드, Deep Diff, 속도 25%↑ |
| 비즈니스 통합 | PPT 신규 통합, Excel 강화 | 유료 ChatGPT 플랜에 포함 |
| 안전성 | 제로데이 500+ 발견 | 보안 등급 “High” 최초 분류 |
두 모델 모두 지향하는 바가 같다. 단순히 코드를 “생성”해주는 도구를 넘어, 전체 워크플로우를 주도적으로 이끌어가는 “주체”가 되려 한다. Anthropic의 “에이전트 팀”이나 OpenAI의 “셀프 빌드” 모두 인간의 개입을 최소화하고 AI의 자율성을 극대화하는 방향이다.
이제 “어떤 모델이 더 좋아요?”라는 질문은 의미가 없다. 상황에 따라 골라 써야 한다.
흥미롭게도 모든 지표가 우상향은 아니다. Opus 4.6은 SWE-Bench Verified에서 전작보다 소폭 하락했고, GPT-5.3 역시 SWE-Bench Pro에서 유의미한 상승을 보여주지 못했다(+0.4%p). 모델이 복잡해지면서 특정 영역에서는 오히려 효율이 떨어지거나 “생각만 하다가” 엉뚱한 답을 내놓는 경우가 생길 수 있다.
“에이전트 팀”이 알아서 일하고, “셀프 빌드”로 스스로를 만든다. 결과물은 훌륭할지 몰라도, 그 중간 과정을 인간이 얼마나 투명하게 이해하고 통제할 수 있을지는 미지수다. 디버깅이 코드를 고치는 게 아니라, AI 에이전트의 “사고 과정”을 디버깅해야 하는 시대로 가고 있다.
| 모델 | 핵심 키워드 | 한 줄 평 |
|---|---|---|
| Claude Opus 4.6 | Agent Teams, 1M Context | “여러 명의 똑똑한 팀원을 한 번에 고용하는 효과” |
| GPT-5.3-Codex | Self-Build, Speed | “스스로를 설계한, 가장 빠르고 강력한 엔지니어” |
오늘은 Plotly의 인터랙티브 기능들을 본격적으로 다뤄봤다. 단순히 그래프를 그리는 것을 넘어서, 사용자가 직접 데이터를 조작하고 탐색할 수 있는 환경을 만드는 게 목표였다.
실습 데이터로는 Kaggle Netflix Movies and TV Shows 데이터셋을 사용했다.
Netflix 데이터는 인코딩 문제가 있어서 latin1으로 읽어야 한다. 그리고 불필요한 빈 컬럼들이 많아서 dropna()로 한 번에 정리해줬다.
import pandas as pd
import plotly.graph_objects as go
df = pd.read_csv('netflix_titles.csv', encoding='latin1')
# 비어있는 컬럼 전부 제거
df = df.dropna(axis=1, how='all')
처음에 26개였던 컬럼이 12개로 줄었다. 쓸모없는 컬럼을 미리 정리해두면 이후 작업이 훨씬 깔끔해진다.
Plotly 그래프 우측 상단에는 기본적으로 줌, 이동, 저장 등의 버튼이 있는 툴바가 있다. 이걸 모드 바(Mode Bar)라고 한다.
fig.show(config={...})로 모드 바를 원하는 대로 조정할 수 있다.
year_count = df.groupby('release_year')['title'].count().reset_index()
fig = go.Figure()
fig.add_trace(go.Bar(x=year_count['release_year'], y=year_count['title']))
fig.show(config={
'displayModeBar': True, # 모드 바 표시
'displaylogo': False, # Plotly 로고 숨기기
'modeBarButtonsToRemove': ['toImage', 'zoom2d'] # 특정 버튼 제거
})
제거할 수 있는 버튼 종류는 zoom2d, pan2d, zoomIn2d, zoomOut2d, toImage 등이 있다. 불필요한 버튼을 제거하면 사용자 경험이 훨씬 깔끔해진다.
연도별 Netflix 콘텐츠 수를 bar 차트로 그려봤다.
year_count = df.groupby('release_year')['title'].count().reset_index()
fig = go.Figure()
fig.add_trace(go.Bar(
x=year_count['release_year'],
y=year_count['title']
))
fig.show()
Movie와 TV Show를 각각 다른 trace로 표현했다. 필터링 후 각각 변수에 저장하고 trace를 두 개 추가하는 방식이다.
type_year = df.groupby(['release_year', 'type'])['title'].count().reset_index()
fig2 = go.Figure()
fig2.add_trace(go.Scatter(
x=type_year[type_year['type']=='Movie']['release_year'],
y=type_year[type_year['type']=='Movie']['title'],
name='Movie'
))
fig2.add_trace(go.Scatter(
x=type_year[type_year['type']=='TV Show']['release_year'],
y=type_year[type_year['type']=='TV Show']['title'],
name='TV Show'
))
fig2.show()
Scatter에서 mode='lines'만 추가하면 line 차트가 된다.
fig3 = go.Figure()
fig3.add_trace(go.Scatter(
x=type_year[type_year['type']=='Movie']['release_year'],
y=type_year[type_year['type']=='Movie']['title'],
name='Movie',
mode='lines'
))
fig3.add_trace(go.Scatter(
x=type_year[type_year['type']=='TV Show']['release_year'],
y=type_year[type_year['type']=='TV Show']['title'],
name='TV Show',
mode='lines'
))
fig3.show()
Plotly 공식문서의 Scientific Charts 섹션에서 Heatmap을 골랐다. 연도별 x 콘텐츠 타입별 콘텐츠 수를 색깔로 표현하기에 딱 맞는 차트다.
먼저 pivot()으로 데이터를 Heatmap에 맞는 형태로 변환한다.
heatmap_data = type_year.pivot(
index='type',
columns='release_year',
values='title'
)
fig = go.Figure()
fig.add_trace(go.Heatmap(
x=heatmap_data.columns, # 연도
y=heatmap_data.index, # Movie / TV Show
z=heatmap_data.values, # 콘텐츠 수 (색깔값)
colorscale='aggrnyl' # 공식문서에서 선택한 색상 스케일
))
fig.show()
colorscale은 Plotly 공식문서에서 원하는 걸 골라서 이름만 넣으면 된다. 2015년 이후 콘텐츠가 급격히 늘어난 게 색깔로 확연히 드러난다.
슬라이더란 전체 범주 중 특정 범위의 값을 조정하여 원하는 시점의 데이터만 볼 수 있게 해주는 기능이다. Plotly에서는 두 가지 방식으로 구현할 수 있다.
처음 개념을 이해하는 게 가장 어려웠다. 핵심은 이렇다:
모든 연도의 trace를 미리 다 그려두고, 전부 숨겨놓은 뒤, 슬라이더로 선택한 연도의 trace만 보이게 한다.
df_recent = df[df['release_year'] >= 2010]
years_recent = sorted(df_recent['release_year'].unique())
fig = go.Figure()
# 1단계: 연도별 trace를 전부 추가 (숨김 상태)
for year in years_recent:
year_data = df[df['release_year'] == year]
count = len(year_data)
fig.add_trace(go.Bar(
x=[year],
y=[count],
name=str(year),
visible=False # 전부 숨김
))
# 2단계: 각 연도별 step 생성
steps = []
for i, year in enumerate(years_recent):
step = dict(
method='update',
label=str(year),
args=[{'visible': [j == i for j in range(len(years_recent))]}]
)
steps.append(step)
# 3단계: 슬라이더 추가
fig.update_layout(sliders=[dict(steps=steps)])
fig.show()
[j == i for j in range(len(years_recent))] 이 부분이 핵심인데, 선택한 연도(i)에 해당하는 trace만 True, 나머지는 전부 False로 만들어주는 리스트다.
싱글 슬라이더보다 훨씬 간단하다. rangeslider_visible=True 한 줄이면 된다.
fig3.update_xaxes(
rangeslider_visible=True,
rangeslider=dict(
bgcolor='lightgray', # 슬라이더 배경색
thickness=0.3 # 슬라이더 두께 (0~1)
)
)
fig3.show()
그래프 하단에 범위를 드래그해서 원하는 구간만 확대해서 볼 수 있다. 시계열 데이터를 탐색할 때 특히 유용하다.
| 기능 | 메서드/옵션 | 용도 |
|---|---|---|
| 모드 바 설정 | fig.show(config={...}) |
툴바 버튼 추가/제거 |
| 로고 숨기기 | displaylogo=False |
Plotly 로고 제거 |
| 버튼 제거 | modeBarButtonsToRemove |
특정 버튼 숨기기 |
| Heatmap | go.Heatmap() |
2D 색깔 격자 차트 |
| 색상 스케일 | colorscale='...' |
Heatmap 색상 변경 |
| 싱글 슬라이더 | sliders=[dict(steps=...)] |
특정 값 선택 |
| 더블 슬라이더 | rangeslider_visible=True |
범위 선택 |
슬라이더 개념을 처음 접했을 때 “모든 trace를 미리 다 그려두고 숨긴다”는 발상이 낯설었다. 근데 이해하고 나니까 왜 이렇게 구현하는지 납득이 됐다. 인터랙티브 요소는 결국 사용자에게 데이터 탐색의 자유를 주는 것이고, 그 자유를 구현하는 방식이 이런 구조인 것이다.
Reference
데이터 시각화의 꽃은 뭐니 뭐니 해도 사용자가 직접 데이터를 탐색할 수 있는 인터랙티브(Interactive) 요소라고 생각한다. 오늘은 Kaggle World Happiness Report 데이터를 활용해서, Plotly의 updatemenus 기능으로 버튼과 드롭다운을 구현하고 이를 세밀하게 튜닝하는 방법을 정리해 봤다.
먼저 데이터를 불러오고 분석할 지표들을 정의한다.
import pandas as pd
import plotly.graph_objects as go
# 데이터 로드
df = pd.read_csv('world_happiness_report.csv')
# 1. 설정: 분석할 연도와 지표 정의
years = sorted(df['Year'].unique(), reverse=True)[:5] # 최근 5개년
metrics = {
'Happiness_Score': '행복 점수',
'Healthy_Life_Expectancy': '기대 수명',
'Social_Support': '사회적 지지'
}
metric_keys = list(metrics.keys())
드롭다운을 만들기 전에, 가장 기본이 되는 첫 화면 그래프를 그려야 한다. 초기 연도와 초기 지표를 선택해서 산점도(Scatter Plot)를 그린다.
initial_year = years[0]
initial_metric = metric_keys[0]
curr_df = df[df['Year'] == initial_year]
fig = go.Figure()
fig.add_trace(
go.Scatter(
x=curr_df['GDP_per_Capita'],
y=curr_df[initial_metric],
mode='markers',
text=curr_df['Country'],
marker=dict(
size=14,
color=curr_df[initial_metric],
colorscale='Electric',
showscale=True,
line=dict(width=1, color='White')
),
name=metrics[initial_metric]
)
)
updatemenus의 핵심은 method="update"다. 버튼을 클릭했을 때 데이터(x, y, text)를 새 데이터로 갈아끼우는 방식이다.
year_options = []
for year in years:
year_df = df[df['Year'] == year]
year_options.append(
dict(
method="update",
label=f"{year}년", # 라벨에 이모지 추가로 직관성 UP
args=[{
"x": [year_df['GDP_per_Capita']],
"y": [year_df[initial_metric]],
"text": [year_df['Country']]
}]
)
)
이번엔 탭(Tab) 메뉴처럼 생긴 버튼을 만들어보자. 여기서는 단순히 데이터만 바꾸는 게 아니라, 축 제목과 차트 제목까지 동적으로 변경해야 한다. args의 두 번째 인자로 레이아웃 업데이트 정보를 넘겨주면 된다.
metric_buttons = []
for key, name in metrics.items():
metric_buttons.append(
dict(
method="update",
label=name,
args=[
{"y": [curr_df[key]], "marker.color": [curr_df[key]]}, # 데이터 변경
{"yaxis": {"title": name}, "title": f"<b>GDP 대비 {name} 상관관계</b>"} # 레이아웃 변경
]
)
)
이제 만든 메뉴들을 적절한 위치에 배치해야 한다.
fig.update_layout(
template="plotly_dark",
title=dict(text=f"<b>GDP 대비 {metrics[initial_metric]} 상관관계</b>", x=0.5, font=dict(size=20)),
xaxis_title="1인당 GDP (Purchasing Power)",
yaxis_title=metrics[initial_metric],
margin=dict(t=120), # 상단 여백 확보 (메뉴 공간)
updatemenus=[
# 1. 드롭다운 배치 (상단 왼쪽)
dict(
type="dropdown",
buttons=year_options,
direction="down",
showactive=True,
x=0.0, xanchor="left", y=1.2, yanchor="top"
),
# 2. 버튼 배치 (상단 오른쪽)
dict(
type="buttons",
buttons=metric_buttons,
direction="right",
x=1.0, xanchor="right", y=1.2, yanchor="top",
bgcolor="rgba(255, 255, 255, 0.1)", # 투명도 있는 배경
font=dict(color="white")
),
]
)
fig.show()
margin: 메뉴가 차트 제목을 가리지 않도록 상단 여백(t=120)을 넉넉히 준다.xanchor, yanchor: 드롭다운은 왼쪽 끝, 버튼은 오른쪽 끝에 배치하여 균형을 맞췄다.Plotly의 updatemenus는 자바스크립트를 몰라도 파이썬만으로 훌륭한 인터랙티브 대시보드를 만들 수 있게 해준다.
| 기능 | 속성/값 | 설명 |
|---|---|---|
| 메뉴 타입 | type="dropdown" / "buttons" |
드롭다운 메뉴 또는 버튼 그룹 선택 |
| 동작 방식 | method="update" |
데이터와 레이아웃을 동시에 변경 |
| 데이터 변경 | args=[{data_dict}, ...] |
첫 번째 인자로 트레이스 데이터 변경 (x, y, marker.color 등) |
| 레이아웃 변경 | args=[..., {layout_dict}] |
두 번째 인자로 레이아웃 속성 변경 (title, yaxis 등) |
| 배치 | x, y, xanchor, yanchor |
메뉴의 위치 지정 (0~1 좌표계) |
단순히 정적인 그래프를 보여주는 것보다, 사용자가 직접 연도를 바꾸고 지표를 바꿔가며 데이터를 탐색하게 하면 분석의 깊이가 달라진다. 다음에는 슬라이더(Slider)를 연동해서 시계열 변화를 애니메이션으로 보여주는 것도 시도해봐야겠다.
Reference
지난 포스팅들에서는 그래프를 그리고 축을 다루는 법을 익혔다. 오늘은 시각화의 완성도를 높여주는 범례(Legend)와 템플릿(Template), 그리고 Pandas에서 Plotly를 바로 쓸 수 있게 해주는 Backend 설정까지 실습해봤다.
데이터는 중고차 가격 데이터인 bmw.csv를 사용했다.
import pandas as pd
import plotly.express as px
bmw = pd.read_csv("bmw.csv")
# 데이터 확인
print(bmw.shape)
print(bmw['model'].unique()[:5])
모델(model)과 변속기(transmission) 종류에 따른 가격 차이를 시각화해보자. 먼저 집계 데이터를 만든다.
# 각 모델/변속기별 평균 가격 집계
average_prices = bmw.groupby(['model', 'transmission'])['price'].mean().reset_index()
기본 범례는 오른쪽에 위치하지만, 그래프 공간을 넓게 쓰거나 디자인 요소를 더하고 싶을 때 위치를 바꿀 수 있다. update_layout의 legend 속성을 건드리면 된다.
fig = px.bar(average_prices, x='model', y='price', color='transmission', title='모델 변속기별 평균 가격')
# 그래프 레이아웃 상세 항목 설정
fig.update_layout(
xaxis_title='자동차 모델',
yaxis_title='평균 가격',
# 범례 커스텀
legend_title='변속기',
legend_orientation="h", # 가로(Horizontal) 배치
legend_yanchor="bottom",
legend_y=1.1, # 그래프 상단 바깥으로 이동
legend_xanchor="left",
legend_x=0.6,
legend_bgcolor="LightGray", # 배경색
legend_bordercolor="Gray", # 테두리 색
legend_borderwidth=2
)
fig.show()
legend_orientation="h": 범례를 가로로 눕혀서 상단이나 하단에 배치할 때 유용하다.legend_x, legend_y: 좌표값(0~1 정규화 좌표)을 이용해 아주 세밀한 위치 조정이 가능하다.Plotly는 잘 만들어진 내장 테마(Template)를 제공한다. template 인자 하나만 바꿔도 그래프의 느낌이 확 달라진다.
R의 시각화 라이브러리인 ggplot2 스타일이다. 회색 격자 배경이 특징이다.
fig = px.bar(
average_prices, x='model', y='price', color='transmission',
title='모델 변속기별 평균 가격_ggplot2',
template="ggplot2" # 템플릿 적용
)
# 레이아웃 설정 (범례 우측 배치)
fig.update_layout(
legend_orientation="v",
legend_x=1.02 # 그래프 오른쪽 바깥
)
fig.show()
어두운 배경의 대시보드에 넣을 때 딱이다.
fig = px.bar(
average_prices, x='model', y='price', color='transmission',
title='모델 변속기별 평균 가격_dark',
template="plotly_dark" # 다크 모드 적용
)
# 레이아웃 설정 (Navy 배경 범례)
fig.update_layout(
legend_bgcolor="Navy",
legend_bordercolor="DarkGray",
legend_borderwidth=2
)
fig.show()
이게 오늘 실습의 하이라이트다. Pandas의 기본 .plot()은 matplotlib 기반이라 인터랙티브하지 않다. 하지만 백엔드만 바꿔주면?
# 백엔드 설정: 이제부터 Pandas plot은 Plotly로 그려진다
pd.options.plotting.backend = 'plotly'
# groupby 후 바로 plot() 호출
fig = bmw.groupby('model')['price'].mean().plot(
kind='bar',
title='Pandas Backend로 그린 그래프'
)
fig.show()
import plotly.express를 안 해도 되고, px.bar(df, ...)처럼 인자를 따로 넘길 필요도 없다. 그냥 익숙한 Pandas 문법 뒤에 .plot()만 붙이면 줌, 팬, 툴팁이 되는 Plotly 그래프가 튀어나온다. EDA(탐색적 데이터 분석) 단계에서 엄청나게 편하다.
오늘은 시각화의 디테일과 편의성을 챙기는 팁들을 정리했다.
| 기능 | 속성/코드 | 용도 |
|---|---|---|
| 범례 방향 | legend_orientation="h" |
가로 배치 (공간 효율) |
| 범례 위치 | legend_x, legend_y |
미세한 위치 조정 |
| 범례 스타일 | legend_bgcolor/border |
배경색 및 테두리 |
| 템플릿 | template="..." |
ggplot2, plotly_dark, seaborn 등 테마 적용 |
| 백엔드 설정 | pd.options.plotting.backend = 'plotly' |
Pandas 문법으로 Plotly 사용 |
특히 Pandas Backend 설정은 실무에서 정말 유용하게 쓸 것 같다. 간단한 확인용 그래프는 이걸로, 보고서용 고퀄리티 그래프는 graph_objects로 그리는 전략으로 가야겠다.
Reference
시각화의 퀄리티는 결국 ‘디테일’에서 결정된다고 생각한다. 오늘은 Plotly의 Graph Objects를 활용해서 축과 그리드를 내 마음대로 커스터마이징하고, make_subplots로 복잡한 레이아웃을 구성하는 방법을 정리해봤다.
실습 데이터로는 Kaggle Global Temperature Dataset을 사용했고, 서울, 도쿄, 베이징의 온도 변화를 시각화해봤다.
1849년부터 2013년까지의 전 세계 주요 도시 온도 데이터다.
import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots
df = pd.read_csv('GlobalLandTemperatures_GlobalLandTemperaturesByMajorCity.csv')
# 도시별 데이터 필터링 및 날짜 변환
def get_city_data(city_name):
temp = df[df['City'] == city_name].copy()
temp['dt'] = pd.to_datetime(temp['dt'])
return temp
seoul_df = get_city_data('Seoul')
tokyo_df = get_city_data('Tokyo')
beijing_df = get_city_data('Peking')
기본 그래프는 깔끔하지만 어딘가 심심하다. 축 스타일을 명확하게 잡아서 ‘전문가스러운’ 느낌을 내보자.
fig = go.Figure()
fig.add_trace(go.Scatter(x=seoul_df['dt'], y=seoul_df['AverageTemperature'], mode='lines', name='Seoul'))
# X축, Y축 스타일 동시 설정
fig.update_xaxes(showline=True, linewidth=2, linecolor='black', mirror=True)
fig.update_yaxes(showline=True, linewidth=2, linecolor='black', mirror=True)
fig.show()
mirror=True: 반대편(오른쪽/위쪽)에도 축선을 그려서 그래프를 액자처럼 감싸준다. 훨씬 안정감 있어 보인다.데이터 값을 더 정확하게 읽기 위해 보조 그리드(Minor Grid)까지 추가해봤다.
# 그리드 스타일 예시
fig.update_xaxes(
showgrid=True, gridwidth=1, gridcolor='lightgray', griddash='dot', # 주요 그리드
minor_showgrid=True, minor_gridwidth=0.5, minor_gridcolor='lightblue', minor_griddash='dash' # 보조 그리드
)
griddash='dot': 실선 대신 점선으로 그리드를 그려서 데이터에 집중할 수 있게 했다.여러 그래프를 한 화면에 배치할 때는 make_subplots가 필수다.
서울과 도쿄의 온도를 나란히 비교해보자.
# 1행 2열 구조 생성
fig = make_subplots(
rows=1, cols=2,
subplot_titles=('Tokyo Temperature', 'Seoul Temperature'),
shared_yaxes=True # Y축 공유 (비교 용이)
)
# add_trace시 row, col 지정 필수
fig.add_trace(go.Scatter(x=tokyo_df['dt'], y=tokyo_df['AverageTemperature'], name='Tokyo'), row=1, col=1)
fig.add_trace(go.Scatter(x=seoul_df['dt'], y=seoul_df['AverageTemperature'], name='Seoul'), row=1, col=2)
단순 격자가 아니라, 한 그래프가 두 칸을 차지하게 하려면 specs 옵션을 써야 한다.
# 2행 2열 구조, 첫 번째 행은 통째로 쓰기(colspan=2)
fig = make_subplots(
rows=2, cols=2,
specs=[[{"colspan": 2}, None], # 1행: 2칸 병합
[{}, {}]], # 2행: 2개 분리
subplot_titles=('Seoul (Total)', 'Tokyo', 'Beijing')
)
# Trace 추가 생략 (위치만 맞춰주면 됨)
엑셀 셀 병합하듯이 colspan을 주면 되는데, 뒤에 None을 넣어줘야 하는 게 포인트다.
오늘 실습한 핵심 메서드들이다.
| 기능 | 메서드/옵션 | 용도 |
|---|---|---|
| 축선 설정 | showline, linewidth |
축 선 표시 및 두께 설정 |
| 테두리 | mirror=True |
그래프 반대편에도 축 표시 |
| 그리드 | showgrid, minor_showgrid |
주요/보조 격자 표시 |
| 분할 차트 | make_subplots() |
여러 그래프 레이아웃 생성 |
| 축 공유 | shared_yaxes=True |
서브플롯 간 Y축 스케일 통일 |
| 셀 병합 | specs=[{"colspan": 2}] |
서브플롯 공간 병합 |
이 정도만 자유자재로 다뤄도 웬만한 시각화 요구사항은 다 맞출 수 있을 것 같다. 다음엔 상호작용(Interactive) 기능을 좀 더 파봐야겠다.
Reference
오늘은 Plotly의 graph_objects를 활용한 데이터 시각화 실습을 진행했다. 보통은 plotly.express가 편해서 많이 쓰지만, 디테일한 커스터마이징이 필요한 순간에는 결국 저수준 API인 graph_objects를 건드려야 한다.
이번 실습에서는 Kaggle Pokemon 데이터셋을 사용해서, 피규어 생성부터 축 조작까지 하나씩 뜯어보며 정리했다.
먼저 필요한 라이브러리와 데이터를 불러온다. 포켓몬 데이터는 HP, 공격(Attack), 방어(Defense) 등 수치형 데이터가 많아 시각화 연습하기 딱 좋다.
import pandas as pd
import plotly.graph_objects as go
df = pd.read_csv('Pokemon.csv')
graph_objects의 핵심은 빈 도화지(Figure)를 만들고, 그 위에 그림(Trace)을 하나씩 얹는 방식이다.
fig = go.Figure()
# 첫 번째 Trace: 공격력 vs 방어력
fig.add_trace(go.Scatter(
x=df['Attack'],
y=df['Defense'],
mode='markers',
name='Attack vs Defense'
))
# 두 번째 Trace: 체력 vs 스피드
fig.add_trace(go.Scatter(
x=df['HP'],
y=df['Speed'],
mode='markers',
name='HP vs Speed'
))
fig.show()
이렇게 하면 하나의 그래프 안에 두 종류의 상관관계가 동시에 표현된다. 범례(Legend)를 클릭해서 보고 싶은 데이터만 껐다 킬 수 있는 게 Plotly의 장점이다.
이미 그려진 Trace들의 스타일을 일괄적으로, 혹은 선택적으로 바꾸고 싶을 때 update_traces를 쓴다.
# 'Attack vs Defense' Trace만 골라서 초록색으로 변경
fig.update_traces(
marker=dict(size=10, opacity=0.6, color='green'),
selector=dict(name='Attack vs Defense')
)
selector 옵션이 꿀기능이다. 이름을 지정해주면 해당 Trace만 콕 집어서 수정할 수 있다.
그래프의 완성도는 축 설정에서 나온다. 범위, 제목, 그리드 등을 세밀하게 조정해보자.
# X축 설정
fig.update_xaxes(
range=[0, 200], # 범위 고정
title_text="Attack & HP Stats", # 축 제목
showgrid=True, # 그리드 표시
gridwidth=1,
gridcolor='lightgray'
)
# Y축 설정 (숨김 처리 예시)
fig.update_yaxes(
range=[0, 150],
title_text="Defense & Speed Stats",
showgrid=False,
visible=False # 아예 축을 안 보이게 할 수도 있다
)
특정 구간만 집중해서 보여주거나, 깔끔한 디자인을 위해 축을 숨겨야 할 때 유용하다.
plotly.express가 ‘알아서 잘 딱 깔끔하게’ 그려준다면, graph_objects는 ‘내가 원하는 대로’ 그릴 수 있게 해준다.
| 기능 | 메서드 | 용도 |
|---|---|---|
| 객체 생성 | go.Figure() |
빈 그래프 객체 생성 |
| 데이터 추가 | add_trace() |
산점도, 선 등 데이터 레이어 추가 |
| 스타일 변경 | update_traces() |
마커 크기, 색상 등 수정 |
| 선택 수정 | selector |
특정 Trace만 골라서 수정 |
| 축 설정 | update_xaxes/yaxes |
범위, 제목, 그리드 등 축 옵션 제어 |
디테일에 익숙해지면 시각화가 훨씬 재밌어진다. 다음에는 더 복잡한 서브플롯(Subplots)도 다뤄봐야겠다.
Reference
지난 포스팅들에 이어, 이번에는 Kaggle의 Walmart Sales Dataset을 활용해 실전 전처리를 진행해봤다. 데이터 로드부터 필터링, 병합까지 데이터 분석의 가장 기초가 되는 과정을 정리해 본다.
분석의 시작은 언제나 데이터의 크기와 구성을 확인하는 것이다.
import pandas as pd
# 데이터셋 로드
df = pd.read_csv('Walmart_Sales.csv')
# 데이터셋 크기 확인 (행, 컬럼)
print(df.shape)
# (6435, 8)
# 데이터 정보 및 결측치 확인
print(df.info())
확인 결과 총 6,435개의 행과 8개의 컬럼으로 구성되어 있다. 다행히 결측치(Null)는 없었고, 데이터 타입은 float64, int64, object(Date)로 섞여 있다.
기존 데이터에서 필요한 정보를 뽑아내거나 불필요한 컬럼을 정리하는 과정이다.
날짜(Date) 컬럼에서 연도만 따로 보고 싶어서 슬라이싱을 통해 새로운 컬럼을 만들었다.
# Date 컬럼 예시: '12-02-2012'
# 뒤에서 4자리만 잘라서 'Year' 컬럼 생성
df['Year'] = df['Date'].str.slice(-4)
분석에 필요 없는 컬럼은 pop()을 사용해 제거했다. pop()은 컬럼을 삭제하면서 그 값을 반환해주니, 필요하다면 변수에 저장해 둘 수도 있다.
# 'Date' 컬럼 제거
dates = df.pop('Date')
원본 데이터를 건드리지 않고 안전하게 작업하기 위해 Deep Copy를 습관화해야 한다.
# 원본 데이터와 물리적으로 분리된 복사본 생성
df_copy = df.copy(deep=True)
deep=True를 안 쓰면 껍데기만 복사돼서, 복사본을 수정했는데 원본이 같이 바뀌는 대참사가 일어날 수 있다.
공휴일이 아닌 날(평일)의 데이터만 보고 싶어서 필터링을 걸었다.
# Holiday_Flag가 0인(공휴일 아님) 데이터만 추출
non_holiday_df = df_copy[df_copy['Holiday_Flag'] == 0]
실무에서는 지점별로 엑셀 파일이 따로 오는 경우가 많다. 이를 시뮬레이션하기 위해 데이터를 쪼갰다가 다시 합쳐봤다.
# 지점(Store) 번호에 따라 데이터 분리
store1 = df[df['Store'] == 1]
store2 = df[df['Store'] == 2]
store3 = df[df['Store'] == 3]
pd.concat()을 쓰면 리스트에 담긴 데이터프레임들을 위아래로(수직) 붙여준다.
# 지점별 데이터 합치기
combined_df = pd.concat([store1, store2, store3])
# 중복 데이터 제거 (혹시 모를 중복 방지)
combined_df = combined_df.drop_duplicates(subset=['Store', 'Date'])
이번 실습에서 사용한 핵심 메서드들이다.
| 기능 | 메서드 | 용도 |
|---|---|---|
| 데이터 로드 | pd.read_csv() |
CSV 파일 불러오기 |
| 정보 확인 | df.info(), df.shape |
타입, 결측치, 크기 확인 |
| 컬럼 추출/삭제 | df.pop() |
컬럼 삭제 및 반환 |
| 깊은 복사 | df.copy(deep=True) |
원본 보존하며 복사 |
| 데이터 결합 | pd.concat() |
여러 데이터프레임 수직 병합 |
| 중복 제거 | drop_duplicates() |
중복된 행 제거 |
직접 데이터를 만져보니 copy(deep=True)의 중요성을 다시 한번 느꼈다. 다음 포스팅에서는 시각화 라이브러리를 써서 이 데이터들을 그래프로 그려봐야겠다.
Reference
Pandas 학습으로 정렬과 병합을 정리했다. 이번에도 실제 데이터로 해봤는데, 1972년부터 2025년까지의 월마트(WMT) 주가 데이터를 사용했다.
데이터가 많을수록 원하는 순서로 정렬하는 게 분석의 시작이다.
특정 컬럼 값 기준으로 정렬할 때 쓴다. 거래량이 가장 많았던 날을 찾을 때:
# 거래량 기준 내림차순 정렬
wmt_sorted = df.sort_values(by='volume', ascending=False)
시계열 데이터가 뒤섞여 있을 때 날짜순으로 재정렬하는 데 쓴다.
# 날짜(Index) 기준 오름차순 정렬
wmt_timeline = df.sort_index(ascending=True)
정렬 후 상위 몇 개 뽑을 때 head() 써도 되지만, nlargest가 더 직관적이다.
# 월마트 역대 최고가(Adj Close) TOP 5
top5_prices = df['adj_close'].nlargest(n=5)
# 월마트 역대 최저가(Adj Close) BOTTOM 5
bottom5_prices = df['adj_close'].nsmallest(n=5)
월마트 성장 추이를 빠르게 확인하는 데 유용하다.
단순 합치기가 아니라 “두 데이터 중 더 큰 값 선택” 같은 로직을 적용해서 합칠 때 쓴다.
# 두 시리즈 비교해서 더 큰 값 선택
def take_larger(s1, s2):
return s1 if s1.sum() > s2.sum() else s2
# 시가(Open)와 종가(Close) 중 더 높은 값으로 구성
combined_highs = df['open'].combine(df['close'], max)
combine_first()를 쓰면 첫 번째 데이터의 NaN을 두 번째 데이터 값으로 채울 수 있다.
서로 다른 데이터프레임을 인덱스 기준으로 옆으로 붙일 때 쓴다. 주가 데이터와 거래량 데이터를 따로 관리하다가 합칠 때 유용하다.
# 인덱스(Date)가 같은 두 데이터프레임 합치기
# how='inner', 'outer', 'left', 'right' 옵션으로 병합 방식 결정
full_data = price_df.join(volume_df, how='inner')
SQL의 JOIN과 가장 유사하다. 공통된 컬럼을 기준으로 데이터를 병합한다.
# 'Date' 열을 기준으로 주가 데이터와 외부 경제 지표 데이터 합치기
merged_df = pd.merge(df, economy_indices, on='Date', how='left')
merge는 중복 키 처리나 다양한 병합 방식(on, left_on, right_on)을 지원해서 복잡한 데이터 분석에서 가장 많이 쓰게 된다.
| 기능 | 메서드 | 용도 |
|---|---|---|
| 값 기준 정렬 | sort_values() |
특정 컬럼 값으로 정렬 |
| 인덱스 기준 정렬 | sort_index() |
인덱스(날짜 등)로 정렬 |
| 상위/하위 추출 | nlargest(), nsmallest() |
TOP N, BOTTOM N 추출 |
| 함수 기반 결합 | combine() |
커스텀 로직으로 합치기 |
| 인덱스 기반 병합 | join() |
인덱스 기준으로 옆으로 붙이기 |
| 키 기반 병합 | merge() |
공통 컬럼 기준으로 합치기 (SQL JOIN) |
이걸로 Pandas 기초 잡은 것 같다. 다양한 데이터를 만져보며 익숙해 지는게 관건일 듯.
데이터 출처: Kaggle - Walmart Stock Data 2025
]]>지난번에 정리한 Pandas 기본 연산에 이어서, 이번엔 rolling()을 실제 데이터에 적용해봤다. 마침 Kaggle에 엔비디아(NVDA) 주가 데이터가 있길래 이걸로 이동평균선을 직접 만들어봤다.
Kaggle의 NVIDIA 일일 주가 데이터(NVIDIA_STOCK.csv)를 사용했다. 수정 종가(Adj Close) 기준으로 분석 진행.
import pandas as pd
df = pd.read_csv('NVIDIA_STOCK.csv', index_col='Date', parse_dates=True)
adj_close = df['Adj Close']
주가는 일간 변동이 심해서 그대로 보면 추세 파악이 어렵다. rolling()으로 특정 기간 평균을 구하면 노이즈가 줄어들어서 흐름이 보인다.
# 5일 이동평균 (단기)
sma5 = adj_close.rolling(window=5).mean()
# 20일 이동평균 (중기)
sma20 = adj_close.rolling(window=20).mean()
window=20이면 현재 행 포함 과거 20개 데이터의 평균을 계산한다.
실제로 돌려보니까 파라미터 설정에 따라 결과가 꽤 달라졌다.
window=20이면 처음 19개 행은 데이터가 부족해서 NaN이 된다. min_periods를 설정하면 최소 몇 개부터 계산할지 정할 수 있다.
# 데이터 1개부터 계산 시작
sma20_filled = adj_close.rolling(window=20, min_periods=1).mean()
초기 데이터 손실 없이 전체 구간을 채울 수 있어서 유용하다.
기본값은 현재 시점 기준 과거 데이터만 보는데, center=True로 하면 현재를 중심으로 앞뒤 데이터를 같이 본다.
# 현재 시점 기준 전후 데이터 평균
sma20_centered = adj_close.rolling(window=20, center=True).mean()
실제로 차트에 그려보니 center=True 쪽이 추세 전환점이 더 제때 잡히더라. 후행성(lagging) 문제가 좀 줄어든다.
rolling()은 윈도우 내 모든 데이터를 동일하게 취급한다. 근데 주가 분석에서는 “최근 데이터가 더 중요하다”는 관점이 있다. 이럴 때 ewm()을 쓴다.
최근 데이터에 높은 가중치, 오래된 데이터는 가중치가 지수적으로 감소한다.
# span=20: 20일 기준 지수가중평균
ewm20 = adj_close.ewm(span=20).mean()
ewm이 최근 변동에 더 민감하게 반응한다. 추세 전환이 빠를 때 유리하다.rolling은 윈도우가 다 차야 계산되는데, ewm은 데이터 1개부터 바로 계산 가능하다. min_periods 설정 없이도 초반 손실이 적다.실제로 그려보니 rolling(20)보다 ewm(span=20)이 최근 상승세를 더 밀착해서 따라간다.
이동평균 계산하는 두 가지 방법을 정리하면:
rolling(): 윈도우 내 균등 가중. 안정적인 추세 확인용.ewm(): 최근 데이터 가중. 변화에 민감하게 반응해야 할 때.실제 주가 데이터에 둘 다 적용해보니까 차이가 확실히 느껴진다. 상황에 따라 골라 쓰면 될 듯.
다음엔 정렬(sort) 관련 내용 정리할 예정.
데이터 출처: Kaggle - NVIDIA Stock Data
]]>