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

이 튜토리얼에서, 우리는 새로운 SvelteKit 앱에서 시작하여 Capacitor를 사용하여 네이티브 모바일 개발로 전환할 것입니다. Capgo 네이티브 네비게이션 및 전환을 추가하여 네이티브 모바일 느낌을 제공하고 tailwind-capacitor를 사용하여 안전한 영역을 사용할 수 있습니다.

Capacitor는 SvelteKit 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 데 필요한 중요한 수정이나 새로운 기술인 React Native를 배우지 않고도 쉽게 변환할 수 있도록 해줍니다.

Capacitor를 사용하여 SvelteKit 앱을 모바일 앱으로 변환하는 단계별 가이드를 따르세요. Capgo 네이티브 네비게이션, 전환 및 iOS 레이아웃 지침을 선택적으로 사용할 수 있습니다.

Capacitor에 대해 알아보세요.

CapacitorJS는 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이저입니다. 애플리케이션을 네이티브 웹뷰에.wrap하고 Xcode 및 Android Studio 프로젝트를 생성하여 네이티브 장치 기능에 대한 접근을 제공하는 JavaScript橋梁을 제공합니다.

Capacitor는 복잡한 설정이나 기울임 곡선이 있는 학습 곡선을 필요로하지 않고도 훌륭한 네이티브 모바일 앱을 만들 수 있도록 해줍니다. API의 가벼운 크기와 streamlined 기능은 프로젝트에 쉽게 통합할 수 있도록 해줍니다. Capacitor를 사용하여 완전한 네이티브 앱을 달성하는 데 얼마나 간단한지 놀랄 것입니다.

SvelteKit 앱을 준비하세요.

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

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

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

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

Adding Capacitor to Your SvelteKit App

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

다음으로, iOS 및 Android 플랫폼에 관련된 패키지를 설치하세요. Capacitor CLI 이 시점에서 프로젝트의 루트 폴더에 새로운 폴더를 볼 수 있습니다:

ios 폴더가 생성되었습니다.

Finally, add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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

ios 폴더가 생성되었습니다. ios 폴더가 생성되었습니다. 그리고 안드로이드 프로젝트의 폴더들.

이것들은 실제 네이티브 프로젝트입니다!

애플리케이션을 나중에 액세스하려면 Android Studio를 설치해야합니다. iOS의 경우 Mac가 필요하고.

Xcode capacitor.config.ts file in your project, which contains some basic Capacitor settings used during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__.config.ts__CAPGO_KEEP_0__.config.ts

파일을 열어 capacitor.config.ts 설정을 업데이트 하세요. 웹 디렉토리:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

우리가 Capacitor 설정을 업데이트 한 후, Sveltekit 프로젝트를 정적 애플리케이션으로 변경하기 위해 정적 어댑터 패키지를 다운로드하세요.

npm i -D @sveltejs/adapter-static

패키지가 설치된 후, 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 파일이 업데이트 된 후, 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 프로젝트를 빌드하고 정적 빌드를 복사하는 반면 두 번째 명령어 npx cap sync 는 모든 웹 code을 네이티브 플랫폼의 올바른 위치로同步시켜 앱에서 표시할 수 있도록합니다.

또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor 플러그인을 설치할 때는 다시 실행해야합니다. npx cap sync 잠재적으로는, 당신은 이제 프로세스를 완료했으므로, 장치에서 앱을 보러 가 봅시다!

iOS 앱을 개발하려면

Xcode

을 가지고 있어야합니다. Native 앱을 빌드하고 배포하기 설치되어 있어야 합니다. 그리고 안드로이드 앱을 위한 안드로이드 스튜디오가 설치되어 있어야 합니다. 또한 앱 스토어에 앱을 배포하려면 iOS와 안드로이드용 Google Play 콘솔에 등록해야 합니다. Capacitor를 사용하면 native 모바일 개발에 새로운 입문자라면 쉽게 둘 다의 native 프로젝트를 열 수 있습니다. 설치된 native 프로젝트를 사용하면 앱을 연결된 기기로 배포하는 것이 간단합니다. 안드로이드 스튜디오에서는 설정을 변경하지 않고도 앱을 연결된 기기로 배포할 수 있습니다. 예를 들어:

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

Xcode에서는 실제 기기에서 앱을 배포하려면 서명 계정을 설정해야 합니다. 서명 계정을 설정한 적이 없다면 Xcode는 개발자 프로그램에 등록한 후에 이 과정을 안내해 줍니다. 그 후에 단순히 플레이 버튼을 클릭하여 앱을 연결된 기기에서 실행할 수 있습니다. 기기를 선택하려면 위쪽에 있습니다. 예를 들어:

축하합니다! SvelteKit 웹 앱을 모바일 기기에서 성공적으로 배포했습니다. 예를 들어:

그러나 개발 중에는 더 빠른 방법도 있습니다...

__CAPGO_KEEP_1__ Live Reload

Capacitor Live Reload

이제는 모든 현대 프레임워크에서热重载을 사용해 보셨을 것입니다. 좋은 소식은 동일한 기능을 모바일 장치에서 사용할 수 있다는 것입니다. __CAPGO_KEEP_0__에서 동일한 기능을 사용할 수 있습니다. __CAPGO_KEEP_0__를 사용하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다.

__CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다. __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다. Capacitor 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다.

__CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다.

ipconfig getifaddr en0

__CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다.

ipconfig

__CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다.

Capacitor 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다. capacitor.config.ts __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다.

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;

__CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하여 네트워크 내에 있는 로컬 호스트 애플리케이션에 대한 액세스를 활성화하고 라이브 리로드를 사용할 수 있습니다. 로컬 IP 주소를 찾으려면 Mac을 사용하는 경우 터미널에서 다음 명령어를 실행하세요: 정확한 IP와 포트, 예시와 같이 보여집니다.

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

npx cap copy

The copy 명령어는 sync,와 유사하지만, 웹 폴더와 설정만 복사하고, 원시 프로젝트를 업데이트하지 않습니다. 이제 Android Studio 또는 Xcode를 통해 앱을 한 번 더 배포할 수 있습니다. 그 후에,

Svelte 앱에서 변경 사항을 변경하면, 자동으로 앱이 다시 로드되고 변경 사항을 보여줍니다! 주의해야 할 점은

__CAPGO_KEEP_0__ That은 새로운 플러그인(예: 카메라) 설치 시에도 원시 프로젝트를 다시 빌드해야 하는 이유입니다. 이는 원시 파일이 변경되었기 때문입니다. 원시 파일은 즉시 처리할 수 없습니다.

설정에서 올바른 IP와 포트를 사용해야 합니다. 위의 code 블록은 SvelteKit 기본 포트를 데모 목적으로 보여주고 있습니다.

Capacitor 플러그인 사용

이전에도 언급한 Capacitor 플러그인을 실제로 사용해 보겠습니다. 이를 위해 간단한 플러그인을 설치할 수 있습니다. 설치를 위해 다음 명령어를 실행하세요:

npm i @capacitor/share

Share 플러그인은 특별한 기능도 없지만 원시 공유 대화창을 열 수 있습니다! 이제는 플러그인을 임포트하고 공유 함수를 호출하기만 하면 됩니다. 따라서 `src/routes/index.svelte`를 다음과 같이 변경하세요:이전에도 언급한 바와 같이 새로운 플러그인을 설치할 때는 sync 작업을 수행하고 앱을 다시 배포해야 합니다. 이를 위해 다음 명령어를 실행하세요: share() 버튼을 클릭한 후, 아름다운 원시 공유 대화창을 실제로 사용해 보세요! __CAPGO_KEEP_0__ __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 네비게이션과 전환을 사용하고, 수평 스크롤이나 안전 영역이 잘려서 나타나는 문제를 해결할 수 있습니다.

원생스럽게 느껴지는 UI를 위해 Capgo 네이티브 네비게이션과 전환을 사용하세요.

저는 여러 해 동안 Ionic 을 사용하여 크로스 플랫폼 애플리케이션을 개발했지만, 그것을 SvelteKit와 통합하는 것은 복잡하고 거의 가치가 없으며, 이미 Tailwind CSS.

For a native mobile feel in a SvelteKit + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation 플러그인을 사용하세요. 웹 전용 UI 키트인 Konsta UI와 같은 것 대신:
• @capgo/capacitor-native-navigation — 네이티브 네비게이션 바, iOS에서 Liquid Glass 탭 바 스타일, Android에서 흐린 탭 바 스타일. SvelteKit 라우터는 라우트 상태를 유지하고 플러그인은 네이티브 창을 관리합니다.

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions

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는 흐릿한 WebView 백그라운드 사용):

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') ,

, Using @capgo/capacitor-native-navigation , Using @capgo/capacitor-transitions.

안전 영역에 Tailwind

Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__에서 tailwind-capacitor npm)에 공개되었습니다. Tailwind CSS에서 제공하는 safe-areas 기능과 기타 Capacitor-친화적인 Tailwind 플러그인:

bun add -D tailwind-capacitor

In src/app.css:

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

__CAPGO_KEEP_0__와 같은 기능을 사용하여 pt-safe, pb-safe와 px-safe 를 사용하는 대신 env(safe-area-inset-*) 수동으로 __CAPGO_KEEP_0__를 사용하여 프로젝트는 활발히 개발 중입니다. GitHub에 PR을 열어보세요..

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

iOS에서 콘텐츠가 잘려나가거나-shifted되거나 가로 스크롤이 가능한 경우, 더 많은 overflow-x: hidden 또는 뷰포트 태그만 조정하는 것만으로는 문제를 해결할 수 없습니다. 이러한 체크를 순서대로 진행하세요.

뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하세요

In src/app.html, 뷰포트 메타 태그를 <head>:

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

iOS 안전 영역을 하나의 루트 wrapper에서만 처리하세요

싱글 앱 셸을 생성하고 안전 영역 패딩을 거기에 적용하세요 — 여러 개의 중첩된 컴포넌트에 적용하지 마세요:

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);
}

모든 페이지 콘텐츠를 .app-shell헤더, 모달, 레이아웃 wrapper에 중복된 안전 영역 패딩이 있는 경우 UI가 잘려나가거나 너무 큰 경우가 있습니다.

With @capgo/tailwind-capacitor__CAPGO_KEEP_0__ iOS를 pt-safe pb-safe px-safe __CAPGO_KEEP_0__으로

Capacitor 단일 터미널에서 contentInset __CAPGO_KEEP_0__ iOS never __CAPGO_KEEP_0__를

__CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS capacitor.config.ts__CAPGO_KEEP_0__가 실제로 넘치는 요소를 찾습니다. contentInsetMode: 'css'__CAPGO_KEEP_0__ 요소가 일반적으로 문제의 원인입니다.

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

Capacitor iOS env(safe-area-inset-*) __CAPGO_KEEP_0__를

__CAPGO_KEEP_0__를

__CAPGO_KEEP_0__ 100vwTailwind w-screen픽셀 너비 또는 대형 min-width.

Safari Web Inspector에서 실행:

[...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, duplicated safe-area padding, 또는 고정 너비 컨테이너 — viewport meta 태그 자체가 아니라.

결론

Capacitor은 기존 웹 프로젝트 기반의 네이티브 애플리케이션을 빌드하는 데 적합한 옵션으로, code을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.

그리고 __CAPGO_KEEP_0__의 추가로, Capgo__CAPGO_KEEP_0__는 __CAPGO_KEEP_1__을 공유하고 UI를 유지하는 데 도움이 됩니다.

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_KEEP_0__를 사용하고 있다면 SvelteKit과 Capacitor를 사용하여 모바일 앱을 빌드하는 방법 CI/CD 자동화 계획을 위해 연결하세요. Capgo CI/CD Capgo CI/CD에서 제품 워크플로우 Capgo Native Builds Capgo Native Builds에서 제품 워크플로우 Capgo 통합 Capgo 통합을 위한 제품 워크플로우 CI/CD 통합 CI/CD 통합의 구현 세부 정보를 위한 GitHub 액션 통합 GitHub 액션 통합의 구현 세부 정보를 위한