Firebase 인앱 메시지의 메시지 맞춤설정

Firebase 인앱 메시지는 사전 구성된 동작 및 메시지 유형의 유용한 집합에 기본적인 디자인을 구현하지만 경우에 따라 동작 및 메시지 콘텐츠를 확장할 수 있습니다. 인앱 메시지를 사용하면 메시지에 작업을 추가하고 메시지의 디자인을 맞춤설정할 수 있습니다.

메시지에 작업 추가

작업을 사용하면 인앱 메시지를 통해 사용자를 웹사이트 또는 앱의 특정 화면으로 안내할 수 있습니다.

Firebase 인앱 메시지에서는 링크 핸들러를 사용하여 작업을 처리합니다. SDK는 여러 핸들러를 사용할 수 있으므로 앱에 이미 핸들러가 있는 경우 Firebase 인앱 메시지에서 추가 설정 없이 사용할 수 있습니다. 핸들러가 아직 없는 경우 Firebase 동적 링크를 사용할 수 있습니다. 자세한 내용은 iOS에서 동적 링크 만들기를 참조하세요.

Firebase Console을 사용하여 메시지에 작업 추가

앱에 링크 핸들러가 있으면 작업을 사용하여 캠페인을 작성할 수 있습니다. Firebase Console에서 인앱 메시지를 열고 새 캠페인을 시작하거나 기존 캠페인을 수정합니다. 해당 캠페인에서 카드, 버튼 텍스트버튼 작업, 이미지 작업, 배너 작업을 제공합니다. 여기에서 작업은 관련 딥 링크입니다.

작업의 형식은 선택한 메시지 레이아웃마다 다릅니다. 모달에는 버튼 텍스트 콘텐츠, 텍스트 색상, 배경 색상을 맞춤설정할 수 있는 작업 버튼이 생깁니다. 반면에 이미지 및 상단 배너는 대화형이 되고 탭하면 지정된 작업이 호출됩니다.

메시지 디자인 수정

Firebase 인앱 메시지를 사용하면 메시지 표시를 맞춤설정해 앱에서 메시지 레이아웃, 글꼴 스타일, 버튼 형태, 기타 세부정보를 렌더링하는 방식을 변경할 수 있습니다. 메시지 표시를 수정하는 방법에는 2가지가 있습니다. 즉, 기본 Firebase 인앱 메시지 표시를 수정하거나 자신만의 메시지 표시 라이브러리를 처음부터 만드는 것입니다.

기본 표시 수정

메시지를 맞춤설정하는 가장 간단한 방법은 Firebase 인앱 메시지의 기본 메시지 표시 코드를 기반으로 사용하는 것입니다.

firebase-ios-sdk 저장소 클론

시작하려면 firebase-ios-sdk 저장소의 최신 출시 버전을 클론하고 InAppMessagingDisplay 디렉터리를 엽니다.

수정할 메시지 유형 선택

복제한 저장소로 Firebase 인앱 메시지의 메시지 유형인 Card, Modal, Banner, ImageOnly 전부 또는 일부를 수정할 수 있습니다. 각 유형은 Firebase 인앱 메시지 캠페인 만들기 단계의 메시지 레이아웃과 일치합니다.

덕분에 각 유형에서 Firebase 콘솔의 캠페인 맞춤설정 옵션에 따라 결정되는 다양한 데이터 세트에 액세스할 수 있습니다.

유형 titleText bodyText textColor backgroundColor imageData actionButton secondaryActionButton
Card check check check check check check check
Modal check check check check check check
Banner check check check check check
ImageOnly check

메시지 표시 렌더링 코드 수정

메시지 유형 제한만 감안하면 원하는 대로 수정이 가능합니다. 앱 하단에 표시되는 배너를 만들거나, 모달의 작업 버튼을 옮기거나, 사용자의 메시지에 인앱 메시지를 삽입하거나, 앱에 어울리는 디자인의 메시지로 수정할 수도 있습니다.

메시지 표시 방식을 수정할 때는 2가지를 주의해야 합니다.

  • 메시지 유형 디렉토리: 메시지 유형마다 유형의 로직을 결정하는 파일이 포함된 별도의 디렉토리가 있습니다.
  • 스토리보드: InAppMessagingDisplay 라이브러리에도 세 가지 모든 메시지 유형의 UI를 정의하는 데 유용한 .storyboard 파일이 있습니다.

원하는 메시지 유형의 디렉토리에 있는 파일과 .storyboard의 해당하는 섹션을 수정해 커스텀 메시지 표시를 만듭니다.

수정된 InAppMessagingDisplay를 사용하도록 Podfile 업데이트

Firebase 인앱 메시지에서 기본 표시 대신 수정된 메시지 표시를 사용하도록 하려면 맞춤설정된 InAppMessagingDisplay를 사용하도록 Podfile을 업데이트합니다.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessagingDisplay pod:
# pod 'Firebase/InAppMessagingDisplay'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessagingDisplay', :path => '~/Path/To/The/Cloned/Repo/'

end
그러면 포드를 업데이트하고 앱을 다시 빌드해 맞춤설정된 메시지를 표시할 수 있습니다.

나만의 메시지 표시 라이브러리 만들기

InAppMessagingDisplay 라이브러리를 사용하지 않고도 표시되는 메시지의 UI를 만들 수 있습니다. 즉, 자신만의 코드를 처음부터 작성할 수도 있습니다.

FIRInAppMessagingRendering 인터페이스를 구현하는 클래스 빌드

Firebase 인앱 메시지에서는 FIRInAppMessaging 클래스를 사용해 Firebase 서버와 앱 사이의 통신을 처리합니다. 그러면 이 클래스에서 FIRInAppMessagingRendering 프로토콜을 사용해 수신된 메시지를 표시합니다. 직접 표시 라이브러리를 빌드하려면 이 프로토콜을 구현하는 클래스를 작성합니다.

프로토콜 정의 및 준수 방법에 대한 문서는 InAppMessaging 라이브러리의 FIRInAppMessagingRendering.h 파일에 있습니다. Firebase 인앱 메시지를 이미 설정했다면 Xcode 프로젝트 디렉토리에서 파일을 확인할 수 있습니다.

FirebaseInAppMessaging > Frameworks > FirebaseInAppMessaging.framework > Headers > FIRInAppMessagingRendering.h

자신의 메시지 표시 라이브러리를 사용하도록 messageDisplayComponent 설정

FIRInAppMessaging에서는 messageDisplayComponent 속성을 사용하여 메시지를 표시할 때 사용할 객체를 결정합니다. 이 속성을 커스텀 메시지 표시 클래스의 객체로 설정하면 Firebase 인앱 메시지에서 사용자 라이브러리로 메시지를 렌더링해야 한다는 것을 알 수 있습니다.

[FIRInAppMessaging inAppMessaging].messageDisplayComponent = yourFIRInAppMessagingRenderingInstance;

Headless 버전의 Firebase 인앱 메시지를 사용하도록 Podfile 수정

기본 Firebase 인앱 메시지 포드인 Firebase/InAppMessagingDisplay는 앱의 messageDisplayComponent로 자동으로 자체 할당됩니다. 이 문제를 해결하려면 대신 Headless Firebase/InAppMessaging 포드를 사용합니다.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessagingDisplay pod:
# pod 'Firebase/InAppMessagingDisplay'

# Include the headless pod instead:
pod `Firebase/InAppMessaging'

end
그러면 pod를 업데이트하고 앱을 다시 빌드해 맞춤설정된 메시지를 표시할 수 있습니다.