# SpreadJS 디자이너 VSCode 플러그인 ## Content SpreadJS 디자이너 VSCode 확장은 전체 기능을 갖춘 SpreadJS 디자이너를 Visual Studio Code에 통합하여 VSCode 작업 영역 내에서 스프레드시트 파일을 직접 미리 보고 편집할 수 있도록 합니다. 이 확장은 사용자 지정 편집기로 동작하며 VSCode의 파일 시스템 모델, 테마 시스템 및 보안 제약 조건에 맞게 동작합니다. ![image-20260312.7a9afc.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260312.7a9afc-20260602.500cb1.png?width=800) ## 지원되는 파일 형식 이 확장은 다음 형식에 대한 편집 기능을 제공합니다. * `.sjs` * `.ssjson` * `.xlsx` * `.xltx` * `.xlsm` * `.xltm` * `.csv` 이러한 형식에 대해 사용자 지정 편집기로 등록되며 VSCode에서 기본 편집기로 설정할 수 있습니다. ## 설치 ### 요구 사항 * Visual Studio Code(Desktop) 버전 **1.107.0** 이상 다음 위치에서 VSCode 버전을 확인할 수 있습니다. ```auto Help → About ``` ### Visual Studio Code Marketplace에서 설치 1. Visual Studio Code를 엽니다. 2. 확장(Extensions) 보기(`Ctrl+Shift+X`)로 이동합니다. 3. 다음을 검색합니다. 1. **SpreadJS XLSX Editor** 2. **MESCIUS** 4. Mescius에서 게시한 확장을 선택합니다. 5. **설치(Install)**를 클릭합니다. 또는 Marketplace 페이지에서 설치할 수도 있습니다. ### 설치 후 * 창을 다시 로드할 필요가 없습니다. * 확장은 지원되는 파일 형식의 기본 편집기로 자동 설정되지 않습니다. 기본 편집기로 설정하려면: 1. 지원되는 파일(예: `.xlsx`)을 엽니다. 2. 파일 탭을 마우스 오른쪽 버튼으로 클릭합니다. 3. **Open with SpreadJS**를 선택합니다. ![image-20260420.628a17.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.628a17-20260602.86e55f.png) ## 파일 작업 ### 파일 열기 1. 지원되는 파일은 SpreadJS 디자이너에서 직접 열립니다. ![open-20260312.65b49d.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/open-20260312.65b49d-20260602.d066cf.gif?width=800) 2. 다음 메뉴를 사용하여 명시적으로 파일을 열 수도 있습니다. Explorer → 마우스 오른쪽 버튼 클릭 → Open with SpreadJS ![open2-20260312.679b2c.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/open2-20260312.679b2c-20260602.db3653.gif?width=800) #### 암호로 보호된 XLSX 보호된 `.xlsx` 파일을 열 때: * 암호 입력 대화 상자가 표시됩니다. * 인증에 성공하면 파일이 열립니다. ![passS-20260420.f8800f.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/passS-20260420.f8800f-20260602.2987a4.gif?width=800) * 인증에 실패하면 오류 메시지가 표시되고 탭이 닫힙니다. ![passF-20260420.821f77.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/passF-20260420.821f77-20260602.96025b.gif?width=800) #### 파일 로드 오류 파일을 열 수 없는 경우 오류 세부 정보를 표시하는 대화 상자가 나타납니다. ![openFailed-20260312.4a57d5.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/openFailed-20260312.4a57d5-20260602.8e73b2.gif?width=800) ![openFailed2-20260312.ec0a2d.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/openFailed2-20260312.ec0a2d-20260602.460cfe.gif?width=800) #### 편집 및 저장 파일이 수정되면: * VSCode는 탭을 저장되지 않은 상태로 표시합니다. * `Ctrl+S`를 눌러 저장합니다. 저장하지 않은 상태로 수정된 파일을 닫으면 VSCode가 확인 메시지를 표시합니다. ![image-20260312.4afb89.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260312.4afb89-20260602.7bf22d.png?width=800) ### 새 파일 만들기 이 확장은 새 스프레드시트 파일을 생성하는 명령을 등록합니다. 파일을 만들려면: 1. `Ctrl+Shift+P`를 누릅니다. 2. 해당 SpreadJS 명령을 실행합니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260602.6d3f57.png?width=800) 새 통합 문서는 구성된 통합 문서 옵션에 따라 초기화됩니다. ## VSCode 통합 ### 사용자 지정 파일 메뉴 VSCode는 파일 시스템을 통해 파일을 관리하므로 디자이너 온라인의 일부 기능은 확장 환경에서 적용되지 않습니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260602.06f8f8.png?width=800) 다음 메뉴 항목은 제거되었습니다. * New * Open * Import * Save * Print VSCode 확장은 `window.print` API를 호출할 수 없으므로 인쇄는 지원되지 않습니다. #### 내보내기 내보내기(Export)는 **다른 이름으로 저장(Save As)**처럼 동작합니다. SpreadJS 형식으로 저장하려면 다음 메뉴를 사용합니다. Export > SpreadJS File ![image-20260312.1755df.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260312.1755df-20260602.5cb54b.png?width=800) ### 리본 모드 다음 두 가지 리본 모드를 지원합니다. * `classic` * `toolbar` 디자이너 UI에서 모드를 전환하거나 `settings.json`에서 기본값을 정의할 수 있습니다. ```json { "spreadjs": { "ribbonMode": "classic" } } ``` ![ribbonMode-20260312.cd1e71.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/ribbonMode-20260312.cd1e71-20260602.a7a61b.gif?width=800) ### 테마 지원 디자이너는 활성 VSCode 테마에 자동으로 맞춰집니다. * 밝은 테마 → 밝은 UI * 어두운 테마 → 어두운 UI 별도의 설정은 필요하지 않습니다. ![theme-20260312.fed03a.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/theme-20260312.fed03a-20260602.b1a188.gif?width=800) ### 언어 및 문화권 기본적으로 확장은 VSCode의 표시 언어를 사용합니다. 다음과 같이 이 동작을 재정의할 수 있습니다. ```json { "spreadjs": { "language": "zh", "culture": "zh-cn" } } ``` ### 파일 아이콘 이 확장은 다음 형식에 대해 사용자 지정 아이콘 ![image-20260312.1ddd34.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260312.1ddd34-20260602.2d4807.png)을 제공합니다. * `.sjs` * `.ssjson` 이를 통해 Explorer에서 파일을 더 쉽게 식별할 수 있습니다. ### 상태 표시줄 확장은 **Powered by [MESCIUS SpreadJS](https://developer.mescius.com/spreadjs?utm_source=vscode&utm_medium=SP&utm_campaign=xlsx-editor-extension).** 상태 표시줄 항목을 추가합니다. 클릭하면 SpreadJS 제품 홈페이지가 열립니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260602.6f1b01.png?width=800) ## 구성 모든 구성은 `settings.json`에서 정의합니다. ### 통합 문서 옵션 새 빈 통합 문서를 만들 때 적용됩니다. ```json { "spreadjs": { "workbookOptions": { "allowDynamicArray": true, "allowInvalidFormula": true } } } ``` 지원되는 속성은 API 참조의 [GC.Spread.Sheets.IWorkbookOptions](/spreadjs/api/interfaces/GC.Spread.Sheets.IWorkbookOptions)를 참조하세요. ### 파일 열기 및 가져오기 옵션 파일을 로드할 때 적용됩니다. ```json { "spreadjs": { "openOptions": {}, "importOptions": {}, "importCsvOptions": {} } } ``` 다음을 참조하세요. * [`GC.Spread.Sheets.OpenOptions`](/spreadjs/api/modules/GC.Spread.Sheets#openoptions) * [`GC.Spread.Sheets.ImportOptions`](/spreadjs/api/modules/GC.Spread.Sheets#importoptions) * [`GC.Spread.Sheets.ImportCsvOptions`](/spreadjs/api/modules/GC.Spread.Sheets#importcsvoptions) ## 호환성 및 제약 사항 ### 버전 호환성 이 확장은 항상 최신 번들 SpreadJS 런타임에서 실행됩니다. 파일이 다른 메이저 또는 마이너 버전에서 생성된 경우 호환성 제한이 적용될 수 있습니다. 이러한 파일을 열면: * 알림이 표시됩니다. * 최신 버전으로 원본 파일이 덮어써지는 것을 방지하기 위해 직접 저장(Save)이 비활성화됩니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260605.ee3947.png) 대신 **다른 이름으로 저장(Save As)**(Export)을 사용하여 새 파일로 저장할 수 있습니다. >type=note > 파일은 계속 편집할 수 있지만 원래 버전으로 다시 저장할 수는 없습니다. ![image-20260312.eefe23.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260312.eefe23-20260602.9afeb2.png?width=400) >type=info > **왜 저장이 비활성화되나요?** > 직접 저장하면 파일이 현재 런타임 버전으로 업그레이드되고 버전 메타데이터가 영구적으로 변경됩니다. > 의도하지 않은 업그레이드를 방지하기 위해 확장은 버전 계열이 일치하지 않을 경우 직접 저장을 차단합니다. ### 키보드 단축키 충돌 디자이너의 내부 명령 팔레트 단축키는 VSCode의 파일로 이동(Ctrl+P)과 충돌합니다. 따라서 다음으로 변경되었습니다. ```auto Ctrl + Alt + P ``` ### 외부 하이퍼링크 VSCode 보안 정책으로 인해 외부 링크를 열려면 사용자 확인이 필요합니다. ![hyperlink-20260312.f4244d.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/hyperlink-20260312.f4244d-20260602.f332fa.gif?width=800) ## 라이선스 확장을 설치하거나 활성화하는 데 라이선스 키는 필요하지 않습니다. 상용 라이선스가 없으면 디자이너 오른쪽 아래에 평가판 워터마크가 표시됩니다. ![image-20260312.44bd5e.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260312.44bd5e-20260602.aa7f06.png?width=400)