다음 시나리오에 대해 생각해 보겠습니다. 여러분의 회사에서는 보고서에 재무 추세 분석 내용을 표시해야 합니다. 여러 제품 간 수량 비교를 표시하거나 특정 직원에게 지급되는 급여를 나열해야 할 수 있습니다. 이러한 각 시나리오에서 데이터를 표시하려면 표 또는 표와 같은 구조가 필요합니다.

HTML 표 사용은 표를 구성하고 표시하는 가장 쉬운 방법입니다. 그러나 HTML 표 코드는 크기가 커지면서 빠르게 무질서해질 수 있고 종종 적절하게 유지하기 어렵거나 불가능할 수 있습니다. 또한 HTML 표는 크기가 커짐에 따라 웹페이지에서 반응성이 떨어지고 너무 많이 스크롤해야 할 수 있습니다. 또한 브라우저에서는 대부분 HTML 표를 증분 방식으로 로드할 수 없으므로 페이지 렌더링 속도가 떨어집니다.

HTML 표는 작고 간단한 데이터를 표시하는 경우 적절합니다. 그러나 사용자 정의 셀을 정렬, 필터링, 추가하고 이미지를 삽입할 수 있는 기능을 추가하기 위해 표를 대화형으로 만들려면 데이터 그리드가 훨씬 더 나은 옵션입니다.

GrapeCity는 사용자의 요구 사항에 맞춰 선택할 수 있도록 많은 유형의 데이터 그리드를 제공합니다. 이 문서에서는 데이터 그리드란 무엇인지 살펴보고 데이터 그리드를 선택할 때 중요한 몇 가지 고려 사항에 대해 살펴봅니다.

데이터 그리드란?

데이터 그리드는 로컬 또는 원격 데이터 소스에서 데이터를 가져와 그리드에 배열하도록 하는 JavaScript UI 컴포넌트입니다. 또한 데이터 그리드를 사용하면 정렬, 필터링, 페이징 및 스크롤과 같이 데이터 또는 데이터 표시 속성을 조작하는 기능을 추가할 수 있습니다.

데이터 그리드와 HTML 표는 서로 비슷해 보이지만 구조적으로 다르고 기능 측면에서는 더 복잡합니다. 데이터 그리드와 HTML 표 간의 주된 차이점은 데이터 그리드의 데이터에는 상호 작용을 추가할 수 있다는 점인데, 이 작업은 지루할 뿐만 아니라 HTML 표에서는 불가능한 경우도 있습니다.

데이터 그리드에는 HTML 표에 비해 다음과 같은 이점이 있습니다.

• 데이터 그리드는 뛰어난 성능을 발휘하도록 최적화되어 있습니다. 반응성이 매우 뛰어나고 성능 저하 없이 많은 양의 데이터를 처리할 수 있습니다.

• 셀 병합, 시작 크기 조정, 셀 고정 등 Excel에서 볼 수 있는 일반적인 기능의 많은 부분을 구현하는 것을 비롯하여 사양에 맞춰 데이터 그리드 셀을 사용자 정의할 수 있습니다.

• 또한 그리드에서 바로 데이터를 생성, 업데이트 및 삭제할 수 있는 기능을 제공하여 데이터 그리드를 편집 가능하도록 만들 수 있습니다.

• 일반적으로 화면 판독기 친화적이므로 시각 장애인이 보다 쉽게 접근할 수 있습니다.

• 데이터 그리드는 사용자 인터페이스를 데이터 레이어에서 분리합니다. 데이터를 가져와 처리하는 방법은 인터페이스에 데이터가 표시되는 방법과 구분됩니다. 따라서 작업량을 최소한으로 줄이면서 데이터를 다양한 방법으로 표시할 수 있습니다. 이러한 방식으로 레이어를 분리하면 코드를 더 쉽게 유지 관리할 수 있습니다. 또한 데이터 레이어가 UI와 분리되어 있기 때문에 더 빠르고 효율적인 검색을 구현하여 사용자 인터페이스가 더 민첩하게 반응한다는 느낌을 받을 수 있습니다.

• 데이터 그리드 템플릿이 작성된 프레임워크와 상관없이 여러 템플릿에서 데이터를 재사용할 수 있습니다.

직접 데이터 그리드를 구현하시겠어요? 아니면 데이터 그리드 라이브러리를 사용하시겠어요?

데이터 그리드가 HTML 표보다 나은 옵션임을 알고 있으므로 다음 질문은 데이터 그리드를 직접 구현할 것인지 아니면 데이터 그리드 라이브러리를 사용할 것인지입니다.

모두가 동의하는 모범 사례는 시간과 노력을 들여 사용자 정의 데이터 그리드를 직접 만드는 것보다 사용자 정의 가능한 기존 데이터 그리드 라이브러리를 사용하는 것입니다. 시간을 낭비할 필요가 없습니다.

데이터 그리드는 매우 빠른 속도로 엄청나게 복잡해질 수 있습니다. 페이지, 정렬, 필터링과 같은 기능을 추가 및 구현하려면 많은 코드를 작성해야 하고 많은 부분은 처음에 보이는 것보다 훨씬 더 복잡합니다. 날짜 선택기, 버튼, 정렬, 페이징, 링크 등의 기능과 Excel 기능을 기반으로 한 기타 많은 기능은 그 자체로 전체 컴포넌트가 되었습니다.

일부는 엄청 간단해 보이지만 생각한 것보다 더 많은 코딩이 필요하다는 것을 알면 놀라실 수 있습니다. 처음에 간단한 컴포넌트처럼 보이는 날짜 선택기를 구현하려면 극단적인 경우 발생하는 문제를 잡아내기 위해 철저한 테스트가 필요합니다.

그리드에 일반적인 요소를 많이 추가하기 시작하면 일반적인 유지 관리가 복잡해질 수 있습니다. 이러한 기능을 올바르게 작성하려면 많은 외부 라이브러리와 함수를 추가해야 하는데, 그러다 보면 앞으로 유지 관리해야 하는 종속성이 늘어날 수 있습니다.

포괄적인 기능 집합을 갖춘 그리드는 각각 자체 라이브러리와 종속성을 사용하는 여러 UI 컴포넌트 컬렉션입니다. 다양한 함수 및 라이브러리 컬렉션을 유지 관리하는 일은 매우 어려울 수 있습니다.

데이터 그리드의 기능이 늘어남에 따라 성능 역시 중요한 요인이 됩니다. 잘못 최적화된 데이터 그리드는 연결이 끊겼다는 생각이 들 정도로 응용 프로그램의 속도를 저하시킬 수 있습니다. 극단적인 경우 HTML 표의 성능을 개선하지 못할 수 있습니다.

접근성 규정 준수는 우리가 간과할 수 있는 또 다른 개발 차원입니다. 표준을 준수하지 못하면 빠른 속도로 유지 관리가 어려워질 수 있습니다. 최신 웹 표준을 계속 준수하려면 데이터 그리드의 모든 UI 컴포넌트와 기능을 업데이트하는 것을 포함하여 코드를 광범위하게 리팩터링해야 할 수도 있습니다.

완전히 최적화되고 풍부한 기능을 갖춘 데이터 그리드를 구현하는 것은 그 자체로 큰 프로젝트입니다. 응용 프로그램이 주요 요소로 특별히 빌드된 고유한 그리드를 제공하지 않는 경우 해당 응용 프로그램이 웹페이지의 유일한 컴포넌트라면 고유한 데이터 그리드를 코드 및 구현하는 것이 비효율적일 수 있습니다.

완벽하게 작성된 후 철저하게 테스트되었고 이미 사용 가능한 필수 기능을 모두 갖춘 데이터 그리드 중에서 선택할 수 있는 경우 특히 그렇습니다.

어떤 데이터 그리드 라이브러리를 사용해야 할까요?

사용자 정의 데이터 그리드를 구현하는 대신 데이터 그리드 라이브러리를 사용하는 것이 시간과 노력을 줄이는 훨씬 더 나은 선택이라는 사실을 알았습니다. 그러나 선택할 수 있는 옵션이 수백 가지가 넘는 상황에서는 먼저 현재 사용 사례를 제공하는 라이브러리만 선택하도록 옵션을 줄여야 합니다.

선택한 옵션이 향후 개발해야 할 다른 응용 프로그램의 표준으로 채택할 수도 있을지 확인하고자 합니다. 고려해야 할 몇 가지 요인이 있습니다.

기능 및 성능

가장 먼저 생각해야 할 주요 고려 사항은 프레임워크 지원입니다. 데이터 그리드 라이브러리는 JavaScript, TypeScript, Angular, React, Vue.js와 같이 일반적으로 사용되는 다양한 프레임워크에 대한 지원을 제공할 수 있어야 합니다. Wijmo FlexGrid는 이러한 주요 프레임워크에 대해 광범위한 지원을 제공합니다.

데이터 그리드 로드는 간단한 프로세스여야 하고 큰 데이터 집합과 함께 제공되더라도 응용 프로그램의 속도를 저하시켜서는 안 됩니다. 데이터 그리드 라이브러리를 선택하기 전에 많은 양의 데이터 로드 시 해당 라이브러리의 성능을 테스트해야 합니다. FlexGrid는 매우 작은 솔루션으로, GrapeCity 응용 프로그램에서 놀랍도록 빠른 성능을 제공하고 비효율성을 줄여줍니다.

데이터 그리드는 일반적으로 많은 양의 데이터를 처리하고 표시합니다. 원활한 성능을 위해 데이터 그리드에는 가상 스크롤이 필요합니다.

가상 스크롤은 표시해야 할 열만 표시하고 나머지는 필요할 때까지 렌더링하거나 가져오지 않습니다. FlexGrid는 기본적으로 데이터를 가상화하므로 이 기능은 백그라운드에서 항상 켜져 있습니다.

바로 사용할 수 있는 정렬, 레코드 필터링, 페이지 등과 같은 기능을 모두 갖춘 데이터 그리드를 찾아야 합니다. 데이터를 연결할 수 있어야 하고 프로젝트 코드를 변경할 필요 없이 기능이 작동할 수 있어야 합니다. 예를 들어, 다음 그림과 같이 FlexGrid에서 레코드 정렬 및 필터링은 기본 제공됩니다.

페이징은 간단하게 구현할 수 있습니다.

또한 FlexGrid는 다음 그림처럼 편리한 검색 기능을 제공합니다.

견고성, 접근성, 지원

데이터베이스는 다양한 범위의 데이터 형식을 수용할 수 있어야 하고 다양한 조건에서 수행할 수 있어야 합니다. 데이터 바인딩을 지원해야 하고 동일한 라이브러리를 사용하여 여러 데이터 형식을 시각화할 수 있어야 합니다. 또한 null 값을 처리하고 입력에 대한 기본 데이터 유효성 검사를 수행하는 것을 원할 수도 있습니다.

데이터 그리드 라이브러리는 접근성 요구 사항을 충족해야 하고 모바일 기기의 화면에서 보는 경우를 포함하여 화면 가독성을 방해해서는 안 됩니다. FlexGrid는 기본적으로 반응성이 뛰어나며 모든 화면 크기에서 잘 표시됩니다.

보다 쉽게 지역화하고 QWERTY 키보드에서 쉽게 나타낼 수 없는 언어로 입력하기 위해 라이브러리에서는 IME(입력기)를 지원해야 합니다. 이 기능은 특히 일본어, 중국어, 아랍어 사용자 다수가 온라인에서 우리가 만든 그리드에 액세스할 수 있도록 하는데 중요합니다.

물론, 기능에 문제가 발생하는 경우도 있을 것입니다. 이 경우 가동 중단 시간을 최소화하면서 쉽고 빠르게 해결책을 찾을 수 있어야 합니다. 프로덕션 수준 응용 프로그램에서 안전하게 사용할 수 있도록 데이터 그리드 라이브러리는 엔터프라이즈 수준 지원을 제공해야 합니다.

데이터 그리드의 모든 기능에 대한 명확하고 상세한 문서를 제공해야 합니다. 이 기능 하나만으로 라이브러리가 적절한지 확인할 수 있는데, 확인할 수 있는 문서의 품질이 모든 단계에서 개발 및 유지 관리에 영향을 미치기 때문입니다.

다른 Wijmo 컴포넌트에 대한 가이드와 함께 직관적이고 자세한 FlexGrid 문서 가이드를 활용할 수 있습니다.

모범 사례 고려 사항의 전체 목록을 살펴볼 때 몇 가지 라이브러리만 눈에 들어올 것입니다.

Wijmo FlexGrid

잘 작성되어 필요한 기능을 갖춘 데이터 그리드의 좋은 예로 Wijmo FlexGrid가 있습니다. Wijmo FlexGrid는 속도가 매우 빠르고 종속성이 없기 때문에 유지 관리 작업을 최소화하면서 일반적으로 필요한 많은 기능을 안전하게 구현할 수 있습니다.

FlexGrid는 1996년에 출시된 컴포넌트로, 계속해서 널리 사용되고 있습니다. Microsoft는 1998년 FlexGrid 라이선스를 취득하여 수 년에 걸쳐 개선하여 뛰어난 기능을 갖춘 고성능 데이터 그리드가 되었습니다.

FlexGrid는 데이터 그리드에 필요하다고 여기서 설명한 대부분의 기능을 제공합니다. 또한 계층 구조 데이터 소스에서 자동으로 트리 뷰 작성, 재무 분석을 위한 사용자 정의 빌드 차트 등 독자적인 기능도 갖추고 있습니다.

또한 자동 형식 강제 변환, CollectionView 기반 유효성 검사, 이벤트 기반 유효성 검사, 데이터 맵 등과 같은 기본적인 데이터 유효성 검사 모음도 제공합니다. 뿐만 아니라 PDF 형식 또는 Excel에서 읽을 수 있는 파일로 데이터를 쉽게 내보낼 수 있습니다.

구체적인 정보가 필요한 경우 문서에서 자세한 내용을 쉽게 찾거나 FlexGrid의 데모 페이지에서 자세한 안내를 받을 수 있습니다.

결론

이 문서에서는 기본 수준 이상으로 복잡한 표 형식 데이터를 표시하거나 기능을 추가할 때 단순한 HTML 표보다 데이터 그리드를 사용하는 것이 더 나은 이유에 대해 살펴보았습니다.

직접 데이터 그리드를 구현하는 대신 보다 빠르고 쉽게 다양한 기능을 갖춘 데이터 그리드 라이브러리를 사용해 보세요.

지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

• Wijmo 공식 홈페이지
• Wijmo 튜토리얼 및 샘플
• Wijmo Q&A
• Wijmo FAQ