WYSIWYG's Web application development tool

1. IINN Studio
for jqwidgets
Web application development tool
IINNSoft

2. table of contents
• 개요
• 특징/장점
• 주요기능
• 유사 제품 보유 타사 비교
• 기대효과
• 맺음말
IINNSoft

3. 개요
IINN Studio는 비주얼 베이직의 개발 방식과 유사한 위지위그(WYSIWYG) 방식 이고 Jquery 기반의 jQWidgets
(HTML5 UI Framework)의 어플리케이션 개발 도구 입니다. 120개국 300,000명 이상의 개발자가 사용
IINNSoft

4. 특징/장점
• 화면설계서
• Component object
• jsp(js,html)
• Java(controller, service & etc)
Drag
&
drop
Object
java
설계서
jsp
I. drag & drop 자동 생성
IINNSoft

5. 특징/장점
• IINN Studio에서 복사는 Object 복
사 이므로 태그속성부터 동작 스크
립트등 객체자체를 복사합니다.
II. Copy & Paste
• 텍스트 에디터에서 객체 복사와
유사히 하기 위해서는 소스의
여러 개소에서 위치를 찾아 여
러번 복사가 필요 합니다.
∙ ∙ ∙ ∙
∙ ∙ ∙ ∙
객체 선언
이벤트 정의
html 영역
IINNSoft

6. 특징/장점
• Jqwidgets에서 Component를 완성시키기 위해서는 Property, Event, Method에 적절한 code를 설정해야
하는데 IINN Studio에서 제공하는 Help Assist를 활용하면 로컬 환경에서 설정값을 변경해 가면서 테스트
가 가능하고 이를 통해 property의 역할과 적절한 설정값을 쉽게 확인할수 있습니다.
III. Help assist
속성 설명
Css
Html tag
javascript
IINNSoft

7. 주요기능
• Drag&drop을 통해 component 배치 => tag등 자동생성
• 우클릭 메뉴를 통해 크기 간격등 설정
• 속성 창을 통해 css 추가/변경 용이
I. Screen Design
기준은 노란색
IINNSoft

8. 주요기능
• 트리 형태로 전체 구조 표현
• 디자인 창의 컴포넌트 선택
II. Components view & Properties control
팝업에의한 하위 속성
표시와 수정
콤보박스 형태 수정
인풋박스 형태 수정
컨트롤키를
누른상태에서
마우스 오버가
되면 tooltip
도움말 표시
• 속성값 표시와 수정
편집중 디자인 창
표시와 활성 디자인
창 변경
IINNSoft

9. 주요기능
• Screen design을 완성하는것 만으로 화면설
계서 자동 생성
• 모든 컴포넌트 정보를 한눈에 파악 가능
• 엑셀 출력을 통해 설계서를 엑셀로 출력
• 화면 설계서에서 복사/붙여넣기를 통해 컴
포넌트 ID등의 일괄 변경 용이
• 모든 컴포넌트의 이벤트를 확인하고 스크립
트를 바로 수정 가능
III. Design description
IINNSoft

10. 주요기능
• 미리보기는 embedded browser 를 활용
• One click capture - Capture 버튼 클릭만으
로 별도 범위 지정없이 보이는 그대로 jpg
파일 생성
• 화면 설계서의 화면 캡처 영역에 자동으로
표시(엑셀 출력 포함)
• Multi screen capture - 화면경로 변경후
Refresh를 통해 다른 경로의 화면 캡처 용이
IV. Preview & Screen capture
IINNSoft

11. 주요기능
• 변수, 메소드, 데이터 유형에 따라 접근 가능한 키워드 목록 제공을 통해 코드를 더 빠르고 효율적
으로 작성할 수 있습니다.
V. Script editor code assist
IINNSoft

12. 유사 제품 보유 타사 비교
항목 A사 B사
IINN Studio &
jqwidgets
Drag & drop 개발툴 없음 제공 IINN Studio
Jsp, java등 소스생성 불가 Jsp만 생성 Jsp,java등 모두 생성
설계서 생성 불가 불가 또는 유야무야
규격화된 문서 형태
의 엑셀 출력도 가능
전자정부 프레임워크 연동 용이
전문가 또는
별도가이드 필요
용이(샘플도 제공)
개발자 접근 용이성 용이
공통 작업
가능 전문가 필요
Help Assist 제공으
로 용이성 향상
재사용성 하 중 상(소스와 설계서)
비용 중가 고가 저가
IINNSoft

13. 기대효과
• 재사용성 - IINN Studio에서 drag&drop과 copy&paste 하는 것만으로 컴포넌트의 배치와 설계서
작성 그리고 프로그램 소스를 생성 합니다. 또한 재사용을 프로그램 소스에 국한 하지 않고 설계
문서 까지 확장 합니다.
• 생산성
- GUI방식으로 시각화, 컴포넌트화
- 컴포넌트 생성시 html, javascript, java, 설계서 모두 반영
- IINN Studio의 조작이 간단하고 범용 기술의 사용으로
초급/중급 개발자가 쉽게 사용 가능
• 유지보수
- 시각화/컴포넌트화 되어있기 때문에 개발된
프로그램을 이해하기 쉽고 유지 보수가 용이
또한 업무 인수 인계 시간 절감
I. 비용절감
재사용성 향상
생산성 향상
비용절감
유지보수 용이
IINNSoft

14. 기대효과
• Jqwidgets은 이미 120개국 300,000명 이상의 개발자가 사용한 안정적인 프레임워크로 IINN Studio
와 함께 사용함으로써 생산물의 통일성을 향상시킵니다. 또한 컴포넌트 표준 Pool과 레이아웃 표준
Pool을 생성해두면 객체 복사/붙여넣기로 대부분의 개발이 이루어 집니다.
II. 품질 향상
설계서
소스
동기화
통일성
유지보수
• 컴포넌트 표준 Pool
- 인풋박스, 버튼등 각각의 컴포넌트에 대한 폰트, 색깔등
의 디자인과 수행 동작을 미리 정의함으로써 IINN Studio
에서 복사/붙여넣기 후에 수정을 최소화 합니다.
• 레이아웃 표준 Pool
- 화면 종류에 따른 레이아웃을 미리 정의해 두고 신규 화
면 생성시에 복사/붙여넣기로 화면 레이아웃을 완성합니
다.
IINNSoft

15. Jqwidgets 에서 제공하는 테마(css)빌더 샘플
IINNSoft

16. 감사합니다.
항상 성실한 자세로 최선을 다하겠습니다.
Name : 엄정욱
E-Mail : Jeongwook.eom@gmail.com
Homepage : http://www.iinnsoft.com
Mobile : 010-4499-4944
IINNSoft