UILabel이랑 뒤에 배경 뷰를 정렬할 때 이모지가 중앙 정렬이 안 되고 좀 치우쳐 있는 일이 있었음
이모지가 폰트마다 baseline/ascender 차이가 큰 편이라 center 정렬만 하니까 시각적으로 좀 안 맞는 듯 보였음
특히 iOS에서 이모지가 텍스트 글리프 취급 -> bounding box가 예상보다 크거나 작을 수 있다고 함
iconLabel을 frameView의 center에 맞추지 않고 오토레이아웃으로 leading/trailing/top/bottom inset을 줘서 고정을 해서 고침
iconLabel.snp.makeConstraints {
$0.center.equalToSuperview() // 단순 중앙 정렬
}
// 대신
iconLabel.snp.makeConstraints {
$0.edges.equalToSuperview().inset(4) // 여백으로 보정
}
여러 UILabel을 UIStackView에 넣고 alignment = .firstBaseline으로 설정했을 때 앱이 실행 중에 크래시가 났음
firstBaseline/lastBaseline 정렬은 arrangedSubview가 intrinsicContentSize를 가진 텍스트 계열 뷰여야 했음 근데 UIView 같이 baseline이 없는 뷰를 같이 넣으면서 충돌이 나서 크래시가 났던 것임
Baseline 정렬이 필요한 라벨들만 따로 StackView 구성하고 이모지 frameView 같은 non-text 뷰는 다른 StackView에 감싸거나 별도 제약으로 정렬해야함
let textStack = UIStackView(arrangedSubviews: [numberLabel, unitLabel])
textStack.alignment = .firstBaseline
// 이모지 + 텍스트 스택은 별도
let mainStack = UIStackView(arrangedSubviews: [emojiFrameView, textStack])
mainStack.alignment = .center
baseline 차이로 인한 어긋남 해결 → 가독성 개선
baseline이 없는 뷰와 라벨을 따로 둬서 안정성을 확보함