메인 콘텐츠로 건너뛰기
Capgo 로고
튜토리얼

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

기존의 Nuxt 4 웹 애플리케이션을 Capacitor 8을 사용하여 native iOS 및 Android 모바일 앱으로 변환하는 방법에 대한 완전한 안내서입니다. 정적 생성을 구성하고 native 플러그인을 추가하고 앱 스토어로 배포하는 방법을 설명합니다.

마틴 도나디유

마틴 도나디유

콘텐츠 마케터
Nuxt 앱을 Capacitor 8을 사용하여 iOS & Android로 변환하세요.

Introduction

기존의 Nuxt 웹 애플리케이스가 있나요? 이 안내서에서, Capacitor 8 — 성능이 개선되고 새로운 기능이 추가된 최신 버전입니다.

Capacitor는 웹 앱을 네이티브 컨테이너에 감싸고, 카메라, 파일 시스템, 푸시 알림과 같은 장치 API에 접근할 수 있도록 해주며, 기존의 Vue 코드베이스를 유지합니다. Flutter나 React Native와 달리, 다시 작성할 필요가 없습니다 — Nuxt code는 그대로 작동합니다.

학습할 내용:

  • 기존의 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 앱을 정적 생성하기 위해 첫 번째 단계는 정적 HTML/JS/CSS 파일이 필요합니다. Capacitor

정적 HTML/JS/CSS 파일이 필요하므로 package.json has the generate script:

{
  "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"
  }
}

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

Test the static generation by running:

bun run generate

You should see a .output/public Capacitor 폴더에 정적 파일이 있습니다. 이 파일은 Capacitor가 네이티브 앱에 패키징할 것입니다.

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

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

  1. Capacitor 코어 및 CLI을 설치하세요.
bun add @capacitor/core
bun add -D @capacitor/cli
  1. Capacitor에서 일반적으로 필요로 하는 플러그인을 설치하세요.
bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

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

  • @capacitor/app: 앱 생명 주기 이벤트를 처리하세요 (전면/후면, 깊은 링크)
  • @capacitor/키보드: 모바일에서 키보드 동작을 제어하세요
  • @capacitor/스플래시 스크린: 네이티브 스크린을 관리하세요
  • @capacitor/상태 바: 장치 상태 바를 스타일링하세요
  • @capacitor/설정: 키-값 스토리지 (localStorage와 같은 네이티브)
  1. Initialize Capacitor with your project details:
bunx cap init my-app com.example.myapp --web-dir .output/public

Replace my-app with your app name and com.example.myapp 앱 ID (역 도메인 표기법)과 함께 사용하세요.

  1. 생성하거나 업데이트하세요. 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;
  1. 자연스러운 플랫폼을 설치하세요:
bun add @capacitor/ios @capacitor/android
  1. 자연스러운 플랫폼 폴더를 추가하세요:
bunx cap add ios
bunx cap add android

Capacitor은 프로젝트의 루트 폴더에 있는 자연스러운 프로젝트 폴더를 생성하고 ios 그리고 android 폴더를 만들 것입니다.

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

  1. 프로젝트를 빌드하고 동기화하세요:
bun run mobile

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

네이티브 앱 빌드 및 배포

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

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

  1. 네이티브 프로젝트를 열세요:

iOS: 

bun run mobile:ios

Android: 

bun run mobile:android

Capacitor CLI:

bunx cap open ios
bunx cap open android
  1. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__:

android-studio-run

  • Android Studio에서 프로젝트가 준비되면 'Run' 버튼을 클릭하여 연결된 장치나 에뮬레이터에 앱을 배포합니다.

xcode-run

  • Xcode에서 실제 장치에 앱을 배포하기 위해 서명 계정을 설정하세요. 서명 계정을 설정한 적이 없다면 Xcode는 Apple Developer Program에 가입한 경우 Apple Developer Program을 통해 프로세스를 안내해 드립니다. 서명 계정을 설정한 후 'Play' 버튼을 클릭하여 연결된 장치에서 앱을 실행하세요.

__CAPGO_KEEP_0__이 성공적으로 배포되었습니다!

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

__CAPGO_KEEP_0__ Live Reload

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

__CAPGO_KEEP_0__ 주소 찾기:

  1. __CAPGO_KEEP_0__ 주소

  • macOS에서 다음 명령어를 터미널에서 실행하세요.

    ipconfig getifaddr en0

  • Windows에서 실행하세요.

    ipconfig

    IPv4 주소가 출력된 곳에서 주소를 찾으세요.

  1. 개발 서버로 capacitor.config.ts 를 설정하세요.
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;

를 로컬 IP 주소 (예를 들어 YOUR_IP_ADDRESS 로 대체하세요. 192.168.1.100).

  1. native 프로젝트에 변경 사항을 적용하세요.
bunx cap copy

변경 사항을 native 프로젝트로 복사하는 copy 명령어는 프로젝트 전체를 업데이트하지 않고 웹 폴더와 구성 변경 사항만 복사합니다.

  1. Nuxt 개발 서버를 시작하고 Xcode/Android Studio에서 다시 빌드하세요.
bun run dev

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

주의: 새로운 플러그인을 설치하거나 네이티브 파일을 변경하면 네이티브 프로젝트를 재빌드해야 합니다. 라이브 리로딩은 웹 code 변경사항만 적용됩니다.

Capacitor 플러그인 사용

Capacitor 플러그인은 Nuxt 앱에서 네이티브 디바이스 기능에 접근할 수 있도록 해줍니다. Share 플러그인을 예로 들어보겠습니다. Share 플러그인 설치: Share 플러그인을 사용하는 페이지를 생성하거나 업데이트 합니다. Nuxt 4에서는 페이지가

  1. 변경 사항을 네이티브 프로젝트와 동기화합니다:
bun add @capacitor/share
  1. 재빌드 없이 동기화만 합니다: 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>
  1. 앱을 디바이스에 실행합니다.
bun run mobile

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

bunx cap sync
  1. Install the Share plugin:

Create or update a page to use the Share plugin. In Nuxt 4, pages go in

__CAPGO_KEEP_0__ v5을 Tailwind CSS 4와 함께 추가합니다.

iOS와 Android 컴포넌트의 원생 모바일 사용자 경험을 위해 버튼을 보다 모바일 친화적으로 보이게 하려면 Konsta UI를 추가할 수 있습니다.

__CAPGO_KEEP_1__에 다음을 설치해야 합니다. Tailwind CSS 4가 이미 설치되어야 합니다..

  1. 필요한 패키지를 설치하세요.
bun add konsta
bun add tailwindcss @tailwindcss/vite
  1. __CAPGO_KEEP_2__ 플러그인을 구성하세요. 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()],
  },
});
  1. 생성 app/assets/css/main.css:
@import 'tailwindcss';
@import 'konsta/theme.css';
  1. __CAPGO_KEEP_3__에 Konsta UI 컴포넌트를 wrapping하세요. App __CAPGO_KEEP_4__를 업데이트하여 Konsta UI 컴포넌트를 사용하세요. app/app.vue:
<template>
  <App theme="ios">
    <NuxtPage />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>
  1. 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>
  1. __CAPGO_KEEP_5__는 이제 원생 모바일 UI를 가졌습니다. 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
});

__CAPGO_KEEP_0__ = Konsta UI, __CAPGO_KEEP_1__ = Tailwind CSS 4, __CAPGO_KEEP_2__ = Vite, __CAPGO_KEEP_3__ = component, __CAPGO_KEEP_4__ = page, __CAPGO_KEEP_5__ = Nuxt app

konsta-nuxt

결과

Capacitor 8을 사용하여 기존 Nuxt 웹 애플리케이션을 native iOS 및 Android 앱으로 변환했습니다. Capacitor 8을 사용하여 Vue 코드베이스가 모바일 장치에서 실행되며 장치 API에 접근할 수 있습니다.

성공적으로 달성한 것:

  • Nuxt를 정적 생성으로 구성했습니다.
  • Capacitor 8을 추가하여 필수 플러그인을 설치했습니다.
  • iOS 및 Android 시뮬레이터로 빌드 및 배포했습니다.
  • 개발 중에 라이브 리로드를 활성화했습니다.
  • 옵션으로 Konsta UI를 추가하여 네이티브 보기에 적합한 컴포넌트를 추가했습니다.

다음 단계:

  • 설정 Capgo __CAPGO_KEEP_0__의 오버-더-에어 업데이트 없이 앱 스토어 재제출이 필요하지 않습니다.
  • __CAPGO_KEEP_0__에 더 많은 네이티브 플러그인 추가하기, 카메라, 위치 정보, 푸시 알림 등
  • __CAPGO_KEEP_0__ 앱 아이콘 및 스플래시 스크린을 프로덕션에 맞게 구성하기
  • 앱 스토어와 구글 플레이 제출을 위해 앱을 준비하기

새로운 프로젝트를 시작하고 싶으신가요? Nuxt 모바일 앱부터 시작하기 __CAPGO_KEEP_0__를 사용하여 가이드된_walkthrough를 확인하세요.

자원

Capgo을 사용하여 더 나은 앱을 더 빠르게 개발하는 방법을 알아보세요. 무료 계정으로 가입하세요. 오늘.

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

__CAPGO_KEEP_0__을 사용 중이라면 Convert Your Nuxt App to iOS &#x26; Android with Capacitor 8 __CAPGO_KEEP_0__ 8을 사용하여 네이티브 플러그인 작업을 계획하고 Capgo 플러그인 디렉토리와 연결하세요. Capgo 플러그인 디렉토리에서 제품 워크플로우를 확인하세요. Capacitor Capgo에서 제공하는 플러그인을 확인하세요. Capacitor Capgo에서 제공하는 플러그인 구현 세부 사항을 확인하세요. 플러그인을 추가하거나 업데이트하세요. __CAPGO_KEEP_0__ 구현 세부 사항에 대한 정보를 추가하거나 플러그인을 업데이트할 때 Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체의 제품 워크플로우에 대해 Capgo 네이티브 빌드의 제품 워크플로우에 대해 Capgo

Capacitor 앱의 실시간 업데이트

웹层 버그가 활성화된 경우 Capgo를 통해 픽스를 배포하는 대신 앱 스토어 승인까지 며칠 기다리지 말고. 사용자는 배경에서 업데이트를 받으면서 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

시작하기

최신 블로그 글

Capgo은 전문적인 모바일 앱을 만들기 위해 필요한 최고의洞察력을 제공합니다.

Capacitor 앱에서 2방향 통신
개발, 모바일, 업데이트
2025년 4월 26일

Capacitor 앱에서 2방향 통신

OTA 업데이트 실수를 피하는 5가지 일반적인 방법
개발, 보안, 업데이트
2025년 4월 13일

5 개의 OTA 업데이트 실수를 피하는 방법

모바일 앱 실시간 업데이트에 대한 5 가지 보안最佳 관행
개발, 모바일, 업데이트
2025년 1월 14일

모바일 앱 실시간 업데이트에 대한 5 가지 보안最佳 관행

블로그에서 모두 보기