TOAST UI Grid를 소개합니다 > jquery

출처 : http://meetup.toast.com/posts/83

TOAST UI Grid를 소개합니다

웹개발을 하면서 가장 많이 하게 되는 작업 중 하나는 바로 데이터를 다루는 일입니다. 특히 관리도구를 만들 때는 많은 양의 복잡한 데이터를 화면에 표시하고 편집하는 기능이 필수인데요, 아시다시피 웹에서 그런 기능들을 구현하는 것은 쉽지가 않습니다. table 태그는 기능이 제한적일 뿐만 아니라 다루기도 복잡하고, 원하는 대로 스타일을 제어하기도 쉽지 않습니다. 또한 input 태그를 사용해서 다양한 형식의 데이터를 입력 받아 서버와 동기화하는 일도 여간 까다로운 일이 아니죠. 게다가 많은 양의 데이터를 다룰 때에는 성능에 대해서도 적잖이 신경써야 합니다.

이러한 문제들을 쉽게 해결하기 위해 나온 도구가 바로 '그리드(Grid)' 입니다. 그리드라는 이름만으로는 썩 감이 잡히질 않는 분들이 많을 것 같은데, 한마디로 테이블 형식의 데이터를 웹에서 쉽게 다룰 수 있게 해주는 도구 라고 할 수 있습니다. 아마 엑셀과 같은 스프레드 시트를 떠올리시면 이해하기 쉬우실텐데요, 그런 의미에서 스프레드 시트와 같은 어플리케이션을 웹페이지에서 쉽게 사용할 수 있도록 해 주는 위젯이라고 표현 할 수도 있을 것 같습니다.

이미 사용해보신 분들도 있겠지만, Ext JS, kendo UI, Angular UI등 많은 상용 UI 프레임워크에서 그리드를 제공하고 있습니다. 하지만 특정 UI 프레임워크에 종속적이거나 상용이라서, 혹은 오픈소스이지만 기능이 부족해서 등의 이유로 딱 마음에 드는 라이브러리를 찾는 게 쉽지는 않죠. 그렇다면 오픈소스이면서도 상용 프레임웍 못지 않은 훌륭한 기능을 갖춘 라이브러리가 있다면 어떨까요. 바로 지금, 제가 그 매력적인 라이브러리를 여러분께 소개해 드리고자 합니다.

네, 그건 바로… (예상하셨겠지만)… 저희 FE개발팀에서 개발중인 TOAST UI Grid 입니다 :) 아, 뜬금없는 홍보 멘트 투척에 급히 떠나시려는 분들 잠시만요! 긴 글이 부담스러운 분들을 위해 짧은 영상을 준비했으니, 일단 아래 영상을 한번 클릭~ 부탁드리겠습니다.

자, 이제 TOAST UI Grid에 대해 조금은 관심이 생기셨나요? 그렇기를 간절히 바라며, 이제 여러분들을 위해 TOAST UI Grid만의 특징에 대해 좀더 상세하게 소개해 드리도록 하겠습니다.

다양한 입력 형식 지원

우리가 사용하는 데이터는 단순히 텍스트로만 표현하기에는 어울리지 않는 형식들이 많이 있습니다. 예를 들어, 지정된 값들 중에서 값을 하나만 선택해야 하는 경우라면 텍스트보다는 라디오 버튼이나 셀렉트 박스로 표현하는 게 더 유용하겠죠. 그런 경우를 위해 TOAST UI Grid에서는 다양한 방식의 입력형식을 지원하고 있습니다. HTML로 표현될 수 있는 모든 입력 형식을 지원한다고 할 수 있는데요, 체크 박스, 라디오 버튼, 셀렉트 박스 뿐만 아니라 패스워드 타입까지 지원합니다.

또한 체크 박스나 라디오 버튼 같은 경우에는 편집모드가 아닐 때에도 항상 노출되어 있는 게 더 편한 경우가 많은데요, 간단한 옵션(useViewMode:false)을 통해 다음과 같이 입력 박스들이 항상 노출되도록 설정할 수도 있습니다.

손쉬운 복사/붙여넣기

테이블 형식의 데이터를 다루다 보면, 엑셀과 같은 스프레드 시트와 연동해서 작업해야 할 일이 많습니다. 그때마다 일일이 데이터를 직접 변경해서 입력해야 한다면 여간 귀찮은 일이 아니겠죠. TOAST UI Grid에서는 복사/붙여넣기 기능을 통해 손쉽게 데이터를 상호간에 이동할 수 있습니다. 사용법도 아주 간단합니다. 드래그나 shift키를 사용해 복사할 범위를 지정한 다음에 ctrl + c를 누르면 각 셀의 데이터가 tab과 개행문자로 구분되어 클립보드에 복사됩니다. 그러면 이후에 다른 어플리케이션에서 클립보드를 사용해서 간단하게 붙여넣기 할 수 있습니다. 반대로, 스프레드 시트와 같은 외부 어플리케이션을 통해 클립보드에 복사된 데이터의 경우에도 TOAST UI Grid 내부의 원하는 위치에 포커스를 이동한 후 ctrl + v를 누르면 손쉽게 붙여넣기 할 수 있습니다. 아, 한가지 더. 체크 박스나 라디오 버튼처럼 목록 형식의 데이터도 복사/붙여넣기가 가능하답니다 :)

키보드 입력 완벽 지원

제목에 굳이 완벽 지원이라는 표현을 사용한 이유가 있을까요? 네, 있습니다. 정말 모든 걸 지원하기 때문입니다. 위에서 설명드린 범위 지정 및 복사/붙여넣기 기능 뿐만 아니라, Delete키를 통한 삭제, ESC키를 통한 입력 취소, 그리고 Tab과 화살표 키 Page UP/Down 키를 통한 커서 이동 등을 지원합니다. 즉, 마우스 없이 키보드만 이용해도 손쉽게 모든 데이터를 탐색하고 편집할 수 있다는 말이죠.

컬럼간 관계 지정

테이블 형식의 데이터를 다루다 보면 주변 컬럼의 값에 따라 특정 컬럼의 상태를 바꾸어줘야 할 때가 있습니다. 예를 들어 상위 분류의 값에 따라 하위 분류의 옵션 목록이 달라져야 한다거나, 특정 컬럼의 값에 따라 다른 컬럼이 활성화/비활성화 되어야 하는 경우 처럼 말이죠. 이런 경우를 위해 Toast UI Grid 에서는 컬럼간의 관계를 손쉽게 지정할 수 있는 옵션을 제공하고 있습니다. 바로 relationList 옵션인데요, 이 옵션을 사용하면 해당 컬럼의 값이 변경될 때 다른 컬럼의 활성화/비활성화, 편집가능/불가능, 옵션 목록 등을 자동으로 변경하도록 설정할 수 있습니다.

아래 영상에서 OS를 변경할 때마다 선택가능한 Device의 종류가 달라지고, 결제여부가 활성화/비활성화 되는 것을 확인하세요.

서버와의 연동 지원

웹 페이지에 데이터를 표현할 때는 동적으로 서버에서 데이터를 읽어와야 할 일이 많습니다. 또한 데이터를 보여주기만 하는 것이 아니라 직접 수정을 하게 된다면, 수정된 데이터를 다시 서버에 저장하는 과정이 꼭 필요합니다. TOAST UI Grid 에서는 Net 애드온을 통해 서버 연동에 필요한 기능을 지원하고 있습니다. Net 애드온에서 사용하는 데이터 형식에 맞추어 서버 API를 구현하면, 프론트엔드에서 별다른 추가 구현 없이 CRUD를 서버와 손쉽게 연동할 수 있습니다.

데이터가 아무리 많아져도 걱정없어요~

단순히 수십, 수백 건의 데이터라면 한 페이지에서 다 보여줘도 상관없겠지만 데이터가 수천, 수만 건이 넘어간다면 어떻게 될까요? 모든 데이터를 한 페이지에서 보여줄 요량이면 웹 페이지가 급격하게 느려지거나 심지어는 멈춰버릴지도 모릅니다. 이런 경우를 위해 TOAST UI Grid 에서는 기본적으로 가상 스크롤링을 지원하고 있습니다. 가상 스크롤링이란 현재 화면에 보여지는 부분에 대해서만 렌더링을 해서 페이지의 성능을 향상시키는 기능인데요, 아래 영상에서도 보실 수 있듯이 이 기능 덕분에 수십만 건의 데이터도 전혀 무리 없이 한 페이지에 표현할 수 있습니다.

만약 한 페이지에 모든 데이터를 표시하고 싶지 않다면? 페이지네이션 기능을 사용하시면 됩니다. 페이지네이션은 아시다시피 데이터를 페이지 단위로 잘라서 보여주는 기능인데, 바로 위에서 설명한 Net 애드온을 사용하여 서버 데이터의 형식을 맞춰주기만 하면 추가 구현 없이 손쉽게 이용할 수 있습니다.

나만의 스타일 적용하기

아무리 유용한 기능이 많다고 해도 디자인이 별로라면 사용하고 싶은 마음이 싹 가시기 마련입니다. 물론 TOAST UI Grid는 군더더기 없이 깔끔하고 디자인을 제공한다고 자부하고 있지만, 모두의 마음에 들 수는 없는 노릇이겠죠. 또한 각각의 프로젝트의 디자인에 잘 어울리도록 그리드의 스타일을 변경해야 할 일도 많을 테고요. 그런 분들을 위해서 TOAST UI Grid는 손쉽게 적용할 수 있는 테마 기능을 제공하고 있습니다.

위의 영상은 기본으로 제공되는 프리셋인 striped와 clean을 사용한 모습을 보여주고 있습니다. 사용방법은 정말 간단한데요, 다음의 코드 한 줄이면 원하는 프리셋을 쉽게 적용할 수 있습니다.

tui.Grid.applyTheme('striped');

그렇다면 프리셋 외에 원하는 스타일을 직접 지정할 수는 없을까요? 물론 가능합니다. 그것도 아주 간단하게요. 앞서 사용한 applyTheme()함수를 이용해서 기존 프리셋에서 변경하고 싶은 속성값만 옵션으로 지정할 수가 있습니다. 예를 들어 위의 striped 프리셋에서 헤더와 짝수 행의 배경색을 바꾸고 싶다면,

tui.Grid.applyTheme('striped', {
    cell: {
        head: {
            background: '#eef'
        },
        evenRow: {
            background: '#fee'
        }
    }
});

이렇게 원하는 속성만 지정해주면 됩니다. 이 코드를 적용하면 스타일이 다음과 같이 변경됩니다.

물론 배경색뿐만 아니라 테두리, 텍스트, 스크롤바 등의 색상들도 변경할 수가 있는데요, 자세한 내용은 여기에 잘 정리되어 있답니다.

당연히 지원하는 기본 기능들

지금까지 TOAST UI Grid만의 몇 가지 특징에 대해 살펴보았습니다. 사실 더 많은 기능들이 있지만 글이 너무 길어질 것 같아 여기서 모두 다 소개해 드릴 수가 없네요. 하지만 혹시나 이게 다는 아닐까 하고 걱정하시는 분들을 위해 기본적으로 지원하는 필수 기능들에 대해서는 여기서 한번 콕 짚고 마무리를 하도록 하겠습니다.

• 다중 컬럼 헤더 / 컬럼 고정
• 컬럼 리사이징 / 컬럼 숨기기
• 컬럼별 정렬
• 커스텀 포맷 / 커스텀 이벤트 핸들러
• 셀 병합
• 행 추가 / 삭제
• 필수 항목 지정
• 구형 브라우저 지원 (IE8+)

이런 필수 기능들을 간단한 옵션으로 쉽게 사용하실 수 있을 뿐 아니라, API를 통해서 직접 제어할 수도 있답니다. 어떤 옵션과 API가 있는지 궁금하시다고요? 여기, API 문서에서 확인하실 수 있습니다.

오픈소스입니다, 여러분!

TOAST UI Grid는 이미 NHN엔터의 다양한 서비스에서 단순한 테이블 표현에서부터 복잡한 관리 툴에 이르기까지 다양하게 활용되고 있습니다. 또한 릴리즈 페이지에서도 확인할 수 있듯이 매월 꾸준한 업데이트를 하면서 기능을 추가하고 안정성을 높여가고 있습니다. 현재 개발중인 '커스텀 테마 기능'을 비롯해 '자동완성/데이트피커 컴포넌트 연동', '필터 기능' 등도 곧 추가될 예정입니다.

마지막으로 강조하고 싶은 가장 중요한 점은, 이렇게 충분히 검증된 안정된 라이브러리가 오픈소스 라는 점입니다. 즉, 필요하신 분들은 누구나 무료(MIT 라이센스)로 사용하실 수 있고, 추가기능에 대한 의견도 자유롭게 제시할 수 있으며, 필요한 경우 직접 코드에 공헌할 수도 있습니다. 어떤가요, 충분히 매력적이지 않나요? 바로 사용해보고 싶으시다고요? 그럼, 바로 튜토리얼 페이지로 모시겠습니다. 아직은 잘 모르시겠다고요? 그럼 먼저 Github 페이지부터 방문해 주세요~