KR20160096360A

KR20160096360A - 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생방법과 이를 이용한 이펍 애니메이션 생성 및 재생 시스템

Info

Publication number: KR20160096360A
Application number: KR1020150017887A
Authority: KR
Inventors: 한정준; 최태준
Original assignee: 주식회사 윌드림
Priority date: 2015-02-05
Filing date: 2015-02-05
Publication date: 2016-08-16
Also published as: KR101651928B1

Abstract

본 발명은 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력모듈(10); 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환모듈(20); 및 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성 모듈(30);를 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템과 이에 의하여 수행되는 이펍 애니메이션 실시간 생성 및 재생 방법에 관한 것이다.

Description

스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생방법과 이를 이용한 이펍 애니메이션 생성 및 재생 시스템{Method for real-time generation and reproducing of EPUB animation using style sheet animation and real-time generation and reproducing of EPUB animation system using thereof}

본 발명은 이펍 애니메이션의 생성 및 재생 방법에 관한 것으로, 보다 상세하게는 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생 방법 및 이를 이용한 이펍 애니메이션 생성 및 재생 시스템에 관한 것이다.

이펍(EPUB, electronic publication)은 국제 디지털 출판 포럼(IDPF, International Digital Publishing Forum)에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정(reflowable)이 가능하게 설계되어 EPUB으로 만들어진 내용을 볼 때 디스플레이하는 기계의 형식, 크기에 자동으로 최적화되어 보여줄 수 있게 한다.

EPUB는 2007년 9월 이전에 있던 오픈 eBook 표준을 대체하기 위해 국제 디지털 출판 포럼에서 공식 표준으로 채택되으며, 최근 HTML5를 기준으로 하고 있는 EPUB3가 발표되어 사용되면서, 이전의 EPUB보다 표현할 수 있는 범위가 매우 확대되고 즉, EPUB3 기반의 전자서적은 웹과 마찬가지로 다양한 애니메이션 등 멀티미디어 컨텐츠의 제공이 가능해 진 환경이다.

한편 현재 HTML5의 애니메이션은 주로 캔버스(canvas) 기법을 이용하여 화면에 애니메이션을 직접 만들어내는 방식을 채택하고 있다.

그러나, 캔버스(canvas) 기법을 이용하여 제작된 애니메이션은 대부분 이펍과 호환성이 낮다. 즉, 현존하는 EPUB3 뷰어(viewer)들이 캔버스(canvas)를 대부분 지원하지 않고 있으며, 캔버스(canvas)를 지원하는 뷰어(viewer)도 이미지의 동적로딩(loading)을 금지하고 있는 실정이다. 이에 따라, HTML5의 캔버스(canvas)기법을 이용하여 이펍 애니메이션을 제작하더라도 이러한 애니메이션을 재생할 수 없는 뷰어가 대부분이다.

또한, 이러한 뷰어에서 재생가능한 애니메이션을 제작하더라도 사진파일이나 이미지 파일을 이용할 수 없고, 사용자가 점,선,면 등의 이동에 대한 수식을 만들어 객체의 이동을 설정한 애니메이션만이 재생이 가능한 환경이다.

즉, 기존의 캔버스(canvas) 방식으로는 예컨대 축구공이 날아가는 이동 애니메이션이나, 예컨대 말이 뛰는 프레임 애니메이션(frame Animation), 예컨대 바람개비가 빙글빙글 도는 회전 애니메이션, 예컨대 새가 날개짓을 하며 날아가는 복합 애니메이션 등을 EPUB3로 표현할 수 없으며, 이를 위해서는 사용자는 점,선,면을 기반으로 객체를 만들고, 이들의 이동에 관한 수식을 통해 애니메이션을 제작하여야 하며, 이는 일반 사용자에게는 거의 불가능에 가까운 작업이다.

따라서, 사용자가 용이하게 EPUB3 애니메이션을 제작하고 이를 일반적인 EPUB3뷰어에서 재생하는 것이 가능한 이펍 애니메이션 생성 시스템 및 생성방법과 이에 연동하는 이폅 애니메이션의 재생방법이 절실히 요구되고 있다.

한편, 현재 EPUB3를 지원하는 EPUB3 뷰어들은 위와 같이 캔버스(canvas) 방식을 지원하지 않는 반면, CSS3는 대부분 지원하고 있다. CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 이에 따라 CSS3 애니메이션을 제작하는 경우 CSS3를 통해 사용할 이미지를 미리 처리하기 때문에 이미지 동적 로딩의 문제도 해결할 수 있다.

그러나, CSS3는 정적인 방식으로 사용자가 원하는 애니메이션을 동적으로 생성할 수 없다. 즉, HTML이나 이폅이 표현되기 전에 CSS가 완성되어 있어야 하므로, 현재의 애니메이션 툴(Animation Tool)이나 위그지그 에디터(WISIWYG Editor)로는 CSS3 애니메이션을 동적으로 만들어낼 수 없는 문제가 있다.

대한민국 특허공개공보 공개번호 10-2010-0007702호 (애니메이션 제작 방법 및 장치)

따라서, 본 발명은 상술한 문제를 해결하여, EPUB3 뷰어와 호환되는 CSS3 애니메이션을 이용하여 사용자가 실시간으로 애니메이션 툴(Animation Tool)이나 위지위그 에디터(WISIWYG editor)로 입력한 애니메이션을 EPUB3 애니메이션으로 생성하여 재생할 수 있고 결과적으로 일반 사용자도 이폅 애니메이션을 포함한 다양한 형태의 이펍 파일을 용이하게 제작할 수 있도록 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 방법 및 이를 이용하는 이펍 애니메이션의 생성 및 재생 시스템을 제공하는 것을 목적으로 한다.

상기 과제를 해결하기 위하여 본 발명은 일 측면에서, 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생방법으로, 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력단계; 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환단계; 및 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성단계;를 포함하는 것을 특징으로 한다.

바람직하게는, CSS3 애니메이션 요소 입력단계는, 상기 CSS3 애니메이션 요소와 연관된 변수들을 초기화하는 변수 초기화 단계; 애니메이션의 종류 선택을 위한 애니메이션의 종류 선택 사용자 인터페이스를 디스플레이하여, 상기 애니메이션의 종류 선택 사용자 인터페이스를 통해 애니메이션의 종류에 대한 선택을 입력받고 각 선택된 애니메이션의 CSS3 애니메이션 요소를 입력받는 애니메이션종류 선택 단계; 애니메이션 동작 리스트 생성을 위한 동작 리스트 생성 사용자 인터페이스를 디스플레이하여, 동작 리스트 생성 사용자 인터페이스를 통해 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 동작 리스트를 생성하여 디스플레이하는 동작리스트 생성단계;를 포함하여 수행된다.

여기서 애니메이션의 종류는 회전 애니메이션, 이동 애니메이션, 프레임 애니메이션, 복합 애니메이션으로, 선택된 애니메이션의 크기, 반복횟수, 실행시간을 CSS3 애니메이션 요소로서 입력받는 것이 바람직하다.

또한, 여기서 상기 동작 변화에 필요한 CSS3 애니메이션 요소는 상기 애니메이션의 종류에 따라 상이한 요소가 입력되는 것이 바람직하다.

또한, 바람직하게는 상기 HTML5 커스텀 어트리뷰트로 변환단계는, 상기 입력된 CSS3 애니메이션 요소의 값을 상기 변수에 설정하는 변수 설정단계; 상기 설정된 변수에 각각에 대응하는 HTML5 커스텀 어트리뷰트를 정의하여, 설정된 변수값을 상기 정의된 HTML5 커스텀 어트리뷰트의 밸류값으로 저장하여 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하는 HTML5 커스텀 어트리뷰트 변환단계; 및 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하고 DIV 태그를 입력받아 HTML 파일로 저장하는 HTML5 파일 생성단계를 포함하여 수행된다.

여기서, 전자책 파일 생성단계(S30)는 HTML 태그를 분석할 자바스크립트 파일(javascript file)을 포함하여 상기 전자책 파일을 생성하는 것이 바람직하다.

또한, 여기서 상기 전자책 파일에 포함된 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 EPUB3 애니메이션 실행단계;를 포함하는 것이 바람직하다.

나아가, 여기서 상기 EPUB3 애니메이션 실행단계는, 상기 전자책 파일을 로딩하여 HTML 태그를 분석할 자바스크립트 파일(javascript file)의 메소드(method)를 호출하는 전자책 파일 로딩단계; HTML5 커스텀 어트리뷰트를 분석하여 CSS3애니메이션 요소로 변환하고 JSon 형태로 패킹(packing)하는 HTML5 커스텀 어트리뷰트를 분석단계; 패킹된 JSon을 기반으로 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 추출된 속성들을 CSS3의 문법에 맞게 문자열로 조합하여 바디(body)의 스타일 시트로 등록하는 CSS3 애니메이션 속성추출단계; 및 CSS3 애니메이션의 동작 리스트를 추출하여 동작 단위로 키프레임(KeyFrame)에 등록하며 등록되는 동작들을 CSS3의 문법에 맞게 문자열로 조합하여 스타일 요소로 등록하는 키프레임등록단계;를 포함하여 스타일 시트로 등록된 CSS3 애니메이션 요소의 CSS3 속성과 동작의 스타일 요소에 따라 이펍파일의 로딩 완료시 EPUB3 애니메이션 이 자동 실행되는 것이 바람직하다.

다른 측면에서 본 발명은 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템으로, 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력모듈, 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환모듈; 및 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성 모듈;를 포함하는 것을 특징으로 한다.

바람직하게는 상기 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 EPUB3 애니메이션 분석 및 실행 모듈;을 더 포함한다.

본 발명에 의하면, HTML5를 이용한 이펍 파일 즉, EPUB3 파일의 제작에 있어, EPUB3 애니메이션과 HTML5의 애니메이션의 호환성의 문제를 해결하여, EPUB3 뷰어와 호환되는 CSS3 애니메이션을 EPUB3 애니메이션으로 생성하여 재생할 수 있으므로 전문가가 아닌 사용자도 애니메이션 툴이나 위지위그 에디터(WISIWYG editor)를 사용하여 용이하게 이펍 애니메이션을 실시간으로 제작 및 재생할 수 있게 하는 효과가 있다.

도 1은 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템의 개략 구성도.
도 2는 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션◎실시간 생성 및 재생 방법의 흐름도.
도 3a는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계의 흐름도.
도 3b는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계를 설명하기 위한 도면.
도 3c는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계를 설명하기 위한 도면.
도 4는 본 발명의 일 실시예의 HTML5 커스텀 어트리뷰트 변환단계의 흐름도.
도 5는 본 발명의 일 실시예의 EPUB3 애니메이션 실행단계의 흐름도.

후술하는 본 발명에 대한 상세한 설명은, 본 발명이 실시될 수 있는 특정 실시예를 예시로서 도시하는 첨부 도면을 참조한다. 이들 실시예는 당업자가 본 발명을 실시할 수 있기에 충분하도록 상세히 설명된다. 본 발명의 다양한 실시예는 서로 다르지만 상호 배타적일 필요는 없음이 이해되어야 한다. 따라서, 후술하는 상세한 설명은 한정적인 의미로서 취하려는 것이 아니며, 본 발명의 범위는 적절하게 설명된다면 그 청구항들이 주장하는 것과 균등한 모든 범위와 더불어 첨부된 청구항에 의해서만 한정된다. 도면에서 유사한 참조부호는 여러 측면에 걸쳐서 동일하거나 유사한 기능을 지칭한다.

본 발명은 CSS3, HTML5, EPUB3의 기술표준에 기반으로 구현되는 HTML5를 이용한 이펍 파일 즉, EPUB3 파일의 제작에 있어, EPUB3 애니메이션과 HTML5의 애니메이션의 호환성의 문제를 해결하여, EPUB3 뷰어와 호환되는 CSS3 애니메이션을 EPUB3 애니메이션으로 생성하여 재생할 수 있으므로 전문가가 아닌 사용자도 애니메이션 툴이나 위지위그 에디터(WISIWYG editor)를 사용하여 용이하게 이펍 애니메이션을 실시간으로 제작 및 재생할 수 있게 하며, EPUB3 파일 또는 이로 변환이 가능한 HTML5 파일의 생성 및/또는 재생을 위한 EPUB3 에디터 또는 편집툴, HTML5 에디터 또는 편집툴, 또는 이에 포함되는 애니메이션 툴에 포함되어 이를 구성하거나 이에 삽입 또는 연동하는 모듈형태의 소프트웨어 형태로 구현된다. 이하, 본 명세서에 있어서는 CSS3, HTML5, EPUB3의 기술표준 및 EPUB3 에디터 또는 편집툴, HTML5 에디터 또는 편집툴, 또는 이에 포함되는 애니메이션 툴의 일반적인 기술적 사항의 설명은 생략하고 본 발명의 특징을 중심으로 도면을 참조하여 설명한다.

도 1은 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템의 개략 구성도이다.

도 1을 참조하면, 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템은 CSS3 애니메이션 요소 입력모듈(10), HTML5 커스텀 어트리뷰트 변환모듈(20), 전자책 파일 생성 모듈(30), EPUB3 애니메이션 분석 및 실행 모듈(40)을 포함하여 구성된다. 이외 애니메이션의 종류 선택을 위한 애니메이션의 종류 선택 사용자 인터페이스 및 애니메이션 동작 리스트 생성을 위한 동작 리스트 생성 사용자 인터페이스를 포함하는 것으로 정의된다.

CSS3 애니메이션 요소 입력모듈(10)은 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성한다. 본 명세서에 있어서도 3a 내지 도 3c를 참조하여 설명되는 일 실시예의 CSS3 애니메이션 요소 입력단계(S10)를 수행한다.

HTML5 커스텀 어트리뷰트 변환모듈(20)은 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 기능을 수행한다. 본 명세서에 있어서 도 4를 참조하여 설명되는 일 실시예의 HTML5 커스텀 어트리뷰트 변환단계(S20)를 수행한다,

전자책 파일 생성 모듈(30)은 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 기능을 수행하는 모듈로서 정의된다. 본 명세서에 있어서 도 4를 참조하여 설명되는 일 실시예의 전자책 파일 생성단계(S30)를 수행한다.

EPUB3 애니메이션 분석 및 실행 모듈(40)은 상기 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 기능을 수행하는 모듈로서 정의된다. 본 명세서에 있어서 도 5를 참조하여 설명되는 일 실시예의 EPUB3 애니메이션 실행단계(S40)를 수행한다.

CSS3 애니메이션 요소 입력모듈(10), HTML5 커스텀 어트리뷰트 변환모듈(20), 및 전자책 파일 생성 모듈(30)은 이펍 툴(EPUB tool)에 포함되고, EPUB3 애니메이션 분석 및 실행 모듈(40)은 이펍 뷰어(EPUB viewer)에 포함될 수 있으며, 이펍 뷰어(EPUB viewer)는 독자적인 프로그램일 수도 있으나 이에 한정되지 않고 이펍 툴(EPUB tool)의 한 기능 모듈로서 이펍 툴(EPUB tool)에 통합될 수도 있다. 각 모듈에서 수행되는 세부 과정 및 이를 구현하는 소스코드 등 기술은 하기 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생방법과 관련하여 상세히 설명한다.

도 2는 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생 방법의 흐름도이다.

도 2를 참조하면, 본 발명의 본 발명의 스타일시트 애니메이션을 이용한 이펍 애니메이션의 실시간 생성 및 재생 방법은 사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력단계(S10), 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환단계(S20), 및 상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성단계(S30)를 기본적으로 이펍 애니메이션의 실시간 생성과정을 수행한다.

이와 같이 생성된 이펍 애니메이션 또는 이를 포함한 전자책 파일은 EPUB3 애니메이션 실행단계(S40)를 통해 상기 전자책 파일에 포함된 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 방식으로 이펍 애니메이션의 실시간 재생된다.

도 3a는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계의 흐름도, 도 3b는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계를 설명하기 위한 도면, 도 3c는 본 발명의 일 실시예의 CSS3 애니메이션 요소 입력단계를 설명하기 위한 도면으로, 도 3a 내지 도 3c를 참조하면, CSS3 애니메이션 요소 입력단계(S10)는 구체적으로, 상기 CSS3 애니메이션 요소와 연관된 변수들을 초기화하는 변수 초기화 단계(S11), 애니메이션의 종류 선택을 위한 애니메이션의 종류 선택 사용자 인터페이스를 디스플레이하여, 상기 애니메이션의 종류 선택 사용자 인터페이스를 통해 애니메이션의 종류에 대한 선택을 입력받고 각 선택된 애니메이션의 CSS3 애니메이션 요소를 입력받는 애니메이션 종류 선택 단계(S12), 애니메이션 동작 리스트 생성을 위한 동작 리스트 생성 사용자 인터페이스를 디스플레이하여, 동작 리스트 생성 사용자 인터페이스를 통해 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 동작 리스트를 생성하여 디스플레이하는 동작 리스트 생성단계(S13)를 포함하여 수행하여, 사용자로부터 애니메이션을 구성하는 CSS3 애니메이션 요소와 애니메이션의 동작 방법에 관한 CSS3 애니메이션 요소를 입력받는다.

변수 초기화 단계(S11)에서는 사전 설정된 애니메이션 변수 값 즉, CSS3 애니메이션 요소의 값이 하기와 같이 초기값으로 설정된다.

- aniID: 각각의 Animation을 분별하기 위한 Animation 고유변호.

- image: Animation에서 사용될 Image 파일의 경로.

- duration: 1회의 Animation이 지속되는 실행 시간.

- count: Animation 동작횟수. 반복 횟수의 수치나 무한대를 의미하는 infinite 입력.

- opacity: 이미지 투명도. 0~1 까지의 실수를 입력

- left position: Animation이 위치할 우측 위치

- top position: Animation이 위치할 상단 위치

애니메이션 종류 선택 단계(S12)는 회전 애니메이션, 이동 애니메이션, 프레임 애니메이션, 복합 애니메이션 중 1개에 대한 사용자의 선택을 애니메이션의 종류 선택 사용자 인터페이스를 통해 입력받으며, 애니메이션의 종류 선택 사용자 인터페이스는 도 3b에서와 같이 각각의 애니메이션의 종류에 따라 해당하는 레이어를 표기하는 방식으로 구현되며, 각 레이어 별로 입력받을 CSS3 애니메이션 요소들이 구분되어 사용자에 의하여 선택된 애니메이션 종류에 따른 요소의 값 또는 선택을 입력받는다. 레이어는 총 하기와 같이 총 3개로 구분될 수 있다.

- ani_abpos_span : 애니메이션의 절대 위치의 요소를 입력받는 layer.

- ani_frame_span : 프레임 애니메이션의 요소를 입력받는 layer.

- ani_alternate_span : 되돌리기 Animation의 요소를 입력받는 layer.

- ani_common_span : Animation의 크기, 반복횟수, 실행시간 등의 공통 요소들을 입력받는 layer

선택된 애니메이션에 사용되는 이미지, 애니메이션의 크기, 반복횟수, 실행시간의 요소는 공통요소로서 입력된다. 애니메이션의 종류를 입력받아 각 종류별로 서로 다른 형태의 레이어를 만들어 주는 것은 하기 표 1과 같은 프로그램 소스코드에 의하여 구현될 수 있다.

동작 리스트 생성단계(S13)에서는 애니메이션의 시작과 종료 동작을 생성하며, 애니메이션의 중간의 중요한 포인트를 기점으로 하는 동작 리스트를 생성한다. 도 3b와 같이 동작 리스트 생성 사용자 인터페이스를 통해 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 동작 리스트를 생성하여 디스플레이한다.

동작 리스트의 각 항목들은 애니메이션의 종류에 따라 각각 다르게 구성되며 상이한 요소가 입력되며, 도 3b 좌측의 경우 복합 애니메이션에 관한 것으로 위치변형, 크기변형, 회전처리, 투명처리, 애니시간 등에 필요한 요소가 입력된다. 회전 애니메이션의 경우 “회전각도” 항목이 존재하고, 이동 애니메이션의 경우 “이동 위치”가 존재하며, 프레임 애니메이션의 경우 “프레임 수”라는 항목이 표시되어 요구되는 요소를 입력받는다.

각각 동작은 애니메에션(Animation)의 지속시간의 100분율을 기반으로 구별된다. 즉, 애니메이션의 최초의 동작은 0% 동작으로, 애니메이션의 최종 동작은 100% 동작으로 정의되어 입력된다. 기타 주요한 동작들은 해당 %의 동작으로 정의 된다. 이와 같이 입력된 동작 변화에 필요한 CSS3 애니메이션 요소는 상술한 CSS3 애니메이션 요소와 함께 사용되어 동작 리스트를 생성하며, 하기 표 2와 같은 소스코드를 통해 구현될 수 있다.

// 애니메이션 동작 리스트 생성
$("#ani_action_list").empty();
aniActionCount = e.getAttribute('sa_ActionList_cnt').replace(/[^0-9\.]+/g, '');
for( idx = 1; idx <= aniActionCount; idx++ ) {
var left = e.getAttribute('sa_Act'+idx+'_left').replace(/[^0-9\.]+/g, '');
var top = e.getAttribute('sa_Act'+idx+'_top').replace(/[^0-9\.]+/g, '');
var width = e.getAttribute('sa_Act'+idx+'_bkpos').split(' ')[0].replace(/[^0-9\.]+/g, '');
var height = e.getAttribute('sa_Act'+idx+'_bkpos').split(' ')[1].replace(/[^0-9\.]+/g, '');
var degree = e.getAttribute('sa_Act'+idx+'_rotate').replace(/[^0-9\.]+/g, '');
var opacity = e.getAttribute('sa_Act'+idx+'_opacity').replace(/[^0-9\.]+/g, '');
var time = e.getAttribute('sa_Act'+idx+'_time').replace(/[^0-9\.]+/g, '');

var contentStr = "<div id='action_"+idx+"' class='blockline'>"
if ( dragPosChangeFlg == true ) { // drag로 위치자동 수정.
if ( editAniActionIdx == idx ) {
left = document.getElementById('ani_left').value;
top = document.getElementById('ani_top').value;
}
}

… 중략 …

contentStr = contentStr + "<b>시간</b>"+time+"%";
contentStr = contentStr + "</div>";
contentStr = contentStr + "</div>";
$("#ani_action_list").append(contentStr);
}

참고로 위 소스코드에 있어서, degree, opacity, time 변수값이 동작 리스트 생성단계(S13)에서 입력된 동작 변화에 필요한 CSS3 애니메이션 요소이다.

도 4는 본 발명의 일 실시예의 HTML5 커스텀 어트리뷰트 변환단계의 흐름도이다. 도 4를 참조하면, HTML5 커스텀 어트리뷰트 변환단계(S20)는 상기 입력된 CSS3 애니메이션 요소의 값을 상기 변수에 설정하는 변수 설정단계(S21), 상기 설정된 변수에 각각에 대응하는 HTML5 커스텀 어트리뷰트를 정의하여, 설정된 변수값을 상기 정의된 HTML5 커스텀 어트리뷰트의 밸류값으로 저장하여 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하는 HTML5 커스텀 어트리뷰트 변환단계(S22), 및 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하고 DIV 태그를 입력받아 HTML 파일로 저장하는 HTML5 파일 생성단계(S23)의 일련의 과정을 포함하여 수행하여, 상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일을 생성하여 저장한다.

변수 설정단계(S21)는 상기 입력된 CSS3 애니메이션 요소의 값을 상기 변수에 설정하고, HTML5 커스텀 어트리뷰트 변환단계(S22)는 상기 설정된 변수에 각각에 대응하는 HTML5 커스텀 어트리뷰트를 정의하여, 설정된 변수값을 상기 정의된 HTML5 커스텀 어트리뷰트의 밸류값으로 저장하여 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환한다. 여기서 각 애니메이션에는 고유의 ID 부여되어 관리되며, 입력된 애니메이션의 요소의 값을 변수에 저장하는 것은 하기 표 3과 같은 소스코드로 구현될 수 있다.

// 애니메이션 요소 저장
var cnt = Number($("#ani_action_list").children().length); // 액션리스트 갯수
var id = "sptani" + new Date().getTime(); // 애니메이션 ID
var left = document.getElementById('ani_left').value.replace(/[^0-9\.]+/g, '');//좌측pos
var top = document.getElementById('ani_top').value.replace(/[^0-9\.]+/g, '');// 상단pos
var width = document.getElementById('ani_width').value.replace(/[^0-9\.]+/g, '');// 넓이
var height = document.getElementById('ani_height').value.replace(/[^0-9\.]+/g,'');//높이
var count = document.getElementById('ani_count').value.replace(/[^0-9\.]+/g, '');// 애니 횟수
if( $("#ani_repeat").is(":checked") ) {
count = "infinite";
}
var duration = document.getElementById('ani_duration').value.replace(/[^0-9\.]+/g, ''); // 애니 지속시간
var delay = document.getElementById('ani_delay').value.replace(/[^0-9\.]+/g, '');//최조 지연시간
var frame = document.getElementById('ani_frame').value.replace(/[^0-9\.]+/g,'');//frame 수
var anikind = document.getElementById('ani_kind').value.replace(/[^0-9\.]+/g, ''); //애니 종류
…중략…
// 절대값 체크
if( e.getAttribute('sa_absolute') == 'true' ) {
document.getElementById('ani_absolute').checked = true;
document.getElementById("ani_pos_span").style.display = "block";
} else {
document.getElementById('ani_absolute').checked = false;
//document.getElementById("ani_pos_span").style.display = "none";
}
// 무한반복 체크
editAniID = e.getAttribute('ID');
editAniSaveID = editAniID;
if( e.getAttribute('sa_count') == 'infinite' ) {
document.getElementById('ani_repeat').checked = true;
document.getElementById('ani_count').value = '';
} else {
document.getElementById('ani_repeat').checked = false;
document.getElementById('ani_count').value = e.getAttribute('sa_count');
}
// 이미지 정보
aniImageUrl = e.getAttribute('sa_aniImg');
document.getElementById('ani_duration').value = e.getAttribute('sa_duration').replace(/[^0-9\.]+/g, '');
document.getElementById('ani_delay').value = e.getAttribute('sa_delay').replace(/[^0-9\.]+/g, '');
document.getElementById('ani_frame').value = e.getAttribute('sa_frame').replace(/[^0-9\.]+/g, '');
if( e.getAttribute('sa_alternate') == 'true' ) {
document.getElementById('ani_alternate').checked = true;
document.getElementById("ani_alternate_span").style.display = "block";
} else {
document.getElementById('ani_alternate').checked = false;
//document.getElementById("ani_alternate_span").style.display = "none";
}

HTML5 파일 생성단계(S23)에서는 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력한다,

구체적으로는, 먼저 각각의 요소들은 “sa_” 접두사가 붙은 custom attribute로 변환한다. 예컨대, aniID 는 sa_aniID로 변환. aniImg는 sa_aniImg로 변환. aniID는 sa_aniID로 변환, aniImg는 sa_aniImg로 변환, duration은 sa_duration으로 변환, count는 sa_count로 변환, frame은 sa_frame으로 변환, delay는 sa_delay로 변환, alternate는 sa_alternate로 변환, time은 sa_Act_time으로 변환, rotate는 sa_Act_rotate로 변환, opacity는 sa_Act_opacity로 변환, left는 sa_Act_left로 변환, bkpos는 sa_Act_bkpos로 변환한다.

또한, 모든 커스텀 어트리뷰트는 예컨대 id="sptani1419276091913" sa_left="46px" sa_top="684px" sa_width="87px" sa_height="85px" sa_absolute="true" sa_ani_kind="4" sa_aniexist="true" sa_aniid="sptani1419276091913" sa_aniimg="../images/bookimg_16.png" sa_duration="1s" sa_count="10" sa_frame="0" sa_delay="0s" sa_alternate="true" sa_fillmode="" sa_actionlist_cnt="3" sa_act1_time="0" sa_act1_rotate="0" sa_act1_opacity="1.0" sa_act1_left="46" sa_act1_top="684" sa_act1_bkpos="0px, 0px" sa_act2_time="50" sa_act2_rotate="360" sa_act2_opacity="1.0" sa_act2_left="300" sa_act2_top="395" sa_act2_bkpos="0px, 0px" sa_act3_bkpos="0px, 0px" sa_act3_top="684" sa_act3_left="500" sa_act3_opacity="1.0" sa_act3_rotate="360" sa_act3_time="100”와 같이 KEY=“VALUE”의 형태로 HTML의 TAG에 기입한다.

이어 div tag가 입력되어 예컨대 <div class="SptStyleAni" id="sptani1419276091913" sa_left="46px" sa_top="684px" sa_width="87px" sa_height="85px" sa_absolute="true" sa_ani_kind="4" sa_aniexist="true" sa_aniid="sptani1419276091913" sa_aniimg="../images/bookimg_16.png" sa_duration="1s" sa_count="10" sa_frame="0" sa_delay="0s" sa_alternate="true" sa_fillmode="" sa_actionlist_cnt="3" sa_act1_time="0" sa_act1_rotate="0" sa_act1_opacity="1.0" sa_act1_left="46" sa_act1_top="684" sa_act1_bkpos="0px, 0px" sa_act2_time="50" sa_act2_rotate="360" sa_act2_opacity="1.0" sa_act2_left="300" sa_act2_top="395" sa_act2_bkpos="0px, 0px" sa_act3_bkpos="0px, 0px" sa_act3_top="684" sa_act3_left="500" sa_act3_opacity="1.0" sa_act3_rotate="360" sa_act3_time="100"></div>와 같은 형태로 덧붙여지며, div tag의 입력에는 위그지그 애디터(WYSIWYG Edito) 등 다양한 애디터가 사용될 수 있다.

div tag안에 커스텀 어트리뷰트가 기입되며, 특정 루틴의 소스코드로 구현될 수 있으며, div tag가 기입된 HTML5 파일로서 저장된다. sa_ 접두사가 붙은 커스텀 어트리뷰트들을 div tag에 기입하는 것은 하기 표 4와 같은 소스코드로 구현될 수 있다.

// div tag안에 custom attribute 기입
var contentStr = "<div id='"+id+"' class='SptStyleAni'";
contentStr = contentStr + "sa_left='"+left+"px' sa_top='"+top+"px' sa_width='"+width+"px' sa_height='"+height+"px' ";
contentStr = contentStr + "sa_absolute='"+String($("#ani_absolute").is(":checked"))+"' sa_ani_kind='"+anikind+"' ";
contentStr = contentStr + "sa_aniexist='true' sa_aniid='"+id+"' sa_aniimg='"+aniImageUrl+"' sa_duration='"+duration+"s' ";
contentStr = contentStr + "sa_count='"+count+"' sa_frame='"+frame+"' sa_delay='"+delay+"s' sa_alternate='"+String($("#ani_alternate").is(":checked"))+"' ";
contentStr = contentStr + "sa_fillmode='' sa_actionlist_cnt='"+String(cnt)+"' ";
for( n = 1; n <= cnt; n++ ) {
var actLeft = $("#action_info_"+n).attr('action_left_'+n).replace(/[^0-9\.]+/g, '');
var actTop = $("#action_info_"+n).attr('action_top_'+n).replace(/[^0-9\.]+/g, '');
var actWidth = $("#action_info_"+n).attr('action_width_'+n).replace(/[^0-9\.]+/g, '');
var actHeight = $("#action_info_"+n).attr('action_height_'+n).replace(/[^0-9\.]+/g, '');
var actOpacity = $("#action_info_"+n).attr('action_opacity_'+n).replace(/[^0-9\.]+/g, '');
var actRotate = $("#action_info_"+n).attr('action_degree_'+n).replace(/[^0-9\.]+/g, '');
var actTime = $("#action_info_"+n).attr('action_time_'+n).replace(/[^0-9\.]+/g, '');
var actBkPos = "0px, 0px";
if ( n == 1 ) {
actTime = 0;
} else if ( n == cnt ) {
actTime = 100;
if ( frame > 0 ) {
actBkPos = "-"+(frame*width)+"px 0px";
}
}
contentStr = contentStr + "sa_act"+n+"_time='"+actTime+"' sa_act"+n+"_rotate='"+actRotate+"' sa_act"+n+"_opacity='"+actOpacity+"' ";
contentStr = contentStr + "sa_act"+n+"_left='"+actLeft+"' sa_act"+n+"_top='"+actTop+"' sa_act"+n+"_bkpos='"+actBkPos+"'";
//contentStr = contentStr + "sa_act"+n+"_left='"+actLeft+"' sa_act"+n+"_top='"+actTop+"' sa_act"+n+"_bkpos='"+actWidth+"px "+actHeight+"px'";
}
contentStr = contentStr + "></div>";

이어 수행되는 전자책 파일 생성단계(S30)는 저장된 HTML5 파일을 타이틀 파일(title file), 이북 리스트 파일(list file) 등과 같이 구분하여 EPUB3 규약에 맞는 이펍 파일을 생성하며, 이펍 파일을 생성시 HTML 파일내 기입된 상기 태그를 분석하는 자바스크립트 파일(javascript file)을 압축등의 방식으로 동봉한다. 이에 따라 다음과 같은 소스파일에 의하여 HTML5 파일의 생성시 타이틀 파일(title file), 이북 리스트 파일(list file)과 함께 애니메이션 관련 파일(animation contents file), 스타일 시트 파일,자바스크립트 파일(javascript file) 및 이를 로드하기 위한 파일 등이 포함된 전자책 파일이 생성된다. 다음과 같은 소스파일에서와 같이 필요한 폴더 생성 및 조회, cover image 파일복사처리, ePub안의 이미지 파일 복사, content.opf 파일생성, toc.xhtml 파일생성, toc.ncx 파일생성, book_list.xhtml 파일생성, ePub안의 contents 파일생성, ePub3 파일 생성등의 루틴을 포함하여 구현된다. 이는 하기 표 5 및 이와 연속된 표 6과 같은 소스코드로 구현될 수 있다.

// 필요한 폴더 생성 및 조회
nImgFolder = bookFile.getUserSysFolder(tUserID, tBookIDX );
nSaveFolder = bookFile.makeBookPubSysFolder(tBookIDX);

// cover image 파일복사처리
nOrgFile = GlobalDefine.UPLOADFOLDER_BOOK + "/book_"+tBookIDX+"/"+nCoverImg;
nSaveFile = nSaveFolder + "/OEBPS/images/"+nCoverImg;
if ( ComFileUtil.FileExit(nOrgFile) && nCoverImg.length() > 3 )
ComFileUtil.FileCopyByChannel( nOrgFile , nSaveFile );

// ePub안의 이미지 파일 복사
nChptStr += this.copyEpubImgFile ( tSampleChapterNum, nChapterVector, nSaveFolder );

// content.opf 파일생성
nSaveFile = nSaveFolder + "/OEBPS/content.opf";
nSaveContents = ComFileUtil.ReadFileAddLF(nSaveFile,GlobalDefine.CharacterSystemEncoding);
for (i=0; i<nTempArr.length; i++)
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$"+nTempArr[i]+"$$", ComDataCtrl.getStringFromHash(nBookHash,nTempArr[i],"") );

nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$CONT_MANIFEST$$", nChptStr );
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$CONT_SPINE$$", nSpintStr );
ComFileUtil.WriteFile(nSaveFile,nSaveContents,GlobalDefine.CharacterSystemEncoding);

// toc.xhtml 파일생성
nSaveFile = nSaveFolder + "/OEBPS/toc.xhtml";
nSaveContents = ComFileUtil.ReadFileAddLF(nSaveFile,GlobalDefine.CharacterSystemEncoding);
for (i=0; i<nTempArr.length; i++)
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$"+nTempArr[i]+"$$", ComDataCtrl.getStringFromHash(nBookHash,nTempArr[i],"") );

nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$CONT_NAVMAP$$", nContNaviMap );
ComFileUtil.WriteFile(nSaveFile,nSaveContents,GlobalDefine.CharacterSystemEncoding);

중략...
// toc.ncx 파일생성
nSaveFile = nSaveFolder + "/OEBPS/toc.ncx";
nSaveContents = ComFileUtil.ReadFileAddLF(nSaveFile,GlobalDefine.CharacterSystemEncoding);
for (i=0; i<nTempArr.length; i++)
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$"+nTempArr[i]+"$$", ComDataCtrl.getStringFromHash(nBookHash,nTempArr[i],"") );

nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$NCS_NAVMAP$$", nNcxNaviMap );
ComFileUtil.WriteFile(nSaveFile,nSaveContents,GlobalDefine.CharacterSystemEncoding);

..중략...

// book_list.xhtml 파일생성
nSaveFile = nSaveFolder + "/OEBPS/text/book_list.xhtml";
nSaveContents = ComFileUtil.ReadFileAddLF(nSaveFile,GlobalDefine.CharacterSystemEncoding);
for (i=0; i<nTempArr.length; i++)
nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$"+nTempArr[i]+"$$", ComDataCtrl.getStringFromHash(nBookHash,nTempArr[i],"") );

nSaveContents = ComDataCtrl.replaceStr(nSaveContents, "$$BOOK_LIST$$", nBookListStr );
ComFileUtil.WriteFile(nSaveFile,nSaveContents,GlobalDefine.CharacterSystemEncoding);
// ePub안의 contents 파일생성
this.copyEpubContentsFile ( tSampleChapterNum, nChapterVector, nSaveFolder, nTempArr, nBookHash );
//writeLog.addErrLog( "BookWrite check 010 ");

// ePub3 파일 생성
String nTmpFileName = "";
if ( tSampleChapterNum > 0 ) // sample mode
nTmpFileName = "sample_book_"+tBookIDX+".epub";
else
nTmpFileName = tUserID+"_book_"+tBookIDX+".epub";

if ( tPublishMode == GlobalDefine.PUBLISHING_TEST ) // test publishing mode
nSaveFile = GlobalDefine.UPLOADFOLDER_TMP + "/" + nTmpFileName;
else if ( tPublishMode == GlobalDefine.PUBLISHING_USER ) // user publishing mode
nSaveFile = GlobalDefine.BOOK_PUBLISH_USER + "/" + nTmpFileName;
else if ( tPublishMode == GlobalDefine.PUBLISHING_ADMIN ) // admin publishing mode
nSaveFile = GlobalDefine.BOOK_PUBLISH_ADMIN + "/" + nTmpFileName;

ComZipUtils.zip(nSaveFolder, nSaveFile);

도 5는 본 발명의 일 실시예의 EPUB3 애니메이션 실행단계의 흐름도이다. 도 5를 참조하면, 상기 EPUB3 애니메이션 실행단계(40)는, 상기 전자책 파일을 로딩하여 HTML 태그를 분석할 자바스크립트 파일(javascript file)의 메소드(method)를 호출하는 전자책 파일 로딩단계(S41), HTML5 커스텀 어트리뷰트를 분석하여 CSS3애니메이션 요소로 변환하고 JSon 형태로 패킹(packing)하는 HTML5 커스텀 어트리뷰트를 분석단계(S42), 패킹된 JSon을 기반으로 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 추출된 속성들을 CSS3의 문법에 맞게 문자열로 조합하여 바디(body)의 스타일 시트로 등록하는 CSS3 애니메이션 속성추출단계(S43) 및 CSS3 애니메이션의 동작 리스트를 추출하여 동작 단위로 키프레임(KeyFrame)에 등록하며 등록되는 동작들을 CSS3의 문법에 맞게 문자열로 조합하여 스타일 요소로 등록하는 키프레임등록단계(S44)를 포함하여 스타일 시트로 등록된 CSS3 애니메이션 요소의 CSS3 속성과 동작에 따라 이펍파일의 로딩완료시 EPUB3 애니메이션이 자동 실행되도록 수행되어, 전자책 파일에 포함된 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행한다,

EPUB3 애니메이션 실행 단계는 이펍 뷰어(EPUB viewer)에서 수행되며, 이펍 뷰어(EPUB viewer)는 독자적인 프로그램일 수도 있으나 이에 한정되지 않고 이펍 툴(EPUB tool)의 한 기능 모듈로서 이펍 툴(EPUB tool)에 통합될 수도 있다.

전자책 파일 로딩단계(S41)는 이펍 뷰어(EPUB viewer)에서 이펍 파일을 로딩하며, 로딩시 애니메이션 ID(aniID)를 추출하고 분석할 자바스크립트 파일의 메소드(Method)를 호출한다. 자바스크립트 메소드의 호출은 body tag에서 이루어지며, 다음의 코드로 구현될 수 있다.

<body onload="initFunc()">

HTML5 커스텀 어트리뷰트를 분석단계(S42)는 HTML5 커스텀 어트리뷰트를 분석하여 CSS3애니메이션 요소로 변환하고 JSon 형태로 패킹(packing)한다. 즉, “SptStyleAni“ class의 존재를 check하여 animation이 기입되어 있는지 판단하고, 애니메이션 ID(aniID)의 개수를 체크하여 해당 개수 만큼의 애니메이션을 생성한다. 여기서, 앞서 살핀“sa_” 접두사가 붙은 각각의 커스텀 어트리뷰트에서 상기 접두사를 제거하는 방식, 즉, sa_aniID를 aniID로 변환, sa_aniImg 를 aniImg로 변환, sa_duration를 duration로 변환, sa_count를 count로 변환, sa_frame을 frame으로 변환, sa_delay를 delay로 변환, sa_alternate를 alternate로 변환, sa_Act_time을 time으로 변환, sa_Act_rotate를 rotate로 변환, sa_Act_opacity를 opacity로 변환, sa_Act_left를 left로 변환, sa_Act_bkpos를 bkpos로 변환하는 방식으로 각각의 커스텀 어트리뷰트를 CSS3 애니메이션 요소로 변환하고 Key=“Value” 형태의 커스텀 어트리뷰트를 분석하여 JSon형태로 패킹(Packing)한다.

즉, key=value, key=value 형태의 커스텀 어트리뷰트를 key:value, key:value형태의 JSon형태로 변환한다. 이는 추후 JSon을 파싱(Parsing)하면 key 문자열을 그대로 변수로 사용할 수 있도록 해준다. key=value, key=value 형태의 커스텀 어트리뷰트를 복잡하고 에러 가능성이 높은 문자열 분석을 이용하기 보다, JSon의 형태로 이용하는 것이 보다 쉽고 에러의 가능성도 낮추어준다.

다음 표 8과 같은 루틴의 프로그램 코드에 의하여 구현될 수 있다.

// 애니메이션 분석
$('.SptStyleAni').each(function() {
var jQueryStr = "";
jQueryStr += " { "; // json 시작
if( $(this).attr("sa_aniexist") != undefined && $(this).attr("sa_aniexist") != "" )
jQueryStr += " \"aniExist\":"+$(this).attr("sa_aniexist")+", "; // ani 존재 flag --> 모두 true
if( $(this).attr("sa_aniid") != undefined && $(this).attr("sa_aniid") != "" )
jQueryStr += " \"aniID\":\""+$(this).attr("sa_aniid")+"\", "; // ani를 실행할 div의 ID. 고유번호의 형태.
if( $(this).attr("sa_aniimg") != undefined && $(this).attr("sa_aniimg") != "" )
jQueryStr += " \"aniImg\":\""+$(this).attr("sa_aniimg")+"\", "; // 이미지 위치
if( $(this).attr("sa_duration") != undefined && $(this).attr("sa_duration") != "" )
jQueryStr += " \"duration\":\""+$(this).attr("sa_duration")+"\", "; // 애니 지속시간(Sec)
if( $(this).attr("sa_count") != undefined && $(this).attr("sa_count") != "" )
jQueryStr += " \"count\":\""+$(this).attr("sa_count")+"\", "; // 애니 반복 횟수 : 1,2,3,... infinite(무한반복)
if( $(this).attr("sa_alternate") != undefined && $(this).attr("sa_alternate") != "" )
jQueryStr += " \"alternate\":"+$(this).attr("sa_alternate")+", "; // alterante flag
…. 중략
if( Number($(this).attr("sa_actionlist_cnt")) > 0 )
jQueryStr += " \"ActionList\": ["; // 동작 리스트 배열
for( n=1; n <= Number($(this).attr("sa_actionlist_cnt")); n++ ) {
jQueryStr += " { ";
if( $(this).attr("sa_act"+n+"_time") != undefined && $(this).attr("sa_act"+n+"_time") != "" )
jQueryStr += " \"time\":\""+$(this).attr("sa_act"+n+"_time")+"\", "; // animation 동작 시간
if( $(this).attr("sa_act"+n+"_rotate") != undefined && $(this).attr("sa_act"+n+"_rotate") != "" )
jQueryStr += " \"rotate\":\""+$(this).attr("sa_act"+n+"_rotate")+"\", "; // 회전각도
if( $(this).attr("sa_act"+n+"_opacity") != undefined && $(this).attr("sa_act"+n+"_opacity") != "" )
jQueryStr += " \"opacity\":\""+$(this).attr("sa_act"+n+"_opacity")+"\", "; // 투명도
… 중략 .. }
}
if( Number($(this).attr("sa_actionlist_cnt")) > 0 )
jQueryStr += " ]";
jQueryStr += " }";
AnimationCtrl( jQueryStr );

CSS3 애니메이션 속성추출단계(S43)는 패킹된 JSon을 기반으로 추출작업을 진행하며, Json을 파싱(Parsing)하여 애니메이션 속성을 추출한다.

Json 파싱(Parsing)은 다음의 코드로 구현될 수 있다.

// Json Parsing
AniRes = jQuery.parseJSON(originalRequest);

이때, 애니메이션의 속성명은 Key에서 추출하고 해당 속성에 대한 값들은 밸류 값(Value)에서 추출한다. 추출된 애니메이션의 속성들을 CSS3의 문법에 맞게 문자열로 조합하며, 조합된 문자열을 바디(body)의 스타일 시트(style sheet)로 등록한다.

키프레임등록단계(S44)는 먼저,애니메이션의 전체동작을 “key_”라는 접두사를 붙여서 동작 키프레임(KeyFrame)을 생성한다. 이어 생성된 키프레임(KeyFrame)에 각각의 동작들을 단위별로 구분하여 등록한다. 각각의 단위는 애니메에션(Animation)의 지속시간의 100분율을 기반으로 구별된다. 즉,애니메이션의 최초의 동작은 0% 동작으로, 애니메이션의 최종 동작은 100% 동작으로 등록한다. 기타 주요한 동작들은 해당 %의 동작으로 등록한다. 이때, 등록하는 애니메이션의 동작은 회전각도, 투명도, 프레임위치, 좌측위치, 상단위치 등의 요소들로 정의되며, 정의된 애니메이션의 동작들을 CSS3의 문법에 맞게 문자열로 조합하며, 조합된 문자열을 스타일 요소(element)로 등록한다. 스타일 요소는 CSS3에서 각각의 속성을 등록하는 객체들을 말하며, 여기에서는 애니메이션 동작을 등록시킬 대상 객체이다. 즉, 애니메이션의 좌측 위치를 등록시킬 때는 divObj.style['left']= AniRes.left;에서 left라는 객체가 스타일 요소이다. 백그라운드 이미지를 등록시킬 때는 divObj.style['background']= "url("+AniRes.aniImg+") no-repeat";에서 background라는 객체가 스타일 요소에 해당한다.

CSS3 애니메이션 속성추출단계(S43) 및 키프레임등록단계(S44)는 다음 표 10 및 이와 연속된 표 11과 같은 루틴의 프로그램 코드에 의하여 구현될 수 있다.

이에 따라, 스타일 시트로 등록된 CSS3 애니메이션 요소의 CSS3 속성과 동작의 스타일 요소에 따라 이펍파일의 로딩완료시 EPUB3 애니메이션 이 자동 실행되며, 애니메이션이 입력되는 경우 바디(Body)에 등록된 스타일 시트의 애니메이션 요소와 동작의 스타일 요소에 따라 EPUB3 파일의 로딩이완료되는 시점에 자동으로 실행되는 이펍 애니메이션이 구현된다. 한편, 애니메이션이 수정되는 경우 스타일 요소가 재등록 되는 시점에 애니메이션이 실행된다.

이상, 본 발명은 특정 기능들 및 그의 관계들의 성능을 나타내는 방법 단계들의 목적을 가지고 위에서 설명되었다. 이러한 기능적 구성 요소들 및 방법 단계들의 경계들 및 순서는 설명의 편의를 위해 여기에서 임의로 정의되었다. 상기 특정 기능들 및 관계들이 적절히 수행되는 한 대안적인 경계들 및 순서들이 정의될 수 있다. 임의의 그러한 대안적인 경계들 및 순서들은 그러므로 상기 청구된 발명의 범위 및 사상 내에 있다. 추가로, 이러한 기능적 구성 요소들의 경계들은 설명의 편의를 위해 임의로 정의되었다. 어떠한 중요한 기능들이 적절히 수행되는 한 대안적인 경계들이 정의될 수 있다. 마찬가지로, 흐름도 블록들은 또한 어떠한 중요한 기능성을 나타내기 위해 여기에서 임의로 정의되었을 수 있다. 확장된 사용을 위해, 상기 흐름도 블록 경계들 및 순서는 정의되었을 수 있으며 여전히 어떠한 중요한 기능을 수행한다. 그러므로 기능적 구성 요소들 및 흐름도 블록들 및 순서들 둘 다의 대안적인 정의들은 청구된 본 발명의 범위 및 사상 내에 있다.

본 발명은 또한 하나 이상의 실시 예들의 용어로, 적어도 부분적으로 설명되었을 수 있다. 본 발명의 실시 예는 본 발명, 그 측면, 그 특징, 그 개념, 및/또는 그 예를 나타내기 위해 여기에서 사용된다. 본 발명을 구현하는 장치, 제조의 물건, 머신, 및/또는 프로세스의 물리적인 실시 예는 여기에 설명된 하나 이상의 실시 예들을 참조하여 설명된 하나 이상의 측면들, 특징들, 개념들, 예들 등을 포함할 수 있다. 더구나, 전체 도면에서, 실시 예들은 상기 동일한 또는 상이한 참조 번호들을 사용할 수 있는 상기 동일하게 또는 유사하게 명명된 기능들, 단계들, 모듈들 등을 통합할 수 있으며, 그와 같이, 상기 기능들, 단계들, 모듈들 등은 상기 동일한 또는 유사한 기능들, 단계들, 모듈들 등 또는 다른 것들일 수 있다.

이상과 같이 본 발명에서는 구체적인 구성 요소 등과 같은 특정 사항들과 한정된 실시 예 및 도면에 의해 설명되었으나 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명은 상기의 실시 예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형이 가능하다.

따라서, 본 발명의 사상은 설명된 실시 예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위뿐 아니라 이 특허청구범위와 균등하거나 등가적 변형이 있는 모든 것들은 본 발명 사상의 범주에 속한다고 할 것이다.

10: CSS3 애니메이션 요소 입력모듈 20: HTML5 커스텀 어트리뷰트 변환모듈
30: 전자책 파일 생성 모듈 40: EPUB3 애니메이션 분석 및 실행 모듈

Claims

사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력단계(S10);
상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환단계(S20); 및
상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성단계(S30);를 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.
제1 항에 있어서,
CSS3 애니메이션 요소 입력단계(S10)는,
상기 CSS3 애니메이션 요소와 연관된 변수들을 초기화하는 변수 초기화 단계(S11);
애니메이션의 종류 선택을 위한 애니메이션의 종류 선택 사용자 인터페이스를 디스플레이하여, 상기 애니메이션의 종류 선택 사용자 인터페이스를 통해 애니메이션의 종류에 대한 선택을 입력받고 각 선택된 애니메이션의 CSS3 애니메이션 요소를 입력받는 애니메이션종류 선택 단계(S12);
애니메이션 동작 리스트 생성을 위한 동작 리스트 생성 사용자 인터페이스를 디스플레이하여, 동작 리스트 생성 사용자 인터페이스를 통해 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 동작 리스트를 생성하여 디스플레이하는 동작리스트 생성단계(S13); 를 포함하여 수행되는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.
제2 항에 있어서, 상기 애니메이션의 종류는 회전 애니메이션, 이동 애니메이션, 프레임 애니메이션, 복합 애니메이션으로, 선택된 애니메이션의 크기, 반복횟수, 실행시간을 CSS3 애니메이션 요소로서 입력받는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.
제3 항에 있어서,
상기 동작 변화에 필요한 CSS3 애니메이션 요소는 상기 애니메이션의 종류에 따라 상이한 요소가 입력되는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.
제2 항에 있어서,
상기 HTML5 커스텀 어트리뷰트로 변환단계(S20)는,
상기 입력된 CSS3 애니메이션 요소의 값을 상기 변수에 설정하는 변수 설정단계(S21);
상기 설정된 변수에 각각에 대응하는 HTML5 커스텀 어트리뷰트를 정의하여, 설정된 변수값을 상기 정의된 HTML5 커스텀 어트리뷰트의 밸류값으로 저장하여 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하는 HTML5 커스텀 어트리뷰트 변환단계(S22); 및
HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하고 DIV 태그를 입력받아 HTML 파일로 저장하는 HTML5 파일 생성단계(S23)를 포함하여 수행되는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.
제5 항에 있어서, 전자책 파일 생성단계(S30)는 HTML 태그를 분석할 자바스크립트 파일(javascript file)을 포함하여 상기 전자책 파일을 생성하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.
제6 항에 있어서,
상기 전자책 파일에 포함된 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 EPUB3 애니메이션 실행단계(S40);을 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.
제7 항에 있어서,
상기 EPUB3 애니메이션 실행단계(40)는,
상기 전자책 파일을 로딩하여 HTML 태그를 분석할 자바스크립트 파일(javascript file)의 메소드(method)를 호출하는 전자책 파일 로딩단계(S41);
HTML5 커스텀 어트리뷰트를 분석하여 CSS3애니메이션 요소로 변환하고 JSon 형태로 패킹(packing)하는 HTML5 커스텀 어트리뷰트를 분석단계(S42);
패킹된 JSon을 기반으로 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 추출된 속성들을 CSS3의 문법에 맞게 문자열로 조합하여 바디(body)의 스타일 시트로 등록하는 CSS3 애니메이션 속성추출단계(S43); 및
CSS3 애니메이션의 동작 리스트를 추출하여 동작 단위로 키프레임(KeyFrame)에 등록하며 등록되는 동작들을 CSS3의 문법에 맞게 문자열로 조합하여 스타일 요소로 등록하는 키프레임등록단계(S44);를 포함하여
스타일 시트로 등록된 CSS3 애니메이션 요소의 CSS3 속성과 동작의 스타일 요소에 따라 이펍파일의 로딩완료시 EPUB3 애니메이션 이 자동 실행되는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 방법.
스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템에 있어서,
사용자로부터 애니메이션의 종류에 대한 선택을 입력받고 선택된 종류의 애니메이션의 설정에 필요한 CSS3 애니메이션 요소를 입력받으며, 선택된 종류의 애니메이션에 대한 하나 이상의 동작 변화에 필요한 CSS3 애니메이션 요소를 입력받아 애니메이션 동작 리스트를 생성하는 CSS3 애니메이션 요소 입력모듈(10);
상기 입력된 CSS3 애니메이션 요소를 HTML5 커스텀 어트리뷰트로 변환하여 저장하고 HTML5 커스텀 어트리뷰트로 변환된 CSS3 애니메이션 요소를 HTML 태그에 입력하여 HTML5 문서 파일로 저장하는 HTML5 커스텀 어트리뷰트 변환모듈(20); 및
상기 저장된 HTML5 문서 파일을 이용하여 EPUB3 파일을 생성하는 전자책 파일 생성 모듈(30);를 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템.
제9 항에 있어서,
상기 HTML5 커스텀 어트리뷰트를 분석하여 CSS3 애니메이션 요소의 CSS3 속성을 추출하여 이를 기초로 EPUB3 애니메이션을 실행하는 EPUB3 애니메이션 분석 및 실행 모듈(40);을 더 포함하는 것을 특징으로 하는 스타일시트 애니메이션을 이용한 이펍 애니메이션 실시간 생성 및 재생 시스템.