웹캣(WebCAT) 소개서 http://www.gowebcat.com

1. HTML5 Contents Authoring Tool

2. 2
HTML5 콘텐츠 저작 도구
Web Contents Authoring Tool
1. WebCAT 소개
- 웹표준에 따른 콘텐츠 개발
- CrossBrowsing 가능
- N-Screen 환경 구현 가능
HTML5
CSS3
Easy interface
Fast Editing
- Easy Interface 제공
- Chrome Desktop App으로 설치 배포에 용이
- Quick editing & exporting
No Coding
No Publishing
- 코딩과 퍼블리싱을 직접 하지 않아
누구나 사용이 가능
- 개발 기간과 비용을 절감할 수 있음
WYSIWYG
Preview
- 실제 콘텐츠 모습과 저작화면이 동일함
- 모바일과 PC환경에서의 콘텐츠 preview 제공

3. 3
2. WebCAT의 주요 특징
다양한 콘텐츠 유형에 대응할 수 있습니다.
[모바일 콘텐츠 유형] [PC 콘텐츠 유형]
교육용 콘텐츠에서 자주 사용되는 interaction 요소과 기능 모듈을 활용하여 다양한 유형의 콘텐츠를 개발할 수 있습니다.
모바일 및 PC 환경 등의 사용환경 특성을 고려하여 화면을 구성할 수 있으며, 화면 크기와 비율 등도 자유롭게 설정할 수 있습니다.
플래시에서 경험해 온 다양한 effect와 animation 효과를 연출할 수 있으며, 웹 자원 및 학습요소의 콘텐츠 연계가 자유로워 콘텐츠 유형 개
발에 유리합니다.

4. 4
2. WebCAT의 주요 특징
저작 환경과 콘텐츠사용 환경에 제한되지 않습니다.
[Chrome 웹스토어]
WebCAT은 Chrome desktop application 입니다. 전세계 어디서나 Chrome 웹스토어에서 다운로드 받아 사용할 수 있습니다. Chrome
브라우저만 설치하면 바로 사용이 가능합니다.
WebCAT 콘텐츠는 표준 HTML5 스펙을 준용합니다. HTML5와 호환되는 물리적 사용환경이라면, 모두 사용이 가능합니다.
또한 WebCAT의 콘텐츠는 웹기반 교육서비스를 위한 시스템에 탑재할 수 있는 형태로 exporting 됩니다. 각 시스템에 맞는 유형으로 연동
모듈을 삽입하여 활용할 수 있습니다.

5. 5
2. WebCAT의 주요 특징
템플릿을 활용하여 누구나 쉽게 콘텐츠를 개발합니다.
[콘텐츠 템플릿] [테마 마법사]
WebCAT의 전 기능을 익히지 않아도, 템플릿(WebCAT Theme)를 활용하여 누구나 쉽고 빠르게 콘텐츠를 만들 수 있습니다.
콘텐츠의 구조와 화면설계, 디자인 요소 등을 포함한 콘텐츠 템플릿을 제공합니다. 콘텐츠를 구성할 내용만 있다면, 간단한 이미지 삽입과
비디오 링크 변경 등을 통해 콘텐츠를 만들 수 있습니다. 마법사(wizard) 기능을 통해 템플릿에서 사용자가 편집할 요소를 순차적으로 제시
하여 초급자도 사용이 가능합니다.

6. 6
3. WebCAT 사용법
일반 유저
전문 개발자 웹캣 테마
테마 마법사
구입
개발
저작
콘텐츠
납품
마켓 또는 공유 place
[WebCAT 서비스 flow]
전문 개발자는 테마를 만들어 공급하고, 일반 사용자는 저작화면에 WebCAT과 연동되어 있는 공유 플레이스를 통해 간편하게 테마를 받습
니다. 받은 테마는 마법사 기능을 통해 내용을 구성하고 내보내기 절차를 진행하여 콘텐츠를 완성합니다.
 WebCAT 활용 프로세스

7. 7
3. WebCAT 사용법
 WebCAT 화면 구성
다양한 요소를 삽입할 수 있는
‘컴포넌트’ 영역입니다.
모든 페이지에 공통으로 구성되는
요소들을 넣는 ‘콘트롤러’ 영역입니다.
여러가지 속성을 정의할 수 있는
영역입니다.
애니메이션 효과를 설정하는
타임라인 영역입니다.

8. 8
3. WebCAT 사용법
 새 콘텐츠 만들기
새 파일 열기를 누르면 테마를 선택하는 창이 나타납니다. 여기서 원하는 테마를 선택하거나 빈 new file을 선택하면 편집화면이 열립니다.

9. 9
3. WebCAT 사용법
 멀티미디어 삽입하기
이미지, 사운드, 비디오, 텍스트 등의 요소를 삽입합니다. 이미지는 PC의 파일 탐색기에서 drag&drop하여 삽입하는 것도 가능합니다.
비디오는 비디오의 위치를 스트리밍 경로나 로컬의 상대경로로 설정하여 삽입합니다.

10. 10
3. WebCAT 사용법
 퀴즈 삽입하기
OX, 단답형, 객관식 유형 등의 퀴즈 모듈을 제공합니다. 화면에 삽입할 퀴즈 유형을 클릭하면, 퀴즈 요소가 나타납니다. 지문, 보기, OX 버
튼 요소, 해설, 정답확인 버튼등의 요소를 클릭하고 내용을 입력합니다.

11. 11
3. WebCAT 사용법
 웹자원 삽입하기
아이프레임 태그를 활용하여 웹상의 다양한 open source를 콘텐츠에 연동할 수 있습니다.

12. 12
3. WebCAT 사용법
 Tab / Slide 기능 삽입하기
학습내용 구성에 필요한 tab 기능과 slide 기능 등을 모듈화하여 제공합니다.

13. 13
3. WebCAT 사용법
 컨트롤러 구성하기
학습 진행에 필요한 사용자 컨트롤러 구성도 기능 모듈을 활용하여 구성이 가능합니다.

14. 14
3. WebCAT 사용법
 마법사 활용하기
테마 메뉴에서 테마 마법사 실행하기를 선택하면, 저작 마법사가 나타납니다. 순차적으로 작업할 부분을 따라가면서 수행하면 콘텐츠를 완
성할 수 있습니다. 마법사 기능 사용을 해제하면 직접 편집화면에서 저작이 가능합니다.

15. 15
3. WebCAT 사용법
 콘텐츠 내보내기
콘텐츠 저작이 완료되면, 메인 메뉴에서 ‘퍼블리시’ 를 선택합니다. 저작 파일을 HTML5 기반 파일로 자동 변환하여 로컬 PC에 저장해 줍니
다. 이 파일은 LMS에 포팅하거나 웹으로 올려 서비스할 수 있습니다.

16. 16
4. WebCAT 콘텐츠 샘플
WebCAT으로 개발된 다양한 샘플 콘텐츠를 확인해 보세요.
샘플보기
http://gowebcat.com/?r=webcat&c=5