XELF API

시작하기에 앞서

XELF IDE(통합개발환경)은 웹을 기반한 콘텐츠 저작환경으로 시각화된 디자인 저작도구와 직접 코딩이 가능한 스크립트 개발도구로 나누어져 있습니다. 통합개발환경은 현재 www.xelf.io 에서 서비스 중이며 서버에 설치하거나 별도 클라우드에서 운영하실 수도 있습니다. XELF IDE(통합개발환경)은 보다 간편하게 웹 콘텐츠를 만들고 이에 필요한 디자인과 기능을 개발하는데 그 목적이 있습니다.

XELF 콘텐츠 구조

XELF에서 저작되는 모든 콘텐츠는 다음과 같은 구조로 클라우드에 저장됩니다.

오브젝트(object) : 콘텐츠의 개별 디자인요소를 의미하며 텍스트/도형/이미지/벡터 등의 다양한 타입이 있으며 페이지에 삽입되면 위치/크기/회전값 등의 정보를 함께 갖게 됩니다. 오브젝트의 타입에 따라 저장소(repository) url에서 파일을 가져와 표시하는 경우도 있습니다.
페이지(page) : 페이지는 콘텐츠를 나누는 단위이며 다수의 오브젝트들이 포함되어 있을 수 있습니다. 하나의 페이지에서 여러 액션을 수행할 수도 있으며 페이지에서 페이지로 이동이 가능합니다. 오브젝트의 리스트, 위치, 크기 정보들을 갖고 있는 디자인 문서(design file)와 스크립트 개발도구를 통한 개발 문서(dev. file)를 포함하고 있습니다. 또, 페이지의 이름, 해상도와 배경화면, 설정 등을 저장한 페이지 정보(page info)를 갖고 있습니다.
프로젝트(project) : 프로젝트는 다수의 페이지로 구성된 콘텐츠의 상위 구분입니다. 일반적으로 XELF 뷰어의 설정에 따라 페이지가 순차적으로 표시되며 프로젝트의 제작자, 제작일시, 수정일시, 저작권, 공개범위, 기본 해상도 등을 프로젝트 정보(project info)에 저장하고 있습니다. 또, 프로젝트는 페이지와 같이 개발 문서(dev. file)를 갖고 있습니다.

XELF 콘텐츠 뷰어 구조

XELF 통합개발환경에서 제작된 모든 콘텐츠는 XELF 콘텐츠 뷰어를 통해 재생/표시됩니다.

유저인터페이스 영역 (User Interface) : 콘텐츠를 재생/표시하는 방법을 지정하고 사용자가 콘텐츠를 원활히 감상하고 제어할 수 있도록 합니다. 현재 XELF에서는 기본뷰어/스크롤뷰어/표시UI없음 3가지 형태의 스킨을 제공하고 있습니다.
콘텐츠 영역 (Contents) : 프로젝트와 프로젝트를 구섣하는 페이지를 표시합니다.
모듈 (Modules) : 콘텐츠를 표시하기 위한 기능입니다. 뷰어의 UI를 제어하고 XELF API를 구동할 수 있습니다. 각종 애니메이션 및 인터랙션을 구동시키는 액션 모듈과 프로젝트의 페이지를 직접 제어하기도 합니다.

XELF API 소개

XELF 통합개발환경에서 제공된 API를 통해 콘텐츠를 제어하고 디자인 저작도구에서 제공하지 않는 기능을 스크립트 개발도구에서 구현할 수 있습니다.

스크립트 개발도구에서 javascript와 html을 직접 코딩할 수 있지만 XELF통합개발환경에서 제작된 콘텐츠의 구성 요소를 활용하거나 뷰어를 제어하기 위해서는 XELD API를 사용하는 것을 권장합니다. 제공되는 XELF API는 뷰어의 API모듈을 통해 실행됩니다.

XELF API 분류

API 종류 설명

데이터 하나의 스크립트로만 이루어져있는 경우 별도 데이터 공유 모듈이 필요하지 않음. 하지만 여러 스크립트로 이루어져 있는 경우 각각의 스크립트 간의 스코프, 실행 타이밍의 차이 등에 의해 데이터 공유 모듈이 필요함 (개발자 모드를 이용하여 작성한 스크립트의 경우)
또한 로컬 스토리지, 비동기 통신 등을 통한 데이터의 읽기/쓰기 기능 제공

프로젝트 프로젝트 배경 설정, 해상도, 재생 상태 등을 제어하는 기능 제공, 프로젝트 시작, 종료 등 프로젝트의 생명 주기에 따른 이벤트 제공

페이지 페이지 배경 설정, 페이지 트랜지션 설정, 페이지 이동, 페이지 생성, 페이지에 오브젝트 추가/제거 등 페이지에 적용되는 속성을 제어하는 기능 제공
페이지 이동 전/후, 페이지 생성/삭제 등 페이지의 생명 주기에 따른 이벤트 제공

오브젝트 오브젝트 생성, 오브젝트 속성 변경, 오브젝트 제거 등 오브젝트에 적용되는 속성을 제어하는 기능 제공
오브젝트 속성 변경, 오브젝트 생성/삭제 등 오브젝트의 생명 주기에 따른 이벤트 제공

액션 URL 이동, 페이지 이동, 오브젝트 속성 변경 등을 제어하는 기능 제공
디자인 모드에서 사용할 수 있는 액션보다 API로 제어할 수 있는 액션이 더 많고 속성이 다양함

뷰어 UI 뷰어 UI 숨김/보임 처리, 뷰어 색상 변경 등 뷰어의 UI를 제어하는 기능 제공

API 종류	설명
데이터	하나의 스크립트로만 이루어져있는 경우 별도 데이터 공유 모듈이 필요하지 않음. 하지만 여러 스크립트로 이루어져 있는 경우 각각의 스크립트 간의 스코프, 실행 타이밍의 차이 등에 의해 데이터 공유 모듈이 필요함 (개발자 모드를 이용하여 작성한 스크립트의 경우) 또한 로컬 스토리지, 비동기 통신 등을 통한 데이터의 읽기/쓰기 기능 제공
프로젝트	프로젝트 배경 설정, 해상도, 재생 상태 등을 제어하는 기능 제공, 프로젝트 시작, 종료 등 프로젝트의 생명 주기에 따른 이벤트 제공
페이지	페이지 배경 설정, 페이지 트랜지션 설정, 페이지 이동, 페이지 생성, 페이지에 오브젝트 추가/제거 등 페이지에 적용되는 속성을 제어하는 기능 제공 페이지 이동 전/후, 페이지 생성/삭제 등 페이지의 생명 주기에 따른 이벤트 제공
오브젝트	오브젝트 생성, 오브젝트 속성 변경, 오브젝트 제거 등 오브젝트에 적용되는 속성을 제어하는 기능 제공 오브젝트 속성 변경, 오브젝트 생성/삭제 등 오브젝트의 생명 주기에 따른 이벤트 제공
액션	URL 이동, 페이지 이동, 오브젝트 속성 변경 등을 제어하는 기능 제공 디자인 모드에서 사용할 수 있는 액션보다 API로 제어할 수 있는 액션이 더 많고 속성이 다양함
뷰어 UI	뷰어 UI 숨김/보임 처리, 뷰어 색상 변경 등 뷰어의 UI를 제어하는 기능 제공