푸시 알림

사용자에게 Web Push 알림을 전송하고, 모든 연결은 AI에게 맡기세요.

모든 Proyecta 앱은 사용자에게 브라우저 및 PWA 푸시 알림을 전송할 수 있습니다. Proyecta가 VAPID 키 생성, 구독 저장, 토픽 관리, 전달을 처리하며 — 서드파티 계정이 필요하지 않습니다.

작동 방식

Proyecta의 푸시 알림은 네 단계로 구성된 표준 Web Push 라이프사이클을 따릅니다:

Enable — 앱의 VAPID 키가 필요한 시점에 처음으로 생성됩니다
Subscribe — 방문자 기기를 알림 수신 대상으로 등록합니다
Identify — 익명 구독을 로그인한 사용자와 연결합니다
Send — 특정 사용자, 토픽, 또는 전체 대상으로 알림을 전달합니다

앞의 세 단계는 usePush() 훅 안에서 자동으로 처리되고, 네 번째 단계는 관리자 패널에서 수행합니다.

사용자 기기 구독하기

앱에는 브라우저 쪽 흐름 전체를 처리하는 usePush() 훅이 포함되어 있습니다 — VAPID 키 가져오기, service worker 등록, Web Push 구독 생성, secret 저장, 그리고 사용자가 로그인하면 익명 구독을 계정에 연결하는 것까지 모두 처리합니다. 직접 할 일은 없습니다:

import { usePush } from '@/hooks/usePush.ts';

function NotifyMeButton() {
    const { supported, subscribed, subscribe, unsubscribe, isPending } = usePush();

    // `supported: false` means this browser cannot do push at all — hide the CTA.
    if (!supported) return null;

    return (
        <button onClick={subscribed ? unsubscribe : subscribe} disabled={isPending}>
            {subscribed ? 'Turn off notifications' : 'Notify me'}
        </button>
    );
}

옵트인 프롬프트만 필요하다면 바로 쓸 수 있는 블록도 있습니다:

import { PushOptInButton } from '@/components/blocks/PushOptInButton.tsx';

<PushOptInButton description="Get told the moment a new drop lands." />;

AI에게 요청해 보세요: "Add a 'Notify me' button to the header that opts the visitor into push."

익명 방문자도 지원됩니다 — 훅이 생성된 id로 구독시킨 뒤, 사용자가 로그인하면 해당 구독을 계정에 자동으로 다시 연결하므로 나중에 보내는 알림이 어느 쪽으로든 전달됩니다.

알림 전송하기

전송은 앱의 공개 페이지가 아니라 소유자가 수행하는 작업입니다 — 방문자의 브라우저가 전체 사용자에게 푸시를 보낼 수 있어서는 안 되기 때문입니다. 평소에는 앱 관리자 패널의 Push 섹션에서 전송합니다. 제목과 본문을 작성하고, 토픽을 고르거나 전체 브로드캐스트를 선택한 뒤, 먼저 본인 기기로 테스트를 보내 보세요.

전체 대상으로 보내거나, 특정 토픽을 구독한 방문자에게만 보낼 수 있습니다. 알림에는 제목과 본문이 포함되며, 선택적으로 아이콘과 이미지를 넣을 수 있습니다.

전송 후에는 몇 대의 기기로 전달되었고 몇 건이 실패했는지 확인할 수 있습니다. 한 가지 주의할 점: 이 수치는 web-push 전달 어댑터가 켜져 있을 때만 실제 브라우저 전달을 반영합니다. 꺼져 있을 때는 실제 전달 수가 아니라 대상으로 지정된 저장된 구독 수를 나타내므로, 전달 확인 지표로 읽지 마세요.

토픽

방문자는 전체 수신 여부만 선택하는 대신, 이름이 지정된 토픽(예: product-updates, weekly-digest)을 구독할 수 있습니다. 옵트인 목록을 관리하는 데 권장되는 방법으로 — visitor ID를 직접 추적할 필요가 없습니다. 토픽은 관리자 패널 Push 섹션의 대상 선택기로 표시됩니다.

구독 취소

동일한 usePush() 훅의 unsubscribe를 호출하세요 — 훅이 이미 구독 secret을 보관하고 있으므로 따로 저장하거나 전달할 것이 없습니다:

const { subscribed, unsubscribe } = usePush();

{
    subscribed && <button onClick={unsubscribe}>Turn off notifications</button>;
}

AI에게 맡기기

이 모든 것을 직접 작성할 필요가 없습니다. AI에게 요청해 보세요:

"Add a 'Notify me' button to the header that opts the visitor into push notifications."
"Put a push opt-in prompt on the product page, but only show it to visitors who haven't already subscribed."
"Add a topic called 'breaking-news' that visitors can opt into from the footer."

주의사항

Preview에서는 실제 푸시가 발송되지 않습니다. 브라우저는 실제 origin의 HTTPS를 요구하기 때문에, 푸시 알림은 앱의 published 버전에서만 작동합니다.
iOS에서는 PWA가 필요합니다. iOS 16.4 이상에서 Web Push는 Safari에서 직접이 아닌, 설치된 Progressive Web App(홈 화면에 추가된 앱)에서만 작동합니다.
권한 요청은 한 번뿐입니다. 사용자가 알림 권한을 거부하면 브라우저는 프로그래밍 방식으로 재요청을 허용하지 않습니다. 사용자를 브라우저 또는 기기 설정으로 안내해야 합니다.

출시 예정

예약 및 이벤트 기반 전송 — 앱 이벤트 또는 스케줄에 따라 자동으로 전송
딥 링킹 — 알림을 탭했을 때 앱의 특정 화면 열기