지원 플랫폼

NSH는 iOS, Android, macOS, Windows, Linux, GPUI와 웹에서 실행됩니다. 각 백엔드는 해당 플랫폼의 UI로 화면을 그립니다. 예를 들어 iPhone에서는 UIKit 뷰, Mac에서는 AppKit 뷰, Linux에서는 GTK 4 위젯, GPUI 앱에서는 GPUI 요소, 브라우저에서는 HTML을 사용합니다. 텍스트와 입력, 접근성, 다크 모드도 플랫폼을 따릅니다. 백엔드 위에서 동작하는 반응성 그래프, 렌더러, Taffy 레이아웃, 컴포넌트와 네이티브 모듈은 모두 같은 Rust 코드이므로 하나의 앱을 여러 플랫폼에서 실행할 수 있습니다. Rust 앱은 이 코드와 개발자가 작성한 크레이트로 구성되며 JavaScript VM이 필요하지 않습니다. TSX 앱의 모듈은 이 기반 위에서 QuickJS로 실행됩니다. Rust로 앱 작성하기에서 두 방식의 차이를 설명합니다.

어느 플랫폼에서든 nsh package로 설치 가능한 앱을 만들거나 기존 네이티브 앱 안에 NSH를 임베드할 수 있습니다. 호스트는 Rust 루트를 링크하거나 런타임에 TSX를 불러옵니다. 개발할 때는 nsh run을 사용합니다. Rust 코드를 수정하면 앱이 다시 빌드되고 재시작되며, TSX 수정 사항은 핫 업데이트로 반영됩니다.

#플랫폼 한눈에 보기

• GPUI 백엔드는 macOS, Windows, Linux에서 GPUI Kit의 기반 프레임워크인 GPUI로 화면을 그립니다. 기존 GPUI 또는 GPUI Kit 앱은 자신의 요소 트리에 AppView를 넣어 NSH 화면을 표시합니다. 독립 실행형 데스크톱 앱은 각 운영체제의 고유 백엔드(AppKit, Win32, GTK 4)로 실행하고 패키징합니다.
• 웹 백엔드는 브라우저 페이지에 HTML을 렌더링합니다. nsh package --target web은 어떤 웹 서버나 CDN에도 배포할 수 있는 정적 사이트를 만듭니다. Rust 앱의 엔진과 크레이트는 WebAssembly로 컴파일됩니다. 기존 웹 페이지에는 createPlayer 또는 iframe으로 앱을 넣을 수 있습니다. 이 사이트의 실행 예제와 플레이그라운드도 이 백엔드를 사용합니다.
• Mac Catalyst는 Mac에서 iPhone 크기의 창(390×844)으로 iOS 백엔드를 실행하는 개발용 타깃입니다. 휴대폰 화면에서 앱이 어떻게 보이는지 확인하려면 --target catalyst를 지정하세요.

#개발과 패키징

--target을 생략하면 nsh run은 현재 컴퓨터의 백엔드를 선택합니다. macOS에서는 AppKit, Linux에서는 GTK 창, Windows에서는 Win32 창을 사용합니다. iOS용 앱을 실행하려면 Xcode를 설치한 Mac이 필요합니다. Android용 앱은 Android SDK를 설치한 macOS, Linux 또는 Windows에서 실행할 수 있습니다. 호스트별 지원 명령를 참고하세요.

Rust 앱은 nsh.json의 "root"에 루트 컴포넌트를 지정합니다. 앱 디렉터리에서 실행하거나 패키징하면 nsh는 해당 타깃에 맞춰 앱의 크레이트를 포함하는 전용 실행기를 빌드합니다. 이 실행기는 QuickJS를 포함하지 않습니다. TSX 앱에서는 진입 파일을 지정합니다.

# A Rust app, from its directory
nsh run --target macos             # or ios, android, windows, linux, web, catalyst
nsh package --target macos         # or ios, ios-simulator, android, windows, linux, web

# A TSX app
nsh run App.tsx --target macos     # or ios, android, windows, linux, gpui, web, catalyst
nsh package App.tsx --target macos

데스크톱 앱은 대상 운영체제에서 그 운영체제의 백엔드로 패키징합니다. Mac 앱은 Mac에서, Windows 앱은 Windows에서, Linux 앱은 Linux에서 패키징하세요. 타깃별 출력물과 서명, 아이콘은 패키징에서 설명합니다.

#네이티브 앱에 임베드하기

Rust 호스트는 Rust 루트(Root::of::<App>())를 AppSource::Rust 또는 App::Rust로 마운트합니다. set_ui_sets로 앱의 UI 세트를 엔진에 전달하면 이후 불러온 TSX에서도 앱 고유의 컴포넌트와 모듈을 가져올 수 있습니다. 뷰마다 엔진이 하나씩 있으므로 한 앱에 여러 뷰를 표시할 수 있습니다. 모든 플랫폼에서 호스트는 앱이 사용할 네이티브 뷰를 직접 등록할 수 있습니다. 자세한 내용은 네이티브 컴포넌트를 참고하세요.

#여러 플랫폼을 위한 코드 작성

요소와 스타일, 레이아웃, 모듈은 플랫폼 전반에서 동일하게 동작하므로 대부분의 앱 코드에서는 플랫폼을 확인할 필요가 없습니다. 차이가 있는 부분은 다음과 같이 처리합니다. 플랫폼별 코드에서 자세히 살펴볼 수 있습니다.

• 실행 환경 확인. Rust에서는 nsh_core::prelude의 os(), idiom(), is_desktop()을 사용합니다. TSX에서는 nsh의 platform.os, platform.idiom, platform.desktop, platform.select를 사용합니다. OS 값은 iOS, Android, macOS, Windows, Linux 또는 웹입니다.
• 플랫폼별 속성. TSX의 ios={{…}}, android={{…}}, web={{…}}, desktop={{…}}에 지정합니다. desktop에는 macOS, Windows, Linux와 데스크톱 브라우저가 포함됩니다.
• 입력 방식. 휴대폰에서는 터치와 소프트웨어 키보드를, 데스크톱에서는 마우스와 트랙패드, 키보드를 사용합니다.

NSH의 기본 요소로 그린 컴포넌트는 휴대폰과 데스크톱에서 같은 모습으로 동작합니다. 기기에 맞춰 레이아웃을 바꾸려면 갤러리 앱처럼 기본 요소(Rust의 view, text, scroll, virtual_list 등, TSX의 View, Text, Scroll, List 등)를 조합하고 데스크톱 여부를 확인합니다.

use nsh_core::prelude::*;

#[component]
pub fn Shell() -> impl IntoElement {
    // macOS, Windows, Linux and desktop browsers get a sidebar; phones get tabs.
    view()
        .flex_1()
        .child(if is_desktop() { sidebar_layout() } else { tab_layout() })
}

fn sidebar_layout() -> AnyElement {
    view().flex_1().flex_row().into_element()
}

fn tab_layout() -> AnyElement {
    view().flex_1().flex_col().into_element()
}

import { View } from "nsh";
import { platform } from "nsh";

export function Shell() {
  // macOS, Windows, Linux and desktop browsers get a sidebar; phones get tabs.
  return <View class="flex-1">{platform.desktop ? <SidebarLayout /> : <TabLayout />}</View>;
}

function SidebarLayout() {
  return <View class="flex-1 flex-row" />;
}

function TabLayout() {
  return <View class="flex-1 flex-col" />;
}

백엔드별 차이는 macOS, Windows, Linux, GPUI 문서에서 확인할 수 있습니다.

#함께 보기

• 시작하기에서는 첫 앱을 만들고 각 플랫폼에서 실행합니다.
• Rust로 앱 작성하기에서는 Rust만 사용하거나 TSX와 함께 사용하는 방법을 설명합니다.
• 설치에서는 플랫폼에 필요한 도구를 확인할 수 있습니다.
• 아키텍처에서는 여러 플랫폼이 공유하는 부분과 각 백엔드가 담당하는 부분을 설명합니다.