Swift Web Studio
브라우저에서 SwiftUI를 디자인하세요. Swift 코드는 그대로.
비주얼 편집, Swift 코드 에디터, 인터랙티브 기기 미리보기를 하나의 작업 공간에. 템플릿이나 직접 만든 Swift 파일로 시작해 디자인을 다듬고, 네이티브 개발을 위한 프로젝트로 내보낼 수 있습니다.
대부분의 디자인 도구는 앱의 그림을 그립니다. Swift Web Studio는 앱 자체를 편집합니다. 캔버스에서의 모든 변경은 곧 Swift 소스 코드의 변경이므로, 전달물이 바로 코드입니다.
하이라이트 보기.
Swift로 말하는 디자이너의 도구.
소스를 보존하는 편집. 비주얼 변경은 바탕이 되는 Swift 코드에 직접 반영되며, 캔버스에서 편집할 수 없는 부분도 코드에서 그대로 편집할 수 있습니다.
컴포넌트. 인스턴스 입력값, 저장된 변형, 그리고 공유 색상, 간격, 텍스트 스타일.
컬렉션. 공통 행 디자인을 가진 레코드와 콘텐츠를 시험해 보기 위한 미리보기 시나리오.
기기 미리보기. 다양한 기기 크기, 화면 모드, 텍스트 크기에서 확인할 수 있는 인터랙티브 미리보기.
점검. 대비, 터치 영역, 넘침에서 문제가 될 수 있는 부분을 알려 줍니다.
프레젠테이션. 화면을 바로 보여 주거나 PNG와 콘택트 시트로 내보낼 수 있습니다.
공유되는 실행 취소. 화면과 레이어를 정리하고, 두 곳 모두에서 실행 취소와 재실행을 사용할 수 있습니다.
이미지. PNG와 JPEG를 가져올 수 있으며, 다크 모드용 변형도 선택적으로 추가할 수 있습니다.
자동 저장과 아카이브. 프로젝트는 브라우저에 저장되며, 편집 가능한 아카이브를 언제든 다운로드할 수 있습니다.
그 내부를 들여다보면.
컴파일러, 인터프리터, 레이아웃 패키지는 React와 DOM으로부터 독립되어 있습니다. 미리보기는 Web Worker에서 실행됩니다.
apps/webNext.js 작업 공간, 에디터, 대화상자, Worker 호스트swift-syntax렉서, 파서, 구문 트리, 소스 편집swift-sema이름 해석, 의미 분석, 디자인 편집swift-runtimeSwift 인터프리터swiftui-runtimeSwiftUI 상태, 뷰 구성, 인터랙션swiftui-layout레이아웃과 텍스트 측정swiftui-render-dom렌더 트리 표시project-model프로젝트, 파일, 템플릿, 영속성, 공유exporter프로젝트 스캐폴딩과 ZIP 가져오기 및 내보내기shared · sim-shell공유 타입과 기기 사양미리보기는 Swift와 SwiftUI 중 지원되는 일부 기능을 해석합니다. Apple의 컴파일러나 iOS Simulator를 실행하지 않으므로, 내보낸 앱은 출시 전에 Xcode에서 빌드하고 검토합니다.
여섯 가지 내보내기 방식.
어떤 형식이든 Swift 소스 코드는 그대로 보존됩니다.
기술 사양
- 기술 스택
- TypeScript 기반. 언어, 런타임, 레이아웃 패키지가 각각 독립된 Next.js 작업 공간
- 미리보기
- Web Worker에서 실행되는 Swift 및 SwiftUI 인터프리터, 문서화된 하위 집합 지원
- 저장
- 브라우저 자동 저장(IndexedDB), 편집 가능한
.swiftstudio.zip아카이브 - 내보내기
- Xcode 프로젝트, Swift Playgrounds 앱, Swift 패키지, XcodeGen 스펙
- 프롬프트
- 선택 사항인 프롬프트 기반 생성, 사용자 본인의 제공업체 키 사용
- 품질
- 타입 검사, 린트, 단위 테스트를 포함한 CI, Playwright 엔드투엔드 테스트, 번들 크기 예산
