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

1목표와 지표

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

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

2세 공간을 나눈다

다시 들어오는 수단은 세 가지이고, 권하는 자리와 문구를 서로 섞지 않는다. 한 자리에서는 한 가지만 권한다. 「예약하기」를 누른 뒤부터 결제가 끝날 때까지는 아무것도 띄우지 않는다.

3유입 경로별 정책

먼저 띄우는 제안은 헤더 아이콘이 캡슐로 한 번 펼쳐지는 것 하나다. 들어온 경로에 따라 첫 세션에 펼칠지, 몇 번째 화면부터 펼칠지를 다르게 한다. 접힌 아이콘, 고정 자리(F3~F7), 고객이 누른 것에 대한 응답(찜 직후 칩)은 경로와 관계없이 나온다.

• 두 번째 방문부터는 경로와 관계없이 두 번째 화면부터 펼칠 수 있다(빈도 한도 안에서).
• 캡슐은 메인 화면(새소식·출조)에서만 펼친다. 기획전·선박 상세로 착지해도 그 화면에서는 펼치지 않는다.
• 안내대로 홈 화면에 추가했다고 누른 고객은 아이콘을 숨긴다. 그 뒤 주소를 직접 쳐서 다시 오면 아이콘이 안 생긴 것으로 보고 아이콘만 다시 보인다(펼치지 않음).
• 정책 값은 코드의 POLICY 표 하나에 모여 있고, init({ policy })로 바꿀 수 있다.

4노출 형태와 문구

새 요소를 화면 위에 띄우기보다 기존 화면 규격 안에 넣는다. 보라 채움 버튼은 화면당 하나, 이모지·딤 배경은 쓰지 않는다. 글자 15px 이상, 누르는 영역 44px 이상.

5화면별 배치와 빈도

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

빈도

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

한국 모바일 사용 비중은 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의 레이아웃은 웹에서 구분할 수 없다. 안내 시트는 iOS 26에 ⋯ → 공유 → 홈 화면에 추가 → 추가 4칸을 그리고 「공유 버튼이 화면에 바로 보이면 2번부터 하세요」를 붙인다. iOS 18 이하는 3칸.

Android

앱 안 브라우저

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

7웹 푸시 (플레어레인)

구성

• 플레어레인은 이미 앱 푸시에 쓰고 있다. 웹은 같은 프로젝트에 「웹 푸시」 채널로 사이트(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은 오래 방문하지 않았고 반응이 적은 사이트의 알림 권한을 자동으로 회수한다. 홈 화면에 설치된 웹앱은 회수 대상에서 빠진다. 홈 화면 추가와 알림을 같이 권하는 이유다.

8앱 설치 유도

• 시점: 첫 예약 후. 앱 공간 자리(예약 완료 F3, 홈 D-3 카드 F6, 예약 내역 F5, 마이 앱 행)에서만 권한다. 헤더 캡슐은 홈 화면 공간이라 앱을 권하지 않는다.
• 첫 예약 전 고객에게는 마이 「어바웃피싱 앱」 행만 둔다.
• 홈 화면 앱으로 들어온 iPhone 고객에게는 앱 대신 이 폰 알림을 권한다(이미 아이콘이 있으므로).
• 카카오톡 안 고객은 출항 전날 안내를 알림톡으로 이미 받으므로 예약 완료 카드는 안내만 보여준다(사실 확인 필요, 결정 R-06).
• 링크: 기존 원링크에 af_dp(보던 경로), pid=web_reentry, c=노출 자리를 붙인다.
• iOS 스마트 앱 배너는 쓰지 않는다. 헤더 위에 한 줄을 더 차지하고 두 공간이 섞인다.
• 선결: 앱 연결 파일(apple-app-site-association, assetlinks.json)이 지금 둘 다 404다. 없으면 「앱에서 열기」가 보던 화면으로 가지 못하고 Android 설치 여부 확인도 안 된다(9/10 결정 M5).

9측정

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

10사용성 검증과 완료 기준

완료 기준: 고객 페르소나가 「쉽게 추가할 수 있었다」고 답하고, 사용성 점수가 100점 만점에 평균 90점 이상, 누구도 85점 아래가 아닐 것.

방법

• 우리 고객 구성(45세 이상 약 70%, 카카오톡·광고 유입 다수, 웹 트래픽 절반이 앱 안 브라우저)을 반영한 페르소나 8명(Android 4 · iPhone 4, 유입 경로 6종)이 데모에서 자기 기기·유입 경로로 첫 방문부터 과제를 수행하고, 매 단계 화면을 보며 인터뷰에 답했다.
• 이번 검증은 AI 페르소나 시뮬레이션이다. 개발 전 실제 고객 5명 확인(아래)을 한 번 더 거친다.

결과

회차마다 페르소나의 개선 요청(교체 문구·수치)을 반영해 다시 테스트했고, 3회차에 평균 93.3점, 최저 89점으로 기준을 넘었다. 가장 많이 점수를 올린 요소는 번호 그림 안내 시트, 완료 토스트, 칩 위치(예약 버튼·날짜 목록을 가리지 않음), 앱 안 브라우저에서 옮겨 온 뒤 한 번 더 누르게 한 흐름이다.

실제 고객 확인 (개발 전)

• 대상 5명: 45세 이상 3명(Android 2, iPhone 1), 카카오톡 유입 1명, 아이폰 26 사용자 1명.
• 방법: 자기 폰으로 데모 주소를 열고 「이 사이트를 다음에 바로 열 수 있게 해 두세요」 한 과제만 준다. 설명 없이 지켜보고, 끝나면 같은 채점표로 점수를 받는다.
• 통과: 5명 중 4명 이상이 도움 없이 홈 화면에 아이콘을 만들고, 평균 90점 이상.

11공수와 일정

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

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

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

실기기 확인

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

13개발 전달물

<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', { name, top })        ← F2 찜 직후 (2차, top = 헤더 아래 px)
<a data-reentry-soldout="10/12(일)" data-name="배 이름">  ← 마감 날짜 줄 (2차)
AFReentry.bookedNow()                           ← 예약 완료 화면에서 한 번
AFReentry.refresh()                             ← 화면이 바뀔 때마다

AFReentry.init({
  appLink: '원링크 주소', iconUrl: '/icon-192.png',
  isBooked: () => 결제 완료 예약 수 > 0,
  isMainScreen: () => 새소식·출조 화면인지,
  headerHeight: 56, tabbarHeight: 64,
  onKakaoChannel: () => 카카오 채널 추가 (Promise, 2차),
  dayBeforeByKakao: true,           // 출항 전날 안내를 알림톡으로 보내는 중이면
  policy: { /* 유입 경로별 정책 덮어쓰기 (선택) */ },
  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)