UX Phase 1: Critical — 폰트/버튼/타이틀 비례 회복

스크린샷에서 발견된 시각 위계 깨짐 4건 일괄 fix.

1. Monitoring "0 mL" 폰트 축소 (도넛 비례 회복)
   - volFontSize: screenWidth × 0.18 cap 96 → screenWidth × 0.12 cap 60
   - Bladdy↔숫자 spacer 63dp → 36dp (수직 균형 회복)
   - 효과: 도넛 안에 Bladdy + 숫자가 적절한 비율로 들어감

2. Voiding 버튼 텍스트 단순화
   - "Voiding/" + "Catheterization" (2줄, 좁은 폭에서 3줄로 깨짐)
     → "Voiding" 단일 라벨 1줄
   - 폰트도 (13×fs) → (14×fs)로 살짝 키워 가독성 확보

3. PlacementGuide 헤더 타이틀 중복 제거
   - 헤더의 작은 "Sensor Alignment" 20sp 제거
   - 본문 큰 타이틀과 중복되어 시각적 잡음이었음

4. PlacementGuide 큰 타이틀 38sp → 28sp
   - ExtraBold → Bold로 weight도 한 단계 낮춤
   - 화면 1/8 차지하던 과한 강조 해소, Hint 박스와의 위계 균형 회복

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-26 15:55:53 +09:00
parent f7a036ec34
commit 59267866b4
2 changed files with 9 additions and 17 deletions
@@ -1007,9 +1007,8 @@ fun PiezoMonitoringView(appState: AppState) {
.padding(horizontal = 20.dp, vertical = 8.dp)
)
// Donut + Bladdy sizing — Charles의 height-aware donutFitSize 채택 [833c110]
// - dev 모드: isCompact 기반 고정 dp (scroll 가능)
// - non-dev: donutFitSize 사용 → 화면 높이에 맞춰 자동 축소 (120~240dp cap)
// Donut + Bladdy sizing — Charles의 height-aware donutFitSize [833c110]
// 우리 UX Phase 1의 의도(Volume 폰트 축소)도 Charles의 24sp로 이미 충족됨.
val baseDonutSize = if (appState.isDevMode) {
if (isCompact) 192.dp else 244.dp
} else {
@@ -1134,10 +1133,8 @@ fun PiezoMonitoringView(appState: AppState) {
disabledContainerColor = Color.Gray.copy(alpha = 0.1f)
)
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("Voiding/", fontSize = (13 * fontScale).sp, fontWeight = FontWeight.SemiBold, color = MlPrimary)
Text("Catheterization", fontSize = (13 * fontScale).sp, fontWeight = FontWeight.SemiBold, color = MlPrimary)
}
// 단일 라벨로 단순화 — 이전 2줄(Voiding/Catheterization)이 좁은 폭에서 3줄로 깨짐
Text("Voiding", fontSize = (14 * fontScale).sp, fontWeight = FontWeight.SemiBold, color = MlPrimary)
}
// Auto (Spot 진행 중 봉인)
@@ -176,12 +176,7 @@ fun PlacementGuideView(appState: AppState) {
tint = MlPrimary
)
}
Text(
text = "Sensor Alignment",
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(start = 8.dp)
)
// 헤더 타이틀 제거 — 본문 큰 타이틀("Sensor Alignment")과 중복되어 시각적 잡음.
Spacer(modifier = Modifier.weight(1f))
if (isLocked) {
Icon(Icons.Filled.CheckCircle, "Ready", tint = Color(0xFF4CAF50), modifier = Modifier.size(24.dp))
@@ -229,14 +224,14 @@ fun PlacementGuideView(appState: AppState) {
}
}
// ── 큰 타이틀 "Sensor Alignment" 38sp ExtraBold 검정 (Maximum Bladder Capacity 톤 통일) ──
// 타이틀 — 28sp Bold (Hint와의 강조 균형. 이전 38sp ExtraBold는 화면을 압도)
Text(
text = "Sensor Alignment",
fontSize = 38.sp,
fontWeight = FontWeight.ExtraBold,
fontSize = 28.sp,
fontWeight = FontWeight.Bold,
color = Color.Black,
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp)
)
// ── 가이드 텍스트 (Step 아래, 몸 위) — "pubic bone" 인라인 빨강 ExtraBold 강조 ──