웹 그리드 이해

그리드의 의미
'그리드(Grid)'는 단어의 사전적 의미기 말해 주듯이 아래와 같은 격자무늬를 말합니다. 집안의 창문 모양에서도 볼 수 있고, 우리가 흔히 쓰는 엑셀(Excel) 프로그램과 워드(Word) / 파워포인트 (Powerpoint)의 '표' 와 같은 형태도 바로 이 그리드(Grid) 형태를 가지고 있습니다.

시스템 개발과 웹 그리드
그럼 이러한 그리드가 수많은 SI 시스템 개발과 기업의 업무 현장에서 어떠한 연관성이 있는지 보겠습니다. 어떠한 기업 또는 기관이건 주제와 상관없이 다양한 '목록 (List)'을 작성하고 관리합니다. 고객 리스트 / 환자 처방전 리스트 / 장비 리스트 등등이죠. 또한 이러한 다양한 업무 및 고객 서비스 시스템은 관계형 데이터베이스(Database)를 기반으로 해서 데이터의 생성과 조회 / 수정 / 삭제가 빈번하게 발생합니다.
이러한 데이터를 화면에 보여주도록 하고 PC의 엑셀처럼 각각의 데이터를 관리하기 위해 원하는 기능 (정렬 / 합계 등)을 수행할 수 있도록 해주는 UI 컴포넌트가 바로 그리드입니다. 그리고 업무 시스템 화면에서 엑셀의 화면 모습과 비슷한 그리드 화면 (표 / 리스트 등)을 보셨을 텐데 이러한 화면과 기능을 운영체제(OS) 뿐만 아니라 PC / Mobile에 비종속적인 환경으로 개발하기 위해 웹(브라우저)에서 동작하도록 만들어진 컴포넌트를 '웹 그리드 (Webgrid)'라고 합니다.
그렇다 보니 기능은 예전의 C/S (클라이언트서버 Client Server) 환경이나 Active-X 기반의 UI 솔루션에서 지원하여 사용하고 있는 수준 그대로 웹 환경에서도 유지되기를 희망하고 있습니다. 어떠한 말이냐 하면, 과거 Active-X 기반의 UI 솔루션 (기본적으로 그리드의 기능이 가장 핵심입니다)들은 웹 표준을 따르지 않고 그것을 만든 회사의 스펙에 따라 만들어지긴 했지만 그 기능들과 화면의 완성도는 굉장히 뛰어났습니다. 그런데 최근 몇 년 동안 HTML5로 대변되는 웹 표준의 이슈가 거세게 불어닥치면서 기능과 화면의 완성도는 과거와 같이 유지되면서 웹 표준 환경을 따라주기를 바라는 요구 사항이 많아진 것입니다. 그러한 대표적인 기능들은 아래와 같이 데이터의 표현과 이용에 적합한 기능들입니다.

● 칼럼(Column) 헤더 / 로우 (Row) 헤더
● 데이터의 변경 / 갱신 / 복사 / 붙여넣기 / 추출
● 행의 상하단 고정 / 스타일 관리
● 컬럼 타입 설정 / 고정 / 넓이
● CRUD (생성 / 읽기 / 갱신 / 삭제) 처리
● 엑셀 연동
● 페이지 네이션 (Pagenation)
● 그룹핑 (Grouping)
● 검색 / 정렬
● 이벤트 (행위와 상태)

웹 그리드 화면의 개발 방식
그리드 모양이 격자 형태여야 하고 기능에 대한 대체적인 합의가 있을 뿐 어떤 기술 (화면 정의, 데이터 정의, 로직 언어 등)을 사용해야 한다는 규정이 있는 것은 아닙니다. 그렇기 때문에 오픈 소스 (Open source) 기반의 그리드나 상용 그리드 모두 각자가 선택한 기술을 사용하여 개발하였습니다. 웹 표준을 준수한다는 의미는 범용 웹브라우저를 지원해야 한다는 것을 포함하고 있기 때문에 로직은 자바스크립트 (JavaScript)를 기반으로 개발되었으며, 가장 큰 차이는 그리드를 표현하는 화면 정의와 화면 처리입니다.

1. HTML Canvas tag 방식
화면을 Canvas 방식으로 그려주고, 그 안에서 발행하는 이벤트를 처리해 다시 그려주는 방식입니다. Canvas 특성상 그 안에 그려지는 화면은 HTML 코드로 표현되지 않아 웹브라우저가 제공하는 개발자 도구로 확인할 수 없습니다. 또한 특정한 로우(Row)를 선택했을 경우 해당 로우에 대해서만 HTML 화면 코드로 생성하여 보여줍니다. 이러다 보니 Canvas 방식의 경우, 그리드 디자인(스타일)을 프로그래머가 프로그래밍 방식처럼 작업을 해야 하고 쉽게 바꿀 수 없으며, 나머지 화면 영역인 웹 표준 스타일 정의인 CSS와 다른 체계로 관리하고 동작합니다. 웹브라우저에서 동작을 하지만, 일반적인 표현을 위한 태그로 동작하는 것이 아닌 그래픽 방식으로 처리되어, 엄격하게는 순수한 HTML 방식이라고 하기에는 무리가 있습니다.



위처럼 활성화되는 영역이 발생할 때 이 부분은 그래픽으로 처리할 수 없어서 Canvas 태그 하단에 동적으로 html 태그로 표현하는 방식으로 처리합니다. 위의 그림에서 입력하는 input element 하나가 Canvas 위에 그려지는 방식입니다. 즉, 화면을 렌더링하고 화면에 접근하고 처리하는 방식이 일반적인 웹 표준을 준수하고 있지 않은 구조입니다. 이벤트에 따라 Canvas의 그래픽을 처리할 것인지, html 태그를 처리할 것인지 결정되는 구조로, 화면에 대한 동작으로 프로그래머가 파악하기 어려운 구조입니다.

2. HTML Table tag 방식
격자와 동일한 모양이라 빠르게 그리드 솔루션을 개발할 수 있으며, 기본적인 기능 등을 Table의 처리로 활용할 수 있습니다. 그래서 많은 솔루션들이 이 방식으로 화면을 정의하고 있습니다. 그러나, 표현해야 할 컬럼과 로우 만큼의 화면을 그려야 하고, 보이지 않는 영역까지 처리하는 것이 부담이었습니다. 그래서 화면의 이동 처리가 빠르지 못한 점이 있습니다.




이렇게 눈에 보이지 않는 부분에 대하여 계속해서 처리해야 하고, 컬럼이 많아질수록 이 부분에 대한 부담이 매우 큰 화면 처리 기술을 사용합니다.

3. HTML Div tag 방식
Div tag를 하나의 셀(Cell)로 만들고, 이를 모아 컬럼과 로우로 만들어 격자 모양의 그리드를 표현하는 것으로, Table에 비해 표현의 자유도가 높고, 좌우 스크롤 시 테이블과 달리 보여지는 영역만 바뀌는 방식으로 위의 두 가지 방식보다 빠르게 화면의 이동 처리가 가능합니다. 웹 표준을 준수하면서 데이터 표현과 화면 스타일링, 빠른 화면 처리가 가능하도록 최근에 고안되었으며, 저희의 QCELL(큐셀) 또한 이 방식을 적용하고 있습니다.


지금까지의 내용을 전체적으로 정리하면 아래와 같습니다.

비교항목 Canvas tag 방식 Table tag 방식 Div tag 방식 의미
화면 소스 보기 <canvas width="705" height="300" tabindex="0" role="application" ...;">Your browser does not support HTML5 Canvas.</canvas> <table cellpadding="0" id="SBHE_DT_datagrid" ……. </table> <div class="rt-qc-root" id="root-qcell" style="width: 100%; height: 100%;">.....</div> 프로그래머나 디자이너가
화면 코드를 개발자 도구로
보면서 개발 및 스타일링을
할 수 있는지 여부
화면 스타일 프로그래밍 방식(예)
gridView.setStyles({
header: {
background: "#ffff0000" //헤더의 배경색을 빨간색으로
foreground: "#ff00ff00" //헤더의 글자색을 녹색으로
}
});
스타일을 적용하기 위해 CSS를 사용하지 않고 그리드 자체의 style을 사용합니다.
그러나 그리드의 일부 영역에서는 CSS를 사용하기도 합니다.
 CSS 방식(예)
.grid_span { /**Grid의 data를 표시하는 <span>에 적용하는 CSS 클래스*/
padding-left:2px;
padding-right:2px;
letter-spacing:normal;
}
.grid_cl_st { /*마지막 컬럼의 오른쪽 선을 표시하는 ColumnLine 영역의 스타일 CSS 클래스*/
background-color:#B2BAD2 !important;
width: 1px !important;
}		 CSS 방식(예)
/* 선택된 셀에 적용할 스타일 설정 */
.rt-qc-cell-select {
background-color: #c1c8e8 !important;
border-color: #a8b0d4 !important;
}
/* 포커스가 있는 셀에 적용할 스타일 설정 */
.rt-qc-cell-focus,
.rt-qc-cell-focus.rt-qc-cell-select {
font-weight:bold !important;
background-color: #ffffff !important;
border: 1px solid #6678bf !important;
}		 디자이너 및 퍼블리셔가 사용하기 편안한 느낌의 그리드를 디자인하고 스타일링 하기 쉬워야 하고 개발자 도구로 확인할 수 있는지 여부
화면 처리 속도 화면 코드 방식이 아닌 그래픽 프로그래밍 방식으로 사용자의 이벤트를 받아서 처리하고 그려주는 방식으로 빠른 구조 컬럼과 로우 데이터를 모두 화면에 그려주고 사용자 이벤트 시 처리하면서 다시 그려주는 방식이라서 컬럼이 많을 경우와 건수가 많아질수록 더 느려짐 캔버스 방식과 같이 보여주는 영역만 HTML 태그를 변경하면서 보여주므로 컬럼 수와 데이터 건수에 무관하게 처리 속도를 일관적으로 빠르게 유지(Virtual scroll) 할 수 있음 사용자가 이동(좌우, 상하) 시 버퍼링을 느끼지 않게 자연스레 이동하는지 여부
종합 의견 화면 처리 속도나 기능 부분을 그래픽 프로그래밍 방식으로 처리하여 기본적인 만족도는 있으나 웹 표준 기반의 개발 방식과는 거리가 있음 많은 솔루션과 오픈 소스가 이 방식을 사용하고 있지만 대량 컬럼과 로우에 대한 화면 처리에는 느릴 수 있는 기술적 배경을 가지고 있음 테이블 구조를 빌리지 않아 기본적 격자 구조와 동작을 위한 개발이 많이 되어야 하지만 웹 표준 기술로 성능과 기능을 모두 만족시킬 수 있음 어떤 제품이 웹 표준을 더 준수하고 표준 기반으로 향후 발전 가능성이 있는지 여부

지금까지 웹 그리드(Webgrid)가 무엇인지, 개발 방식은 어떠한 것들이 있는지 살펴보았습니다.
물론, 위의 내용에 대해서는 이견이 있을 수는 있습니다만 저희 라잇텍이 생각하고 있는 것들에 대한 내용을 정리했다라고 봐주시면 되겠습니다.