웹 고객이 다시 들어오게 만드는 장치 기획서
홈 화면 추가 · 앱 설치 유도 · 웹 푸시(플레어레인)

1목표와 지표

목표는 웹 고객의 재방문율을 올리는 것이다. 9/28 론칭 전후 비교에서 결제 전환은 좋아졌지만 리텐션은 변화가 없었다. 웹으로 들어온 고객이 다시 오는 경로를 따로 만들어야 한다.

효과를 따로 재기 위해 웹 방문자의 10%는 제안을 전혀 보지 않는 비교군으로 둔다(추석 이벤트 홀드아웃과 같은 방식). 기준선은 배포 직전 2주를 GA4 운영 속성 553030050에서 저장한다.

2누구에게 무엇을 권하나

한 화면에는 제안을 하나만 둔다. 「예약하기」를 누른 뒤부터 결제가 끝날 때까지는 아무것도 띄우지 않는다. 9/7 마케팅 전략서의 원칙(새 고객은 웹에서 받고, 첫 예약을 마친 고객을 앱으로 옮긴다)을 따른다.

3노출 형태와 규격

눈에 거슬리지 않도록 새 요소를 만들기보다 기존 화면 규격 안에 넣는다. 보라 채움 버튼은 화면당 하나만 쓰고, 이모지·딤 배경·저절로 사라지는 배너는 쓰지 않는다. 글자는 15px 이상, 누르는 영역은 44px 이상이다.

환경별 문구

4화면별 배치와 빈도

고객웹 55개 화면을 모두 검토했다. 노출하는 화면은 9개(1차 7, 2차 2)이고 나머지는 노출하지 않는다. 좌표는 8월통합 확정 목업(393×852) 기준이다.

빈도

5OS·브라우저별 홈 화면 추가 절차

한국 모바일 사용 비중은 Android 64.5%, iOS 35.5%, 브라우저는 Chrome 39.5% · Safari 28.6% · 웨일 16.3% · 삼성 인터넷 13.8%다(StatCounter 2026년 8월). iOS는 26.x가 약 70%이고 18.x가 약 15%다. 버전마다 누르는 순서가 달라서 안내 시트가 기기를 판별해 맞는 순서를 보여준다.

iPhone

iOS 판별: Safari 26부터 브라우저 식별 문자열의 OS 표기가 18_6에 고정된다. 그래서 OS 표기가 아니라 Safari 버전(Version/26)으로 iOS 버전을 판단한다(reentry.js에 반영). 26의 두 레이아웃은 웹에서 구분할 수 없어 안내 그림 첫 단계에 ⋯와 공유 두 아이콘을 함께 그린다. 안내는 3단계 그림 한 장으로 줄였다(⋯ 또는 공유 → 홈 화면에 추가 → 추가).

Android

앱 안 브라우저

카카오 알림톡 버튼은 공식 옵션("target":"out")으로 처음부터 외부 브라우저에서 열 수 있다. 예약 알림톡 링크에 이 옵션을 넣는 것이 가장 확실하다.

6웹 푸시 (플레어레인)

구성

• 플레어레인은 이미 앱 푸시에 쓰고 있다. 웹은 같은 프로젝트에 「웹 푸시」 채널로 사이트(https://www.aboutfishing.kr)를 등록하는 구조로 보인다. 같은 회원 ID로 setUserId 하면 한 회원 아래 앱 기기와 웹 기기가 묶인다.
• 사이트 루트에 /sw.js를 두고 첫 줄에 importScripts("https://cdn.flarelane.com/ServiceWorker.js")를 넣는다. 지금 www에는 서비스워커가 없다.
• 플레어레인 SDK의 기본 동작은 들어오자마자 권한 창을 띄우는 것이다. 그대로 붙이면 안 된다. 끄는 옵션이 있는지 플레어레인에 확인하고, 없으면 SDK 로드 자체를 「알림 받기」를 누른 뒤로 미룬다(flarelane-init.js).

언제 묻나

지켜야 할 것

• iPhone은 홈 화면에 추가한 뒤에만 알림을 받을 수 있다. Safari 탭에서 「알림 받기」를 누르면 홈 화면 추가 안내로 이어진다.
• iPhone 홈 화면 앱은 Safari와 로그인·저장공간이 분리된다. 처음 열면 다시 로그인해야 한다. 카카오·네이버 간편로그인이 첫 화면에 바로 보이게 한다.
• 앱이 있는 회원에게 웹과 앱으로 같은 알림이 두 번 가지 않게 한다. 웹 푸시 제안은 앱 설치가 확인된 고객에게 띄우지 않고, 발송 대상은 「앱 기기가 없는 회원」 조건으로 거른다(플레어레인 세그먼트 조건 지원 여부 확인).
• 광고성 알림은 기기 알림 허용과 별개로 광고성 정보 수신 동의가 있어야 한다. 제목 앞 (광고), 전송자 명칭, 수신 거부 방법을 넣고, 21시~08시에는 별도 동의 없이 보내지 않는다. 동의일부터 2년마다 수신 동의 여부를 알린다. 찜 빈자리·출항 안내처럼 고객이 요청한 거래 관련 알림은 정보성으로 분류하되 분류 기준은 법무 확인이 필요하다.
• Chrome은 오래 방문하지 않았고 반응이 적은 사이트의 알림 권한을 자동으로 회수한다. 홈 화면에 설치된 웹앱은 회수 대상에서 빠진다. 홈 화면 추가와 알림을 같이 권하는 이유다.

7앱 설치 유도

• 시점: 첫 예약 후. 예약 완료(F3), 새소식 홈 D-3 카드(F6), 예약 내역(F5), 헤더 캡슐(F1)의 문구가 앱 설치로 바뀐다.
• iPhone은 첫 예약 전에도 기본 제안이 「앱 받기」다. 웹에서 홈 화면 추가를 한 번에 할 수 없기 때문이다.
• 링크: 기존 원링크에 af_dp(보던 경로), pid=web_reentry, c=노출 자리를 붙인다. 설치 후 보던 화면으로 돌아온다.
• iOS 스마트 앱 배너는 쓰지 않는다. 캡슐·카드와 같은 일을 하면서 헤더 위에 한 줄을 더 차지하고, 보던 화면으로 돌아오게 하는 데는 원링크가 더 확실하다.
• 선결: 앱 연결 파일(apple-app-site-association, assetlinks.json)이 지금 둘 다 404다. 없으면 「앱에서 열기」가 보던 화면으로 가지 못하고 Android 설치 여부 확인도 안 된다(9/10 결정 M5).
• 앱 전용 혜택은 1차에 붙이지 않는다.

8측정

• 홈 화면 실행은 시작 주소 /?src=home으로도 구분한다. utm을 쓰지 않는 이유는 홈 화면 실행이 매번 새 캠페인 유입으로 잡혀 원래 유입 경로를 덮기 때문이다.
• 사용자 범위 맞춤 측정기준 display_mode(browser · standalone)를 추가한다.
• iOS 홈 화면 추가는 완료 신호가 없다. 홈 화면 첫 실행(reentry_launch_home)으로 대신 센다.

9공수와 일정

단위는 사람·일. 제공하는 reentry.js를 그대로 쓰는 기준이다.

• 1차: FE 6.0 · BE 0.5 · 앱 0.5 · 디자인 1.8 · QA 2.0 — FE 1명 기준 영업일 6일 안팎.
• 2차: FE 2.3 · BE 4.5 — 영업일 4~5일. 1차 판정 뒤 착수.
• 판정: 비교군 10%, 2주 차 중간 점검(중단 기준만), 6주 차 최종 판정(가입 코호트가 28일을 채우는 시점).
• 중단 기준: 결제 전환이 비교군보다 상대 3% 이상 낮으면 전체 끔 / 노출 후 10초 안 이탈률이 2%p 이상 오르면 그 자리 뺌 / 닫기 비율 70% 넘는 자리 뺌.

10결정 필요 · 실기기 확인 필요

실기기 확인

• iOS 27 Safari 홈 화면 추가 경로와 한글 메뉴 이름, iOS 26 한글 라벨, iPad
• Android Chrome에서 설치 창을 거절한 뒤 다시 뜨기까지의 기간
• 삼성 인터넷 27 이후 설치 창 발생 여부, 웨일 메뉴 경로
• iOS 홈 화면 앱에서 카카오·네이버 간편로그인이 제대로 돌아오는지
• 카카오톡 외부 열기 방식, 플레어레인 자동 권한 창 끄기 옵션

11개발 전달물

<span data-reentry-slot></span>               ← F1 헤더 (검색 아이콘 왼쪽)
<div data-reentry-done></div>                ← F3 예약 완료
<div data-reentry-bar="inbox"></div>          ← F4 알림함
<div data-reentry-line="wish|booked"></div>   ← F5 찜 목록 · 예약 내역
<div data-reentry-sub="booked"></div>         ← F6 홈 D-3 카드
<div data-reentry-row></div>                 ← F7 마이
<div data-reentry-setting></div>             ← F7 알림 설정 (2차)
AFReentry.suggest('wish')                       ← F2 찜 직후 (2차)
AFReentry.refresh()                             ← 화면이 바뀔 때마다

AFReentry.init({
  appLink: '원링크 주소', iconUrl: '/icon-192.png',
  isBooked: () => 결제 완료 예약 수 > 0,
  isMainScreen: () => 새소식·출조 화면인지,
  onEvent: (name, p) => dataLayer.push({ event: name, ...p }),
  onPushAccepted: (ctx) => AFPush.subscribe(ctx),
});

현재 www 실측(9/28): /site.webmanifest는 있으나 display·scope·id 없음, 아이콘 192·512 있음(maskable 없음), theme-color·apple 메타 없음, 서비스워커 경로 5곳 모두 404, 딥링크 파일 2종 404. HTML의 manifest 연결 태그와 번들 안 푸시 SDK 유무는 확인하지 못했다.

출처

• Chrome 설치 조건 web.dev/articles/install-criteria (2024-09) · 서비스워커 요건 삭제 developer.chrome.com/blog/update-install-criteria
• WebKit 홈 화면 웹앱 푸시 webkit.org/blog/13878 (2023-02) · Declarative Web Push webkit.org/blog/16535 (2025-03) · Safari 26 webkit.org/blog/17333 (2025-09)
• iOS 26 Safari 레이아웃 9to5mac.com/2025/09/15/iphone-ios-26-safari-new-compact-design · 홈 화면 추가 macrumors.com/how-to/save-safari-bookmark-web-app-iphone-home-screen (2025-08)
• Chrome iOS 홈 화면 추가 support.google.com/chrome/answer/9658361 · Chrome Android 바로가기 support.google.com/chrome/answer/15085120
• 삼성 인터넷 경로 extrememanual.net/34221 · beforeinstallprompt 지원 caniuse.com/mdn-api_beforeinstallpromptevent · 삼성 27.x 보고 forum.developer.samsung.com
• 카카오톡 외부 브라우저 extrememanual.net/60210 (2026-05) · burndogfather.com/271 · devtalk.kakao.com/t/topic/131149
• StatCounter 한국 2026년 8월(OS·브라우저·iOS 버전) gs.statcounter.com
• Chrome 알림 권한 자동 회수 blog.google/chromium/automatic-notification-permission (2025-10) · 조용한 권한 UI blog.chromium.org/2020/01
• 플레어레인 웹 SDK flarelane.com/ko/docs/sdk-integrations/web-sdk · iOS 웹 푸시 flarelane.com/ko/docs/sdk-integrations/ios-web-push · 기기와 유저 flarelane.com/ko/docs/targets/devices-and-users · 광고성 푸시 flarelane.com/ko/docs/settings/promotinal-push-notifications-guide
• Apple 스마트 앱 배너 developer.apple.com/documentation/webkit/promoting-apps-with-smart-app-banners · getInstalledRelatedApps developer.chrome.com/docs/capabilities/get-installed-related-apps
• 구글 전면 팝업 가이드 developers.google.com/search/docs/appearance/avoid-intrusive-interstitials · 구글플러스 사례 martech.org/google-data-show-users-hate-app-promotion-interstitials
• 29CM 헤더 「앱으로 보기」 29cm.co.kr (9/28 확인) · 번개장터 앱 유도 실험 brunch.co.kr/@growthlead/6
• 내부: 9/7 마케팅 전략서, 9/28 론칭 전후 지표 비교, 9/10 www 실측(M5)