스튜디오

소개

WebSquare5는 엔진과 스튜디오(개발도구)로 구성됩니다. 스튜디오는 웹스퀘어 화면 파일을 개발할 수 있는 환경을 제공하고, 엔진은 웹스퀘어 화면 파일을 브라우저에 표시합니다.

웹스퀘어 스튜디오는 WYSIWYG 방식의 통합 개발 도구로, 개발자는 컴포넌트 그리기, 스크립트 추가, 화면 확인, 디버깅을 한번에 수행할 수 있습니다.

웹스퀘어 구성

PC 요구 사양

PC 설치 사양

항목

최소

권장

CPU

Pentium 4

Pentium 4 (2.8Ghz)

RAM

4GB

8GB

OS

Windows 7/8/10 (64-bit)

Windows 7/8/10 (64-bit)

HDD 여유 공간

10GB

50GB

디스플레이

1280 * 1024

1280 * 1024

Eclipse 지원

Eclipse 지원

항목

내용

Eclipse 지원

  • 2022-6 ~

  • 2020-12

  • 2020-09

(위 버전 이클립스 사용시 최소 jdk 11버전 이상 사용 가능.)

  • 2020-06

  • 2020-03

  • 2019-12

  • 2019-06

  • 2019-03

  • 2018-12

  • 2018-09

  • 4.8 (Photon)

JDK 지원

  • Java 1.8 ~ 11

  • jdk15, jdk17 지원.

    • 이클립스 202209 버전 플러그인 설치 지원.

    • STS-4.16.1 버전 플러그인 설치 지원.

    • 전자정부프레임워크 4.0.0 버전 플러그인 설치 지원.

전자 정보

eGovFrameDev-3.10.0-64

(해당버전은 jdk 11에서만 정상적인 설치가능, 설치후 jdk 1.8변경후 사용가능합니다.)

STS

~ Spring Tools 4.15.3 (-vm 옵션을 Java11로 변경하면 정상 동작.)

Spring Tools 4.16.0 (jdk17을 사용하지 않을 경우 maven, spring 기능 및 메뉴가 나오지 않음)

https://www.eclipse.org/forums/index.php/t/1111605/

제약 사항

PC 운영 체제

Window OS 만 지원합니다.

JRE(JDK) 지원

기존 웹스퀘어 스튜디오 버전에서 제공되던 jre 포함 버전은 미지원.

인스톨러 설치

설치 전 준비

(1) 인스톨러 준비

사용자 PC 사양에 맞는 인스톨러를 제공 받으십시오.

(2) Java 1.8 준비

WebSquare Studio IWD는 Java 1.8 이상에서 동작합니다.

사용자 PC에 Java 1.8 이상을 설치하십시오.

(3) 기존 스튜디오 삭제

기존에 설치된 스튜디오가 있을 경우, 설치된 스튜디오를 먼저 제거하십시오.

단, workspace 폴더는 삭제하지 말고 계속 사용하십시오.

(4) 32-bit (x86) 인스톨러 사용

64-bit OS에서 32-bit JRE를 사용하려면, 32-bit (x86) 인스톨러를 실행하십시오.

인스톨러 설치

  1. 인스톨러를 실행합니다.

  2. 다음을 클릭합니다.

  1. 동의함을 클릭합니다.

  1. WebSquare Studio IWD는Java 1.8 이상에서 동작합니다. Java 경로를 bin 폴더까지 지정한 후 다음을 클릭합니다.

  1. 설치 경로를 지정합니다.

  2. 설치를 클릭합니다.

  1. 아래와 같이 설치가 진행됩니다.

  1. 다음을 클릭합니다.

  1. 성공적으로 설치되면 아래와 같은 화면이 나타납니다.

  1. Studio를 실행하십시오.

  1. Workspace를 지정합니다.

  1. Studio가 시작되고 아래와 같이 웰컴 페이지가 표시됩니다. 각 항목을 클릭하면 해당 내용을 확인할 수 있습니다.

YouTube 동영상


스튜디오 사용법 동영상 모음

(https://youtube.com/playlist?list=PL7a9HhkvOVb1xY17i96E7XTiCQV33AWg0)

  1. Help – 웹스퀘어 라이선스 등록을 선택하여, 라이선스를 입력합니다.

라이선스 등록

  1. 라이선스가 등록되면 아래와같은 창이 나타납니다.

라이선스 확인

Eclipse 플러그인 설치

설치 전 준비

WebSquare5 Studio를 설치하려는 PC에 JDK(Java Develoment Kit) v1.8 버전이 설치되어 있어야 합니다.

한글 포함 금지 및 글자수 제한


설치 폴더명이 한글을 포함하거나 256자를 초과할 경우 WebSquare5 Studio가 정상적으로 작동하지 않을 수 있습니다.

최신 Eclipse 설치 지원


20220325 버전 이후 부터 최신 이클립스 설치를 지원합니다.

Eclipse 플러그인 설치

  1. webSquare_5_0_5_feature_xxx.zip 파일을 준비합니다. (파일명은 변경 될 수 있습니다.)

WebSquare feature 파일

  1. Eclipse 공식 홈페이지에서 제공하는 Eclipse IDE for Java EE Developers를 설치합니다. (Eclipse IDE for Java EE Developers는 WebSquare5이 사용하는 기본적인 플러그인을 포함합니다.)

  2. Eclipse를 실행합니다.

  3. Help – Install New Software... 을 선택합니다.

Help – Install New Software... (Eclipse)

  1. 아래와 같이 Install 창이 나타나면 Add 버튼을 클릭합니다

Eclipse 설치 마법사

  1. 아래와 같이 Add Repository 창이 나타나면 원하는 이름을 Name 항목에 입력합니다.

Name 지정

  1. Archive.. 버튼을 클릭하여 Location에 websquare_5_0_5_feature_xxx.zip 파일을 추가합니다.

  2. Add 버튼을 클릭합니다.

Location 지정

  1. Install 창에 webSquare_5_0_5_feature_xxx.zip 파일의 경로가 표시된 것을 확인합니다.

  2. Details 항목에서 제일 상단의 Show only the latest version of available software 항목만 남겨두고 모두 체크 해제합니다.

경로 확인 및 Details 항목 선택 해제

  1. Details 항목의 체크박스를 해제한 후, 상단에 feature 파일 2개가 표시되는지 확인합니다.

feature 파일 확인

  1. 2개의 feature 파일들을 모두 선택하고, Next 버튼을 클릭합니다.

feature 파일 선택

  1. 선택한 feature 파일들을 확인하고, Next 버튼을 클릭합니다.

선택한 feature 확인

  1. 동의 후, Finish 버튼을 클릭합니다.

라이선스 동의

  1. 아래와 같은 메시지가 설치 중 표시되면 Install anyway 버튼을 클릭합니다.

설치 확인

  1. Restart 버튼을 클릭합니다.

재시작

  1. Eclipse가 재실행되고 WebSquare 플러그인이 설치됩니다.

  2. Open Perspective 메뉴를 사용하여 WebSquare 설치를 확인합니다.

Open Perspective

  1. Eclipse 우측 상단에서 WebSquare 아이콘을 확인합니다.

  2. Create a Project를 클릭합니다.

Create a Project

  1. New Project에서 WebSquare Project가 생성되는지 확인합니다

WebSquare Project 확인

설정

  1. [Windows] - [Preferences]를 클릭합니다.

  2. 왼쪽 목록에서 WebSquare를 클릭합니다.

  3. 각 항목을 설정합니다.

Windows – Preferences

전역 설정 항목

항목

설명

Body size

해상도 (단위: 픽셀)

추가한 해상도는 툴바의 Change Body Size 메뉴를 통해 확인할 수 있습니다.

Context Menu Setting

컨텍스트 메뉴 참조.

Embedded Engine

WebSquare5 Engine 업데이트

Expert ShortCuts

특수 키 사용 여부

  • Ctrl + 컴포넌트 이동: 컴포넌트 복사

  • Alt + 컴포넌트 그리기: Static Position의 컴포넌트 생성

  • Shift + 컴포넌트 그리기: Relative Position의 컴포넌트 생성

External Programs

미리보기 용 브라우저 추가

툴바의 Execute External Programs 메뉴를 통해 추가한 브라우저를 확인할 수 있습니다.

Message Interface


Preview Setting

WebSquare5의 내장 미리보기 기능 사용 여부

Use External Preview (No preview tab)을 선택 해제하면 내장 미리보기 기능을 사용할 수 있습니다.

Server Groups Setting


엔진 교체

  1. WebSquare Studio를 시작합니다.

  2. [Window]-[Preferences]를 선택합니다.

  3. [WebSquare]-[Embedded Engine]를 선택합니다.

  4. 현재 설치된 Engine 버전을 확인합니다.

엔진 버전 확인

  1. Add를 클릭하여 Engine 파일을 추가합니다. (zip 확장명의 압축 파일로, 압축 해제할 필요는 없습니다.)

  2. 새 Engine이 추가되는 과정은 오른쪽 아래의 상태 진행 창에서 확인할 수 있습니다. 100% 완료되면 새로운 Engine이 성공적으로 추가됩니다.

  3. 새 버전의 Engine을 선택하고 OK 버튼을 클릭하면 스튜디오가 재 시작되며 새로운 Engine으로 바뀌어 있는 것을 확인할 수 있습니다.