모바일 앱에서 뱃지(Badge)는 새로운 알림, 읽지 않은 메시지 수, 장바구니 아이템 개수 등을 시각적으로 표시하는 중요한 UI 요소입니다. iOS 개발에서 이러한 뱃지를 쉽게 구현할 수 있는 방법 중 하나가 바로 ‘swift-badge’ 라이브러리입니다. 이번 포스팅에서는 이 라이브러리의 사용법과 활용 방안에 대해 알아보겠습니다.
swift-badge 라이브러리란?
swift-badge는 iOS 앱에서 커스터마이징 가능한 뱃지를 쉽게 생성할 수 있게 해주는 오픈 소스 라이브러리입니다. 다양한 스타일 옵션을 제공하며, 코드로 직접 생성하거나 Interface Builder를 통해 사용할 수 있습니다.
라이브러리 GitHub 주소: https://github.com/evgenyneu/swift-badge
설치 방법
swift-badge는 다양한 방법으로 프로젝트에 추가할 수 있습니다:
CocoaPods 사용
pod 'BadgeSwift'
Carthage 사용
github "evgenyneu/swift-badge"
Swift Package Manager 사용
dependencies: [
.package(url: "https://github.com/evgenyneu/swift-badge.git", from: "8.0.0")
]
수동 설치
BadgeSwift.swift 파일을 프로젝트에 직접 추가하는 방식으로도 사용 가능합니다.
기본 사용법
swift-badge를 사용하여 뱃지를 생성하는 기본적인 방법에 대해 알아보겠습니다.
코드로 뱃지 생성하기
import BadgeSwift
let badge = BadgeSwift()
badge.text = "5"
view.addSubview(badge)
이 간단한 코드만으로도 기본 스타일의 뱃지가 생성됩니다. 이제 좀 더 실용적인 예시를 살펴보겠습니다.
실제 구현 예시
아래는 커스텀 뷰에 뱃지를 추가하는 예시 코드입니다:
lazy var mBadge: UIView = {
let real = UIView()
let ret = BadgeSwift()
real.addSubview(ret)
self.configureBadge(ret)
self.positionBadge(ret, view: real)
return real
}()
func configureBadge(_ badge: BadgeSwift) {
// 뱃지 스타일 설정
badge.text = "8"
badge.textColor = .white
badge.backgroundColor = .red
badge.font = UIFont.systemFont(ofSize: 14)
badge.cornerRadius = 10
badge.shadowOpacityBadge = 0.5
badge.shadowRadius = 1
badge.shadowOffsetBadge = CGSize(width: 0, height: 0.5)
badge.borderWidth = 1
badge.borderColor = .darkGray
badge.insets = CGSize(width: 5, height: 5)
}
func positionBadge(_ badge: BadgeSwift, view: UIView) {
// 뱃지 위치 설정
badge.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
badge.centerXAnchor.constraint(equalTo: view.trailingAnchor, constant: -10),
badge.centerYAnchor.constraint(equalTo: view.topAnchor, constant: 10)
])
}
이 예시에서는 다음과 같은 작업을 수행합니다:
real이라는 UIView 컨테이너를 생성합니다.BadgeSwift인스턴스를 생성하고 컨테이너에 추가합니다.configureBadge()함수에서 뱃지의 다양한 속성을 설정합니다.positionBadge()함수에서 뱃지의 위치를 설정합니다.
뱃지 커스터마이징 옵션
swift-badge는 다양한 커스터마이징 옵션을 제공합니다:
1. 텍스트 및 스타일
badge.text = "123" // 텍스트 설정
badge.textColor = .white // 텍스트 색상
badge.font = UIFont.boldSystemFont(ofSize: 13) // 글꼴
2. 배경 및 테두리
badge.backgroundColor = .red // 배경색
badge.cornerRadius = 12 // 모서리 둥글기 (0으로 설정 시 사각형)
badge.borderWidth = 1 // 테두리 두께
badge.borderColor = .darkGray // 테두리 색상
3. 그림자 효과
badge.shadowOpacityBadge = 0.5 // 그림자 투명도
badge.shadowRadius = 2 // 그림자 반경
badge.shadowOffsetBadge = CGSize(width: 0, height: 1) // 그림자 오프셋
badge.shadowColor = .black // 그림자 색상
4. 크기 조절
badge.insets = CGSize(width: 10, height: 5) // 내부 여백
고급 활용 방법
1. 동적 텍스트 업데이트
뱃지의 텍스트를 동적으로 업데이트하는 것도 매우 간단합니다:
func updateBadgeCount(_ count: Int) {
if count <= 0 {
mBadge.isHidden = true
} else {
mBadge.isHidden = false
if let badge = mBadge.subviews.first as? BadgeSwift {
badge.text = count > 99 ? "99+" : "\(count)"
}
}
}
2. 애니메이션 효과 추가
뱃지가 나타나거나 사라질 때 애니메이션 효과를 줄 수 있습니다:
func showBadgeWithAnimation() {
mBadge.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
mBadge.isHidden = false
UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [], animations: {
self.mBadge.transform = .identity
}, completion: nil)
}
func hideBadgeWithAnimation(completion: (() -> Void)? = nil) {
UIView.animate(withDuration: 0.3, animations: {
self.mBadge.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
self.mBadge.alpha = 0
}) { _ in
self.mBadge.isHidden = true
self.mBadge.alpha = 1
self.mBadge.transform = .identity
completion?()
}
}
3. 탭 인식기 추가
뱃지를 탭했을 때 특정 동작을 수행하도록 설정할 수 있습니다:
func addTapGestureToBadge() {
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(badgeTapped))
mBadge.isUserInteractionEnabled = true
mBadge.addGestureRecognizer(tapGesture)
}
@objc func badgeTapped() {
// 뱃지 탭 시 수행할 동작
print("Badge tapped!")
}
Interface Builder에서 사용하기
swift-badge는 Interface Builder에서도 사용할 수 있습니다:
- UIView를 스토리보드에 추가합니다.
- Identity Inspector에서 Class를 “BadgeSwift”로 설정합니다.
- Attributes Inspector에서 뱃지 속성들을 설정합니다.
실제 활용 사례
1. 탭 바 아이템에 뱃지 추가
func addBadgeToTabBarItem(at index: Int, with count: Int) {
guard let tabBarItems = tabBarController?.tabBar.items else { return }
guard index < tabBarItems.count else { return }
tabBarItems[index].badgeValue = count > 0 ? "\(count)" : nil
}
2. 테이블 뷰 셀에 뱃지 추가
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
// 셀 설정...
// 뱃지 추가
let badge = BadgeSwift()
badge.text = "NEW"
badge.backgroundColor = .green
badge.textColor = .white
cell.contentView.addSubview(badge)
// 뱃지 위치 설정
badge.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
badge.trailingAnchor.constraint(equalTo: cell.contentView.trailingAnchor, constant: -15),
badge.centerYAnchor.constraint(equalTo: cell.contentView.centerYAnchor)
])
return cell
}
3. 버튼에 뱃지 추가
func addBadgeToButton(_ button: UIButton, count: Int) {
let badge = BadgeSwift()
badge.text = "\(count)"
button.addSubview(badge)
badge.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
badge.leadingAnchor.constraint(equalTo: button.trailingAnchor, constant: -10),
badge.topAnchor.constraint(equalTo: button.topAnchor, constant: -5)
])
}
결론
swift-badge 라이브러리는 iOS 앱에서 뱃지를 쉽고 효과적으로 구현할 수 있는 훌륭한 도구입니다. 간단한 코드만으로도 완전히 커스터마이징 가능한 뱃지를 생성할 수 있으며, 애니메이션 효과나 동적 업데이트 같은 고급 기능도 쉽게 구현할 수 있습니다.
이 라이브러리를 활용하면 탭 바 아이템, 테이블 뷰 셀, 버튼 등 다양한 UI 요소에 뱃지를 추가하여 사용자 경험을 향상시킬 수 있습니다. 특히 알림 수, 새로운 메시지, 카트 아이템 등을 시각적으로 표시해야 하는 앱에서 유용하게 사용될 수 있습니다.
swift-badge 라이브러리의 더 많은 기능과 예제는 공식 GitHub 저장소에서 확인할 수 있습니다.
답글 남기기