메인 콘텐츠로 바로가기
Capgo 로고
__CAPGO_KEEP_0__

Capacitor 8을 사용하여 스캐치부터 Nuxt 모바일 앱을 빌드하세요.

Nuxt 4 프로젝트를 새로 만들고 Capacitor 8을 사용하여 iOS 및 Android 모바일 앱으로 변환하는 단계별 가이드입니다. 모바일 개발을 시작하는 데 이상적입니다.

Martin Donadieu

Martin Donadieu

콘텐츠 마케터
Capacitor 8을 사용하여 스캐치부터 Nuxt 모바일 앱을 빌드하세요.

소개

Nuxt를 사용하여 모바일 앱을 처음부터 만들고 싶으십니까? 이 가이드에서는 모바일을 위한 Nuxt 4 프로젝트를 새로 만들고, __CAPGO_KEEP_0__ 8을 사용하여 iOS 및 Android 앱으로 패키징하는 방법을 안내합니다. Capacitor 8.

이 튜토리얼을 마치면, 시뮬레이터에서 작동하는 모바일 앱을 개발하고, 앱 스토어와 구글 플레이에 게시할 수 있습니다.

시간 소요: ~30분

만들어 볼 프로젝트:

  • 최신 디렉토리 구조를 사용하는 새로운 Nuxt 4 프로젝트
  • 모바일용 정적 생성 구성
  • Capacitor 8에 필수 플러그인을 포함한
  • 네이티브 iOS 및 Android 앱
  • 라이브 리로드 개발 환경 설정

Nuxt 앱이 이미 있으신가요? Nuxt 앱을 모바일로 변환하세요. 대신.

사전 요구 사항

이것들을 설치했는지 확인하세요:

  • Node.js 18+ (__CAPGO_KEEP_0__ node --version)
  • Bun Xcodecurl -fsSL https://bun.sh/install | bash)
  • (macOS만, iOS 개발을 위해) Android Studio
  • (Android 개발을 위해) Step 1: Nuxt 4 프로젝트 만들기

Nuxt 4 프로젝트를 새로 만들기 시작하세요:

Nuxt 4 디렉토리 구조

bunx nuxi@latest init my-mobile-app
cd my-mobile-app
bun install

Step 2: Capgo를 설치하고 설정하기

Nuxt 4는 새로운 폴더 구조를 사용하며 app code 폴더가 포함되어 있습니다. app/ 폴더:

my-mobile-app/
  app/
    assets/
    components/
    composables/
    layouts/
    middleware/
    pages/
    plugins/
    utils/
    app.vue
  public/
  server/
  nuxt.config.ts
  package.json

이 구조는 앱과 서버 간의 분리를 더 잘 제공합니다. code.

2단계: Nuxt를 정적 생성에 구성하기

Capacitor는 정적 HTML/JS/CSS 파일이 필요합니다. Nuxt를 정적 생성에 구성하세요. nuxt.config.ts:

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },

  // Enable static generation
  ssr: true,
  nitro: {
    preset: 'static',
  },
});

3단계: 모바일 스크립트 추가하기

모바일 개발 스크립트를 업데이트하여: package.json 정적 생성 테스트하기:

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

정적 파일이 포함된 폴더를 볼 수 있습니다.

bun run generate

4단계: __CAPGO_KEEP_0__ 8 설치하기 .output/public __CAPGO_KEEP_0__

Capacitor

Capacitor core 패키지를 설치하세요:

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

__CAPGO_KEEP_0__ core 패키지를 설치하세요:

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

이 플러그인들은 어떤 역할을 하는가요?

  • @capacitor/앱 — 앱 생명주기 이벤트 (전면/후면, 깊은 링크)
  • @capacitor/키보드 — 키보드 동작을 제어합니다.
  • @capacitor/스플래시 스크린 — 네이티브 스크린 스플래시 제어
  • @capacitor/상태 바 — 장치 상태 바 스타일링
  • @capacitor/설정 — 원시 스토리지 (localStorage와 같은 키-값 저장소)

5단계: Capacitor을 초기화하세요

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

bunx cap init "My Mobile App" com.example.mymobileapp --web-dir .output/public

대체:

  • "My Mobile App" 앱의 표시 이름과 함께
  • com.example.mymobileapp 역 도메인 표기법의 앱 ID와 함께

이것은 capacitor.config.ts. 플러그인 구성과 함께 업데이트하세요:

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

const config: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile 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;

6단계: 네이티브 플랫폼 추가

플랫폼 패키지를 설치하세요:

bun add @capacitor/ios @capacitor/android

네이티브 프로젝트를 생성하세요:

bunx cap add ios
bunx cap add android

이것은 ios 그리고 네이티브 프로젝트가 포함된 디렉터리. android Step 7: Build and Run

프로젝트를 빌드하고 네이티브 플랫폼과 동기화하세요:

iOS 시뮬레이터에서 열기:

bun run mobile

또는 Android 에뮬레이터:

bun run mobile:ios

iOS에서 Xcode:

bun run mobile:android

디바이스 드롭다운에서 시뮬레이터를 선택하세요

  1. 플레이 버튼을 클릭하거나
  2. Android Studio에서: Cmd + R

Gradle이 동기화 완료될 때까지 기다리세요

  1. 디바이스 드롭다운에서 에뮬레이터를 선택하세요
  2. Step 7: Build and Run
  3. 클릭 버튼을 클릭하거나 Shift + F10

8 단계: 라이브 리로드 설정

빠른 개발을 위해 라이브 리로드를 활성화하여 장치에서 즉시 변경 사항이 나타나도록 하세요.

  1. 장치의 IP 주소를 찾으세요:
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. 개발 Capacitor 설정을 생성하세요. 업데이트 capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';

const devConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... same plugin config
  },
};

const prodConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: '.output/public',
  plugins: {
    // ... same plugin config
  },
};

const config = process.env.NODE_ENV === 'development' ? devConfig : prodConfig;

export default config;
  1. 개발 서버를 시작하고 네이티브로 설정을 복사하세요:
bun run dev &
NODE_ENV=development bunx cap copy
  1. Xcode/Android Studio에서 다시 빌드

이제 Nuxt code의 편집이 장치에서热 재로드됩니다.

10 단계: 모바일 화면 만들기

모바일 친화적인 홈 스크린을 만들겠습니다. 업데이트 app/app.vue:

<template>
  <NuxtPage />
</template>

만들기 app/pages/index.vue:

<template>
  <main
    class="min-h-screen bg-linear-to-b from-green-500 to-green-700 flex flex-col items-center justify-center p-6 text-white"
  >
    <h1 class="text-4xl font-bold mb-4">My Mobile App</h1>
    <p class="text-xl mb-8 text-center opacity-90">
      Built with Nuxt 4 + Capacitor 8
    </p>

    <div v-if="appInfo" class="bg-white/20 rounded-lg p-4 backdrop-blur-sm mb-8">
      <p class="text-sm">
        {{ appInfo.name }} v{{ appInfo.version }}
      </p>
    </div>

    <div class="space-y-4 w-full max-w-sm">
      <button
        class="w-full py-4 px-6 bg-white text-green-600 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform"
        @click="handleGetStarted"
      >
        Get Started
      </button>
      <button
        class="w-full py-4 px-6 bg-white/20 text-white rounded-xl font-semibold text-lg backdrop-blur-sm active:scale-95 transition-transform"
        @click="handleShare"
      >
        Share App
      </button>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { App } from '@capacitor/app';

const appInfo = ref<{ name: string; version: string } | null>(null);

let backButtonListener: { remove: () => void } | null = null;

onMounted(async () => {
  // Get app info
  try {
    appInfo.value = await App.getInfo();
  } catch (e) {
    // Web fallback
    appInfo.value = { name: 'My Mobile App', version: '1.0.0' };
  }

  // Handle Android back button
  backButtonListener = await App.addListener('backButton', ({ canGoBack }) => {
    if (!canGoBack) {
      App.exitApp();
    } else {
      window.history.back();
    }
  });
});

onUnmounted(() => {
  backButtonListener?.remove();
});

function handleGetStarted() {
  // Navigate to onboarding or main app
  console.log('Get started clicked');
}

async function handleShare() {
  // We'll implement this with the Share plugin later
  console.log('Share clicked');
}
</script>

11 단계: Tailwind CSS 추가

스타일링이 작동하려면 프로젝트에 Tailwind CSS를 추가하세요:

bun add tailwindcss @tailwindcss/vite

수정 nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },

  ssr: true,
  nitro: {
    preset: 'static',
  },

  css: ['~/assets/css/main.css'],

  vite: {
    plugins: [tailwindcss()],
  },
});

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

@import 'tailwindcss';

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

body {
  padding-top: var(--sat);
  padding-right: var(--sar);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
}

/* Prevent text selection on mobile */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Allow text selection in inputs */
input,
textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

11단계: 공유 플러그인을 추가하세요

공유 버튼 기능을 구현해 보겠습니다:

bun add @capacitor/share

수정 app/pages/index.vue 공유 플러그인을 사용하려면:

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { App } from '@capacitor/app';
import { Share } from '@capacitor/share';

// ... existing code ...

async function handleShare() {
  try {
    await Share.share({
      title: 'Check out this app!',
      text: 'Built with Nuxt 4 and Capacitor 8',
      url: 'https://capacitorjs.com',
      dialogTitle: 'Share with friends',
    });
  } catch (e) {
    console.log('Share cancelled or failed:', e);
  }
}
</script>

Sync 및 재구축:

bun run mobile

프로젝트 구조

프로젝트는 다음과 같이 보이려면:

my-mobile-app/
├── android/                  # Android native project
├── ios/                      # iOS native project
├── .output/
│   └── public/              # Static build output
├── app/
│   ├── assets/
│   │   └── css/
│   │       └── main.css
│   ├── pages/
│   │   └── index.vue
│   └── app.vue
├── capacitor.config.ts       # Capacitor configuration
├── nuxt.config.ts            # Nuxt configuration
├── package.json
└── ...

다음 단계

이제 Nuxt 모바일 앱이 작동합니다. 다음 단계는?

__CAPGO_KEEP_0__

  • 앱 아이콘: __CAPGO_KEEP_1__ ios/App/App/Assets.xcassets __CAPGO_KEEP_2__ android/app/src/main/res
  • 및 __CAPGO_KEEP_3__ @capacitor/splash-screen 스플래시 화면:
  • __CAPGO_KEEP_4__ 자연스러운 프로젝트에서 커스터마이즈하거나

__CAPGO_KEEP_5__

  • 깊이 있는 링크: bun add @capacitor/camera
  • __CAPGO_KEEP_6__ bun add @capacitor/geolocation
  • Push Notifications: bun add @capacitor/push-notifications
  • File System: bun add @capacitor/filesystem

UI 개선

Consider adding Konsta UI for native-looking iOS/Android components:

bun add konsta

Then update your CSS to import the theme:

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

Over-the-Air Updates

Set up Capgo to push updates without app store resubmission:

bunx @capgo/cli init

Troubleshooting

모듈을 찾을 수 없습니다. 실행 bun install 다시 시도해 보세요.

iOS: 인증서를 찾을 수 없습니다. Xcode를 열고 Signing & Capabilities로 이동하여 개발 팀을 선택하세요.

Android: SDK 위치를 찾을 수 없습니다. 생성 android/local.properties 와 sdk.dir=/path/to/android/sdk

장치에 변경 사항이 보이지 않습니다. 변경 사항이 적용된 후에 bun run mobile live reload를 위해 IP 주소가 정확하고 개발 서버가 실행 중인지 확인하세요.

.output/public이 비어 있거나 존재하지 않습니다. 설정이 올바르게 구성되어 있는지 확인하세요. nitro: { preset: 'static' } 및 nuxt.config.ts 실행 bun run generate.

자원

앱을 배포할 준비가 되셨나요? Capgo이 업데이트를 더 빠르게 전달하는 데 어떻게 도움이 될 수 있는지 알아보세요 — 무료 계정으로 가입하세요 오늘.

Capacitor 앱에 대한 실시간 업데이트

Capgo 앱에서 웹层 버그가 활성화된 경우, 앱 스토어 승인 대기 없이 Capgo를 통해 패치를 배포하세요. 사용자는 배경에서 업데이트를 받으면서 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

시작하기

블로그에서 최신 뉴스

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

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

Capacitor 앱에서 2-Way 통신

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

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

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

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

블로그에서 모두 보기