Atlas UI가 UI 디자인 모범 사례의 일관된 사용을 가능하게 하는 방법 | Mendix

메인 컨텐츠로 가기

Atlas UI가 UI 디자인 모범 사례의 일관된 사용을 가능하게 하는 방법

채택 로우코드 개발 플랫폼 조직이 맞춤형 애플리케이션에 대한 비즈니스 수요와 이를 제공할 IT 역량 간의 격차를 메우려고 하면서 급증하고 있습니다. 이러한 플랫폼을 사용하면 전문가부터 시민 개발자까지 광범위한 사용자가 기존 개발 방식보다 10배 더 빠르게 웹 및 모바일 애플리케이션을 빌드할 수 있으며, 비즈니스 성과를 보장하는 데 도움이 되는 반복적이고 사용자 중심적인 방식을 촉진합니다.

애플리케이션이 의도한 이점을 제공하도록 보장하는 또 다른 핵심 측면은 올바른 사용자 경험을 설계하는 것입니다. 여기서의 과제는 대부분의 기업이 충분한 UX 리소스가 부족하다는 것입니다. Gartner 설문 조사에 따르면 평균적으로 기업은 개발자 17명당 UX 디자이너가 35명에 불과한 반면, 조직의 XNUMX%는 UX 디자인 역량이 전혀 없습니다. 즉, 기존 개발 팀을 지원할 디자이너가 충분하지 않다는 것을 의미합니다. 이 문제는 여러 개의 자율 팀이 병렬로 앱을 개발하는 방향으로 전환되면서 더욱 복잡해졌습니다.

팀 차트에서 UX 디자이너의 비율

사내 UX 리소스가 부족하고 개발자가 UI/UX 기술을 직접 보유하지 않은 경우, 개발팀이 대규모로 매력적인 사용자 경험을 구축하도록 어떻게 지원할 수 있을까요? 핵심은 조직 내 모든 개발자에게 모범 사례를 준수하는 즉시 사용 가능하고 활용하기 쉬운 UI 구성 요소를 제공하는 것입니다.

이것이 바로 Atlas UI의 철학입니다. 계층화되고 구성 요소화된 UI 프레임워크로, UI 디자인 기술이 거의 없거나 전혀 없는 개인이 풍부한 사용자 경험을 빠르게 조립할 수 있게 해줍니다. Atlas는 UI 디자인 모범 사례(자신의 것이든 여러분의 것이든)를 포착하고 활용하여 애플리케이션 포트폴리오 전반에 걸쳐 일관되고 매력적인 UX를 보장하도록 설계했습니다. 더 자세히 설명하겠습니다.

Atlas의 독창적인 디자인 언어를 지속적으로 활용하여 뛰어난 UI를 디자인합니다.

Atlas UI는 단순한 UI 프레임워크가 아닌, 고객 기반에서 볼 수 있는 일반적인 UI 패턴과 모범 사례를 기반으로 하는 자체 디자인 언어로 제공됩니다. Atlas 디자인 언어에는 탐색 레이아웃, 페이지 템플릿, 빌딩 블록(UI 구성 요소의 사전 구성된 어셈블리) 및 위젯을 포함하여 전문적으로 디자인되고 바로 사용할 수 있는 UI 요소의 패턴 라이브러리가 포함되어 있습니다. 또한 공개적으로 사용 가능한 스타일 가이드 Atlas UI의 핵심 디자인 원칙을 개략적으로 설명하고 개별 구성 요소를 사용하는 경우에 대한 권장 사항을 제공합니다.

UX 차트

패턴 라이브러리와 스타일 가이드를 개발자가 바로 사용할 수 있게 하는 것은 WYSIWYG 웹 모델러에 완벽하게 통합되어 있기 때문입니다. 예를 들어, 유형별로 그룹화된 다양한 페이지 템플릿이 Create New Page 흐름에 표시됩니다. 또한 빌딩 블록과 위젯을 도구 상자 내에서 바로 사용할 수 있으므로 개발자가 캔버스로 끌어서 놓아 빠르게 페이지를 구성할 수 있습니다. 빌딩 블록은 헤더, 목록, 타임라인, 마법사와 같은 일반적인 UI 패턴을 구현하기 위해 미리 구성된 레이아웃(최적의 비율, 간격 및 개별 디자인 속성 포함)으로 여러 위젯을 조립하기 때문에 UI 디자인 기술이 없는 개발자에게 특히 유용합니다.

앱 구축 화면 샷

무엇보다도 스타일 가이드가 모델러에도 통합되어 있기 때문에 UI 구성 요소가 상자에서 꺼내자마자 멋지게 보일 뿐만 아니라 개발자가 올바른 시나리오에서 사용하고 올바른 UX를 제공하도록 하는 지침이 포함되어 있습니다. 개발자는 특정 빌드 블록이나 페이지 템플릿의 'i' 아이콘을 클릭하기만 하면 해당 구성 요소를 사용해야 하는 일반적인 시나리오를 보여주는 Atlas 웹사이트 페이지로 바로 이동합니다. 아래 예를 참조하세요.

진행 마법사 화면 샷

내부 UI/UX 리소스가 없는 조직의 경우 Atlas UI의 즉시 사용 가능한 디자인 언어는 개발자 팀 전체에서 UI 모범 사례를 일관되게 활용하기 시작하는 좋은 방법입니다. 개발자와 비즈니스 분석가조차도 프런트엔드 개발이나 UI 디자인 기술이 필요 없이 이러한 UI 구성 요소를 활용하여 훌륭한 사용자 경험을 쉽게 만들 수 있습니다. 그리고 Theme Customizer를 사용하면 브랜드 로고, 색 구성표 및 타이포그래피로 애플리케이션을 쉽게 사용자 지정할 수 있습니다.

회사별 패턴 라이브러리를 사용하여 조직의 UI 모범 사례를 활용하세요.

팀이 성장하고 경험을 쌓으면서 다음과 같은 개발이 이루어집니다. Mendix, 그들은 자체 UI 모범 사례를 개발에 주입하고 싶어할 수도 있습니다. Mendix 앱. 많은 고객에게 이는 여러 애플리케이션에서 일관성과 조화를 촉진하는 통합된 UI/UX 디자인 규칙 세트를 정의하는 엔터프라이즈 디자인 언어를 만드는 첫 걸음이 될 것입니다.

반응형 디자인 스크린샷

이를 위해 Atlas UI를 사용하면 기본 패턴 라이브러리를 사용자 지정하거나 회사별 버전으로 바꿀 수 있습니다. 제 동료 Arjan Hendriksen이 이 방법 게시물에서 설명했듯이 이 프로세스는 기존에서 공통 페이지와 UI 패턴을 추출하는 것으로 시작됩니다. Mendix 앱을 만들고, 재사용 가능한 페이지 템플릿과 빌딩 블록으로 홍보합니다. 물론, 이것들은 처음부터 만들 수도 있습니다.

예를 들어, 소비자 은행은 온라인 뱅킹 및 모바일 앱을 위한 표준 카드 빌딩 블록을 디자인하여 고객에게 시각적으로 매력적인 계좌 개요를 제공할 수 있습니다. 또는 보험 회사는 자체 진행 마법사를 만들어 잠재 고객이 전체 보험 상품 라인에서 일관되게 견적 및 구매 여정을 안내할 수 있습니다.

회사별 UI 요소의 핵심 집합에 수렴하면 Atlas UI Resources 모듈의 사용자 지정 버전(패턴 라이브러리 포함)을 만들어 개인 앱 스토어에 제공할 수 있습니다. 그런 다음 UI Resources 모듈을 개발자가 기본적으로 선택할 수 있도록 앱 생성 흐름에서 직접 사용할 수 있는 회사별 시작 앱으로 제공할 수 있습니다. 특정 대상(예: 직원 및 고객 대상 앱)에 대해 서로 다른 UI 및 브랜딩 요구 사항이 있는 조직은 여러 시작 앱을 게시할 수도 있습니다.

이러한 기능은 조직의 디자인 원칙을 설명하고 회사별 UI 구성 요소에 대한 권장 사용 사례를 제공하는 (살아있는) 스타일 가이드와 함께 모든 개발자가 작업할 수 있도록 보장합니다. Mendix 조직의 UI 모범 사례에 직접 도구 상자에서 액세스할 수 있습니다. 모든 새 앱은 시작점으로 자동으로 테마가 지정됩니다. 그런 다음 개발자는 회사에서 승인한 다양한 페이지 템플릿과 빌딩 블록을 가져와 더 광범위한 앱 환경과의 일관성을 유지하면서 UI 디자인을 가속화할 수 있습니다.

추가 UX 리소스 없이도 규모에 맞게 뛰어난 UX를 지속적으로 제공하세요

훌륭한 사용자 경험을 제공하기 위해 반드시 UI/UX 인력을 고용할 필요는 없습니다. 대부분의 기업 IT 조직에서 이는 선택 사항이 아닙니다. 대신 핵심은 모든 개발자에게 UI 디자인 모범 사례를 제공하여 디자이너의 도움 없이도 매력적인 사용자 인터페이스를 구축할 수 있도록 하는 것입니다. 이는 바로 Atlas UI가 하는 일이며, 바로 사용할 수 있는 UI 구성 요소를 포함하는 기본 제공 디자인 언어와 고유한 회사별 패턴 라이브러리를 만들고 엔터프라이즈 디자인 언어를 정의하는 여정을 시작할 수 있는 기능을 통해 이루어집니다.

기업 UX 기술 부족은 앞으로도 계속될 것으로 보이지만, 그렇다고 해서 여러분의 팀이 기업 UX 격차를 메우고 규모에 맞게 매력적이고 사용성이 뛰어난 애플리케이션을 제공할 수 없다는 건 아닙니다.

Atlas UI에 대해 자세히 알아보기

언어를 선택하세요