ux: Sensor Alignment 일러스트 상하 여백 균등 (demo-final)

증상: Hint 1 ↔ 일러스트 사이 간격이 (Sensor Alignment 타이틀 ↔ Hint 1) 보다
      훨씬 커서 비대칭. 일러스트 바로 위만 공간이 비어 보임.

원인: 일러스트 Box 가 .weight(1f).aspectRatio(...) 조합 →
      weight(1f) 가 Column 의 남은 vertical 공간을 모두 잡아먹음.
      aspectRatio 로 Box 가 실제로 그려지는 높이는 width × 0.84 이지만,
      weight 할당량 - 실제 높이 = 빈 공간이 Box 안쪽에 발생.

수정:
  - 일러스트 Box 의 .weight(1f) 제거 — aspectRatio 만으로 자연 크기 결정
  - Hint 1 ↔ 일러스트 사이 Spacer 8+2dp → 16dp (top bar 의 내부 vertical padding 과 매칭)

결과:
  - 타이틀 ↔ Hint 1: 16dp
  - Hint 1 ↔ 일러스트: 16dp (균등)
  - 일러스트 하단 ~ 버튼: 자연 stacking (남는 공간은 화면 맨 아래로 모임)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-06-17 15:52:00 +09:00
parent 3361ed00f2
commit 8ec063189d
@@ -299,12 +299,10 @@ fun PlacementGuideView(appState: AppState) {
append(rawHint) append(rawHint)
} }
} }
// 본문 순서 (2026-06-16 변경): Step → 일러스트 → Hint (그림 아래) // Hint 1 ↔ 일러스트 사이 간격 — top bar 의 내부 padding(16dp) 과 매칭.
// hint Text 본체는 Body Box 뒤로 이동. 값(displayHint 등) 은 위에서 계산. // (이전: Spacer 8+2dp + Box.weight(1f) 가 남은 공간을 잡아먹어 비대칭.)
Spacer(modifier = Modifier.height(2.dp)) Spacer(modifier = Modifier.height(16.dp))
// 화살표 깜빡임 — alpha 1.0 ↔ 0.85 (최솟값 0.85 → body 일러스트 살색 안 비침)
// 이전 0.35 만큼 떨어지면 skin 톤이 비쳐 보이던 사용자 피드백 반영.
// 화살표 깜빡임 — alpha 1.0 ↔ 0.0 (완전 사라짐), 빨강 색. // 화살표 깜빡임 — alpha 1.0 ↔ 0.0 (완전 사라짐), 빨강 색.
// 사용자 피드백: "붉은색/사라짐 으로 깜빡임" // 사용자 피드백: "붉은색/사라짐 으로 깜빡임"
val arrowAlpha by animateFloatAsState( val arrowAlpha by animateFloatAsState(
@@ -314,11 +312,10 @@ fun PlacementGuideView(appState: AppState) {
) )
// ── 하복부 일러스트(PNG) + Canvas overlay (센서/방광/화살표) ── // ── 하복부 일러스트(PNG) + Canvas overlay (센서/방광/화살표) ──
// weight(1f) 제거 — aspectRatio 만으로 자연 크기. 남은 공간은 아래 채워짐.
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.weight(1f)
// 일러스트 비율 2240:1888 ≈ 7:6 (finalstomachillust.png)
.aspectRatio(2240f / 1888f), .aspectRatio(2240f / 1888f),
contentAlignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {