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