Skip to main content

​
개요

모바일 친화적인 웹사이트가 있고 Apple App Store 또는 Google Play Store용 다운로드 가능한 모바일 앱으로 변환하려는 경우 Median.co가 강력한 솔루션입니다. 또한 푸시 알림을 활성화하기 위한 OneSignal과의 원활한 통합을 제공합니다.

​
설정

​
1. Median.co로 앱 만들기

  1. Median.co 시작 가이드를 따르세요.
  2. <https://median.co/app>에서 앱을 빌드하세요.

​
2. OneSignal 설정

  1. onesignal.com으로 이동하여 계정을 만드세요.
  2. OneSignal 앱 및 플랫폼을 구성하세요.

​
OneSignal 앱 및 플랫폼 구성

푸시 알림에 필요한 설정 OneSignal로 푸시 알림 전송을 시작하려면 먼저 지원하는 모든 플랫폼(Apple (APNs), Google (FCM), Huawei (HMS) 및/또는 Amazon (ADM))으로 OneSignal 앱을 구성해야 합니다.
조직에 이미 OneSignal 계정이 있는 경우 관리자 역할로 초대를 요청하여 앱을 구성하세요. 그렇지 않은 경우 무료 계정에 가입하여 시작하세요.
단일 OneSignal 앱에서 여러 플랫폼(iOS, Android, Huawei, Amazon, Web)을 관리할 수 있습니다.
1

앱 만들기 또는 선택

  • 기존 앱에 플랫폼을 추가하려면 OneSignal 대시보드에서 설정 > 푸시 및 인앱으로 이동합니다.
  • 처음부터 시작하려면 New App/Website를 클릭하고 프롬프트를 따릅니다.

새 앱 만들기를 보여주는 예제.

2

플랫폼 설정 및 활성화

  • 앱 및 조직에 대해 명확하고 인식 가능한 이름을 선택합니다.
  • 구성하려는 플랫폼(iOS, Android 등)을 선택합니다.
  • Next: Configure Your Platform을 클릭합니다.

첫 번째 OneSignal 앱, 조직 및 채널 설정 예제.

3

플랫폼 자격 증명 구성

플랫폼에 따라 프롬프트를 따릅니다:자격 증명을 입력한 후 Save & Continue를 클릭합니다.
4

대상 SDK 선택

개발 플랫폼(예: iOS, Android, React Native, Unity)과 일치하는 SDK를 선택한 다음 Save & Continue를 클릭합니다.

문서로 이동할 사용 중인 SDK 선택.

5

SDK 설치 및 앱 ID 저장

플랫폼이 구성되면 OneSignal 앱 ID가 표시됩니다. 이 ID를 복사하고 저장하세요. SDK를 설치하고 초기화할 때 필요합니다.다른 사람과 협업하는 경우 Invite 버튼을 사용하여 개발자 또는 팀 구성원을 추가한 다음 Done을 클릭하여 설정을 완료합니다.

앱 ID를 저장하고 추가 팀 구성원을 초대합니다.

완료되면 선택한 플랫폼에 대한 SDK 설치 가이드를 따라 OneSignal 통합을 완료합니다.

​
3. OneSignal을 Median 앱에 연결

OneSignal App ID를 Median.co(GoNative) 앱 구성에 붙여넣으세요.

​
OneSignal SDK 통합 테스트

이 가이드는 푸시 알림, 구독 등록 및 인앱 메시징을 테스트하여 OneSignal SDK 통합이 올바르게 작동하는지 확인하는 데 도움이 됩니다.

​
모바일 구독 확인

1

테스트 장치에서 앱을 시작하세요.

초기화 중에 requestPermission 메서드를 추가한 경우 네이티브 푸시 권한 프롬프트가 자동으로 나타납니다.

iOS 및 Android 푸시 권한 프롬프트

2

OneSignal 대시보드 확인

프롬프트를 수락하기 전에 OneSignal 대시보드를 확인하세요:
  • Audience > Subscriptions로 이동하세요.
  • “Never Subscribed” 상태의 새 항목이 표시됩니다.

'Never Subscribed' 상태의 구독을 보여주는 대시보드

3

앱으로 돌아가서 프롬프트에서 Allow를 탭하세요.

4

OneSignal 대시보드 구독 페이지를 새로 고치세요.

구독 상태가 이제 Subscribed로 표시됩니다.

'Subscribed' 상태의 구독을 보여주는 대시보드

모바일 구독을 성공적으로 만들었습니다. 모바일 구독은 사용자가 장치에서 앱을 처음 열거나 동일한 장치에 앱을 제거했다가 다시 설치하는 경우 생성됩니다.

​
테스트 구독 설정

테스트 구독은 메시지를 보내기 전에 푸시 알림을 테스트하는 데 유용합니다.
1

테스트 구독에 추가.

대시보드에서 구독 옆에 있는 Options(점 3개) 버튼을 클릭하고 Add to Test Subscriptions을 선택하세요.

테스트 구독에 장치 추가

2

구독 이름 지정.

Test Subscriptions 탭에서 나중에 장치를 쉽게 식별할 수 있도록 구독 이름을 지정하세요.

'Name your subscription' 필드를 보여주는 대시보드

3

테스트 사용자 세그먼트 만들기.

Audience > Segments > New Segment로 이동하세요.
4

세그먼트 이름 지정.

세그먼트 이름을 Test Users로 지정하세요(나중에 사용되므로 이름이 중요합니다).
5

Test Users 필터를 추가하고 Create Segment를 클릭하세요.

Test Users 필터로 'Test Users' 세그먼트 만들기

테스트 사용자 세그먼트를 성공적으로 만들었습니다. 이제 이 개별 장치 및 테스트 사용자 그룹에 메시지 전송을 테스트할 수 있습니다.

​
API를 통해 테스트 푸시 보내기

1

App API Key 및 App ID 가져오기.

OneSignal 대시보드에서 **Settings > Keys & IDs**로 이동하세요.
2

제공된 코드 업데이트.

아래 코드에서 YOUR_APP_API_KEY 및 YOUR_APP_ID를 실제 키로 바꾸세요. 이 코드는 앞서 만든 Test Users 세그먼트를 사용합니다.
curl -X \
POST --url 'https://api.onesignal.com/notifications' \
 --header 'content-type: application/json; charset=utf-8' \
 --header 'authorization: Key YOUR_APP_API_KEY' \
 --data \
 '{
  "app_id": "YOUR_APP_ID",
  "target_channel": "push",
  "name": "Testing basic setup",
  "headings": {
  	"en": "👋"
  },
  "contents": {
    "en": "Hello world!"
  },
  "included_segments": [
    "Test Users"
  ],
  "ios_attachments": {
    "onesignal_logo": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
  },
  "big_picture": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'
3

코드 실행.

터미널에서 코드를 실행하세요.
4

이미지 및 확인된 전달 확인.

모든 설정 단계가 성공적으로 완료되면 테스트 구독은 이미지가 포함된 알림을 받아야 합니다:

iOS 및 Android에서 이미지가 있는 푸시 알림

이미지는 축소된 알림 보기에서 작게 나타납니다. 알림을 확장하여 전체 이미지를 확인하세요.
5

확인된 전달 확인.

대시보드에서 Delivery > Sent Messages로 이동한 다음 메시지를 클릭하여 통계를 확인하세요.confirmed 통계가 표시되어야 하며, 이는 장치가 푸시를 받았음을 의미합니다.

확인된 전달을 보여주는 전달 통계

Professional 플랜 이상인 경우 Audience Activity로 스크롤하여 구독 수준 확인을 확인하세요:

Audience Activity에서 장치 수준의 확인된 전달

API를 통해 세그먼트에 알림을 성공적으로 보냈습니다.
  • 이미지를 받지 못했나요? Notification Service Extension이 누락되었을 수 있습니다.
  • 확인된 전달이 없나요? App Groups 설정을 검토하세요.
  • 문제가 있나요? API 요청과 앱 시작부터 끝까지의 로그를 .txt 파일로 복사하여 붙여넣으세요. 그런 다음 둘 다 [email protected]과 공유하세요.

​
인앱 메시지 보내기

인앱 메시지를 사용하면 사용자가 앱을 사용하는 동안 사용자와 통신할 수 있습니다.
1

장치에서 앱을 닫거나 백그라운드로 전환하세요.

이는 사용자가 새 세션이 시작되기 전에 인앱 대상 기준을 충족해야 하기 때문입니다. OneSignal에서 새 세션은 사용자가 앱이 백그라운드에 있거나 닫힌 후 최소 30초 후에 앱을 열 때 시작됩니다. 자세한 내용은 인앱 메시지가 표시되는 방법에 대한 가이드를 참조하세요.
2

인앱 메시지 만들기.

  • OneSignal 대시보드에서 Messages > In-App > New In-App으로 이동하세요.
  • Welcome 메시지를 찾아 선택하세요.
  • Audience를 앞서 사용한 Test Users 세그먼트로 설정하세요.

인앱 메시지로 'Test Users' 세그먼트 타겟팅

3

원하는 경우 메시지 내용을 사용자 지정하세요.

인앱 Welcome 메시지 사용자 지정 예제

4

Trigger를 'On app open'으로 설정하세요.

5

빈도 예약.

Schedule > How often do you want to show this message? 아래에서 Every time trigger conditions are satisfied를 선택하세요.

인앱 메시지 예약 옵션

6

메시지를 라이브로 만드세요.

Make Message Live를 클릭하여 테스트 사용자가 앱을 열 때마다 사용할 수 있도록 하세요.
7

앱을 열고 메시지를 확인하세요.

인앱 메시지가 라이브가 된 후 앱을 여세요. 다음과 같이 표시되어야 합니다:

장치에 표시된 Welcome 인앱 메시지

메시지가 표시되지 않나요?
  • 새 세션 시작
    • 다시 열기 전에 최소 30초 동안 앱을 닫거나 백그라운드로 전환해야 합니다. 이렇게 하면 새 세션이 시작됩니다.
    • 자세한 내용은 인앱 메시지가 표시되는 방법을 참조하세요.
  • 여전히 Test Users 세그먼트에 있나요?
    • 재설치하거나 장치를 전환한 경우 테스트 구독에 장치를 다시 추가하고 Test Users 세그먼트의 일부인지 확인하세요.
  • 문제가 있나요?
    • 위의 단계를 재현하는 동안 디버그 로그 가져오기를 따르세요. 이렇게 하면 [email protected]과 공유할 수 있는 추가 로깅이 생성되며 무슨 일이 일어나고 있는지 조사하는 데 도움을 드립니다.
OneSignal SDK를 성공적으로 설정하고 다음과 같은 중요한 개념을 배웠습니다:

​
푸시 권한 프롬프트

앱을 열 때 즉시 requestPermission()을 호출하는 대신 더 전략적인 접근 방식을 취하세요. 권한을 요청하기 전에 인앱 메시지를 사용하여 푸시 알림의 가치를 설명하세요. 모범 사례 및 구현 세부 정보는 푸시 권한 프롬프트 가이드를 참조하세요.

​
FAQ

​
클라이언트 측에서 OneSignal 데이터에 액세스하려면 어떻게 하나요?

Median Native JavaScript Bridge 메서드 median_onesignal_info를 사용하여 OneSignal Subscription ID(oneSignalUserId) 및 구독 상태를 가져오세요.
javascript
  var osSubscriptionId = "the OneSignal Subscription ID string";
  var isSubscribedToPushNotifications;

  median.onesignal.onesignalInfo().then(function (oneSignalInfo) {
    console.log(oneSignalInfo);
    osSubscriptionId = oneSignalInfo.oneSignalUserId;
    isSubscribedToPushNotifications = oneSignalInfo.oneSignalSubscribed;
  });
자세한 내용은 Median.co Docs를 참조하세요

​
Median 앱에 딥 링크 푸시 알림을 보내려면 어떻게 하나요?

Median 앱은 팝업 브라우저를 여는 대신 네이티브 환경을 위해 딥 링킹을 사용합니다.

​
OneSignal 대시보드 사용 시:

  • Launch URL 필드를 사용하지 마세요.
  • 대신 Additional Data 필드를 사용하세요.
    • 키 추가: targetUrl(대문자 “U”)
    • 값 추가: 사용자가 열기를 원하는 URL.

targetUrl과 함께 Additional Data 사용

​
REST API 사용 시:

푸시 페이로드의 data 객체에 targetUrl을 포함하세요. 예: 
{
  "app_id": "YOUR-APP-ID",
  "include_player_ids": ["USER-ID"],
  "data": { "targetUrl": "https://example.com/page" },
  "contents": { "en": "Check out this page!" }
}

​
웹과 모바일 모두에 보내나요?

웹과 모바일에 동시에 보내는 경우: Launch URL 섹션에서 “Different URL for web/app”을 선택하세요. 재정의를 방지하려면 APP URL 필드를 비워 두세요.

웹 및 모바일용 다른 URL 구성