이번에 진행된 프로젝트의 개발환경이 웹스퀘어 5였다.
https://wtech.inswave.kr/websquare/websquare.html?w2xPath=/cm/xml/index.xml
인스웨이브 개발자포털 W-Tech
wtech.inswave.kr
같이 투입된 응용개발 업체와 퍼블은 웹스퀘어가 처음이었고, 프로젝트 투입 전 동영상 강의를 수료하고 투입을 했다.
교육 신청을 했지만 강사가 직접 설명한 게 아닌, 아래 내용을 그대로 재탕해서 좀 실망스럽긴 했다.
https://www.youtube.com/playlist?list=PL7a9HhkvOVb3RwaphJUnuqkrJ8UKcy-kJ
SP5 퍼블리싱 실습과정 [웹스퀘어5-교육]
www.youtube.com
웹스퀘어는 여러 큰 프로젝트 개발환경으로 사용 중인데, 웹스퀘어에 맞게 제작을 해야 해서 제약사항이 많다는 게 단점이다.
큰 틀에서 보면 리액트나, 뷰와 방식은 비슷할 수는 있다.
생산성과 편리성이 좋다고는 하는데, 퍼블입장에서 볼 때는 왜 이걸 사용해야 하지?라는 의문이 든다.
웹스퀘어는
인스웨이브에서 개발한 툴이며, 이클립스와 상당히 비슷하다. 그리고 xml로 제작된다. (퍼블화면도 xml로 제작해야 한다)
교육과 실무는 많은 부분이 다르다. 아직 프로젝트 진행 중이지만, 그간 경험한 걸 작성해 본다.
개발환경 세팅
환경 세팅은 이클립스와 매우 비슷하며, 맥은 지원을 하지 않는다.
웹스퀘어 설치를 한 후 라이선스 등록을 해야 한다.
실무 기준으로 설명을 하자면, 웹스퀘어로 개발을 한다면 인스웨이브에서 교육을 하거나 프로젝트에 상주해 있는 경우일 것이다.
즉, 관련 세팅은 인스웨이브에서 지원을 받아야 할 것이다.
공통 모듈
웹스퀘어에서는 기본적으로 팔레트를 제공한다.
팔레트에는 대부분의 기능적인 요소들이 있다. (input, tag, checkbox 등등)
우리는 그걸 끌어다가 사용하기만 하면 된다.
하지만, 실무에서는 프로젝트마다 그에 맞는 디자인이 있을 테고 기능이 있기 때문에 그거에 맞게 변형을 해야 한다.
퍼블 기준으로 본다면, 팔레트에서 input type="text"를 사용한다고 하면, 기본적으로 제공되는 class 명이 삽입되기 때문에 해당 이름에 맞게 class명을 상속시켜서 스타일을 입혀야 한다.
그리고 자주 사용하는 공통모듈은 Snippets에 저장해서 사용을 해도 되며, 인스웨이브 공통개발 쪽에서 udc안에 따로 모듈을 제작 후 넣어서 팔레트처럼 사용하면 된다.
초기 세팅을 하면 위와 같은 폴더 구조를 갖는데, 실무에서는 구조가 다를 수 있다.
websquare > config.xml 에서 해당 프로젝트의 설정을 세팅할 수 있다. ex) js, css 등을 기본적으로 호출할 수 있다. (페이지에 항상 불러오는 파일)
빨간색으로 표시된 부분이 가장 자주 사용하는 컴포넌트이다.
팔레트, 속성, 디자인 아웃라인
웹스퀘어를 이해하고 사용하면 편한 부분도 있긴 하지만, 웹스퀘어 환경에 개발을 해야 하기 때문에 제작하는데 제약사항이 따르기 마련이다.
공통개발자가 자주 사용하는 모듈을 udc 폴더에 따로 개발을 한다면 팔레트에서 재사용이 가능하다.
(udc 폴더에 파일은 있는데 UDC 팔레트에서 보이지 않는다면 위에 새로고침 버튼을 눌러야 한다.)
udc는 보통 개발에서 사용하는 공통모듈이라고 보면 된다.
SVN, GIT 모두 지원하지만, 이클립스에 익숙한 개발자는 SVN을 사용한다.
불편한 점
웹스퀘어 5에서는 button 태그가 기본적으로 없다.
button 태그를 사용하려면 팔레트에서 태그를 감싸고 tagname을 바꿔주고 등등 상당히 불편하다.
가끔 버튼 태그 안에 이미지나, 버튼 안에 글자 색상이 일부 달라서 태그를 또 넣어야 하는데 웹스퀘어에서 제공하는 input type="button"으로 표현하기에는 복잡하고 불편하다.
인스웨이브에서는 웹스퀘어가 차세대라고 홍보하는데 button 태그가 기본적으로 없다는 게 의문이다. html에서 button 태그를 지향하는 점 참고했으면 한다.
속도 문제
위에서도 언급했듯이 웹스퀘어는 맥에서 설치가 불가능하다.
웹스퀘어를 사용하려면 윈도 환경에서만 되며, 속도가 매우 느리다.
성격이 급한 개발자는 인내가 필요한 부분이다.
스크립트 문제
이번 프로젝트에서 스크립트 사용을 하지 못하게 한다. (제이쿼리, 스크립트)
기능을 보여주기 위해 스크립트를 넣긴 해도 실제로 개발에 입힐 때는 스크립트 사용을 하지 말라고 한다.
이유는 웹스퀘어에서 기본적으로 제공되는 기능에 동작이 방해될까 바인 듯하다.
결국 해당 부분은 공통개발자(인스웨이브 웹스퀘어)와 많은 협의가 이뤄져야 하는 부분이다.
프로젝트 퍼블 PL로 있으면서 웹스퀘어 후기를 간단히 요약해 본다면
1. 먼저 개발환경 세팅부터 하자 (인스웨이브 셋팅 요청)
2. 공통개발자 (인스웨이브)와 많은 대화를 해야 한다.
3. 공통개발자가 만들어준 udc를 퍼블에서 넣어서 전달해줘야 하는지 백앤드개발자와 협의가 필요하다. (결국 퍼블에서 입혀서 넣어줘도 개발할 때 변경할 수밖에 없다)
4. udc는 결국 퍼블에서 만들어준걸 udc로 공통개발자가 만들어준다. 이걸 udc로 해야 할지 직접 적용할지는 협의가 필요하다.
웹스퀘어를 이해하고 자주 접해 본 개발자는 웹스퀘어가 편할 수도 있다.
굳이 구현을 안 해도 되는걸 기본적으로 웹스퀘어가 제공해주기 때문에 제작 시간을 절약할 수 있다.
참고자료
https://example.websquare.kr/websquare/websquare.html?w2xPath=/mainContainer.xml
WebSquare
example.websquare.kr
https://docs1.inswave.com/sp5_user_guide/dde1408893e6e120
웹스퀘어5 SP5 개발 가이드
docs1.inswave.com