클라우드에서 빠른 속도로 웹 애플리케이션을 개발하는 Indigo.Design App Builder 출시
Indigo.Design App Builder는 새로운 클라우드 기반 WYSIWYG 드래그 앤 드롭 툴로 그 어느 때보다 빠르게 완전한 비즈니스 앱을 디자인하고 개발할 수 있도록 도와줍니다. App Builder는 완벽한 디자인-코드 솔루션을 갖춘 세계 유일의 디지털 제품 디자인 플랫폼 인 Indigo.Design의 일부이며 소프트웨어 개발 과정에서 반복적인 핸드 오프, 잘못된 의사 소통으로 인해 낭비되는 시간과 비용을 줄이는데 큰 도움을 줄 것입니다. 수많은 테마 옵션과 테스트 가능한 표준 기반, 프로덕션 준비 코드 출력을 갖춘 Indigo.Design App Builder과 함께라면 해내지 못할 것이 없습니다.
App Builder란 무엇입니까?
App Builder에 대한 저희의 목표는 간단합니다. 귀하와 귀하의 팀이 고품질의 제품을 더 빨리 개발할 수 있도록 돕는 것입니다. Gartner Research에 따르면 앱 개발 시간의 60 % 이상이 UI에 소비된다고 합니다. 그리고 이 통계 결과는 몇 년 전에 이루어 진 것입니다. 저는 오늘날 그 비율이 훨씬 더욱 높아졌다고 생각합니다. Infragistics는 데스크톱 개발자 툴의 선두 주자로서 많은 개발자들이 웹으로 이동하는데 어려움을 겪고 있다는 걸 지켜봐왔습니다. 일반적으로 개발자들은 아래와 같은 문제에 직면합니다.
· Angular, React, Blazor와 같은 최신 프레임워크를 대상으로 하는 비즈니스 앱을 개발할 수 있게 돕는 WYSIWYG 로우코드 앱 빌더 툴이 존재하지 않습니다.
· 웹 상의 레이아웃은 복잡하고 Visual Studio와 같은 데스크톱 개발 툴을 마스터하기 어렵습니다.
· 복잡한 CSS - TypeScript. HTML과 함께 익혀야 하는 또 다른 컴퓨터 언어입니다.
그리고 오늘날 디지털 제품 개발에서 가장 중요한 문제는 다음과 같습니다:
· 디자인 팀의 디자인은 실제 코드와 실제 앱으로 구현하기 어렵습니다. 디자이너-개발자 간의 핸드 오프에 많은 시간 (돈)과 노력이 낭비됩니다.
Indigo.Design과 새로워진 App Builder 소프트웨어를 사용하면 이러한 문제들을 해결할 수 있습니다. 생산성이 급증할 뿐만 아니라 완전한 협업 플랫폼을 덕분에 코드에 대해 생각하기 전에 디자인을 할 수 있습니다. 따라서 웹 앱을 디자인하는 것이 고통스럽고 스트레스를 동반하는 과정이 아니라 생산적이고 창의력을 발산하는 경험이 될 수 있습니다.
Indigo.Design App Builder에는 귀하의 팀에 생산성을 높일 수 있을 것으로 기대되는 툴이 있습니다:
· Visual Studio, Sketch, Figma, Adobe XD와 같이 현재 사용하는 도구와 유사한 웹 기반 IDE
· Ignite UI 컴포넌트 라이브러리에 직접 매핑되며 Indigo.Design System의 UI 컴포넌트로 가득한 툴
· 구성 요소 및 데이터 바인딩 속성을 설정하기 위한 속성 편집기 패널
· 마스터 페이지/하위 페이지의 계층적 보기, 탐색 가능한 스크린 디자인 아웃라인과 함께 완성
· REST 데이터 원본에 연결하거나 JSON 파일을 업로드할 수 있는 데이터 원본 옵션
· 모든 고객, 브랜드 경험과 일치하는 기본 제공 테마/사용자 지정 테마 작성기를 포함한 테마 옵션
App Builder 툴: Indigo.Design 웹 앱 빌더
App Builder는 로우 코드의 클라우드 기반 WYSIWYG 드래그 앤 드롭 툴을 제공하여 앱 개발 과정을 가속화합니다. 실제 UI 컨트롤, 수많은 테마 옵션, 표준 기반 코드 출력과 함께 Adobe XD, Sketch, Figma와 같은 인기있는 디자인 툴과 호환되는 Indigo.Design App Builder에는 한계가 없습니다.
고급 단계에서는 App Builder로 이런 걸 해볼 수도 있습니다:
· 앱 템플릿 중 하나, 탐색 기능이 있는 사전 정의된 레이아웃, 빈 캔버스 중 하나로 시작하는 SPA(단일 페이지 애플리케이션)를 만들기.
· 실시간 REST 데이터 소스에 연결하거나 JSON 파일에 업로드하기.
· 다른 개발 / 디자인 툴에서와 마찬가지로 UI 컨트롤을 드래그 앤 드롭하고 속성 설정하기.
· 사전 설정으로 테마를 설정하거나 직접 만들기.
· 브라우저에서 실행되는 애플리케이션의 실시간 미리보기 확인.
· 실시간 미리보기를 위해 HTML, CSS 및 TypeScript 형식의 실제 프로덕션 준비 코드를 참조하세요.
· 앱 디자인을 위한 프로덕션 준비 코드를 생성하고 다운로드 가능한 zip 파일을 가져오기.
다음은 App Builder를 사용하는 단계별 방법입니다.
1단계: 간단한 페이지 디자인를 위해 앱 빌더를 사용하여 드래그 앤 드롭
웹 앱 빌더 WYSIWYG에서 앱을 디자인합니다. 도구 상자의 컨트롤을 사용하여 원하는 모든 UX로 끌어다 놓습니다. Visual Studio, Sketch, Adobe XD와 마찬가지로 도구 상자의 모든 항목을 지원하는 속성 편집기가 있어 컨트롤의 모양과 동작을 완벽하게 제어할 수 있을뿐만 아니라 전문적인 비즈니스 웹 앱을 구축하는 데 필요한 수많은 UI 컨트롤을 갖추고 있습니다. 그리고 개방형 형식이기 때문에 원하는 만큼의 컨트롤을 추가할 수 있습니다!
2단계: 데이터 연결
App Builder에는 데이터 원본에 연결하고 이를 관리할 수 있는 데이터 탭이 있습니다. 클릭 한 번으로 외부 데이터 소스를 추가, 편집하여 사용할 수 있습니다. 기본적으로 Indigo.Design App Builder에는 앱의 모의 데이터에 사용할 수 있는 모의 Northwind 데이터 소스가 함께 제공되거나, JSON(Rest API)의 원격 URL을 추가하고 JSON 파일을 업로드할 수 있습니다. 추가된 모든 데이터 원본은 데이터 도구 상자에 저장되며 사용자는 포함된 테이블과 선택한 필드를 보기 위해 각 데이터 원본을 확장/축소할 수 있습니다.
3단계: 테마 적용 또는 사용자 지정 테마 생성
App Builder는 Material, Fluent, 부트스트랩을 기반으로 하는 6개의 기본 제공 테마를 제공하며, 각각 어두운 버전과 밝은 변형 모델이 포함되어 있습니다. 직접 사용해 보시면 단순히 테마 내 색을 바꾸는 것이 아니라는 걸 알게 될 것입니다. 예를 들어 Material의 입력 필드에 대한 플로팅 레이블 스타일은 고정 레이블로 전환됩니다. 그리고 스위치에도 시각적으로 변화가 생깁니다. 테마가 사용자의 요구 사항과 일치하지 않으면 브랜드에 맞게 사용자 지정 테마를 만들 수 있습니다. 선택한 기본/보조 색상에 따라 색상 팔레트가 자동으로 생성되며, App Builder에 포함된 모든 글꼴을 사용하여 타이포그래피를 설정할 수 있습니다.
4단계: 픽셀 단위로 완벽한 즉석 라이브 미리보기
미리 보기 버튼을 클릭하면 그동안 쌓아왔던 노력의 결실을 바로 확인할 수 있습니다. 이제 더 이상 Stackblitz가 컴파일할 때까지 3분 정도 기다릴 필요가 없습니다. 또한 다운로드, 컴파일 등을 하지 않고도 브라우저에서 바로 앱 환경을 구축할 수 있습니다. Navigation과 Routes까지 모두 포함했기 때문에 화면을 설정고 컴포넌트를 연결하는 과정에서 실제 내비게이션 경로를 만들 수 있게 됩니다. 그리고 즉석 라이브 미리보기로 모든 요소들을 점검할 수 있습니다. 이때, ‘코드 보기’ 스위치를 클릭하면 프로덕션 준비 HTML, TypeScript, CSS를 즉시 미리보기하거나 HTML, TypeScript, CSS를 사용하여 실제 코드로 내용을 편집할 수도 있습니다. 이제 블랙박스과는 작별할 수 있습니다!
5단계: Zip으로 앱을 다운로드하세요!
디자인을 코드화하는 마지막 단계는 모든 소스코드와 앱을 실행하는 데 필요한 프로젝트 파일이 포함된 zip 파일을 다운로드하는 것입니다. 앱을 다운로드하고 npm install 명령을 실행하여 dependencies를 설치한 다음 npm을 시작하면 됩니다. 그러면 마법처럼 앱이 실행 될 것입니다!
미리보는 보너스 기능 : Sketch 디자인을 프로덕션 준비 코드로 가져 오기!
2018년에 Indigo.Design을 출시한 이후 Sketch 아트보드를 기업용 Angular 코드로 변환하는 업계 최초의 기능을 출시한 적이 있습니다. 그리고 Infragistics는 고객님들의 피드백을 꾸준히 참조하였습니다. 그 결과 App Builder를 통해 Sketch 파일을 직접 불러올 수 있는 새로운 기능을 도입하여 Sketch에서와 마찬가지로 완전한 WYSIWYG 디자인 타임을 경험할 수 있게 되었습니다. IDE에서 처음부터 앱 개발을 시작한 경우 제공되는 UI 컴포넌트에 의해 Sketch에서 불러온 모든 자료들을 작업할 수 있습니다. 이 기능은 베타 버전으로 제공되고 있으며 2021년 여름에 출시되는 Figma, Adobe XD 지원에도 관심을 가져주시면 감사하겠습니다.
그밖에…
지금까지 기본적인 기능들을 훑어봤고,
그밖에도 App Builder의 Public Preview에서 더욱 다양한 작업들을 수행할 수 있습니다:
· 30개 이상의 UI 컨트롤을 지원하는 전체 WYSIWYG 앱 디자인
· Material**, 부트스트랩,** Fluent, 사용자 지정 테마 및 타이포그래피
· 사용자 지정 테마
· UI 속성 편집기가 있는 UI 라이브러리 컨트롤
· Relative, Absolute, Fixed, Sticky****가 있는 레이아웃
· Angular 프로젝트 다운로드
· 즉석 앱 & 코드 미리보기
· 샘플 앱 및 시작 라이브러리
· Sketch 파일을 IDE로 직접 불러오고 작업을 이어갈 수 있습니다.
각 기능들에 대한 자세한 사항들을 살펴보고 싶으시다면 하단에 링크된 글을 참조하세요: