앱을 잠시 접고 홈 화면에 추가하는 웹으로 갔다

앱으로 만들고 있었다

글연은 원래 안드로이드 앱이 중심이었습니다. Flutter로 가입, 지도, 호감, 매칭 화면까지 다 만들었고, Google 로그인과 푸시 알림, 기기 무결성 검사도 붙였습니다. 웹은 앱으로 가입한 사람이 컴퓨터에서 확인하는 보조 화면 정도로 생각했습니다.

막힌 곳은 코드가 아니라 출시 절차였습니다. Play 스토어에 새로 만든 개인 개발자 계정은 테스터 열두 명이 14일 동안 연속으로 앱을 써야 프로덕션 출시를 신청할 수 있습니다. 본인인증과 결제는 사업자등록이 있어야 붙일 수 있습니다. 하나씩은 넘을 수 있는 벽인데 한꺼번에 쌓이니 베타를 언제 열 수 있을지 계산이 서지 않았습니다.

홈 화면에 추가하는 웹으로 방향을 바꿨다

그래서 앱을 잠시 접고 PWA로 가기로 했습니다. 웹사이트를 홈 화면에 추가하면 아이콘이 생기고 주소창 없이 앱처럼 열립니다. 스토어 심사도 설치 파일도 필요 없습니다. 앱 코드는 지우지 않고 그대로 두었습니다. 사업자등록 문제가 풀리면 다시 꺼낼 생각입니다.

대신 앱에서 하던 일을 웹으로 옮겨야 했습니다. 가입, 사진 올리기, 지역 확인, 프로필 쓰기까지 전부 웹에서 되게 바꿨습니다. 휴대폰 위치는 브라우저의 위치 기능을 쓰고 거리 계산은 앱에서처럼 기기 안에서만 합니다. 앱에서 기기 무결성 검사로 막던 자동 가입은 Cloudflare Turnstile의 사람 확인으로 대신했습니다.

알림 번호를 웹 푸시로 보냈다

가입 절차에는 '이 기기로 알림을 받을 수 있는지' 확인하는 단계가 있습니다. 호감과 매칭은 48시간 안에 답하지 않으면 사라지기 때문에 알림을 못 받는 회원은 사실상 서비스를 쓸 수 없습니다. 앱에서는 FCM으로 번호를 보냈는데 웹에서는 웹 푸시를 씁니다. 브라우저가 만든 구독 정보를 서버에 맡기고 서버가 그 주소로 암호화한 알림을 보냅니다.

여기서 아이폰이 걸렸습니다. iOS는 16.4부터 웹 푸시를 지원하지만 홈 화면에 추가한 웹 앱에서만 됩니다. 사파리 탭에서는 알림 권한 창 자체가 뜨지 않습니다. 첫 화면 바로 아래에 기기별 설치 안내를 넣은 것도 그래서입니다. 아이폰은 공유 버튼에서 '홈 화면에 추가', 안드로이드 크롬은 설치 창, 컴퓨터는 주소창 옆 설치 버튼입니다. 가입 중 알림 단계에 왔는데 사파리 탭이라면 거기서 설치 안내를 보여 주고 멈춥니다.

카카오톡 안에서 열면 아무것도 안 된다

또 하나는 앱 안 브라우저였습니다. 카카오톡이나 인스타그램에서 링크를 누르면 그 앱 안의 브라우저로 열리는데, 여기서는 홈 화면 추가도 웹 푸시도 안 됩니다. 홍보를 SNS로 할 생각이었으니 첫 방문의 상당수가 여기로 들어올 겁니다.

그래서 브라우저 정보를 보고 앱 안 브라우저면 먼저 알려 줍니다. 카카오톡은 바깥 브라우저로 여는 전용 주소가 있어서 버튼 하나로 크롬이나 사파리로 넘깁니다. 그 밖의 앱은 메뉴에서 '브라우저에서 열기'를 누르라고 안내합니다.

앱을 포기한 건 아니다

웹으로 바꾸면서 잃은 것도 있습니다. 앱에서는 매칭 화면 캡처를 막을 수 있었지만 웹은 막을 수 없습니다. 대신 사진을 볼 때 보는 사람의 표시를 워터마크로 새기고 캡처 키를 누르면 화면을 잠깐 가립니다. 완벽하진 않아도 함부로 퍼 나르기는 어렵게 만드는 정도입니다.

지금은 웹으로 베타를 열고 실제로 쓰는 사람의 반응을 먼저 보려 합니다. 정식 앱은 그 뒤입니다. 순서를 바꿨을 뿐 목표는 같습니다.