IT 기술 따라잡기

HTML5로 게임만들기 공부하다 보니까 여러 툴을 먼저 접하게 되네요.

3D관련 무료 툴로 블랜더(blender)를 알게 됐습니다.
사실 이거 공부할 시간까지는 없는데...
너무 공부하고 싶기도 하고....

요즘 모바일 앱 게임 중 3D게임을 아주 재밌게 하고 있거든요.

앞으로 이런 멋있는 3D 게임을 만드는 날도 오겠죠?
이렇게 막연히 바랬던 일들을 계속 간직하고 있으면 결국엔 이뤄지더라구요. :)

블렌더 공식 홈페이지는 아래 링크를 따라 가면 됩니다.
http://www.blender.org/

Download 메뉴로 들어가면 보실 수 있습니다.
두가지 종류가 있는데요. 하나는 인스톨 버전이고 나머지 하나는 이클립스 처럼 패키지 버전입니다 (그냥 압축 풀어서 사용하면 됩니다.).

아래 링크로 가시면 한국어로 된 Tutorial 을 보실 수 있습니다.
http://wiki.blender.org/index.php/KO/Main_Page

사용자들이 자발적으로 번역하고 작성하는 위키피디아 백과사전처럼 운영되는것 같습니다.
여러분들이 한국어 튜토리얼을 열심히 번역해 주고 계신것 같습니다.

블랜더를 실행한 화면입니다.

사용법은 nyaank 님이 유튜브에 동영상강좌를 올려주셔서 아주 쉽게 배울수 있습니다. (한국어예요).
http://www.youtube.com/watch?v=TEkmwrfCEzA&feature=related

아래 블렌더로 만든 3D 영화예요.
얼마전에 글 올린 불가리아의 두 친구들이 보면 아주 좋아하지 않을까 싶네요.




이 영화를 보니까 저도 3D 영화, 3D 게임을 모바일 앱으로 만들고 싶어집니다.

오늘 자바스크립트 관련 몇개 소개할 께요.

1. Trial Tool (JavaScript Test Tool)

써핑하다가 우연히 찾은건데요.

Tutorial 동영상을 보니까 완전 인도발음 영어를 사용하더라구요.
Parashuram Narasimhan 이라는 친구인데요.

블로그에 가 봤더니 이 Trial tool 말고도 어렵게 개발한 여러 툴들을 공유하고 있습니다.

온라인상으로는 아래 링크를 따라가 보시면 테스트 할 수 있습니다.

nparashuram.com/trialtool/index.html

왼쪽에 샘플을 하나 클릭하면 오른쪽에 JavaScript 소스가 뜹니다.
그리고 오른쪽 위의 Run을 누르면 그 결과값이 아래에 뜹니다. 에러가 있으면 에러 메세지가 뜨구요.

전체 소스 파일은 여기에서 받으실 수 있습니다.

유튜브에 있는 소개 동영상을 좀 볼까요?




이 친구의 홈페이지에 가시면 이 것 외에 여러 다른 툴들도 보실 수 있습니다.
http://nparashuram.com

2. svg-edit

이 툴은 HTML5의 도형 그리는 코드를 손쉽게 만들 수 있도록 도와주는 툴입니다.

이렇게 자기가 그리고 싶은 도형을 그린 다음에 왼쪽 위에 있는 <SVG> 버튼을 클릭합니다.

그러면 이렇게 HTML5 코드로 변환해 줍니다.
아래 주소로 가시면 직접 해 볼 수 있습니다.
http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

아래 주소로 가시면 직접 다운 받아서 사용할 수도 있습니다.
http://code.google.com/p/svg-edit/downloads/list

구글에서 서비스하는 것 같은데 제 경우엔 구글 크롬에서는 잘 실행이 안되고 화이어폭스에서 잘 실행이 되더라구요.

3.  Raphaël—JavaScript Library

이 건 자바스크립트 라이브러리인데요. 아래와 같이 간단하게 API를 익혀서 화려한 이미지나 도형을 구현할 수 있도록 도와주는 라이브러리 입니다.

아래 링크로 가시면 라이브러리도 다운 받으실 수 있구요. 사용법도 배우실 수 있습니다.
http://raphaeljs.com/

아래 스크립트를 아용하면 됩니다.

  <script>

      var draw = function () {

          var canvas = document.getElementById("canvas");

 

          //canvas의 컨텍스트가 존재하면 canvas를 지원하는 브라우저

          if (canvas.getContext) {

              //구현

          }

          else { //canvas의 컨텍스트가 존재하지 않으면 canvas를 지원하지 않는 브라우저

              alert("이 브라우저는 캔버스를 지원하지 않습니다.");

          }

      }

  </script>

HTML5를 지원하지 않는 브라우저가 아직 많이 있으니까 혹시 HTML5개발하려면 구현부분에 HTML5를 사용하고 alert부분에는 일반 HTML을 사용해야 할 것 같습니다.

웹 앱을 공부하려고 했는데 파고 들면 들수록 이쪽도 알아야 될게 아주 많고 생각보다 분야가 다양하네요.
일단 잊어버리기 전에 관련 용어와 개념들을 정리한 다음에 차근차근 공부해 나가야 겠어요.

모바일 웹 , 앱, 하이브리드 앱에 대해 메모 해 둬야 겠습니다.

- 모바일 웹
   : 일반 브라우저를 통한 서비스
  장점
  : 기존 HTML을 그대로 사용할 수 있다.
  : 개발, 유지보수가 용이하다.
  : 개발비용이 일반 앱개발보다 저렴하다.
  단점
  : 폰의 다양한 센서, 기능을 활용하기 어렵다.
  관련 툴
  : JQTouch
    - 가볍고 빠른 기본 프레임웍, iOS에 최적화된 프레임웍
    - 확장 플러그인, 네이티브 웹킷 애니메이션, 간단한 테마 지원
  : JQueryMobile
    - JQuery 팀이 개발, 다양한 브라우저 호환성 지원, 멀티 스크린 지원
    - 많은 수의 UX 컨트롤 지원
    - 자동화된 프레임웍 구조
    - 모바일 웹서비스에 최적화
    - ARIA 표준지원
  : SenchaTouch
    - 강력한 라이브러리 제공, Sencha 스타일 컨트롤 제공
    - 자바스크립트 API 기반 개발, 모델 뷰 컨트롤러 구현(MVC)
    - iOS,Android,BlackBerry 6, 스마트폰과 타블렛 레이아웃 자동변환

- 앱
  : 일반적인 앱, 즉 Objective-C, JAVA, C#의 네이티브 프로그래밍 언어와 각 OS별 SDK 를 이용해서 개발
  장점
  - 폰의 다양한 센서, 기능을 활용할 수 있다.
  - 모바일웹에 비해 실행, 페이지 로딩 속도가 빠르다.
  단점
  - 개발 비용이 높다.

- 하이브리드 앱
  : 내부 콘텐츠를 HTML로 개발 (일반적으로 외부의 서버와 연동)
  : 외부 프레임은 네이티브 언어로 개발
   장점
   - OS별로 개발, 유지보수 부담이 작다.
   - 기존 HTML 형태의 콘텐츠를 사용할 수 있다.
   단점
   - 폰의 다양한 센서, 기능의 활용이 어렵다.
   특징
    - DB, 콘텐츠 중심의 서비스에 적합
    - 게임, 앱내 결제에는 부적합
    관련 툴
     - PhoneGap
       : 오픈소스 프레임웍, 플랫폼별 개발 탬플릿 제공
       : 6개의 모바일 플랫폼 지원, 네이티브 API 접근 지원, 플러그인 확정 지언
    - Appcelerator Titanium
       : 오픈소스 프레임웍, 대부분의 네이티브 API지원
       : 모바일, 데스크탑 앱 빌드, 웹 표준 기술 사용
       : 네이티브앱 빌드 (모바일), 통합 IDE 제공, Titanium Studio
    - Appspresso
       : 통합 개발환경 지원, Eclipse IDE, 향상된 네이티브 API 제공
       : iOS, Android, W3C Widget, JS frameworks 포함
       : WAC/Waikiki API, On The Fly Development
       : Plug-in Development Kit (PDK)

이런 구분과 특성과 개념과 용어와 관련 툴들이 있네요.
기본적으로 HTML5를 공부하고 다음에 웹앱 그리고 하이브리드 앱을 공부해 볼 생각입니다.

다음주 화요일(12월 13일 2011) 맨하튼에서 Sencha Touch 관련 컨퍼런스가 있습니다.
참가 신청해서 초청장 받았습니다.
무료이고 가면 커피도 주고 음식도 주고 관련 기술도 알려 준다고 합니다.

다녀와서 후기 올릴께요.

그럼...

Corona SDK로 안드로이드,iPhone 용으로 동시에 빌드되는 앱을 만들다 보니까 새로운 기술이 뭐 또 없나 살펴보게 되더라구요.

그래서 찾다가 보니까 HTML 5 로 게임을 만들면 어떤 모바일 OS 던 상관없이 게임만 만들면 모든 스마트폰에서 사용할 수 있을 것 같애요.

그래서 1주일 동안 관련 기술들을 Research 해 봤습니다.

아직 잘은 모르지만 이런 웹 앱을 만들려면 기본적으로 HTML5 에 대한 것은 알아둬야 겠더라구요.

그래서 따로 WEB_APP 카테고리를 만들었습니다.

기본적으로 HTML 5를 다룰거구요. 모바일 앱 기술 중 하나인 Sencha Touch 도 공부할 생각입니다.

또 다시 새로운 기술을 배울 생각을 하니까 흥분되는데요... ^^

그럼 앞으로는 Corona SDK, HTML 5, Sencha Touch 로 이 블로그를 채워 갈께요...