[모멘토] #02 Capacitor로 앱 패키징 하기

안녕하세요. 모멘티 프론트엔드 개발자 김민정입니다.

[모멘토] #01 모바일 앱 패키징이란?

지난 글에서 모바일 앱 패키징이 무엇이고 어떤 이점이 있는지를 간략하게 요약했습니다.

이번 글에서는 모바일 앱 패키징에 사용한 Capacitor는 무엇인지, 앱 패키징을 하면 어떤 이점이 있는지 알아본 내용을 정리해 보겠습니다.

크로스 플랫폼 앱: 하나의 언어로 여러 운영 체제의 앱 만들기

앞선 글에서 설명드린 것처럼 앱 패키징은 웹 뷰로 웹 콘텐츠를 보여주는 앱을 만드는 것입니다. 네이티브 앱이라면 Android 앱과 iOS 앱을 각각 만들어야 합니다. 네이티브 앱은 운영 체제 별로 개발할 수 있는 특화된 언어가 다릅니다. Android의 경우는 Java 또는 Kotlin으로, iOS는 Objective-C 또는 Swift로 만들어야 합니다. 그렇다는 것은 각각 특화된 언어를 학습하여 별도의 앱을 개발해야 할 것입니다. 그것은 곧 개발 비용을 높이고, 두 앱을 별도로 유지 보수해야 하므로 관리 비용도 높이게 됩니다. 마치 웹 사이트를 하나 만들면 모든 웹 브라우저에서 접속하여 이용 가능하듯이, 하나의 언어로 만들어 여러 운영 체제에서 사용 가능한 앱을 만들 수는 없을까요?

크로스 플랫폼(Cross-platform)이란, 어떤 소프트웨어가 여러 종류의 플랫폼을 지원한다는 뜻입니다. 따라서, 크로스 플랫폼 앱은 한 가지의 언어로 개발되어 여러 종류의 모바일 운영체제에서 동작 가능한 응용 프로그램을 의미합니다. 모바일의 경우, 네이티브 언어가 아닌 다른 언어로 코드를 작성한 후 각각 컴파일하면 Android와 iOS가 이해할 수 있는 코드, 실행 가능한 앱을 만들 수 있는 것입니다. 이는 네이티브 앱을 각각 만드는 것보다 더욱 쉽고, 적은 비용이 든다는 강력한 이점을 가집니다.

Capacitor

크로스 플랫폼 프레임워크로는 Flutter, React Native, Cordova(PhoneGap), Capacitor 등이 있습니다. Flutter의 경우 Dart라는 언어, React Native, Cordova, Capacitor 등은 JavaScript 언어를 사용해 개발할 수 있습니다. 그중 Capacitor를 사용해서 앱 패키징 업무를 수행했습니다.

Capacitor는 JavaScript 또는 TypeScript를 사용하기 때문에 프론트엔드 개발자가 사용하기에 친숙하고 학습이 용이합니다. 상세한 공식 문서를 제공하고 해당 프레임워크 개발자와 사용자가 함께 이용할 수 있는 커뮤니티 서비스도 제공하고 있어요. 그리고 네이티브 기능을 사용할 수 있게 공식으로 제공하고 있는 플러그인과 함께 커뮤니티 사용자들이 만든 비공식 플러그인, 심지어는 Cordova의 플러그인을 이식해서 사용할 수 있어 기능 구현 가능 범위도 넓다는 이점이 있었습니다.

Capacitor 사용하기

간단히 모멘티 웹 사이트를 보여주는 앱을 예시로 앱 패키징 기본 방법을 소개할게요.

먼저, Capacitor v5로 Android, iOS 앱을 만들기 위한 요구 조건을 충족해야 합니다.

• Core Requirements

  • NodeJS > 16

• Android Requirements

  • Android Studio > 2022.2.1.

  • Android SDK

• iOS Requirements

  • Xcode > 14.1

  • Xcode Command Line Tools (additional)

  • Homebrew (additional)

  • Cocoapods

Node를 16 이상 버전으로 설치해야 합니다. 터미널에서 node --version 명령어를 통해 버전을 확인한 후, 만약 설치되어 있지 않거나 낮을 경우 더 높은 버전의 설치가 필요합니다.

iOS 앱으로 만들기 위해서는 Xcode 14.1 이상 버전을 설치해야 합니다. 또한 빌드 및 테스트 기능을 Command로 이용하고 싶다면 Xcode Command Line Tools를 추가적으로 설치해 주어야 합니다. 그리고 MacOS의 패키지 매니저 Homebrew를 설치, 사용하여 iOS 의존성 매니저 Cocoapods를 설치해 주어야 합니다.

# install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# install CocoaPods
brew install cocoapods

Android 앱으로 만들기 위해서는 Android Studio 2022.2.1. 이후 출시 버전을 설치해 주어야 합니다. 그리고 Android Studio의 System Settings에서 Android SDK Platform > API 22로 설치해 주시면 됩니다.

👩‍💻

그 이후, 터미널에서 Capacitor CLI를 이용해 Capacitor 프로젝트를 생성하고, 각각 Android와 iOS 플랫폼을 설치하여 네이티브 앱 프로젝트를 생성해 줄 수 있습니다.

# create a blank capacitor project
npm init @capacitor/app

cd {MyApp}
npm i

# install android platform
npm i @capacitor/android
# create android project
npx cap add android

# install iOS platform
npm i @capacitor/ios
# create iOS project
npx cap add ios

# make and update native project code
npm run build
npx cap sync android
npx cap sync ios

capacitor.config.json 파일을 통해, 웹뷰에 띄울 외부 URL을 지정할 수 있습니다.

{
	"server": {
		"url": "https://momenti.biz", // Load an external URL in the Web View.
	}
}

하나의 코드가 Android, iOS 앱이 되어 간단하게 앱 패키징을 이뤄낸 것을 확인할 수 있습니다.

물론 네이티브 기능을 실제로 사용하기 위해, 보다 더 네이티브 앱처럼 동작하기 위해서는 여러 코드 수정과 작업들이 필요합니다. 하지만 앱 패키징 자체를 각각 네이티브로 구현하는 것보다 훨씬 빠르고 간단하게 만들 수 있게 해줍니다!

혹시 앱 패키징이 무엇인지, Capacitor를 어떻게 사용하여 패키징 할 수 있는지 검색하다가 이 글을 만나 읽은 분들께 작게나마 도움이 되었으면 좋겠습니다.

지금까지 모바일 앱 패키징 및 Capacitor 게시글을 읽어주셔서 감사합니다!

출처

Capacitor Docs