캠핑인스타 만들기 5편: '이번캠(MyCamp)' 리브랜딩과 Capacitor로 Apple App Store 심사 통과한 이야기

지난 4편에서는 동적 OG 이미지 생성 엔진과 Supabase RLS/Image API 관련 디버깅 삽질기를 다뤘다.

이번 5편에서는 웹 서비스에 머물지 않고, 서비스 이름을 이번캠(MyCamp)으로 정식 리브랜딩함과 동시에 Capacitor를 활용해 Apple App Store(iOS)에 실제 앱을 성공적으로 올린 과정을 공유한다.

1. '캠핑인스타'에서 '이번캠(MyCamp)'으로의 서비스 리브랜딩

프로젝트 초기에는 '캠핑인스타'라는 개발용 임시 프로젝트명을 사용했지만, 실제 서비스를 배포하고 유저를 맞이하기 위해서는 명확한 브랜드 정체성이 필요했다.

• 브랜드명: 이번캠 (MyCamp)
• 슬로건: "캠핑 갈 곳, 혼자 고민하지 말고 같이 고르기"
• 웹 서비스 주소: https://camp.sooyoung.pe.kr
• App Store: https://apps.apple.com/kr/app/이번캠/id6790258305

단순한 캠핑 일기장을 넘어, 캠핑 후보지 탐색부터 지도 기반 저장, 그리고 다녀온 뒤의 찐후기 공유까지 하나의 흐름으로 잇는 서비스라는 정체성을 확립했다.

2. 왜 Capacitor(하이브리드 앱 셸)를 선택했는가?

Next.js 16 (App Router)으로 작성된 웹 애플리케이션의 경험을 모바일 앱으로 확장할 때 2가지 선택지가 있었다.

1. React Native / Flutter로 완전히 재작성 → 1인 개발자 특성상 웹과 앱 2개의 코드베이스를 유지하기엔 공수가 너무 큼.
2. Capacitor 기반의 앱 셸(App Shell) 도입 → 기존 웹의 모든 기능과 디자인을 그대로 유지하면서 iOS/Android 네이티브 플러그인(푸시 알림, 카메라, 오버레이 상태바 등)을 연동.

결국 단일 코드베이스 유지 생산성을 위해 Capacitor를 선택했다. capacitor.config.ts 설정 하나로 배포된 웹 URL(https://camp.sooyoung.pe.kr)을 원격으로 동기화하는 구조를 갖췄다.

// capacitor.config.ts
import type { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  appId: "com.mycamplog.app",
  appName: "이번캠",
  webDir: "capacitor-web",
  appendUserAgent: "MyCampLogNative/1",
  backgroundColor: "#FDFCF8",
  server: {
    url: "https://camp.sooyoung.pe.kr",
    cleartext: false,
  },
};

export default config;

3. Apple App Store 심사 통과 트러블 슈팅 🔥

앱스토어 심사는 1인 개발자에게 늘 거대한 벽이다. 이번 출시 과정에서 해결해야 했던 핵심 이슈들을 정리했다.

🐛 이슈 1: "소셜 로그인이 있다면 애플 로그인 필수" — Sign in with Apple

확인할 규정: 외부 소셜 로그인으로 주 계정을 만드는 앱은 Apple의 로그인 서비스 기준을 확인해야 한다. 예외 조건도 있으므로 모든 앱이 자동으로 반려된다고 단정하지 않는다. 이 프로젝트는 Apple 로그인을 함께 제공했다.

해결: Supabase Auth와 Apple Developer 계정을 연동하고, 애플 로그인 OAuth Provider 및 인증 콜백 스키마를 구성했다.

# Supabase Redirect URL 허용 목록 추가
com.mycamplog.app://auth/callback
https://camp.sooyoung.pe.kr/auth/callback

앱 내에서 로그인 완료 후 네이티브 딥링크(com.mycamplog.app://)로 안전하게 되돌아오도록 미들웨어와 처리 흐름을 보완했다.

🐛 이슈 2: 아이폰 노치(Safe Area) 및 상태바 UI 깨짐

증상: 웹에서는 깔끔했던 상단 헤더가 아이폰의 노치(Dynamic Island) 및 하단 홈 인디케이터 영역과 겹쳐 버튼 클릭이 잘 안 되거나 텍스트가 잘리는 현상 발생.

해결: Tailwind CSS의 pt-safe, pb-safe 유틸리티와 Viewport 메타 태그 옵션을 지정해 모바일 기기별 인셋(Inset) 영역을 자동으로 확보했다.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

🐛 이슈 3: 단순 웹뷰 앱 리젝트 방지 (Guideline 4.2)

Apple은 단순히 웹사이트를 틀어주는 빈 껍데기 앱(Minimum Functionality)을 엄격히 금지한다.

대응 전략:

• 모바일 전용 하단 탭바(Bottom Navigation Bar) 제공
• Capacitor 카메라 플러그인을 통한 생생한 실시간 사진 촬영 및 다중 업로드
• 푸시 알림(Push Notifications) 및 스플래시 스크린 애니메이션 적용
• 모바일 가로 스크롤 Snap 피드 갤러리 렌더링

네이티브 UX 요소들을 꼼꼼히 보완한 덕분에 심사 한 번에 최종 승인(Approved)을 받을 수 있었다!

4. 이번 릴리스 요약

실제 화면으로 보는 현재 서비스

아래 이미지는 이번캠 프로젝트의 Google Play 제출용 실제 화면이다. 웹과 앱이 공유하는 검색·상세·플랜·피드 흐름을 보여 준다. 캡처에 보이는 후기, 날짜와 건수는 당시 화면의 데이터이며 현재 운영 데이터와 다를 수 있다.

클릭하여 확대

검색 결과에서 캠핑장 이름, 주소와 사진을 확인하고 상세 화면으로 이동한다. 공공데이터와 저장된 정보는 예약 재고가 아니므로, 실제 운영 시간이나 가격은 캠핑장 측에 다시 확인해야 한다.

클릭하여 확대

상세 화면에서 지도와 홈페이지를 확인한 뒤 장소를 저장하거나 플랜에 담는다. ‘예약’은 캠핑장 측의 외부 안내로 이동하는 연결이며 이번캠이 실시간 예약 가능 여부를 보장하는 기능은 아니다.

클릭하여 확대

플랜은 ‘가보고 싶은 장소’를 묶는 단계다. 방문 이후 남기는 기록과 분리해, 아직 가지 않은 장소를 방문 후기처럼 보이지 않게 한다. 로그인한 사용자는 자신의 플랜을 관리하고 공개 플랜을 참고할 수 있다.

클릭하여 확대

피드는 다녀온 뒤 남기는 사진과 장소 기록이다. 검색에서 찾은 장소, 플랜에 담은 후보, 실제 방문 기록이 연결되는 것이 이번캠의 중심 사용 흐름이다.

Android 출시 이후에도 구분해서 점검할 것

Google Play의 이번캠에서도 앱을 받을 수 있다. Android가 출시됐다는 사실과 모든 기기에서 기능이 동일하게 동작한다는 주장은 다르다. 출시 뒤에는 다음 조건을 나눠 확인해야 한다.

이는 출시 후 점검 기준이며, 모든 기기에서 이미 통과했다는 시험 결과를 의미하지 않는다. 현재 capacitor.config.ts는 서버 주소를 환경 변수에서 읽고, 네이티브 쿠키 저장과 연결 오류 화면을 설정한다. 웹 코드 배포와 네이티브 플러그인 변경은 배포 방법이 다르므로 플러그인이나 권한 변경 시 앱을 다시 빌드하고 검증해야 한다.

웹·iOS·Android 링크와 전체 기능 흐름은 이번캠 서비스 소개에 함께 정리했다.

참고: Apple App Review Guidelines, Capacitor 설정 문서.