SpreadJS의 새로운 버전인 v13이 공식 출시되었습니다! 이번 새로운 버전에서는 더욱 더 많은 기능을 추가 였으며, 이를 통해 SpreadJS를 다양한 분야에서 필수 컨트롤로서 사용하실 수 있습니다. 아래 내용을 통해 새롭게 추가된 기능에 대해서 살펴보실 수 있습니다.

• 셀 내부 이미지 및 다양하고 유용한 드롭다운 메뉴가 포함된 버튼
• 사용자 활동에 기반한 시각적 피드백을 위한 셀 상태 스타일
• 새로운 셀 유형
• 라디오 목록
• 체크박스 목록
• 버튼 목록
• 범위 템플릿
• Excel과 동일한 기능
• 차트의 향상된 기능
• 표 동작의 향상된 기능
• 텍스트 회전
• 픽셀 스크롤
• 동적 배열 및 새로운 배열 함수
• 스프레드시트 감사 및 디버깅 개선을 위한 수식 추적
• 동적 열 너비
• 분할 크기 조정
• 자동 병합

셀 버튼 및 드롭다운

SpreadJS의 셀 스타일에 버튼 기능이 추가되었습니다. 이러한 미리 정의된 버튼은 셀 스타일 내에서 정의할 수 있습니다. 개발자는 최종 사용자가 버튼 하나만 간단히 클릭하면, 매장 데이터베이스의 항목에 대한 세부 정보 열기 같은 더 많은 기능을 통합 문서에 개발할 수 있습니다.

여러 버튼에 체크 표시, 드롭다운, 실행 취소/다시 실행, 회전 버튼이 포함되어 있습니다. 몇 가지 미리 정의된 명령 외에도, 개발자는 새로운 API를 사용하여 이러한 버튼에 대한 특정 동작을 코딩할 수 있습니다.

버튼과 더불어, 새로운 드롭다운 셀 유형이 SpreadJS에 추가되었습니다. 새로운 드롭다운 셀 유형은 특정 속성을 지닌 다양한 유형의 드롭다운 메뉴를 추가할 수 있는 기능을 제공합니다. 이러한 메뉴에는 계산기, 날짜 선택기, 월 선택기, 시간 선택기, 색상 선택기, 목록, 슬라이더, 워크플로 목록이 포함되어 있습니다. 이러한 메뉴는 드롭다운 유형을 지정하는 것 이외의 추가 코드가 필요하지 않습니다.

이러한 기능과 더불어, 대화형 버튼을 Spread에 추가할 수 있는 기본 제공 버튼 기능인 셀 버튼도 생성되었습니다. 이러한 버튼은 드롭다운 메뉴 열기 같은 다양한 기능에 바인딩할 수 있습니다. 드롭다운의 가장 일반적인 용도는 목록으로, 이는 사용자가 선택할 수 있는 옵션 목록을 간단히 제공합니다. 이러한 다양한 유형의 드롭다운 셀을 인벤토리 관리 양식 또는 버그/문제 보고서 생성 같은 여러 다양한 응용 프로그램에서 사용할 수 있습니다.

셀 상태 (Cell States)

셀 상태(Cell States)를 사용하면 셀의 현재 상태를 기준으로 셀 범위의 스타일을 설정할 수 있습니다. 셀 상태를 사용하면 사용자의 작업을 기준으로 사용자에게 시각적 피드백을 제공할 수 있습니다.

이러한 작업에는 마우스로 셀 가리키기, 셀 선택하기, 셀 편집하기가 포함되며, 이러한 상태에 따라서 사용자의 스타일을 지정할 수 있으며, 각 상태의 활성화 여부에 따라 셀의 스타일을 다르게 보여줄 수 있습니다. 이는 양식에 데이터를 입력하거나 셀 데이터가 올바르지 않을 때 사용자에게 알림을 보내는 것과 같은 실시간 피드백이 필요한 응용 프로그램에 특히 유용할 수 있습니다.

새로운 셀 유형

라디오 목록(Radio List), 체크박스 목록(Checkbox List), 버튼 목록(Button List), 범위 템플릿(Range Template)을 비롯한 새로운 셀 유형이 SpreadJS에 추가되었습니다.

라디오(Radio) 및 체크박스(Checkbox)는 그동안 Spread에서 제공되었던 기능입니다. 이번 개선을 통해 단일 셀 내에서 이러한 선택 셀 유형의 목록을 생성할 수 있는 기능이 추가되었습니다. 이는 사용자의 선택을 필요로 하는 옵션마다 각기 다른 셀을 사용하지 않고도 데이터 양식의 정보를 하나의 셀 안에 통합하는 데 유용할 수 있습니다. 방향, 텍스트 맞춤, 간격을 포함한 여러 가지 다양한 옵션을 사용자 정의할 수 있습니다.

이러한 새로운 목록 셀 유형은 버튼에도 적용되어, 개발자에게 버튼 리스트를 만들고 이를 사용자 정의할 수 있는 기능을 제공합니다.

범위 템플릿(Range Template) 셀 유형은 개발자에게 템플릿 기반 셀 렌더링 기능을 제공합니다. 이를 사용하면 셀 범위의 템플릿을 정의한 다음, 해당 템플릿을 셀 내에서 카드 보기로 표시할 수 있습니다.

차트의 향상된 기능

SpreadJS v13에서는 차트 기능을 향상했습니다. 이러한 향상된 기능에는 범례에 대한 글꼴 및 위치 지원, 축 표시 단위 선택, 사용자 정의 영역 테두리, hover 스타일, 로그 축, 추세선이 포함됩니다.

대부분의 이러한 향상된 기능은 차트의 모양을 응용 프로그램의 다른 구성요소(예: 대시보드)가 가진 모양과 느낌으로 일치시키는 방법을 사용자 정의하는 데 도움이 될 수 있습니다.

표의 향상된 기능

SpreadJS V13의 표 기능도 향상되었으며, 이러한 변경 사항에는 크기 조정 처리기, 스크롤 머리글, 컨텍스트 메뉴의 변경 사항, 표 선택, 탭 이동 및 요약 행이 포함됩니다.

이러한 변경 사항으로 SpreadJS의 표를 더욱 쉽게 사용할 수 있게 되어 응용 프로그램의 추가적인 사용자 정의가 실현될 수 있습니다.

텍스트 회전

Excel과 같은 텍스트 회전 기능이 추가되었습니다. 개발자는 이 기능을 통해 사용자가 통합 문서에서 텍스트를 회전할 수 있는 방법을 사용자 정의할 수 있습니다.

텍스트는 -90~90도 범위로 회전할 수 있으므로, 더욱 향상된 데이터 시각화를 사용자 정의할 수 있습니다. 테두리 및 배경도 텍스트와 함께 회전하여 데이터에 원활하고 전문적인 모양을 더할 수 있습니다.

픽셀 스크롤

이전에는 Spread에서 반복을 수행할 경우 워크시트를 행 단위로만 스크롤할 수 있었습니다. 따라서 여러 개의 데이터 줄이 포함된 행을 스크롤하기가 번거로웠습니다.

SpreadJS v13에는 픽셀 스크롤 기능이 추가되었습니다. 개발자는 이를 사용하여 스크롤할 특정 픽셀의 양을 지정할 수 있습니다.

동적 배열

최근 Excel에는 동적 배열이라고 하는 배열 수식의 개선 사항이 도입되었습니다.

이를 사용하면 배열 결과를 자동 확장할 수 있으며 새로운 배열 조작 함수 집합을 이용할 수 있습니다. 배열 함수를 사용하면 특히 여러 개의 수식을 단일 배열 수식으로 바꿀 때 성능을 크게 향상할 수 있습니다.

이러한 함수에 포함되는 항목은 다음과 같습니다:

• FILTER : 부울 배열을 기준으로 배열을 필터링합니다.
• RANDARRAY : 난수의 배열을 반환합니다.
• SEQUENCE : 순차적 번호의 목록을 생성합니다.
• SORT : 범위 또는 배열의 내용을 정렬합니다.
• SORTBY : 해당 범위 또는 배열의 값을 기준으로 범위 또는 배열의 내용을 정렬합니다.
• UNIQUE : 목록 또는 범위에 있는 고유 값의 목록을 반환합니다.

암시적 교집합을 나타내는 "@" 연산자도 추가되었습니다. 이 연산자를 사용하면 지정된 행과 열의 교집합에서 식을 계산할 수 있습니다. 이 기능은 배열 수식의 결과에서 한 가지 값만 필요한 경우에 유용합니다. 이는 수식을 더욱 쉽게 사용하고 이해할 수 있도록 하여 일부 복잡한 수식을 단순화하는 데 도움이 됩니다.

수식 추적

수식 추적은 수식의 종속 셀 및 참조되는 셀을 검사할 수 있는 SpreadJS의 새로운 기능입니다. 이 기능으로 수식에 대한 시각적 설명을 제공하여 수식이 서로 어떻게 연관되어 있는지 확인할 수 있습니다.

통합 문서의 수식 추적은 매출 예상 또는 기타 유형의 재무 응용 프로그램 같은 복잡한 통합 문서를 감사 및 디버깅할 때 특히 유용할 수 있습니다.

동적 열 너비

동적 열 너비(또는 비례적 크기 조정)는 열(Column)이 뷰포트를 정확하게 채우도록 보장하기 위해 추가된 기능입니다. 이는 뷰포트 크기가 변경된 경우 또는 사용자가 열을 추가/삭제/크기 조정할 경우 동적 너비가 적용된 열은 뷰포트를 채우도록 자동으로 크기가 조정됨을 의미합니다.

이러한 유형의 크기 조정을 숫자와 함께 사용하여 가중치 비율을 정의할 수 있습니다. 예를 들어, 배율 크기 조정이 “3”으로 시작하는 열은 뷰포트에 있는 표준 크기 열의 3배로 채웁니다. 이 기능은 동적 통합 문서를 사용하는 데 도움이 될 수 있습니다. 또한, 개발자는 데이터 및 열의 변경 사항이 Spread 인스턴스의 전체 모양에 어떤 영향을 미칠지 걱정하지 않아도 됩니다.

분할 크기 조정

동적 열 너비와 유사하게, 분할 크기 조정은 개발자가 통합 문서의 동적 크기를 제어할 수 있는 기능을 제공합니다. 분할 크기 조정의 다른 점은 크기 조정이 행에도 적용되며, 인접한 행/열의 크기만 조정된다는 점입니다.

동적 열 크기 조정과 비교했을 때, 이 기능은 특정 너비(widths ) 또는 행(Row) 높이를 변경하지 않고 그대로 유지해야 하는 인스턴스에 유용할 수 있습니다.

자동 병합

자동 병합은 SpreadJS v13의 새로운 기능으로, 개발자가 통합 문서의 데이터를 통합하는 데 도움이 됩니다.

개발자는 이 기능을 사용하여 동일한 데이터가 있는 인접한 행/열을 자동으로 통합할 수 있습니다. 개발자는 자동 병합이 이루어지는 방식에 대한 정책을 지정할 수 있습니다.

이와 더불어, 병합된 데이터의 일부가 계속 표시되는 한, 병합된 데이터는 스크롤할 때 화면에 그대로 유지됩니다.