[SK C&C 대표 기업용 솔루션] NEXCORE의 모든 것을 말하다 #8_NEXCORE Alopex UI

 

 

NEXCORE Alopex UI(이하 Alopex UI)는 SK C&C의 MCDP1) 솔루션인 NEXCORE Mobile Platform 제품군을 이루고 있는 요소 제품 중 하나입니다.

이제 웹의 표준은 HTML5라고 해도 과언이 아닙니다. 많은 브라우저와 모바일 디바이스들이 HTML5를 지원하고, 표준으로 채택하고 있습니다. 이에 발 맞추어 수많은 HTML5 프레임워크 제품들이 쏟아져 나오고 있습니다. 그 제품들 중 가장 독보적인 위치를 차지하고 있는, jQuery 기반의 UI Framework 제품이 바로 Alopex UI입니다.

Alopex UI만의 뛰어난 개방성과 확장성 덕분에 개발자는 jQuery 문법 을 따로 배울 필요 없이 간단하게 표준 스타일이 적용된 UI를 제작할 수 있습니다. 또한, Alopex UI가 제공하는 별도의 CSS를 사용할 수도 있지만, 기존에 개발해 두었던 CSS나 jQuery의 테마 롤러를 그대로 사용할 수도 있습니다.

Alopex UI는 호환성을 우선으로 개발되었기 때문에, 다양한 장비와 브라우저에서 동일하게 사용할 수 있으며, 모바일 시대에 적합하게 디자인 되었습니다. 따라서, 마우스 이벤트와 터치 이벤트를 별도로 구현할 필요가 없고, 다양한 장치에서 동일하게 사용할 수 있으며, 다양한 해상도에 따라 적절히 변경되는 반응형 웹페이지를 제작하는 경우에도 이를 좀 더 쉽고 직관적으로 제작할 수 있도록 도움을 줍니다.

또한, 웹 접근성을 철저하게 준수하는 기본적인 Asset들을 제공하기 때문에 접근성 준수를 위해 프로젝트 수행 시 만들고 지키도록 강제해야 하는 다양한 규칙들과 프로세스에 대해서 고민할 필요가 줄어듭니다.

이렇게 생산성 향상과 뛰어난 유지보수성을 제공하는 Alopex UI를 통해, 당신은 웹의 다양한 기술요소들에 대한 세세한 고민 없이도, 미려한 모바일 및PC용 Web page와 Application들을 개발할 수 있습니다.

 

 Easy & Simple Code

Alopex UI의 목표는 초급 개발자들도 최소한의 노력과 시간투자 만으로도, 아주 심플한 코드로 유려한 컨텐츠를 제작하고자 하는 것에 있습니다. 따라서, 개발자들에게는 새로운 프레임워크를 배워야 할 필요 없이 기존에 사용하던 HTML과 가장 유사한 형태로 코드를 작성할 수 있게 합니다.

이를 통해 디자이너와 퍼블리셔들에게 별도의 jQuery Theme Roller를 사용할 필요 없이 기존에 사용하던 CSS와, 그 클래스들을 그대로 사용할 수 있게 합니다. 이는 개발 초기의 Learning Curve를 단축하는 것은 물론, 개발에 참여하는 인력들이 스트레스 받지 않고 Alopex UI를 적용할 수 있다는 것을 의미합니다. 물론, 기존에 개발해 두었던 jQuery 테마 롤러를 그대로 사용하는 것도 가능합니다.

 

 반응형 웹(Responsive Web)의 쉬운 적용

일반적으로 데스크톱에서의 웹페이지만을 구성하던 기존 방식에서 모바일 디바이스들의 다양한 해상도를 모두 지원할 수 있도록 반응형 웹 방식으로 전환하는 것은 쉬운 일이 아닙니다. 하지만, 현재의 웹사이트는 모바일에서의 접속이 더욱 늘어나고 있는 추세이기 때문에 반응형 웹의 적용은 이제 필수가 되었습니다. 반면, 기존의 복잡한 그리드나 테이블들을 그대로 모바일 페이지에 적용시키기에는 디자인 측면에서도, 사용자 경험 측면에서도 무리가 따릅니다. 하지만, 많은 모바일 사이트들이 아직도 데스크톱 기준으로 제작이 되어 있습니다.

하지만 Alopex UI에서 제공하는, 모바일 환경을 우선으로 설계된 Component들을 사용하면, 모바일과 데스크톱 각각 모두에 최적화된 화면을 제공할 수 있습니다.

 

 Web과 App에서 한 번에 접근성 확보

웹 접근성은 프로젝트 초기부터 가장 중요하게 다루어져야 할 이슈입니다. 그러나, 기획 단계부터, 디자인, 퍼블리싱, 개발에 이르기까지 웹 접근성을 실제로 확보하는 데에는 많은 비용이 듭니다. Alopex UI의 모든 Component들은 웹 접근성을 준수하도록 준비되어 있기 때문에, 프로젝트의 고민을 줄여드립니다.

Web과 App에서 동시에 적용이 가능하려면, 클릭과 터치를 모두 인식할 수 있어야 합니다. 많은 RIA 제품들이 놓치고 있는 이 부분을 Alopex UI는 하나의 이벤트로 제공합니다. 따라서, Web이던 App이던, 데스크톱이던 모바일이던 고민할 필요 없이 동일한 로직으로 적용이 가능합니다.

 

 

NEXCORE Alopex UI 기능 상세

Alopex의 다양한 컨트롤과 그 기능들에 대해서는 http://ui.alopex.io를 참조하시면 더 많은 정보를 얻을 수 있습니다.

 

 Control Component

Alopex UI에서는 일반적으로 웹에서 사용되는 다양한 컨트롤들을 제공합니다. 이러한 컨트롤들은 HTML5 또는 그 이전 버전에서 제공하는 것과 유사하지만, 더 깔끔한 모양새를 기본적으로 제공하고, 일부 컨트롤에 대해서는 키보드 컨트롤이나 이벤트 등 HTML의 기본 컨트롤 보다 더 강력한 기능들을 추가로 제공하기도 합니다.

또한, 키보드로 직접 컨트롤 할 수 있는 기능 역시 제공함으로써, 일반적인 데스크톱 UI 구축시에 사용자 편의성을 제공합니다.

특히, 사용자 입력 값을 받는 component를 사용할 때에는 입력 값에 대한 검증기능을 제공하는 Validator Component를 활용하여 양식입력의 편의성을 돕는 등 기본적인 화면 구성에서부터 복잡한 값의 입력상황까지 UI 구축에 필수적인 기능을 모두 갖췄습니다.

 

 Layout Component

Alopex UI에서는 레이아웃을 만들 때 유용하게 사용될 수있는 Component들을 함께 제공합니다. 이러한 Component들은 실제 웹용 또는 모바일 애플리케이션이나 사이트를 구축할 때 널리 사용되는 것으로써 필수 요소입니다.

 

 Event

Alopex UI의 Event Model은 mouse 이벤트는 물론 touch 이벤트까지 포괄적 지원을 제공합니다. 따라서, 데스크톱은 물론 터치 기반의 기기에서도 동일한 속도와 실행효과를 보장하여, 사용자가 디바이스를 바꾸어가며 서비스를 사용하는 상황에서도 일관된 사용자 경험을 제공합니다.

이를 활용하면 모바일에서 많이 활용되는 Swipe 등의 효과를 구현할 수 있어 모바일에 익숙한 사용자들에게 최고의 사용감을 선사합니다.

 

 Theme

Alopex UI의 Component들의 디자인 요소를 표현하는 CSS는 기본적인 틀을 잡아주는 Core CSS와, 의도에 따라 외형을 바꿀 수 있도록 해주는 Theme CSS로 나눌 수 있습니다.

Theme CSS를 변경하는 것만으로 UI의 모양새를 바꿀 수 있으며, 사용자 Interaction이 있는 Component들에 대해서 hover, pressed 등의 이벤트 발생시에 추가적인 효과를 줄 수도 있습니다.

이에 대한 자세한 내용은 http://ui.alopex.io/theme/theme-index.html을 참조하시기 바랍니다.