웹 UI 툴과 UI 컴포넌트는 왜 필요할까?

라잇텍
조회수 9537

웹은 모든 웹 브라우저가 동일하게 보여주고 반응하는 표준이라서 html5, css, javascript 표준 스펙을 사용하여 충분히 개발할 수 있어야 합니다. 하지만 여러분들도 잘 아시듯이 우리의 현실은 그렇지 않습니다. 

불가능한 것은 아니나 필요한 것을 모두 개발하기엔 시간도 턱없이 부족하고 대부분이 업무에 관련되지 않는 화면의 동작에 관련된 부분이기에 전문 분야도 아니기 때문에 그 결과 또한 장담할 수 없습니다.

[웹 개발의 표준 스펙(spec)]


그래서 새로운 웹 프로젝트 개발에 참여(흔히 투입되었다)하게 되었을 때 대부분의 프로젝트가 그렇듯 화면의 난이도와 복잡도 파악이 우선입니다.

이미 개발해야 할 대상 업무나 서비스는 정해져 있고 제안 요청서를 통해 고객이 요구 사항을 명확하게 정했고, 제안 과정에서 충분히 파악했지만 이에 대한 표현과 처리를 위한 화면 동작은 개발 환경(UI 개발 프레임워크)과 사용하는 UI 컴포넌트에 따라 표현과 기능을 제공하지 못할 수도 있고, 또는 우회하여 처리해야 하는 경우가 많아서 이 과정에서 웹 프런트엔드 개발자는 굉장히 많은 고생과 노력을 합니다.


UI 툴과 컴포넌트에 의존하지 않고, 내가 모든 걸 개발할 수 있을까?



웹 UI 툴이나 컴포넌트가 왜 필요한지를 알기 위해서는 먼저 '웹 프런트엔드 개발'과 '개발자'가 하는 일, 필요한 역량을 알면 이해가 빠를 것 같습니다.


웹 프런트엔드는 웹에서 동작하는 UI(User Interface) 부분을 말하며, 사용자가 눈으로 보고 인식하고 직접 다양하게 사용하는 영역입니다. 


초창기 웹 환경에서 프런트엔드는 이미지나 와이어 프레임 등을 이용해 웹 페이지를 그리거나 만들고, 콘텐츠를 정의하기 위해 HTML과 CSS를 작성하는 수준이었습니다. 그래서 업무 시스템을 웹으로 개발할 수 없었고 웹에서 동작하지만 Active-X나 플렉스 등 전용 동작 환경으로 개발하여 사용되어 왔습니다.  하지만 HTML5, CSS3, JavaScript가 제공하는 수준이 높아지면서 순수 웹으로 시스템을 개발하기 시작하였습니다. 그리고 최근 프런트엔드는 UX(사용자 경험)를 고려해 디자인하고 프런트 개발을 위한 정의부터 웹 표준, 웹 콘텐츠 접근성, 다양한 디바이스를 고려할 뿐만 아니라, 보안 측면 대응까지 개발될 웹 프런트단(웹 브라우저)의 다양한 요구를 만족해 주어야 합니다. 그래서 최신 트렌드에 맞게 웹 프런트엔드를 개발하기 위해 전문 개발자 필요하고 이들의 역량에 따라 동일한 업무와 서비스를 지원하지만 사용자가 만족하는 정도는 매우 달라지게 됩니다. 여기까지 웹 프런트엔드 개발의 중요성을 이해하는 데 도움이 될 것 같아 길게 설명을 드렸습니다.


다시 본론으로 돌아와서, 웹 프런트엔드를 개발하기 위해서는 다양한 기술이 필요합니다. 개발의 영역은 레이아웃과 아키텍처, 테마와 스타일, 서버 통신과 프로토콜,  UI 컴포넌트, 비즈니스 로직과 플로우 등이며 목표는 웹 표준을 준수하며 사용성, 성능, 안정성과 보안성이 높게 개발하는 것입니다. 물론 개발 기간 안에 프로젝트 수익성을 유지하면서 말입니다. (ㅠ.ㅠ)

[웹 프런트 개발자에게 필요한 전문성 (출처: 마이크로소프트웨어 339호)]


여기에 모두 관여되는 것이 UI 개발입니다. 즉, 사용성 / 성능 / 안정성 / 보안성을 제공하면서 화면을 개발해야 하는데 이 부분을 보장해 줄 수 있는 UI 개발도구나 UI 컴포넌트가 필요하게 됩니다. 지금까지는 다양한 UI 컴포넌트도 없었고, 어떤 것이 좋은지 파악하기도 어렵고해서 통합 UI 개발도구를 많이 사용해 왔습니다. 그렇지만 아래와 같은 이유로 개발자나 프로젝트팀에서 도입을 주저하거나 포기하기도 했습니다.


  • 기존 웹 개발 방식과 달라서 익숙하지 않다.
  • 대부분 유료인데다가 많이 비싸다.
  • 충분히 사용하기 위해서는 열심히 배워야 한다.
  • 종속적인 개발 환경과 기술 지원을 지속적으로 받아야 한다.


전문화된 UI 컴포넌트 솔루션 활용 증대


그런 와중에 최근 몇 년 사이에 그리드(grid)와 차트(chart)를 시작으로, 해당 분야에 전문화된 UI 컴포넌트가 솔루션으로 출시되기 시작했습니다. 그래서 개발팀의 개발 환경과 프레임워크를 사용하면서 꼭 필요한 컴포넌트를 검토하여 사용하고 있는 추세이기도 합니다.


국내에서 많은 프로젝트에 사용되는 컴포넌트의 영역은 아래 보시는 것처럼 그리드 / 차트 / 캘린더 / 대시보드 / 탭 / 업로드 등과 같이 다양합니다.

[다양한 컴포넌트 예시]


개발자가 개발해야 할 화면의 표현과 상호작용(사용자를 위한 기능)을 제공하기 위해 업무에 대한 이해와 무관하게 UI의 다양한 세부 기능과 동작을 구현해야 하는 시간을 줄여주며, 신뢰할 수 있는 품질과 완성도를 제공하는 것이 컴포넌트 솔루션의 목표 입니다. 그래서 제품에 따라 다르지만 전문화된 웹 UI 컴포넌트 솔루션이 제공하는 표현력과 기능이 웹 UI 개발 툴에서 제공하는 각각의 UI 컴포넌트에 비해 좋다는 것이 일반적인 시장의 평가입니다.


[큐셀(QCELL) 그리드의 스펙과 지원하는 기능표]


웹 개발의 경험과 다양한 기술 축적이 이루어져, 최근에는 프로젝트의 내용과 서비스를 검토해 최적의 전문 UI 컴포넌트나 오픈소스 등을 찾아 프로젝트에 적용하는 '레고형 개발'이 트렌드로 자리 잡고 있습니다. 이렇게 진행할 경우, 외부 솔루션이나 기술에 대한 의존도를 낮추면서 최적의 표현과 기능을 사용자에게 제공할 수 있기 때문입니다.


최적의 도구만 존재한다.


마지막으로 드리고 싶은 말씀은 '최고의 UI 개발 툴이나 컴포넌트는 존재하지 않는다. 최적만 존재한다' 라는 말입니다.


  • 모든 것을 제공할 것 같은 제품은 복잡하고, 무겁고, 비싸며 배울 것이 많고, 충분히 활용하기 위해 많은 노력을 기울여야 합니다.
  • 저렴한 것은, 많은 특징과 기능이 없을 것 같다고 생각하는데, 업계가 요구하는 기본은 대부분 충실하게 지원하고 있으며, 사용하기 위해 로딩할 라이브러리가 작고, 복잡하지 않아 빠른 것이 일반적입니다.


이러한 내용을 가지고 다음 스토리에서는 '우리 프로젝트에 접합한 UI 개발도구 또는 컴포넌트를 찾기'라는 주제로 찾아뵙겠습니다.


작성자: 곽노건 이사/동국대학교 국제정보보호대학원 겸임교수

소프트웨어공학, (보안)개발 방법론, 웹 개발(프로그래밍), 빅데이터처리, 악성 코드 및 역공학 등 강의

IT 관련 컨설팅, 특강을 원하시는 경우 문의해 주십시오.(james@righttech.co.kr)