한 번 디자인하고 어디에서나 실행: 웹, iOS, Android에서 하나의 UI 파일
한 번 디자인하고 웹, iOS 및 Android에서 UI를 실행하는 데 실제로 필요한 것: 공유 레이아웃 및 모션, 플랫폼별 부품, 테스트, ExodeUI가 적합한 곳.
핵심 포인트
한 번 디자인하면 어디에서나 실행된다는 것은 React, SwiftUI 및 Flutter에서 동일한 모션을 다시 작성하는 대신 하나의 소스 파일이 UI 구성 요소를 설명하고 각 플랫폼이 이를 런타임으로 재생한다는 것을 의미합니다. 레이아웃, 상태, 모션 및 입력이 공유 파일에 있을 때 작동하며 탐색, 접근성 및 시스템 제스처가 플랫폼별로 유지될 때 정직하게 유지됩니다. ExodeUI는 React, Vue, Svelte, Angular, Solid, React Native, SwiftUI 및 Flutter용 런타임 패키지로 이 모델을 지원합니다.
"한 번 디자인하면 어디에서나 실행 가능"이 실제로 요구하는 것
내보내기 버튼 이상의 것이 필요합니다. 공유 파일은 구성 요소가 다양한 크기로 배치되는 방식, 각 상태의 모양, 상태 간 이동 방식, 앱이 입력을 통해 구성 요소를 구동하는 방식을 설명해야 합니다. 각 플랫폼에는 파일을 재생하고 해당 입력을 실제 이벤트에 연결할 수 있는 런타임도 필요합니다. 해당 부분 중 하나라도 누락된 경우 약속은 또 다른 핸드오프로 전환됩니다.
공유 파일과 플랫폼별 재구축
전통적인 경로는 한 번 설계하고 세 번 재구축하는 것입니다. 웹은 CSS 및 JavaScript, iOS는 SwiftUI, Android는 Kotlin 또는 Flutter입니다. 재구축할 때마다 타이밍, 간격, 동작 처리에 약간의 차이가 발생합니다. 공유 파일 경로는 구성 요소 정의를 한 곳에 유지하고 각 플랫폼에서 이를 재생할 수 있도록 합니다. 단점은 런타임이 파일과 플랫폼 사이에 있으므로 플랫폼별 렌더링에 대한 직접적인 제어를 일부 포기한다는 것입니다.
플랫폼별로 유지되어야 하는 사항
공유 구성 요소는 모든 플랫폼이 동일한 척해서는 안 됩니다. 탐색 패턴, 뒤로 동작, 시스템 대화상자, 권한 및 접근성 API가 다릅니다. 공유 파일은 대화형 시각적 구성 요소를 소유해야 합니다. 호스트 앱은 플랫폼 크롬과 그 주변의 의미 제어를 소유해야 합니다. 예를 들어 공유 애니메이션 버튼은 올바른 역할과 레이블을 표시하는 기본 버튼 요소 내부에 배치될 수 있습니다.
런타임 작동 방식
런타임은 파일을 읽고, 시각적 트리를 구축하고, 입력이 변경되면 이를 업데이트합니다. 애플리케이션 코드는 누르기, 비활성화 또는 로드와 같은 입력을 설정하고 확인 또는 해제와 같은 이벤트를 수신합니다. 시각적 정의는 플랫폼별로 직접 작성한 코드가 아닌 데이터이기 때문에 런타임은 동일한 파일을 이식 가능하게 만드는 요소입니다. 런타임도 종속성이므로 무료라고 가정하는 대신 자체 빌드에 미치는 영향을 측정하세요.
모든 환경에서 동일한 파일 테스트
편집기뿐만 아니라 파일이 실행될 곳에서 파일을 테스트하십시오. 지원되는 최소 및 최대 크기의 레이아웃을 확인하고, 실제 콘텐츠로 모든 상태를 확인하고, 터치, 마우스 및 키보드 입력을 별도로 테스트하세요. 그런 다음 초점 순서, 레이블, 움직임 감소, 화면 판독기 동작 등 접근성을 확인하세요. 공유 파일은 시각적 드리프트를 줄이지만 각 플랫폼을 테스트할 필요성을 없애지는 않습니다.
ExodeUI가 맞는 곳
ExodeUI는 열려 있는 .exode 파일에 구성 요소를 저장하고 React, Vue, Svelte, Angular, Solid, React Native, SwiftUI 및 Flutter에 대한 런타임 패키지를 제공합니다. 파일에는 레이아웃과 중단점, 타임라인, 상태 머신, 스프링 물리학, 입력 및 이벤트가 포함될 수 있습니다. 동일한 파일을 브라우저나 데스크탑 편집기에서 편집할 수 있으며, MCP 서버를 통해 AI 코딩 도구가 작업할 수 있습니다.
하나의 공유 파일을 사용하지 않는 경우
인터페이스가 플랫폼 전용 API에 크게 의존하는 경우, 기본 렌더링에 대해 픽셀 수준 제어가 필요한 경우 또는 구성 요소가 대부분 비디오 또는 3D 장면인 경우 공유 파일은 적합하지 않습니다. 팀이 각 목표를 테스트할 수 없는 경우에도 적합하지 않습니다. 이러한 경우 플랫폼별 코드가 정직한 선택이며 공유 파일은 실제로 이점을 얻을 수 있는 부분만 다루어야 합니다.
프로덕션 구현 예시
import { ExodeUICanvas } from 'exodeui';
// The same component file can be played by the runtime your app already uses.
// Web, React Native, SwiftUI and Flutter packages read the same .exode source.
export function ShareSheet({ open, progress, onClose }) {
return (
<ExodeUICanvas
src="/share_sheet.exode"
inputs={{ open, progress }}
onTrigger={(name) => name === 'close' && onClose()}
/>
);
}기억할 핵심 원칙
- 한 번 디자인하고 어디서나 실행하려면 공유 레이아웃, 상태, 모션 및 입력과 플랫폼별 런타임이 필요합니다.
- 탐색, 권한 및 접근성 API는 플랫폼별로 유지되어야 합니다.
- 런타임은 종속성입니다. 빌드에 미치는 영향을 측정하세요.
- 레이아웃, 입력, 모션 및 접근성에 대한 모든 대상을 테스트합니다.
- ExodeUI는 React, Vue, Svelte, Angular, Solid, React Native, SwiftUI 및 Flutter에 대한 런타임을 제공합니다.