# 웹 푸시 설정 Pushwoosh로 웹 푸시 알림을 보내려면 웹 푸시 플랫폼을 설정하고 사용자에게 표시되는 구독 프롬프트를 활성화해야 합니다. 설정을 시작하려면 **설정 > 플랫폼 구성 > 웹 푸시 알림**으로 이동하여 **구성**을 클릭하세요. ![웹 푸시 알림 구성](/web-configuration-1.webp) ## 모든 브라우저에 대한 웹 푸시 구성 (구형 Safari 버전 제외) 이 구성은 이제 웹 푸시 알림을 기본적으로 지원하는 최신 버전의 Safari를 포함한 모든 최신 브라우저에 적용됩니다. **참고:** 구형 Safari 버전(macOS 10.14–12)은 별도의 설정이 필요합니다. 전용 섹션에서 구성할 수 있습니다. 자세히 알아보기 설정을 시작하려면 **모든 브라우저 구성** 아래의 **구성**을 클릭하세요. ![모든 브라우저에 대한 웹 푸시 구성](/web-configuration-2.webp) 구성 창에서 다음 옵션 중 하나를 선택하세요: * **새 푸시 구성 만들기** 이전에 다른 서비스를 통해 웹 푸시 알림을 설정한 적이 없는 경우 권장됩니다. Pushwoosh가 자동으로 새 VAPID 키 쌍을 생성합니다. * **기존 구성 사용** 예를 들어 Firebase에서 가져온 VAPID 키가 이미 있고 사용자에게 다시 구독을 요청하지 않고 계속 사용하려는 경우 이 옵션을 선택하세요. ### 새 푸시 구성 만들기 이전에 다른 서비스로 웹 푸시 알림을 설정한 적이 없다면 **새 푸시 구성 만들기**를 선택하세요. Pushwoosh가 필요한 VAPID(Voluntary Application Server Identification) 키를 자동으로 생성합니다.
VAPID 키란 무엇인가요? VAPID 키는 웹 푸시 프로토콜에서 웹 브라우저로 푸시 알림을 보낼 때 애플리케이션 서버를 인증하는 데 사용되는 공개-비공개 키 쌍입니다. **공개 키**는 사용자가 알림을 구독할 때 브라우저와 공유됩니다. **비공개 키**는 서버에 남아 있으며 보내는 각 메시지에 안전하게 서명하는 데 사용됩니다.
**구성**을 클릭하여 키를 생성하고 적용하세요. ![새 푸시 구성 만들기](/web-configuration-3.webp) 생성되면 Pushwoosh는 SDK 구성에서 이 키들을 자동으로 사용합니다. [Web Push SDK 통합에 대해 자세히 알아보기](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/) ### 기존 구성 사용 이미 VAPID 키(예: Firebase를 통해 생성된 키)가 있는 경우 이를 재사용하여 Pushwoosh에서 웹 푸시 알림을 설정할 수 있습니다. 이를 위해 다음을 수행하세요: 1. **기존 구성 사용**을 선택합니다. 2. **웹 푸시 인증서** 필드에 **VAPID 공개 키**를 입력합니다. 3. **웹 푸시 비공개 키** 필드에 **VAPID 비공개 키**를 입력합니다. 4. **구성**을 클릭하여 설정을 저장하고 적용합니다. ![기존 구성 사용](/web-configuration-4.webp) #### Firebase에서 VAPID 키를 찾는 방법 Firebase에서 마이그레이션 중이고 기존 VAPID 키를 재사용해야 하는 경우 다음 단계에 따라 찾으세요. ##### 웹 푸시 인증서 1. **Firebase**에서 **프로젝트 설정 → 클라우드 메시징**으로 이동합니다. 2. **웹 구성** 섹션까지 아래로 스크롤하여 기존 키 쌍을 복사합니다. ![웹 푸시 인증서 찾기](/web-configuration-6.webp) 3. Pushwoosh 웹 구성 양식의 **웹 푸시 인증서** 필드에 붙여넣습니다. ![**웹 푸시 인증서** 필드에 붙여넣기](/web-configuration-7.webp) ##### 웹 푸시 비공개 키 1. **Firebase 콘솔**에서 **프로젝트 설정 → 클라우드 메시징 → 웹 구성**으로 이동합니다. 2. 키 쌍 옆의 **작업** 아래에 있는 **세 점 메뉴**를 클릭하고 **비공개 키 표시**를 선택합니다. 이 키는 웹 푸시 알림이 올바르게 작동하도록 하는 데 필수적입니다. ![웹 푸시 비공개 키 찾기](/web-configuration-8.webp) 3. 표시된 키를 클립보드에 복사합니다. 4. **Pushwoosh 웹 구성** 양식에서 **웹 푸시 비공개 키** 필드에 붙여넣습니다. ![웹 푸시 비공개 키 붙여넣기](/web-configuration-9.webp) 5. **적용**을 클릭하여 변경 사항을 저장합니다. ### 웹 푸시 구성 재설정 이미 웹 푸시 알림을 설정했지만 자격 증명(예: VAPID 키 교체)을 업데이트해야 하는 경우 방법은 다음과 같습니다: 1. **모든 브라우저 구성** 아래에서 **재구성**을 클릭합니다. ![웹 푸시 구성 재설정](/web-configuration-5.webp) 2. 나타나는 팝업에서 새 VAPID 키를 입력합니다: * **웹 푸시 인증서**: 새 공개 VAPID 키 * **웹 푸시 비공개 키**: 새 비공개 VAPID 키 3. **구성**을 클릭하여 변경 사항을 저장합니다. ### 구독 프롬프트 구성 푸시 알림을 보내려면 사용자가 브라우저의 시스템 수준 프롬프트를 통해 명시적으로 권한을 부여해야 합니다. 이 권한이 없으면 알림을 전달할 수 없습니다. 최근 Chrome 및 Firefox 정책 변경으로 인해 기본 권한 팝업은 사용자가 페이지와 상호 작용한 후(예: 버튼 클릭)에만 나타날 수 있습니다. 이 요구 사항을 충족하기 위해 Pushwoosh는 기본적으로 [구독 프롬프트 위젯](/ko/developer/guides/messaging-channels/subscription-prompt/)을 표시합니다. 이 위젯은 사용자가 옵트인하도록 유도하고, 동의 시 기본 브라우저 프롬프트를 트리거합니다. 프롬프트 텍스트와 모양을 사용자 정의하려면 **설정**을 클릭하세요. ![구독 프롬프트 구성](/web-configuration-16.webp) #### 프롬프트 유형 사용 가능한 구독 프롬프트에는 두 가지 유형이 있습니다: * **기본 위젯** Pushwoosh에서 제공하며 자동으로 표시됩니다. [기본 위젯 사용자 정의 방법 알아보기](/ko/developer/guides/messaging-channels/subscription-prompt/default-widget/). * **사용자 정의 위젯** 자체 위젯 디자인을 사용하세요. [자세히 알아보기](/ko/developer/guides/messaging-channels/subscription-prompt/custom-subscription-widget/) > **참고:** 플랫폼 제한으로 인해 위젯 변경 사항이 나타나는 데 최대 30분이 소요될 수 있습니다. 변경 사항이 반영되지 않으면 Pushwoosh 지원팀에 문의하세요. ### Safari 구성 (macOS 10.14–12) 구형 Safari 버전(macOS 10.14–12)에서 푸시 알림을 지원하려면 Apple 개발자 자격 증명을 사용하여 별도의 구성 프로세스를 완료해야 합니다. 이 단계는 최신 Safari 버전(macOS Ventura 이상)이 [모든 브라우저 구성](#configure-web-push-for-all-browsers-except-older-safari-versions)에 포함된 표준 웹 푸시 설정을 지원하므로 이러한 구형 버전에만 필요합니다. #### Apple에서 필요한 자격 증명 얻기 1. Apple 개발자 포털의 [인증서, 식별자 및 프로필 섹션](https://developer.apple.com/account/overview.action)으로 이동합니다. 2. 새 인증서를 추가합니다. Apple 개발자 포털의 새 인증서 추가 옵션 3. **웹사이트 푸시 ID 인증서** 유형을 선택하고 **계속**을 클릭합니다. Apple 개발자 포털의 웹사이트 푸시 ID 인증서 유형 선택 4. **웹사이트 푸시 ID**를 선택합니다. 이는 _web.com.example.domain_과 같은 고유한 역도메인 문자열입니다(_web._으로 시작해야 함). Apple 개발자 포털의 웹사이트 푸시 ID 선택 5. **인증서 서명 요청**을 업로드합니다. 인증서 서명 요청 생성에 대한 자세한 내용은 [개발자 계정 도움말 문서](https://developer.apple.com/help/account/create-certificates/create-a-certificate-signing-request)를 참조하세요. 6. 그 후, 푸시 알림 인증서를 다운로드합니다. Apple 개발자 포털에서 푸시 알림 인증서 다운로드 #### Pushwoosh에서 Safari 구성 1. **Safari 구성** 아래에서 **구성**을 클릭합니다. ![Pushwoosh에서 Safari 구성](/web-configuration-11.webp) 2. 구성 양식에서 다음 필드를 채웁니다: | | | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | **웹사이트 이름** | 푸시 프롬프트에 표시되는 웹사이트의 이름입니다. | | **허용된 도메인** | 알림 권한을 요청할 수 있는 도메인 목록입니다(한 줄에 하나씩). | | **URL 템플릿** | 사용자가 알림을 클릭할 때 열리는 URL입니다. 동적 값을 삽입하기 위해 `%@`와 같은 플레이스홀더를 지원합니다. 예: `https://yourwebsite.com/%@` | | **웹사이트 아이콘** | 정사각형 PNG 이미지(256×256 픽셀)를 업로드하세요. Pushwoosh가 다른 인터페이스에 맞게 자동으로 크기를 조정합니다. | | **키 파일** | Apple 개발자 계정에서 내보낸 `.p12` 인증서를 업로드하세요. | | **비공개 키 암호** | `.p12` 파일을 내보낼 때 사용한 암호입니다. | ![Safari 구성 양식 채우기](/web-configuration-12.webp) 3. **구성**을 클릭하여 변경 사항을 저장합니다. Pushwoosh는 아이콘 세트, 웹사이트 JSON 사전 및 Safari가 서버에서 요청하는 매니페스트 파일이 포함된 푸시 패키지를 자동으로 생성합니다. 필요할 때 언제든지 다운로드할 수 있습니다.