marimo 인터랙티브 요소 — UI 위젯과 셀 값 연결하기

노트북이 계산 결과를 보여주는 수준을 넘어, 사용자가 직접 값을 바꿔보는 도구가 되려면 인터랙티브 요소가 필요해요. marimo의 UI 요소는 셀의 반응형 실행과 자연스럽게 연결돼요. 위젯을 만들면 그 값 자체가 파이썬 객체로 셀에 흘러들어가고, 다른 셀에서 그 값을 참조하면 자동으로 다시 계산되죠.

출처: https://docs.marimo.io/guides/interactivity/

UI 요소는 '값'이다

marimo에서 슬라이더 하나는 단순한 위젯이 아니라 mo.ui.slider로 만든 객체예요. 이 객체의 .value에 현재 값이 들어 있어요. 여기서 중요한 건 UI 요소를 셀 변수로 할당하면, 그 요소가 곧 파이썬 값처럼 취급된다는 점이에요.

import marimo as mo

slider = mo.ui.slider(1, 100, value=50)
slider

그리고 slider를 참조하는 다른 셀은 사용자가 슬라이더를 움직일 때마다 자동으로 다시 실행돼요.

값이 어떻게 흐르나

사용자는 위젯으로 값을 바꾸고, 그 value가 반응형 상태로 셀들에 전파됩니다. 예를 들어 슬라이더 값으로 데이터를 필터링하는 셀이 있다면, 슬라이더를 조절하는 즉시 필터링 결과가 갱신돼요. 이게 marimo가 대시보드·데모에 강한 이유예요.

# 이 셀은 slider 값이 바뀔 때마다 다시 계산돼요
filtered = df[df["score"] >= slider.value]

UI 요소 종류

mo.ui에는 슬라이더, 텍스트 입력, 체크박스, 버튼, 드롭다운, 데이터프레임 뷰, 테이블, 파일 업로더 등 다양하고 풍부한 요소가 있어요. 각각이 셀 변수에 할당돼 반응형 값으로 쓰이는 구조는 같아요.

사용자 정의 UI

mo.ui.custom 같은 API로 여러 요소를 묶어 나만의 복합 컨트롤을 만들 수도 있어요. 기본 요소만으로 부족할 때 확장해요.

더 알아보기

UI 요소를 앱처럼 화면에 배치하는 방법과 mo.ui의 전체 목록은 공식 Interactive elements 문서에서 확인할 수 있어요.