SvelteKit와 Capacitor을 사용하여 모바일 앱을 빌드하는 방법

이 튜토리얼에서, 우리는 새로운 SvelteKit app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Capacitor는 웹 애플리케이션을 모바일 앱으로 쉽게 변환할 수 있게 해주며, React Native와 같은 새로운 기술을 배울 필요 없이, 큰 수정이나 변경이 필요하지 않습니다.

이 단계별 가이드를 따라 Capacitor를 사용하여 SvelteKit 앱을 모바일 앱으로 변환하세요. Capgo Native Navigation, Transitions, 및 iOS 레이아웃 지침을 선택적으로 사용할 수 있습니다.

Capacitor

__CAPGO_KEEP_0__는 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이너입니다. 웹뷰에 애플리케이션을 wrapping하고, Xcode 및 Android Studio 프로젝트를 생성하는 기능을 제공합니다. JavaScript 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.

Capacitor는 복잡한 설정이나 steep 러닝 커브 없이, 훌륭한 네이티브 모바일 앱을 만들 수 있게 해줍니다. API가 얇고 Capacitor가 streamlined 기능을 제공하여, 프로젝트에 쉽게 통합할 수 있습니다. Capacitor를 사용하여, 완전한 네이티브 앱을 쉽게 만들 수 있습니다.

SvelteKit 앱 준비하기

새로운 SvelteKit 앱을 만들려면 다음 명령어를 실행하세요:

npm create svelte@latest my-app
cd my-app
npm install
npm run build

명령어를 실행한 후, 새로운 build __CAPGO_KEEP_1__ Native Navigation dist 프로젝트의 루트 폴더에 있는 폴더.

이 폴더는 나중에 Capacitor에 의해 사용되지만 현재는 올바르게 설정해야 합니다.

Capacitor를 SvelteKit 앱에 추가하는 방법

웹 앱을 네이티브 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르면, 나중에 단일 명령어만 실행하면 됩니다. sync 첫 번째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__를 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 '엔터'를 눌러도 됩니다.

다음으로, 코어 패키지와 iOS 및 Android 플랫폼에 관련된 패키지를 설치합니다. Capacitor CLI 이 시점에서 새로운 폴더를 볼 수 있어야 합니다.

ios

Capacitor는 나중에 이 폴더를 사용할 것입니다. 그러나 현재는 올바르게 설정해야 합니다.

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your SvelteKit project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

__CAPGO_KEEP_0__를 SvelteKit 앱에 추가하는 방법 웹 앱을 네이티브 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르면 나중에 단일 명령어만 실행하면 됩니다. 및 안드로이드 프로젝트의 폴더

실제 네이티브 프로젝트!

앱을 나중에 접근하기 위해 안드로이드 프로젝트에 접근하려면 안드로이드 스튜디오. iOS의 경우 맥을 사용해야 하며 Xcode.

또한 프로젝트에서 capacitor.config.ts 파일을 찾으십시오. 이 파일에는 SYNC 중에 사용되는 기본 Capacitor 설정이 포함되어 있습니다. SYNC 중에 주의해야 할 것은 webDir, 결과는 빌드 명령어의 결과로 지정되어야 합니다. 현재는 잘못되었습니다.

이 문제를 해결하려면 capacitor.config.ts 파일을 열고 webDir:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

ow that we’ve updated our Capacitor settings, let’s change out Sveltekit project to a static application by downloading the proper static adapter package:

npm i -D @sveltejs/adapter-static

이제 __CAPGO_KEEP_0__ 설정을 업데이트한 후, Sveltekit 프로젝트를 정적 애플리케이션으로 변경하기 위해 정적 어댑터 패키지를 다운로드하십시오: 패키지가 설치된 후, svelte.config.js

import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'

/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter({
      // default options are shown. On some platforms
      // these options are set automatically — see below
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
      strict: true
    })
  }
}

export default config

파일을 자동 어댑터에서 정적으로 변경하십시오: 정적 어댑터로 svelte.config.js 미리 렌더링 옵션을 만들기 위해 +layout.js 페이지로 src/routes 그리고 다음 export을 +layout.js:

export const prerender = true

추가하고 업데이트 한 후 +layout.js 페이지를 업데이트한 후 모바일 플랫폼을 추가하고 프로젝트를 다시 빌드하여 build 폴더

다음 명령어를 실행하여 할 수 있습니다:

npm run build
npx cap sync

첫 번째 명령어 npm run build SvelteKit 프로젝트를 빌드하고 정적 빌드를 복사하는 데 사용되며, 두 번째 명령어는 웹 __CAPGO_KEEP_0__을 네이티브 플랫폼의 올바른 위치에同步시켜 앱에서 표시되도록합니다. npx cap sync 또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 code 플러그인을 설치할 때 다시 명령어를 실행해야합니다.

이제 앱을 장치에서 확인해 보겠습니다! Capacitor pluginsiOS 앱을 개발하려면 Xcode가 필요합니다. npx cap sync Xcode

Build and Deploy Native Apps

To develop iOS apps, you need to have

Build and Deploy Native Apps To develop iOS apps, you need to have 설치되어 있어야 하며, 안드로이드 앱의 경우 안드로이드 스튜디오가 설치되어 있어야 합니다. 또한 앱을 스토어에 배포하려면 iOS의 Apple Developer Program과 안드로이드의 Google Play Console에 등록해야 합니다. native 모바일 개발에 새로운 입문자라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다.

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

android-studio-run

xcode-run

sveltekit-mobile-app

__CAPGO_KEEP_0__ Live Reload

Capacitor Live Reload

이제는 모든 현대 프레임워크에서热 재로드를 사용해 보셨을 것입니다. 좋은 소식은 동일한 기능을 모바일 장치에서 사용할 수 있다는 것입니다. 모바일 장치에서 최소한의 노력으로!

로컬로 호스팅 된 애플리케이션에 대한 접근 권한을 활성화하고 네트워크에서 by having the Capacitor app load the content from the specific URL.

맥을 사용하는 경우, 터미널에서 다음 명령어를 실행하여 찾을 수 있습니다:

ipconfig getifaddr en0

윈도우즈에서 실행하세요:

ipconfig

그런 다음 IPv4 주소를 찾으세요.

Capacitor 앱이 서버에서 애플리케이션을 직접 로드하도록 지시하려면, capacitor.config.ts 파일에 추가 항목을 추가해야 합니다:

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

정확히 사용하십시오. IP 주소와 포트를 정확하게 입력하세요.위 예시와 같이 표시됩니다.

이제 이러한 변경 사항을 원시 프로젝트로 복사할 수 있습니다:

npx cap copy

The copy 이 명령어는 sync와 유사하지만 웹 폴더와 설정만 복사하고 원시 프로젝트를 업데이트하지 않습니다. Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, Svelte 앱에서 변경 사항을 수정하면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다.

주의하십시오 이 변경 사항을 적용한 후 원시 프로젝트에 적용된 변경 사항만 복사합니다.

원시 프로젝트를 업데이트하지 않습니다. 이러한 카메라와 같은 새로운 플러그인을 설치하면, 여전히 네이티브 프로젝트를 다시 빌드해야 합니다. 이는 네이티브 파일이 변경되었기 때문입니다. 이 작업은 즉시 수행할 수 없습니다.

주의하십시오. 사용할 수 있는 IP와 포트를 정확하게 설정해야 합니다. 위의 code 블록은 SvelteKit의 기본 포트를 데모 목적으로 보여주고 있습니다.

Capacitor 플러그인 사용

이번에는 Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 언급한 바가 있습니다. 이 작업을 수행하기 위해, 간단한 플러그인을 설치할 수 있습니다. 이 작업을 수행하기 위해서는 다음 명령어를 실행하면 됩니다.

npm i @capacitor/share

이것은 특별한 기능이 없습니다. 공유 플러그인이것은 네이티브 공유 대화상자를 열어줍니다. 이에 대해, 이제는 패키지를 임포트하고, 앱에서 함수를 호출하면 됩니다. 따라서, src/routes/index.svelte를 다음으로 변경해 보겠습니다. share() 이전에 언급한 바와 같이, 새로운 플러그인을 설치하면, 동기화 작업을 수행하고, 앱을 다시 배포해야 합니다. 이 작업을 수행하기 위해서는 다음 명령어를 실행하면 됩니다. 버튼을 클릭한 후, 아름다운 네이티브 공유 대화상자를 확인할 수 있습니다! __CAPGO_KEEP_0__

<script>
  import { Share } from '@capacitor/share';

  async function share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
</script>

<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>

__CAPGO_KEEP_0__

npx cap sync

__CAPGO_KEEP_0__

다음으로, iOS 및 Android에서 Capgo 네비게이션 및 전환을 사용하여 앱을 더 원시적으로 느끼게 만들고, 수평으로 넘치거나 안전한 영역이 잘려 나가는 iOS 레이아웃 문제를 해결할 수 있습니다.

원시적인 UI를 위해 Capgo 네이티브 네비게이션 및 전환을 사용하세요.

__CAPGO_KEEP_2__ 년 동안 Ionic을 사용하여 크로스 플랫폼 애플리케이션을 개발해 왔습니다. Ionic Tailwind CSS와 함께 통합하는 것은 __CAPGO_KEEP_2__가치가 없는 hacky한 방법입니다. Tailwind CSS.

SvelteKit + Capacitor 앱에서 원시적인 모바일 느낌을 얻으려면 Capgo 플러그인을 사용하세요. Konsta UI와 같은 웹 전용 UI 키트 대신:

• @capgo/capacitor-native-navigation — iOS에서 Liquid Glass 탭바, Android에서 흐린 탭바 스타일, 네이티브 네비게이션 바를 사용합니다. SvelteKit 라우터는 라우트 상태를 유지하고 플러그인은 네이티브 크롬을 관리합니다.
• @capgo/capacitor-transitions — Ionic-style 페이지 전환 및 iOS 에지 스와이프 백을 WebView layer에서 사용하세요. Ionic UI를 채택하지 않습니다.

모두 설치하세요.

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

자연적인 네비게이션을 CSS inset 모드와 함께 구성하여 웹 콘텐츠가 네이티브 바를 존중하도록 하세요:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

리퀴드 글라스 탭 바를 렌더링하세요 (iOS는 시스템 소유 렌더링을 사용하고 Android는 흐린 웹뷰 백그라운드 백드로 사용합니다):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  goto(`/${id}`);
});

앱 셸에서 네이티브 페이지 전환을 추가하세요:

<script>
  import { goto } from '$app/navigation';
  import { routerOutlet, page, setDirection } from '@capgo/capacitor-transitions/svelte';
  import '@capgo/capacitor-transitions';

  function openSettings() {
    setDirection('forward');
    goto('/settings');
  }
</script>

<cap-router-outlet use:routerOutlet>
  <cap-page use:page>
    <cap-content slot="content">
      <slot />
    </cap-content>
  </cap-page>
</cap-router-outlet>

페이지를 렌더링하기 전에 cap-router-outlet, cap-page, 그리고 cap-content, 그리고 setDirection('forward') 또는 setDirection('back') 자연적인 네비게이션을 CSS inset 모드와 함께 구성하여 웹 콘텐츠가 네이티브 바를 존중하도록 하세요. 네이티브 네비게이션은 웹 헤더나 풋터를 중복하지 마세요.

자세한 가이드를 참조하세요: Using @capgo/capacitor-native-navigation 및 Using @capgo/capacitor-transitions.

안전 영역에 Tailwind

Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor Tailwind CSS로 tailwind-capacitor Tailwind CSS에서 제공하는 유용한 기능과 다른 npm-친화적인 플러그인: safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Tailwind CSS의 유용한 기능을 사용하여 src/app.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

, pt-safe, pb-safe대신 Tailwind CSS의 기능을 직접 사용하여 px-safe Tailwind CSS의 기능을 직접 사용하여 env(safe-area-inset-*) Tailwind CSS의 기능을 직접 사용하여 open a PR on GitHub.

iOS 레이아웃 문제를 해결하는 방법 (뷰포트, 안전 영역, 가로 스크롤)

iOS에서 콘텐츠가 잘려나거나-shifted되거나 가로 스크롤이 가능하다면, overflow-x: hidden 뷰포트 태그를 추가하거나 조정하는 것만으로는 문제를 해결할 수 없다.

다음 순서대로 체크하여 문제를 해결하라.

뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하라. src/app.htmlIn <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

,

뷰포트 메타 태그를

html,
body,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

iOS 안전 영역을 하나의 루트 wrapper에서만 처리하라. .app-shell싱글 앱 셸을 생성하고 안전 영역 패딩을 적용하라 — 여러 개의 중첩된 컴포넌트에서만 적용하지 마라:

모든 페이지 콘텐츠를 @capgo/tailwind-capacitor모바일 앱을 만들 때, __CAPGO_KEEP_0__과 SvelteKit을 사용하는 방법 pt-safe pb-safe px-safe 단일 셸에서 사용할 수 있는 패딩을 표현할 수 있습니다.

Set Capacitor iOS contentInset __CAPGO_KEEP_0__ iOS never 페이지

첫 번째 capacitor.config.ts페이지 contentInsetMode: 'css'CSS (또는 Native Navigation의)

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

CSS 패딩과 Capacitor의 자동 콘텐츠 인셋을 혼합하는 것은 일반적인 오버플로우 원인입니다. env(safe-area-inset-*) 실제로 오버플로우가 발생하는 요소를 찾습니다.

일반적으로 오버플로우가 발생하는 요소는

__CAPGO_KEEP_0__의 자동 콘텐츠 인셋을 사용하는 요소입니다. 100vwTailwind w-screen대형 min-width.

In Safari Web Inspector, run:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Tailwind 대신 w-screen 대신 w-full 가능한 경우 많은 가로 스크롤 문제는 100vw / w-screen복제된 안전 영역 패딩 또는 고정 너비 컨테이너에서 오는 것이 아니라, viewport meta 태그 자체에서 오는 것입니다.

Conclusion

Capacitor은 기존 웹 프로젝트에 기반한 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. existing web project에 기반한 네이티브 애플리케이션을 빌드하는 데 code을 쉽게 공유하고 일관된 UI를 유지할 수 있습니다.

Capgo에 PR을 제출하는 것은 Capgo__CAPGO_KEEP_0__을 추가하는 것은 더 쉬워졌습니다. 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 라이브 업데이트 기능을 추가하는 것이 가능해졌습니다.

If you would like to learn how to add Capgo to your SvelteKit app, take a look at the next article:

Capgo을 사용하여 더 빠르게 더 나은 앱을 빌드하는 방법을 배워보세요. 무료 계정으로 가입하세요. 오늘.

Capacitor에서 계속 진행하세요: SvelteKit과 Capgo로 모바일 앱을 빌드하기

__CAPGO_KEEP_0__을 사용 중이라면 Capacitor에서 CI/CD 자동화 계획을 만드는 경우 Capacitor CI/CD와 연결하세요. __CAPGO_KEEP_0__ CI/CD에서 __CAPGO_KEEP_0__ CI/CD의 제품 워크플로우를 참조하세요. Capgo에서 Capgo Native Builds의 제품 워크플로우를 참조하세요. Capgo Native Builds Capgo Capgo CI/CD Capgo 통합 Capgo CI/CD 통합 CI/CD 통합 GitHub 액션 GitHub