HTML5 Contents Authoring Tool

2

HTML5 콘텐츠 저작 도구

Web Contents Authoring Tool

1. WebCAT 소개

- 웹표준에 따른 콘텐츠 개발- CrossBrowsing 가능- N-Screen 환경 구현 가능

HTML5CSS3

Easy interfaceFast Editing

- Easy Interface 제공- Chrome Desktop App으로 설치 배포에 용이- Quick editing & exporting

No CodingNo Publishing

- 코딩과 퍼블리싱을 직접 하지 않아누구나 사용이 가능

- 개발 기간과 비용을 절감할 수 있음

WYSIWYGPreview

- 실제 콘텐츠 모습과 저작화면이 동일함- 모바일과 PC환경에서의 콘텐츠 preview 제공

3

2. WebCAT의주요특징

다양한 콘텐츠 유형에 대응할 수 있습니다.

[모바일 콘텐츠 유형] [PC 콘텐츠 유형]

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

4

2. WebCAT의주요특징

저작 환경과 콘텐츠사용 환경에 제한되지 않습니다.

[Chrome 웹스토어]

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

5

2. WebCAT의주요특징

템플릿을 활용하여 누구나 쉽게 콘텐츠를 개발합니다.

[콘텐츠 템플릿] [테마 마법사]

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

6

3. WebCAT 사용법

일반 유저

전문 개발자 웹캣 테마

테마 마법사

구입

개발

저작

콘텐츠

납품

마켓 또는 공유 place

[WebCAT 서비스 flow]

전문 개발자는 테마를 만들어 공급하고, 일반 사용자는 저작화면에 WebCAT과 연동되어 있는 공유 플레이스를 통해 간편하게 테마를 받습니다. 받은 테마는 마법사 기능을 통해 내용을 구성하고 내보내기 절차를 진행하여 콘텐츠를 완성합니다.

WebCAT 활용 프로세스

7

3. WebCAT 사용법

WebCAT 화면 구성

다양한요소를삽입할수있는‘컴포넌트’ 영역입니다.

모든페이지에공통으로구성되는요소들을넣는 ‘콘트롤러’ 영역입니다.

여러가지속성을정의할수있는영역입니다.

애니메이션효과를설정하는타임라인영역입니다.

8

3. WebCAT 사용법

새 콘텐츠 만들기

새 파일 열기를 누르면 테마를 선택하는 창이 나타납니다. 여기서 원하는 테마를 선택하거나 빈 new file을 선택하면 편집화면이 열립니다.

9

3. WebCAT 사용법

멀티미디어 삽입하기

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

10

3. WebCAT 사용법

퀴즈 삽입하기

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

11

3. WebCAT 사용법

웹자원 삽입하기

아이프레임 태그를 활용하여 웹상의 다양한 open source를 콘텐츠에 연동할 수 있습니다.

12

3. WebCAT 사용법

Tab / Slide 기능 삽입하기

학습내용 구성에 필요한 tab 기능과 slide 기능 등을 모듈화하여 제공합니다.

13

3. WebCAT 사용법

컨트롤러 구성하기

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

14

3. WebCAT 사용법

마법사 활용하기

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

15

3. WebCAT 사용법

콘텐츠 내보내기

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

16

4. WebCAT 콘텐츠샘플

WebCAT으로 개발된 다양한 샘플 콘텐츠를 확인해 보세요.

샘플보기

http://gowebcat.com/?r=webcat&c=5