Capacitor 8을 사용하여 Nuxt 앱을 iOS & Android로 변환하세요.

소개

Nuxt 웹 애플리케이션이 이미 있는 경우, 이 가이드에서는 __CAPGO_KEEP_0__를 사용하여 native iOS 및 Android 모바일 앱으로 변환하는 방법을 배울 것입니다. Capacitor 8 — 성능이 향상되고 새로운 기능이 추가된 최신 버전입니다.

Capacitor은 웹 앱을 네이티브 컨테이너에 감싸줍니다. 이로써 카메라, 파일 시스템, 푸시 알림과 같은 장치 API에 접근할 수 있으면서도 Vue 코드베이스를 그대로 유지할 수 있습니다. Flutter나 React Native와 달리, code이 있는 Nuxt 앱은 그대로 유지할 수 있습니다.

학습할 내용:

기존의 Nuxt 앱을 정적 생성으로 설정합니다.
Capacitor 8에 필수적인 네이티브 플러그인을 추가합니다.
iOS 및 Android 시뮬레이터에서 빌드 및 테스트합니다.
빠른 개발을 위해 라이브 리로드를 활성화합니다.
네이티브 보기에 적합한 컴포넌트를 추가하기 위해 Konsta UI를 선택적으로 추가합니다.

새로운 프로젝트를 시작하고 싶다면, Nuxt 모바일 앱을 처음부터 구축하는 방법에 대한 가이드를 확인하세요..

Nuxt와 Capacitor을 사용하는 이점:

Code 재사용성: 웹 앱과 모바일 앱 간에 Vue 컴포넌트 및 논리를 공유할 수 있습니다.
성능: Nuxt의 정적 생성이 모바일용 최적화된 번들을 생성합니다.
자연스러운 네이티브 기능: Capacitor 플러그인을 통해 카메라, 위치 정보, 파일 시스템과 같은 장치 기능에 접근할 수 있습니다.
개발의 단순화: 친숙한 Vue/Nuxt 패턴을 사용하여 네이티브 개발을 배워야 하는 것을 피할 수 있습니다.

사전 조건

시작하기 전에 다음을 확인하세요.

Node.js 18+ : 설치되어야 함
기존 Nuxt 4 응용 프로그램
Xcode (iOS 개발을 위해 macOS만)
Android Studio (Android 개발을 위해)

모바일을 위한 Nuxt 앱 구성

첫 번째 단계는 Nuxt 앱을 정적 생성을 위해 구성하는 것입니다. Capacitor는 정적 HTML/JS/CSS 파일을 네이티브 앱으로 패키징하기 위해 정적 파일이 필요합니다.

정적 생성을 위해 package.json generate 스크립트가

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "mobile": "bun run generate && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

중요: 서버 사이드 기능을 사용하고 있다면 (API 라우트, 서버 미들웨어 등), 클라이언트 사이드 대체 또는 외부 API를 사용하여 리팩토링해야 합니다.

정적 생성을 테스트하려면

bun run generate

이러한 폴더를 확인하십시오. .output/public Capacitor이 네이티브 앱에 패키징할 정적 파일 폴더입니다.

Capacitor 8을 프로젝트에 추가하는 방법

네이티브 모바일 컨테이너로 Nuxt 앱을 패키징하려면 다음 단계를 따르십시오.

Capacitor 코어 및 CLI을 설치하십시오.

bun add @capacitor/core
bun add -D @capacitor/cli

사용할 가능성이 높은 일반 Capacitor 플러그인을 설치하십시오.

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

이러한 플러그인은 필수적인 기능을 제공합니다.

@capacitor/app앱 라이프 사이클 이벤트 (전면/후면, 심층 링크)를 처리합니다.
@capacitor/keyboard모바일에서 키보드 동작을 제어합니다.
@capacitor/splash-screen: 네이티브 스플래시 화면 관리
@capacitor/status-bar: 디바이스 상태 바 스타일
@capacitor/preferences: localStorage와 같은 네이티브 키-값 스토리지

Capacitor을 프로젝트 세부 정보와 초기화하세요:

bunx cap init my-app com.example.myapp --web-dir .output/public

Replace my-app 에 앱 이름을 com.example.myapp 에 앱 ID (역 도메인 표기법)를

Create or update the capacitor.config.ts 파일에 올바른 구성으로 생성하거나 업데이트:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: '.output/public',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'dark',
    },
  },
};

export default config;

네이티브 플랫폼 설치:

bun add @capacitor/ios @capacitor/android

__CAPGO_KEEP_0__을 추가하세요:

bunx cap add ios
bunx cap add android

Capacitor은 프로젝트의 루트 폴더에 native 프로젝트를 포함하는 native 플랫폼 폴더를 생성합니다. ios 그리고 android 프로젝트의 루트 폴더에 native 프로젝트를 포함하는 native 플랫폼 폴더를 생성합니다.

Android 프로젝트를 빌드하려면 Android Studio가 필요합니다. iOS의 경우 Xcode.

가 필요합니다. 프로젝트를 빌드하고 동기화하세요:

bun run mobile

이것은 Nuxt 정적 빌드를 생성하고 native 플랫폼과 파일을 동기화하는 커스텀 스크립트를 실행합니다.

native 모바일 앱을 빌드하고 배포하는 방법

native 모바일 앱을 빌드하고 배포하려면 다음 단계를 따르세요:

iOS 앱을 개발하려면 Xcode가 설치되어야 하며, Android 앱을 개발하려면 Android Studio가 설치되어야 합니다. 또한 앱을 앱 스토어에 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다. Xcode Android Studio iOS 앱을 개발하려면 Xcode가 설치되어야 하며, Android 앱을 개발하려면 Android Studio가 설치되어야 합니다. 또한 앱을 앱 스토어에 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다. iOS:

Android:

iOS 앱을 개발하려면 Xcode가 설치되어야 하며, Android 앱을 개발하려면 Android Studio가 설치되어야 합니다. 또한 앱을 앱 스토어에 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 열면 됩니다.

bun run mobile:ios

앱을 빌드하고 실행하세요:

bun run mobile:android

Or directly with Capacitor CLI:

bunx cap open ios
bunx cap open android

Android Studio에서 프로젝트가 준비될 때까지 기다리세요. 그런 다음 연결된 장치나 에뮬레이터에 앱을 배포하기 위해 "Run" 버튼을 클릭하세요.

iOS 앱을 개발하려면 Xcode가 설치되어야 하며, Android 앱을 개발하려면 Android Studio가 설치되어야 합니다. 또한 앱을 앱 스토어에 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다.

android-studio-run

xcode-run

Xcode에서 앱을 실제 기기에서 배포하기 위해 서명 계정을 설정하세요. 이 과정을 처음으로 진행하는 경우 Xcode는 프로세스를 안내해 드립니다 (Apple Developer Program에 등록된 상태여야 함). 설정이 완료되면 연결된 기기에 앱을 실행하기 위해 'Play' 버튼을 클릭하세요.

성공적으로 Nuxt 웹 앱을 모바일 기기에서 배포했습니다.

하지만 개발 중에는 더 빠른 방법이 있습니다...

Capacitor Live Reload

개발 중에는 즉시 모바일 기기에서 변경 사항을 확인할 수 있는 Live Reload 기능을 사용할 수 있습니다. 이 기능을 활성화하려면 다음 단계를 따르세요.

기본 IP 주소를 찾으세요.

macOS에서 터미널에서 다음 명령어를 실행하세요.
```
ipconfig getifaddr en0
```
Windows에서 실행하세요.
```
ipconfig
```
출력에서 IPv4 주소를 찾으세요.

__CAPGO_KEEP_0__ 업데이트 capacitor.config.ts __CAPGO_KEEP_0__ 서버를 개발 서버로 지정하세요:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... your plugin config
  },
};

export default config;

Replace YOUR_IP_ADDRESS __CAPGO_KEEP_0__ 로컬 IP 주소 (예: 192.168.1.100).

__CAPGO_KEEP_0__ native 프로젝트에 변경 사항을 적용하세요:

bunx cap copy

__CAPGO_KEEP_0__ 명령어는 웹 폴더와 구성 변경 사항을 native 프로젝트로 복사하고 전체 프로젝트를 업데이트하지 않습니다. copy __CAPGO_KEEP_0__ Nuxt 개발 서버를 시작하고 Xcode/Android Studio에서 다시 빌드하세요:

__CAPGO_KEEP_0__ Nuxt 앱에 변경 사항을 만들면 모바일 앱이 자동으로 다시 로드되어 변경 사항을 반영합니다.

bun run dev

주의:

__CAPGO_KEEP_0__ 새로운 플러그인을 설치하거나 native 파일을 변경하면 native 프로젝트를 다시 빌드해야 합니다. 왜냐하면 라이브 리로딩은 웹 __CAPGO_KEEP_0__ 변경 사항만 적용되기 때문입니다. code 플러그인 사용

Capacitor 플러그인은 Nuxt 앱에서 native 장치 기능에 접근할 수 있도록 해줍니다. Nuxt 앱에서 native 장치 기능을 사용하는 방법에 대해 알아보겠습니다.

Capacitor plugins allow you to access native device features from your Nuxt app. Let’s explore how to use the 공유 플러그인 __CAPGO_KEEP_0__

공유 플러그인을 설치하는 방법:

bun add @capacitor/share

공유 플러그인을 사용하는 페이지를 생성하거나 업데이트하세요. Nuxt 4의 경우, 페이지는 app/pages/:

<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Welcome to Nuxt + Capacitor!</h1>
    <button
      @click="shareContent"
      class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold"
    >
      Share now!
    </button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function shareContent() {
  await Share.share({
    title: 'Check this out!',
    text: 'Built with Nuxt and Capacitor',
    url: 'https://capacitorjs.com',
    dialogTitle: 'Share with friends',
  });
}
</script>

변경 사항을 네이티브 프로젝트와 동기화하세요:

bun run mobile

만들어진 변경 사항만 동기화하세요:

bunx cap sync

앱을 다시 빌드하고 기기에서 실행하세요.

‘공유하기!’ 버튼을 클릭하면 네이티브 공유 대화상자가 나타납니다.

Konsta UI v5와 Tailwind CSS 4를 추가하는 방법:

iOS와 Android 컴포넌트를 네이티브처럼 보이게 하려면 Konsta UI를 추가하세요.

Tailwind CSS 4가 이미 설치되어 있어야 합니다. Tailwind CSS 4가 이미 설치되어 있어야 합니다..

필요한 패키지를 설치하십시오:

bun add konsta
bun add tailwindcss @tailwindcss/vite

Vite 플러그인을 nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
});

생성 app/assets/css/main.css:

@import 'tailwindcss';
@import 'konsta/theme.css';

Konsta UI로 앱을.wrap App 페이지를 업데이트 하십시오: Konsta UI 컴포넌트를 사용하십시오. app/app.vue:

<template>
  <App theme="ios">
    <NuxtPage />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

Material Design 테마에 Roboto 폰트를 추가하십시오.

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Nuxt & Konsta UI app. Let's see what we have here.
      </p>
    </Block>

    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/vue';
</script>

Nuxt 앱은 이제 모바일에서 네이티브로 보입니다. nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
        },
      ],
    },
  },
  // ... rest of config
});

konsta-nuxt

Capgo를 사용하여 Nuxt 웹 애플리케이션을 기존 iOS 및 Android 앱으로 성공적으로 변환했습니다. Vue 코드베이스는 모바일 장치에서 네이티브로 실행되며 장치 API에 접근할 수 있습니다.

You’ve successfully converted your existing Nuxt web application into native iOS and Android apps using Capacitor 8. Your Vue codebase now runs natively on mobile devices with access to device APIs.

__CAPGO_KEEP_0__ 8

정적 생성을위한 Nuxt를 구성했습니다.
Capacitor 8에 필수 플러그인을 포함하여 추가했습니다.
iOS 및 Android 시뮬레이터에 빌드 및 배포했습니다.
개발을위한 라이브 리로드를 활성화했습니다.
자연스러운 구성 요소에 대한 native-looking 구성 요소를 위해 옵션으로 Konsta UI를 추가했습니다.

다음 단계:

설정 Capgo 앱 스토어 재제출 없이 오버 더 에어 업데이트에 대해 설정
카메라, 위치 정보, 또는 푸시 알림과 같은 더 많은 네이티브 플러그인을 추가하세요.
제품을위한 앱 아이콘과 스플래시 화면을 구성하세요.
앱 스토어 및 구글 플레이 제출을위한 앱을 준비하세요.

새로운 프로젝트를 시작하고 싶으신가요? Nuxt 모바일 앱을 처음부터 시작하는 방법 을 참조하세요.

자원

더 나은 앱을 더 빠르게 빌드하는 방법에 대해 Capgo이 어떻게 도움이 되는지 알아보세요. 무료 계정으로 가입하세요. 오늘.

Capacitor 8을 사용하여 iOS &amp; Android로 앱을 변환하세요.

소개