SvelteKit 및 Capacitor으로 모바일 앱을 만들기

이 튜토리얼에서는 새로운 SvelteKit 앱을 시작하여 __CAPGO_KEEP_0__를 사용하여 네이티브 모바일 개발로 전환할 것입니다. 또한 __CAPGO_KEEP_1__ Native Navigation 및 Transitions를 추가하여 네이티브 모바일 느낌을 주고 tailwind-__CAPGO_KEEP_2__를 사용하여 안전한 영역을 사용할 수 있습니다. __CAPGO_KEEP_0__은 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에 대해 알아보기

Follow this step-by-step guide to transform your SvelteKit app into a mobile app using Capacitor, with optional Capgo Native Navigation, Transitions, and iOS layout guidance.

About Capacitor

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

Capacitor은 복잡한 설정이나 기울임꼴의 학습 곡선이 없는 방식으로 훌륭한 네이티브 모바일 앱을 만들 수 있게 해줍니다. API은 가볍고 Capacitor의 streamlined 기능을 제공하여 프로젝트에 쉽게 통합할 수 있습니다. Capacitor를 사용하여 완전히 기능하는 네이티브 앱을 쉽게 달성할 수 있습니다.

스벨트 키 앱을 준비합니다.

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

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

명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더가 생성되어야 합니다. build 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용되지만, 현재는 올바르게 설정해야 합니다. dist __CAPGO_KEEP_0__을 스벨트 키 앱에 추가합니다.

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

첫째, Capacitor을 설치하세요.

__CAPGO_KEEP_0__은 __CAPGO_KEEP_1__을 __CAPGO_KEEP_2__합니다. sync __CAPGO_KEEP_0__은 __CAPGO_KEEP_1__을 __CAPGO_KEEP_2__합니다.

__CAPGO_KEEP_0__은 __CAPGO_KEEP_1__을 __CAPGO_KEEP_2__합니다. Capacitor CLI __CAPGO_KEEP_0__과 __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중에 이름과 번들 ID에 대한 기본값을 수락하려면 “엔터” 키를 눌러주세요.

iOS와 Android 플랫폼에 관련된 패키지를 설치하세요.

마지막으로 플랫폼을 추가하고 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

이 시점에서 SvelteKit 프로젝트 내에서 새로운 ios 및 android 폴더를 볼 수 있습니다.

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

Android 프로젝트에 접근하려면 Android Studio를 설치해야 합니다. Android Studio를 설치해야 합니다.. iOS용으로는 Mac이 필요하고 Xcode를 설치해야 합니다. Xcode.

또한 프로젝트에서 __CAPGO_KEEP_0__.config.ts 파일을 찾으셔야 합니다. 이 파일에는 동기화 시 사용되는 기본 __CAPGO_KEEP_0__ 설정이 포함되어 있습니다. 주의해야 할 것은 webDir만으로, 이는 현재 명령어의 결과로 설정되어야 합니다. 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 webDir이 문제를 해결하려면 __CAPGO_KEEP_0__.config.ts 파일을 열고 webDir를 올바르게 설정해야 합니다.

__CAPGO_KEEP_0__.config.ts capacitor.config.ts 우리의 __CAPGO_KEEP_0__ 설정을 업데이트한 후, Sveltekit 프로젝트를 정적 애플리케이션으로 변경하기 위해 정적 어댑터 패키지를 다운로드해야 합니다. __CAPGO_KEEP_0__:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Capacitor

npm i -D @sveltejs/adapter-static

After the package is installed, we’ll need to modify svelte.config.js file from the auto-adapter to static:

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

With the svelte.config.js updated, we’ll need to add a prerender option by creating a +layout.js page to src/routes and just add the following export to +layout.js:

export const prerender = true

페이지를 추가하고 업데이트한 후, 우리는 모바일 플랫폼을 추가하고 프로젝트를 다시 빌드하여 "build" 폴더를 생성해야 합니다. +layout.js 페이지를 추가하고 업데이트한 후, 우리는 모바일 플랫폼을 추가하고 프로젝트를 다시 빌드하여 "build" 폴더를 생성해야 합니다. build 이 작업을 수행하려면 다음 명령어를 실행하시면 됩니다.

첫 번째 명령어는 SvelteKit 프로젝트를 빌드하고 정적 빌드를 복사합니다.

npm run build
npx cap sync

두 번째 명령어는 웹 __CAPGO_KEEP_0__을 네이티브 플랫폼의 올바른 위치에同步하여 앱에서 표시되도록 합니다. npm run build 또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 __CAPGO_KEEP_0__ 플러그인을 설치할 때 업데이트가 발생할 수 있습니다. npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

will build your SvelteKit project and copy the static build, while the second command will sync all the web Capacitor into the right places of the native platforms so they can be displayed in an app.이제 앱을 실행할 차례입니다. npx cap sync 다시.

사실은 알지 못했지만, 프로세스를 완료했습니다. 이제 기기에서 앱을 확인해 보세요!

자연어 앱을 개발하고 배포하세요.

iOS 앱을 개발하려면 Xcode가 설치되어 있어야 하며, Android 앱을 개발하려면 Android Studio가 설치되어 있어야 합니다. 또한 앱 스토어에서 앱을 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다. 자연어 모바일 개발에 새로운 입문자라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 쉽게 iOS 및 Android의 네이티브 프로젝트를 열 수 있습니다. 네이티브 프로젝트를 설정한 후 기기에서 앱을 배포하는 것은 쉽습니다. Android Studio에서는 설정을 변경하지 않고 기기를 연결한 후 앱을 배포할 수 있습니다. 예를 들어: android-studio-run 기기를 연결한 후 앱을 배포하는 것은 쉽습니다. Android Studio에서는 설정을 변경하지 않고 기기를 연결한 후 앱을 배포할 수 있습니다. 예를 들어:

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에서는 설정을 변경하지 않고 기기를 연결한 후 앱을 배포할 수 있습니다. 예를 들어:

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

성공했습니다! SvelteKit 웹 앱을 모바일 기기에 성공적으로 배포했습니다. 예를 들어, 다음과 같습니다.

하지만, 개발 중에는 더 빠른 방법도 있습니다...

Capacitor Live Reload

이제 대부분의 프레임워크에서 핫 리로드를 사용해 왔을 것입니다. 좋은 소식은 __CAPGO_KEEP_0__ 앱에서 동일한 기능을 사용할 수 있다는 것입니다. 모바일 기기에서 최소한의 노력으로도 동일한 기능을 사용할 수 있습니다.

로컬 호스트 애플리케이션에 대한 접근 권한을 활성화하여 네트워크에서 Live Reload __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하십시오. by having the Capacitor app load the content from the specific URL.

첫 번째 단계는 로컬 IP 주소를 찾는 것입니다. Mac을 사용하는 경우, 터미널에서 다음 명령어를 실행하여 이를 찾을 수 있습니다:

ipconfig getifaddr en0

Windows에서 실행하세요:

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

하지만 copy 이것만 synctargetLanguage 변경 사항을 웹 폴더에 복사하세요. 자연스럽게 native 프로젝트를 업데이트하지 않습니다.

Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, Svelte 앱에서 변경 사항을 수정하면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다. 주의하십시오.

새로운 플러그인, 카메라와 같은 것을 설치하면 native 프로젝트를 다시 빌드해야 합니다. 이는 native 파일이 변경되었기 때문입니다. 이 작업은 즉시 수행할 수 없습니다. 정확한 IP와 포트를 사용하여 구성해야 합니다. 위의 __CAPGO_KEEP_0__ 블록은 SvelteKit의 기본 포트를 데모용으로 보여주고 있습니다.

code 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 몇 번 언급했듯이, 간단한 플러그인을 설치하려면 다음 명령어를 실행하세요:

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a simple plugin by running:

npm i @capacitor/share

__CAPGO_KEEP_0__ 플러그인 __CAPGO_KEEP_0__이것은 native share dialog을 열지만! 이 경우, 우리는 package를 import하고 app에서 function을 호출하기만 하면 되므로, src/routes/index.svelte를 다음과 같이 변경해 보세요: share() 새로운 플러그인을 설치할 때, 우리는 sync operation을 수행하고 앱을 다시 배포해야 합니다. 이 작업을 수행하려면 다음 명령어를 실행하세요: 버튼을 클릭한 후, native share dialog의 아름다운 모습을 보실 수 있습니다! 다음으로, iOS와 Android에서 앱이 더 자연스럽게 보이도록 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하고, iOS에서 발생하는 일반적인 레이아웃 문제를 해결할 수 있습니다. 이 문제로는 가로 방향의 오버플로우나 안전 영역이 잘려 나가는 문제가 있습니다.

<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__ 네이티브 네비게이션과 전환을 사용하여 자연스러운 UI를 구현하세요.

npx cap sync

저는 Ionic을 사용하여 여러 해 동안 크로스 플랫폼 앱을 개발해 왔습니다. 하지만 SvelteKit과 통합하는 것은 hacky하고, 이미 Tailwind CSS를 사용하고 있다면 가치가 없습니다.

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Native-feeling UI with Capgo Native Navigation and Transitions

버튼을 클릭한 후, native share dialog의 아름다운 모습을 보실 수 있습니다! 다음으로, iOS와 Android에서 앱이 더 자연스럽게 보이도록 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하고, iOS에서 발생하는 일반적인 레이아웃 문제를 해결할 수 있습니다. 이 문제로는 가로 방향의 오버플로우나 안전 영역이 잘려 나가는 문제가 있습니다. __CAPGO_KEEP_0__ 네이티브 네비게이션과 전환을 사용하여 자연스러운 UI를 구현하세요. 저는 Ionic을 사용하여 여러 해 동안 크로스 플랫폼 앱을 개발해 왔습니다. 하지만 SvelteKit과 통합하는 것은 hacky하고, 이미 Tailwind CSS를 사용하고 있다면 가치가 없습니다..

SvelteKit + Capacitor 앱에서 원생 모바일 경험을 위해, Konsta UI와 같은 웹 전용 UI 키트 대신 Capgo 플러그인을 사용하십시오.

• @capgo/capacitor-native-navigation — iOS에서 Liquid Glass 탭바, Android에서 흐린 탭바 스타일, 그리고 네이티브 네비게이션 바를 사용하십시오.
• @capgo/capacitor-transitions — Ionic UI를 채택하지 않고도 WebView layer에서 Ionic-style 페이지 전환과 iOS의 에지 스와이프 백을 사용하십시오.

두 개 모두 설치하십시오.

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

Liquid Glass 탭바를 렌더링하십시오 (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>

페이지를 Wrap routed pages in cap-router-outlet, cap-page, and cap-content, and call setDirection('forward') 또는 setDirection('back') 이전으로 이동하기 전에. 네이티브 네비게이션이 해당 표면을 소유할 때 웹 헤더나 푸터를 중복하지 마십시오.

자세한 설명서를 참조하십시오. @capgo/capacitor-네이티브-네비게이션을 사용하는 방법 및 @capgo/capacitor-트랜지션을 사용하는 방법.

Tailwind에서 안전한 영역

Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__에서 출판됨). Tailwind에서 __CAPGO_KEEP_0__-친화적인 유용성과 다른 __CAPGO_KEEP_0__-친화적인 플러그인을 제공합니다. tailwind-capacitor npm에서 출판된 __CAPGO_KEEP_1__입니다. safe-areas Capacitor는 __CAPGO_KEEP_1__을 제공합니다.

bun add -D tailwind-capacitor

In src/app.css:

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

Use utilities such as pt-safe, pb-safe, and px-safe instead of manually adding env(safe-area-inset-*) by hand. The project is actively developed — if something is missing for your SvelteKit setup, open a PR on GitHub.

iOS 레이아웃 문제를 해결하는 방법 (뷰포트, Safe Area, 및 수평 스크롤)

iOS에서 콘텐츠가 잘려나가거나-shifted, 또는 수평 스크롤이 가능하다면, overflow-x: hidden or 수평 스크롤을 막기 위해만 viewport 태그를 조정하는 것만으로는 해결되지 않는다. 이 순서대로 체크를 진행하라.

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

In src/app.html, viewport 메타 태그를 __CAPGO_KEEP_0__에 설정하라 <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가 잘려나거나 너무 크게 보입니다.

그리고 @__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor안전 영역을 설정하십시오 pt-safe pb-safe px-safe 첫 번째

Set Capacitor iOS contentInset 안전 영역 never 첫 번째

In capacitor.config.tsnative inset을 사용하지 않고 CSS (또는 Native Navigation의 )가 safe area를 관리하도록 하세요. contentInsetMode: 'css'CSS의 padding과 __CAPGO_KEEP_0__의 자동 content inset을 혼용하는 것은 일반적인 double spacing의 원인입니다.

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) 일반적으로 overflow가 발생하는 원인은 element가 사용하는 fixed pixel width 또는 large size 인 경우입니다.

Safari Web Inspector에서 실행하세요:

Tailwind를 사용하면 100vwwith w-screen가능한 경우 Tailwind를 사용하여 min-width.

horizontal overflow의 문제는 주로 fixed pixel width 또는 large size 인 element에서 발생합니다.

[...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,
  }));

when 가능합니다. w-screen many horizontal overflow의 문제는 fixed pixel width 또는 large size 인 element에서 발생합니다. w-full with 가능합니다. 100vw / w-screenviewport meta tag 자체에서 duplicated safe-area padding, 또는 fixed-width container — viewport meta tag 자체에서.

결론

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

그리고 __CAPGO_KEEP_0__ 추가와 함께, Capgo__CAPGO_KEEP_0__을 SvelteKit 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요.

Capgo이 앱을 더 빠르게 빌드하는 데 어떻게 도움이 되는지 알아보세요.

Capgo을 무료로 사용하기 위해 지금 가입하세요. Building Mobile Apps with SvelteKit과 __CAPGO_KEEP_0__에서 계속 진행하세요.

Capacitor을 사용하고 있다면

__CAPGO_KEEP_0__을 사용하고 있다면 SvelteKit과 Capacitor으로 모바일 앱을 빌드하세요. __CAPGO_KEEP_0__ CI/CD와 연결하여 Capgo CI/CD Capgo CI/CD에서 제품 워크플로우를 Capgo 네이티브 빌드 Capgo 네이티브 빌드에서 제품 워크플로우를 Capgo 통합 Capgo 통합에서 제품 워크플로우를 CI/CD 통합 CI/CD 통합의 구현 세부 사항을 GitHub 액션 통합 GitHub 액션 통합의 구현 세부 사항을