Adobe XD 디자인을 HTML 코드로 변환하는 방법은 무엇입니까?
XD 디자인 파일을 프로덕션 준비 코드로 변환하는 것은 더 이상 지루한 작업이 아닙니다. App Builder 사용하여 Adobe XD를 HTML로 쉽게 변환하는 방법에 대해 알아보십시오.
Jason Beres
8min read
Adobe XD에서 새로운 앱 디자인을 처음부터 제작하고 코딩된 완전한 제작 준비 제품으로 만들 때 다음 단계에 익숙하십니까?
아이디어 구상 및 실제 설계 – 와이어프레임 > 및 디자이너-개발자 핸드오프 처리 – 사용자/사용성 테스트 >, 이해 관계자와 함께 변경 사항 반복 – > 및 최종 코딩
그런 다음 프로세스가 여러 사람과 팀에 분산되어 있고 여러 단계를 포함하기 때문에 복잡하고 시간이 많이 걸린다는 것을 알 수 있습니다.
운 좋게도 올해는 2022년이고 App Builder와 같은 포괄적인 디자인 및 개발 앱 가속기가 있어 이러한 디자인-코딩 프로세스를 지원합니다.
Adobe XD란 무엇입니까?
디자이너가 와이어프레임과 앱을 디자인할 수 있는 현대적이고 사용하기 쉬운 도구를 제공하기 위해 처음부터 제작된 Adobe XD는 오늘날 시장에서 가장 인기 있는 벡터 그래픽 디자인 플랫폼 중 하나입니다. 와이어프레임 기능과 함께 디자이너는 충실도가 높은 프로토타입을 제작하고, 디자인 프로세스를 통해 팀 간에 협업하고, 애니메이션을 구성하고, 피드백을 수집할 수 있습니다.
소프트웨어 개발 팀 및 IT 팀과 마찬가지로 설계 팀은 반복 작업에 소요되는 시간과 노력을 절약할 수 있는 지속 가능하면서도 역동적인 도구 에코시스템을 만들기 위해 그 어느 때보다 재사용성에 의존하고 있습니다. Adobe XD는 재사용 가능한 디자인을 촉진하고 디자인 프로세스를 간소화하는 UI 키트 형태로 버튼 및 탐색과 같은 상위 수준 구성 요소를 만들 수 있다는 점에서 이러한 목표를 지원합니다.
Adobe XD는 어떤 용도에 가장 적합합니까?
- 빠르고 쉽게 인터랙티브 프로토 타입, 와이어 프레임, 애니메이션 추가
- 다양한 장치 유형 및 크기에서 프로토타입 실행
- 재사용 가능한 설계 요소 및 설계 시스템 생성
- 레이아웃에 대한 스왑, 간격, 크기 조정 및 정렬 기능
- 핸드오프 공유 및 피드백 수집
Adobe XD의 단점은 무엇입니까?
- 코드 생성 또는 코드 출력은 포함되지 않습니다
- 사용자 테스트/사용자 연구 기능 없음
- 제한된 플러그인 에코시스템
- 프로토타입 또는 와이어프레임을 공식 디자인으로 전송할 수 없습니다.
Adobe XD는 모든 유형의 HTML 코딩 결과를 얻을 수 있는 코드 생성을 약속하지 않고 와이어프레임과 프로토타입을 제작할 수 있도록 설계되었습니다. 프론트엔드 프로그래머와 디지털 소프트웨어 팀은 필요한 HTML 코드를 생성하기 위해 개입해야 하며(또는 도움이 될 수 있는 플러그인을 온라인에서 찾으려고 노력해야 함) 디자인이 현실이 되고 백엔드에서 개발된 모든 것과 동기화될 수 있습니다.
Adobe XD 파일이란?
Adobe XD 파일은 이미지 자산, 색상 값, 스타일 가이드 및 일부 CSS를 포함하는 .zip 파일입니다. 즉, 추가 도구 및 자동화를 사용하여 프로덕션 품질의 HTML 코드로 변환할 수 있는 디자인 요소가 포함되어 있습니다. 개발자 전달 시나리오에서 개발자는 디자인 파일을 읽기 위해 시스템에 Adobe XD가 설치되어 있어야 합니다. 반면에 디자인 파일을 PNG 또는 PDF로 변환하는 것은 가능하더라도 디자인 요소, 레이어 및 응용 프로그램 흐름이 변환 중에 손실됩니다.
XD 파일의 콘텐츠를 보는 데 유용할 수 있는 filext.com와 같은 도구 및 웹 사이트가 있지만 이는 프로젝트에 더 많은 시간을 추가하고 제품 출시 시간을 늦출 뿐입니다.
Adobe XD to Code는 무엇을 의미합니까?
본질적으로 Adobe XD to code는 XD 디자인 파일을 코드로 변환하는 프로세스를 의미합니다. Adobe XD를 사용하여 새로운 디지털 제품 디자인을 제작하는 목표는 사용 가능한 실제 코드를 사용하여 작동하는 애플리케이션으로 변환할 수 있도록 하는 것입니다. 일반적으로 이 프로세스에는 커뮤니케이션, 공동 작업, 디자인 개선 및 수동 코드 수정에 투자된 많은 단계, 인력 및 시간이 포함됩니다.
아트 보드와 시각적 모형을 만들어야 합니다. POC는 이해관계자에게 디자인의 아이디어와 가치를 명확하게 전달해야 합니다. 디자이너-개발자 핸드오프는 프로그래머에게 모든 사양을 제공하고 프로토타입을 UI 코드로 다시 만들기 전에 이후 단계에서 반복, 사일로 및 잘못된 커뮤니케이션을 제거할 수 있을 만큼 충분히 광범위하고 상세해야 합니다. 또한 사용자 및 사용성 테스트를 수행하여 사용자가 디자인과 어떻게 상호 작용하는지, 목적이 검증되는지 여부, 주어진 비즈니스의 가치를 높일 수 있는지 여부를 확인합니다.
App Builder와 같은 코드 생성 툴은 Adobe XD 파일 디자인을 며칠이 아닌 몇 분 만에 프로덕션 준비 코드로 변환할 수 있도록 지원합니다.
App Builder를 사용하여 Adobe XD를 HTML 코드로 변환하는 방법은 무엇입니까?
시작하기 위한 몇 가지 필수 구성 요소가 있습니다.
Adobe XD를 설치한 후에는 디자인을 코드로 작성할 수 있는 Indigo.Design App Builder 플러그인을 설치해야 합니다. Creative Cloud 앱의 Stock & Marketplace -> Plugins에서 액세스할 수 있으며, Indigo.Design 검색하기만 하면 됩니다.
Figure 1: Adobe Creative Cloud Plugins
Indigo.Design App Builder 플러그인을 설치했으면 Infragistics의 UI 키트를 기반으로 한 디자인이 필요합니다. 디자인에서 코드로 App Builder 작동하는 방식으로, Adobe XD의 디자인은 디자인 단계를 가속화하는 UI 구성 요소 및 UI 패턴의 모든 기능을 갖추고 확장 가능하며 사용자 정의 가능한 라이브러리인 UI 키트를 사용하여 제작해야 합니다.
Go to our sample’s library here https://ko.infragistics.com/resources/sample-applications/angular-people-app and download the Adobe XD files for the People App example.
Figure 2: People App Adobe XD files
다운로드한 항목이 있으면 Adobe XD에서 People App Adobe XD 파일을 엽니다.
Figure 3: People App Opened in Adobe XD
여기에서 Plugins -> Indigo.Design 메뉴에서 Create New App 옵션을 선택합니다.
Figure 4: Create New App Menu Option
다음으로, Workspace를 변경할 수 있는 Create New App 대화 상자와 앱 생성 프로세스의 몇 가지 다른 옵션이 표시됩니다.
Figure 5: Create New App Dialog
이 대화 상자에서 앱 만들기를 클릭하면 Adobe XD 파일이 클라우드로 전송되어 처리, 구문 분석, 해부된 후 최종적으로 App Builder의 공통 앱 모델로 변환됩니다.
그림 6: 클라우드의 App Builder에 People 앱의 성공적인 배포
성공 대화 상자의 링크를 클릭하거나 작업 공간 방문 버튼을 클릭하면 새 응용 프로그램이 표시되는 App Builder로 바로 이동합니다!
Figure 7: People App in you Workspace in App Builder
그런 다음 People 앱을 클릭하기만 하면 App Builder에서 편집할 수 있습니다!
Figure 8: People App in App Builder
여기에서 코드를 미리 보거나, Angular 또는 Blazor 코드를 생성하거나, WYSIWYG 디자이너에서 앱 수정을 시작할 수 있습니다. 또한 개발자들이 GitHub를 좋아 한다는 것을 알고 있기 때문에 App Builder를 사용하면 모든 애플리케이션 파일을 GitHub 리포지토리에 업로드하거나 로컬에서 실행할 수 있는 패키지로 다운로드할 수 있습니다.
App Builder 다른 로우 코드 설계 개발 도구와 다른 점은 무엇입니까?
"로우코드 개발이란 무엇이며 왜 중요한가?" 기사에서 우리는 디자인에서 코드로 전환할 때 세 가지 주요 과제가 있음을 강조합니다.
- Angular, React, Blazor 및 Web Components와 같은 가장 인기 있는 프레임워크에서 작동하는 엔터프라이즈 지원 앱을 빌드하기 위한 WYSIWYG 로우 코드 앱 제작자가 부족합니다.
- 디자인 스케치와 프로토타입은 실제 코드나 기능적인 앱으로 자동 변환하기 어렵습니다.
- 소수의 로우코드 플랫폼에는 소프트웨어 구성 요소로 변환되고 브랜드 솔루션을 구축하기 위해 재사용하거나 컨텍스트화할 수 있는 포괄적인 UX 컨트롤, 패턴 및 스타일 지침이 포함된 통합 디자인 시스템이 있습니다.
그리고 바로 이 App Builder가 경쟁업체의 디자인-코드 소프트웨어 사례를 능가할 수 있는 시기입니다. 가장 큰 차별화 요소는 편집 및 변경 불가능한 스파게티 코드를 생성하는 다른 앱 제조업체와 달리 App Builder는 사용 가능하고 테스트 및 디버그할 수 있는 깔끔한 프로덕션 준비 코드를 생성한다는 것입니다.
또한 App Builder는 공유 코드베이스에 의존하며 내장된 개발, 테스트, 디버깅 및 배포 기능을 포함하므로 Infragistics의 이 클라우드 기반 로우 코드 웹 앱 빌더는 개발 시간을 80% 단축합니다. 단일 "전력 승수" 역할을 하는 이 솔루션은 스케치, 설계, 프로토타이핑, 사용자 테스트, 실시간 코드 미리보기 및 코드 생성을 간소화하고 반복 작업을 자동화하여 사용자 인터페이스 구축의 복잡성을 제거하고 수동 코딩 없이 우수한 UX를 만들 수 있도록 합니다.
이렇게 하면 이해 관계자에서 디자이너, 개발자에 이르기까지 모든 사람이 팀 구성원에게 지금까지 사용해온 도구를 포기하도록 요구하지 않고 단일 플랫폼 내에서 통합될 수 있습니다.
또한 App Builder는 개발 작업을 대체하고, UI 구성 요소 및 코드, 스타일링 및 레이아웃에 연결할 수 있는 상호 작용을 구성합니다.
최근에 우리는 포괄적인 App Builder 제품 개요와 자습서를 출시했습니다. 아래에서 시청하여 기능에 대한 모든 것을 배우고 시작할 수 있습니다.
비즈니스 관점에서 로우코드 플랫폼은 앱 개발 프로세스를 민주화하여 앱 개발 비용을 절감하고, 기술 이탈을 방지하며, 비즈니스 워크플로를 자동화합니다. 클라우드 기반이기 때문에 앱 빌더 소프트웨어는 확장성과 데이터 암호화도 촉진합니다.