웹 스퀘어 기본개념

 

오늘의 포스팅 주인공은 웹스퀘어 입니다!!

웹스퀘어? 그게뭐지? 할 수 있습니다. 저도 살면서 입사하고 처음 들었어요 ㅋㅋㅋㅋㅋ

웹스퀘어란 UI/UX TOOL 입니다.

웹 디자이너들이 쓰는 피그마 같은 툴이 아니라 개발자와 웹퍼블리셔가 기존에 이클립스

/ Vusial Studio / XCode / Inelli J 등 IDE(통합 개발 환경)같이 개발을 할 때 사용하는 

프론트엔드 전용 TOOL입니다

 

이러한 TOOL로 넥사크로 / 마이플랫폼 / 엑스플랫폼 / 웹스퀘어 / eXbuilder 가 있습니다

 

화려한 디자인이 필요치 않은 공공기관등에서 주로 사용합니다

 

사용하는 이유는 웹 퍼블리셔는 사용했던 컴포넌트의 재사용이 수월하고 제공되는 컴포넌트의 종류가 많아서 퍼블리싱 속도가 빨라지고 간편하여 사용하고, 개발자는 디자인에 해당하는 소스와 개발에 필요한 스크립트 소스가 분리되어있어 가독성이 좋고, Back-End와 통신한 데이터를 관리하기 쉬우며 자체적으로 제공하는 개발 도구를 이용해서 기존 JQuery, JavaScript보다 기능 구현의 소스가 좀 더 짧아지고 직관적이게 되어서 개발 속도와 편의성 면에서 압도적으로 좋기 때문에 자체 IT개발 팀이 없는 프로젝트에서 많이 사용합니다

 

웹스퀘어는 인스웨이브라는 기업의 제품입니다. 국내 기업의 회사여서 HELP탭에 가시면 한국어로 된

설명서가 있으니 또 한가지의 장점이라고 생각합니다. 

 

 

 

웹스퀘어에 대한 기본 개념 정리

 

UI 플랫폼 TOOL 중에 현재 제일 많이 쓰이는 프로그램이 대표적으로 웹표준을 준수하는 웹스퀘어가 있습니다.

그래서 웹스퀘어에 대한 기본 개념 정리가 된다면 다른 Tool도 구조가 비슷하기 때문에 쉽게 다를 수 있습니다.

웹스퀘어는 한국 소프트웨어 회사인 인스웨이브에서 만든 프로그램으로 이클립스를 기반으로 되어있어 이클립스에서 사용하는 단축키, 설정 등 그대로 사용이 가능하며 또한 전자정부프레임워크와 공식적으로 호환이 가능합니다.

 

웹스퀘어의 특징으로써는 XML 파일 형식을 사용하며, Design / Script / DataCollection / Submission / Source 탭으로 나눠져 있습니다. 이클립스 우측 상단의 [Open Perspective]을 누르면 WebSquare Designer 모드와 WebSquare Developer 모드가 나타나는데 Designer 모드는 퍼블리셔가, Developer 모드는 개발자가 사용하는 모드입니다

 

각 탭 별로 특징과 개념을 알려드리겠습니다.

 

Design 탭

컴포넌트를 선택하여 배치하고 수정 삭제 복사 붙여넣기 등의 기능과 컴포넌트에 Data를 Binding 하거나 Event를 발생 시킬 수 있습니다. 컴포넌트에 id를 부여하면, 해당 id가 페이지 내에서 전역 변수로 자동으로 등록되므로, Script 탭에서 사용이 가능합니다.

만약 시스템 브라우저 외에 다른 브라우저를 등록하고 사용하려면, 'Excute external program'을 클릭하여 브라우저를 선택 할 수 있습니다.

 

 

Script 탭

 

JavaScript 로직을 작성하여 화면의 기능들을 구현할 수 있습니다.

또한 파일을 생성하면 아래의 이벤트가 자동으로 등록됩니다.

onPageload : 페이지 로딩 후 실행(모든 컴포넌트를 그려준 이후에 반영됨)

onPageunload : 페이지 종료 후 실행     

참고로 WebSquare는 기본 namespace 기반의 코딩을 하며, 디폴트로 사용하는 객체명은 scwin입니다. 페이지를 닫을 때 해당 자원을 자동으로 삭제하는 기능을 이용할 수 있습니다.

 

 

DataCollection 탭

 

data 객체를 생성하고 관리하는 탭입니다.

DataMap : 단건 data 관리

DataList : 다건 data 관리

LinkedDataList : 생성된 dataList에서 별도의 조건을 주어 filter된 data를 확인(뷰어용으로 제한적으로 사용됨)

AlliasDataMap : Page Coding에서 자식에서 부모의 dataMap 객체를 참조할 때 사용

AlliasDataList : Page Coding에서 자식에서 부모의 dataList 객체를 참조할 때 사용

 

 

Submission 탭

 

웹스퀘어의 통신 객체를 생성 및 관리하는 탭입니다.

웹스퀘어에서는 <form>을 이용한 전송 방식으로 통신하지 않고, Submission 객체를 생성하여 Ajax와 같은 방식이고 JSON 형식으로 주고 받으면서 통신합니다.

 

 

Source 탭     

 

각 탭에서 정의한 내용과 디자인된 소스를 xml 파일로 한 눈에 확인할 수 있습니다.

직접 코딩도 가능하지만, 실수 방지를 위해 코딩은 Script탭에서 하는 것을 권장합니다.