🏕️ Next.js + Supabase 캠핑 소셜 앱 만들기 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

증상: 카카오/구글 로그인이 구현된 앱을 심사 제출하면 Guideline 4.8 (Sign in with 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, maximum-scale=1, viewport-fit=cover, user-scalable=no" />

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

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

대응 전략:

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

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

4. 이번 릴리스 요약

| 영역 | 주요 구현 내용 | |------|----------------| | 브랜딩 | '이번캠(MyCamp)' 정식 명칭 및 슬로건 확정 | | 플랫폼 | Next.js 16 Web + Capacitor iOS 네이티브 앱 출시 | | 인증 | Supabase Auth + Sign in with Apple / Kakao OAuth 연동 | | App Store | 애플 앱스토어 공식 출시 (id6790258305) |

🚀 향후 계획

• 안드로이드 Google Play Store 앱 셸 배포 준비
• 캠퍼들의 실제 현장 날씨/장비 세팅 기록 통계 기능 강화
• 캠핑장별 찐후기 필터링 및 지도 핀 커스텀 기능 추가

"웹 개발자라도 single codebase와 Capacitor가 있다면 빠르게 앱스토어 주인이 될 수 있다." 아이폰 App Store에서 **'이번캠'**을 검색해 다운로드 받아보세요! 🏕️📱