Graph EXPLORE · MONITOR
- 패턴·추세·이상치 인지 (시간축·분포)
- 한눈에 "괜찮은가?" 답 가능
- 임원·외부 공유에 강함 (PNG·PPT)
- 인지 부하 낮음, 정독 불필요
- 약점 — 개별 row 액션 불가, 정렬·검색 한계, 정확한 숫자 직독 어려움
그래프 vs 테이블 — 어느 쪽이 더 좋은가
C4 답장 패턴 학습 루프의 4가지 핵심 화면을 그래프 기반 과 테이블 기반 으로 비교 분석하고, 한국 수출 기업 매니저 페르소나에 최적화된 2026 UI 패턴을 권장.
결론
그래프로 보고 → 테이블로 처리 하는 2-패널 hybrid 가 2026 표준.
단일 선택을 강요하면 테이블 우세. 답장 학습 루프의 본질은 매일 reply 를 처리(act) 하는 워크플로이고, 그래프는 회고적 review 용이라 보조 역할이다. Linear · Plausible · Posthog · Vercel Observability 모두 같은 구조를 채택.
그래프 vs 테이블 본질
VS
Table DECIDE · ACT
- row-by-row 액션 · bulk select · 인라인 편집
- 정렬·필터·검색·CSV export 자유
- 키보드 네비게이션 (J/K/E/X) 가능
- 엑셀 멘탈모델 → 한국 사용자 신뢰 ↑
- 약점 — 추세 인지 어려움, 정독 필요, 첫 인상 dense
화면별 적합성 매트릭스
| # | 화면 | Graph | Table | 우세 | 이유 |
|---|---|---|---|---|---|
| A | Triage Inbox | ⚪ | ★★★ | Table | row-by-row 액션, 가상화 리스트, J/K 키보드 |
| B | 분류 수정 토글 | — | ★★★ | Table inline | 단건 인터랙션, 그래프 무의미 |
| C | Suppression 관리 | ⚪ | ★★★ | Table | bulk select · 검색 · CSV export, 엑셀 멘탈모델 |
| D | Weekly Digest | ★★★ | ★★ | Graph (+표) | 추세 · delta · 이상치 인지 |
| E | 분류 정확도 모니터 (HITL→Auto 전환) | ★★★ | ⚪ | Graph | confidence 분포 · 시간축 |
| F | Winning copy 라이브러리 | ★ | ★★ | Card + 표 | "왜 이게 작동했나" 컨텍스트 필요 |
| G | Lead score 분포 / Funnel | ★★★ | ★ | Graph | bucket 분포 패턴 |
7개 화면 중 Table 우세 3개 / Graph 우세 2개 / Hybrid 2개. 운영 빈도(daily) 기준 가중하면 Table 비중 약 70%.
Task → UI 매핑 원칙
Monitor (모니터링) → Graph // sparkline · trendline · heatmap
Explore (탐색) → Graph // 필터링 가능한 chart
Decide (의사결정) → Hybrid // graph + filtered table
Act (액션·처리) → Table // 가상화 + 키보드 + bulk
Explore (탐색) → Graph // 필터링 가능한 chart
Decide (의사결정) → Hybrid // graph + filtered table
Act (액션·처리) → Table // 가상화 + 키보드 + bulk
답장 학습 루프는 80% 가 Act + Monitor 비중이다. 매니저가 매일 들어와서 하는 일은 "어제 답장 처리 + 이번 주 추세 확인" 의 반복. 따라서 테이블이 운영의 중심, 그래프는 주간 진단의 중심.
2-패널 권장 패턴 — Linear / Plausible / Posthog 스타일
┌────────────────────────────────────────────────────────┐
│ 상단 Graph zone (높이 30%) │
│ — 7일 reply trend + sentiment stacked bar │
│ — 클릭/드래그하면 하단 테이블 필터링 (양방향 sync) │
├────────────────────────────────────────────────────────┤
│ 하단 Table zone (높이 70%) │
│ — 가상화 reply 리스트, 인라인 분류·suppression 액션 │
│ — J/K 키보드, Cmd+K 팔레트, CSV export │
└────────────────────────────────────────────────────────┘
- Graph 가 filter producer, Table 이 action consumer
- 양방향 sync —
Jotai atom으로selectedRange·selectedLabel공유 - Posthog · Vercel Observability · Linear Insights · Stripe Dashboard 모두 동일 구조
- 화면 진입 = 그래프로 "어디 이상한가" 즉시 파악 → 해당 영역 클릭으로 테이블 좁힘 → row 액션
한국 수출 기업 매니저 — 특수 고려
| 요인 | 함의 |
|---|---|
| 엑셀 멘탈모델 강함 | 표 · 정렬 · CSV 다운로드를 신뢰. 그래프 단독은 "예쁜데 못 만짐" 으로 인식 |
| 수치 직독 선호 | 막대 길이보다 숫자 라벨 우세. 차트엔 항상 absolute number 병기 |
| 임원 보고용 캡처 | Weekly Digest 는 그래프 캡처 → PPT 붙여넣기. PNG export 필수 |
| 모바일 사용 적음 | 데스크탑 dense table 가능, mobile 최적화 후순위 |
| 영문 콜드메일 운영 | sentiment / intent 같은 라벨은 한·영 병기 (예: "관심 있음 · Interested") |
→ 표 위주 + 그래프 보조 + 모든 chart 에 "표로 보기" 토글 제공이 한국 시장 fit.
안티패턴 — 피해야 할 것
- Dashboard-only 화면 (Tremor 카드만 깔린 화면) — 액션 불가, 매일 안 들어옴
- Sankey / Chord / Treemap — 한국 매니저에게 학습 비용 큼, 첫 인상 부담
- 그래프 안에서 mutation (예: bar 클릭으로 suppression 해제) — 위험·undo 어려움
- Live-streaming animated chart — 인지 부하, 의미 없음
- 모바일 차트를 가로 스크롤로 욱여넣기 — 차라리 표로 fallback
라이브러리 선택 함의
Dense Table (A · B · C)
TanStack Table v9 + Virtual v4
헤드리스 — 키보드·인라인 편집·가상화 자유도 최고. 앱린다 keyset cursor 와 자연 매칭.
2-Panel 대시보드 (D · E · G)
Tremor 4 + Recharts 3
Tremor 4 의 KPI 카드 · sparkline 으로 빠르게, 커스텀 chart 는 Recharts 3 직접.
시계열 + 줌·브러시
visx
D3 기반. 그래프 ↔ 테이블 양방향 sync 자유로움. Posthog 가 사용.
Sparkline only
inline SVG (lib 불필요)
50줄 정도면 충분. 번들 사이즈 0, React 19 RSC 안전.
표 ↔ 그래프 sync
Jotai atom (이미 도입)
selectedRangeAtom, selectedLabelAtom 공유. TanStack Query refetch 와 함께 양방향.
PNG export
html-to-image (5KB)
Weekly Digest 차트를 1클릭으로 PNG 저장 → PPT 붙여넣기. 한국 임원 보고용 필수.
한 줄 권장
"Linear-style 2-패널 + 표 위주, 그래프는 캡처 가능한 보조 위젯"
— TanStack Table 메인 / Tremor 4 디지스트 / 모든 차트에 "표로 보기" 토글 + PNG export.
— TanStack Table 메인 / Tremor 4 디지스트 / 모든 차트에 "표로 보기" 토글 + PNG export.