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)
|
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
|
||||||
) {
|
) {
|
||||||
|
|||||||
Reference in New Issue
Block a user