Angular 코드 생성 –App Builder 사용 단계별 가이드
이 단계별 가이드를 읽고 로우 코드로 클릭 한 번으로 Angular 프로덕션에 바로 사용할 수 있는 코드를 생성하는 방법을 알아보세요.
제이슨 베레스
13분 읽기
빠르고 간단한 방법으로 디자인에서 코드까지 이동하는 방법을 보여주는 자세한 가이드입니다.
따라서 원하는 경우:
- 자동화 디지털 제품 설계 및 개발 도구를 사용하여 Sketch 설계에서 새로운 Angular 앱을 만들 수 있습니다.
- 클릭 한 번으로 바로 제작할 수 있는 Angular 코드를 생성할 수 있으므로 수동 코딩이 필요 없습니다.
- 앱과 코드를 미리 보고 샘플 앱을 확인하여 디자인 시스템 + Angular + App Builder ™이 함께 작동하는 방식을 확인합니다.
- Angular에서 Blazor 또는 Web Components로 전환합니다.
그러면 다음 프로젝트를 시작할 때 이 가이드와 포함된 모든 단계가 매우 유용하다는 것을 알게 될 것입니다.
시작하자.
코드 생성이란?
일반적으로 코드 생성은 소스 코드의 중간 모델을 Windows, Mac OS 또는 Linux와 같은 운영 체제를 실행하는 마이크로프로세서에서 기본적으로 실행할 수 있는 형식으로 컴파일하는 프로세스로 설명됩니다. 소스 코드를 "컴파일"하는 프로세스는 본질적으로 소스 코드를 하나의 형식(C# 또는 TypeScript)에서 가져와 다른 형식(예: DLL, EXE 또는 JavaScript와 같은 중간 언어)으로 만드는 것입니다. 프로세서에는 특정 입력이 필요하고 실행 중인 하드웨어 유형에 따라 특정 방식으로 작동하므로 컴파일러 제작자는 예상되는 기본 실행 부분이 대상 시스템에서 올바르게 실행되도록 보장해야 하는 과제가 항상 있습니다.
Microsoft의 이전 버전 .NET Framework를 사용하는 경우 소스 코드를 중간 언어(Microsoft Intermediate Language의 경우 IL 또는 MSIL)로 컴파일한 다음 "Just-in-Time"(JIT)으로 컴파일하게 됩니다. Windows 운영 체제에서 기계어로 코드를 실시간으로 실행하는 런타임 인터프리터인 CLR(공용 언어 런타임)을 사용합니다. .NET Core 및 .NET 5와 같은 .NET Framework의 새 버전을 통해 Microsoft는 Linux 또는 MacOS와 같은 다른 운영 체제에서 작동하는 중간 언어 컴파일러 및 런타임을 제공합니다.
작성하는 소스 코드는 동일합니다. 코드 생성 프로세스가 올바른 중간 언어를 생성하고 대상 시스템의 런타임이 이를 실행할 수 있는지 확인하는 것은 컴파일러의 책임입니다.
이 그림은 프로세스를 시각적으로 보여줍니다.
JIT 컴파일과 사전 컴파일
Angular 또는 Xamarin과 같은 프레임워크의 경우 AoT 또는 Ahead-of-Time 컴파일의 개념이 중요합니다. 이는 컴파일 프로세스에서 생성된 코드인 응용 프로그램이 실행될 대상 컴퓨터 또는 장치에서 기본 실행을 위해 빌드되었음을 의미합니다. 예를 들어 Xamarin.iOS 애플리케이션을 AoT로 컴파일하는 경우 생성된 코드 컴파일된 코드는 iOS에 네이티브입니다. 기본 iOS OS 이외의 애플리케이션을 실행하기 위해 장치에서 런타임을 사용할 필요가 없습니다. Xamarin의 초기 버전에서는 앱이 AoT로 컴파일되지 않았습니다. 즉, 런타임에 코드를 실행하기 위해 mono 런타임을 장치에 배포해야 했습니다. AoT 컴파일된 앱은 시작 성능이 더 우수하며 디바이스 사양에 따라 런타임 실행 속도가 더 빨라질 수 있습니다.
Angular 코드 생성이란?
이 문서에서는 Angular 코드 생성이 간단하다고 설명합니다. Angular 코드 생성은 하나 이상의 Angular 구성 요소 및/또는 전체 Angular 애플리케이션에 대한 소스 코드와 같은 사용 가능한 코드 출력을 얻기 위해 메타데이터(또는 중간 언어)를 생성하는 특정 도구를 사용하는 프로세스입니다. 이 출력은 개발자가 추가 수정을 위해 사용할 수 있는 깔끔하고 사용 가능한 형식이며, 궁극적으로 JavaScript 및 HTML과 같은 브라우저에서 실행되는 생성된 형식으로 "컴파일"됩니다.
이를 수행하는 방법에는 여러 가지가 있습니다.
- Angular CLI(Command LineInterface)를 사용하여 애플리케이션의 전체 또는 일부를 생성하는 Angular 회로도를 사용하는 템플릿과 함께 사용합니다. Google 팀의 Angular CLI는 Angular 애플리케이션의 구조와 종속성을 생성하는 가장 빠른 방법입니다. 회로도는 템플릿 기반 코드 생성기로, 코드 생성 프로세스에서 코드를 추가하거나 수정하기 위한 지침과 로직을 포함합니다.
- Angular CLI보다 한 단계 더 나아가는 Infragistics의 CLI를 사용합니다. CLI는 Angular Schematics를 사용하는 템플릿을 기반으로 하지만 차트, Angular 데이터 그리드, 전체 애플리케이션 시나리오와 같은 사용자 인터페이스 구성 요소를 신규 또는 기존 Angular 애플리케이션에 추가할 수 있습니다. 팀이나 비즈니스의 필요에 따라 사용자 지정 템플릿을 만들어 앱 개발을 가속화하고 몇 초 만에 코드를 생성할 수도 있습니다.
- 개발자는 Sketch to Angular 플러그인을 사용하여 App Builder 클라우드에 저장된 Sketch 디자인 파일을 가져와서 코드를 생성하여 개발 플러그인이 있는 Angular 앱을 생성할 수 있습니다. 가장 좋은 점은 개발자가 Sketch 파일에서 생성된 소스 코드를 완전히 제어할 수 있으며 앱 로직, 수정 및 코드 변경에 제한이 없다는 것입니다. 이와 같은 도구는 코드가 Angular 앱을 실행하는 데 필요한 모든 CSS, HTML 및 TypeScript를 생성하기 때문에 특히 유용합니다.
- 개발자는 App Builder 사용하여 웹 기반 WYSIWYG 도구를 사용하여 전체 Angular 애플리케이션을 설계하고 코드를 생성할 수 있습니다. App Builder는 팀이 클라우드 기반 WYSIWYG 드래그 앤 드롭에서 실행되는 실제 앱을 설계하고 구축할 수 있다는 개념을 소개합니다. 여기에는 코드, 레이아웃, CSS 및 데이터도 포함됩니다.
이 다이어그램은 이러한 코드 생성 옵션에서 기대할 수 있는 상호 작용 및 코드 출력 수준을 보여줍니다.
보다 일반적인 Angular CLI에서 App Builder 사용하는 웹의 강력한 드래그 앤 드롭 경험에 이르기까지 Angular 코드 생성을 위한 여러 옵션이 있음을 알 수 있습니다. 이러한 옵션을 사용하여 Angular에서 앱 개발 및 제공을 가속화할 수 있습니다.
여러분의 학습 방법을 돕기 위해 저는 최근 포괄적인 App Builder 제품 개요 및 튜토리얼을 게시했습니다. 보려면 아래를 클릭하세요.
코드 생성 플랫폼이란 무엇입니까?
애플리케이션을 제공하는 것은 소스 코드를 컴파일하고 대상 기본 프로세서에서 실행될 일종의 출력을 생성하는 프로세스 그 이상입니다. 고객이 해결하려는 문제에 적합한 아름다운 경험을 고객에게 전달하는 프로세스가 있습니다. 이 프로세스의 핵심 부분은 디자인입니다. 디자인 프로세스에서 디자인 팀은 이해관계자 또는 고객과 협력하여 요구 사항을 이해한 다음 해당 이해관계자가 시도하고 사용할 수 있도록 선택한 도구(예: Figma 또는 Sketch)에서 앱 프로토타입을 만듭니다. 프로세스는 반복적이며 이해관계자로부터 피드백을 받고 피드백과 비평을 바탕으로 디자인을 업데이트한 다음 이해관계자와 다시 테스트하는 과정을 포함합니다. 이러한 반복 프로세스는 성공적인 소프트웨어 프로젝트의 초석임이 입증되었습니다. 이 반복적인 설계 프로세스는 코드가 작성되기 전에 발생합니다. 결국에는 고객이 승인한 설계에 대해 설계 팀에서 개발 팀으로 "인계"됩니다. 이 시점에서 개발팀은 자체 도구를 사용하여 전달된 디자인을 해독하려고 시도한 후 코드 작성을 시작합니다.
이러한 핸드오프에서 설계 의도와 구축 대상이 분리될 위험이 있습니다.
제품 팀(디자인 팀 및 개발 팀 포함)이 코드 생성 플랫폼에서 표준화되거나 Gartner가 만든 디지털 제품 디자인 플랫폼 인 경우 핸드오프 시 위험 및 오류가 크게 줄어들거나 제거됩니다. 코드 생성 플랫폼에는 "코드" 조각 그 이상을 포함해야 하며 다음과 같은 소프트웨어 제공의 모든 측면을 포함해야 합니다.
- 화면 디자인
- 사용자 흐름
- 프로토타이핑
- 공동 편집
- UI 구성요소
- 코드 생성
이는 디자인 팀과 개발 팀이 코드 생성 부분 전에 플랫폼이 무엇을 할 수 있는지에 중점을 두고 코드 생성 플랫폼을 평가해야 함을 의미합니다. App Builder는 기존 코드 생성 플랫폼 목표를 뛰어넘는 완벽한 설계-코드 솔루션을 갖춘 세계 유일의 클라우드 기반 로우 코드 플랫폼입니다.
프로젝트에 코드 생성 플랫폼을 사용할 경우의 이점
코드 생성과 코드 생성 플랫폼의 장단점은 오랫동안 논의되어 왔습니다. 코드 생성 이점에 대한 주장은 항상 생산성과 전달 속도였습니다. 도구를 사용하면 이 작업을 더 빨리 완료하는 데 도움이 될 수 있는데 왜 사용하지 않는 걸까요? 코드 생성에 대한 단점은 "블랙박스" 주장입니다. 개발자는 실제로 어떤 코드가 "생성"되는지 전혀 알 수 없으며, 코드를 볼 수도, 변경할 수도, 수정할 수도 없습니다. 따라서 다음과 같은 경우 부담은 개발자에게 있습니다. 코드 생성 제품에 문제가 발생했습니다. 통제력 상실에 대한 두려움은 일반적으로 개발 팀이 코드 생성에서 멀어지게 만드는 요인입니다. 그러나 오늘날의 더욱 정교한 도구를 사용하면 가능합니다. 그 주장의 대부분은 사라집니다.
현재 어느 정도의 성공을 원하는 코드 생성 플랫폼이나 도구는 다음을 충족해야 합니다.
- 코드 생성 방법을 투명하고 공개적으로 공개하세요.
- 제품이 정확하고 일관되며 깨끗한 코드
- 개발자에게 아무것도 숨기지 마세요.
즉, 코드 생성 출력은 검사하는 개발자가 직접 작성해야 하는 것이어야 합니다. 어쩌면 훨씬 더 좋을 수도 있고 훨씬 더 빠를 수도 있습니다. 팀이 코드 생성을 포함하는 디지털 제품 디자인 플랫폼을 채택하는 이유의 핵심은 다음과 같습니다.
- 의도적으로 설계된 고품질 앱 출력 제품
- 팀 의사소통, 효율성, 성과 증대
- 더 높은 채택률로 시장 출시 시간을 대폭 단축
오늘날의 최신 도구를 사용하면 최신 코드 생성의 이점을 위해서라도 팀이 적어도 디지털 제품 디자인 플랫폼을 고려하고 실험하는 것은 당연한 선택입니다.
단계별: Sketch 설계에서 Angular 코드 생성
오늘날의 빠르게 변화하는 민첩한 개발 환경에서는 승인된 UX 디자인에서 사용 가능하고 실행 가능한 코드로 전환하는 작업이 그 어느 때보다 빠르게 이루어져야 합니다. 개발자에게는 며칠, 어떤 경우에는 몇 시간 만에 UX 디자인을 실행 중인 앱으로 바꾸는 거의 불가능한 작업이 주어집니다! 디자이너는 민첩한 UX 프로세스의 요구 사항에 맞지 않는 기존 도구를 사용하여 반복적인 디자인 프로세스 중에 사용자 피드백을 받도록 요청받고 있습니다. App Builder와 같은 플랫폼이 도움이 될 수 있는 부분이 바로 여기에 있습니다.
App Builder 사용하여 픽셀 단위까지 완벽하고 편집 가능한 코드를 얻기 위해 필요한 2가지 옵션을 살펴보겠습니다.
- Sketch 플러그인
- App Builder Sketch 임포터
옵션 #1 -Sketch 플러그인
1단계: UI 키트 설치
모든 것은 스케치로 시작됩니다. UI 키트의 UI 컨트롤과 복합 UI 패턴을 사용하여 Sketch에서 앱을 디자인하세요. 여기에서 Sketch UI 키트를 다운로드할 수 있습니다.
2단계: App Builder 클라우드를 사용하여 Sketch 디자인 업로드 또는 동기화
디자이너가 Sketch 디자인을 완성하면 통합 Sketch 플러그인을 사용하여 업로드할 수 있습니다. 클라우드에 들어가면 디자인 팀은 사용자 테스트, 사용자와의 협업, 대화형 프로토타입 생성과 같은 로우 코드 도구의 기능을 활용할 수 있습니다.
3단계: Sketch 플러그인으로 Angular 코드 생성
개발자는 여기에서 Sketch 플러그인을 다운로드할 수 있습니다. 플러그인은 Sketch로 제작한 디자인/앱을 App Builder에 게시하는 데 도움이 됩니다. 다음 단계에 따라 다운로드할 수도 있습니다.
- App Builder 열기
- "새 애플리케이션 생성"을 클릭하세요.
- "다음에 대한 자산 가져오기.."를 클릭하세요.
이제 플러그인 사용을 시작할 수 있습니다.
원하는 대로 구성이 완료되면 이제 코드를 생성할 차례입니다! '앱 만들기' 버튼을 클릭하면 프로세스가 시작됩니다.
이 간단한 3단계를 통해 디자인에서 코드로, Sketch에서 Angular로 이동할 수 있습니다. 디자인이 없거나 Sketch 디자인이 없는 경우 여기에서 HR 대시보드 앱 샘플을 사용해 보세요.
옵션 #2 -App Builder Sketch 가져오기 도구
옵션 #1이 간단하다고 생각하셨다면 옵션 #2가 마음에 드실 겁니다! 드래그 앤 드롭을 사용하여 App Builder 사용하여 디자인에서 코드로 이동하는 간단한 4단계는 다음과 같습니다.
1단계: 새 앱을 클릭하세요.
2단계: Sketch 파일을 "기존 디자인에서 만들기" 드롭 영역으로 드래그합니다.
3단계: 클라우드 IDE에서 디자인 검토
4단계: Angular 코드 검토 또는 다운로드
IDE 오른쪽 상단에 있는 버튼을 사용하여 앱을 생성하거나 앱을 미리 보고 코드를 볼 수 있습니다.
Figma를 사용 중이고 코드 생성 솔루션을 찾고 있다면 Figma 플러그인 덕분에 App Builder 도움이 될 것입니다. Figma 디자인 파일에서 Angular, Blazor 및 웹 구성 요소로 바로 사용할 수 있는 코드를 쉽게 생성할 수 있습니다. 기본적으로 Figma-to-code 프로세스는 Figma에서 생성된 디자인 또는 프로토타입을 실제 사용 가능한 코드가 있는 작업 애플리케이션으로 단순화하는 것을 말합니다. 로우 코드 솔루션을 사용할 때 이는 수동으로 코드를 작성할 필요 없이 매우 간단하고 직관적인 방식으로 발생합니다. 가능한 가장 빠른 방법으로 Figma HTML 코드로 변환하는 데 도움이 되는 모든 단계를 설명하는 전용 블로그 게시물이 있습니다.
마찬가지로 디자이너나 개발자는 웹 기반 WYSIWYG 도구를 사용하여 Sketch에서 코드로 이동할 수 있습니다. 팀은 클라우드 기반 WYSIWYG 드래그 앤 드롭으로 멋진 실제 앱을 디자인하고 구축할 수 있으며 웹 레이아웃, CSS 및 데이터까지 완비된 코드를 얻을 수 있습니다.
요약
코드 생성은 소스 코드를 네이티브 기계어로 컴파일하는 것 이상입니다. 코드 생성에는 많은 측면과 작업을 수행하는 많은 도구가 있습니다. 이 기사에서는 코드 생성이 무엇인지, 왜 필요한지, Angular 앱에 어떻게 적용할 수 있는지에 대한 배경 지식을 제공했으며 더 나은 소프트웨어를 더 빠르게 빌드하는 데 도움이 되는 몇 가지 도구를 소개했습니다.
즐거운 코딩하세요!
