UIKit UIButton 이미지와 텍스트 간격 설정 방법 (iOS)

UIKit UIButton 이미지와 텍스트 간격 설정 방법 (iOS)

iOS 앱을 개발하다 보면 버튼 안에 아이콘과 텍스트를 함께 넣는 경우가 많다. 예를 들어 공유 버튼, 티켓 버튼, 설정 버튼 등에서 왼쪽에는 이미지가 있고 오른쪽에는 텍스트가 표시되는 형태를 자주 사용한다.

하지만 기본 UIButton을 사용하면 이미지와 텍스트 사이 간격이 너무 붙어 보이거나 디자인에 맞지 않는 경우가 있다.

이 글에서는 UIKit에서 UIButton의 이미지와 텍스트 사이 간격을 조절하는 방법을 정리한다.

UIButton 기본 사용 방법

가장 기본적인 UIButton 구성은 다음과 같다.

let button = UIButton(type: .system)

button.setTitle("예매하기", for: .normal)
button.setImage(UIImage(systemName: "ticket"), for: .normal)

이렇게 설정하면 기본적으로 이미지와 텍스트가 붙어 있는 형태로 표시된다.

iOS 15 이상: UIButton.Configuration 사용

iOS 15부터는 UIButton.Configuration을 사용하면 이미지와 텍스트 간격을 훨씬 쉽게 조절할 수 있다.

var config = UIButton.Configuration.filled()

config.title = "예매하기"
config.image = UIImage(systemName: "ticket")

config.imagePadding = 8

let button = UIButton(configuration: config)

여기서 imagePadding 값이 이미지와 텍스트 사이 간격을 의미한다.

• 4 → 좁은 간격
• 8 → 일반적인 간격
• 16 → 넓은 간격

버튼 내부 패딩 설정

버튼 전체 여백은 contentInsets를 이용해 설정할 수 있다.

config.contentInsets = NSDirectionalEdgeInsets(
    top: 8,
    leading: 12,
    bottom: 8,
    trailing: 12
)

이 값은 버튼 내부 패딩을 조절할 때 사용된다.

이미지 위치 변경하기

이미지 위치도 설정할 수 있다.

config.imagePlacement = .leading

사용 가능한 옵션은 다음과 같다.

• .leading
• .trailing
• .top
• .bottom

예를 들어 이미지가 오른쪽에 오도록 하려면 다음과 같이 설정한다.

config.imagePlacement = .trailing

iOS 14 이하에서 간격 조절

iOS 15 이전에는 imageEdgeInsets와 titleEdgeInsets를 사용해야 한다.

button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -4, bottom: 0, right: 4)
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 4, bottom: 0, right: -4)

하지만 이 방식은 계산이 복잡하고 유지보수가 어려울 수 있다. 그래서 iOS 15 이상에서는 UIButton.Configuration을 사용하는 것이 훨씬 편하다.

실제 프로젝트에서 사용하는 버튼 예시

다음은 실제 앱에서 많이 사용하는 버튼 구성 예시다.

var config = UIButton.Configuration.filled()

config.title = "탑승권 보기"
config.image = UIImage(named: "ico_ticket_qr")

config.imagePadding = 8

config.contentInsets = NSDirectionalEdgeInsets(
    top: 6,
    leading: 12,
    bottom: 6,
    trailing: 12
)

let button = UIButton(configuration: config)

이렇게 설정하면 아이콘과 텍스트 사이 간격이 자연스럽게 유지된다.

실제 프로젝트에서 자주 사용하는 경우

• 공유 버튼
• 티켓 버튼
• 설정 버튼
• 검색 버튼
• QR 코드 버튼

아이콘과 텍스트를 함께 사용하는 버튼에서는 imagePadding을 적절히 조절하는 것이 UI 완성도를 높이는 데 도움이 된다.

정리

• iOS 15 이상에서는 UIButton.Configuration 사용
• imagePadding으로 이미지와 텍스트 간격 설정
• contentInsets로 버튼 내부 패딩 설정
• imagePlacement로 이미지 위치 변경 가능
• iOS 14 이하에서는 imageEdgeInsets 사용

UIButton 관련 글

• UIButton Configuration 사용 방법 정리 (iOS 15+)
• UIKit UIButton 이미지와 텍스트 간격 설정 방법 (iOS)
• UIButton Badge 카운트 구현 방법 (iOS / UIKit)
• UIButton Shadow 적용 방법 (iOS / UIKit)
• UIButton Gradient Border 구현 방법 (iOS / UIKit)