IntelliJ IDEA용 웹스퀘어 플러그인

웹스퀘어 프로그래머들을 위한 코딩 업그레이드

SixExit는 이미 뛰어난 IntelliJ IDEA의 코딩 지원에 웹스퀘어 프로그래머들의 시간과 노력을 줄이기 위해 특화된 다양한 지원을 추가합니다. 여러 GUI 탭과 프로퍼티 패널 사이에서 헤매지 말고 모든 것을 코드 에디터 안에서 빠르게 해결하십시오.

JetBrains Marketplace에서 설치 기능 살펴보기

현재 베타 버전 · IntelliJ IDEA 2026.2 이상

웹스퀘어는 (주)인스웨이브의 제품입니다. delight4는 인스웨이브와 관련이 없으며, SixExit는 인스웨이브의 공식 승인·제휴 제품이 아닙니다.

SixExit가 적용된 IntelliJ IDEA 에디터 — 스크립트에서 컬럼 ID 자동 완성

기능: 개요

화면 UI 코딩, 스크립트 코딩, IDE 기능 확장의 세 영역에서 기능을 제공합니다. 아래의 해당하는 카드를 누르면 해당 영역의 상세한 내용 항목으로 이동합니다.

코드 퍼스트 화면 디자인

WYSIWYG 툴이 생성하는 지저분한 UI 코드가 싫은 개발자들을 위해, 화면 UI를 코딩으로 작성할 수 있도록 집중적인 도움을 제공합니다.

UI 코딩 지원 기능 보기 →

자바스크립트 코드 생산성 향상

타입 인식, 멤버/매개변수 제안, 빠른 문서 표시 기능 등의 도움을 제공하여 코딩이 중단 없이 계속될 수 있게 합니다.

스크립트 지원 기능 보기 →

웹스퀘어 개발을 위한 IDE 기능 확장

IntelliJ에 웹스퀘어 화면 파일을 위한 전용 구조 도구 창, 다국어 메시지 검색 기능 등을 추가합니다.

IDE 기능 확장 보기 →

비주얼(WYSIWYG) 편집기 등 GUI 조작으로 코드를 생성하는 기능은 제공하지 않습니다.

기능: 화면 UI 코딩 지원

정밀하고 빠른 화면 개발

WYSIWYG로는 얻기 힘든 정밀한 디자인과 유지 보수성이 높은 화면 코드를 생산하기를 원하시는 프로그래머들이 빠르고 편리하게 웹스퀘어의 화면 UI 부분을 코딩할 수 있도록 다양한 기능을 제공합니다.

문맥 기반 태그 제안 — 현재 위치에서 유효한 태그 목록이 자동 완성 목록에 표시되는 모습
부모 태그가 w2:gridView일 때의 자식 태그 완성 목록

문맥 기반 태그 제안

현재 caret 위치에 맞는 태그들이 자동 완성 목록에 표시되어 빠르게 입력할 수 있습니다.

  • 웹스퀘어 컴포넌트 및 표준 HTML 태그 목록 제공
속성 이름·값 제안 — 컴포넌트 속성 이름 목록이 팝업에 표시되는 모습
w2:gridView의 속성 이름 제안
속성 이름·값 제안 — 컴포넌트 속성 값 목록이 팝업에 표시되는 모습
w2:gridView의 autoFit 속성 값 제안

속성 이름·값 제안

태그가 가진 속성 목록을 설명과 함께1 제안하여 이름을 정확하게 기억하지 못해도 쉽게 입력할 수 있습니다. 속성의 값도 제안합니다.

  1. 참고: 웹스퀘어 가이드 문서 연동 안내 SixExit은 저작권 문제로 웹스퀘어 가이드 문서를 자체적으로 포함하고 있지 않습니다. 단, 설정에서 인스웨이브 개발자 포털에 공개된 가이드 문서 를 사용자의 컴퓨터로 다운로드하는 기능을 제공하며, 문서가 다운로드 되면 SixExit가 그 문서를 바탕으로 빠른 문서를 표시할 수 있습니다.
태그와 속성 검증 — 존재하지 않는 태그 이름에 노란 경고 밑줄이 표시된 모습
없는 태그 이름(<w2:typo>)에 대한 경고
태그와 속성 검증 — 잘못된 속성 값에 노란 경고 밑줄이 표시된 모습
속성 값 오타 ("allColume")에 대한 경고
태그와 속성 검증 — 존재하지 않는 속성 이름에 노란 경고 밑줄이 표시된 모습
없는 속성 이름 (wrongAttribute)에 대한 경고

태그와 속성 검증

잘못된 태그/속성 이름, 현재 위치에 올 수 없는 태그, 잘못된 속성 값 등을 점검하여 표시해 주므로, 실수로 인한 버그를 사전에 빠르게 발견할 수 있습니다.

이벤트 속성 지원 — xf:trigger에 사용 가능한 이벤트 목록이 표시된 모습
<xf:trigger>의 사용 가능한 이벤트 목록 표시
이벤트 속성 지원 — 이벤트 속성 값에서 기존 함수를 선택하거나 새 함수를 추가하는 모습
기존의 함수를 고르거나 새 함수를 추가하는 기능 제공

이벤트 속성 지원

각 태그별로 지원되는 이벤트 목록을 표시하며, 이벤트 속성 값으로 기존의 함수들을 제안하거나 새 함수를 만드는 기능을 제공합니다. 속성 값의 함수 이름에서 해당 함수 정의로 바로 이동할 수 있습니다. 비슷한 방식의 displayFormatter 등의 속성에도 같은 기능을 지원합니다.

  • 간편한 새 callback 함수 추가
  • 마우스 중간 버튼으로 클릭하여 함수 본문으로 바로 이동
  • 마우스를 올려 두고 있으면 callback 함수의 설명과 본문을 팝업으로 표시함
파일의 경로 해결(resolve)과 이동 — script의 src 속성 값에 파일 경로가 제안되는 모습
<script>의 src 속성 값에 파일 경로를 제안하는 모습
파일의 경로 해결(resolve)과 이동 — ws:column의 imageSrc 속성 값에 파일 경로가 제안되는 모습
<ws:column>의 imageSrc 속성 값에 파일 경로를 제안하는 모습

파일의 경로 해결(resolve)과 이동

웹스퀘어 프로젝트 구조를 이해하여 src 등의 파일 경로인 속성 값의 완성을 지원하며, 마우스 중간 클릭으로 해당 파일로 이동할 수 있습니다.

GridView와 DataList의 집중적인 연결 지원 — gridView의 dataList 속성 값이 제안되는 모습
데이터리스트 ID 제안
GridView와 DataList의 집중적인 연결 지원 — gridHeader와 gridBody의 컬럼 ID가 연결되어 표시되는 모습
Technical debt를 쌓는 column11 같은 ID는 더이상 사용하지 마십시오.
GridView와 DataList의 집중적인 연결 지원 — gBody 컬럼 ID에 연결된 데이터리스트 컬럼 ID가 제안되는 모습
gBody 컬럼 ID에 연결된 데이터리스트의 컬럼 ID를 제안합니다.

GridView와 DataList의 집중적인 연결 지원

실제 업무에서 가장 많이 사용되는 이 두 조합의 코딩을 편하게 하기 위해 다양한 도움을 제공합니다. 연결된 데이터리스트의 컬럼에 따라 id와 컬럼 값을 제안하며, 헤더 컬럼과 대응하는 gBody 컬럼, 데이터리스트 컬럼 사이를 쉽게 오갈 수 있습니다.

  • gridView의 dataList 속성 값 제안
  • 헤더와 gBody의 컬럼에, 연결된 데이터리스트에 맞는 ID 값 제안
  • 헤더 컬럼의 value로 데이터리스트의 name 제안
  • 헤더와 gBody의 w2:column 부분을 마우스 중간 버튼으로 클릭하면 대응하는 상대 태그로 이동
  • gBody의 컬럼 ID가 연결된 데이터리스트에 없는 경우 경고
  • 컬럼 ID를 마우스 중간 버튼으로 클릭하면 데이터리스트의 대응하는 컬럼으로 이동
중복 ID 검사 — 같은 ID가 사용된 위치에 경고가 표시된 모습
같은 ID가 쓰인 것을 찾아서 경고를 보이는 모습

중복 ID 검사

실수로 같은 ID가 쓰였을 때, 웹스퀘어 런타임이 페이지 로딩시에 중복된 ID가 있다고 메시지를 보이기는 하지만 정확한 위치를 알려 주지 않으므로 찾기가 힘듭니다. SixExit은 에디터에서 실시간으로 알려 주므로, 같은 ID를 쉽게 제거할 수 있습니다. 같은 페이지 내에서라도 같은 ID가 올 수 있는 경우도 고려해, 지능적으로 검사를 합니다.

다국어 ID 지원 — 다국어 ID의 메시지를 확인하는 모습
다국어 ID 메시지 확인

다국어 ID 지원

label·title 등의 속성에 쓰인 다국어 ID 위에 마우스를 두면 모든 언어의 해당 ID의 메시지를 비교해 볼 수 있습니다. 마우스 중간 버튼 클릭으로 메시지 properties 파일로 이동하는 것도 가능합니다.

UDC 태그 지원 — 알려진 UDC 목록이 제안되는 모습
알려진 UDC 목록이 제안되는 모습
UDC 태그 지원 — UDC 컴포넌트의 속성에 대해 자동 완성 목록이 제공되는 모습
UDC 컴포넌트의 속성에 대해 자동 완성 목록이 제공되는 모습

UDC 태그 지원

UDC 1.0과 2.0의 공개 멤버 문서화 컨벤션을 모두 인식하여, 태그의 속성을 제안하고 해당 속성으로 이동하는 것을 지원합니다.

  • 알려진 UDC 컴포넌트 자동 완성 제공
  • w2:require 자동 추가
  • 태그와 속성에 대해 빠른 문서 제공
CSS class 미리 보기와 이동 지원 — class 속성 값 위에 CSS 미리 보기가 표시되는 모습
class 속성 값 위에 마우스를 두었을 때 미리 보기가 나오는 모습

CSS class 미리 보기와 이동 지원

프로젝트의 CSS 설정을 인식하여, class 속성에서 클래스 이름 자동 완성, 미리 보기, 이동을 지원합니다.

  • 마우스를 올려 두면 나오는 팝업에서 클래스의 내용 확인
  • 마우스 중간 버튼으로 클릭하여 클래스의 선언 위치로 이동

기능: 자바스크립트 지원

지능적 웹스퀘어 스크립팅 어시스턴스

이미 Eclipse보다 뛰어난 IntelliJ의 자바스크립트 편집 기능에 웹스퀘어 지원을 더해 생산성을 극대화하고, 코드를 더 편리하고 빠르게 분석할 수 있습니다.

웹스퀘어 객체의 인식 — 웹스퀘어 객체의 멤버와 빠른 문서가 완성 팝업에 나타나는 모습
데이터리스트의 객체인 dlt_commonCode에 대해 멤버와 빠른 문서를 표시하는 모습
웹스퀘어 객체의 인식 — JSON 반환 값의 구조까지 인식해 멤버를 제안하는 모습
함수 리턴 값인 JSON의 구조까지 인식한 멤버 제안

웹스퀘어 객체의 인식

웹스퀘어 객체들을 인식하여 멤버 완성, 매개변수 정보, 빠른 문서1 등을 제공합니다.

  1. 참고: 웹스퀘어 가이드 문서 연동 안내 SixExit은 저작권 문제로 웹스퀘어 가이드 문서를 자체적으로 포함하고 있지 않습니다. 단, 설정에서 인스웨이브 개발자 포털에 공개된 가이드 문서 를 사용자의 컴퓨터로 다운로드하는 기능을 제공하며, 문서가 다운로드 되면 SixExit가 그 문서를 바탕으로 빠른 문서를 표시할 수 있습니다.
광범위한 매개변수 도움 — 데이터리스트 메서드의 컬럼 ID 목록이 매개변수 완성에 나타나는 모습
데이터리스트의 getMatchedJSON의 첫 번째 인자로 컬럼 ID 목록을 제공하는 모습
광범위한 매개변수 도움 — GridView 메서드의 컬럼 ID 목록이 매개변수 완성에 나타나는 모습
그리드뷰의 getColumnValue의 인자로 컬럼 ID 목록을 제공하는 모습
광범위한 매개변수 도움 — setDisabled 메서드의 다양한 매개변수 정보가 표시되는 모습
그리드뷰의 setDisabled의 다양한 매개 변수 정보를 제공하는 모습

광범위한 매개변수 도움

선택 가능한 문자열의 목록, 데이터리스트의 키, 그리드뷰의 컬럼 ID 등, 알려진 웹스퀘어 프레임워크 메서드에 대해 다양한 매개변수 입력을 제공해, 매번 가이드 문서를 찾아 보지 않고 개발을 빠르게 진행할 수 있습니다.

  • Ctrl+P로 매개변수에 정보 팝업 표시
  • 존재하지 않는 컬럼 등 잘못된 매개변수에 대한 경고 표시
  • 마우스 가운데 버튼으로 데이터리스트/그리드뷰의 컬럼 선언 위치로 이동
웹스퀘어 컨벤션의 공통 스크립트 객체 인식 지원 — 공통 스크립트 객체의 멤버 목록과 문서가 표시되는 모습
공통 스크립트 객체의 멤버 목록과 문서를 표시하는 모습
웹스퀘어 컨벤션의 공통 스크립트 객체 인식 지원 — 공통 스크립트 객체 함수의 사용 위치를 프로젝트 전체에서 찾는 모습
선택된 공통 스크립트 객체의 함수가 사용된 곳을 프로젝트 전체에서 찾아서 보여 주는 모습

웹스퀘어 컨벤션의 공통 스크립트 객체 인식 지원

var com = {}; 형식으로 선언된 객체에 프로퍼티 형식으로 함수를 추가하는 웹스퀘어의 컨벤션에 대한 지원을 추가하여, 함수 문서, 매개 변수 정보 표시, 선언으로 이동하기, 프로젝트에서 사용된 곳 찾기 등을 지원합니다.

프로젝트 공통 모듈 지원 — 공통 모듈 목록이 완성 목록에 제안되는 모습
공통 모듈의 목록을 제안하는 모습
프로젝트 공통 모듈 지원 — 공통 모듈 함수의 사용 위치를 프로젝트 전체에서 찾는 모습
선택된 공통 모듈 함수가 사용된 곳을 프로젝트 전체에서 찾아서 보여 주는 모습

프로젝트 공통 모듈 지원

<projectCommon>에 정의된 공통 모듈을 인식하여, 모듈의 멤버 완성, 함수 선언으로 이동하기, 빠른 문서 등을 제공합니다.

집중적인 이벤트 지원 — bind() 매개변수에 GridView 이벤트 목록이 제안되는 모습
GridView 객체의 bind()의 매개변수로 GridView의 이벤트 목록을 제안하는 모습
집중적인 이벤트 지원 — 이벤트 핸들러 인자의 멤버가 제안되는 모습
이벤트 핸들러의 signature를 인식하여 인자의 멤버를 제안하는 모습

집중적인 이벤트 지원

bind() 함수의 이벤트 이름과 콜백 함수 매개변수에 대해 완성을 지원하며, 지정된 이벤트 핸들러 함수 안에서 매개변수와 this의 타입을 유추해서 멤버를 표시합니다.

  • 객체의 타입에 맞는 이벤트 목록 제공
  • 콜백 함수로 기존 함수 목록을 제안하거나 새 함수 추가 기능 제공
  • 콜백 함수 내에서 this와 매개변수의 타입 인식
공통 코드 도움 제공 — 공통 코드의 코드명이 인레이 힌트로 표시되고 코드 완성이 제공되는 모습
공통 코드의 코드명을 인레이 힌트로 표시하고 코드명으로 코드에 대한 완성을 제공하는 모습

공통 코드 도움 제공

공통 코드를 매번 복사해서 붙여 넣고 있으십니까? 스크립트에 쓰인 공통 코드가 무슨 뜻인지 매번 검색하십니까? SixExit에서 CSV 파일로 공통 코드/코드명 조합을 지정해 두면 스크립트 상의 공통 코드 리터럴에 대해 인라인 힌트로 코드명을 표시하고, 문자열 입력시 공통 코드나 코드명의 일부로 공통 코드를 완성할 수 있습니다.

기능: IDE 지원

웹스퀘어를 위한 UI 추가/확장

웹스퀘어 개발의 편의성을 높이기 위해 IntelliJ의 UI에 새 UI를 추가하거나, 기존 UI의 기능을 향상시킵니다.

웹스퀘어 구조 도구 창 — 웹스퀘어 구조 트리가 표시된 모습
웹스퀘어 XML 파일이 열렸을 때 구조 창에 웹스퀘어 구조가 표시되는 모습

웹스퀘어를 위한 구조 도구 창

웹스퀘어의 핵심적 구성 요소들을 표시해 자주 참조하는 내용을 쉽게 확인하고 빠르게 이동할 수 있게 합니다.

  • 데이터 개체의 컬럼에서 "사용 위치 찾기"를 실행하는 것으로, 해당 컬럼을 사용하고 있는 곳 확인
  • 현재 캐럿 위치의 노드를 XML 트리에서 locate하는 UI 추가
내비게이션 바 향상 — 웹스퀘어 태그 경로가 상단 내비게이션 바에 표시된 모습
내비게이션 바가 웹스퀘어 태그를 표시하는 모습

내비게이션 바 향상

IntelliJ의 내비게이션 바에게 웹스퀘어 구조 정보를 제공하여 더 나은 경로를 표시하게 합니다.

다국어 ID 지원 인텐션 추가 — 기존 다국어 ID를 검색하는 인텐션이 표시된 모습
기존 다국어 ID를 검색하는 인텐션

다국어 ID 지원 인텐션 추가

다국어 ID를 지정하는 것을 도와 주는 두 개의 인텐션을 추가합니다. Alt+엔터 키를 눌러 부를 수 있습니다.

  • 현재 선택된 문자열에 대해 새 다국어 ID를 생성하고 기본 언어의 properties 파일에 추가합니다.
  • 기존의 다국어 ID를 쉽게 검색해 입력할 수 있게 함으로써, 중복 엔트리를 생성하는 것을 방지합니다.

Media

동영상 데모

SixExit로 간단한 웹스퀘어 화면을 개발하는 과정입니다. SixExit가 다양한 자동 완성을 제공하는 모습을 보실 수 있습니다.

귀하의 인터넷 속도에 맞는 품질을 고르신 뒤 재생 버튼을 누르십시오.

Usage notes

이용 안내

  • SixExit은 현재 베타 버전입니다 — 여러 테스트를 거쳤으나, 버그가 있을 수 있습니다.
  • 웹스퀘어 라이선스를 포함하지 않습니다 — SixExit는 IntelliJ에 웹스퀘어 소스 코드 편집 관련 기능을 추가하는 플러그인일 뿐이므로, 웹스퀘어 애플리케이션을 실행하기 위해서는 인스웨이브에서 웹스퀘어의 라이선스를 구매하셔야 합니다.
  • 무료 버전의 IntelliJ에서도 동작합니다 — SixExit이 제공하는 모든 기능은 Ultimate 버전을 필요로 하지 않습니다.
  • Linux에서도 동작합니다 — SixExit은 IntelliJ가 실행되는 환경이라면 OS에 관계없이 동작합니다.

웹스퀘어 개발, 오늘부터 더 효율적으로

지금 IntelliJ에 설치하고 SixExit 베타 버전을 사용해 보십시오.

JetBrains Marketplace에서 설치