[친구하자] Capacitor로 웹을 앱으로 빌드해보자!

in ProjectDiary

웹을 앱으로 빠르게 빌드하기 위해 Capacitor를 사용해보기

  • “친구하자”를 웹으로 MVP 완성을 하니, 이걸 앱으로 빌드해서 사용자들이 더 쉽게 사용할 수 있으면 좋겠다고 생각했다.
  • 원래는.. 개발자의 입장으로 링크로 이동하는 방식이 쉬울꺼라고 생각했는데, 막상 사용자에게 링크를 보내주니까 어려움을 토로하거나 방식에 의문을 가지는 사람들이 많았다..
    • 링크는 일단 어디 저장해놓고 찾아서 연결해야하고..
    • 핸드폰에서 링크를 통해 이동하는 방식이 익숙하지 않은 사람들이 더 많았다.. (일회용 링크정도만 다들 사용하는 것 같았다.)
  • 네이티브 앱으로 개발하는건 일단 시간이 많이 드니까 최대한 빠른 방법을 찾아보다가 Capacitor 플러그인을 찾게 되었다.

Capacitor

  • Capacitor는 기존 React웹을 네이티브 앱 컨테이너에 담아주는 플러그인이다.
  • 기존의 React 코드베이스를 거의 건들이지 않고 모바일 앱을 만들 수 있게 해준다.
기존 React 웹 앱
         ↓
    Capacitor 추가
         ↓
네이티브 WebView에서 실행
(iOS/Android 앱으로 패키징)
  • 설치만 해서 간단하게 앱으로 빌드할 수 있다!
  • 일단 나는 ios로 빌드하는 것을 아래에 보여주겠다.

Capacitor로 iOS 앱 빌드하기

  • 일단 내 기존 프론트 프로젝트 스펙을 정리하자면

    • 많은 의존성을 가짐(특히 @radix-ui/* 패키지들)
    • React 18 + TypeScript + Vite 스택
    • Express 서버 통합
  • 따라서 npm이 아닌 pnpm을 사용하고 있다.
  • capacitor 공식문서에는 npm으로 설명이 나와있는데, 그냥 pnpm 명령어로만 바꿔서 똑같이 진행해줬다.

1. Capacitor의 메인 의존성 설치

pnpm add @capacitor/core @capacitor/cli

프로젝트 루트 디렉토리에 위의 명령어를 입력!

성공 이미지

2. Capacitor Config 초기화

npx cap init
  • 여기서는 이름과, Project ID를 입력하라고 한다.
  • Project ID는 도메인 네임 형태로 적어주면 된다. (예: com.example.app)
  • 나는 프론트 도메인을 사놓은게 있어서 그대로 넣었다.

성공 이미지2

3. 플랫폼 추가 (android, iOS)

# Android
pnpm add @capacitor/android

# iOS (macOS에서만)
pnpm add @capacitor/android

  • 나는 맥북에서 작업하고 있기 때문에 둘다 추가해줬다.

    ios 만들고 싶어서 3년전에 맥북 샀던 기억..

  • 성공하면 아래와 같은 메시지가 나온다.

성공 이미지3

이제 실행해보자!!

# Android
npx cap run android

# iOS
npx cap run ios

일단 ios로 아래와 같이 실행 성공!

성공 이미지4


다음에 android studio 업데이트를 좀 하고.. (안한지 넘 오래됌..) 아래와 같이 빌드 성공!

성공 이미지5