mo.ui 위젯 기초 (slider·dropdown·text)

PART 01 Ch 04에서 ipywidgets의 interact 함수가 marimo에서 동작하지 않는다고 이야기했습니다. 이 챕터가 그 약속을 지키는 자리입니다. marimo에서는 위젯을 어떻게 만들고, 값을 어떻게 읽는지를 가장 기본적인 예시부터 살펴봅니다.

위젯을 만드는 방법

mo.ui 네임스페이스에 모든 기본 위젯이 들어 있습니다. 슬라이더 하나를 만드는 코드는 이렇습니다.

import marimo as moslider = mo.ui.slider(0, 10, value=5, label="값을 선택하세요")slider

셀 마지막 줄에 위젯 변수를 적으면 에디터에서 위젯이 렌더링됩니다. 슬라이더를 움직여보면 화면에 슬라이더가 나타나고 손잡이를 끌 수 있습니다. 현재 선택된 값은 slider.value로 읽습니다.

slider.value

위젯은 항상 .value 속성으로 현재 값을 제공합니다. 이것이 marimo UI 위젯 전체를 관통하는 단 하나의 규칙입니다.

기본 위젯 목록

자주 쓰는 위젯을 정리합니다. 모두 mo.ui.* 아래에 있습니다.

슬라이더 계열

import marimo as mo# 정수 범위 슬라이더 (0 이상 100 이하, 기본값 50)slider = mo.ui.slider(0, 100, value=50, label="임계값")# 범위 슬라이더 (양 끝 값을 선택하는 두 손잡이)range_slider = mo.ui.range_slider(0, 100, value=(20, 80))

slider.value는 정수 하나를 반환합니다. range_slider.value는 (시작, 끝) 형태의 튜플을 반환합니다.

선택 계열

import marimo as mo# 드롭다운 (문자열 목록)dropdown = mo.ui.dropdown(["사과", "바나나", "포도"], value="사과", label="과일 선택")# 라디오 버튼 (옵션 중 하나 선택)radio = mo.ui.radio(["낮음", "중간", "높음"], value="중간", label="난이도")# 멀티 선택 (여러 개 선택 가능)multi = mo.ui.multiselect(["Python", "R", "Julia", "Scala"], label="언어 선택")

dropdown.value와 radio.value는 선택된 항목을 문자열로 반환합니다. multi.value는 선택된 항목을 리스트로 반환합니다.

텍스트 계열

import marimo as mo# 한 줄 텍스트 입력text = mo.ui.text(value="", label="이름을 입력하세요", placeholder="홍길동")# 여러 줄 텍스트 입력text_area = mo.ui.text_area(label="메모", rows=4)

숫자 입력

import marimo as mo# 숫자 입력 (최솟값, 최댓값, 기본값, 증가 단위)number = mo.ui.number(1, 100, value=10, step=1, label="반복 횟수")

참/거짓 선택

import marimo as mo# 체크박스checkbox = mo.ui.checkbox(label="고급 옵션 활성화", value=False)

checkbox.value는 True 또는 False를 반환합니다.

버튼

import marimo as mobutton = mo.ui.button(label="실행")run_button = mo.ui.run_button(label="계산 시작")

button.value는 버튼을 클릭한 횟수를 정수로 반환합니다. run_button은 클릭 시점에 한 번만 다운스트림을 재실행하는 특수 버튼입니다.

날짜 및 파일

import marimo as mo# 날짜 선택기date = mo.ui.date(label="날짜 선택")# 파일 업로드file_upload = mo.ui.file(label="파일을 선택하세요")

데이터프레임과 테이블

데이터프레임을 다루는 위젯도 있습니다. 이 위젯들은 PART 04에서 자세히 다룹니다.

import marimo as moimport pandas as pddf = pd.DataFrame({"이름": ["Alice", "Bob"], "점수": [90, 85]})# 인터랙티브 테이블 (행 선택 가능)table = mo.ui.table(df)# 필터·정렬 가능한 데이터프레임 뷰dataframe_view = mo.ui.dataframe(df)

위젯을 렌더링하는 방법

위젯을 화면에 표시하려면 셀의 마지막 표현식으로 위젯 변수를 놓습니다.

import marimo as moslider = mo.ui.slider(0, 10, value=5, label="x")slider

여러 위젯을 한 셀에서 동시에 표시하는 방법은 PART 07에서 레이아웃 API와 함께 다룹니다. 지금은 위젯 하나를 한 셀에 표시하는 것부터 시작합니다.

.value로 현재 값 읽기

위젯이 렌더링된 상태에서 슬라이더를 움직이거나 드롭다운에서 항목을 고르면, 위젯.value가 새 값으로 바뀝니다. 다른 셀에서 이 .value를 참조하면 위젯 조작 시 그 셀이 자동으로 재실행됩니다. 이 부분은 Ch 02에서 자세히 다룹니다.

아래는 슬라이더 값을 그 자리에서 바로 확인하는 가장 단순한 예시입니다.

import marimo as mon = mo.ui.slider(1, 20, value=5, label="n")n

# 위의 셀(n을 정의하는 셀)을 먼저 실행한 뒤 이 셀을 봅니다.# n.value를 참조하므로, 슬라이더를 움직이면 이 셀이 자동으로 재실행됩니다.result = [i ** 2 for i in range(n.value)]result

두 셀이 두 개의 DAG 노드로 연결됩니다. n 위젯을 움직이는 것은 n.value라는 변수가 바뀌는 것과 같습니다. 변수 변경은 의존 셀 재실행을 유발합니다.

위젯 인자 정리

생성자 인자 중 자주 쓰이는 것을 정리합니다.

on_change는 Ch 02에서 mo.state와 함께 사용하는 방법을 다룹니다.

정리

• mo.ui.* 네임스페이스에 슬라이더, 드롭다운, 텍스트, 체크박스 등 기본 위젯이 있습니다.
• 위젯을 셀 마지막 표현식으로 놓으면 에디터에서 렌더링됩니다.
• 모든 위젯은 .value로 현재 값을 읽습니다.
• 위젯을 전역 변수에 할당해야 다른 셀에서 .value를 참조할 수 있습니다.