Infragistics의 설계-코드 솔루션 설명

이 기사에서는 Infragistics의 로우 코드/노 코드 디자인-코드 솔루션의 핵심 구성 요소와 모델을 설명하고 3가지 규모의 조직을 빠르게 분류하여 앱 개발 주기와 방법을 더 잘 이해할 수 있도록 하겠습니다. App Builder 디자인부터 코드까지 모든 것을 간소화합니다. 제 생각은 이러한 설계-코드 솔루션이 어떻게 웹 앱 설계 및 개발을 재창조하는지, 그리고 이것이 정확히 귀하의 모든 프로세스에 필요한 이유가 무엇인지 배우도록 돕는 것입니다.

디자인과 코드란 무엇인가?

간단히 말해서, 디자인-코드는 소프트웨어 애플리케이션을 디자인 단계에서 소프트웨어 구현으로 전환하는 프로세스입니다. 이 프로세스에는 일반적으로 여러 팀 간의 핸드오프가 포함됩니다.

디자인-코드 도구란 무엇입니까?

명사

단일 정보 소스로 작동하여 팀을 하나로 모으고 핸드오프를 제거하며 웹 애플리케이션 설계 및 개발 프로세스의 모든 단일 단계를 간소화하는 웹 앱 설계 및 개발 플랫폼입니다.

이것이 제가 이러한 앱 개발 가속기를 정의하는 방법입니다.

시간을 절약해 주는 도구에 대한 필요성이 커지고 있으며 다양한 분야(핀테크, 임상 연구, IT, 건강, 여행, 물류)의 기업에서는 이를 비즈니스에 중요한 솔루션으로 인식하고 구현하기 시작했습니다. 따라서 App Builder와 같은 혁신이 큰 발전을 이루고 웹 앱 디자인 및 개발을 개선하기 위해 개입합니다.

뛰어 들어 봅시다.

다양한 규모의 회사가 웹 앱을 구축하는 방법

프로세스는 다음과 같이 빠르게 요약될 수 있습니다. 애플리케이션을 구축하려면 앱 측면에서 구성할 디자인부터 시작합니다. 개별 개발자/소규모 상점 규모 조직에서는 디자이너와 개발자가 같은 사람일 수 있고 종종 같은 사람일 수 있으므로 해당 디자인을 가져와 이를 위한 웹 애플리케이션을 개발하는 사람도 바로 귀하입니다. 자신이 만든 것에 만족하면 다시 디자인과 일치시킵니다. 이를 보고 "모두 괜찮아 보입니다. 모든 것을 테스트했습니다"라고 말한 다음 배포합니다. 그리고 이 웹 애플리케이션이 라이브로 만들어졌습니다.

간단하죠? 그러나 기다려라.

몇 개의 하위 단계가 있는 디자인-개발-배포 단계를 포함하는 이 프로세스는 최대 5명(보통 개발자)과 최대 1명의 디자이너로 구성된 개별 개발자/소규모 조직에 일반적입니다.

비교를 위해 중간 규모 조직을 살펴보면 약 250명의 직원으로 구성되어 있습니다. 물론 모두가 개발자는 아닙니다.

영업, 마케팅, 지정된 디자인팀 등 다양한 부서가 있습니다. 그들은 스스로 또는 계약자로서 앱을 구축하여 다른 회사 및 외부 프로젝트의 요구 사항에 대응합니다. 앱 개발 프로세스는 거의 동일하지만 몇 가지 다른 중간 단계가 있습니다.

그러다보니 규모가 큰 조직이 있는데, 여기서 앱 개발 과정은 다음과 같습니다.

더 많은 단계, 더 많은 승인, 모든 단계(설계, 개발, 승인, 배포)에 참여하는 더 많은 이해관계자가 있습니다. 일반적으로 팀은 다양한 매체, 플랫폼, 앱은 물론 국가와 시간대까지 협업해야 합니다. 조직에서 와이어프레임을 생성하고, 디자인을 보고, 화면 디자인을 보고, 최종적으로 실제 웹 앱을 제공하는 데 사용하는 다양한 유형의 소프트웨어가 있습니다.

또한 이러한 유형의 조직에는 더 많은 요구 사항이 제기되고 있으며 앱은 내부 목적 및 사용을 위해 구축되는 경우가 많습니다. 시스템 통합자는 대규모 조직 범주에 속하지만 여전히 주로 다른 조직을 위한 대규모 앱을 구축합니다.

이러한 조직을 살펴보면 소프트웨어를 구축하기 위해 일반적으로 수행하는 단계 간에는 큰 차이가 없습니다. 프로세스를 복잡하게 만드는 것은 협업 주기와 핸드오프의 양입니다. 팀이 협업할 때 가장 큰 과제 중 하나는 다음과 같습니다. 일반적으로 너무 많은 매체를 통해 작업을 수행합니다. 그들은 전자 메일에는 Outlook을, 화상 통화에는 Teams를, 작업에는 GitHub 및 웹 도구를 사용합니다. 또한 다른 모든 도구 위에 혼합되어 있는 Visual Studio Online(TFs git), 벡터 그래픽 디자인 플랫폼 및 팀 공동 작업 프레임워크도 있습니다. 그것은 많이입니다. 그리고 도구와 소프트웨어 제품 사이를 오가다 보면 대개 많은 마찰이 발생합니다.

우리의 솔루션은 설계 및 개발 작업뿐만 아니라 협업 프로세스도 고려합니다. 로우코드/노코드 App Builder 통합하여 UX, 제품 관리, 제품 개발을 연계하는 디자인 시스템에서 시작됩니다.

간단히 말해서 App Builder

App Builder 웹 애플리케이션 제공을 위한 완전한 로우 코드 다중 사용자 환경을 통해 제품 수준(DesignOps)에서 운영 조정, 심도 있는 협업 및 지속적인 혁신을 가능하게 하는 로우 코드 플랫폼 입니다.

• 엔터프라이즈 UX 및 제품 제공 팀이 UX, 제품 관리 및 제품 개발 간의 호환성을 운영할 수 있도록 지원합니다.
• Sketch 및 Figma 디자인 파일 지원
• 기업 팀 전체에서 단일 정보 소스로 작동하여 이해관계자와의 협업을 촉진합니다.
• 심층 분석 및 이미지 기반 프로토타이핑을 통해 사용자 테스트를 허용합니다.

Infragistics의 Design-to-Code 솔루션의 핵심 부분

UI 키트– 타사 디자인 도구 구현

​UI키트는 모든 기술에 대해 정확히 동일한 디자인 시스템을 따릅니다. 즉, 디자이너는 원하는 도구를 전환할 수도 있고(예: Sketch에서 Figma로) 특정 도구에 대해 우리가 제공하는 기호를 사용하여 계속 디자인할 수 있도록 지원됩니다.

• 디자이너가 사용하는 도구에 관계없이 디자이너를 대상으로 하고 지원하여 선택한 도구로 작업하는 동시에 App Builder와 통합하여 마찰을 줄일 수 있습니다.
• 플랫폼 구현과 관계없이 UI 구성 요소에 대한 정보 소스로 작동
• Sketch 및 Figma 용 어댑터도 있는데, 이는 UI 키트 기호 뒤의 메타데이터를 활용하여 디자인된 화면을 App Builder로 가져오고 실제 구성 요소 측면에서 시각화합니다.

UI 구성 요소 –프레임워크별 재사용 가능한 구성 요소 구현

그들의 행동, 모양, 느낌은 디자인 시스템에 의해 결정됩니다.

• 프레임워크 전반에 걸친 개념의 재사용성
• 모든 새로운 구성 요소는 App Builder 플랫폼에서 사용할 수 있습니다.
• ​Angular, Blazor, Web Components에 대한 컨트롤

공통 앱 모델– 시스템의 중심

이를 통해 프레임워크에 구애받지 않는 방식으로 애플리케이션을 설명할 수 있습니다.

• 애플리케이션 구조, 보기 및 상호 작용을 정의하는 방법을 추상화합니다.
• 다양한 기술로 하나의 동일한 앱을 사용할 수 있습니다.
• 디자인을 가져와 App Builder에서 이해할 수 있게 만들고 Angular, Blazor 또는 Web Components에 대한 코드 생성을 활성화합니다(React 아직 진행 중).
• 기술 전반에 걸쳐 공통 패턴을 정의합니다.
• UI 키트, App Builder 또는 기타 타사 플러그인 위에 디자인 도구 파서로 생성됨

App Builder– Design-to-Code 솔루션의 가장 중요한 보석

간단히 말해서 App Builder 로우 코드/노코드 방식으로 앱을 시각적으로 디자인하고 Angular, Blazor 또는 Web Components (React 출시 예정)에 대한 코드를 생성할 수 있는 플랫폼입니다. 모든 것이 드래그 앤 드롭 방식으로 이루어지며 진정한 WYSIWYG 개발 경험을 제공합니다. 도구 상자에는 구성 요소, 선택할 수 있는 다양한 유형의 보기 레이아웃, 보기 간의 탐색/구조가 있습니다.

• 직접 작성하는 코드와 동일하거나 더 나은 품질로 앱을 시작하기 위한 코드를 생성하여 시간을 절약해 줍니다.
• 처음부터 바로 사용할 수 있는 프로젝트 템플릿 또는 이미 완성된 Figma, Sketch 또는 Adobe XD 디자인 파일에서 앱을 시작할 수 있습니다.
• 앱 개발 주기의 모든 단계에서 참여할 수 있는 개발자, 디자이너, PM, 이해관계자 간의 협업을 촉진하는 단일 정보 소스 역할을 합니다.
• 파서(UI 키트에서 제공되는 메타데이터)를 통해 공통 애플리케이션 모델을 소비하고 디자인 화면을 통해 생성합니다.
• ​지속적인 개선 및 기능 수신

우리 고객 중 한 명은 다음을 강조합니다.

“내 경험에 따르면 App Builder 사용하면 완전한 기능을 갖춘 앱 프레임워크를 만들 때 70% 이상의 시간을 절약할 수 있습니다. 디자이너, 고객 및 기타 관련 당사자와의 협업이 상당히 가속화되고 최적화됩니다.

최종 앱에 사용되는 UI 구성 요소와 스타일로 쉽게 애플리케이션을 만들고 이를 미리 프로그래밍하지 않고도 대화형으로 보여줄 수 있는 능력은 고객 요구 사항을 실현할 때 귀중한 이점입니다.

App Builder로 생성된 Angular 앱은 Angular CLI로 생성된 애플리케이션과 다르지 않으며 일반적인 워크플로로 완료할 수 있습니다.”

코드 미리보기 및 생성

Code Gen은 Common App Model을 사용하고 애플리케이션용 프레임워크별 코드를 생성하는 서비스입니다.

• 추상적인 앱 모델에서 애플리케이션의 UI 구성요소를 구현하는 특정 제품으로의 전환을 이해합니다.
• 라우팅, 동작, 전환 등 일반적인 애플리케이션 패턴을 이해합니다.
• 프레임워크별 저장소 구조를 생성합니다.
• 생성된 애플리케이션을 새로운 GitHub 저장소에 배포할 수 있습니다.
• 기존 GitHub 리포지토리에 대한 PR 업데이트가 가능합니까?
• 앞으로는 생성된 애플리케이션의 빌드 및 Azure 배포를 시작할 수 있습니다.
• 코드 보기를 ON으로 전환하고 실행 중인 애플리케이션과 나란히 볼 수 있습니다.
• ​Angular 또는 Blazor 코드 생성을 위한 코드 생성이 있습니다.

GitHub 통합

App Builder 통해 디자인 화면에서 작업 중인 프로젝트를 대상 플랫폼에서 실제로 생성된 코드가 상주할 수 있는 GitHub 저장소에 동기화할 수 있는 GitHub 통합을 활성화했습니다.

• 디자인에서 생성된 코드를 새로운 사용자 저장소로 GitHub에 직접 업로드할 수 있습니다.
• 연결된 GitHub 저장소가 있는 디자인 업데이트는 App Builder 통해 끌어오기 요청으로 시작될 수 있습니다.
• App Builder 생성된 애플리케이션을 Azure에 직접 배포하는 기능을 제공합니다.
• 코드 생성기는 배포 및 CI를 위한 GitHub 작업 yml을 생성합니다.

IT 분야에 종사하는 경우 현재 웹 앱을 구성하는 방식에 영향을 미치는 에이전트, 프로세스 및 요소가 지속적으로 변화하고 더욱 복잡해지고 있다는 사실을 금방 깨닫게 됩니다.

다음이 있습니다:

퓨전 팀, 개별 개발자, 싱글 플레이어 디자이너, 이해 관계자, PM, UX 작성자, 마케터, 사용성 테스터, 특정 요구 사항이 있는 클라이언트, 속도, 기능 및 포괄성이 부족한 소프트웨어 개발을 매우 빠르게 버릴 수 있는 디지털에 정통한 소비자 하는 데 사용됩니다.

아이디어 단계, 설계, 핸드오프, 코딩, POC, 반복, 테스트, 배포, 마케팅 등.

압축된 시간, 역동적인 작업 환경, 우선 순위 변경, 디지털 혁신, 다양한 채널에 분산된 커뮤니케이션.

너무 복잡해 보이고 시간이 너무 오래 걸리며 자동화와 도구를 실제로 사용할 수 있을 것 같습니다.

이것이 바로 App Builder와 같은 디자인 및 개발 "혁신자"가 개입하여 DesignOps 및 DevOps의 속도를 높이고 출시 시간을 약 80% 단축하여 최신 웹 애플리케이션을 제작하는 방식을 개선하는 이유입니다.