App Builder를 사용한 Angular 코드 생성: 단계별 가이드

Angular 코드 생성을 더 빠르고 쉽게 처리하는 방법이 궁금하십니까? 이 상세한 가이드는 설계에서 코드로 가는 과정을 이전보다 80% 더 빠르게 할 수 있게 해줍니다.

따라서 다음과 같은 작업을 수행하고 싶으시다면:

• Figma 디자인에서 우리의 Figma UI 키트를 사용하여 새 Angular 앱을 만듭니다.
• 한 번의 클릭으로 프로덕션 준비가 완료된 Angular 코드를 생성하여 수동 코딩을 제거합니다.
• 앱 및 코드를 미리 보고 디자인 시스템 + Angular + App Builder이 함께 작동하는 방식을 확인하기 위해 샘플 앱을 확인합니다.
• Angular에서 React, Web Components 또는 Blazor로 전환합니다.

그러면 이 가이드와 포함된 모든 단계들이 다음 프로젝트를 시작할 때 매우 유용할 것입니다.

코드 생성이란 무엇인가

코드 생성은 소스 코드의 중간 모델이 Windows, Mac OS 또는 Linux와 같은 운영 체제를 실행하는 마이크로프로세서에 의해 기본적으로 실행될 수 있는 형식으로 컴파일되는 프로세스로 설명됩니다. 소스 코드를 “컴파일”하는 프로세스는 본질적으로 한 형식(아마도 C# 또는 TypeScript)에서 가져와 다른 형식으로 만드는 것입니다(중간 언어를 DLL 또는 EXE, 또는 JavaScript로).

프로세서는 특정 입력을 필요로 하고 실행 중인 하드웨어 유형에 따라 특정 방식으로 작동하기 때문에 컴파일러 제조업체는 항상 네이티브 실행 부분이 대상 시스템에서 올바르게 실행되도록 해야 하는 과제에 직면합니다.

이전 버전의 .NET Framework를 사용하는 경우:

• 소스 코드는 중간 언어(IL 또는 MSIL - Microsoft 중간 언어)로 컴파일됩니다.
• 이 IL 코드는 CLR(공용 언어 런타임)에 의해 “적시에”(JIT) 컴파일됩니다.
• CLR은 JIT 컴파일된 코드를 Windows 운영 체제에서 실시간으로 기계 언어로 실행합니다.

.NET의 최신 버전(.NET Core 및 .NET 5 등)의 경우:

• Microsoft는 여러 운영 체제에서 작동하는 중간 언어 컴파일러 및 런타임을 제공합니다.
• 여기에는 Windows 외에도 Linux 및 macOS가 포함됩니다.

작성한 소스 코드는 동일하며, 컴파일러가 자신의 코드 생성 프로세스가 올바른 중간 언어를 생성하고 대상 머신의 런타임이 실행할 수 있도록 하는 것은 컴파일러의 책임입니다.

이 그림은 프로세스를 시각적으로 보여줍니다.

JIT 컴파일 vs. 사전 컴파일(Ahead-of-Time Compilation)

Angular 또는 Xamarin과 같은 프레임워크의 경우 AoT(사전 컴파일) 개념이 필수적입니다. 이는 컴파일 프로세스에서 생성된 코드가 실행될 대상 머신 또는 디바이스에서 기본 실행을 위해 구축된다는 의미입니다. 예를 들어 Xamarin.iOS 애플리케이션을 AoT 컴파일하면 생성된 컴파일된 코드는 iOS에 기본입니다. 애플리케이션을 실행하기 위해 디바이스의 기본 iOS OS 외에 다른 런타임이 필요하지 않습니다. Xamarin의 초기 버전에서는 앱이 AoT 컴파일되지 않았습니다. 이는 mono 런타임을 디바이스에 배포하여 런타임에 코드를 실행해야 했음을 의미합니다. AoT 컴파일된 앱은 더 나은 시작 성능을 가지며 디바이스 사양에 따라 잠재적으로 더 빠른 런타임 실행을 제공합니다.

Angular 코드 생성이란 무엇인가

Angular 코드 생성은 메타데이터(또는 중간 언어)를 만드는 특정 도구를 사용하여 하나 이상의 Angular 구성 요소 및/또는 전체 Angular 애플리케이션에 대한 소스 코드와 같은 사용 가능한 코드 출력을 얻는 프로세스입니다. 이 출력은 개발자가 추가 수정을 위해 사용할 수 있는 깔끔하고 사용 가능한 형식으로 제공되며, 궁극적으로 브라우저에서 실행되는 JavaScript 및 HTML과 같은 생성된 형식으로 “컴파일”됩니다.

이를 수행하는 몇 가지 방법이 있습니다:

1. Angular CLI(명령줄 인터페이스)를 사용하여 Angular Schematics를 사용한 템플릿으로 애플리케이션의 전체 또는 일부를 생성합니다. Google 팀의 Angular CLI는 Angular 애플리케이션의 구조 및 종속성을 생성하는 가장 빠른 방법입니다. 스키매틱은 코드 생성 프로세스에서 코드를 추가하거나 수정하기 위한 지침과 논리를 포함하는 템플릿 기반 코드 생성기입니다.
2. Infragistics의 CLI를 사용하여 Angular CLI보다 한 단계 더 나아갑니다. Angular Schematics를 사용한 템플릿을 기반으로 하는 동안 CLI는 차트, Angular Data Grids 및 전체 애플리케이션 시나리오와 같은 사용자 인터페이스 구성 요소를 새로운 또는 기존 Angular 애플리케이션에 추가할 수 있습니다. 팀 또는 비즈니스 요구 사항에 따라 자신의 사용자 정의 템플릿을 만들어 앱 개발을 가속화하고 몇 초 안에 코드를 생성할 수도 있습니다.
3. Figma Indigo.Design UI Kit for Material을 사용하여 우리의 Ignite UI for Angular 도구 세트에 매핑됩니다. 가장 좋은 점은 개발자가 Figma 파일에서 생성된 소스 코드에 대한 완전한 제어를 유지할 수 있다는 것입니다. 앱 논리, 수정 및 코드 변경에 제한이 없습니다. 이러한 도구는 Angular 앱을 실행하는 데 필요한 모든 CSS, HTML 및 TypeScript를 생성하므로 유용합니다.
4. 저코드 App Builder를 사용하면 개발자는 웹 기반 WYSIWYG 도구를 사용하여 전체 Angular 애플리케이션을 설계하고 코드 생성할 수 있습니다. App Builder는 팀이 클라우드 기반 WYSIWYG 드래그 앤 드롭 환경에서 실제 앱을 매우 빠르게 설계하고 구축할 수 있다는 개념을 도입합니다. 여기에는 코드, 레이아웃, CSS, 심지어 데이터도 포함됩니다.

더 알아보는 데 도움이 되도록 최근에 포괄적인 App Builder 제품 개요 및 튜토리얼을 발행했습니다. 아래를 클릭하여 시청하세요.

단계별: Figma 디자인에서 Angular 코드 생성

오늘날의 빠르게 변화하고 민첩한 개발 환경에서 승인된 UX 디자인에서 사용 가능하고 실행 가능한 코드로 이동하는 것은 이전보다 더 빠르게 이루어져야 합니다. 개발자는 UX 디자인을 실행 중인 앱으로 변환하는 거의 불가능한 작업을 받으며, 경우에 따라 몇 시간 안에 완료해야 합니다. 설계자는 반복적인 디자인 프로세스 중에 사용자 피드백을 수집하도록 요청받고 있지만 사용되는 전통적인 도구는 민첩한 UX 프로세스의 요구 사항과 일치하지 않습니다. App Builder와 같은 플랫폼이 도움이 될 수 있는 바로 이 지점입니다.

Figma에서 Angular 코드를 생성하는 방법은?

Figma Indigo.Design UI Kit for Material은 우리의 Ignite UI for Angular UI 도구 세트에 매핑되어 Angular 코드 생성 프로세스를 간소화합니다. 이렇게 하면 모든 정적 디자인 파일을 실제 UI 구성 요소, 브랜딩 및 스타일이 있는 대화형 반응형 앱으로 쉽게 변환할 수 있습니다. 하지만 어떻게 시작할까요?

키트는 Figma 계획에 관계없이 모든 Figma 사용자가 사용할 수 있습니다. 그러나 무료 사용자와 Pro 사용자 사이에는 제한이 있습니다. 무료 계정 사용자로서는 자산 패널에서 라이브러리의 구성 요소를 직접 사용할 수 없습니다. 따라서 UI 키트 파일에서 필요한 모든 구성 요소를 복사하여 프로젝트 파일에 붙여넣어야 합니다.

1단계: Figma 플러그인 다운로드 및 설치 - 다운로드 자산 페이지 또는 Figma UI 키트, Figma 플러그인, 그리고 샘플 앱의 직접 링크를 통해 수행할 수 있습니다.

2단계: Figma 커뮤니티에서 UI 키트의 복제본 만들기.

Figma 커뮤니티로 이동하여 Indigo.Design UI Kit for Material을 검색합니다. 파일을 복제하면(Figma에서 열기 선택) 초안 폴더에 나타납니다.

3단계: 파일을 팀 공간으로 이동

다음으로 파일 이름 옆의 갈매기 화살표를 사용하여 파일을 “초안”에서 팀 공간으로 이동합니다.

파일 이름 바로 아래에 파일을 이동한 팀의 프로젝트 이름이 표시됩니다. 예를 들어 **“테스트”**와 같습니다.

4단계: 라이브러리 게시 및 자산 사용

파일이 이동되면 자산 패널로 이동합니다. 라이브러리 아이콘을 클릭하면 이 파일을 라이브러리로 게시할 수 있으며, 이는 모든 스타일, 타이포그래피 및 구성 요소를 팀의 나머지 부분에 배포합니다. 활성화는 자산 > 라이브러리 아이콘 > 게시 버튼에서 수행합니다.

그런 다음 UI 키트 라이브러리에서 구성 요소를 사용하려는 Figma 디자인 파일을 엽니다. 자산 패널로 이동하여 라이브러리 아이콘을 클릭하고 팀으로 이동한 다음 원하는 라이브러리를 선택하고 파일에 추가를 클릭한 후 구성 요소를 사용하기 시작합니다.

5단계: App Builder에서 앱 만들기

6단계: 테마 및 색상 선택 - 10 가지 색상 변형이 있는 5 개의 팔레트 7단계: 자산 처리 및 App Builder로 전송(이미지 또는 삽화)

단계에 대한 더 자세한 개요를 보려면 전체 설계-코드 프로세스를 안내할 Figma 플러그인 도움말 페이지를 확인할 수 있습니다.

또한 Figma to Code in App Builder 비디오 가이드를 시청하고 모든 작동을 확인할 수 있습니다.

코드 생성 플랫폼이란 무엇인가

애플리케이션 제공은 소스 코드를 컴파일하고 대상 네이티브 프로세서에서 실행될 출력을 생성하는 프로세스만 이상입니다. 고객이 해결하려고 하는 문제를 해결하는 아름다운 경험을 고객에게 제공하는 프로세스가 있습니다. 이 프로세스의 핵심 부분은 디자인입니다. 디자인 프로세스에서 디자인 팀은 이해 관계자 또는 고객과 함께 작업하여 요구 사항을 파악한 후 선택한 도구(예: Figma)에서 앱의 프로토타입을 만들어 이해 관계자가 시도하고 사용할 수 있도록 합니다.

이 프로세스는 반복적이며, 이해 관계자로부터 피드백을 얻고 피드백 및 비판에 따라 디자인을 업데이트한 후 이해 관계자와 함께 다시 테스트하는 것이 포함됩니다. 이 반복적인 프로세스는 성공적인 소프트웨어 프로젝트의 초석임이 입증되었습니다. 이 반복적인 디자인 프로세스는 코드를 작성하기 전에 발생합니다. 결국 고객이 승인한 디자인을 디자인 팀에서 개발 팀으로 “전달”합니다. 이 시점에서 개발 팀은 자신의 도구를 사용하여 전달받은 디자인을 해석하고 코드 작성을 시작합니다.

디자인 의도와 구축된 것이 연결되지 않는 위험은 바로 이 전달 단계에 있습니다.

제품 팀(디자인 팀 및 개발 팀 포함)이 코드 생성 플랫폼을 표준화하면 전달 시 위험 및 오류가 크게 줄어들거나 제거됩니다. 코드 생성 플랫폼은 “코드” 부분만 포함하는 것 이상이어야 하며, 다음과 같은 소프트웨어 제공의 모든 측면을 포함해야 합니다:

• 화면 디자인
• 사용자 흐름
• 프로토타이핑
• 공동 편집
• UI 구성 요소
• 코드 생성

이는 디자인 팀과 개발 팀이 코드 생성 프로세스 이전에 플랫폼이 할 수 있는 일을 강조하면서 코드 생성 플랫폼을 평가해야 함을 의미합니다. App Builder는 코드 생성 플랫폼의 전통적인 목표를 넘어선 완전한 설계-코드 솔루션을 갖춘 세계 유일의 클라우드 기반 저코드 플랫폼입니다.

프로젝트에 코드 생성 플랫폼 사용의 이점

코드 생성 이점에 대한 논의는 항상 생산성과 배달 속도였습니다. 도구가 이 작업을 더 빠르게 완료하는 데 도움이 될 수 있다면 왜 사용하지 않을까요? 코드 생성에 대한 논의는 “블랙박스” 논의입니다. 개발자는 실제로 생성되는 코드가 무엇인지 알 수 없습니다. 그것을 볼 수 없고, 변경할 수 없으며, 수정할 수 없습니다. 따라서 코드 생성 제품에서 문제가 발생하면 개발자에게 부담이 있습니다. 제어 손실에 대한 이러한 두려움은 일반적으로 개발 팀을 코드 생성에서 멀어지게 합니다. 하지만 오늘날의 더 정교한 도구들과 함께 그 논의는 많이 사라집니다.

오늘날 어떤 수준의 성공을 원하는 모든 코드 생성 플랫폼(또는 저코드 도구)은 다음을 수행해야 합니다:

• 코드를 생성하는 방법에 있어 투명하고 개방적입니다.
• 올바르고 일관되며 깔끔한 코드를 생성합니다.
• 개발자로부터 아무것도 숨기지 않습니다.

이는 코드 생성 출력이 개발자가 검사하면 자신이 구축할 것이라는 의미입니다. 아마도 더 낫고 확실히 훨씬 더 빠릅니다. 이는 팀이 코드 생성을 포함하는 저코드 플랫폼을 도입하는 이유의 핵심으로 이동합니다:

• 목적으로 설계된 고품질 앱 출력을 생성합니다.
• 팀 커뮤니케이션, 효율성 및 출력을 증가시킵니다.
• 더 높은 채택률로 시장 출시 시간을 크게 단축합니다.

오늘날의 최신 도구를 사용하면 팀이 최소한 저코드 플랫폼을 고려하고 시험해 보는 것이 명백한 선택이며, 현대적인 코드 생성의 이점을 위해서입니다.

요약

코드 생성은 소스 코드를 네이티브 기계 언어로 컴파일하는 것 이상입니다. 코드 생성에는 많은 측면이 있으며 그 일을 수행하는 많은 도구가 있습니다. 이 문서는 코드 생성이 무엇인지, 왜 필요한지, Angular 앱에 어떻게 적용할 수 있는지에 대한 배경을 제공했으며 더 나은 소프트웨어를 더 빠르게 구축하는 데 도움이 될 수 있는 일부 도구를 소개했습니다.

Figma에서 코드로의 측면에서 이 프로세스는 Figma에서 만든 디자인 또는 프로토타입을 실제 사용 가능한 코드가 있는 작동 애플리케이션으로 단순화된 변환을 의미합니다. 우리의 저코드 솔루션을 사용할 때 이는 매우 간단하고 직관적인 방식으로 발생하며 수동으로 코드를 작성할 필요가 없습니다. 우리는 Figma를 HTML 코드로 변환하는 가장 빠른 방법을 설명하는 전담 블로그 게시물이 있습니다.

그리고 이렇게 개발자는 Figma에서 우리의 저코드 도구로 코드로 이동할 수 있습니다. 팀은 클라우드 기반 WYSIWYG 드래그 앤 드롭 환경에서 실제 앱을 매우 빠르게 설계하고 구축할 수 있으며 웹 레이아웃, CSS 및 데이터가 완전한 프로덕션 준비 코드를 생성할 수 있습니다.

코딩을 즐기세요!

웹 개발 angular code generation app builder code generation low code low code development