화면 개발을 위한 몇가지 요소들.

 

화면개발을 위한 몇가지 요소들.

 

web application 에서는 backend 못지않게 frontend 도 중요하다.

아무리 성능이 좋아도 사용자를 위한 UI 가 시원찮다면 저평가를 받게 되어있다.

 

화면을 개발할때 ui frameworks, components 등의 용어들이 사용되는데 개발시에 여러 용어들을 정확하게 정의하지 않고 혼용되면서 구성원들 간에 혼란이 발생할 수 있는데 용어부터 정확하게 정리해본다.

 

 

 

UI Frameworks	JavaScript Frameworks	UI Components
Frontend Frameworks 와 같의 의미이다.   CSS 컨트롤이 필요하며 개발자보다는 디자이너나 퍼블리셔의 역량이 필요하다.   프로젝트 성격에 따라서 적절하게 customizing 해서 사용한다. 한번 적용하면 수정할 일이 거의 없다. 한개의 framework 만 사용하며 두개 이상을 혼용하는 일이 (거의) 없다.     Bootstrap Foundation Semantic UI UIKit	framework 종류별로 object 처리를 위한 성능이슈가 있을 수 있다. 개발을 위한 학습곡선이 필요하다. 두 개이상을 혼용하는 경우도 있다.(jQuery)     Angular React.js Vue.js Vanilla.js	화면에서 사용되는 Grid, Scheduler, Gantt 등의 컴포넌트이다. DHTMLX Kendo

 

 

 

개발 초기에 디자이너/퍼블리셔와 협의해야 할 사항은 UI Frameworks 의 선택이다.

디자인업체나 디자이너마다 주력으로 사용하는 UI Frameworks 가 있고 몇개의 UI Frameworks 중에서 프로젝트의 성격에 맞는 UI Frameworks 가 선택되면 일반적으로 디자이너가 2~3개의 시안을 만든 뒤 고객과의 협의를 통해서 그중 하나를 선택하게 된다.

이때 반응형이나 모바일 지원등의 협의도 같이 진행한다.

 

AA(Application Architect) 가 시스템 전체의 그림을 그리고 backend frameworks 를 결정하는데 일반적으로 한개의 frameworks 를 선택하면 그대로 사용하는 경우는 드물고, 프로젝트에 맞게 customizing 한다.

 

transaction 상황을 확인하고 database 를 분석하고 interface 해야 할 타 시스템들을 확인하고 기존에 daemon 으로 구동하던 job 들을 batch 로 다시 재구성하고 .... 이런 기본 항목들을 확인함과 동시에 data 를 화면에 어떻게 뿌려줄것인가에 대해서도 고민해야 한다.

front layer 와 service layer 가 data 를 주고받는 과정에서 javascript, ajax, jquery 등의 기술이 사용되는데 개발 효율을 위해서 backend 에 사용하는 framework 처럼 JavaScript Framework 을 도입한다.

 

화면에 뿌려지는 data 를 표현하는 컴포넌트를 직접 개발하기에는 시간과 비용이 많이 들기때문에 UI Components 를 구입하는 경우가 많은데 프로젝트 특징에 맞는 컴포넌트 라이센스를 구입해서 사용하는것이 좋다.

Kendo 나 DHTMLX 를 많이 사용한다.

 

Kendo 의 경우 라이센스 비용이 저렴한대신 도큐먼트가 부실한 편이지만 DHTMLX 는 도큐먼트가 잘 되어있어서 고객이나 제품에 맞춰서 customizing 하기에 좋다.

문의메일에 대한 답변도 빨라서 솔루션 개발이나 중요도가 높은 프로젝트에서는 DHTMLX 사용을 권하는 편이다.

(일반적으로 다음날 답변메일이 오는데 시차를 감안한다면 상당히 빠른 편이다.)

 

 

위의 내용을 정리해보자면, 

 

 

1. 테마, 디자인의 큰 그림을 잡고 UI Frameworks 를 선택한다.

 

2. backend 와 통신하면서 화면에 data 를 뿌려주는 기능을 할 JavaScript Frameworks 를 선택한다.

 

3. 화면에 data 를 표현 할 UI Compenents 를 선택한다.

 

 

의 순서로 진행하면 된다.