Citrine소개서

CITRINEComponent Based Mobile Application Development Framework
㈜LOGEO
FRAMEWORK INTRODUCE

Component Based Mobile Application Development Framework
www.mospi.org: Citrine
INDEX 1. 시장 기술 현황
2. 도입 배경
3. Citrine Framework 개요
4. 주요 특징
5. 시스템 구성도
6. 샘플 코드
7. 레퍼런스
8. 기타

1. 시장 기술 현황(1/2)
 기존의 WEB 기술은 단말의 작은 화면과 성능에 만족스런 구조를 갖추지 못함
 다양한 스마트폰의 OS에 따른 서비스비용 증가 및 유지보수의 문제 발생
 같은 OS도 단말 제조사에 따라 제공 기능 및 성능이 달라짐
• iOS, Android, BlackBerry, WinMobile 등 다양한 모바일
플랫폼의 존재
• Android의 open source에 따른 제조사별 파편화
• 다양한 형태의 기기에 따른 지원기능 파편화
모바일 OS(Native) 기술 환경
모바일 플랫폼의 파편화
☞ 기획 및 예측하지 못한 개발상의 문제점 발생
• OS별 개발 환경 및 개발 언어의 상이함에 따른 전문 개발
인력이 별도 존재
• 동일 기능에 대해 OS별로 개발하는 중복투자 발생
상이한 개발환경
☞ 개발비용 증가 및 유지보수 비용의 급격한 증가
• Plug-In 기술의 배제에 따른 flash의 모바일 지원포기
(MS의 Silverlite도 향후 window에서만 동작 지원 예상)
• 현재 SPEC 초안형태로 각각의 브라우저 별로 기능 구현
• 향후 신규 기술에 대한 SPEC 정의에 대한 대응 미흡
모바일 브라우저 기술 환경
HTML5 의 도입에 따른 주도 기술의 부재
☞ HTML5 가 정착까지는 오랜 시간이 걸릴 것 으로 예상
• Sencha touch, JQuery 등 Webkit을 이용하여 native app 처럼
동작하게 하는 웹앱 개발 지원 프레임워크 활성화
• Javascript 기술을 사용한 기술로 장치연동 및 리소스 사용에
대한 webkit의 한계 벗어나지 못함
웹앱 개발 지원 프레임워크의 한계
☞ 복잡한 UI는 코드의 복잡성과 유지보수의 어려움 증가
Native 모바일 크로스 플랫폼으로 진화 Web기반 모바일 크로스 플랫폼으로 진화
모바일 환경의
기술 현황
3

1. 시장 기술 현황(2/2)
• 일반적으로 C/C++ 언어로 개발
☞ 단말의 커널이 UNIX/Linux 계열과 프레임워크를
가지고 있어 이식이 용이하기 때문
• 통일된 UI의 구조를 가짐
☞ 동일한 코드로 동작하기 위하여 고유의 control을
사용 함으로써 OS의 특성에 맞는 UI사용하지 못함
Native 크로스 플랫폼 기술
특징
웹기반 크로스 플랫폼 기술
크로스 플랫폼 기술 현황
• UI부분에 있어 일정부분 호환성이 검증됨
☞ iOS와 Android가 모두 Webkit기반의 Webview를
제공하므로 어느정도 호환성이 검증 되어 있음
• 웹을 네이티브 앱으로 감싸는 Hybrid 형태로 변화
☞ Nitobi의 PhoneGap, KTH의 Appspresso등 웹뷰를
네이티브로 감싸는 Hybrid의 솔루션을 제공
특징
• UI 처리 능력이 뛰어나 웹기반 앱들보다 섬세한 UI구성
• 스토리지 및 디바이스 제어 유리
• 빠른 성능 보장 및 화면 전환의 자연스러움
장점
• C, java와 같은 프로그래밍 언어보다 쉽게 접근 할 수 있음
• 템플릿 기반의 웹에디터 연동 솔루션의 경우 개발자가 아닌
일반인도 간단한 app제작이 용이
장점
단점 단점
• 멀티플랫폼을 위한 통합 미들웨어을 만드는 것은 개발
난이도가 매우 높으며, 안정적인 기능을 제공하는 솔루션이
적음
• 개발을 위하여 플랫폼 종속적인 새로운 언어를 배워야 함
• 자바스크립트의 과도한 사용시 브라우저의 성능한계 및
아직은 무거운 브라우저 구조를 가짐
• 템플릿 기반의 솔루션의 경우 제공하는 기능만 사용이
가능하며 복잡한 구조의 앱 개발 시 구현의 어려움 존재
4

2. 도입 배경
현재의 Web기술로는 모바일 환경에 맞는
UI와 성능을 보장 할 수 없음
Native 기술은 OS별 개발 및
유지보수 비용이 많이 발생
OS, OS 버전별, 브라우저별 특성을
모두 아는 개발자와 기획자를 찾기 힘듬
webKit 기반으로 개발하지 않는 한
모바일 컨텐츠를 새로 제작하여야 함
다양한 Native UI 레이아웃과 UI 컴포넌
트를 제공하여 UI와 모바일 성능 보장
Component 기반으로 Reuse &
Customize
OS 및 장치에 따른 특성을 Citrine에서
동일 하게 동작하도록 처리 함
문제점 Citrine 도입 해결방안
Citrine는 Web의 장점을 갖는 Native 개발 framework으로 쉬운 개발과 유지보수 및 높은 성능을 제공
5
기존 Web과 동일한 네트워크 구성으로
Native App 서비스를 제공 할 수 있음

2. 도입에 따른 Work Process 변화
• Independent Process : 디자인, UI, 컴포넌트 등 역할 분리 구조• Complex Process : 기획, 디자인, 개발 part간 얽힌 구조
As-is(General Process) To-be(Citrine Development Process)
6

모바일 개발을 위한 컴포넌트 개발 기반의 애플리케이션 프레임워크Define
Replaceable 유사한 다른 Component로 쉽게 대체 및 변경 가능
Extensible Element Attribute 변경 및 Container & Format Element 기능 변경 가능
Customizable Native Overriding을 통해 신규 속성 추가 변경 및 Component 독자적 Plug-in 구축 가능
3. Citrine Framework 개요 : 기본이해
7

3. Citrine Framework 개요 : 구조적 특징
RIA 플랫폼의 성격을 갖는 컴포넌트 기반 개발 프레임워크Define
• 사용자인터페이스,데이터바인딩,이벤트 등의 기능정의
• 표현이 자유롭고, 이식성, 디자인과 로직의 분리 가능
• 모바일 기기에 맞는 다양한 최적의 Layout 제공
• Auto, Fit, Percent 개념의 resize 제공
• xml 형태로 서버에서 UI 및 로직 변경 가능
UI Layer의 구성은 XML + Function Script로 구성
☞ Web Cross Platform의 특징 (UI + UI Logic)
• OS에서 제공하는 API를 사용하여 앱의 성능 보장
• 기능 변경 및 새로운 기능에 추가에 대한 용이함
• OS별 최적의 UI 제공(OS 제공 Control 사용)
• 기본 Component에 대한 동일한 접근 방식 제공
OS Layer의 직접적 API 사용
☞ Native Cross Platform의 특징 (성능 + 접근성)
8
XML
Function
Script
UI Layer
Component Layer
Component 1.2.3… Custom Component
OS Layer
(iOS, Android, Etc)

3. Citrine Framework 개요 : 기능적 특징
Feature
Component Based Structure 손쉬운 Component의 추가, 교체가 용이
Simple Functional Definition 복잡한 기능들을 실제 사용 방식에 맞춰 간단한 인터페이스 제공
Native Code Support 네이티브 코드 연동을 지원 및 기본기능 개발 및 컴포넌트 개발 편의성을 증대
Benefits
UI XML Script Support 다양한 Layout지원 UI XML, FunctionScript 지원
One Source Multi-Platform iOS 와 Android 에 동시에 적용 가능
Easy Development 개발시 XML 자동완성(Auto complete) 기능 제공
OpenGL Effect 화면전환 효과 등 화려한 UI effect 제공
Easy Update C/S 개발이 용의하며 App 업데이트 시 마켓에서 다운로드 없이 서버에서 XML 만 변경
Custom Component Interface 사용자가 컴포넌트를 제작하여 추가 할 수 있는 인터페이스 제공
Easy, Effective animation 다양한 애니메이션 효과를 손쉽게 사용
9

4. 주요 특징(1/2)
모바일 웹 서비스보다 다양한 UI 효과와 구성을 제공합니다.
coverflow, OpenGL 등의 화려한 효과 및
테마기능으로 안드로이드에서 아이폰 UI 효과
다양한 애니메이션을 태그(tag)로 간단히 구현됩니다.
기존의 길고 복잡한 애니메이션 코딩을 개체 애니메이션 태그
사용으로 간단하고 인터렉티브한 효과 구현이 용이
참고 URL : http://youtu.be/eEg-u-r5NC8
2
스마트폰 태블릿PC
App 개발 후 별도 추가 작업 없이 태블릿 기기에도 바로
적용이 됩니다.
One resource Multi-resolution 적용
3
1
coverflow 효과 책장넘기기 효과 아이폰 테마 적용
10

4. 주요 특징(2/2)
XML 서버 통신으로 사용하여 App 관리가 용이합니다.
서버코드 수정작업만으로 업데이트 바로 반영4
고객사 서버
Application
XML 통신
- 페이지 다운로드 형식
수정 업데
이트
Citrine
Platform
최적화된 장치 Device 연동
카메라 GPS
주소록
푸시서비스
다양한 디바이스가 간편한 XML 코드로 제공되어 연동
설정이 우수합니다.
다양한 디바이스에 대한 Easy Access 가능
5
Citrine
Platform
Easy
Develop Skill
XML 문법 구조로 웹개발자도 쉽게 학습이 용이합니다.
XML 지식이 있으면 누구나 쉽게 활용
6
- XML Based MOML* Library
* MOML : Mobile Markup Language
모바일 개발자
웹 개발자
11

5. 시스템 구성도
12

6. 샘플 코드
<?xml version="1.0" encoding="UTF-8"?>
<MOML version="1.0.0">
<UI>
<UILAYOUT portrait="480,800">
<COVERFLOW layout="0,0,450,250"
dataSource="url:galleryData.xml”
dataList="/DATA/ITEM"
imagePath="./@img"
clickItemPath="./@onClick"
shadowStyle=“mirror" " onClick="" />
</UILAYOUT>
</UI>
</MOML>
<UI>
<GALLERY layout="0,0,450,250"
imagePath="./@img"
previewStyle=“dot" onClick="" />
</UILAYOUT>
</UI>
</MOML>
<UI>
<GALLERY layout="0,0,450,250"
itemPath="./@img"
previewStyle=“thumbnail" onClick="" />
</UILAYOUT>
</UI>
</MOML>
☜ Component : COVERFLOW
Style : mirror
☜ Component :
GALLERY
Style : dot
Component : GALLERY ☞
Style : thumbnail
13

Citrine Framework를 사용하여 원 소스 형태로 개발된 Native 의료업무 어플리케이션 입니다.
7. 레퍼런스(1/5)
 서울 아산병원 / 을지의료원 모바일 App 주요화면
서울아산 / 을지의료원 Mobile 구축 (Android & iOS)
 서울 아산 / 을지의료원 모바일 App 소개
언제 어디서나 쉽고 빠르게 의료 정보에 접근함으로써 진료 업무의 효율성을 개선하고, 보다 수준 높은 환자 대응
서비스를 제공하기 위한 병원의 의사, 간호사 용 업무 어플리케이션입니다.
14
[메인 화면]
[CT촬영 조회 화면][환자 정보 화면] [그래프 및 차트 화면]

Citrine Framework 기반으로 개발하였으며 Data Source를 사용한 데이터통신 위주의 쇼핑몰 App 소개 입니다.
7. 레퍼런스(2/5)
 마리해즈 쇼핑몰 App 주요화면
[메인 화면] - Android [추천 상품 화면] - Android
[인기 상품 화면] - iOS[상품소개 상세 화면] - Android [상품목록 화면] - iOS
[웹뷰 화면] - Android
쇼핑몰 App(Android & iOS)
 쇼핑몰 App 소개
기존 웹으로 구성된 쇼핑몰을 모바일 영역으로 확장한 서비스로서 다양한 애니메이션 효과, 데이터 바인딩 기술, 웹뷰 연동을
적용하여 개발하였습니다.
15

애니메이션 및 멀티미디어 위주의 Interactive Book 입니다.
7. 레퍼런스(3/5)
 베리앱 App 주요화면
[메인 화면]
베리앱 App(Android & iOS)
 베리앱 App 소개
튼튼영어의 베이비리그 학습 내용을 미리 체험해 볼 수 있도록 제작한 유아교육용 어플리케이션입니다.
배경음악, 효과음, 다양하고 인터렉티브 한 터치 액션을 적용하였습니다.
16
[읽기 화면]
[게임 화면] [안내 화면]

동영상 및 카메라 등 장치 연동 위주의 어플리케이션 입니다.
7. 레퍼런스(4/5)
 페이스닝 App 주요화면
[메인 화면]
페이스닝 어플리케이션 개발(Android)
 페이스닝 App 소개
얼굴에 특화된 요가 동작을 동영상으로 제공하며, 즐겨찾는 요가 동영상을 스크랩할 수 있습니다.
동영상 반복 및 전면 카메라를 통한 셀프 촬영 모드 제공으로 사용자가 따라하기 편하게 사용성을 증대하였습니다.
17
[즐겨찾기 화면]
[요가 재생 화면]
[Before & After 화면]

Citrine Framework의 API들을 예제를 통해서 설명한 reference App입니다.
7. 레퍼런스(5/5)
 Citrine API Demo App 주요화면
Citrine API Demo (Android)
 Citrine API Demo App 소개
Citrine Framework의 기능과 API를 적용한 App입니다. Citrine Framework에 대한 이해와 적용 사례를 확인하실 수 있으며
차트 및 그래프의 효과, Theme, Webview 등 추가된 기능들을 확인하실 수 있습니다.
18
[메인 화면] [Coverflow & Galley][Chart 및 그래프 효과] [Theme 기능]

8. 기타
19
네이버 카페 : http://cafe.naver.com/citrineframework
citrine framework 개발자 커뮤니티 성격으로 운영 중(샘플예제, 사용팁, API 설명 등)
Citrine 카페 운영

Citrine소개서

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Citrine소개서

Similar to Citrine소개서 (20)

Citrine소개서