NCRM logomark
NCRM logotype NCRM logotype-subtitle

COMPONENT DRIVEN UI SOLITION

컴포넌트 조립 방식의 최신 UI 솔루션

THE BEST SOLUTION FOR
COMPONENT DRIVEN UI DEVELOPMENT

성공적인 컴포넌트 주도개발을 위한 최고의 UI 솔루션

최근 프론트엔드 구축 동향은 Low code, No code의 컴포넌트 주도 개발 방식을 도입해 자사의 업무 특성에 맞추어 작성한 검증된 컴포넌트들을 사용하여 빠르고 안전하게 정보시스템을 구축하는 것입니다. 컴포넌트는 특정 업체나 기술에 종속 되지 않고 웹 기술의 발전과 함께 하기 위해 개방형 웹 표준 기술인 웹 컴포넌트(Web Components) 기반으로 구축해야 합니다.

NCRM Web Components가 제공하는 컴포넌트 주도 UI(Component Driven UI) 개발은 UI 개발 생산성 향상, 유지보수 용이성 등 IT 분야의 장점 뿐만이 아니라, 급변하는 사업 환경에서 경영 목표를 달성하고 기업 경쟁력을 향상시키기 위한 정보서비스를 빠르고 안정적으로 구축하기 위한 필수 기능입니다.

NCRM Web Components는 최근 프론트엔드 기술 추세인 컴포넌트 주도 개발 방식의 UI 제품이면서, 다양한 사용자 편의 기능 UI 기능 컴포넌트와 시각적 개발 기능을 제공하는 최고의 UI 솔루션입니다.

Component Driven Development

컴포넌트 주도 개발 방식의 UI 개발

NCRM이 제공하는 컴포넌트 주도 UI 개발(Component Driven UI)은 UI 개발 생산성 향상, 유지보수 용이성 등 IT 부분의 장점 뿐만이 아니라, 급변하는 사업 환경에서 경영 목표 달성과 기업 경쟁력 향상을 위해 정보 서비스를 빠르고 안정적으로 구축하기 위한 필수 기능입니다.

컴포넌트 주도 개발을 통해 품질개선(52%), 비용절감(45%), 생산성 향상(39%), 제품출시기간 단축(30%)함으로써 시장 경쟁력 확보 가능 (카네기 멜론대, SEI 보고서)
화면을 여러 개의 작은 단위로 쪼개어 개발하는 컴포넌트 주도 개발 방식의 UI 개발
컴포넌트 주도 개발의 장점

빠른 개발Rapid Development

컴포넌트로 개발을 분리하여 집중된 API로 모듈화된 부분을 작성. 각 컴포넌트의 작성을 촉진하며 완성 후 인수

유지보수 단순화Rapid Development

관심사분리(Separation of Concerns) 컴포넌트로 많은 적용업무를 구축하기 위해 각각 다시 작성하지 않고 재사용하거나 확장 가능

빠른 기술 습득Rapid Skill Acquisition

개발자가 신규 프로젝트에 참여할 때 전체 애플리케이션을 습득하기 보다 담당 컴포넌트에 집중하므로 훨씬 용이하게 배우고 이해

더 나은 재사용Better Reusable Components

애플리케이션의 일부를 변경하거나 향상하고자 할 때, 전체를 수정하지 않고 컴포넌트 만을 확장하거나 수정

더 나은 테스트 주도 개발Test Driven Development

모듈화 컴포넌트 구축 시 각 컴포넌트의 중점 기능들을 입증하는 단위 테스트를 적용하기 용이, 대형 시스템 개발 시 각각의 부분의 책임을 이해하고 분리하기가 용이하므로 더욱 쉽게 테스트 가능

더 나은 시스템 모델링Better System Modeling

시스템이 모듈화된 컴포넌트들로 구성된 경우 파악, 이해 및 작동이 훨씬 용이

분산

분산

컴포넌트의 주체적 책임이 개발팀 내에 분산

유지보수 용이성

유지보수 용이성

컴포넌트는 여러 차례 교체나 재작성 용이

표준 준수

표준 준수

컴포넌트는 독립적으로 개발되고 자체 패키지화

구성 용이

구성 용이

같은 것을 새로 작성하지 않고 기존 컴포넌트들로 새로 구성

컴포넌트로 만드는 더 나은 소프트웨어Better software created with components

Web Standard Components

웹 표준 기술 기반

NCRM Web Components는 범용 브라우저에서 기본적으로 지원 되는 웹 표준 기술인 웹 컴포넌트와 ECMAScript 6 모듈 기반으로 특정 업체의 기술에 의존적이지 않고 웹 기술 발전과 함께 합니다.

표준 Web Components 기술 기반

표준 Web Components 기술 기반

개방형 표준 기술 Web Components 기반의 컴포넌트와 UI 프로그래밍

범용 브라우저  기본 지원

범용 브라우저 기본 지원

특정 기술에 종속되지 않고 주요 범용 브라우저에서 지원하는 기본 기능

상호 영향이 없는 캡슐화된 컴포넌트

상호 영향이 없는 캡슐화된 컴포넌트

변수, CSS 등이 해당 컴포넌트에만 한정되어 다른 부분과 충돌 없이 높은 이식성 제공

ECMAScript6 모듈 구조

ECMAScript6 모듈 구조

ECMAScript6 모듈로 명확히 분리하여 재사용성, 개발효율성, 유지보수성 향상

개방형 웹 지원 개방형 웹 지원

크로스브라우징 지원, 다양한 모바일 기기 사용 지원

객체 지향 방식 위젯 객체 지향 방식 위젯

상속, 확장을 통한 새로운 기능 추가, 변경 용이

Headless 구조 Headless 구조

로직과 표현이 분리된 Headless 구조로 다양한 디자인 적용 용이

개인별 맞춤 기능 다국어 지원

1회 개발로 다국 언어 사용 가능

HIGH PRODUCTIVITY

쉽고 편리한 개발 도구

NCRM Web Components는 기업의 UI 표준화 규범이 적용된 다양한 화면 패턴의 템플릿 기반으로 우수한 품질의 UI 프로그램을 높은 생산성으로 제작하는 기능을 제공하며, 기 제작된 프로그램을 재 활용하기 위한 다양한 기능을 제공합니다.

MDI 제공 컴포넌트 조립 방식 개발 기능

기능 확장이 용이하며 다른 프론트엔드 개발 환경에서 사용 가능, 개발 문제 분석, 기능 확장이 용이하며 재활용성 높음

독립적으로 캡슐화된 컴포넌트독립적으로 캡슐화된 컴포넌트

Shadow DOM 기반 스타일과 마크업으로 완전히 캡슐화하여 정의 충돌 해결, 기존 작성 코드 재사용 가능, 컴포넌트 각각 확장 가능

빠르고 가벼운 UI 컴포넌트빠르고 가벼운 UI 컴포넌트

타 프레임워크 대비 빠른 로딩, 변경된 부분만 독립적으로 갱신되므로 응답 속도 빠름

MVVM 구조 MVVM 구조

특정 플랫폼에 종속되지 않고 다양한 기기 지원 용이

WYSIWYG WYSIWYG

실행 화면과 동일하게 직관적으로 개발 가능한 환경

다양한 화면 패턴 라이브러리 다양한 화면 패턴 라이브러리

의미구조화된 레이아웃 기반 다양한 템플릿 제공

편리한 에디터 편리한 에디터

다양한 편의 기능과 DOM 에디터 기능

자동 데이터 바인딩 자동 데이터 바인딩

IO필드와 화면 객체 바인딩으로 자동 동기화

USER-CENTERED INTERFACE

고급 사용자 편의 기능

NCRM Web Components는 사용자의 업무 수행 효율성과 생산성을 높이는 다양한 편의 기능을 제공하며 특히 Grid 컴포넌트는 기업 시스템에서 요구되는 정보를 효과적으로 조회하고 분석하기 위한 최고의 기능들을 제공합니다.

고급 기능 컴포넌트 고급 기능 컴포넌트

기업 업무 시스템에 필요한 최고 기능의 그리드 컴포넌트, 파일 업로드 / 다운로드, 다이얼로그, 달력 등

최고의 그리드 컴포넌트 최고의 그리드 컴포넌트

셀 너비 조정, 소계 / 합계 기능, 셀 병합, SORT 필터링 등 고급 기능

다양한 입력 컴포넌트 다양한 입력 컴포넌트

실시간 입력 마스킹, 입력 필드 타입 별 유효성 검증, 입력 가능한 콤보박스

다양한 기능 컴포넌트 다양한 기능 컴포넌트

다양한 다이얼로그 기능, 파일 업로드와 다운로드, 달력, 월간 / 주간 스케줄러

다양한 해상도와 장비 지원 다양한 해상도와 장비 지원

플렉서블 레이아웃으로 다양한 해상도 지원 가능

다양한 네비게이션 방식 제공 다양한 네비게이션 방식 제공

메가 메뉴, 카드 탭, 도킹 메뉴, 워크플로우 지원

개인별 맞춤 기능 개인별 맞춤 기능

즐겨찾기, 단축키 등 웹 단말 설정, 연관 메모 작성 기능

사용자 중심 편의 기능 사용자 중심 편의 기능

확대/축소 기능, 도움말 작성 기능, 차트/지도 연계 기능

NCRM logomark NCRM Web Components 기술정보