iOS에서 SwiftMessages를 활용한 사용자 친화적 알림 구현하기

모바일 앱에서 사용자에게 정보를 전달하는 방법은 사용자 경험에 큰 영향을 미칩니다. 기본 UIAlertController는 간단하지만, 때로는 더 세련되고 맞춤화된 알림이 필요합니다. 이번 포스팅에서는 iOS 앱에서 사용자 친화적인 알림을 쉽게 구현할 수 있는 라이브러리인 SwiftMessages의 사용법을 알아보겠습니다.

SwiftMessages란?

SwiftMessages는 iOS 앱에서 사용자 정의 알림을 표시하기 위한 강력하고 유연한 라이브러리입니다. 앱 상단이나 하단에서 슬라이딩되는 알림, 화면 중앙에 나타나는 팝업 등 다양한 형태의 메시지를 쉽게 구현할 수 있습니다. 기본 제공되는 디자인을 사용하거나, 완전히 커스텀한 디자인을 적용할 수도 있습니다.

설치 방법

SwiftMessages는 CocoaPods, Carthage, Swift Package Manager 등 다양한 방법으로 설치할 수 있습니다. CocoaPods를 사용한다면 다음과 같이 Podfile에 추가합니다:

pod 'SwiftMessages'

그리고 터미널에서 다음 명령어를 실행합니다:

pod install

커스텀 알림 뷰 만들기

SwiftMessages의 가장 강력한 기능 중 하나는 완전히 커스텀된 알림 뷰를 만들 수 있다는 것입니다. 아래에서는 하단에서 올라오는 다이얼로그 형태의 커스텀 알림을 만드는 방법을 설명합니다.

1. XIB 파일 생성하기

먼저 새로운 XIB 파일을 생성합니다:

Xcode에서 File > New > File… > View를 선택합니다.
파일 이름을 “BottomDialogView.xib”로 지정합니다.

2. XIB 파일 설정하기

XIB 파일에서 다음과 같이 설정합니다:

File Inspector 탭에서 “Use Safe Area Layout Guides”를 해제합니다.
Simulated Metrics에서 Size를 “Freeform”으로 변경합니다.
Size Inspector 탭에서 width: 600, height: 309로 설정합니다.

3. 뷰 계층 구조 설정하기

이제 다음과 같은 계층 구조로 뷰를 구성합니다:

루트 뷰에 빈 View를 추가합니다.
그 안에 Background View를 추가합니다.
Background View 내부에 Stack View(Content View)를 추가합니다.
Content View 내에 필요한 UI 요소들(레이블, 버튼 등)을 배치합니다.

주의할 점: Interface Builder에서 Ctrl+C, Ctrl+V로 복사-붙여넣기로 생성된 뷰는 제대로 인식되지 않을 수 있습니다. 직접 추가하는 것이 안전합니다.

4. Swift 파일 생성하기

XIB와 연결할 Swift 파일을 생성합니다:

import UIKit
import SwiftMessages

class BottomDialogView: UIView {
    
    // UI 요소들의 아웃렛 연결
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var messageLabel: UILabel!
    @IBOutlet weak var cancelButton: UIButton!
    
    // 취소 버튼 액션
    var cancelAction: (() -> Void)?
    
    @IBAction func cancelButtonTapped(_ sender: UIButton) {
        cancelAction?()
    }
}

XIB 파일에서 File’s Owner를 BottomDialogView 클래스로 설정하고, 아웃렛과 액션을 연결합니다.

SwiftMessages로 알림 표시하기

이제 버튼 클릭 시 우리가 만든 커스텀 알림을 표시하는 방법을 알아보겠습니다:

@IBAction func btnQuestionmark() {
    // 커스텀 뷰 로드
    let view: BottomDialogView = try! SwiftMessages.viewFromNib()
    
    // 그림자 설정
    view.configureDropShadow()
    
    // 취소 액션 설정
    view.cancelAction = { SwiftMessages.hide() }
    
    // 설정 구성
    var config = SwiftMessages.defaultConfig
    config.presentationContext = .window(windowLevel: UIWindowLevelStatusBar)
    config.duration = .forever
    config.presentationStyle = .bottom
    config.dimMode = .gray(interactive: true)
    
    // 알림 표시
    SwiftMessages.show(config: config, view: view)
}

이 코드는 다음과 같은 기능을 수행합니다:

SwiftMessages.viewFromNib()을 사용하여 XIB 파일에서 뷰를 로드합니다.
그림자 효과를 적용합니다.
취소 버튼을 누르면 알림이 사라지도록 설정합니다.
알림의 동작을 세부적으로 설정합니다:
- presentationContext: 알림이 표시될 context를 설정합니다.
- duration: 알림이 표시되는 시간을 설정합니다. .forever는 사용자가 닫을 때까지 계속 표시됩니다.
- presentationStyle: 알림이 나타나는 방식을 설정합니다. .bottom은 화면 하단에서 올라옵니다.
- dimMode: 알림 뒤 배경의 처리 방식을 설정합니다. .gray(interactive: true)는 회색 딤 처리와 함께 딤 영역 터치 시 알림이 닫히도록 합니다.

SwiftMessages 설정 옵션 상세 설명

SwiftMessages는 다양한 설정을 통해 알림의 동작을 세밀하게 제어할 수 있습니다:

1. presentationStyle

알림이 화면에 나타나는 방식을 결정합니다:

.top: 화면 상단에서 내려옵니다.
.bottom: 화면 하단에서 올라옵니다.
.center: 화면 중앙에 나타납니다.
.custom: 사용자 정의 애니메이션을 적용합니다.

2. duration

알림이 표시되는 시간을 설정합니다:

.automatic: 메시지 길이에 따라 자동 조절됩니다.
.seconds(Double): 지정된 시간(초) 동안 표시됩니다.
.forever: 사용자가 닫을 때까지 계속 표시됩니다.

3. dimMode

알림 뒤 배경의 처리 방식을 설정합니다:

.none: 배경을 변경하지 않습니다.
.gray(interactive: Bool): 회색 배경을 적용합니다. interactive가 true면 배경 터치 시 알림이 닫힙니다.
.color(UIColor, interactive: Bool): 지정된 색상의 배경을 적용합니다.
.blur(UIBlurEffect.Style, interactive: Bool): 블러 효과를 적용합니다.

4. presentationContext

알림이 표시될 context를 설정합니다:

.automatic: 자동으로 결정됩니다.
.window(windowLevel: UIWindow.Level): 지정된 윈도우 레벨에 표시됩니다.
.view(UIView): 지정된 뷰에 표시됩니다.
.viewController(UIViewController): 지정된 뷰 컨트롤러에 표시됩니다.

다양한 활용 예시

1. 성공/실패 알림

func showSuccessMessage(message: String) {
    let success = MessageView.viewFromNib(layout: .cardView)
    success.configureTheme(.success)
    success.configureContent(title: "성공", body: message)
    success.button?.setTitle("확인", for: .normal)
    success.buttonTapHandler = { _ in SwiftMessages.hide() }
    
    var config = SwiftMessages.defaultConfig
    config.presentationStyle = .top
    config.duration = .seconds(3)
    
    SwiftMessages.show(config: config, view: success)
}

2. 인터넷 연결 상태 알림

func showNetworkStatusMessage(isConnected: Bool) {
    let view = MessageView.viewFromNib(layout: .statusLine)
    view.configureTheme(isConnected ? .success : .error)
    view.configureContent(body: isConnected ? "인터넷에 연결되었습니다." : "인터넷 연결이 끊겼습니다.")
    
    var config = SwiftMessages.defaultConfig
    config.presentationStyle = .top
    config.preferredStatusBarStyle = .lightContent
    
    SwiftMessages.show(config: config, view: view)
}

결론

SwiftMessages는 iOS 앱에서 사용자 친화적인 알림을 쉽게 구현할 수 있는 강력한 도구입니다. 기본 UIAlertController보다 더 다양한 형태와 애니메이션을 제공하며, 완전한 커스터마이징이 가능합니다.

이 포스팅에서 설명한 방법을 활용하면 앱의 사용자 경험을 한층 업그레이드할 수 있습니다. 특히 하단에서 올라오는 다이얼로그 형태의 알림은 사용자에게 중요한 정보를 전달하면서도 앱의 사용성을 해치지 않는 좋은 UI/UX 패턴입니다.

SwiftMessages의 다양한 옵션을 실험해보고, 여러분의 앱에 가장 적합한 알림 시스템을 구축해보세요!