제 8 장. 2D 그래픽스기술의활용
8.1 모바일환경에서 2D 그래픽스기술 8.1.1 모바일 2D 그래픽스의개념 8.1.2 모바일 2D 그래픽스의활용분야
8.1.1 모바일 2D 그래픽스의개념 하드웨어환경의발전과디스플레이화면 2 세대 2.5 세대초기 3 세대 3 세대 2 세대초창기환경 적은량의문자데이터만표시, 흑백, 화면해상도는보통 65 101 2.5 세대 WAP 환경 많은량의문자와일부데이터를표시할필요로해상도증가 65 101 ~ 120 160 크기의화면, 4 또는 8 레벨의그레이나컬러
8.1.1 모바일 2D 그래픽스의개념 3 세대초반멀티미디어환경 많은량의문자와이미지등데이터량및종류의증가 화면해상도는보통 120 160, 색상은 256 내지 4096 컬러사용 최근의 3 세대비디오환경 최근화상전화, 비디오스트림, DMB 방송등 full video 화면요구 화면은 176 220 의 QCIF, 또는 240 320 의 QVGA 사양적용, 색상은보통 4096 내지 256K 컬러를사용 화면디스플레이해상도명칭 명칭화면해상도사양특징 QVGA (Quarter VGA) QCIF (Quarter Common Interchange Format) 240 320 픽셀, 262K 컬러 176 144~ 176 220 픽셀 QQVGA (Quarter QVGA) 120 160 픽셀 QVGA 의절반 VGA 의절반크기 262K (=256K) : 24bit 중 18bit 사용 CIF 는비디오화면의표준사양으로 PAL 의경우 352 288, NTSC 의경우 352 240
8.1.1 모바일 2D 그래픽스의개념 래스터그래픽 (Raster Graphics) 래스터출력장치를위해그래픽데이터를픽셀단위로저장 저장된파일의크기는출력장치의해상도에비례 화면을확대하면화질이떨어짐 벡터그래픽 (Vector Graphics) 그래픽객체들을수학적함수로표현하여기억공간에저장 파일의크기가래스터그래픽방식으로저장한것보다작음 화면확대시에도화질의변화가없음 확대 래스터 벡터
8.1.1 모바일 2D 그래픽스의개념 래스터방식과벡터방식의비교 표현방식 래스터그래픽스 그래픽객체들을구성하는픽셀들의값을그대로저장 벡터그래픽스 객체를수학적함수로표현하여그래픽명령어형태로저장 그림을확대하거나회전하면화그림을확대 / 축소, 회전하여도화확대 / 축소질이떨어짐질에변화가없음 응용페인팅기능에주로사용드로잉기능에주로사용 애니메이션 3GPP 표준형식 일반사용형식 프레임별로연속된이미지를저장하여애니메이션효과표현 GIF, PNG, JPEG SIS, WBMP, NBMP, GIF, PNG, JPEG, JPEG2000 좌표의기하변환을이용하여자유롭게움직임을표현 SVG Tiny, SVG Basic VIS, Mobile Flash, SVG
8.1.2 모바일 2D 그래픽스의활용분야 래스터그래픽스파일형식 WBMP (Wireless BitMaP) WAP 포럼에서정의 모바일단말기의제한된메모리에서사용하기적합 SIS (Simple Image Solution) 네오엠텔에서개발하여 2000 년국내모바일솔루션으로채택 GIF, JPEG, PNG 에비하여평균 6 배이상의압축율 GIF, JPEG, PNG 기존의웹환경에서널리사용하는이미지형식 기존형식의이미지를 WBMP 또는 SIS 형식으로변환하여사용
8.1.2 모바일 2D 그래픽스의 활용분야 래스터 그래픽스의 활용분야 대기화면 서비스, 캐릭터 다운로드 및 모바일 아바타, 모바일 카드 및 쿠폰 서비스
8.1.2 모바일 2D 그래픽스의활용분야 벡터그래픽스파일형식 mobile SVG : W3C, 모바일기기용 2D 벡터그래픽스표준 Flash Lite - 매크로미디어회사에서개발한벡터그래픽스형식 기타 : VIS, Mobile Flash 벡터그래픽스의활용분야 애니메이션, 게임, 지도서비스, 전자책등단말기인터페이스
8.2 이미지처리기술및활용 8.2.1 모바일환경에서이미지데이터의형식 8.2.2 이미지처리기술의활용
8.2.1 모바일환경에서이미지데이터의형식 WAP 표준 : WBMP(Wireless BitMaP) WAP 포럼에서정의한이미지형식 모바일단말기의제한된메모리에서사용하기적합 팔레트를이용하여압축율증가 : 인덱스컬러 기존의이미지형식과변환하는다양한도구가있다. 일반이미지와 WBMP 형식의이미지
8.2.1 모바일환경에서이미지데이터의형식 기존의웹표준 GIF LZW(Lempel-Ziv-Welch) 알고리즘을사용 팔레트를사용하는 8 비트컬러만을지원하는압축방식 사진이미지보다그래픽이미지에더높은압축률, 애니메이션기능을추가로지원 NTT-DoCoMo 의 i-mode 표준으로사용 JPEG 특별히사진 ( 정지화상 ) 의압축을위해고안된이미지압축표준 1992 년국제표준으로확정 JPEG 은 24 비트컬러를사용하며, 압축율은약 1/10 ~ 1/50 정도 자연이미지는급격한색상의변화가드물게일어나고, 사람의눈은색상보다명암에더민감하다는사실도활용
8.2.1 모바일환경에서이미지데이터의형식 SIS(Simple Image Service) 형식 국내네오엠텔에서개발한모바일애니메이션포맷 2000 년 6 월국내이동통신사의통합표준으로채택함. GIF, BMP 에비해데이터압축률이 2 배이상. ( 평균 6 배 ) 객체기반압축기법 : 색상과프레임수증가할수록압축률향상 세계 CDMA 및 GS 시장의 40% 를차지함. 저작툴 (SIS Animator 2.0) 및시뮬레이터도제공
8.2.2 이미지처리기술의활용 (1) 카메라폰활용서비스 유무선통합형서비스 모바일인화서비스 : 사진을전송하면인화하여배달 찍은사진이나웹상의이미지를열람, 편집, 전송하는서비스 사진을스티커형태로편집하여바로출력하는서비스 MMS 연동서비스 샤메일 서비스 : 카메라폰으로찍은사진 + 이모티콘 + 메일
8.2.2 이미지처리기술의활용 모바일쇼핑서비스 상품의바코드인식을통해무선인터넷으로상품정보보기 잡지, 광고등의바코드를인식하여예매, 구입신청등서비스 중고차판매확인서비스 : 차량의상태를고객에게사진전송 견적서비스 : 자동차외장수리, 치과의치아진단및견적 부가정보서비스 모블로그 (Moblog) : 휴대전화로웹블로그에글 / 그림을올림 캐리커쳐 / 아바타제작 : 얼굴촬영후화상처리를통한커리커쳐
8.2.2 이미지처리기술의활용 (2) 카메라폰프로그래밍 : WIPI 2.0 WIPI 2.0 에서 Camera 클래스의 API java.lang.object +--org.kwis.msp.media.camera +--StillClip Camera 클래스 카메라장치를제어하기위한클래스 Camera(String type, int bufsize) StillClip 클래스 카메라디바이스에서정지영상을캡쳐하고재생하는클래스 StillClip(String type, int bufsize) JPEGCameraClip 클래스 카메라폰이 JPEG 형식을지원할때 StillClip 클래스대신에사용
8.2.2 이미지처리기술의활용 (3) KTF WIPI 1.1 의카메라폰프로그래밍 카메라촬영및미리보기샘플코드 1 초기화 (0 번키 ) : 버퍼등필요한자원을다음과같이할당 jpegclip = new JPEGCameraClip(6*1024); 2 촬영 (2 번키 ) : 화면에정지영상이나온후버퍼를비우고촬영 jpegclip.enableoemdisplayarea();.previewstart();.cleardata();.snapshot(this); 3 정지영상재생 (3 번키 ) : 버퍼를비우고데이터보기실행 jpegclip.cleardata();.putdata();.view(null); 4 종료 (8 번키 ) : 미리보기및버퍼지우고화면을 UI 모드로변경 jpegclip.previewstop();.cleardata();.disableoemdisplayarea();
8.2.2 이미지처리기술의활용 import org.kwis.msp.lcdui.*; public class CameraTest extends Jlet { Camera lastcameraclip = null; JPEGCameraClip jpegclip; byte[] jpegimage = new byte[6*1024]; // 정지영상용버퍼 int jpegimagelength = 0, viewrectx=0, viewrecty=0, viewrectw=120, viewrecth=120; ImageCard ImgCard; Display display = Display.getDisplay(null); public CameraTest(){ } protected void startapp(string args[]){ ImgCard = new ImageCard(); display.pushcard(imgcard); try{ jpegclip = new JPEGCameraClip(6*1024); jpegclip.setmode(1); }catch(nullpointerexception e){ System.out.println("Cannot Initialize jpegclip"); } } protected void destroyapp(boolean b){ System.out.println("Destroyed..."); display.removecard(imgcard); }
8.2.2 이미지처리기술의활용 } public class ImageCard extends Card implements PlayListener{ public ImageCard() { super(); } protected boolean keynotify(int type, int key) { if( key == EventQueue.KEY_NUM0 && type == EventQueue.KEY_RELEASED) {... } if ( key == EventQueue.KEY_NUM2 && type == EventQueue.KEY_RELEASED ) { if(lastcameraclip!=null) Player.stop(lastCameraClip); System.out.println("key 2 releases-정지영상촬영!!!\n");... }... } if ( key == EventQueue.KEY_NUM3 && type == EventQueue.KEY_RELEASED ) { System.out.println("key 3 releases- 정지영상재생!!!\n");... } if ( key == EventQueue.KEY_NUM8 && type == EventQueue.KEY_RELEASED ) { System.out.println("key 8 releases- 카메라사용종료!!!\n");... }
8.3 모바일벡터그래픽스표준언어 : mobile SVG 8.3.1 모바일벡터그래픽스기술의동향 8.3.2 mobile SVG 의소개 8.3.3 mobile SVG 문서의작성
8.3.1 모바일벡터그래픽스기술의동향 (1) 비표준사양 : 업체고유솔루션 Flash Lite 2003 년 Macromedia 에서 Flash4 의기능을모바일용으로개발 Flash Lite 1.0 : ActionScript 로상호작용표현, 다양한오디오지원, 텍스트입력및서버연결이가능 2004.7 월 Flash Lite 1.1 출시 동일한엔진으로 mobile SVG 도지원 휴대폰의표시기능접근가능 : 배터리잔량, 신호강도, 시간등 일본 NTT DoCoMo I-mode 에최초탑재 KDDI, Motorola, Nokia, Symbian 등휴대폰 PDA 및 TV/Game 용 Set-top box 에도탑재
8.3.1 모바일벡터그래픽스기술의동향 활용분야 애니메이션, 메시지서비스, GIS 및 LBS 에서의도로정보, 게임, 배경화면및단말기의사용자인터페이스
8.3.1 모바일벡터그래픽스기술의동향 Mobile Flash 국내디지털아리아사에서 Flash 애니메이션기술을모바일에서구현 Macromedia 에서공개한 Flash 4 소스를모바일용으로개발 VIS (Vector Image Solution) 2001 년네오엠텔, 독자형식의모바일벡터그래픽솔루션 현재 Flash 5.0 및 SVG Tiny 의기능을포함하여지원 풍부한기능 : 카메라 API 연동, GPS 및 LBS 인터페이스, 변수저장기능등
8.3.1 모바일벡터그래픽스기술의동향 (2) W3C Mobile Web 워킹그룹표준사양 SVG (Scalable Vector Graphics) 웹문서에서 2D 벡터그래픽스를표현하기위한 W3C 표준 2001.9 월버전 1.0, 2003.1 월버전 1.1 XML 기반으로다른 XML 기반언어와호환 mobile SVG 2003.1 월모바일인터넷용표준규격발표 핸드폰용 SVG Tiny 와 PDA 용 SVG Basic 으로구분 유무선간의콘텐츠전환이용이, 공개표준으로특정회사와무관 MMS 의필수형식으로채택하여관련서비스증가 활용서비스 GPS, 지도, LBS 관련서비스, 전자문서, MMS, 애니메이션카드, 증권정보, 예약, 교육콘텐츠, 사용자인터페이스등
8.3.1 모바일벡터그래픽스기술의동향 향후전망 웹에서는 사실상표준 ' 인 Flash 를채용하는휴대폰이많으나 모바일에서는 W3C 표준인 SVG 가표준기술로예상 개발사들은표준을따를것인가, 비표준을유지할것인가, 모두지원할것인가고민 모바일벡터그래픽포맷의비교 VIS mobile SVG Flash Lite 표준범위국내업체제품 W3C, 3GPP 매크로미디어사제품 저작권 콘텐츠검색 내 콘텐츠제작 플레이어구입시라이센스비용지불 공개된표준 경우에따라가능가능불가능 네오엠텔에서제공하는 VIS 유틸리티를사용 여러회사에서도구를개발하여제공 플레이어구입시라이센스비용지불 매크로미디어에서제공하는 Flash Lite 도구사용
8.3.2 mobile SVG 의소개 일반적인 SVG 의장점 XML 기반벡터그래픽 : 확대 / 축소자유, 작은데이터용량 공개된표준으로플랫폼에독립적, 다양한솔루션개발이용이 XML 을기반으로정의 XML 로표현된다른데이터및프로그램과호환 유선인터넷과모바일환경에서동일한형식을사용 상호작용구현, 텍스트검색및활용이용이 mobile SVG 의개요 작은메모리, 낮은전력소모, 낮은연산력등모바일장치에최적화 점진적다운로드 (Progressive Downloading) 및점진적렌더링 (Progressive Rendering) 기술을지원
8.3.2 mobile SVG 의소개 SVG 1.1 에서목적에따라조합하는모듈화기술적용 모듈화를적용 SVGT(Tiny) 와 SVGB(Basic) 의 profile 정의 SVGT 는 SVGB 의부분집합, SVGB 는 SVG 1.1 의부분집합 SVGB(Basic) high-level profile : PDA, 고기능폰등의기기에적합 SVGT(Tiny) low-level profile 로서적은메모리와낮은대역폭의보급형모바일기기에적합
8.3.2 mobile SVG 의소개 SVGT Viewer (Player) 외국의경우 캐나다 BitFlash 사의 SVGT player 스웨덴 ZOOMON 사의 SVG player ( 현재 IKIVO 사 ) 미국 TinyLine 의 SVG player, 호주 CSIRO 사의 PocketSVG viewer, 일본 KDDI Lab 의 JaMaPS 등이있다 국내의경우 자이폭에서 WIPI 용 SVG Tiny player 를개발하였으며, 이를네오엠텔에서 NeoSVG 로발전, 로코드에서는 Shock2D 개발 휴원에서 Alex VG T-player 개발
8.3.2 mobile SVG 의소개 SVGT Editor IKIVO 사에서개발한 mobile SVG animator MMS, 모바일웹출판, 모바일 UI, 휴대폰개인화를포함한다양한벡터그래픽애니메이션콘텐츠제작 Adobe 사디자인툴과유사한환경을제공하며데이터호환가능 휴대폰에뮬레이터에서미리보기가가능
8.3.2 mobile SVG 의소개 그외, mobile SVG 를지원하는편집기 Bitflash 사의 Brilliance, EvolGrafix 사의 XStudio, Beatware 사의 e-picture Pro 와 Mobile Designer 등 기존의그래픽툴의편리한인터페이스와다양한기능외에 DOM 트리나 XML 속성등의구조적인정보를보여준다.
8.3.3 mobile SVG 문서의작성 (1) SVG Tiny (SVGT) SVG 문서의일반적인구성 SVG 문서의루트요소는 <svg> 2차원도형의그리기요소, 텍스트그리기요소 컨테이너요소, 애니메이션및스크립트관련요소 SVGT 의주요모듈 기본구조모듈, 도형모듈등 => 다음페이지 [ 표 8-4] SVGT 에포함되지않는것 tspan, tref, 경로텍스트 그래디언트, 패턴, 클리핑, 마스킹, 필터효과, 상호대화, 스크립트, 스타일속성등
8.3.3 mobile SVG 문서의작성 [ 표 8-4] SVGT 의주요모듈에포함되는요소 모듈기본구조모듈도형모듈이미지모듈기본텍스트모듈기본폰트모듈하이퍼링크모듈조건처리모듈애니메이션모듈확장모듈 루트요소 <svg>, 요소명 파일관련정보를기록하는 <desc> <metadata> <title> 그룹및객체를정의하고사용하는 <defs> <g> <use> <circle> <ellipse> <line> <path> <polygon> <polyline> <rect> <image> <text> <font> <font-face> <glyph> <hkern> 등 <a> <switch> <animate> <set> <animatecolor> <animatemotion> <animatetransform> <mpath> <foreignobject>
8.3.3 mobile SVG 문서의작성 도형그리기예제 바탕사각형, 원, 타원 2 개 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN "http://www.w3.org/graphics/svg/1.1/dtd/svg11-tiny.dtd"> <svg width="130" height="130" viewbox="0 0 130 130" id="svg" display="inline" version="1.1" baseprofile="tiny"> <rect x="0" y="0" width="130" height="130" fill="yellow"/> <circle cx="30" cy="30" r="20" fill="red" stroke="blue" stroke-width="4"/> <ellipse cx="90" cy="30" rx="35" ry="20" fill="red"/> <ellipse transform="translate(60 90) rotate(-20)" rx="40" ry="25" fill="none" stroke="blue" stroke-width="8" /> </svg>
8.3.3 mobile SVG 문서의작성 애니메이션예제 <svg width="5cm" height="3cm" viewbox="0 0 500 300" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <path d="m100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> 배경경로그리기 <path d="m-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <animatemotion begin="0" dur="6" fill="freeze" path="m100,250 C 100,50 400,50 400,250" rotate="auto"/> 삼각형객체 </path> 애니메이션 </svg>
8.3.3 mobile SVG 문서의작성 (2) SVG Basic (SVGB) SVGB 사양과 SVGT 사양의비교 동일한모듈 도형, 하이퍼링크, 이미지, 애니메이션, 확장모듈은동일 일부요소가추가된모듈 구조 (structure) 모듈에 <symbol> 요소추가 텍스트 / 폰트모듈에 <textpath> <tspan> <tref> 등의요소추가 전체로추가된모듈 스타일모듈, 패턴모듈, 마스크모듈, 그래디언트모듈, 뷰모듈, 칼라프로파일모듈, 스크립트모듈, 클립모듈, 필터모듈 SVG full 사양과비교할때 포함되지않는요소는약간만있으나, 속성은많은부분이간략화
8.3.3 mobile SVG 문서의 작성 SVGB 예제 그래디언트, 클리핑 포함 클리핑 이전상태 / 실행결과: <svg width="8cm" height="8cm" viewbox="0 0 240 240" > <defs> <radialgradient id="mygrad"cx="120" cy="130" r="120" fx="120" fy="130" gradientunits="userspaceonuse" > <stop offset="0.6" stop-color="#00dda0" stop-opacity="0.0" /> <stop offset="1" stop-color="#00dda0" stop-opacity="0.9" /> </radialgradient> <clippath id="myclip1"> <path d="m 120,5 L 5,91 47,231 193,231 235,91 z" clip-rule="nonzero"/> </clippath> <clippath id="myclip2"> <path d="m 120,60 A 70,70 0 0,1 120,200 A 70,70 0 0,1 120,60 z" /> </clippath> </defs>
8.3.3 mobile SVG 문서의작성 <rect x="0" y="0" width="240" height="240" stroke="red" stroke-width="4" fill="none" /> <g clip-path="url(#myclip1)"> <rect x="0" y="0" width="240" height="240" fill="url(#mygrad)" /> <text id="text" x="120" y="55" font-family="verdana" font-size="18" textanchor="middle"> </g> Snow Flower </text> <g clip-path="url(#myclip2)" > </g> <rect x="0" y="0" width="240" height="240" fill="white" /> <image x="50" y="64" width="138" height="180" xlink:href="../image/logo1.gif" /> </svg>
8.4 2 차원모바일게임의소개 8.4.1 모바일게임의분류 8.4.2 2 차원모바일게임시장의현황
8.4.1 모바일게임의분류 모바일게임의정의 [ 광의 ] 모바일기기 ( 휴대폰, PDA, 휴대형게임기 ) 에서하는게임 [ 협의 ] 이동전화단말기를통하여모바일로서버에접속하여이용하는게임. 즉, 무선인터넷서비스환경 모바일게임의예 아케이드 / 퍼즐게임 : 마법의돌 시뮬레이션게임 : 여름이야기 롤플레잉 RPG 게임 : 포가튼퀘스트 전략롤플레잉게임 : 삼국지결전
8.4.1 모바일게임의분류 이용방식에따른분류 ( 적용기술및네트워크사용도 ) 내장형 : 단말기에내장. 간단한퍼즐부터전투형까지다양 SMS 방식 : 문자메시지를통한상호간의게임 브라우저방식 : WAP 기반, 간단한그래픽 / 애니메이션제공 멀티플레이어방식 : 여러사람이네트워크로연결하여실행 다운로드방식 : 다운로드후오프라인또는온라인으로게임 스트리밍방식 : 통신망에지속적으로연결, 실시간게임진행
8.4.1 모바일게임의분류 온라인게임기반기술비교 WAP 방식과 VM 방식 WAP 방식 분류스트리밍방식다운로드방식 접속및실행 특징 지속적인온라인접속상태에서실행 텍스트위주의간단한그림위주단순한애니메이션정도까지가능복잡한동작및실시간구현은곤란 VM 방식 인터넷서버에서다운로드후단말기에서실행 향상된그래픽환경편리한사용자인터페이스및보안성강화다이나믹한네트워크게임가능
8.4.2 2 차원모바일게임시장의현황 국내모바일게임의역사 1999.8 LGT, 브라우저타입의무선인터넷서비스시작 2000.2 SKT, WAP 방식게임서비스시작 모바일게임시장의동향 간단한시뮬레이션이나간단한액션게임이주류를이루어옴 게임빌, 컴투스, 신지소프트등상위 8 개업체가두각 최근에는전략 RPG 게임을위주로대형화추세 이오리스 ' 히어로즈, 아이넥스 ' 불멸의이순신 ', 컴투스 ' 늑대인간 '
8.4.2 2 차원모바일게임시장의현황 유무선연동게임의증가 유선인터넷고객을무선인터넷게임으로확장 자본과기술력으로선점하려는기대효과 엔씨소프트 : 온라인게임 ` 리니지 2' 를모바일화하여 ' 리니지 2 제네시스 ', 일본모바일게임업체와제휴하여 ' 리니지아덴전기 ' 그외 CCR, 넥슨, 웹젠등 게임시장의경쟁심화 인터넷포털사업자진출 : 다음, 네이버, 네오위즈등 해외게임업체의국내시장진출 : 반다이, 코코캡콤, 세가등 해외진출증가 : 웹이엔지코리아, 게임빌, 컴투스등
8.4.2 2 차원모바일게임시장의현황 무선인터넷게임관련기술동향 WIPI 플랫폼의등장 하나의통일된플랫폼에서어플리케이션을개발하는것이목표 망개방관련이슈 : 2006 년실시 다양한무선인터넷게임서비스가용이 무선인터넷게임사업자의수익구조개선, 질높은콘텐츠의생산 규모가작은사업자는이동통신사와제휴예상 3D 그래픽스관련기술의증가 이미지기반에서벡터및 3D 그래픽스기반으로발전 모바일 3D 엔진이탑재되어있는 3D 모바일게임폰 출시 리코시스 M3D, 고미드 G3D, HI 사의 Mascot Capsule 등 최근 3D 하드웨어가속기에대한기술이개발