App Builder 시작하기

App Builder는 디자인을 빠르게 기능적인 웹 앱으로 변환할 수 있는 로우코드 플랫폼으로, 모든 코드를 작성할 필요가 없습니다. 처음부터 시작하거나, 템플릿을 사용하거나, Figma 디자인을 가져온 후 드래그 앤 드롭 컴포넌트, 실제 데이터 연결 및 레이아웃 커스터마이제이션을 사용하여 시각적으로 앱을 빌드합니다. 프로덕션 준비가 된 Angular, React, Blazor 및 Web Components 코드를 생성하며, 한 번의 클릭으로 GitHub 또는 Azure에 내보내거나 배포할 수 있습니다.

모든 것이 어떻게 함께 작동하는지

아래 다이어그램은 App Builder가 광범위한 디자인 및 개발 도구의 생태계에 어떻게 적합한지에 대한 고차원적 개요를 제공합니다.

Platform Ecosystem

간단히 설명하면

디자인 시스템 → UI 키트 및 어댑터: 디자인 시스템으로 시작하여 UI 키트(예: Figma용 Indigo.Design)로 구현합니다. 어댑터는 디자인을 App Builder가 사용할 수 있는 형식으로 변환합니다.
App Builder + 통합: App Builder를 사용하여 시각적으로 앱을 만듭니다. REST 데이터, Reveal SDK 위젯(대시보드용) 및 Slingshot 작업(프로젝트 관리용)을 지원합니다.
공통 앱 모델: 모든 것이 중앙의 공통 앱 모델로 흐르며, 이는 디자인 가져오기 또는 수동 빌드 방식과 관계없이 앱을 설명하는 통합 형식입니다.
코드 생성(Codegen): 이 모델은 코드 생성기에서 사용되어 다음을 위한 실제의 사용 가능한 코드를 출력합니다:
- Angular
- React
- Web Components
- Blazor
배포 대상: 마지막으로, 생성된 코드를 GitHub 또는 Microsoft Azure와 같은 플랫폼에 직접 배포할 수 있습니다.

App Builder 시작

App Builder에 액세스하려면 https://appbuilder.dev로 이동하여 로그인하세요. 또는 https://my.appbuilder.dev를 방문하여 App Builder를 직접 시작할 수 있습니다. 앱을 만들고 편집하려면 활성 체험판 또는 유료 구독이 필요합니다.

새 앱 만들기

"새 애플리케이션 만들기" 대화 상자에서 새 앱을 만들 수 있는 세 가지 방법이 있습니다:

샘플 앱 - 시작 앱은 App Builder를 사용하여 만든 애플리케이션을 탐색하는 데 도움이 되며, 자신의 사용자 공간에서 수정할 수 있습니다. 또한 처음부터 자신의 앱을 만들 필요 없이 더 큰 애플리케이션의 생성된 코드를 미리 볼 수 있는 좋은 소스입니다. App Builder를 처음 사용하는 경우 시작점으로 샘플 앱 옵션을 사용하는 것이 좋습니다. 이는 도구의 멋진 기능에 자신을 빠르게 적응시키고 애플리케이션 구축을 시작하는 가장 빠른 방법입니다.
앱 레이아웃 - 사전 정의된 레이아웃의 이점을 활용하여 처음부터 새 앱을 시작합니다. 여기서 빈 템플릿을 기반으로 앱을 만드는 옵션도 찾을 수 있습니다.
디자인 가져오기 - Figma 또는 Sketch를 사용하여 만든 기존 디자인 파일이 있는 경우, 이를 앱의 시작점으로 사용할 수 있습니다. 이를 위해 디자인 발행 플러그인, UI 키트 및 샘플 디자인 파일을 포함하는 Indigo.Design 시스템을 가져옵니다.

Note

Sketch의 절대 레이아웃과 App Builder의 Flex 레이아웃 간의 차이로 인해 Sketch 파일을 구문 분석한 후 추가 조정이 필요할 수 있습니다.

새 프로젝트 대화 상자

App Builder에 들어간 후 사용자는 활성 애플리케이션 간에 쉽게 전환하거나 App Builder를 떠나지 않고 디자인 타임에 앱 내 사이드 메뉴에서 App Builder의 작업 공간으로 돌아갈 수 있습니다.

사이드 메뉴

코드 가져오기

App Builder는 항상 설계 표면과 미리보기 창 모두에서 라이브로 실행 중인 웹 애플리케이션을 표시합니다. 기본 코드와 애플리케이션 모델은 설계 표면에서 애플리케이션을 변경하면서 실시간으로 업데이트됩니다. 언제든지 미리보기 창에서 생성된 애플리케이션 코드를 보거나, 언제든지 완전한 애플리케이션 코드 저장소로 생성된 애플리케이션을 다운로드할 수 있으며, 원하는 코드 편집기에서 열 수 있습니다. 그 후 App Builder를 사용하여 설계한 애플리케이션을 로컬 머신에서 빌드 및 실행할 수 있으며 생성된 코드를 추가로 수정할 수 있습니다.

애플리케이션 미리보기 창

VS Code에서 실행되는 생성된 애플리케이션의 코드

Note

애플리케이션 코드를 다운로드한 후 로컬에서 수행한 변경 사항은 App Builder 사용자 공간에 반영되지 않습니다.

App Builder의 온프레미스 버전

App Builder는 개발자, 디자이너 및 제품 관리자에게 소프트웨어 제품 검색, 소프트웨어 제품 디자인, 대화형 제품 PoC 빌드 및 후속 수정을 위해 준비된 픽셀 완벽한 코드 프로젝트를 발행하기 위한 통합 플랫폼을 제공하는 SaaS입니다.

일부 기업은 매우 규제가 심한 산업에 속해 있습니다. 주로 보안상의 이유로 많은 기업들이 App Builder와 같은 클라우드 기반 솔루션에 제한되거나 액세스 권한이 없거나, 특정 위치의 인터넷 연결이 제한적입니다. 이러한 세그먼트를 포괄하기 위해 App Builder를 방화벽 뒤에 배치하여 자체 인프라에서 실행되고 내부 인원만 액세스할 수 있도록 하는 쉬운 방법을 제공해야 했습니다.

온프레미스 애플리케이션은 신뢰할 수 있고 안전하며, 엔터프라이즈가 클라우드에서 종종 제공할 수 없는 수준의 제어를 유지할 수 있습니다.

온프레미스 솔루션을 설치하는 방법에 대한 더 자세한 기술 정보를 확인하세요.