안녕하세요 라잇텍입니다.
지난번 스토리에서는 웹 그리드가 무엇인지에 대한 간략한 소개를 드린 바 있습니다.
이번 스토리에서는 그러한 웹 그리드가 어떻게 활용하면 좋을지, 그리고 어느 정도까지 활용이 가능한지에 대해 살펴보도록 하겠습니다.
우선, 그리드는 격자 모양의 구조에 표현하고자 하는 데이터를 시스템 이용자에게 시각적으로 보여주는 UI 컴포넌트 (Component)라고 설명을 드렸습니다. 웹에서 그리드를 표현하기 위해 만들어졌다는 뜻으로 '웹 그리드(Web grid)'라는 말로 좀 더 세부적으로 표현하고 있습니다.
따라서, 표현하려는 데이터의 내용과 양, 구조, 그리고 사용자에게 제공하는 웹 그리드 솔루션의 기능에 따라 그리드를 활용하는 형태는 다르며, 그 모습도 매우 다르게 개발됩니다. 궁극적으로 이러한 요건을 지원하는 웹 그리드는 많은 웹 프로젝트 (또는 SI 프로젝트)에서 보편적으로 사용되고 있습니다.
이에 대한 주요 사례를 들어보도록 하겠습니다.
정렬, 필터링, 검색 등 기본적인 다양한 기능
'그리드를 사용해야 하는 필요성'이라고 할 수 있으며, 대부분의 웹 그리드 솔루션 제품들이 공통적으로 지원하는 영역이기도 합니다.
- 정렬
- 필터링
- 검색
- 컬럼 이동
- 틀 고정
- 머지 (merge, 병합)
다양한 표현과 다국어 지원
화면에 시각적으로 표현될 수 있는 '데이터'의 종류에는 숫자, 날짜와 같이 텍스트로 표현되는 것 뿐만 아니라, 이미지 등도 함께 포함됩니다. 이러한 데이터를 한꺼번에 관리하려면 그러한 방식으로 표현될 수 있도록 선택하여 표현합니다.
그리고, 기업이나 기관이 보유하고 있는 데이터는 한국어 뿐만 아니라 영어 / 일어 / 중국어 / 아랍어 등 다양한 언어로 되어 있을 수도 있어서 그에 따라 데이터가 표현되어야 합니다.
[ 다양한 언어 / 숫자 / 이미지로 표현된 그리드 화면 예시]
자세한 동적 스타일링과 테마
같은 데이터라도 상황과 조건에 따라 스타일을 다르게 적용하여 이용자를 위한 가독성을 높여주는 것이 중요합니다. 또한 웹사이트 또는 블로그 등의 '디자인 테마'처럼 그리드에 대한 테마를 만들어 적용할 수 있으며, 자주 사용될 수 있는 테마를 별도로 제공하기도 합니다. 물론 그러한 테마는 꼭 제공되는 것을 써야만 하는 것은 아니고 시스템 개발 시에 웹디자이너 등을 통해 쉽게 개발하여 적용할 수도 있습니다.
데이터 그룹핑(Grouping)으로 편리한 활용
동일한 구조의 데이터를 편리하게 활용하기 위해 컬럼의 내용으로 그룹핑(Grouping)이 필요한 경우가 있고, 그 해당 그룹핑을 동적으로 바꿀 수 있기를 원하는 경우가 있습니다.
예를 들어, 강원도 지역 내의 행정구역을 그룹핑해서 보다가 강원도 주민들의 연령대별로 데이터를 그룹핑하여 조회할 수 있다는 겁니다. 그리고 이를 이용자가 동적으로 그룹핑을 조작(선택) 할 수 있어서, 각 이용자가 원하는 관점에서 편리하게 데이터를 조회하고 활용할 수 있습니다.
[강원도 지역의 공유림을 그룹핑한 사례]
[월별 12세 이하 연령대의 데이터 조회 사례]
대량 데이터에 대한 부담 없는 페이지네이션 (pagenation)
대부분의 기업 / 기관들은 어떠한 종류 (고객 정보 / 제품의 판매량 등)든 대량의 데이터를 보유하고 있으며, 이를 활용해 업무에 활용하거나 서비스 이용자에게 제공하기를 원합니다. 그런데 데이터양이 적다면 엑셀을 활용해도 되지만, 10만 건 100만 건 이상의 데이터를 엑셀로 처리하기에는 시간도 오래 걸릴뿐더러 PC에 부담을 주기 때문에 굉장한 답답함을 호소할 수밖에 없고, 더군다나 웹으로 제공하려면 해당 담당자는 두려움을 느끼기도 합니다.
그러한 문제를 해결할 수 있는 방법의 중심에 바로 웹 그리드가 있습니다.
물론 웹그리드라고 해서 무조건적으로, 모든 제품이 다 빠르다는 것은 아니라서 웹 그리드 제품을 선택할 때의 중요한 기준 요소 중 하나가 바로 빠른 데이터 조회 처리 속도에 대한 성능이 보장되는 제품을 찾아 선택되고 있습니다.
또한, 빠른 성능을 보여주기는 하지만, 더욱더 속도에 대한 부담을 줄이기 위해 사용되는 방법이 페이징(Paging) 방식으로 대량의 데이터를 표현합니다. 물론 이때에도 많은 경우에 사용자에 따라 화면에 한 번에 보여줄 데이터의 건수 (100건, 1,000건 등) 등을 자유롭게 조절하기를 원하고 있어서 아래 이미지에서 보실 수 있듯이 그리드 데이터 화면 하단에 페이지 넘버가 보이고 해당 넘버를 클릭하거나 화살표 클릭을 통해 데이터를 조회할 수 있습니다.
[대량 데이터의 페이지네이션 사례]
셀 내 렌더링(Rendering)
일반적으로 그리드의 데이터는 문자열과 숫자로 구성되어 있습니다. 보여줄 데이터의 내용에 따라 차트와 같은 시각화를 통해 보여주는 것이 더 좋을 때가 있습니다. 그러한 때 쓰이는 것이 셀 내 렌더링이며 이것을 통해 그래픽 방식으로 보여줄 때 데이터를 보다 직관적으로 이해하고 활용하는 데에 도움이 됩니다.
[셀 내 렌더링 사례]
엑셀 연동을 통한 편리한 데이터 활용
웹 그리드는 원하는 조건에 맞는 데이터를 조회하여 보거나 조회된 결과를 가지고 데이터의 추가 / 삭제 / 수정하는 등의 작업을 하는데 사용합니다. 그런데 많은 분들은 이러한 일을 하는 데에 '엑셀(Excel)'을 주로 사용합니다. 그렇기 때문에 웹에 있는 데이터를 다시 엑셀 파일로 PC에 저장해 활용하기를 희망하고, 그 반대로 엑셀 파일에 정리된 데이터를 그리드에 업로드하여 데이터베이스에 저장하기도 합니다. 웹 그리드 솔루션은 이러한 경우를 모두 지원합니다.
[웹 그리드의 엑셀 연동 사례: 화면 상단에 엑셀 파일을 불러오거나 저장할 수 있는 버튼이 있습니다]
여러 그리드를 활용
웹 그리드의 장점 중 하나는 하나 이상의 그리드를 한 화면에서 사용함으로써 사용자가 원하는 서비스를 만들 수 있다는 점입니다. 그 대표적인 것이 그리드 간의 데이터 이동, 마스터 / 디테일입니다.
아래 화면처럼 좌측 그리드(주문 단가 정보)에서 제품을 선택하고 가운데에 표시된 제품의 수량을 선택하면 우측 그리드 (주문 내역)로 해당 내역의 데이터가 이동하여 표시되는 걸 보실 수 있습니다.
[그리드 간의 데이터 이동 사례]
다양한 유/무료 컴포넌트와 오픈소스 활용
많은 웹 프로젝트를 보다 보면, 셀 내에 다양한 표현을 위해 웹 표준 기반의 다양한 컴포넌트와 오픈소스를 사용해서 기능을 확장하기를 원하는 경우가 있습니다. 이때에는 웹 그리드 솔루션은 웹 표준을 준수하고 있기 때문에 확장성과 개방성을 가지고 있어야만 이러한 요구 사항을 수용할 수 있습니다.
가장 흔한 형태가 jQuety / Bootstrap과 같은 UI Framework와의 연동, 전자정부에서 언급하고 있는 컴포넌트 중 그리드 내 활용 또는 연동 등이 있습니다.
[jQuery 연동 사례]
반응형 웹 그리드
웹에 조금이라도 관심이 있으시다면 '반응형 웹'이라는 용어를 많이 들어보셨을 겁니다. 사용자가 이용하는 단말기에 따라 최적의 화면으로 서비스를 할 수 있는 웹을 말합니다. PC / 태블릿 / 스마트폰 (가로, 세로)에 따라 한화면에 보여주는 컬럼과 데이터 수를 달리하거나 그 표현을 달리하여 이용자의 편의와 정보 활용을 극대화할 때에도 웹 그리드가 사용됩니다.
1. PC / 노트북: 가로 해상도가 큼
2. 태블릿 (아이패드, 갤럭시탭 등): 가로 해상도 '중간'
3. 스마트폰: 가로 해상도 '낮음' (세로형)
지금까지 설명해드린 것과 같이 웹 그리드를 활용하는 방법과 형태는 매우 다양합니다. 라잇텍의 큐셀(QCELL)은 웹 그리드를 충분히 원하는 대로 활용하실 수 있도록 데모((http://support.qcell.kr)를 제공하고 있습니다. 또한 맞춤형 샘플 제작지원 서비스를 제공하고 있는 만큼 웹 그리드를 도입하시고 활용하시는데에 있어서 큰 도움이 될 수 있도록 하고 있으니 많은 관심을 부탁드립니다. 다음 스토리에는 새로운 내용으로 찾아뵙겠습니다.
작성자: 곽노건 이사/동국대학교 국제정보보호대학원 겸임교수
소프트웨어공학, (보안)개발 방법론, 웹 개발(프로그래밍), 빅데이터처리, 악성 코드 및 역공학 등 강의
IT 관련 컨설팅, 특강을 원하시는 경우 문의해 주십시오.(james@righttech.co.kr)
안녕하세요 라잇텍입니다.
지난번 스토리에서는 웹 그리드가 무엇인지에 대한 간략한 소개를 드린 바 있습니다.
이번 스토리에서는 그러한 웹 그리드가 어떻게 활용하면 좋을지, 그리고 어느 정도까지 활용이 가능한지에 대해 살펴보도록 하겠습니다.
우선, 그리드는 격자 모양의 구조에 표현하고자 하는 데이터를 시스템 이용자에게 시각적으로 보여주는 UI 컴포넌트 (Component)라고 설명을 드렸습니다. 웹에서 그리드를 표현하기 위해 만들어졌다는 뜻으로 '웹 그리드(Web grid)'라는 말로 좀 더 세부적으로 표현하고 있습니다.
따라서, 표현하려는 데이터의 내용과 양, 구조, 그리고 사용자에게 제공하는 웹 그리드 솔루션의 기능에 따라 그리드를 활용하는 형태는 다르며, 그 모습도 매우 다르게 개발됩니다. 궁극적으로 이러한 요건을 지원하는 웹 그리드는 많은 웹 프로젝트 (또는 SI 프로젝트)에서 보편적으로 사용되고 있습니다.
이에 대한 주요 사례를 들어보도록 하겠습니다.
정렬, 필터링, 검색 등 기본적인 다양한 기능
'그리드를 사용해야 하는 필요성'이라고 할 수 있으며, 대부분의 웹 그리드 솔루션 제품들이 공통적으로 지원하는 영역이기도 합니다.
다양한 표현과 다국어 지원
화면에 시각적으로 표현될 수 있는 '데이터'의 종류에는 숫자, 날짜와 같이 텍스트로 표현되는 것 뿐만 아니라, 이미지 등도 함께 포함됩니다. 이러한 데이터를 한꺼번에 관리하려면 그러한 방식으로 표현될 수 있도록 선택하여 표현합니다.
그리고, 기업이나 기관이 보유하고 있는 데이터는 한국어 뿐만 아니라 영어 / 일어 / 중국어 / 아랍어 등 다양한 언어로 되어 있을 수도 있어서 그에 따라 데이터가 표현되어야 합니다.
[ 다양한 언어 / 숫자 / 이미지로 표현된 그리드 화면 예시]
자세한 동적 스타일링과 테마
같은 데이터라도 상황과 조건에 따라 스타일을 다르게 적용하여 이용자를 위한 가독성을 높여주는 것이 중요합니다. 또한 웹사이트 또는 블로그 등의 '디자인 테마'처럼 그리드에 대한 테마를 만들어 적용할 수 있으며, 자주 사용될 수 있는 테마를 별도로 제공하기도 합니다. 물론 그러한 테마는 꼭 제공되는 것을 써야만 하는 것은 아니고 시스템 개발 시에 웹디자이너 등을 통해 쉽게 개발하여 적용할 수도 있습니다.
데이터 그룹핑(Grouping)으로 편리한 활용
동일한 구조의 데이터를 편리하게 활용하기 위해 컬럼의 내용으로 그룹핑(Grouping)이 필요한 경우가 있고, 그 해당 그룹핑을 동적으로 바꿀 수 있기를 원하는 경우가 있습니다.
예를 들어, 강원도 지역 내의 행정구역을 그룹핑해서 보다가 강원도 주민들의 연령대별로 데이터를 그룹핑하여 조회할 수 있다는 겁니다. 그리고 이를 이용자가 동적으로 그룹핑을 조작(선택) 할 수 있어서, 각 이용자가 원하는 관점에서 편리하게 데이터를 조회하고 활용할 수 있습니다.
[강원도 지역의 공유림을 그룹핑한 사례]
[월별 12세 이하 연령대의 데이터 조회 사례]
대량 데이터에 대한 부담 없는 페이지네이션 (pagenation)
대부분의 기업 / 기관들은 어떠한 종류 (고객 정보 / 제품의 판매량 등)든 대량의 데이터를 보유하고 있으며, 이를 활용해 업무에 활용하거나 서비스 이용자에게 제공하기를 원합니다. 그런데 데이터양이 적다면 엑셀을 활용해도 되지만, 10만 건 100만 건 이상의 데이터를 엑셀로 처리하기에는 시간도 오래 걸릴뿐더러 PC에 부담을 주기 때문에 굉장한 답답함을 호소할 수밖에 없고, 더군다나 웹으로 제공하려면 해당 담당자는 두려움을 느끼기도 합니다.
그러한 문제를 해결할 수 있는 방법의 중심에 바로 웹 그리드가 있습니다.
물론 웹그리드라고 해서 무조건적으로, 모든 제품이 다 빠르다는 것은 아니라서 웹 그리드 제품을 선택할 때의 중요한 기준 요소 중 하나가 바로 빠른 데이터 조회 처리 속도에 대한 성능이 보장되는 제품을 찾아 선택되고 있습니다.
또한, 빠른 성능을 보여주기는 하지만, 더욱더 속도에 대한 부담을 줄이기 위해 사용되는 방법이 페이징(Paging) 방식으로 대량의 데이터를 표현합니다. 물론 이때에도 많은 경우에 사용자에 따라 화면에 한 번에 보여줄 데이터의 건수 (100건, 1,000건 등) 등을 자유롭게 조절하기를 원하고 있어서 아래 이미지에서 보실 수 있듯이 그리드 데이터 화면 하단에 페이지 넘버가 보이고 해당 넘버를 클릭하거나 화살표 클릭을 통해 데이터를 조회할 수 있습니다.
[대량 데이터의 페이지네이션 사례]
셀 내 렌더링(Rendering)
일반적으로 그리드의 데이터는 문자열과 숫자로 구성되어 있습니다. 보여줄 데이터의 내용에 따라 차트와 같은 시각화를 통해 보여주는 것이 더 좋을 때가 있습니다. 그러한 때 쓰이는 것이 셀 내 렌더링이며 이것을 통해 그래픽 방식으로 보여줄 때 데이터를 보다 직관적으로 이해하고 활용하는 데에 도움이 됩니다.
[셀 내 렌더링 사례]
엑셀 연동을 통한 편리한 데이터 활용
웹 그리드는 원하는 조건에 맞는 데이터를 조회하여 보거나 조회된 결과를 가지고 데이터의 추가 / 삭제 / 수정하는 등의 작업을 하는데 사용합니다. 그런데 많은 분들은 이러한 일을 하는 데에 '엑셀(Excel)'을 주로 사용합니다. 그렇기 때문에 웹에 있는 데이터를 다시 엑셀 파일로 PC에 저장해 활용하기를 희망하고, 그 반대로 엑셀 파일에 정리된 데이터를 그리드에 업로드하여 데이터베이스에 저장하기도 합니다. 웹 그리드 솔루션은 이러한 경우를 모두 지원합니다.
[웹 그리드의 엑셀 연동 사례: 화면 상단에 엑셀 파일을 불러오거나 저장할 수 있는 버튼이 있습니다]
여러 그리드를 활용
웹 그리드의 장점 중 하나는 하나 이상의 그리드를 한 화면에서 사용함으로써 사용자가 원하는 서비스를 만들 수 있다는 점입니다. 그 대표적인 것이 그리드 간의 데이터 이동, 마스터 / 디테일입니다.
아래 화면처럼 좌측 그리드(주문 단가 정보)에서 제품을 선택하고 가운데에 표시된 제품의 수량을 선택하면 우측 그리드 (주문 내역)로 해당 내역의 데이터가 이동하여 표시되는 걸 보실 수 있습니다.
[그리드 간의 데이터 이동 사례]
다양한 유/무료 컴포넌트와 오픈소스 활용
많은 웹 프로젝트를 보다 보면, 셀 내에 다양한 표현을 위해 웹 표준 기반의 다양한 컴포넌트와 오픈소스를 사용해서 기능을 확장하기를 원하는 경우가 있습니다. 이때에는 웹 그리드 솔루션은 웹 표준을 준수하고 있기 때문에 확장성과 개방성을 가지고 있어야만 이러한 요구 사항을 수용할 수 있습니다.
가장 흔한 형태가 jQuety / Bootstrap과 같은 UI Framework와의 연동, 전자정부에서 언급하고 있는 컴포넌트 중 그리드 내 활용 또는 연동 등이 있습니다.
[jQuery 연동 사례]
반응형 웹 그리드
웹에 조금이라도 관심이 있으시다면 '반응형 웹'이라는 용어를 많이 들어보셨을 겁니다. 사용자가 이용하는 단말기에 따라 최적의 화면으로 서비스를 할 수 있는 웹을 말합니다. PC / 태블릿 / 스마트폰 (가로, 세로)에 따라 한화면에 보여주는 컬럼과 데이터 수를 달리하거나 그 표현을 달리하여 이용자의 편의와 정보 활용을 극대화할 때에도 웹 그리드가 사용됩니다.
1. PC / 노트북: 가로 해상도가 큼
2. 태블릿 (아이패드, 갤럭시탭 등): 가로 해상도 '중간'
3. 스마트폰: 가로 해상도 '낮음' (세로형)
지금까지 설명해드린 것과 같이 웹 그리드를 활용하는 방법과 형태는 매우 다양합니다. 라잇텍의 큐셀(QCELL)은 웹 그리드를 충분히 원하는 대로 활용하실 수 있도록 데모((http://support.qcell.kr)를 제공하고 있습니다. 또한 맞춤형 샘플 제작지원 서비스를 제공하고 있는 만큼 웹 그리드를 도입하시고 활용하시는데에 있어서 큰 도움이 될 수 있도록 하고 있으니 많은 관심을 부탁드립니다. 다음 스토리에는 새로운 내용으로 찾아뵙겠습니다.
작성자: 곽노건 이사/동국대학교 국제정보보호대학원 겸임교수
소프트웨어공학, (보안)개발 방법론, 웹 개발(프로그래밍), 빅데이터처리, 악성 코드 및 역공학 등 강의
IT 관련 컨설팅, 특강을 원하시는 경우 문의해 주십시오.(james@righttech.co.kr)