Capacitor 8을 사용하여 Nuxt 스마트폰 앱부터 시작하는 방법

소개

Nuxt를 사용하여 모바일 앱을 처음부터 구축하고 싶으십니까? 이 안내서에서는 모바일을 위해 일부터 일까지 Nuxt 4 프로젝트를 생성하는 방법을 안내합니다. 그리고 그 프로젝트를 네이티브 iOS 및 Android 앱으로 패키징하는 방법을 알려드립니다. Capacitor 8.

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

필요한 시간: ~30분

생성할 내용:

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

Already have a Nuxt app? Check out 모바일 앱으로 변환하기 대신.

사전 요구 사항

다음 설치를 확인하세요.

Node.js 18+ (__CAPGO_KEEP_0__ node --version)
Bun Xcodecurl -fsSL https://bun.sh/install | bash)
(macOS 전용, iOS 개발용) Android Studio
Android Studio 안드로이드 개발을 위해

Step 1: Nuxt 4 프로젝트 만들기

새로운 Nuxt 4 프로젝트를 시작하기 위해:

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

Nuxt 4 디렉토리 구조

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 사이의 분리를 향상시킵니다.

Step 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',
  },
});

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

__CAPGO_KEEP_0__를 정적 생성 테스트하세요.

bun run generate

__CAPGO_KEEP_0__를 설치한 후에 볼 수 있는 .output/public __CAPGO_KEEP_0__에 있는 정적 파일이 있는 디렉토리.

4단계: Capacitor 8을 설치하세요.

Capacitor의 핵심 패키지를 설치하세요.

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

대부분의 모바일 앱에서 필수적인 플러그인을 설치하세요.

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와 같은 원생 저장소)

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;

Step 6: 네이티브 플랫폼 추가

설치할 플랫폼 패키지를 설치합니다:

bun add @capacitor/ios @capacitor/android

네이티브 프로젝트를 생성합니다:

bunx cap add ios
bunx cap add android

이것은 ios 및 android 네이티브 프로젝트가 포함된 디렉터리를 생성합니다.

Step 7: 빌드 및 실행

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

bun run mobile

iOS 시뮬레이터에서 열기:

bun run mobile:ios

또는 Android 에뮬레이터에서 열기:

bun run mobile:android

Xcode (iOS)에서:

디바이스 드롭다운에서 시뮬레이터를 선택하십시오:
플레이 버튼을 클릭하거나 Cmd + R

Android Studio에서:

Gradle이 동기화 완료될 때까지 기다려 주세요.
디바이스 드롭다운에서 에뮬레이터를 선택하세요.
실행 버튼을 클릭하거나 Shift + F10

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

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

로컬 IP 주소를 찾으세요:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

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;

개발 서버를 시작하고 설정을 네이티브로 복사하세요:

bun run dev &
NODE_ENV=development bunx cap copy

Xcode/Android Studio에서 다시 빌드하세요.

이제 Nuxt code의 편집 사항이 장치에서 즉시 리로드됩니다.

Step 9: 첫 번째 모바일 화면을 만들기

모바일 화면을 만들기 위해 홈 화면을 만들겠습니다. 업데이트 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>

Step 10: 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;
}

공유 버튼 기능을 구현하기 위해 공유 플러그인을 구현해 보겠습니다.

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

프로젝트 구조

__CAPGO_KEEP_0__

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
└── ...

다음 단계

__CAPGO_KEEP_0__

필수 설정

앱 아이콘: __CAPGO_KEEP_0__ ios/App/App/Assets.xcassets 기본 아이콘을 android/app/src/main/res
스플래시 화면: __CAPGO_KEEP_0__ @capacitor/splash-screen 깊이 링크:
__CAPGO_KEEP_0__ URL Scheme 설정

더 많은 기능 추가

카메라: bun add @capacitor/camera
위치 정보: bun add @capacitor/geolocation
푸시 알림: bun add @capacitor/push-notifications
파일 시스템: bun add @capacitor/filesystem

UI 개선

자연스럽게 iOS/Android 컴포넌트를 보이게 하려면 Konsta UI native-looking iOS/Android 컴포넌트를 위해

bun add konsta

그런 다음 CSS를 업데이트하여 테마를 임포트하세요.

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

OTA 업데이트

설정 Capgo 앱스토어 재제출 없이 업데이트 푸시하기:

bunx @capgo/cli init

문제 해결

빌드가 “모듈을 찾을 수 없음”으로 실패합니다. 실행 bun install 다시 시도해 보세요.

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

Android: “SDK 위치를 찾을 수 없음” 생성 android/local.properties with sdk.dir=/path/to/android/sdk

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ bun run mobile __CAPGO_KEEP_0__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ nitro: { preset: 'static' } __CAPGO_KEEP_0__ nuxt.config.ts __CAPGO_KEEP_0__ bun run generate.

__CAPGO_KEEP_0__

앱을 배달할 준비가 되셨나요? Capgo이 업데이트를 더 빠르게 전달할 수 있도록 도와주실 수 있는 방법을 알아보세요. 무료 계정으로 가입하세요. 오늘.

Build a Nuxt Mobile App from Scratch with Capacitor 8

이 __CAPGO_KEEP_0__을 사용 중이라면 Build a Nuxt Mobile App from Scratch with Capacitor 8 CI/CD 자동화 계획을 세우고 연결하세요. Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations Capgo 제품 워크플로우에서 통합을 위해 CI/CD 통합 __CAPGO_KEEP_0__ CI/CD 통합 구현 세부 사항을 위해 GitHub 액션 통합 GitHub 액션 통합 구현 세부 사항을 위해

Capacitor 8을 사용하여 스캐치부터 시작하는 모바일-퍼스트 Vue 개발을 위한 Nuxt 모바일 앱을 빌드하세요.

소개

사전 요구 사항

Step 1: Nuxt 4 프로젝트 만들기

Nuxt 4 디렉토리 구조

Step 2: 정적 생성을 위한 Nuxt 설정

Step 3: 모바일 스크립트 추가

4단계: Capacitor 8을 설치하세요.

5단계: Capacitor 초기화

Step 6: 네이티브 플랫폼 추가

Step 7: 빌드 및 실행

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

Step 9: 첫 번째 모바일 화면을 만들기

Step 10: Tailwind CSS 추가하기

Step 11: 공유 플러그인을 추가하기

프로젝트 구조

다음 단계

필수 설정

더 많은 기능 추가

UI 개선

OTA 업데이트

문제 해결

__CAPGO_KEEP_0__

Build a Nuxt Mobile App from Scratch with Capacitor 8