Angular 웹사이트를 그대로 앱으로 감싸는 방식은 Ionic/Capacitor가 가장 현실적입니다. 기존 ASP.NET API도 그대로 쓰고, Angular 코드도 상당 부분 재사용하는 방향으로 정리하겠습니다.

가장 현실적인 방법은 Capacitor로 Angular 웹을 Android/iOS 앱으로 감싸는 방식입니다. Capacitor는 기존 웹 앱에 추가할 수 있고, 빌드된 dist 자산을 Android/iOS 네이티브 프로젝트로 복사해 앱으로 실행합니다.

1) 기존 Angular 프로젝트에 Capacitor 추가

Angular 프로젝트 루트에서:

npm install @capacitor/core @capacitor/cli
npx cap init

예시 입력:

App name: Allres Shop
App id: kr.co.allres.shop

appId는 Android Application ID / iOS Bundle ID로 쓰이며 보통 역도메인 형식을 사용합니다.

2) capacitor.config.ts 설정

Angular 17/18은 빌드 결과가 보통 dist/프로젝트명/browser입니다.

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

const config: CapacitorConfig = {
  appId: 'kr.co.allres.shop',
  appName: 'Allres Shop',
  webDir: 'dist/client/browser',
  server: {
    androidScheme: 'https'
  }
};

export default config;

프로젝트명이 다르면 webDir만 바꾸면 됩니다.

3) Angular 빌드

npm run build -- --configuration production

4) Android/iOS 플랫폼 추가

npm install @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios

Capacitor 공식 Angular 안내도 ng build 후 Android/iOS 플랫폼을 추가하는 흐름을 설명합니다.

5) 앱으로 실행/빌드

Android

npx cap sync android
npx cap open android

Android Studio가 열리면:

Run → 실제 기기/에뮬레이터 실행
Build → Generate Signed Bundle / APK

Capacitor Android는 Android 7(API 24)+를 지원합니다.

iPhone / iOS

npx cap sync ios
npx cap open ios

Xcode에서 실행/배포합니다. iOS 앱 빌드는 Mac + Xcode가 필요하고, Capacitor iOS는 Xcode에서 관리됩니다.

6) 코드 수정 후 반복 배포

Angular 수정 후 매번:

npm run build -- --configuration production
npx cap sync android
npx cap sync ios

sync는 웹 빌드 자산 복사 + 네이티브 플랫폼 업데이트 + 플러그인 반영을 수행합니다.

7) API 주소 주의

앱에서는 Angular가 로컬 웹서버가 아니라 앱 내부 WebView에서 실행됩니다. 그래서 API는 반드시 실제 HTTPS 주소를 써야 합니다.

export const environment = {
  production: true,
  apiBaseUrl: 'https://shopapi.allres.co.kr'
};

서비스:

this.http.get(`${environment.apiBaseUrl}/api/products`);

8) 가장 중요한 체크

앱으로 만들면 아래는 거의 필수입니다.

1. API 서버 HTTPS 적용
2. Android/iOS에서 접근 가능한 실제 도메인 사용
3. CORS 허용 Origin 점검
4. 카메라/위치/푸시 등은 Capacitor 플러그인 추가
5. Android는 Android Studio, iOS는 Mac + Xcode 필요

정리하면, 기존 Angular 웹사이트를 앱으로 만드는 최단 경로는:

npm install @capacitor/core @capacitor/cli
npx cap init
npm run build -- --configuration production
npm install @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios
npx cap sync android
npx cap open android

iOS는 Windows만으로는 최종 빌드가 어렵고 Mac/Xcode 환경이 필요합니다.