앱을 개발할 때 기기마다 UI를 적절하게 조정해야 할 때가 많다. 특히 iPhone SE(1세대, 2세대, 3세대) 같은 화면이 작은 기기에서는 Tab Bar의 높이나 아이콘 배치가 어색해지는 문제가 발생할 수 있다. 이를 해결하기 위해 CustomTabBar를 생성하여 동적으로 높이를 조정하고, 기기를 분류하는 방법을 정리해 본다.
기기별 카테고리 분류
우선, 기기의 화면 크기를 기준으로 SE / Normal / Max로 구분하는 기능을 UIScreen의 익스텐션으로 구현했다.
UIScreen 익스텐션으로 iPhone 카테고리 분류
public enum iPhoneCategory {
case se
case normal
case max
}
public extension UIScreen {
static var isiPhonePlus: Bool {
main.bounds.height > 900
}
static var isiPhoneSE: Bool {
main.bounds.height < 700
}
static var isiPhoneMini: Bool {
main.bounds.height < 820
}
static var iPhoneCategory: iPhoneCategory {
switch main.bounds.height {
case 900..<CGFloat.greatestFiniteMagnitude: .max
case 0..<700: .se
default: .normal
}
}
}코드 설명
isiPhoneSE: 화면 높이가 700pt 미만인 경우 iPhone SE로 판단isiPhonePlus: 화면 높이가 900pt 이상인 경우 iPhone Plus 이상으로 판단isiPhoneMini: iPhone Mini(820pt 이하) 여부 확인iPhoneCategory- 900pt 이상 →
.max(iPhone Plus, Max 모델) - 700pt 미만 →
.se(iPhone SE 모델) - 그 외 →
.normal(일반 iPhone 모델)
- 900pt 이상 →
이렇게 하면 iPhone 화면 크기에 따라 적절한 UI를 적용할 수 있다.
Custom Tab Bar 구현
위에서 만든 UIScreen 익스텐션을 활용해 iPhone SE 모델에서만 Tab Bar의 높이와 버튼 위치를 조정하는 CustomTabBar를 만들었다.
CustomTabBar 구현
import UIKit
final class CustomTabBar: UITabBar {
override func sizeThatFits(_ size: CGSize) -> CGSize {
var newSize = super.sizeThatFits(size)
// 기기 화면 높이에 따라 탭바 높이 계산하기
let padding: CGFloat = UIScreen.isiPhoneSE ? 20 : 0
newSize.height = newSize.height + padding
return newSize
}
override func layoutSubviews() {
super.layoutSubviews()
for subview in subviews {
guard let tabBarButton = subview as? UIControl else { continue }
let verticalOffset: CGFloat = UIScreen.isiPhoneSE ? 5.0 : 10.0
let sign: CGFloat = UIScreen.isiPhoneSE ? -1 : 1
tabBarButton.frame = tabBarButton.frame.offsetBy(dx: .zero, dy: sign * verticalOffset)
}
}
}코드
sizeThatFits(_ size:)UITabBar의 기본 크기를 가져와 iPhone SE에서만 높이를 +20pt 증가- 이를 통해 Tab Bar가 너무 낮게 배치되지 않도록 조정
layoutSubviews()UITabBar내부의UIControl(탭 버튼)을 찾아 위치를 조정UIScreen.isiPhoneSE인 경우 버튼을 5pt 위로 이동- 다른 기기에서는 10pt 위로 이동하여 자연스러운 위치 유지
이렇게 하면 iPhone SE에서는 탭바 높이가 더 높아지고, 버튼 위치도 적절히 이동하여 화면이 작아도 UI가 어색해지지 않는다.
적용 결과
위 코드들을 적용하면 iPhone SE에서만 다음과 같은 변화가 발생한다.
Tab Bar 높이 증가 → 너무 낮아지는 문제 해결
탭 버튼 위치 조정 → 아이콘과 텍스트가 적절히 정렬됨
기기 크기별로 다른 UI 적용 가능 → 유지보수 용이
정리하자면...
UIScreen익스텐션을 활용해 iPhone SE, Normal, Max 모델을 자동으로 분류CustomTabBar를 생성해 iPhone SE에서만 높이 및 아이콘 위치 조정- iPhone SE에서 Tab Bar가 더 자연스러운 위치에 배치되도록 개선
문제 상황
일반적인 iPhone 모델에서는 Tab Bar의 아이콘과 타이틀이 적절한 위치에 표시된다.
하지만 iPhone SE에서는 화면 크기가 작아 다음과 같은 문제가 발생했다.
- 텍스트가 너무 아래로 내려가 있어 가독성이 떨어짐
- 아이콘이 중앙에서 약간 벗어난 느낌이 듦
이를 해결하기 위해 iPhone SE에서만 특정 UI 조정을 적용해야 한다.
해결 방법
1. 타이틀 위치 조정
먼저, UITabBarAppearance를 사용하여 Tab Bar 타이틀의 위치를 조정한다.
if UIScreen.isiPhoneSE {
appearance.stackedLayoutAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -6)
appearance.stackedLayoutAppearance.selected.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -6)
}코드 설명
UIScreen.isiPhoneSE: 현재 기기가 iPhone SE인지 확인하는 조건문 (사용자 정의 프로퍼티로 구현 필요)appearance.stackedLayoutAppearance.normal.titlePositionAdjustment- 일반(normal) 상태에서 타이틀의 위치를 조정
appearance.stackedLayoutAppearance.selected.titlePositionAdjustment- 선택(selected) 상태에서 타이틀의 위치를 조정
UIOffset(horizontal: 0, vertical: -6)- 타이틀을 6pt 위로 이동하여 가독성을 높인다.
2. 아이콘 위치 조정
다음으로, UITabBarItem을 이용해 각 탭의 아이콘 위치를 조정한다.
if UIScreen.isiPhoneSE {
for item in tabBar.items ?? [] {
item.imageInsets = UIEdgeInsets(top: 3, left: 0, bottom: -3, right: 0)
item.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -3)
}
}코드 설명
tabBar.items ?? []UITabBarItem배열을 가져오되,nil일 경우 빈 배열([])을 반환하여 에러를 방지한다.
item.imageInsets = UIEdgeInsets(top: 3, left: 0, bottom: -3, right: 0)- 아이콘을 3pt 위로 이동하여 중앙에 가깝게 배치
item.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -3)- 타이틀도 3pt 위로 이동하여 정렬을 맞춘다.
최종 적용 결과
위 코드를 적용하면 iPhone SE에서만 Tab Bar의 타이틀과 아이콘이 더 보기 좋은 위치에 정렬된다.
이제 화면 크기가 작은 기기에서도 자연스럽고 정돈된 UI를 유지할 수 있다.
UIOffset과UIEdgeInsets를 활용해 타이틀과 아이콘을 수직으로 조정UIScreen.isiPhoneSE를 사용해 iPhone SE에서만 적용하도록 분기 처리- 작은 화면에서도 더 깔끔한 UI 제공 가능
