앱 요구사항과 화면 설계
PART 06에서 만든 EDA 노트북과 이 파트에서 만들 데이터 앱은 같은 데이터를 다루지만 목적이 다릅니다. EDA 노트북은 분석가가 데이터를 탐색하는 도구입니다. 중간 결과, SQL 출력 테이블, 집계 단계가 모두 화면에 보입니다. 데이터 앱은 분석 결과를 소비하는 사람을 위한 도구입니다. 사용자는 위젯을 조작하고 차트를 볼 뿐, 코드가 어떻게 돌아가는지 알 필요가 없습니다.
이 차이를 먼저 명확히 하는 것이 앱 설계의 출발점입니다.
만들 앱 정의
온라인 소매점 판매 현황 대시보드를 만듭니다. 마케팅 팀원이나 운영 담당자가 하루에 몇 번씩 열어보는 앱을 상상합니다.
사용자 시나리오는 이렇습니다.
운영 담당자 지은 씨는 아침에 앱을 열어 전체 현황을 확인합니다. 전자기기 카테고리가 유독 저조해 보여서 드롭다운을 "전자기기"로 바꿉니다. 지역별 차트가 즉시 갱신됩니다. 서울 지역 매출이 눈에 띄게 낮습니다. 지은 씨는 이 사실을 팀장에게 슬랙으로 공유합니다.
이 시나리오에서 지은 씨는 코드를 보지 않습니다. 코드가 보여서는 안 됩니다. 드롭다운과 슬라이더만 조작합니다. 그리고 결과는 빠르게 갱신되어야 합니다.
화면 구역 설계
앱 화면을 두 구역으로 나눕니다.
왼쪽 사이드바는 입력 영역입니다. 카테고리 드롭다운, 최소 금액 슬라이더, 지역 다중 선택이 위에서 아래로 놓입니다. 너비는 전체의 약 25%로 좁게 잡습니다.
오른쪽 메인 영역은 결과 영역입니다. 상단에 요약 지표(총 주문 수, 총 금액, 평균 금액)를 두고, 그 아래에 화면 선택 위젯과 차트를 배치합니다. 화면 선택은 라디오 버튼으로 카테고리, 지역, 요일 세 가지 차트 중 하나를 선택합니다.
편집 모드와 앱 모드의 차이
marimo에는 두 가지 실행 방식이 있습니다.
# 편집 모드 — 코드 셀이 보임, 개발자용marimo edit app.py# 앱 모드 — 위젯만 보임, 사용자용marimo run app.py편집 모드에서는 모든 셀의 코드가 왼쪽에 보이고 출력이 오른쪽에 보입니다. 셀을 클릭해서 수정할 수 있습니다. 앱 모드에서는 코드가 완전히 숨겨집니다. 셀 출력만 화면에 표시됩니다. 사용자는 위젯을 조작할 수 있지만 코드를 볼 수도, 수정할 수도 없습니다.
이 차이가 레이아웃 설계에 영향을 줍니다. 편집 모드에서는 위젯 셀이 코드와 함께 화면에 순서대로 나타납니다. 앱 모드에서는 셀 출력만 보이므로, mo.hstack과 mo.vstack으로 구성한 레이아웃이 그대로 앱 화면이 됩니다.
노트북 구조 계획
프로젝트 파일은 app.py입니다. marimo edit app.py로 편집을 시작합니다. PART 06의 eda_project.py와는 별개 파일입니다. 두 파일이 같은 합성 데이터를 생성하지만 독립적으로 동작합니다.
챕터가 진행되면서 셀을 추가하는 방식으로 진행합니다. 셀 구성의 전체 그림을 미리 확인합니다.
셀 1: 라이브러리 임포트셀 2: 합성 데이터 생성 (PART 06과 동일한 고정 시드)셀 3: 입력 위젯 (카테고리·금액·지역)셀 4: 반응형 SQL 필터 (filtered_df)셀 5: 요약 지표 계산셀 6: 화면 선택 위젯 (라디오 버튼)셀 7: 카테고리별 차트셀 8: 지역별 차트셀 9: 요일별 차트셀 10: 선택된 화면에 따른 차트 분기셀 11: 사이드바 패널 구성셀 12: 메인 패널 구성셀 13: 전체 레이아웃Ch 02에서 셀 1부터 셀 6까지, Ch 03에서 셀 7부터 셀 13까지 완성합니다.
정리
- 노트북은 분석가의 탐색 도구이고, 앱은 결과를 소비하는 사람을 위한 도구입니다. 같은 데이터를 다루지만 목적이 다릅니다.
- 앱 화면은 입력 영역(사이드바)과 결과 영역(메인)으로 나눕니다.
mo.hstack의widths파라미터로 비율을 지정합니다. - 편집 모드(
marimo edit)에서는 코드가 보이고, 앱 모드(marimo run)에서는 셀 출력만 보입니다. 레이아웃 셀의 출력이 곧 앱 화면이 됩니다. app.py하나로 완결됩니다. PART 06의eda_project.py에서 가져오는 코드는 없습니다.