Nexa Integration Builder

NexaLAP 플랫폼의 확장 자산을 VS Code 에서 개발하고 패키징해 배포합니다.

전문 개발자의 역량을 NexaLAP Studio 에서 바로 쓸 수 있는 자산(Asset) 으로 전환합니다. 익숙한 VS Code 와 Git 워크플로를 쓰던 대로 둔 채, 로우코드와 프로코드를 잇습니다.

이 버전은 Beta 입니다

기능과 자산 파일 형식이 바뀔 수 있습니다. 다음 버전에서 만든 자산을 다시 손봐야 할 수 있으니 Git 으로 형상 관리하시고, 운영 배포 전에는 결과물을 확인해 주십시오. 문제를 만나면 알려 주시면 도움이 됩니다.

💡 무엇을 하는 도구인가

NexaLAP 은 모든 기능을 플랫폼 안에 고정하지 않습니다. 핵심 설계와 실행 구조는 안정적으로 유지하면서, 필요한 영역을 자산 형태로 확장합니다. 이 확장은 그 자산을 만드는 도구입니다.

전문 개발자는 NexaLAP Studio 에서 쓸 컴포넌트와 화면 템플릿, 공통 정의, 테마, 서버 확장을 만들어 배포 패키지로 묶습니다. 패키지를 Studio 에 설치하면, Studio 사용자는 그 자산을 팔레트에서 꺼내 화면을 구성합니다.

개발은 VS Code 에서 합니다. 전용 IDE 를 새로 익힐 필요 없이 Git 기반 형상 관리와 기존 개발 워크플로를 유지하면서, 코드 중심 방식으로 로우코드 플랫폼을 확장합니다. 만든 자산은 버전 관리되고, 프로젝트 사이에서 재사용되며, 마켓플레이스로 조직 안팎에 공유됩니다.

📦 만들 수 있는 자산

여기에 프로젝트 Explorer 와 Nexacro 라이브러리 관리, 에셋 스크립트 디버깅, 기존 프로젝트 마이그레이션이 함께 제공됩니다.

🚀 시작하기

1. 확장을 설치하고 Activity Bar 에서 Nexa Integration Builder 아이콘을 엽니다.
2. New Project 로 프로젝트를 만들거나, 기존 프로젝트 폴더를 Open Project 합니다.
3. Explorer 트리에서 자산을 더블클릭하면 전용 에디터가 열립니다.

🖥️ 주요 화면

1. 프로젝트 Explorer

프로젝트 폴더를 그대로 비추는 전용 탐색기입니다.

• Nexacro Library 노드: 현재 라이브러리 버전과 등록된 클래스 목록을 보여 주고, 교체와 복원을 지원합니다. 오브젝트를 등록하거나 빼도 런타임을 다시 띄우지 않아 열어 둔 디자인폼이 남습니다.
• Common Libraries 노드: 애플리케이션이 구동할 때 프레임워크 다음으로 로드할 공용 스크립트를 등록하고 해제합니다.
• 파일 관리: 멀티 선택과 복사, 잘라내기, 붙여넣기, 드래그앤드롭 이동을 지원하고, OS 탐색기에서 끌어다 넣으면 복사됩니다. 자산 유형별 아이콘과 생성, 이름 변경, 삭제, Reveal in Finder / File Explorer 도 있습니다.
• 보기 필터: 툴바의 필터 버튼으로 자산 유형을 골라 봅니다. 고르는 즉시 반영되고 프로젝트별로 기억합니다.
• 펼침 상태 기억: 펼쳐 둔 폴더를 프로젝트별로 기억해, 닫았다 다시 열어도 트리 모양이 남습니다. 툴바의 Collapse All 로 한 번에 접습니다.
• 열린 파일 따라가기: 에디터 탭을 바꾸면 Explorer 가 그 파일을 골라 보여 줍니다. 접힌 폴더는 펼치고 입력 포커스는 에디터에 둡니다. 설정 Explorer: Auto Reveal 로 끌 수 있습니다.

2. Nexacro Object 에디터: 컴포넌트를 만드는 곳

가장 많이 쓰게 될 화면입니다. 하나의 .nexaobj 파일을 탭으로 나눠 편집합니다.

MetaInfo 탭, 컴포넌트의 스키마를 선언합니다.

• 좌측 rail(카테고리별 Property, Method, Event, Status, CSS, Control)과 우측 상세 폼의 Master-Detail 구성입니다. 탭을 열면 Object Info 만 펼쳐지고, 접고 편 상태는 다른 탭에 다녀와도 남습니다.
• 상속 멤버를 함께 표시합니다. 부모에게 물려받은 항목은 읽기 전용으로 보이고, 필요하면 Promote 해서 내 선언으로 가져옵니다. 재정의한 멤버에는 ⤴ 표시가 붙습니다.
• 모든 필드에 NexaLAP Studio 공식 설명이 붙습니다. 설명 언어는 IDE 언어를 따라갑니다 (English, 한국어, 中文, 日本語).
• description 을 ENG / KOR / JPN 로케일별로 작성할 수 있습니다.

Script 탭, 프레임 코드는 자동이고 본문만 작성합니다.

• 생성자와 prototype 배선 같은 정형 코드는 생성되고, 사용자는 멤버 본문만 씁니다.
• MetaInfo 에 선언한 property, method, event 를 [Generate in Script →] 로 스크립트에 바로 만들어 냅니다. 선언이 지워진 코드는 버리지 않고 orphan 으로 보존하고 배지로 표시합니다.
• nexacro API 자동완성: this. 로 내 멤버를, nexacro. 로 프레임워크 클래스를 꺼냅니다. var ds = new nexacro.Dataset() 처럼 본문에서 타입이 잡히는 지역 변수의 멤버 체인도 따라갑니다. 완성 목록에는 MetaInfo 설명이 함께 붙습니다.
• property setter 의 Auto guard 를 끄면 값이 같아도 늘 실행되는 본문을 그대로 씁니다.
• 생성 시점 코드: Add member… 에서 on_initialize 를 고르면 생성자에서 불리는 자리가 생깁니다. Component 와 Composite 은 화면과 속성이 다 준비된 뒤에 불리는 on_after_created 도 있고, 정리 코드는 on_destroy 에 씁니다.
• 프로젝트의 오브젝트를 바로 씁니다. 만들고 있는 다른 .nexaobj 를 저장하면 자동완성과 타입 검사, Preview 에 반영되고, Nexacro Library 에 등록한 클래스는 nexacro. 없이도 (new Transaction("tr", this)) 씁니다.
• 탭은 코드 블록을 모두 접은 채로 열립니다. 어떤 블록이 있는지부터 보고, 볼 것만 펴서 읽습니다.
• xscript 문법 진단과 Go to Symbol, 정의 이동을 지원합니다.

Design 탭, Composite Component 의 내부 폼을 화면으로 짭니다.

• 팔레트에서 컴포넌트를 꺼내 배치하고, 드래그와 리사이즈, 정렬, z-order, PositionBase 를 다룹니다. 여러 개를 고른 채로 크기를 바꾸면 고른 컴포넌트가 같은 만큼 함께 바뀝니다. 컨테이너를 더블클릭하면 그 안으로 들어가 편집합니다.
• Dataset: 팔레트의 Objects 에서 만들고, 캔버스 아래 트레이에서 고르면 그 자리에서 Contents Editor(컬럼과 행 표)가 열립니다. 상수 컬럼도 함께 다룹니다.
• 바인딩: 컴포넌트 속성을 Dataset 컬럼에 묶습니다(속성 패널의 ⛓). 걸린 값은 캔버스에 그대로 보여서 디자인 화면과 실행 결과가 같습니다. Bindings 탭에서 폼 전체를 컴포넌트별로 봅니다.
• Combo 나 ListBox 처럼 목록을 자기 안에 품는 컴포넌트의 Dataset 도 같은 표로 편집하고, codecolumn 과 datacolumn 을 그 자리에서 고릅니다.
• Form Script: 내부 폼의 스크립트입니다. this. 에 폼의 컴포넌트와 Dataset 이 나옵니다.
• Events 패널: 컴포넌트 이벤트에 핸들러를 붙이고, 없으면 함수를 만들어 줍니다.
• 고친 것이 Runtime Preview 에 바로 보입니다. 저장하지 않아도 됩니다. 떼어낸 프리뷰 창과 브라우저 프리뷰도 같습니다.

Style 탭과 Preview, 컴포넌트 테마 CSS 를 편집하고 브라우저에서 실제로 구동해 확인합니다. CSS 자동완성은 테마 에디터와 같은 카탈로그를 씁니다. Action 자산은 Common Library 를 로드한 상태로 실행됩니다. 툴바의 Labels 를 켜면 text 가 비어 있는 자리에 자산 이름을 대신 보여 주므로, CheckBox 나 Static 이 빈 상자로만 보일 때 유용합니다.

3. CommonInfo: 공유 정의

여러 컴포넌트가 함께 쓰는 Enum 과 Unit, Refresh, Display 정의를 MetaInfo 에디터 안에서 편집합니다.

• 내 프로젝트 정의를 만들고, MetaInfo 의 enuminfo 와 unitinfo 에서 바로 선택해 씁니다.
• 프레임워크 라이브러리 정의는 Library reference 에서 검색해 참고하고, 필요하면 Copy to project 로 복제해 수정합니다.
• 로케일별 description 과 displaytext 를 함께 관리합니다.

4. ViewTemplate 에디터

.viewtemplate 을 Information, Includes, Variables, Properties, 코드 블록으로 나눠 편집하고 Code Preview 와 View Preview 로 결과를 확인합니다. 2.0 다운그레이드도 지원합니다.

• Info 탭에서 버전(1.0.0 형식)을 정하면 Studio 자산 관리에 함께 표시됩니다.
• 속성 정의의 편집 유형에 여러 줄 입력(MultilineString)이 있고, Fields 의 Text 계열 필드는 옵션을 고를 수 있습니다.

Script 탭은 Main 만 펼친 채로 열리고, Problems 나 Preview 에서 다른 블록으로 뛰면 그때 펼쳐집니다.

5. Viewset 디자이너

.viewset 을 캔버스에서 배치하며 편집합니다. 우측 Properties 패널은 값이 어디서 왔는지를 기본값과 템플릿, 내 설정의 계층으로 보여 주고, 인라인 편집과 속성 추가를 지원합니다.

6. Nexacro Theme 에디터: 외형을 정의하는 곳

테마 폴더를 열면 Overview 와 Theme, Component Guide, Extension Utils 네 탭이 있는 전용 에디터가 뜹니다.

• Predefine: 색이나 글꼴 같은 공통 값을 정의하고, CSS 에서 -nexa-define(--이름) 으로 참조합니다. 정의되지 않은 참조는 경고로 알려 줍니다. 런타임이 조용히 무시하기 때문입니다. 순서 바꾸기와 다른 그룹으로 옮기기, 전체 삭제, 다른 테마 파일에서 가져오기를 지원합니다.
• CSS: 컴포넌트 셀렉터와 상태([status=…]), -nexa-* 속성을 자동완성하고, 테마 이미지 URL("theme://images/…") 도 채워 줍니다. 속성명을 고르면 background: ; 까지 넣고 값 자리에 커서를 둡니다. font : 에서는 테마가 쓰는 글꼴 이름을 먼저 제안합니다.
• CSS 오류 검사: 표준 검사기는 -nexa-* 를 모르는 속성으로 보고 값을 건너뛰므로, 자주 놓치는 다섯 가지를 따로 잡습니다. 색에 # 이 빠진 경우, 블록 마지막 선언에 ; 이 없는 경우, 같은 셀렉터를 두 번 쓴 경우, 셀렉터 목록에서 , 가 빠진 경우, Predefine 의 값이 빈 경우입니다. 같은 블록에 같은 속성을 두 번 선언해도 경고합니다. 뒤의 값이 이겨 앞선 선언이 버려집니다.
• Images: 테마 이미지를 넣고 이름을 바꾸면 CSS 참조가 함께 따라갑니다. 이름을 theme://images/… 형태로 복사해 그대로 CSS 에 붙여 넣을 수 있습니다. 프로젝트 공용 이미지는 imagerc:: 로 참조하고, 없는 그림을 가리키면 경고합니다.
• Preview: 편집 중인 테마를 실제 컴포넌트에 입혀 보여 줍니다. 여러 컴포넌트를 나란히 놓거나 현재 것만 볼 수 있고, 원하는 항목을 핀으로 고정합니다. 상태 이름은 넥사크로 표기를 따르고(mouseover, pushed), Edit 나 Calendar 처럼 비어 보이던 컴포넌트에는 샘플값을 채웁니다.
• Component Guide: 테마가 꾸민 컴포넌트를 상태별로 늘어놓은 가이드 화면(.xfdl)을 만들어 테마 폴더에 함께 둡니다. 템플릿으로 시작하거나 기존 .xfdl 을 가져오고, 행은 상태, 열은 cssclass 인 표를 한 번에 채웁니다. 가이드에 쓰는 셀렉터가 테마에 없으면 한 번에 채워 넣습니다.
• Overview: 테마 전체를 한 장으로 냅니다(폼 모형, 팔레트, 글꼴, 컴포넌트 커버리지, 자산, Health). 바깥을 부르지 않는 HTML 한 파일로 내보낼 수 있어 리뷰 자료로 그대로 씁니다. 안 쓰는 이미지와 Predefine 은 이 화면에서 바로 지웁니다.
• Extension Utils 의 Figma 연동: Figma 파일에서 스타일을 읽어 XCSS 로 변환합니다. 캔버스에서 여러 항목을 골라 한 번에 적용하고, 충돌하는 줄만 골라 처리합니다. 이미지 fill 은 테마 images/ 로 내려받습니다. Figma 의 Styles 와 Variables 를 Predefine 으로 가져오는 것도 됩니다.

7. Nexacro Style Sheet (XCSS) 와 Image Resources

테마 폴더 밖의 낱개 .xcss 는 Theme 에디터와 같은 화면으로 엽니다.

• 바탕 테마 위에서 봅니다. Preview 툴바의 Base Theme 에서 프로젝트 테마를 고르면 그 테마를 컴파일해 깔고, 이 파일의 규칙을 위에 얹어 그립니다. 치수와 아이콘이 런타임과 같습니다.
• 공용 이미지를 씁니다. 프로젝트의 _images_ 폴더가 Explorer 에 Image Resources 로 보이고, Import Image Resources 로 누른 폴더에 그림을 가져옵니다. CSS 에서는 imagerc::<경로> 로 참조하며, 입력할 때 후보가 뜨고 마우스를 올리면 그림이 보입니다.
• 없는 그림은 경고합니다. theme://images/ 와 imagerc:: 참조를 함께 검사하고, 대소문자만 다르면 올바른 이름을 알려 줍니다.
• 패키지는 담은 Theme 과 XCSS, 컴포넌트 Style 이 실제로 쓰는 공용 이미지만 골라 넣습니다.

8. 프로젝트 테마로 미리 보기

Composite 의 Design 탭과 Runtime Preview, Viewset 디자이너, Template Preview, New Nexacro Module 의 Preview 에 Theme 콤보가 있습니다. 프로젝트의 다른 테마를 골라 그 테마로 화면을 봅니다.

• 첫 항목 Runtime theme 가 기존 화면이고, 고른 값은 편집기마다 따로 기억합니다.
• 처음 고를 때 테마를 컴파일하느라 1초쯤 걸리고, 그 뒤로는 컴파일 결과를 다시 씁니다.
• 테마를 고쳐 저장하면 그 테마로 보던 화면이 함께 바뀝니다.

9. Server Extension: NexaLAP Server 용 Java 확장

서버에서 동작하는 확장을 IB 안에서 만들고 컴파일해 패키지에 담습니다.

• New Server Extension Module: Group Id 와 Artifact Id, 첫 확장 클래스 이름을 받아 Maven 프로젝트를 만듭니다(pom, 스켈레톤, 필요한 jar, maven-wrapper). 유형은 Workflow 와 Format, Endpoint 셋입니다.
• 모듈 안에 확장 클래스를 여러 개 둘 수 있습니다. New Extension Class 로 추가하면 스켈레톤 생성과 목록 등록이 함께 이뤄지고, Rename 은 소스 참조와 파일명, 목록을 한 번에 바꿉니다.
• 확장 에디터: 유형과 URL 경로, 표시명, 기능 명세(Request/Response 스키마), 설정값 양식을 편집합니다. 기능 명세는 패키징할 때 워크플로우 편집기가 읽는 MetaInfo(.info)로 변환됩니다.
• 설정값을 코드에서 읽습니다. 양식에 정의한 값을 ctx.getConfig("이름") 으로 꺼내 씁니다. Workflow 확장은 어느 워크플로우의 어느 노드가 불렀는지, Format 확장은 어느 기능으로 불렸는지도 알 수 있습니다.
• 빌드: Build Server Extension Module 로 fat jar 를 만듭니다(SPI 는 서버가 제공하므로 제외). Java 편집 지원(자동완성과 오류 표시)은 Java 확장과 JDK 를 쓰며, 컴파일 오류는 Problems 에 표시됩니다. 빌드할 때마다 libs/ 의 NexaLAP 라이브러리를 최신으로 맞춥니다.
• 패키징과 설치: 패키지에 담아 Studio 로 Import 하면 jar 와 MetaInfo 가 프로젝트에 놓이고, 재시작 없이 워크플로우 편집기 툴박스에 확장 노드가 나타납니다.

서버 배포는 NexaLAP Server 쪽 준비가 끝난 환경에서 동작합니다. 로컬 프로젝트 반영(설치, 갱신, 제거)은 서버 없이도 씁니다.

10. 에셋 스크립트 디버깅

.nexaobj(Action)와 .viewtemplate 의 Script 를 중단점으로 멈춰 확인합니다.

• Script 블록 거터에 중단점을 찍고, 소스맵으로 원본 줄에 정확히 멈춥니다.
• 호출 스택과 변수, 워치, 스테핑은 VS Code 디버그 패널을 그대로 씁니다.
• 에디터에서 F5 로 시작합니다. 툴바의 Start 버튼과 같은 동작입니다.
• 실행 방식은 두 가지입니다. 스크립트만 돌리는 방식과, Runtime Preview 를 별도 창으로 분리해 화면과 함께 디버깅하는 방식입니다.

11. 패키지: 만들고, 묶고, 설치까지

Package Configure 로 .pkgconfig 를 만들고 배포할 자산을 고른 뒤 빌드합니다. Assets 는 왼쪽에 프로젝트 자산, 오른쪽에 담긴 자산을 폴더 트리로 보여 주고, 가운데 화살표나 유형 체크박스로 옮깁니다.

• .nexaobj 는 배포용 .js 와 _metainfo_/<로케일>/*.info 로 자동 분해됩니다.
• 프로젝트의 .commoninfo 는 고르지 않아도 모두 담기고, 로케일별 CommonInfo.info 하나로 병합됩니다.
• 담은 자산이 쓰는 공용 이미지(imagerc::)를 찾아 함께 넣습니다. 스크립트로 경로를 만드는 경우에는 All images 로 전부 담습니다.
• 테마 폴더와 XCSS 파일, Viewset, ViewTemplate, 라이브러리 스크립트, 서버 확장 jar 를 함께 수납합니다.
• 빌드 전 검증을 돌리고 오류가 있으면 빌드를 막습니다. 중복 classname 과 없는 자산 경로, 등록 가능한 오브젝트 0건, 서버 확장 좌표와 경로 충돌 등을 봅니다.
• 빌드한 패키지는 NexaLAP Studio 로 Import 해서 설치합니다. 컴포넌트 등록과 아이콘, xcss 적용까지 처리됩니다.
• 파일이나 폴더를 골라 그 자리에서 Import 할 수도 있습니다(Explorer 컨텍스트 메뉴).

12. 마이그레이션: 기존 프로젝트 가져오기

기존 Integration Builder(beta)와 Module Developer 프로젝트를 현재 형식으로 변환합니다.

• 폴더를 스캔해 자산 종류별 개수와 주의 사항을 먼저 보여 줍니다.
• .module 은 .nexaobj 로, Composite(.xcdl)은 .nexaobj 로, _commonlib_/*.info 는 .commoninfo 로 변환합니다.
• 원본을 건드리지 않고 복사하거나 제자리 변환을 고릅니다.
• 변환할 수 없는 항목은 건너뛰고 사유를 남깁니다.

변환 결과는 반드시 확인하십시오. ViewTemplate 2.1 업그레이드는 기본으로 켜져 있고, 변환 과정에서 손실이 생길 수 있습니다. 원본 백업이나 copy 모드를 권합니다.

🌐 표시 언어

확장 UI 전체가 IDE 언어를 따라갑니다(한국어, 日本語, English). 메타인포 필드 설명도 같은 기준으로 언어가 정해지고(ENG, KOR, CHN, JPN), 자산의 description 과 displaytext 는 로케일별로 따로 작성해 패키지에 함께 실립니다.

⚙️ 요구 사항

• VS Code 1.80 이상 (또는 NexaLAP Studio)
• Nexacro 라이브러리는 확장에 내장되어 있습니다. 다른 버전이 필요하면 Explorer 의 Nexacro Library 노드에서 교체하고, 언제든 내장 버전으로 복원할 수 있습니다.
• 프로젝트 테마로 미리 볼 때(Theme 콤보, 낱개 .xcss 의 Base Theme)는 테마를 컴파일하느라 JDK 를 씁니다. 낱개 .xcss 는 JDK 가 없으면 근사치로 그립니다.
• Server Extension 을 개발할 때만 Java 언어 지원 확장과 JDK 21 이 추가로 필요합니다. NexaLAP Studio 에는 둘 다 들어 있고, 그 밖의 환경에서는 JAVA_HOME 이 가리키는 JDK 를 씁니다. Maven 은 프로젝트에 함께 만들어지는 wrapper 를 쓰므로 따로 설치하지 않아도 됩니다. 첫 빌드에는 네트워크가 필요합니다.

💬 팁과 문제 해결

• ID 규칙: MetaInfo 멤버와 CommonInfo id 는 Studio ID 규칙을 따릅니다. 빈 값과 특수문자, 한글, 숫자로 시작하는 이름, 중복은 쓸 수 없습니다. 어긋나면 편집이 거부되고 사유가 표시됩니다. 다만 상속 멤버 Promote 는 부모 이름을 그대로 가져오므로 이 검사를 적용하지 않습니다.
• 프로젝트 파일이 안 보일 때: nexa-integration-builder.json(매니페스트)과 기본 .commoninfo 는 도구가 관리하는 파일이라 트리에서 일부러 숨깁니다. CommonInfo 는 MetaInfo 에디터 안에서 편집하십시오.
• Java 자동완성이 동작하지 않을 때: Java 언어 지원은 프로젝트가 워크스페이스 폴더로 등록되어 있어야 동작합니다. .java 파일을 열면 Add to Workspace 안내가 뜨니 수락하십시오 (창이 한 번 다시 열립니다). 빌드는 등록과 무관하게 동작합니다.
• 테마를 고쳤는데 화면이 안 바뀔 때: Predefine 은 파일 단위입니다. 낱개 .xcss 에서 테마의 Predefine 을 참조하면 값이 풀리지 않고 그 규칙만 조용히 무시됩니다. 편집기 경고를 확인하십시오.
• 로그 확인: 패키지 빌드와 설치, 서버 확장 빌드, 라이브러리 로드 실패 등은 출력 채널 Nexa Integration Builder 에 남습니다.
• 되돌리기: Ctrl+Z(맥 Cmd+Z)와 다시하기는 모든 IB 편집기에서 같게 동작합니다. 웹뷰 화면 안에서 눌러도 편집기의 되돌리기로 이어집니다.
• 변경이 반영되지 않을 때: Explorer 툴바의 Refresh 를 먼저 시도하십시오. 매니페스트를 다시 읽어 트리와 상태를 함께 갱신합니다.

🤝 지원

제품과 라이선스, 배포 문의는 조직의 NexaLAP Studio / Integration Builder 담당 채널을 이용하십시오.

변경 이력은 확장 상세의 Changelog 탭에서 확인할 수 있습니다.