Capacitor란 ?

Ionic Capacitor는 Ionic 팀에 의해 개발된 크로스 플랫폼 하이브리드 애플리케이션 개발 프레임워크입니다.
이는 최신 웹 기술을 사용하여 모바일, 데스크탑 및 웹에서 실행할 수 있는 애플리케이션을 만들 수 있도록 설계되었습니다.
다음은 Ionic Capacitor에 대한 주요 정보입니다.

주요 특징

  1. 네이티브 API 접근:
    • Capacitor는 네이티브 API에 직접 접근할 수 있어 더 나은 성능과 유연성을 제공합니다.
    • Cordova와 달리, 많은 네이티브 기능을 플러그인 없이 직접 사용할 수 있습니다​.
  2. Progressive Web App (PWA) 지원:
    • Capacitor는 PWA를 기본적으로 지원합니다. 이를 통해 웹 애플리케이션을 모바일 애플리케이션처럼 사용할 수 있으며, 웹 브라우저에서 직접 설치 및 실행할 수 있습니다.
  3. 현대적인 웹 기술 사용:
    • HTML, CSS, JavaScript와 같은 최신 웹 기술을 사용하여 개발할 수 있습니다.
    • 이는 웹 개발자가 모바일 애플리케이션 개발로 쉽게 전환할 수 있게 합니다​.
  4. 백워드 호환성:
    • Capacitor는 대부분의 Cordova 플러그인과 호환됩니다. 이는 기존의 Cordova 프로젝트를 Capacitor로 쉽게 전환할 수 있게 합니다​.
  5. 클라우드 빌드 및 배포:
    • Ionic 팀은 Capacitor와 통합된 클라우드 빌드 및 배포 서비스를 제공합니다. 이를 통해 개발자는 다양한 플랫폼에서 앱을 쉽게 빌드하고 배포할 수 있습니다​.

장점

  • 성능: 네이티브 API에 직접 접근할 수 있어 Cordova보다 성능이 우수합니다.
  • 유연성: 플러그인 없이 네이티브 기능을 활용할 수 있어 개발이 더 유연합니다.
  • 현대적인 개발 경험: 최신 웹 기술을 사용하여 현대적인 개발 경험을 제공합니다.
  • 강력한 지원: Ionic 팀과 커뮤니티의 강력한 지원을 받을 수 있습니다.

단점

  • 상대적으로 새로운 프레임워크: Cordova에 비해 커뮤니티와 플러그인 생태계가 아직 성장 중입니다​ (No-code Mobile Builder)​​ (MobiLoud)​.

개발 환경

  • Capacitor는 CLI 도구를 통해 프로젝트를 생성하고 관리할 수 있습니다. npx cap init 명령을 사용하여 프로젝트를 초기화하고, npx cap add 명령을 사용하여 플랫폼을 추가할 수 있습니다.
  • Capacitor는 Angular, React, Vue와 같은 프레임워크와 쉽게 통합할 수 있으며, 기존의 웹 프로젝트를 모바일 애플리케이션으로 확장할 수 있습니다

Ionic 과 Cordova 차이

  • 모바일 WebView로부터 디바이스의 Native 기능에 접근한다는 점에서 같은 기능을 한다.
  • 코도바는 전체를 빌드 하기 떄문에 시간이 많이 걸리고 작은 테스트하기에 번거롭다. 캐패시터는 코도바 imports 없이 앱을 만드는데, 대신에 캐패시터 자체의 네이티브 플러그인을 import 한다.
  • 코도바와 달리 캐패시터는 앱 빌드를 안드로이드 스튜디오 또는 Xcode에서 직접한 후, 디바이스 또는 Emulator 에서 테스트가 가능하다. 만족한다면 바로 빌드 및 퍼블리시가 가능하고, 코드를 조금 바꾸어야 한다면 소스 코드를 변경하고 터미널에 npm run build, npx cap copy (굉장히 빠름) 한 후 Xcode 또는 안드로이드 스튜디오를 열어서 바로바로 테스트 해볼 수 있다.

결론

Ionic Capacitor는 최신 웹 기술을 사용하여 크로스 플랫폼 애플리케이션을 개발하려는 개발자에게 매우 유용한 도구입니다. 특히 성능과 유연성을 중시하는 프로젝트에 적합하며, PWA 지원과 같은 현대적인 기능을 제공합니다. Cordova에서 Capacitor로의 전환을 고려하고 있다면, 대부분의 플러그인이 호환되므로 큰 어려움 없이 전환할 수 있습니다.

Capacitor 시작하기

# ionic CLI 설치 
npm install -g @ionic/cli@7.1.1

# 노드버전 v16 으로 변경 
nvm use 16 

# 노드 v16 설치
npm install --legacy-peer-deps     

# Angular v15 패키지 설치
npm i @angular/cli@15.0.0

Capacitor 설치 및 초기화


# Capacitor 설치 및 초기화
npm install @capacitor/cli@4.7.1 @capacitor/core@4.7.1

# 초기화 과정에 애플리케이션 이름과 ID를 묻습니다. 적절한 이름과 ID를 입력합니다
npx cap init

2.Capacitor 플랫폼 추가

Android iOS 플랫폼을 추가합니다.

# capacitor 플랫폼 추가 (Android , iOS)
npm install @capacitor/android@4.7.1 
npm install @capacitor/ios@4.7.1 

# 안드로이드 플랫폼 추가 
npx cap add android

# # iOS 플랫폼 추가
npx cap add ios

작업 후 안드로이드 빌드 전

# Android 빌드 하기전에 아래 명령어를 통해 리소스 및 변경된 플러그인을 싱크(업데이트) 합니다.
npx cap sync android

안드로이드 & iOS 이름 및 버전 변경방법

Capacitor는 각각 안드로이드면 안드로이드 스튜디오 iOS 이면 스위프트에서 Name, Version 등 세부적인거는 각 플랫폼에서 진행해야 한다.

image

# 앱의 이름을 변경하려면 다음 값을 변경 app_name하세요 strings.xml.

<string name="app_name">MyApp</string>

# 특히 앱에 단일 활동이 있는 경우 활동 이름을 일치하도록 변경하는 것이 좋습니다.

<string name="title_activity_main">MyApp</string>

버전 변경방법

android_capacitor01

# build.gradle 파일 수정
# android/app/build.gradle 파일을 열고 versionCode와 versionName 속성을 설정합니다

스플래시(Splash) 화면과 그 목적

스플래시 화면은 앱의 본격적인 화면이 나오기 전에 1~2초 간 잠시 나타나는 화면이다. 일반적으로 단색 배경에 애플리케이션 로고 중앙에 표시되는 경우가 많다. 이 화면은 왜 필요한 걸까? 브랜드나 앱 이미지를 각인시키기 위해서. 하지만 Splash 화면의 주 목적은 따로 있다. 스플래시 화면이 없는 어플리케이션을 열어 보면, 메인 화면이 표시되기 전에 0.x초동안 텅 빈 화면이 나타난다. 짧은 시간이지만 이렇게 텅 빈 화면이 나타나는 것은 분명히 보기 좋은 현상은 아니다. Splash 화면은 이러한 공백을 채우기 위해 제작된다.

@capacitor/splash-screen설치

먼저, @capacitor/splash-screen 플러그인을 설치합니다.


# 스프래시 스크린 설치 & 버전에 따라 재설정할 필요 있음
npm install @capacitor/splash-screen 

# 필자는 버전에 맞춰 설치
npm install @capacitor/core@4 @capacitor/cli@4 @capacitor/android@4 @capacitor/device@4 @capacitor/splash-screen@4 --legacy-peer-deps

# 안드로이드 동기화
npx cap sync android

스플래시 화면 및 아이콘

@capacitor/assets 도구를 사용하여 iOS, Android 또는 프로그레시브 웹 애플리케이션용 스플래시 화면과 아이콘을 생성할 수 있습니다 .

  1. 먼저, 다음을 설치하세요 @capacitor/assets
# JPEG,PNG 소스 이미지를 자르고 크기를 조정해 안드로이드에 맞게 리사이징 해줍니다
npm install @capacitor/assets --save-dev

  1. 프로젝트 루트 디렉터리에 assets 있으면 그대로~ 없다면 폴더를 만듭니다.

  2. assets 폴더 안에 icon, splash.png 파일을 추가합니다.

    assets/
├── icon-only.png
├── icon-foreground.png
├── icon-background.png
├── splash.png
└── splash-dark.png
  • 아이콘 파일은 최소한 1024pxx 이상이어야 합니다 1024px.
  • 시작 화면 파일은 최소한 2732pxx 이상이어야 합니다 2732px.
  • 형식은 jpg또는 일 수 있습니다 png.
# 모든 기본 옵션으로 안드로이드에 맞춰 리소스를 생성합니다
npx capacitor-assets generate --android

# 안드로이드 동기화
npx cap sync android

안드로이드 동기화 후 안드로이드 스튜디오에서 실행

  1. 앱 + 전체 스플래시 스크린 구현방법 Splash Screen 은 일반적으로 앱이 실행될 때 나타나는 화면입니다. YouTube 앱 실행 시 나오는 잠깐 로고화면이 나오고 앱 메인화면으로 진입되는데, 여기서 로고가 나온 화면이 Splash Screen 입니다.

이때 앱을 실행하면 나타나는 흰화면 혹은 검은화면을 실제 Splash Screen으로 띄워 개선하는 방법에 대해 알아보겠습니다.

1) splash.xml 생성 /drawbale 에 splash.xml 을 추가합니다.


<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:colorAccent">@color/colorAccent</item>
    </style>

    <!-- Splash screen theme -->
    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme">
        <item name="android:windowBackground">@drawable/splash</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>
</resources>
  1. 스플래시 참고사항
    • 안드로이드 12 이상 Android12 이상에서 Google은 스플래시 화면이 표시되는 방식을 변경하여 Android 11 이하에서 가능했던 전체 화면 이미지 대신 색상이 있는 작은 아이콘을 사용했습니다. 이 변경 사항에 대한 추가 문서는 [developer.android.com] (https://developer.android.com/develop/ui/views/launch/splash-screen#splash-screen-resources) 에서 찾을 수 있습니다 .

Status Bar

<!-- 버전에 맞게 플러그인 설치 -->
npm install @capacitor/status-bar@^4.0.0 --legacy-peer-deps

안드로이드 AndroidManifest.xml android/app/src/main/AndroidManifest.xml 파일을 열고 android:theme 속성을 설정합니다.