Angular 코드 생성 –App Builder 사용 단계별 가이드

Angular 코드 생성을 더 빠르고 쉽게 처리하는 방법이 궁금하십니까? 이 자세한 가이드는 그 어느 때보다 80% 빠르게 디자인에서 코드로 이동할 수 있는 방법을 보여줍니다.

따라서 원하는 경우:

• Figma UI 키트를 사용하여 Figma 디자인에서 새 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(Just-in-Time)"입니다.
• CLR은 Windows 운영 체제에서 기계어로 JIT 컴파일된 코드를 실시간으로 실행합니다.

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

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

작성하는 소스 코드는 동일합니다. 코드 생성 프로세스가 올바른 중간 언어를 생성하고 대상 컴퓨터의 런타임이 이를 실행할 수 있는지 확인하는 것은 컴파일러의 책임입니다.

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

JIT 컴파일과 사전 컴파일

Angular 또는 Xamarin과 같은 프레임워크의 경우 AoT 또는 Ahead-of-Time 컴파일의 개념이 필수적입니다. 즉, 컴파일 프로세스에서 생성된 코드는 실행될 대상 시스템 또는 장치에서 기본 실행을 위해 빌드됩니다. 예를 들어 Xamarin.iOS 애플리케이션을 AoT로 컴파일하는 경우 생성된 컴파일된 코드는 iOS에 기본으로 제공됩니다. 기본 iOS OS 이외의 애플리케이션을 실행하기 위해 디바이스에서 런타임이 필요하지 않습니다. Xamarin의 초기 버전에서는 앱이 AoT로 컴파일되지 않았습니다. 즉, 런타임에 코드를 실행하려면 모노 런타임을 디바이스에 배포해야 했습니다. AoT 컴파일된 앱은 시작 성능이 더 좋으며 장치 사양에 따라 런타임 실행 속도가 빨라질 수 있습니다.

Angular 코드 생성이란?

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

이를 수행하는 방법에는 여러 가지가 있습니다.

1. Angular CLI(명령행 인터페이스)를 사용하여 애플리케이션의 전체 또는 일부를 생성하는 Angular Schematics를 사용하는 템플리트와 함께. Google 팀의 Angular CLI는 Angular 애플리케이션의 구조와 종속성을 생성하는 가장 빠른 방법입니다. 회로도는 코드 생성 프로세스에서 코드를 추가하거나 수정하기 위한 지침과 논리를 포함하는 템플릿 기반 코드 생성기입니다.
2. Angular CLI보다 한 단계 더 나아가는 Infragistics의 CLI를 사용합니다.  CLI는 여전히 Angular Schematics를 사용하는 템플리트를 기반으로 하지만 차트, Angular 데이터 그리드 및 전체 애플리케이션 시나리오와 같은 사용자 인터페이스 컴포넌트를 신규 또는 기존 Angular 애플리케이션에 추가할 수 있습니다. 팀이나 비즈니스 요구 사항에 따라 자신만의 맞춤형 템플릿을 만들어 앱 개발을 가속화하고 몇 초 만에 코드를 생성할 수도 있습니다.
3. Ignite UI for Angular 툴셋에 매핑되는 머티리얼용 Figma Indigo.Design UI 키트를 사용합니다. 가장 좋은 점은 개발자가 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 키트는 Ignite UI for Angular UI 툴셋에 매핑되어 Angular 코드 생성 프로세스를 간소화합니다. 이렇게 하면 모든 정적 디자인 파일을 실제 UI 구성 요소, 브랜딩 및 스타일링이 포함된 대화형 반응형 앱으로 쉽게 전환할 수 있습니다. 하지만 어떻게 시작해야 할까요?

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

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

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

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

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

그런 다음 파일 이름 바로 옆에 있는 갈매기 모양 화살표를 사용하여 파일을 "초안"에서 팀 공간으로 이동합니다.

파일 이름 바로 아래에 파일을 이동한 팀의 프로젝트 이름(예: "테스트")이 표시됩니다. 

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

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

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

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

6 단계 : 테마 및 색상 선택 – 10가지 색상 변형이 있는 5가지 팔레트 사용 가능
7 단계 : 자산 처리 및 App Builder 전송(이미지 또는 일러스트레이션)

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

또한 비디오 가이드에서 Figma to Code App Builder 시청하고 모든 것이 실제로 작동하는 모습을 볼 수 있습니다.

코드 생성 플랫폼이란 무엇입니까?

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

프로세스는 반복적입니다. 여기에는 이해관계자로부터 피드백을 얻고, 피드백과 비평을 기반으로 디자인을 업데이트한 다음, 이해관계자와 함께 다시 테스트하는 작업이 포함됩니다. 이러한 반복적인 프로세스는 성공적인 소프트웨어 프로젝트의 초석임이 입증되었습니다. 이 반복적인 설계 프로세스는 코드가 작성되기 전에 발생합니다. 결국 디자인 팀에서 고객이 승인한 디자인의 개발 팀으로 "핸드오프"가 이루어집니다. 이 시점에서 개발 팀은 자체 도구를 사용하여 전달된 디자인을 해독하고 코드 작성을 시작합니다.

이 핸드오프에는 설계 의도 및 빌드되는 항목과의 연결이 끊어질 위험이 있습니다.

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

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

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

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

코드 생성 이점에 대한 논쟁은 항상 생산성과 전달 속도였습니다. 도구가 이 작업을 더 빨리 완료하는 데 도움이 될 수 있다면 왜 사용하지 않겠습니까? 코드 생성에 대한 단점은 "블랙박스" 논쟁입니다 – 개발자는 실제로 어떤 코드가 "생성"되고 있는지 전혀 모릅니다. 그들은 그것을 보고, 변경하고, 수정하는 등의 일을 할 수 없습니다. 따라서 코드 생성 제품에 문제가 발생할 경우 개발자에게 부담이 있습니다. 통제력 상실에 대한 이러한 두려움은 일반적으로 개발 팀이 코드 생성에서 멀어지게 만드는 원인입니다. 그러나 오늘날의 보다 정교한 도구를 사용합니다. 그 논쟁의 대부분은 사라집니다.

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

• 코드 생성 방법을 투명하고 공개적으로 공개하세요.
• 제품이 정확하고 일관되며 깨끗한 코드
• 개발자에게 아무것도 숨기지 마세요.

즉, 코드 생성 출력은 이를 검사하는 개발자가 직접 빌드하는 것이어야 합니다. 어쩌면 더 좋을 수도 있고, 확실히 훨씬 더 빠를 수도 있습니다. 이것이 팀이 코드 생성이 포함된 로우코드 플랫폼을 채택하는 이유의 핵심입니다.

• 의도적으로 설계된 고품질 앱 출력 제품
• 팀 의사소통, 효율성, 성과 증대
• 더 높은 채택률로 시장 출시 시간을 대폭 단축

오늘날의 최신 도구를 사용하면 팀이 최신 코드 생성의 이점을 위해서라도 최소한 로우 코드 플랫폼을 고려하고 실험하는 것은 당연한 선택입니다.

요약

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

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

이와 같이 개발자는 로우코드 도구를 사용하여 Figma에서 코딩으로 이동할 수 있습니다. 팀은 클라우드 기반 WYSIWYG 드래그 앤 드롭 환경에서 실제 앱을 설계 및 구축하고 웹 레이아웃, CSS 및 데이터가 포함된 프로덕션 준비 코드를 생성할 수 있습니다.

즐거운 코딩하세요!