지돌스타 블로그

[iOS]앱 배포시 "An error occurred uploading to the iTunes Store" 에러 대처 방법

지돌스타 — Sat, 19 May 2012 10:03:42 +0900

아이폰 앱을 모두 만든뒤 Organizer를 통해 iTunes Connect로 앱을 배포하는데 지금껏 보지 못한 에러를 접했다.

An error occurred uploading to the iTunes Store

Xcode에서 Clean하고 다시 Archive를 한 다음 배포해도 마찬가지 였고, 혹시나 해서 Distribution Profile을 다시 만들고 Xcode의 Build Setting에서 Code Signing Identity 부분을 다시 체크했으나 이상이 없었다.

평소에 접하지 못한 에러라 약간 당황스러웠지만 구글링을 해서 쉽게 문제를 해결했다.

cd /System/Library/Frameworks/JavaVM.framework/Versions
sudo ln -s CurrentJDK /System/Library/Frameworks/JavaVM.framework/Versions/1.5
sudo ln -s CurrentJDK /System/Library/Frameworks/JavaVM.framework/Versions/1.5.0

터미널 상에서 저렇게 CurrentJDK의 링크를 1.5로 바꿔주고 다시 Archive한 뒤 배포하면 된다.

JavaOSX가 2012.4.3일 자로 업데이트 된 것으로 이를 이용해 Xcode 4에서 Archive된 앱이 iTunes Connect에서 유효성 문제를 일으키는 듯하다. 그래서 위 방법은 임시방법이고 지금은 Xcode 4를 최신 버전으로 업데이트 하면 문제가 해결될 듯하다. 최신 버전으로 업데이트하고 다음에 앱을 배포할 때는 문제가 없을 것이다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/804)

'Mobile/Tablet > iOS - 아이폰/아이패드' 카테고리의 다른 글

[iOS]앱 배포시 "An error occurred uploading to the iTunes Store" 에러 대처 방법 (0)	10:03:42
Xcode 4에서 라이브러리 파일(*.a)가 ignore 처리되어 SVN에 등록되지 않을때 해결방법 (0)	2012/03/29
[iOS] Local Notification(지역알림, 내부통지). APNS와 비교 (16)	2011/03/22
[iOS 개발팁] 아이폰 어플에서 AppStore 검색페이지로 이동하기 (0)	2011/02/27
Xcode 프로젝트 템플릿을 이용해 iOS 프로젝트 시작점 제어 (2)	2011/02/21
[iOS 개발팁]target/selector를 한번에 관리하자. (0)	2011/01/26

안드로이드 개발시 ADB가 실행중 "Please 'adb uninstall ~' in a shell" 에러 메시지가 뜰 경우 처리

지돌스타 — Tue, 01 May 2012 14:24:47 +0900

이클립스에서 다음과 같은 안드로이드 앱 실행에러가 발생할 수 있다.

[2012-05-01 14:13:59 - Tojeong2012] Re-installation failed due to different application signatures.

[2012-05-01 14:13:59 - Tojeong2012] You must perform a full uninstall of the application. WARNING: This will remove the application data!

[2012-05-01 14:13:59 - Tojeong2012] Please execute 'adb uninstall com.starpl.mobile.android.tojeong2012' in a shell.

[2012-05-01 14:13:59 - Tojeong2012] Launch canceled!

이것은 이미 adb에 해당 앱이 동작중일 때 발생되는 에러로 이때는 해당앱을 강제로 삭제해야 한다.

다음과 같이 처리하자.

1. CMD 프롬프트를 연다.

2. 안드로이드 SDK폴더로 이동한다. /android-sdk/platform-tools

3. 다음 명령을 실행한다. adb uninstall com.starpl.mobile.android.tojeong2012

4. success가 뜨면 성공이다.

5. 다시 앱을 실행하면 위 에러가 안뜨고 잘 실행 될 것이다.

참고로 시스템 경로로 /android-sdk/platform-tools 경로를 잡아주면 매번 이런 문제가 발생할 때마다 2번 항목을 수행할 필요가 없다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/803)

'Mobile/Tablet > Android - 안드로이드' 카테고리의 다른 글

안드로이드 개발시 ADB가 실행중 "Please 'adb uninstall ~' in a shell" 에러 메시지가 뜰 경우 처리 (0)	2012/05/01

[아이폰]앱플러스-App+

지돌스타 — Thu, 15 Mar 2012 12:13:45 +0900

한동안 저를 잠수타게 만들었던 앱이 드디어 오늘 런칭했습니다.

앱 이름은 "앱플러스"입니다. 영어로는 "App+" 이고요. 아이폰 사용자들을 위한 앱으로써 조금더 유용한 앱을 쉽게 찾을 수 있게 "폴더" 개념을 도입했어요. 어느 사용자든 자신의 폴더를 만들어 운영(운영폴더)할 수 있고 또한 다른 사람의 폴더를 구독(구독폴더)할 수 있습니다.

앱플러스 다운로드 받기
다음 링크를 통해 다운로드 받으세요. ^^

http://itunes.apple.com/app/id506239646

앱플러스 설명

★★★★★ 앱플러스 - APP+ ★★★★★

아직도 앱스토어에서 다운받고 삭제하고를 반복하고 있나요?

이제 나에게 필요한 앱을 알려주는 앱플러스를 만나보세요!

■ 할인 앱 정보 ■

오늘만 무료, 할인된 앱 정보는 기본~

놓치기 아까운 다양한 할인 정보를 알려드려요!

■ 폴더 구독하기 ■

다양한 테마별 앱을 모아놓은 폴더를 구독해보세요!

인기 게임앱, 카메라 앱모음 등 새로운 앱이 생기면 바로바로 알려줘요~

■ 폴더 운영하기 ■

내가 직접 폴더를 만들어 많은 사람들에게 추천해 줄 수 있어요!

친구들끼리 폴더를 구독하면 손쉽게 앱정보를 공유 할 수 있답니다.

■ 폴더토크 ■

각각의 폴더마다 커뮤니티 기능을 제공합니다!

같은 폴더를 구독하는 사용자들끼리 정보공유하세요~

앱플러스 스크린 샷

'스타플(starpl.com)' 카테고리의 다른 글

아이폰/안드로이드 스타펫농장 소셜게임 (0)	2012/04/05
회사 구성원으로서의 자세 - 팀장, 직원 (0)	2012/03/28
[아이폰]앱플러스-App+ (0)	2012/03/15
친구들과 함께 키우는 나만의 위젯형 다마고치 '스타펫' (4)	2011/06/16
[아이폰/안드로이드]자랑질 어플 출시 (0)	2011/05/20
아이돌배틀 무료아이폰어플 출시 - 팬심으로 대동단결. 매일매일 우리 아이돌에게 ♥를 조공해요. (0)	2011/04/15

Away3D 3.6 Essentials 번역서 출간

지돌스타 — Wed, 21 Dec 2011 23:32:55 +0900

드디어 Away3D 3.6 Essentials 번역서가 출간됩니다. 파워플 맴버(http://powerfl.com)들과 함께 했습니다. 물론 그외에 많은 분들이 도와주셨죠. 부족한 실력임에도 여러 조언과 관심을 가지고 실질적인 리더로 이끌어주신 맹기완 대표님과 함께 번역에 참여한 김어진이, 엄진우 형, 그리고 안세원님... 또 초벌로 고생하신 분들... 또 주변에서 지원해준 사람들과 번역에 참여하느라 시간을 내어주고 배려해준 제 아내 현숙이게도 정말 감사의 말씀을 드립니다.

어웨이3D 3.6 Essentials는 비록 Flash Player 10을 기준으로 만들었으나 많은 부분 Away3D 4.0과의 인터페이스가 동일하므로 이 책을 봄으로써 Stage3D 기반의 3D 플래시 컨텐츠를 만드는데 큰 도움을 줄 것이라 생각합니다. 부디 플래시를 통해 3D 컨텐츠를 만들려는 분들에게 큰 도움이 되길 바랍니다.

구입 : http://www.yes24.com/24/Goods/6107313?Acode=101

어웨이 3D 3.6과 4.0의 차이에 대한 개인 소견
개인적인 소견을 말씀드리자면 3.6과 4.0의 API 구성은 꽤 비슷합니다. 그러므로 3.6의 API를 충분히 익히면 4.0을 학습하기 용이해집니다. 게다가 플래시계에서 어웨이는 굉장히 방대한 3d 엔진입니다. 이 책은 어웨이3d에 대한 대부분의 내용을 담아 초,중,고급 개발자 할 것없이 유용합니다. 3d 개념부터 시작해 응용까지 다양한 스킬을 이 책을 통해 전수받을 수 있습니다. 하지만 3.6과 4.0은 stage3d냐 아니냐는 내부적 구조가 극명하게 차이가 있으므로 그것은 따로 학습하시는 것이 좋은데... 3.6과 4.0의 api가 비슷해도 cpu렌더링방식이냐 gpu렌더링 방식이냐하는 점은 그 메커니즘 자체가 완전히 다릅니다. 즉, cpu방식으로 3d 프로그램을 만든 것 처럼 gpu방식으로 만들면 안됩니다. 3d 리소스를 실제로 gpu를 태워서 렌더링하기 위해 stage3d의 api를 통해 일종의 3d 파이프라인으로 부터 upload합니다. 이 과정은 꽤 비싼 비용이 들기 때문에 되도록 자제하는게 좋습니다. 즉, 렌더링할 대상을 한꺼번에 올려놓고 렌더링해야지 addChild와 removeChild를 너무 자주하면 그것 자체가 upload를 자주하는 것이기 때문에 자제해야한다는 말이 그 의미입니다. 참고하시고 이 책을 통해 flash 3d 개발하는데 큰 도움이 되셨으면 합니다.

어웨이 3D 4.0과 얼터너티바3D 8 에 대한 개인 소견
둘다 stage3d 기반으로 만들어진 플래시 3d 엔진입니다. 하지만 이들은 조금 다른 방향의 가치가 있습니다. 어웨이 3D 4.0은 api가 풍부하면서도 다양한 3d 컨텐츠를 만드는데 주력하는데다가 stage3d api를 완전히 추상화 시켜 실제 개발자는 기존 3.6을 개발했듯이 stage3d를 몰라도 개발할 수 있게 합니다. 하지만 아직 알파버전이기 때문에 3.6에 비해서 부족한 점이 많은 편입니다. 그러므로 정식배포까지는 기다리는 것이 좋을 것 같다고 생각합니다.

얼터너티바3D 8은 어웨이3D 4.0과 다르게 단순하고 간단한 api를 지향하며 보통 게임을 만드는 사람에게 적합한 구조를 가집니다. stage3d api가 일부 노출되기 때문에 이 부분에 대한 이해가 필요하지만 이 때문에 어웨이3d 보다는 좀더 gpu업로드에 대한 유연성을 발휘하게 됩니다. 게다가 3d max 자체 플러그인을 배포함으로써 3d 메쉬 및 재질정보가 바이너리로 최적화 되어서 얼터8에 로드시키는데 빠른 속도를 보입니다. 완전히 3d 게임을 만드는데 초점을 맞춘것이 이 엔진의 컨셉이지요.

최근 얼터너티바3D도 물리엔진을 배포하면서 어웨이3D와 더불어 물리엔진을 적용할 수 있게 되었습니다. 둘다 장단이 있어서 독자들에게 어떤 것을 선택하는 것이 좋다고 말씀드릴 수는 없습니다. 대신 자신이 어떤 것을 만들고 싶느냐 분명하게 따져서 엔진을 선택하세요. 어떤 것을 선택하든 이 책은 3d에 대한 막연한 어려움을 풀어주는데 도움을 많이 줍니다. ^^

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Away3D 3.6 Essentials 번역서 출간 (0)	2011/12/21
Away3D 4.0 으로 만들어본 지구 (0)	2011/11/17
Flash Player 11 3D 용어 정리 (3)	2011/10/18
Starling Framework - 2D GPU 가속 렌더링 플래시 게임 엔진 (1)	2011/09/23
Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material (0)	2011/08/01
1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발 (8)	2011/07/16

자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #2

지돌스타 — Fri, 16 Dec 2011 03:46:17 +0900

// 프로토타입 활용한 상속을 가능케하는 함수 
function object(o) {
	function F() {};
	F.prototype = o;
	return new F();
}

위 함수를 아래처럼 사용할 수 있다.

// 상속할 객체 
var parent = {
	name: "Papa",
	getName:function() {
		return this.name;
	}
};
// 새로운 객체 
var child = object(parent);
//테스트 
console.log(child.name); //"Papa"
console.log(child.getName()); //"Papa"

위 코드처럼 부모를 객체 리터럴로 생성하는 것 뿐만 아니라 생성자 함수를 통해서도 부모를 생성할 수 있다.

//부모 생성자 
function Person() {
	// 부모 생성자 자신의 프로퍼티 
	this.name = "Adam";
}
// 프로토타입에 추가된 프로퍼티 
Person.prototype.getName = function () {
	return this.name;
};
// Person 인스턴스 생성 
var papa = new Person();
// 이 인스턴스를 상속 
var kid = object(papa);
// 부모 자기 자신의 프로퍼티와 프로토타입의 프로퍼티가 모두 상속되었는지 확인 
console.log(kid.getName()); //"Adam"

하지만 주의할 것은 생성자 함수의 프로토타입 객체만 상속받게 할 수 있다.

var kid2 = object(Person.prototype);
console.log(typeof kid2.getName); //"function" 이 메서드는 프로토타입 안에 정의된 프로퍼티이다. 
console.log(typeof kid2.name); //"undefined" 프로토타입만 상속했기 때문에 부모에 정의된 name 프로퍼티는 상속되지 않음

ECMAScript 5에는 Object.create()가 위 object() 함수를 구현하고 있다.

var parent = new Person();
var child2 = Object.create(parent, {
	age: { value: 2 } //ECMA 5 기술자(Descriptor)
});
console.log(child2.hasOwnProperty("age")); //true

자바스크립트 라이브러리에서 YUI3에서도 Y.Object() 메서드가 그것을 구현하고 있음을 알아두자.

책 내용에는 없지만 위 방식을 그대로 사용하는 것은 부정적이다. 이것은 여전히 전역을 더럽히기 때문에 네임스페이스 패턴이든 샌드박스 패턴이든 사용해 전역을 최소화할 필요가 있겠다. 하지만 기존 클래스 방식의 상속보다 훨씬 간단하면서도 매끄럽게 재사용 패턴을 적용할 수 있다는 점은 크게 매력적이다.

프로퍼티 복사를 통한 상속패턴

아래는 얕은 복사 방식이다.

//프로퍼티 얕은 복사를 통한 상속 패턴 적용 함수 
function extend(parent, child) {
	var i,
		child = child || {};
	for( i in parent ) {
		if( parent.hasOwnProperty(i) ) {
			child[i] = parent[i];
		}
	}
	return child;
}

//프로퍼티 복사 확인 
var dad = {name: "Adam"};
var kid = extend(dad);
console.log(kid.name); //"Adam"

//프로퍼티 얕은 복사 확인	
var dad2 = {
	counts: [1, 2, 3],
	reads: {paper: true}
};
var kid2 = extend(dad2);
kid2.counts.push(4);
console.log(kid2.counts.toString()); //"1,2,3,4"
console.log(dad2.reads === kid2.reads); //true

아래 코드는 프로퍼티 깊은 복사를 통한 상속 패턴 적용 함수이다.

function extendDeep(parent, child) {
	var i,
		toStr = Object.prototype.toString;
		astr = "[object Array]";
	child = child || {};
	for (i in parent) {
		if (parent.hasOwnProperty(i)){
			if (typeof parent[i] === "object") {
				child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
				extendDeep(parent[i], child[i]);
			} else {
				child[i] = parent[i];
			}
		}
	}
	return child;
}
	
var dad = {
	counts: [1, 2, 3],
	reads: {paper: true}
};
var kid = extendDeep(dad);
kid.counts.push(4);
console.log(kid.counts.toString()); //"1,2,3,4"
console.log(dad.counts.toString()); //"1,2,3"
console.log(dad.reads === kid.reads); // false
kid.reads.paper = false;
console.log(dad.reads.paper);  //true

위 함수들은 아주 간단하고 널리 사용된다고 한다. 그리고 jQuery의 extend() 메서드는 깊은 복사를 하고 Y.clone() 깊은 복사를 수행하면서 함수도 복사해 자식 객체와 바인딩 해준다고 한다. 이 패턴은 프로토타입을 전혀 사용하지 않은 것도 주목할 만하다.

하지만 내 생각에.... 깊은 복사를 하는 과정에서 extendDeep()을 재귀적으로 호출하고 있다. 이 점은 자바스크립트 특성상 이렇게 쓰는 경우 스택오버가 걸릴 가능성이 농후하므로 뭔가 비동기적으로 동작하도록 만들 필요가 있다.

게다가 배열이 for-in 루프로 요소를 탐색하는 것은 2장 기초에서 다루었듯이 for 루프를 사용하는 것이 맞다.

믹스-인
프로퍼티 복사 아이디어를 발전시켜 믹스-인 패턴을 생각할 수 있다. 이것은 하나의 객체를 복사하는게 아니라 여러 객체를 복사해 하나의 객체에 섞어 넣을 수 있다.

function mix() {
	var arg, prop, child = {};
	for (arg = 0; arg < arguments.length; arg += 1) {
		for (prop in arguments[arg]) {
			if (arguments[arg].hasOwnProperty(prop)) { //프로토타입 프로퍼티를 걸러냄 
				child[prop] = arguments[arg][prop];
			}
		}
	}
	return child;
}
var cake = mix(
	{eggs: 2, large: true},
	{butter: 1, salted: true},
	{flour: "3 cups"},
	{sugar: "sure!"}
);
console.dir(cake);

결과적으로 아래처럼 나온다.

butter: 1
eggs: 2
large: true
salted: true
flour: "3 cups"
sugar: "sure!"

믹스-인 개념에는 단순히 루프를 돌고, 프로퍼티를 복사하는 것이기 때문에 부모들과의 연결 고리는 끊어진 상태이다.

개인적인 이 패턴에 대한 생각을 남기면... 위 mix() 메서드는 여러개의 객체중에 프로퍼티 이름이 중복되면 마지막에 들어간 것이 기존에 있는 것을 덮어쓰게 될 것이다.

게다가 다음과 같은 경우에는 대응하지 못한다.

var a = {array: [1,2,3]};
var cake = mix(
	{eggs: 2, large: true},
	{butter: 1, salted: true},
	{flour: "3 cups"},
	{sugar: "sure!"},
	a
);
a.array.push(4);
console.log(a.array.toString()); //"1,2,3,4"
console.log(cake.array.toString()); //"1,2,3,4"

원래 기대하는 바는 cake.array.toString()의 경우 "1,2,3"이어야 할 것이다. 즉, 배열값에 대해서는 얕은 복사를 했으므로 깊은 복사를 할 수 있도록 개선해야한다.

메서드 빌려쓰기

메서드 빌려쓰기 재사용 패턴은 정말 자바스크립트의 특징을 대변해주는 패턴일 것이다. 이 패턴은 부모-자식 관계까지 만들지 않고 어떤 객체의 메서드 한두개만 빌려쓰는데 유용하다.

책 내용중에는 apply와 call을 사용해 bind를 구축하는 방법과 this문제를 잘 다루었다. 마지막에 ECMAScript 5부터 지원하는 Function.prototype.bind() 메서드를 사용하면 된다고 했다. 하지만 이 메서드가 지원되지 않은 경우도 감안해서 아래와 같은 코드를 쓰면 언제든지 bind()를 활용할 수 있게 된다.

if (typeof Function.prototype.bind === "undefined") {
    Function.prototype.bind = function (thisArg) {
        var fn = this,
             slice = Array.prototype.slice,
             args = slice.call(argments, 1); 
        return function () {
             return fn.apply(thisArg, args.concat(slice.call(arguments)));
        };
   }
}

메서드 빌려쓰기 패턴은 잘쓰면 꽤 유용할 듯 싶다.

아무튼 이 책의 이번 장을 보면서 느낀 것은 클래스 상속이 재사용의 유일한 방책은 아니며 오히려 상속보다 더 우아한 방법으로 재사용을 할 수 있고 그것을 잘 활용해야한다는 점이다.

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #2 (0)	2011/12/16
자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #1 (0)	2011/12/16
자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴 (2)	2011/12/09
자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수 (2)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자 (0)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초 (5)	2011/12/07

자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #1

지돌스타 — Fri, 16 Dec 2011 00:14:34 +0900

요즘 개인적으로 자바스크립트를 공부하고 있다. 하지만 내 경우 어정쩡하게 알고 있는 자바스크립트라 기초책은 보나마나인데, 이 책은 정말 실무에서도 바로 쓸 수 있는 패턴을 뽑아서 먹여주는 책 같다. 이 책과 더불어 자바스크립트 성능 최적화도 보면 정말 좋겠다. 아무튼 이 책을 요약하면서 정리하고자 한다. 이 책은 정말 강력 추천하며 자바스크립트를 제대로 학습하기 위한 필수 소장서이다.

책구입 : http://tinyurl.com/7ejd4rs
출판사 책소개 : http://blog.insightbook.co.kr/245

자바스크립트 코딩기법과 핵심패턴 제 6장 코드 재사용 패턴 #1

이 책에서는 자바스크립트에서 코드 재사용 패턴은 상속, 다른 객체와 합성, 믹스-인 객체 사용, 메서드 빌려쓰기등으로 소개하고 있다. 코드 재사용 작업을 접근할 때, GoF의 충고인 '클래스 상속보다 객체 합성을 우선시하라'를 생각하는게 중요하다.

클래스 방식 vs 새로운 방식의 상속 패턴
대다수의 프로그래밍 언어는 객체의 설계도로 클래스 개념이 있지만 자바스크립트에서는 클래스가 없다. 자바스크립트의 객체는 단순히 키-값의 쌍일뿐이며 언제든지 생성하고 변경할 수 있다. 클래스가 없기 때문에 다른 패턴으로 상속을 구현할 수 있다. 함수와 프로토타입, 클로저등의 개념을 적절히 섞는다면 다른 언어의 클래스및 상속패턴등을 흉내낼 수 있다. 하지만 자바스크립트는 그 특성상 코드재사용을 위해 꼭 클래스 상속 개념을 사용할 필요가 없다. 그 외에 다양한 방법으로 사용할 수 있기 때문에 이런 클래스 방식으로 상속을 구현하지 않고 새로운 방식으로 발전시킬 수 있다. 이 장에서는 먼저 전통적인 클래스 방식으로 코드 재사용을 알아보고 자바스크립트의 특징을 살린 새로운 방식으로의 재사용 패턴을 소개하고 있다. 클래스 상속이 필요없다고 해서 소홀히 보면 안된다. 이 부분을 잘 봐두면 자바스크립트의 함수, 프로토타입, 클로저 개념들의 활용을 더 명확히 학습할 수 있기 때문이다.

클래스 방식의 상속 패턴 #1 - 기본 패턴
자바스크립트는 상속을 직접적으로 지원하지 않기 때문에 모두 구현해야한다. 클래스 방식이라고 하지만 클래스가 없고 생성자 함수만 있을 뿐이다.

//상속을 담당해 주는 함수 
function inherit(C, P) {
    C.prototype = new P();
}

//부모 생성자 
function Parent(name) {
    this.name = name || 'jidolstar';
}

//생성자의 프로토타입에 기능을 추가 
Parent.prototype.say = function () {
    return this.name;
}

//아무 내용이 없는 자식 생성자  
function Child(name) {}

//여기서 상속이 일어남
inherit(Child, Parent);
//아래처럼 사용 
var kid = new Child();
kid.say(); //jidolstar

이 패턴은 가장 널리 쓰이는 기본적인 방법으로 Parent() 생성자를 사용해 객체를 생성한 다음 이 객체를 Child()의 프로토타입에 할당하는 것이다. inherit(C, P) 함수가 그것을 담당해주고 있다. 여기서 prototype 프로퍼티가 함수가 아니라 객체를 가리키는 것이 중요하다. 또 new 연산자가 있음을 잘 봐두자. 결국 프로토타입 체인에 의해 부모의 인스턴스 기능을 물려받는다.

하지만 이 패턴은 단점이 있다.

부모 객체의 this에 추가된 객체 자신의 프로퍼티와 프로토타입 프로토퍼티를 모두 물려받는다.
이 inherit() 함수는 인자를 처리하지 못한다. 즉, 자식 생성자에 인자가 들어와도 부모 생성자에 전달 못한다.
```
var s = new Child('joykim');
s.say(); //여전히 jidolstar
```
자식 인스턴스를 생성할 때마다 상속을 실행하는데 여기서는 부모 객체를 계속해서 재생성하게 되어 비효율적이다.

클래스 방식의 상속 패턴 #2 - 생성자 빌려쓰기

이 패턴은 자식에서 부모로 인자를 전달하지 못했던 #1의 문제를 해결한다. 이 패턴은 부모 생성자 함수의 this에 자식 객체를 바인딩한 다음, 자식 생성자가 받은 인자를 모두 넘겨준다.

function Child(a, b, c, d) {
    Parent.apply(this, argument);
}

이렇게 하면 부모 생성자 함수 내부의 this에 추가된 프로퍼티만 물려받게 된다. 중요한 것은 부모의 프로퍼티를 부모것을 참조하는게 아니라 부모것에 대한 복사본을 가진다는 점이다. 단, 프로토타입에 추가된 맴버는 상속받지 않는다.

생성자 빌려쓰기는 프로토타입이 전혀 상속되지 않기 때문에 분명히 한계가 있다. 반면에 부모 생성자 자신의 맴버에 대한 복사본을 가져올 수 있다는 장점이 있어 자식이 실수로 부모의 프로퍼티를 덮어쓰는 위험은 방지된다.

생성자 빌려쓰기 패턴은 다중상속도 가능하다.

클래스 방식의 상속 패턴 #3- 생성자 빌려쓰고 프로토타입 지정해주기

이 패턴은 앞선 두 개의 패턴을 혼용한다.

function Child(a, b, c, d) {
    Parent.apply(this, argument);
}
Child.prototype = new Parent();
//테스트 
var kid = new Child('joykim');
kid.name; //joykim
kid.say(); //joykim
delete kid.name;
kid.say(); //jidolstar

자식 객체는 부모가 가진 자신만의 프로퍼티 복사본을 가지게 되는 동시에, 부모의 프로토타입 멤버로 구현된 재사용 가능한 기능들에 대한 참조 또한 물려받게 된다.

하지만 부모생성자를 비효율적으로 두 번 호출한다는 것은 단점이다.

클래스 방식의 상속 패턴 #4 - 프로토타입 공유

지금까지의 패턴과는 전혀 다르게 부모생성자를 전혀 호출하지 않는다.

function inherit(C, P) {
    C.prototype = P.prototype;
}

이 패턴은 프로토타입 체인 검색이 짧고 간편해지며 부모가 가진 say() 메서드를 자식에서도 똑같은 접근 권한을 가진다.

그러나 이 패턴은 상속 체인이 공유되기 때문에 수정될 때 부모, 자식, 프로토타입에 전부 영향이 간다. 그리고 자식 객체는 부모의 name 프로퍼티를 물려받지 않는다.
'

클래스 방식의 상속 패턴 #5 - 임시 생성자
이 패턴은 프로토타입 체인의 이점을 유지하면서, 동일한 프로토타입을 공유할 때의 문제점을 해결하도록 부모와 자식의 프로토타입 사이에 직접적인 링크를 끊어버린다.

function inherit(C, P) {
     var F = function () {};
     F.prototype = P.prototype;
     C.prototype = new F();
}

여기서 함수 F가 임시 생성자를 프로토콜 타입으로 설정하므로 장점으로 자식 프로토타입이 수정되더라도 부모의 프로토타입에 영향을 주지 않는다. 생성자에서 this에 추가한 멤버는 상속되지 않는다.

var kid = new Child();

위 코드에서 kid.name에 접근하면 undefined라는 값을 얻는다. name은 부모 자신의 프로퍼티인데 상속과정에서 new Parent()를 호출한 적이 없기 때문에 이 프로퍼티는 생성조차 않는다. 하지만 kid.say()의 경우 프로토타입 체인에 의해 Parent의 prototype에 정의된 say() 메서드에 접근이 된다.

이 패턴에 부모 원본에 대한 참조를 추가할 수 있다. 상속체계에서 상위 클래스에 대한 참조를 자식 클래스가 접근하기 위해 super를 이용하듯이 말이다.

function inherit(C, P) {
     var F = function () {};
     F.prototype = P.prototype;
     C.prototype = new F(); //임시생성자 상속패턴 적용 
     C.uber = P.prototype; //부모 원본에 대한 참조 
}

또한 상속 함수를 더욱 완벽하게 만들기 위해 한가지 더 설정해야 한다. 현재 상태에서는 모든 자식 객체들의 생성자는 Parent()로 지정되어 있다. 그러므로 생성자 함수를 자식 자신을 가리킬 수 있도록 아래처럼 코드를 추가한다.

function inherit(C, P) {
     var F = function () {};
     F.prototype = P.prototype;
     C.prototype = new F(); //임시생성자 상속패턴 적용 
     C.uber = P.prototype; //부모 원본에 대한 참조 
     C.prototype.constructor = C; //자식이 자식의 생성자 함수를 가리키도록 한다. 
}

최종 버전은 최적화이다. 최적화되는 상속 함수는 상속이 필요할 때마다 임시(프록시) 생성자가 생성되지 않도록 한다. 즉시실행 함수와 클로저를 이용해 최적화 한다.

var inherit = (function () {
    var F = function () {};
    return function (C, P) {
         F.prototype = P.prototype;
         C.prototype = new F();
         C.uber = P.prototype;
         C.prototype.constructor = C;
    };
}());

클래스 방식 상속 패턴을 활용한 klass 제작

아래 klass() 함수는 클래스를 상속을 구현하기 위한 문법 설탕을 제공한다. 함수 대신 Klass()라는 생성자 함수를 사용하거나 Object.prototype을 확장하기도 하는데 여기서는 간단한 함수를 보여주고 있다.

var klass = (function () {
	var F = function () {};
	return function (Parent, props) {
		var Child, i;
	
		//1. 새로운 생성자
		Child = function() {
			if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
				console.log('Child.uber.__construct 적용');
				Child.uber.__construct.apply(this, arguments);
			}
			if(Child.prototype.hasOwnProperty('__construct')) {
				console.log('Child.prototype.__construct 적용');
				Child.prototype.__construct.apply(this, arguments);
			}
		};
	
		//2. 상속
		Parent = Parent || Object;
		
		F.prototype = Parent.prototype;
		Child.prototype = new F();
		Child.uber = Parent.prototype;
		Child.prototype.constructor = Child;
	
		//3. 구현 메서드를 추가한다.
		for (i in props) {
			if (props.hasOwnProperty(i)) {
				Child.prototype[i] = props[i];
			}
		}
	
		//'클래스'를 반환한다.
		return Child;
	};
}());

책에서 제공된 소스와는 약간 다르다. 위 klass() 함수는 상속 패턴 #5에서 소개한 마지막 inherit() 메서드 최적화를 적용했다. 즉, 즉시실행함수를 사용해 임시(프록시) 생성자 F를 클로저 안에 저장해 한 번만 만들도록 바꾸었다.

아래 코드는 이 klass() 함수를 사용해 Man 생성자 함수를 만드는 예제이다.

//사람 생성자 함수 생성 
var Man = klass(null, {
	__construct: function (what) {
		console.log('Man\'s constructor');
		this.name = what;
	},
	getName: function() {
		return this.name;
	}
});

//사람 객체 
var first = new Man('Adam');
console.log(first.getName());

사람 로그는 다음과 같이 찍힌다. Man 생성자 함수의 경우 상속받는 대상이 없기 때문에 Object가 부모가 되며 __construct와 getName 메서드가 Man의 프로토타입에 추가된다. new Man()을 통해 생성자 내부에 정의된 두개의 if문을 거치게 되는데 일단 첫번째 if문에서 Man.uber는 Object의 프로토타입이므로 null이 된다. 그러므로 무시된다. 두 번째 if문에서는 Man.prototype에 __construct 메서드가 추가되었으므로 이 if문 내부는 실행된다. 여기서 상속 패턴 #3의생성자 빌려쓰기 패턴이 적용되어 __construct() 메서드 내부에 this는 Man 객체(first)를 가리키게 된다. 그러므로 Man 객체에서 getName()을 호출하면 this.name은 바로 Adam이 되는 것이다.

Child.prototype.__construct 적용
Man's constructor
Adam

이제 사람 생성자 함수(Man)를 상속받는 슈퍼맨 생성자 함수를 만들자. Man과 차이점은 자식 생성자 함수인 Man을 인자로 넘긴것과 getName()에서 return this.name이 아닌 SuperMan.uber.getName()을 호출했다는 점이다. 하지만 여기서 this.name에서 this는 이미 SuperMan 객체의 자신을 가리키도록 klass() 함수 내부에 Child 생성자 함수 안 첫번째 if문에 this를 넘겼음을 상기하자. 결국 this.name은 SuperMan 객체의 프로퍼티인 셈이다.

//슈퍼맨 생성자 함수 생성 
var SuperMan = klass(Man, {
	__construct: function (what) {
		console.log('SuperMan\'s constructor');
	},
	getName: function () {
		var name = SuperMan.uber.getName.call(this);
		return 'I am ' + name;
	}
});

//슈퍼맨 객체 
var clark = new SuperMan('Clark Kent');
console.log(clark.getName());

다음은 위 코드를 실행했을 때 로그이다. 이번에는 Man을 상속했기 때문에 klass()함수의 Child 생성자 함수 내부에 첫 번째 if문 내부가 실행된다. 그래서 SuperMan에는 name 프로퍼티를 구현한 적이 없지만 Man에 구현되어 있기 때문에 SuperMan 객체에 name 프로퍼티가 자동으로 등록되게 된다.

Child.uber.__construct 적용
Man's constructor
Child.prototype.__construct 적용
SuperMan's constructor
I am Clark Kent

이제 마지막으로 슈퍼맨 객체는 누구의 인스턴스인가 확인해보자.

//슈퍼맨 객체는 누구의 인스턴스인가? 
console.log(clark instanceof Man); //true
console.log(clark instanceof SuperMan); //true

간단하지만 이 klass() 함수는 기본적인 클래스 상속을 구현해 냈고 제대로 동작하는 것을 확인할 수 있다. 지금까지 다룬 상속 패턴은 피하는 것이 좋다. 왜냐하면 기술적으로 언어에 존재하지 않는 혼란스러운 개념을 온통 끌고 오기 때문이다. 하지만 이 개념은 확실히 알 필요는 있다. 프로토타입과 클로저등을 사용해 어떻게 상속을 구현하는지 아는 것은 결국 이것들의 유용한 점을 알기에 좋기 때문이다. 이 패턴의 장점은 자바스크립트를 경험해보지 못해 프로토타입이 낮설게 생각하는 개발자들에게 유용할 수 있다.

프로토타입을 사용한 상속과 프로퍼티 복사를 통한 상속, 믹스-인, 메서드 빌려쓰기는 다음에 정리! ^^

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #2 (0)	2011/12/16
자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #1 (0)	2011/12/16
자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴 (2)	2011/12/09
자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수 (2)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자 (0)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초 (5)	2011/12/07

자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴

지돌스타 — Fri, 09 Dec 2011 00:44:30 +0900

책구입 : http://tinyurl.com/7ejd4rs
출판사 책소개 : http://blog.insightbook.co.kr/245

자바스크립트 코딩기법과 핵심패턴 제 5장 객체 생성 패턴

자바스크립트에서는 객체 리터럴이나 생성자 함수를 사용하여 쉽게 객체를 만들 수 있다. 자바스크립트는 네임스페이나, 모듈패키지, 비공개 프로퍼티, 스태틱 맴버 등에 대한 문법이 없기 때문에 이러한 기능을 구현하거나 대체하는 범용적인 패턴이 존재한다.

네임스페이스 패턴

장점

전역 공간을 깨끗하게 유지하고 코드를 구조화하여 정리를 도와주는 패턴.

사용법

전역 네임스페이스의 객체의 이름은 애플리케이션 이름이나 라이브러리의 이름, 도메인명, 회사 이름중 선택해서 사용한다.
눈에 띄기 쉽도록 전역 객체 이름은 모두 대문자로도 사용한다.

단점

모든 변수와 함수에 접두어를 붙여야 하므로 전체적으로 코드량이 늘어남
전역 인스턴스가 하나뿐이므로 코드의 어느 한부분이 수정되면 전역 인스턴스를 수정하게 된다.
이름이 중첩되고 길므로 프로퍼티 판별하기 위한 검색 작업이 느리다. (샌드박스 패턴으로 해결)

범용 네임스페이스 함수

var MYAPP = MYAPP || {};

MYAPP.ns = function (ns_string) {
    var parts = ns_string.split('.');
        parent = MYAPP,
        i;
    // 처음에 중복되는 적역 객체명은 제거 
    if( parts[0] === 'MYAPP' ){
        parts = parts.slice(1);
    }
    for (i = 0; i < parts.length; i += 1) {
        if ( typeof parent[parts[parts[i]] === "undefined") {
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }
    return parent;
};

//반환 값을 지역변수에 할당
var module2 = MYAPP.ns('MYAPP.modules.modules2');
modules2 === MYAPP.modules.modules2; //true

//첫 부분의 'MYAPP' 생략가능 
MYAPP.ns('modules.modules51');

의존 관계 선언

네임스페이스를 지정하여 모듈화함으로써 필요한 모듈만 골라서 쓸 수 있게 되었다. 모듈 사용시 함수나 모듈 내 최상단에, 의존 관계에 있는 모듈을 지역변수로 그 모듈을 가리키도록 선언하는 것이 좋다.
사용법

var myFunction = function () {
    //의존 관계가 있는 모듈들 
    var event = YAHOO.util.Event,
        dom = YAHOO.util.Dom;
    //이제 event, dom을 사용
};

장점

의존 관계가 명시적이다.
지역변수로 했기 때문에 전역변수와 중첩 프로퍼티 탐색에서 속도적 이익이 있다.
지역변수명은 압축도구(YUICompressor, Google Closure)등으로 축약된다.

비공개 프로퍼티와 메서드

자바스크립트는 프로퍼티를 공개권한을 설정할 수 있는 명령이 존재하지 않고 기본적으로 모두 public이 된다.

비공개(private) 맴버
클로저를 사용하여 비공개 맴버를 구현할 수 있다.

function Gadget() {
    //비공개 맴버(외부에서 지역변수를 접근할 수 없으므로)
    var name = 'iPad';
    //공개된 함수 
    this.getName = function () {
       return name;
    }
}
var toy = new Gadget();
console.log(toy.name); //undefined
console.log(toy.getName()); //iPad

특권(privileged) 메서드
비공개 멤버에 접근권한을 가진 공개 메서드를 가리키는 이름이다. 위 예제에서는 getName() 메서드가 그렇다.

비공개 멤버의 허점
특권 메서드에서 비공개 변수의 값을 반환할 경우 이 변수가 객체나 배열이라면 값이 아닌 참조가 반환되므로 외부 코드에서 비공개 변수값을 수정할 수 있다는 허점이 존재한다. 허점을 피하기 위해 최소 권한의 원칙(principle of Least Authority, POLA)를 적용하여 필요 이상의 권한을 주지않도록 한다. 가령 일부 데이터만 반환하던가, 객체를 복사해서 반환하던가 하는 방식을 취한다.

객체 리터럴과 비공개 맴버
비공개 맴버를 만드는데 생성자 방법 뿐 아니라 리터럴로도 만들 수 있다. 즉, 익명 즉시 실행 함수를 추가하여 클로저를 만들면 되겠다. 이것은 모듈 패턴의 기초가 된다.

var myobj = (function () {
    //비공개 멤버 
    var name = "my, oh my";

    //공개될 부분을 구현 
    return {
       getName : function () {
           return name;
       }
    };
}());
myobj.getName(); //my, oh my

프로토타입과 비공개 맴버

생성자를 사용해 비공개 맴버를 만들 경우, 생성자를 호출하여 새로운 객체를 만들 때마다 비공개 멤버가 매번 재생성되어 메모리 낭비가 생긴다. 그러므로 메모리를 절약하기 위해 공통 프로퍼티와 메서드를 생성자의 프로토타입에 추가해야 한다.

function Gadget() {
    // 비공개 맴버 
    var name = 'iPod';
    // 공개 함수 
    this.getName = function () {
       return name;
    };
}
Gadget.prototype = (function () {
    // 비공개 멤버 
    var browser = "Mobile Webkit";
    // 공개된 프로토타입 맴버
    return { 
        getBrowser: function () {
            return browser;
        }
    };
}());

var toy = new Gadgets();
console.log(toy.getName());  // 객체 인스턴스의 특권 메서드 
console.log(toy.getBrowser());  ///프로토타입의 특권 메서드

비공개 함수를 공개 메서드로 노출하는 방법
노출 패턴(revelation pattern)은 비공개 메서드를 구현하면서 동시에 공개 메서드로도 노출하는 것을 의미. 비공개 함수를 안전하게 보호해줌

var myarray;
(function () {
    //비공개 맴버 
    var astr = "[object Object]",
        toString = Object.prototype.toString;

    //비공개 함수 
    function isArray() {
        return toString.call(a) === astr;
    }

    //비공개 함수 
    function indexof(haystack, needle) {
       ....
    }

    myarray = {
        isArray : isArray,
        indexOf: indexOf,
        inArray: indexOf
    };
}());

myarray.indexOf = null;
myarray.inArray(["a", "b", "z"], "z"); //2

이처럼 결과가 나오는 것은 비공개 함수는 보호되기 때문이다.

모듈패턴

모듈 패턴은 늘어나는 코드를 구조화 하고 정리하는데 도움이 되고 널리 쓰인다.
이 패턴을 사용하면 개별적인 코드를 느슨하게 결합시킬 수 있다.
모듈 패턴은 특히 점점 늘어만 가는 코드를 정리할 때 널리 사용되며 매우 추천하는 방법이다.
모듈 패턴은 네임스페이스 패턴, 즉시 실행 함수, 비공개 맴버와 특권 맴버, 의존 관계 선언, 노출 패턴등이 섞인 패턴이다.

//네임스페이스 패턴 적용 
MYAPP.ns('utilities.array'); 

//즉시실행함수 
MYAPP.utilities.array = (function () {
    //의존 관계 선언 
    var uobj = MYAPP.utilities.object,
        ulang = MYAPP.utilities.lang; 
    //비공개 프로퍼티
    var array_string = "[object Array]",
        ops = Object.prototype.toString,

    ///비공개 매서드(특권 메서드) 
        inArray = function (haystack, needle) {
        },
        isArray = function (a) {
        };

    //공개 API 노출(노출패턴 적용)
    return {
        isArray: isArray,
        indexof: inArray
    };
}());

생성자를 생성하는 모듈
앞선 예제는 MYAPP.utilities.array 라는 객체를 만들었지만 생성자 함수를 사용해 객체를 만드는게 더 편할 수 있다.

MYAPP.ns('MYAPP.utilities.Array');
MYAPP.utilities.Array = (function () {
    //의존 관계 선언 
    var uobj = MYAPP.utilities.object,
        ulang = MYAPP.utilities.lang; 
    // 비공개 프로퍼티와 메서드 선언 후...
        Constr;
    //var 선언 마침 

    //공개 API - 생성자 함수 
    Constr = function (o) {
        this.elements = this.toArray(o);
    };
    //공개 API - 프로토타입 
    Constr.prototype = {
        constructor: MYAPP.utilities.Array,
        version: "2.0",
        toArray : function(obj) {
            ...
        };
    };

    //생성자 함수를 반환 
    //이 함수가 새로운 네임스페이스에 할당될 것이다. 
    return Constr;
}());
var arr = new MYAPP.utilities.Array(obj);

모듈에 전역 변수 가져오기
보통 전역변수에 대한 참조 또는 전역 객체 자체를 전달한다. 이렇게 하면 좀더 탐색이 빨라짐

MYAPP.utilities.module = (function (app, global) {
}(MYAPP, this));

샌드박스 패턴

다음 네임스페이스의 단점을 해결한다.

애플리케이션 전역 객체가 단 하나의 전역변수에 의존
항상 긴 이름을 써야해서 런타임시 탐색 과정을 거쳐야 함.
다음과 같은 인터페이스에 대응한다.

Sandbox(['ajax', 'event'], function (box) {
    // console.log(box);
});

Sandbox('ajax', 'event', function (box) {
    // console.log(box);
});

Sandbox('*', function (box) {
    // console.log(box);
});

Sandbox(function (box) {
    // console.log(box);
});

Sandbox('dom', 'event', function (box) {
    Sandbox('ajax', function (box) {
    });
});

샌드박스 패턴을 사용하면 콜백 함수로 코드를 감싸기 때문에 전역 네임스페이스를 보호할 수 있다.

스태틱 맴버

자바스크립트는 스태틱 맴버를 만들기 위해 별도의 패턴이 필요하다.

스태틱 맴버는 공개와 비공개 맴버가 있다.
특정 인스턴스에 한정되지 않는 메서드와 데이터를 담을 수 있고 인스턴스별로 매번 생성하지 않는다.
비공개 스태틱 맴버는 싱글턴 패턴을 다룰 때 사용된다.

객체 상수

자바스크립트는 상수는 없지만 값을 한번 설정하면 변경되지 않도록 만들 수 있다.

체이닝 패턴

채이닝 패턴이란 객체에 연쇄적으로 메서드를 호출할 수 있도록 하는 패턴이다. 아이디어는 this를 반환한다.

myobj.method1("hello").method2().method3("world").method4();

체이닝 패턴의 장단점

코드량이 줄고 코드가 간결해진다.
작고 특화된 함수를 만들어 유지보수에 도움이 된다.
하지만 디버깅이 어렵다.

method() 메서드

아래처럼 체이닝 패턴을 이용해 method를 등록할 수 있게 한다. 이때 인스턴스 맴버가 아닌 프로토타입에 등록시키기 위해 method는 그 아래 코드처럼 구현한다.

var Person = function (name) {
    this.name = name;
}.method('getName', function() {
    return this.name;
}).method('setName', function(name) {
    this.name = name;
    return this;
});

method는 아래처럼 구현한다. 결국 Function의 프로토타입에 method가 만들어져 확장된다.

if( typeof Function.prototye.method !== "function") {
   Function.prototype.method = function (name, implementattion) {
       this.prototype[name] = implementation;
       return this;
   };
}

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #2 (0)	2011/12/16
자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #1 (0)	2011/12/16
자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴 (2)	2011/12/09
자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수 (2)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자 (0)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초 (5)	2011/12/07

자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수

지돌스타 — Wed, 07 Dec 2011 22:04:35 +0900

책구입 : http://tinyurl.com/7ejd4rs
출판사 책소개 : http://blog.insightbook.co.kr/245

자바스크립트 코딩기법과 핵심패턴 제 4장 함수

자바스크립트에서 함수의 중요한 특징

함수는 일급객체 : 값이 전달될 수 있고 프로퍼티와 메서드를 확장할 수 있다.
함수는 지역 유효범위 제공 : 함수외에 다른 중괄호({}) 묶음은 지역 유효범위를 제공하지 않는다. 로컬 변수의 선언은 로컬 유효범위의 맨 윗부분으로 호이스팅이 된다.

함수를 생성하는 문법

기명 함수 표현식(named function expression)

var add = function add(a, b) {
   return a + b;
};

무명 함수 표현식(unnamed function expression) = 함수 표현식 , 익명함수(anonymous function)
```
var add = function (a, b) {
   return a + b;
};
```
함수 선언문(function declaration) 함수 선언문에는 세미콜론이 필요하지 않다.
```
function foo() {
     // 함수 본문
}
```

함수 호이스팅

함수 선언문은 함수 내에서 호이스팅되지만 함수표현식에서 선언만 호이스팅된다. 즉, 정의는 호이스팅되지 않는다!

함수패턴 : API 패턴

함수에 더 좋고 깔끔한 인터페이스를 제공할 수 있도록 도와줌

콜백 패턴 : 함수를 인자로 전달
- 콜백을 사용할 때는 항상 유효범위를 고려해야한다.
- 콜백은 라이브러리에 들어가는 코드와 같이 범용적이고 재사용할 수 있도록 일반화 시키는데 도움을 준다.
- 이벤트와 같이 비동기적 동작을 위해 콜백은 유용하게 사용된다.
설정 객체 : 함수에 많은 수의 매개변수를 전달할 때 통제를 벗어나지 않도록 해줌
- 좀 더 깨끗한 API를 제공하는 방법으로 라이브러리나 다른 프로그램에서 사용할 코드를 만들 때 유용하다.
- 장점 : 매개변수와 순서를 기억할 필요 없다. 선택적인 매개변수를 안전하게 생략가능. 읽기 쉽고 유지보수 편함. 매개변수를 추가하거나 제거하기 편함
- 단점 : 매개변수 이름을 기억해야함. 프로퍼티 이름들이 압축되지 않음.
함수 반환 : 함수의 반환값이 또 다시 함수가 될 수 있다.
- 클로저가 생성되기 때문에 비공개 데이터 저장을 위해 사용할 수 있다. 가령, 매번 호출할 때마다 값을 증가시키는 카운터 기능을 만들 수 있다.
커링 : 원본 함수와 매개변수 일부를 물려받는 새로운 함수를 생성한다.
- 함수 적용 : 함수의 호출은 실제로 인자의 묶음을 함수에 적용하는 것이다. Function.prototype.apply(), Function.prototype.call() 을 기억하자.
- 부분 적용 : 자바스크립트의 동적인 특성을 사용해 add(5,4)를 add(5)(4) 처럼 동작하도록 한 것을 부분 적용이라고 한다.
- 커링(Curring) : 부분 적용을 이해하고 처리할 수 있도록 만들어나가는 과정을 말한다.
```
//커링된 add() 예
function add(x, y) {
  if (typeof y === "undefined") {
     return function (y) {
         return x + y;
     };
  }
  return x + y;
}
typeof add(5); //function
add(3)(4); //7
var add2000 = add(2000);
add2000(10); //2010
```
```
//커링의 범용성 적용
function schonfinkelize(fn) {
   var slice = Array.prototype.slice, 
       stored_args = slice.call(arguments, 1);
   return function() {
       var new_args = slice.call(arguments), 
           args = stored_args.concat(new_args);
       return fn.apply(null, args);   
   };
}
//일반함수
function add(x, y) {
   return x + y;
}
var newadd = schonfinkelize(add, 5);
newadd(4); //9

schonfinkelize(add, 6)(7); //13

//다른 일반함수 
function add(a, b, c, d, e) {
  return a + b + c + d + e;
}
schonfinkelize(add, 1, 2, 3)(5, 5); //16

//2단계 커링
var addOne = schonfinkelize(add, 1);
addOne(10, 10, 10, 10); //41
var addSix = schonfinkelize(addOne, 2, 3);
addSix(5, 5); //16
```
함수패턴 : 초기화 패턴

웹페이지와 애플리케이션에서 매우 흔히 사용되는 초기화와 설정작업을 전역 네임스페이스를 어지럽히지 않고 임시 변수를 사용해 좀더 깨끗하고 구조화된 방법으로 수행할 수 있도록 도와줌
1. 즉시 실행 함수 : 정의되자마자 실행된다.
  - 장점 : 초기화 코드에 유효범위 샌드박스(sandbox)를 제공한다. 즉, 전역 네임스페이스를 깨끗하게 유지한다.
  - 인자를 전달할 수 있다. 즉시 실행 함수내에서 window를 사용하지 않고도 전역객체에 접근할 때 유용하다.
  - 즉시 실행함수에서 미리 계산하여 클로저에 저장해둔 값을 반환할 수 있다.
  - 객체 프로퍼티를 정의할 때도 사용할 수 있다.
2. 즉시 객체 초기화 : 익명 객체 내부에서 초기화 작업을 구조화한 다음 즉시 호출할 수 있는 메서드를 제공한다.
  - 즉시 객체 초기화 패턴을 활용하면 즉시 실행 함수와 초기화 작업을 할 수 있다는 장점이 있다. 구조적으로 초기화를 구분할 경우 장점이 있다.
  - 하지만 압축도구는 구글의 클러저 컴파일러의 고급 모드에서만 압축이 가능하다.
3. 초기화 시점의 분기 : 최초 코드 실행 시점에 코드를 분기하여, 애플리케이션 생명 주기 동안 계속해서 분기가 발생하지 않도록 막아준다.
  - 어떤 조건이 프로그램의 생명주기 동안 변경이 되지 않는게 확실한 경우, 조건을 단 한 번만 확인하는 것이 바람직하다.
함수패턴 : 성능 패턴

코드의 실행속도를 높이는데 도움을 준다.
1. 메모이제이션 패턴 : 함수 프로퍼티를 사용해 계산된 값을 다시 계산되지 않도록 한다.
  - 객체의 인자를 캐시하여 키값으로 삼아 같은 인자가 들어올 때 다시 계산하지 않도록 해서 성능을 높혀준다.
2. 자기선언 함수 : 자기 자신을 덮어씀으로써 두 번째 호출 이후부터는 작업량을 줄게 해줌
  - 함수가 어떤 초기화 준비 작업을 단 한 번만 수행할 경우 유용하다.
  - 단점1은 자기 자신을 재정의한 후에는 이전에 원본 함수에 추가했던 프로퍼티들을 모두 찾을 수 없게된다.
  - 단점2는 함수가 다른 이름으로 사용된다면, 재정의된 부분이 아니라 원본 함수의 본문이 실행되어 의도치 않은 동작을 만들 수 있다.

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #1 (0)	2011/12/16
자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴 (2)	2011/12/09
자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수 (2)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자 (0)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초 (5)	2011/12/07
자바스크립트 코딩 기법과 핵심패턴 : 1장 개요 (0)	2011/12/07

자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자

지돌스타 — Wed, 07 Dec 2011 21:48:33 +0900

책구입 : http://tinyurl.com/7ejd4rs
출판사 책소개 : http://blog.insightbook.co.kr/245

자바스크립트 코딩기법과 핵심패턴 제 3장 리터럴과 생성자 정리

이 장에서 중요한 것은 생성자 사용을 자제하고 리터럴 표기법을 사용하라는 것임!

리터럴 표기법이 생성자 함수 사용보다 더 간결하고 짧다.
리터럴 표기법을 사용하면 유효범위 판별 작업이 발생하지 않는다.
리터럴 표기법을 사용하는 것이 더 안정적이다. new Object()에 인자가 동적으로 전달되는 경우 예기치 않는 결과가 나올 수 있다. var o = new Object(1);에서 o.constructor === Number는 true가 된다.
생성자는 함수내에 반환문이 없더라도 암묵적으로 this를 반환한다. 이 말은 this대신 다른 것도 반환할 수 있다는 것을 의미한다.
생성자 패턴을 사용하면 논리적 오류가 발생할 수 있다. 자바스크립트에서 생성자는 함수일 뿐이므로 new를 빼먹으면 생성자 내부에 this는 전역 객체를 가리키게 되어 의도치 않는 결과를 초래할 수 있다. 이를 우회하기 위해 다음과 같은 패턴을 사용한다.
```
if(typeof Array.isArray === "undefined") {
   Array.isArray = function(arg) {
        return Object.prototype.toString.call.(arg) === "[object Array]";
   };
}
```
JSON은 자바스크립트 객체 표기법으로 데이터 전송 형식의 일종으로 배열과 객체 리터럴 표기법의 조합이다.
JSON을 다루기 위해 eval()을 사용하는 것은 금지한다.
JSON은 가능하면 JSON.parse()와 JSON.stringify()를 사용한다. 이것은 ES 5 부터 추가되었다. 구형 브라우져인 경우 YUI나 jQuery용을 사용하자.
정규 표현식도 리터럴 타입이 안전하다. 생성자 타입(new RegExp())을 사용하는 것은 매칭시킬 패턴을 미리 알 수 없어 런타임에 문자열을 만들어야하는 경우이다.
원시 데이터 타입 레퍼 생성자는 사용하지 말자. 즉 new String("my string"); 이런거 말이다.
원시 데이터에서 "Hello there".split(' ')[0]; 이 동작할 수 있는 것은 일시적으로 객체로 변환하기 때문이다.
에러 객체. 자바스크립트 에러 객체는 Error(), SyntaxError(), TypeError() 3개이다. 이것은 throw문과 사용된다. 중요한 프로퍼티는 name, message이다. 하지만 throw문은 이 에러 객체를 사용하지 않아도 잘 동작한다. throw {name:.., message:..., extra:...}; 형태처럼 사용해도 무방하다.

다음은 권장되는 리터럴과 원시 데이터 타입이다.

var o = {};
var a = [];
var re = /[a-z]/g;
var s = "";
var n = 0;
var b = false;
throw { 
  name : "Error",
  message : "uh-oh" 
};
또는 
throw Error("uh-oh");

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴 (2)	2011/12/09
자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수 (2)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자 (0)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초 (5)	2011/12/07
자바스크립트 코딩 기법과 핵심패턴 : 1장 개요 (0)	2011/12/07
PHP, Ajax (prototype)을 이용한 XML 통신 (5)	2007/07/05

자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초

지돌스타 — Wed, 07 Dec 2011 20:56:17 +0900

책구입 : http://tinyurl.com/7ejd4rs
출판사 책소개 : http://blog.insightbook.co.kr/245

자바스크립트 코딩기법과 핵심패턴 제 2장 기초 정리

유지보수 가능한 코드 작성

유지보수가 가능한 코드란 다음과 같은 특징을 가짐

읽기 쉽다.
일관적이다.
예측 가능하다.
한 사람이 작성한 것처럼 보인다.
문서화되어 있다.

전역변수를 최소화 하라!

전역변수는 자바스크립트 애플리케이션이나 웹페이지 모든 코드 사이에서 공유된다는 문제점이 있다.
그러므로 전역변수는 최소한으로 사용한다.

myglobal = "hello"; //안티패턴 
console.log(myglobal); //hello
console.log(this.myglobal); //hello
console.log(window.myglobal); //hello
console.log(window["myglobal"]); //hello

암묵적 전역(implied globals)
암묵적 전역은 절대적으로 피하는 것이 좋다. 아래 예도 그렇지만 다른 이유로 이식성(portability) 때문. 암묵적 전역 변수가 새로운 실행환경에서 호스트 객체를 의도치 않게 덮어쓸 수 있기 때문.

function sum(x, y) {
   result = x + y; //안티패턴 - 전역 네임스페이스에 result 변수가 남게된다. 
   return result;
}
function sum(x, y) {
   var result = x + y; //추천패턴 - 언제나 var을 사용해 변수를 선언해야 한다. 이때 result는 지역변수가 된다.
   return result;
}
function foo() {
   var a = b = 0; //안티패턴 - 이것은 var a = (b = 0); 과 같다. 즉 b가 암묵적 전역이 된다. 
}
function foo() {
   var a, b;
   a = b = 0; //추천패턴 - 이 경우 모두 지역변수가 된다. 
}

단일 var 패턴을 사용하라

아래처럼 사용하는 패턴이 좋다. 장점은 변수 찾기 용이(명시적)이며, 로직상 오류를 방지(예를 들어 호이스팅)한다. 또한 의도적이지 않은 전역 변수 사용을 최소화할 수 있다. 뿐만아니라 코드링이 줄어든다.

function func() {
   var a = 1,
       b = 2,
       sum = a + b,
       myobject = {}, 
       el = document.getElementById("result"),
       style = el.style
       i,
       j; 
}

호이스팅(hoisting)

호이스팅(끌어올리기)은 함수내에 어디서든 var 선언을 사용하더라도 함수 상단에 선언한 것과 동일한 동작을 하는 방식을 말함. 중요한 것은 선언만 호이스팅되는 것이지... 정의는 호이스팅 되지 않는다.

for 루프

다음처럼은 절대 쓰지 않는다.

for(var i = 0; i < myArray.length; i++) {
   //myarray[i]를 다루는 코드 
}

다음 처럼 쓴다.

for(var i = 0, max = myarray.length; i < max; i++) {
   //myarray[i]를 다루는 코드 
}

for내에 var 선언은 단일 var 패턴을 해도 된다.
i++대신 i = 1을 사용하는 것이 좋다. +, --는 과도한 기교를 조장한다는 이유이다.

미세 최적화를 위해 두가지 패턴을 활용한다.

변수를 하나 덜 쓴다.
카운트를 거꾸로 0으로 내려간다. 0과 비교하는 것이 0이 아닌 값으로 비교하는 것보다 빠르기 때문.

for-in 루프

for-in으로 루프를 도는 것을 열거(enumeration)라고 한다. 이 루프는 반드시 배열이 아닌 객체를 순회할 때만 사용한다.

프로토타입 프로퍼티만을 걸러내기 위해 hasOwnProperty() 메서드를 사용한다.

for(var i in man) {
    if(man.hasOwnProperty(i)) {
      console.log(i, ":", man[i]);
    }
}

다음처럼 해도 된다. 이 방법은 man객체가 hasOwnProperty를 재정의하여 덮어써도 활용할 수 있다.

var i, 
    hasOwn = Object.prototype.hasOwnProperty;
for(i in man) {
    if(hasOwn.call(m, i)) {
      console.log(i, ":", man[i]);
    }
}

내장 생성자 프로토타입은 되도록 확장하지 말자.
생성자 함수의 prototype 프로퍼티를 확장하는 것은 기능을 추가하는 좋은 방법이나 너무 강력함. 그러므로 Object(), Array(), Function()과 같은 내장 생성자의 프로토타입을 확장하는 것은 매력적이나 코드의 지속성을 심각하게 저해할 수 있다. 하지만 무조건 나쁘지만은 않으므로 꼭 필요한 경우 정의한다.

if (typeof Object.prototype.myMethod !== "function") {
   Object.prototype.myMethod = function () {   
       // 구현...
   };
}

switch 패턴

case문을 switch문에 맞추어 정렬
case문 안에서 코드를 들여쓰기 한다.
case문은 명확히 break;로 종료
break문을 생략하여 통과시키지 않는다. 필요한 경우 기록을 남긴다.
반드시 default:을 쓴다.

switch( inspect_me) {
case 0:
     result = "zero";
     break;
case 1:
     result = "one";
     break;
default:
     result = "unknown";
}

암묵적 캐스팅 피하기

false 0, "" 0 이 모두 true가 되기 때문에
암묵적 캐스팅으로 인한 혼동을 막기 위해 완전항등연산자인 ===, !== 연산자 만을 사용한다.

evel()은 보안문제로 무조건 피하라!

setInterval(), setTimeout(), Function() 생성자에 문자열을 넘기는 것도 eval()처럼 문제가 발생할 수 있으므로 피한다.

var property = "name";
alert(eval("obj." + property)); //안티패턴

setTimeout("myFunc()", 1000); //안티패턴
setTimeout("myFunc(1, 2, 3)", 1000); //안티패턴

만약 eval()을 사용해야하는 경우가 발생한다면 new Function(); 을 고려하자. eval()은 유효범위 체인에 간섭을 일으킬 수 있는 단점이 있는 반해, Function은 좀더 봉인 되어 있다. new Function()과 Function()은 동일하다.

parseInt()를 통한 숫자 변환

문자를 숫자로 바꾸는 방법은 parseInt("05", 10)와 Number("05") 방법이 있다. 단, parseInt의 경우 "05"처럼 앞에 0이 있는 경우에는 반드시 두번째 인자가 10(10진수의 의미)이 되어야 한다. 하지만 Number는 상관없다. Number의 경우 "05 hello"등은 바꿀 수 없고 NaN처리 되지만 parseInt()는 5가 잘 나온다.

코딩규칙

적절한 들여쓰기 사용
중괄호는 생략할 수 있어도 꼭 쓸 것
중괄호 여는 위치는 "세미콜론 삽입 장치" 문제로 반드시 아래처럼 쓰는게 좋다.
```
function func() {
  return {
    name: "Batman" 
  };
}
```
공백은 코드가 숨쉴 수 있게하는 요소. 하지만 코드 컨벤션에 따라서 쓰면 되겠다.

명명규칙

생성자는 대문자로 시작
단어 구분에는 낙타표기법(camel case) 사용 - 단 생성자는 대문자 낙타표기법은 함수는 소문자 낙타표기법을 사용한다.
상수는 대문자와 _를 적절히 사용한다.
private나 protected는 __myPrivateMethod, _myProtectedMethod 처럼 구분하도록 하자.

주석 작성

YUIDoc(http://yuilibrary.com/projects/yuidoc), JSDoc(http://code.google.com/p/jsdoc-toolkit) 활용

출시단계 압축

야후의 YUICompressor 나 구글의 Closure Compiler 활용.

JSLint 실행

지금까지 다룬 패턴 위반사례를 잡아줌.

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴 (2)	2011/12/09
자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수 (2)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자 (0)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초 (5)	2011/12/07
자바스크립트 코딩 기법과 핵심패턴 : 1장 개요 (0)	2011/12/07
PHP, Ajax (prototype)을 이용한 XML 통신 (5)	2007/07/05

자바스크립트 코딩 기법과 핵심패턴 : 1장 개요

지돌스타 — Wed, 07 Dec 2011 20:53:51 +0900

책구입 : http://tinyurl.com/7ejd4rs
출판사 책소개 : http://blog.insightbook.co.kr/245

자바스크립트 코딩기법과 핵심패턴 제 1장 개요 정리

자바스크립트의 함수는 일급객체(first-class object) 이다.

변수나 데이터 구조 안에 담을 수 있다.
인자로 전달할 수 있다.
반환 값으로 사용할 수 있다.
런타임에 생성할 수 있다.
할당에 사용된 이름과 관계 없이 고유하게 식별할 수 있다.

패턴

디자인 패턴 : C++, Java등에서 사용되는 GoF에서 정의된 패턴, 자바스크립트는 그대로 쓰지 않고 적절하게 섞어서 사용할 것이다.
코딩 패턴 : 자바스크립트에서 효율적이면서 유연한 개발을 위해 사용하는 특유 패턴. 일종의 코드 컨벤션이 될 수 있겠다.
안티 패턴 : 오류를 낼 가능성이 많아서 되도록 사용하지 말아야할 패턴

자바스크립트 개념

객체지향 : 자바스크립트는 객체지향 언어이다.
클래스가 없다.
프로토타입 : 자바스크립트에서 상속하는데 사용. 하나의 객체이며, 모든 함수가 prototype 프로퍼티를 가진다.
실행환경 : 주로 브라우저이지만 유일하지 않다.
ECMAScript 5(ES 5)
JSLint : 자바스크립트 코드 품질 도구
콘솔 : console.log 나 console.dir 활용

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴 (2)	2011/12/09
자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수 (2)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자 (0)	2011/12/07
자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초 (5)	2011/12/07
자바스크립트 코딩 기법과 핵심패턴 : 1장 개요 (0)	2011/12/07
PHP, Ajax (prototype)을 이용한 XML 통신 (5)	2007/07/05

Away3D 4.0 으로 만들어본 지구

지돌스타 — Thu, 17 Nov 2011 03:59:38 +0900

Away3D 4.0 Alpha 버전으로 지구를 그려봤습니다. 프리미티브 구체(Sphere)에 지구 이미지 맵(Diffuse Map)과 울퉁불퉁한 지구 표면을 표현하기 위해 노말맵(Normal Map), 그리고 육지와 바다 표면에 차별적인 빛처리를 위해 스펙큘러 맵(Specular Map)등을 이용해 재질을 만들어 적당하게 빛을 쏴주었습니다. 구름 맵도 적용해봤는데... 꽤 근사해졌다는.... 이 모든 자원들은 전부 [여기]에서 가져왔습니다.

파워플 블로그에 연재글로 태양계 관련 글을 적다가 말았는데... Away3D 3.6 기반은 이제 시대가 지난 것 같아서 Away3D 4.0으로 마무리 하려고 짬내서 만들어 봤고요. 역시 GPU 렌더링이라서 그런지 기존하고 비교가 안될 정도로 퀄리티가 높아졌습니다. 최적화를 위해 밉맵 및 LOD등을 사용하지 않았지만 워낙 GPU 렌더링이 훌륭해서 요정도는 그냥 문제없이 60fps에 CPU점유율 거의 없이 렌더링이 됩니다.

아래에서 마우스로 조작할 수 있습니다. 풀스크린으로도 볼 수 있고요. 단 여러분의 브라우져에 Flash Player 11이 설치되어 있어야 합니다.

퍼가기 소스

글쓴이 : 지돌스타(http://blog.jidolstar.com/789)

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Away3D 3.6 Essentials 번역서 출간 (0)	2011/12/21
Away3D 4.0 으로 만들어본 지구 (0)	2011/11/17
Flash Player 11 3D 용어 정리 (3)	2011/10/18
Starling Framework - 2D GPU 가속 렌더링 플래시 게임 엔진 (1)	2011/09/23
Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material (0)	2011/08/01
1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발 (8)	2011/07/16

Flash Player 11 3D 용어 정리

지돌스타 — Tue, 18 Oct 2011 11:27:38 +0900

요즘 s49라는 Flash Player 11 3D 스터디에 참여하고 있습니다. 2번째 시간을 맞아 학습한 내용을 나름 정리했어요. 알고 있는 내용이지만 이런 기록을 남겨둘 필요는 있을 것 같아서요. ^^

---------------------------------------------------------------------------
Flash Player 11에서 부터 GPU 렌더링을 지원하게 되었다.

GPU는 3D 렌더링하는데 최적화가 되어 있으므로 3D 요소들이 무엇이고 이 요소들을 어떻게 가공해서 GPU에 전달해 렌더링 처리할 수 있을까 이해하는 것은 매우 중요하다.

그러므로 기초적으로 3D 용어 몇가지를 알아두어야 한다.

3D 데이타

3D 데이타의 종류는 꽤 많다. 스플라인기반, 다각형기반(폴리곤)등 3D를 표현하기 위한 다양한 요소 및 구성이 존재한다.

스플라인 기반 : 일종의 Nurbs선으로 정점, 세그먼트(단락)로 구성된다. 정점과 정점사이를 이을 때 직선이 아닌 보간법을 이용한 계산을 통해 그 사이를 잇는 세그먼트로 부드러운 곡선을 만들어낸다. 계산이 복잡하지만 좀더 실질적인 사물을 렌더링하는데 좋은 데이터 기반이 된다.
다각형 기반 : 정점과 그것을 직선으로 잇는 가상의 선(Edge)이 각각 3개 이상 조합하여 하나의 다각형을 만들 수 있고 이 다각형들이 모여서 하나의 3D 객체가 완성된다. 최소 조합인 3개로 만들면 삼각형이 된다.

Flash는 삼각형 기반의 3D 데이타를 가공해서 GPU 렌더링할 수 있는 인터페이스를 제공한다. 그러므로 앞으로 설명할 내용은 이것과 관련되어서만 이야기 한다.

다각형 기반의 3D 데이타 용어

정점(Vertex) : 3D 공간상에 하나의 좌표값. 위치(x,y,z), 색(r,g,b), 알파값(a)을 가진다. 이 값을 배열형태로 나열한 데이터를 버텍스 버퍼(Vertex Buffer)라고 한다. 그러므로 정점 첫번째는 배열의 0인덱스 값이 된다.이 정점들의 위치는 중복되지 않도록 하는 것이 좋다.
변(Edge) : 점점을 잇는 가상의 선이다. 하나의 면을 만들기 위한 개념적인 도입이 필요하지만 정점 + 인덱스로 면을 구성할 수 있기 때문에 실제로 중요하진 않다. 결국 이것 자체는 데이타라고 볼 수 없다.
면(Face) : 정점 3개 이상을 잇는 연속적인 선이 하나의 면을 만든다. 그래서 삼각면, 사각면, 오각면등 다양한 다각형의 면을 만들 수 있다. 하지만 삼각면은 3개의 점으로 만들어지는 것이므로 2D면이 만들어지는 것이 필연적이지만 그 이상의 면은 2D면이 된다는 보장이 없다. 그래서 보통 3D에서 말하는 면은 삼각면을 가장 많이 쓰고 이 삼각면이 모아져서 하나의 3D 객체가 된다 .
삼각면(Triangle) :면의 한 종류. 정점 3개를 3개의 변으로 순차적으로 이었을때 만들어지는 면.
인덱스(Index) : 정점을 이어 1개의 다각형을 만들기 위해 인덱스가 필요하다. 정점에서 설명했듯이 버텍스 버퍼에 저장되어 있는 정점들의 인덱스를 3개 이상 나열해서 1개의 다각형을 만들 수 있다. 이 값이 0,1,2 라고 하면 정점0, 정점1, 정점2를 잇는 선이 하나의 삼각면을 만들 수 있다. 또 다른 삼각면은 2,1,3으로 해서 첫번째 만든 삼각면과 한개의 선이 중복되는 삼각면이 만들어진다. 결국 인덱스는 다각형을 만들어주는 동시에 정점자체를 재활용해서 사용하게 하는데도 필요하다. 이 인덱스 정보를 담는 배열 데이터를 인덱스 버퍼(index buffer)라고 한다.
은면(Cull Face) : 면은 앞과 뒷면이 있다. 보통 이 앞 뒷면을 다 보이지 않고 한개의 면만 보이도록 한다. 그래서 이 안보이는 면을 은면이라고 한다. 이 은면은 3D 객체의 안쪽면이 대부분이다. 이 부분은 보일 필요가 없기 때문에 렌더링 대상에서 제외시켜 렌더링 속도를 높히는데 사용한다. 은면을 결정하는 방법은 삼각면을 만들때 정점을 잇는 인덱스의 순서로 결정된다. 보통 시계방향으로 만들어지는 면을 앞면으로 한다.
픽셀(Pixel) : 2D 화면에 나타내는 1개의 점이다. 3D 용어라고 할 수 없지만 3D 계산 결과가 2D로 나타내야 하므로 이 또한 알고 있어야하는 용어
텍스쳐(Texture) : 정점만으로는 디테일한 객체의 면을 구성하는 것은 엄청난 리소스가 투여된다.이때 텍스쳐는 유용하다. 텍스쳐는 일반적으로 jpg, png와 같은 이미지가 리소스가 된다. 이 텍스쳐를 3D 면에 입히는 과정을 맵핑이라고 한다.
UV : 텍스쳐의 어떤 부분을 면에 적용할 것인가 결정하기 위한 2차원 좌표값이다.
재질(Material) : 재질은 면을 어떻게 보여줄 것인가 결정해 준다. 앞서 텍스쳐도 하나의 재질이 될 수 있다. 실제로 텍스쳐는 리소스일 뿐이고 3D 면에 실제로 입히기 위해서는 좀더 재질에 등록되어야 한다. 재질의 종류에는 와이어프레임 재질 또는 단색 재질, 빛처리가능한 재질등 여러가지가 있다.
기하구조(Geometry) : 정점과 인덱스를 이용해 면을 만들고 그 면들이 조합되어 하나의 3D 객체의 골격이 만들어진다. 또한 텍스쳐를 입히기 위해 UV정보 및 면들의 앞뒷면 정보가 있다. 이런 정보들을 조합해 기하구조라고 하며 한마디로 3D객체 골격을 구성시키기 위한 버텍스 버퍼와 인덱스 버퍼의 UV버퍼등의 조합이라고 해석하면 되겠다.
메쉬(Mesh) : 기하구조와 재질 정보를 가진다. 이것으로 하나의 3D 객체가 된다.

투영(Projection)
투영이란 3D 데이타를 2D화면에 렌더링하는 수학적 방식을 말한다. 많이 사용하는 투영에는 직교투영(Orthogonal Projection, 등각투영,등축투영이라고도 함)과 투시투영(Perspective Projection)이 있다.

직교투영 : 이 투영은 거리에 상관없이 일정한 비율로 보여지는 투영방법이다. 요즘 많이 나오는 소셜게임에 3D 처럼 타일맵을 사용하는 게임들은 전부 직교투영방식이라고 생각하면 되겠다.
투시투영 : 이 투영은 거리에 따라 물체의 크기 비율이 달리 보이게 하는 투영방법이다. 기본 온라인 3D 게임들은 거의 대부분 이 투영방식을 사용한다. 투시투영에 대한 계산방식은 또 세부적으로 나뉜다. 가장 간단하게는 거리에 따라 일정한 비율로 물체의 크기 비율이 줄어드는 형태로 한다.

3D 데이타와 GPU 관계

3D 데이타를 화면에 표시하면 2D가 된다. 그럼 3D 데이타를 어떻게 가공하여 GPU에 전달해 2D로 표현할 것인가 이해를 해야한다. 3D 데이타는 CPU기반으로 만들어진다. 이 데이타는 직접 코딩을 통해 만들 수 있다. 하지만 그 과정은 너무도 비효율적이므로 3DMax와 같은 사용툴을 이용해 만든다. 이렇게 만든 3D 데이타에는 앞서 말한 3D 데이타 용어에 설명된 개념들이 전부 들어간다.

3D 데이타를 GPU에 업로드 시켜야 비로써 렌더링이 된다. 업로드하는 요소는 버텍스버퍼, 인덱스버퍼, 프로그램(셰이더)이다. 마지막 프로그램인 버텍스 셰이더와 픽셀 셰이더가 있다.

버텍스 셰이더(Vertext Shader) : 버텍스 버퍼와 인덱스 버퍼를 이용해 3D 객체에 공간적 변환(이동,변형등)을 주기 위한 프로그램이다.
픽셀 셰이더(Pixel Shader) : Fragment Shader라고도 불린다. 삼각면에 색상 및 텍스쳐등을 적용한다. 실제로 3D객체를 Pixel단위로 화면에 렌더링하기 위한 프로그램이다.

셰이더를 만드는 언어는 다양한데 오픈지엘에서는 GLSL, DirectX에서는 HLSL을 많이 쓰면 그외에도 CG등 다양한 언어가 있다. Flash에서는 AGAL이라는 언어가 따로 제공된다.

이런 3D 데이타 및 프로그램 정보를 GPU에 업로드해야하므로 그 전에 CPU에서 업로드하기 위한 준비가 필요하다. 업로드 비용은 싼것이 아니기 때문에 이것을 최적화 하는 것이 3D 프로그래밍의 핵심 기술이다. Flash에서는 Stage3D와 Context3D 클래스를 통해 3D 데이타를 GPU에 업로드할 수 있도록 인터페이스를 제공하고 있다. 결국 GPU에 올라간 3D 데이터 렌더링이 느린게 아니라 3D 데이터를 어떻게 가공하고 적게 업로드하느냐가 3D애플리케이션의 속도와 메모리에 지대한 영향을 줄 것이다. 그래서 개발자가 직접 Stage3D와 Context3D를 다뤄서 프로그래밍 하는 것은 개발양도 많고 앞서 말한 애플리케이션의 속도와 메모리도 보장될 수 없기 때문에 이러한 것을을 나름 최적화한 Alternativa3D 8 라이브러리를 사용하는 것이다. 아이폰에서 SION과 같은 3D 프래임워크를 쓰는 이유도 다 그러한 이유이다.

DisplayObject의 addChild와 Object3D의 addChild가 가장 다른 점

Flash 세계에 있던 분들은 대부분 디스플레이 객체(Sprite, MovieClip등)의 부모/자식 관계는 렌더링과 직접 연관이 있다는 것을 어렵지 않게 알 수 있다. 즉. 부모객체가 stage에 자식으로 등록되어 있는 경우 그 부모객체에 다른 자식을 추가했을때는 바로 화면에 보여지게 된다. 하지만 Alternative3D는 그렇게 동작하지 않는다. Object3D가 부모/자식 관계에 있다고 하더라도 GPU에 업로드되지 않으면 렌더링 되지 않는다. 게다가 부모가 아닌 자식만 업로드 되면 자식만 렌더링 된다. 이게 DisplayObject와 크게 다른 점들이다.

그외에.... 잘못된 점이나 부족한 점 있으면 지체없이 지적 해주세요... ^^

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Away3D 3.6 Essentials 번역서 출간 (0)	2011/12/21
Away3D 4.0 으로 만들어본 지구 (0)	2011/11/17
Flash Player 11 3D 용어 정리 (3)	2011/10/18
Starling Framework - 2D GPU 가속 렌더링 플래시 게임 엔진 (1)	2011/09/23
Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material (0)	2011/08/01
1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발 (8)	2011/07/16

Pixel Bender + TextMate 소개

지돌스타 — Mon, 26 Sep 2011 16:39:55 +0900

Hika님이 TextMate용 Pixel Bender 개발 번들에 대해서 소개해줘서 한번 테스트 해보았습니다.
테스트를 위해 먼저 TextMate가 맥에 설치되어야 합니다. 그리고 아래 링크에서 번들파일을 다운로드 받습니다.

Pixel Bender + TextMate

TextMate가 설치되어 있다면 번들파일을 아래처럼 선택해 오른쪽 마우스를 클릭해서 TextMate로 열면 바로 TextMate에 번들로 등록됩니다.

TextMate를 실행해서 아래와 같이 Pixel Bender Template로 PBK파일을 만들 수 있습니다.

아래는 Pixel Bender Template를 이용해 만든 pbk 소스 코드입니다. 여기서 편집해서 Command+B를 누르면 컴파일 되고 Command+R을 누르면 실행이 됩니다.

하지만 맥에 Pixel Bender Toolkit이 설치되어 있어야 컴파일이 가능합니다. 이 툴은 아래 링크에서 다운로드 받을 수 있습니다.
http://www.adobe.com/devnet/pixelbender.html

아마도 그냥 설치하면 TextMate의 Pixel Bender 번들에 설정된 Pixel Bender Toolkit의 기본경로가 틀리기 때문에 Command+B를 누르더라도 컴파일 오류를 발생시킬 것입니다.

TextMate의 메뉴에서 Bundles > Bundle Editor... > Show Bundle Editor를 선택해 아래와 같은 창이 열리면 Pixel Bender에 대한 설정을 할 수 있습니다. 하지만 Pixel Bender Toolkit이 설치된 경로를 바꾸는 부분을 찾지 못했습니다.(처음 사용해봐서 모르는 것 일수도..) 그래서 무식하게 Pixel Bender Toolkit의 설치경로를 /Applications/Utilities/Adobe Utilities.localized/Pixel Bender Toolkit/로 강제시켰습니다. 결국 이 경로에 있는 pbutil을 실행해서 위 pbk를 컴파일해서 pbj를 만들고 또 실행할 수 있는 것 같습니다.

간단히 테스트 하기 위해 아래처럼 코딩했습니다.

코드는 단순합니다. 그저 3개의 파라미터를 받아 각각 색상채널 RGB에 0~1의 값을 곱해줍니다. Command+B를 눌러 컴파일 합니다. 만약 컴파일 실패면 에러 메시지가 보일 겁니다. 컴파일 성공하면 PBJ를 성공적으로 만들었다는 메시지를 띄워줍니다. 컴파일 후 Command+R을 누르면 아래와 같은 실행화면을 볼 수 있습니다. 일단 기본 이미지가 붙어 있는 상태에서 실행됩니다. 게다가 파라미터를 분석해 R, G, B 슬라이더를 자동 만들어 줍니다. Pixel Bender Toolkit에서 직접 하는 것과 같네요. ㅎㅎ 여담이지만 이런 개발툴을 AIR로 만들 수 있다면 ShaderData를 분석해 만들 수 있겠지요. Load PBJ도 있는데... PBJ Decomplie기능도 있는 것 같은데 어떻게 하는지는 모르겠네요.

이것의 장점은 TextMate로 개발하는 사람들에게 첫번째로 유용하겠네요. 활용을 어떻게 할지는 둘째 치고라도요. 이클립스 플러그인인 PBDT보다 훌륭하다고 생각되는 점은 위 그림처럼 바로 실행해볼 수 있다는 점입니다. PBDT는 개발을 위해서면 최강이 맞지만 저렇게 실행하려면 결국 as3코딩이 필요하거든요. 뭐... 그리 불편한 점은 아닙니다만.. ^^ 조아 횽님께서 PBDT에도 저런 기능을 넣어주시면 참 좋겠네요. 그보다 PB3DDT를 만들어주신다면 대박!ㅎㅎ

글쓴이 : 지돌스타(http://blog.jidolstar.com)

'Adobe Flash Platform' 카테고리의 다른 글

Pixel Bender + TextMate 소개 (1)	2011/09/26
픽셀벤더(Pixel Bender)에 대한 나름 간단 정리 (0)	2011/09/22
파워플에 PixelBender 에 대한 연재를 시작합니다. (1)	2011/09/16
2회 Adobe Flash Platform e세미나 - 모바일 개발 (5)	2011/08/18
Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰 (1)	2011/08/04
Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전 (4)	2011/07/21

Starling Framework - 2D GPU 가속 렌더링 플래시 게임 엔진

지돌스타 — Fri, 23 Sep 2011 03:35:53 +0900

Starling Framework는 플래시 게임 엔진으로 Flash Player 11의 Stage3D기반에서 2D GPU 렌더링을 지원한다. API의 인터페이스가 플래시 패키지와 유사하다. 가령 MovieClip의 경우, flash.display.MoviClip대신 staring.display.MoviClip이 된다. 그래서 Stage3D에 대해서 잘 모르더라도 개발에 대한 처음 진입장벽이 낮은 편이다. 2D 게임을 만들기에 편리하도록 다양한 기능도 포함하고 있다.

이 프레임워크는 iOS용인 Sparrow Framework를 만든 개발자가 직접 포팅한 것이다.

이 프레임워크 환경에서 2D 게임을 개발하기 위해 다음 조건이 필요하다.
1. Flash Player 11이 브라우져에 설치되어야 한다.
2. Flash Buidler에 Flash Player 11용 Flash를 개발하기 위한 환경을 조성한다.
3. starling-framework를 다운로드 받아야 한다.

정식으로 Flash Player가 배포된 것은 아니므로 아직까지는 개발자용으로만 테스트 해볼 수 있겠다.

Introducing the Starling Framework 글에 있는 동영상을 보고 간단하게 테스트 해봤다.

이 동영상에서 SpriteSheet를 쉽게 만들어주는 TexturePacker 앱이 눈에 띄었다. 사용법도 간단하니 한번 써보길 바란다. 동영상을 따라하려면 이 앱을 설치해야 한다. 이것을 사용하면 여러개의 이미지 소스로 부터 아래와 같은 1개의 SpriteSheet용 이미지를 아주 편하게 생성할 수 있다. 필요없는 영역도 자동으로 다 제거해주니 정말 편하다.

위 SpriteSheet를 플래시 내에서 다시 쪼개기 위한 xml도 다음처럼 만들어준다.

<?xml version="1.0" encoding="UTF-8"?>
<TextureAtlas imagePath="run.png">
    <!-- Created with TexturePacker -->
    <!-- http://texturepacker.com -->
    <!-- $TexturePacker:SmartUpdate:54fd03ba2d659990a342598e55bc0af8$ -->
    <SubTexture name="run0001" x="0" y="0" width="94" height="156" frameX="-230" frameY="-128" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0002" x="94" y="0" width="94" height="150" frameX="-230" frameY="-134" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0003" x="188" y="0" width="98" height="148" frameX="-229" frameY="-136" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0004" x="286" y="0" width="100" height="154" frameX="-230" frameY="-130" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0005" x="386" y="0" width="98" height="160" frameX="-230" frameY="-124" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0006" x="0" y="160" width="96" height="160" frameX="-230" frameY="-124" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0007" x="96" y="160" width="96" height="158" frameX="-229" frameY="-126" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0008" x="192" y="160" width="96" height="152" frameX="-229" frameY="-132" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0009" x="288" y="160" width="98" height="150" frameX="-229" frameY="-134" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0010" x="386" y="160" width="100" height="156" frameX="-230" frameY="-128" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0011" x="0" y="320" width="98" height="160" frameX="-230" frameY="-124" frameWidth="550" frameHeight="400"/>
    <SubTexture name="run0012" x="98" y="320" width="96" height="160" frameX="-229" frameY="-124" frameWidth="550" frameHeight="400"/>
</TextureAtlas>

Starling은 아래 코드처럼 아주 간단하게 만들 수 있다.

//StarlingTest.as 
package
{
	import flash.display.Sprite;
	
	import starling.core.Starling;
	
	[SWF(frameRate=60, width=800, height=600)]
	public class StarlingTest extends Sprite
	{
		public function StarlingTest()
		{
			//Starling을 생성하고 시작한다. 
			var star:Starling = new Starling(Main, stage);
			star.start();
		}
	}
}

//Main.as
package
{
	import starling.core.Starling;
	import starling.display.MovieClip;
	import starling.display.Sprite;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;
	
	public class Main extends Sprite
	{
		//SpriteSheet 텍스쳐 이미지에 대한 정보 XML
		[Embed(source="run.xml", mimeType="application/octet-stream")]
		private var AtlasXML:Class;
		
		//SpriteSheet 텍스쳐 이미지 
		[Embed(source="run.png")]
		private var AtlasTexture:Class;
		
		public function Main()
		{
			//이미지로 부터 텍스쳐 생성 
			var texture:Texture = Texture.fromBitmap(new AtlasTexture());
			
			//XML 데이터 
			var xml:XML = XML(new AtlasXML());
			
			//Texture Atlas 생성 
			var atlas:TextureAtlas = new TextureAtlas(texture, xml);
			
			//Texture Altlas로 부터 텍스쳐를 읽어 무비클립 생성 후 자식으로 추가. 주기는 30bps로 설정  
			var mc:MovieClip = new MovieClip(atlas.getTextures("run"), 30);
			addChild(mc);			
			
			//현재 활동하는 Starling 객체로 지정  
			Starling.juggler.add(mc);
		}
	}
}

이 예제는 단순히 SpriteSheet 텍스쳐의 이미지를 가지고 에니메이션 처리하는게 다 이지만, Starling 프레임워크가 어떤 형태로 개발할 수 있는가 직접 볼 수 있는데 의의가 있겠다.

다른 데모는 아래 링크를 통해 보도록 하자.
http://www.starling-framework.org/demo/index.html

만약 입자 시스템에 대한 확장 기능이 필요하다면 다음 링크를 참고하자.

입자시스템 소스 : https://github.com/PrimaryFeather/Starling-Extension-Particle-System
입자시스템 데모 : http://www.bytearray.org/?p=3431

Flash Player 11이 AIR 3.0과 더불어 곧 나올 기세이다. 이런 프레임워크는 이들 플랫폼에 쉽게 대응하는데 큰 도움이 될 것이다. 꼭 한번 테스트라도 해보는게 좋을 것 같다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/786)

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Away3D 4.0 으로 만들어본 지구 (0)	2011/11/17
Flash Player 11 3D 용어 정리 (3)	2011/10/18
Starling Framework - 2D GPU 가속 렌더링 플래시 게임 엔진 (1)	2011/09/23
Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material (0)	2011/08/01
1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발 (8)	2011/07/16
[ACC 기술세미나]Adobe Flash Builder 4.5 환경에서 Molehill 3D를 이용한 개발소개 (5)	2011/05/29

픽셀벤더(Pixel Bender)에 대한 나름 간단 정리

지돌스타 — Thu, 22 Sep 2011 14:56:42 +0900

플래시에서 픽셀벤더(Pixel Bender)를 사용할 때 기억해둬야 할 것을 의미없이 나열 정리를 한 것이다.

플래시에서 사용하는 픽셀벤더

- 픽셀벤더를 만들어 컴파일된 pbj는 플래시에서 엠베드하거나 동적으로 로드할 수 있다.

- 픽셀벤더의 문법은 GLSL(OpenGL Shading Language) 기반이다.

- 픽셀벤더 그래프(Pixel Bender Graph)는 개개의 픽셀 프로세싱 운영 위한 XML 언어이다. 플래시에서는 지원되지 않는다.

- 픽셀벤더의 소스는 PBK 파일로 작성되며 PBJ로 컴파일 된다. 이것을 플래시에서 동적으로 로드하거나 엠베드해서 사용할 수 있다.

- 픽셀벤더는 GPU에서 동작하도록 디자인 되었지만 플래시에서는 CPU에서 동작하도록 제한되어 있다.

- 픽셀벤더는 픽셀벤더 툴킷(Pixel Bender ToolKit)이라는 도구를 사용해 개발할 수 있다. 플래시 빌더에서 개발한다면 PBDT 플러그인을 설치해 사용하면 훨씬 쉽게 개발할 수 있다.

- 플래시에서는 동적으로 로드하거나 엠베드된 pbj를 Shader 클래스로 랩핑해서 사용한다.

- 플래시에서 픽셀벤더의 용도는 빠른 Filters, Fills, Blend modes,Calculation에 있다.

- 용도를 Fill로 하는 경우 beginShaderFill을 이용해 Shader를 적용할 수 있다.

- 용도를 Filter로 하는 경우 ShaderFilter를 통해 디스플레이 객체에 filters에 적용시킬 수 있다. 이 경우 픽셀벤더로 전달되는 입력값은 자동적으로 디스플레이 객체의 비트맵 데이터가 된다. 즉, 따로 입력을 설정할 필요가 없다.

- 용도를 Blend mode로 하면 디스플레이 객체의 blendShader 속성에 적용할 수 있다.

- 용도를 Calculation으로 하면 수학적인 계산에 응용할 수 있다.

- ShaderJob을 사용하면 별도의 스레드 위에 Shader를 구동시킬 수 있다. 입력과 출력을 꼭 비트맵으로 지정할 필요가 없다. Vector나 ByteArray값을 입출력으로 만들 수 있다.
- ShaderJob은 한번에 두개 이상 독립적으로 구동될 수 없다. ShaderJob을 여러개 만들어 start(false)를 하더라도 첫번째 ShaderJob이 모두 끝난 다음에야 다음 ShaderJob을 구동할 수 있다.

- 다양한 파라미터를 입력받을 수 있다. float1, float2, float3, float4, ...등 하지만 Array는 받을 수 없다.

- 입력은 3개까지 지원한다., 출력은 무조건 1개이다.

- 입력 타입은 image1, image2, image3, image4 로 총 4개 채널까지 커버한다.

- 입력으로 들어가는 n x m의 크기 제약은 ... 이다.

- 입력은 image# 형태이기 때문에 이미지가 아닌 Vector나 ByteArray를 입력하는 경우에는 이미지의 폭과 높이에 맞는 데이터가 들어오도록 맞춰야한다. 즉 데이터 수 = n x m (n, m은 정수)이어야 한다. n, m의 크기는 제약이 있기 때문에 m을 1로 정해버리고 하면 런타임 에러가 날 수 있으므로 주의하자.

- 플래시에서 이미지가 입력값인 경우 각 채널당 8비트만 지원한다. 하지만 입력이 ByteArray나 Vector인 경우에는 각 채널당 32비트를 그대로 지원한다. 이런게 다 자동으로 해준다.. 완전 편리

- 플래시에서는 1x1 정방형의 픽셀만 사용한다. pixelSize() 함수는 항상 (1.0, 1.0)만 반환하여, pixelAspectRatio()는 항상 1.0만 반환한다.

- 출력은 무조건 1개이며 pixel3, pixel4와 같이 3, 4개 채널로 제한된다. pixel1, pixel2와 같은 채널을 출력으로 설정할 수 없다.

- 플래시에서는 사용되는 픽셀벤더는 for 문을 사용할 수 없다.

- 픽셀벤더 커널에는 반드시 evaluatePixel() 함수가 정의되어야 한다.

- Flash에서 사용하는 경우 Region 함수 및 커스텀 지원 함수나 라이브러리를 사용할 수 없다.

- if/else을 사용할 수 있다. 하지만 이 방법은 픽셀단위로 계산하는 픽셀벤더 특성상 매우 느리다.

- evaluatePixel() 밖에 const지정을 할 수 있습니다. 하지만 느리므로 지양해야 한다.

- 플래시에서는 dependant를 지정할 수 없습니다.

- evaluatePixel()는 출력크기 기준으로 반복된다. ShaderJob을 사용하는 경우 따로 출력크기를 설정할 수 있는데 이것은 ByteArray나 Vector로 출력해야하는 경우로 제한된다.

- 출력의 크기로 반복되기 때문에 입력의 크기와 다른 경우 플래시에서 for문을 지원하지 않으므로 데이터 처리가 불가능하다.

- 다양한 수학함수를 사용할 수 있다. sin, cos, tan, asin, acos, atan, exp, log, log2, inverseSqrt, sign, floor, ceil, fract, pow, sqrt, fract, mod, min, max, step, clamp, mix, smoothstep, 등

- 다양한 지오메트릭 함수를 지원한다. length, distance, dot, cross, normalize, mztrixCompMult, lessThan, lessThanEqual, greaterThan, greaterThanEqual, equal, notEqual, any, all, not 등

- 다양한 오퍼레이터를 지원한다. +, -, *, +=, -=, =, &&, ||, ^^, ! , <, >, <=, >=, !=, ?:

- Vector, matrix를 접근시 [index] 형태로 하나의 요소에 접근할 수 있다. 플래시에서는 Array는 지원하지 않는다.

- 샘플링 함수를 통해 각 픽셀정보를 얻어올 수 있다. sample(), sampleLinear(), sampleNearest() 등

- pixel4의 경우 pixel[0]나 pixel.r, pixel.x, pixel.s와 동일하다. pixel.rgb, pixel.xwzw, pixel.stuv 임을 기억하자.
- 픽셀벤더의 사용법을 익혀두면 픽셀벤더3D 학습시에도 도움이 된다.

픽셀벤더 처음 공부할때 반드시 볼 내용

픽셀벤더에 대한 학습이 필요할 때 아래 링크는 꽤 유용할 것이다.

- 픽셀벤더 개발자 센터

- 픽셀벤더 레퍼런스

- 픽셀벤더 개발자 가이드

- 플래시 픽셀벤더 셰이더를 사용한 작업 소개

- PBDT(Pixel Bender Development Tools) 이클립스 플러그인

- Using Pixel Bender to calculation information

- 수치 계산을 을 위해 플래시 빌더에서 픽셀벤더 사용

- 플래시에서 픽셀벤도 사용 소개

- 플래시 플레이어와 픽샐벤더를 사용해 bilinear resampling

- 픽셀벤더에서 Vector와 Bytearray 입력처리

- 픽셀벤더와 플래시 플레이어 10의 쉐이더 소개

- 픽셀벤더와 액션스크립트의 속도 비교. 픽셀벤더에서 if문을 쓰면 안되는 이유 포함
- 알키미(Alchemy)와 픽셀벤더를 이용한 3D 공간상 30만개 픽셀 렌더링(소스 포함)
- joa의 위 링크에 대한 반박(as3만으로, 결국 픽셀벤더만이 능사는 아니라는 이야기)

글쓴이 : 지돌스타(http://blog.jidolstar.com/785)

'Adobe Flash Platform' 카테고리의 다른 글

Pixel Bender + TextMate 소개 (1)	2011/09/26
픽셀벤더(Pixel Bender)에 대한 나름 간단 정리 (0)	2011/09/22
파워플에 PixelBender 에 대한 연재를 시작합니다. (1)	2011/09/16
2회 Adobe Flash Platform e세미나 - 모바일 개발 (5)	2011/08/18
Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰 (1)	2011/08/04
Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전 (4)	2011/07/21

파워플에 PixelBender 에 대한 연재를 시작합니다.

지돌스타 — Fri, 16 Sep 2011 15:18:35 +0900

파워플에 픽셀벤더에 대한 글을 적기 시작했습니다. 픽셀벤더의 활용을 주제로 뭔가 다른 시각에서 유용한 정보를 소개하고 찾아가는 것이 이 연재의 목적이 될 것 같습니다. ^^

PixelBender의 활용 #1 : http://powerfl.com/?p=2477

글쓴이 : 지돌스타(http://blog.jidolstar.com)

'Adobe Flash Platform' 카테고리의 다른 글

Pixel Bender + TextMate 소개 (1)	2011/09/26
픽셀벤더(Pixel Bender)에 대한 나름 간단 정리 (0)	2011/09/22
파워플에 PixelBender 에 대한 연재를 시작합니다. (1)	2011/09/16
2회 Adobe Flash Platform e세미나 - 모바일 개발 (5)	2011/08/18
Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰 (1)	2011/08/04
Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전 (4)	2011/07/21

2회 Adobe Flash Platform e세미나 - 모바일 개발

지돌스타 — Thu, 18 Aug 2011 13:51:48 +0900

지난달에 이어 제 2회 Adobe Flash Platform e세미나가 있습니다. 발표자는 ACC로 활동중이시며 NHN에서 근무하시는 오창훈 선임님이시고요. 모바일 앱 개발하는 다양한 방법에 대해서 약 1시간 가량 설명해주실 겁니다.

일정은 2011년 8월 26일(금) 저녁 7시에 있고요. 등록은 다음 링크에서 초청장을 받으시면 됩니다.

http://acrobatpdf.com/webinar/randing/index0826.html

여러분은 이 세미나를 통해 Flash기반에서 하나의 프로젝트로 아이폰, 아이패드, 안드로이드 어플을 동시에 만들 수 있는 기초를 배울 수 있습니다.

1회때 처럼 퀴즈를 통해 소정의 상품도 있을 것 같네요.

많은 참여 부탁드려요 ^^

'Adobe Flash Platform' 카테고리의 다른 글

픽셀벤더(Pixel Bender)에 대한 나름 간단 정리 (0)	2011/09/22
파워플에 PixelBender 에 대한 연재를 시작합니다. (1)	2011/09/16
2회 Adobe Flash Platform e세미나 - 모바일 개발 (5)	2011/08/18
Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰 (1)	2011/08/04
Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전 (4)	2011/07/21
Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준 (0)	2011/07/21

칠월칠석을 담은 네이버 로고 (견우와 직녀가 만나는 그날)

지돌스타 — Sat, 06 Aug 2011 10:46:44 +0900

위 로고는 오늘 올라온 네이버 로고입니다. 칠월칠석을 맞이해 염소자리와 거문고자리가 들어간 이쁜 로고네요. 밤하늘을 좋아하는 저로써는 저런 로고가 너무 좋답니다. 이 로고를 보면서 작년 생각이 나네요.

지난해 이맘쯤 네이버의 로고가 아래 처럼 나온적이 있었습니다.

별보는 것을 좋아하는 저는 위 그림에서 별자리가 잘못되었다는 것을 바로 알 수 있었습니다. 즉, 위 그림에는 독수리자리와 거문고자리가 나왔는데 실제로는 염소자리와 거문고자리가 나와야 했던 겁니다. 문제가 되던 것은 견우는 독수리의 알파성 알타이르(α별)가 아니라 염소의 다비흐(β별)라는 점입니다. 직녀는 거문고의 베가(α별)이죠.

이 문제를 네이버에 지적하기 위해 글을 적어서 메일도 보냈고 아래와 같은 글도 적었었죠.

네이버에 올라온 로고입니다. 칠월칠석을 맞이해 로고를 바꿨네요.

그러나 문제점이 있어요.

동양에서 말하는 견우와 직녀는 각각 염소자리의 다비흐(β별)와 거문고자리의 베가(α별)입니다.

하지만 많은 사람들이 견우성이 독수리자리의 알타이르(α별)로 알고 있습니다.

네이버 로고에 그려져 있는 별자리는 독수리자리와 거문고자리입니다.

말했듯이 왼쪽 독수리 자리 대신해 염소자리를 그렸어야 했습니다.

아래는 스타플 별지도에서본 다비흐입니다. 이게 바로 견우입니다.

3등성으로 1등성인 알타이르에 비해 많이 어둡죠.

사람들은 왜 다비흐(진짜견우)를 두고 독수리자리의 알타이르(가짜견우)를 견우성이라고 했을까요?

제 생각에서는 가짜견우인 알타이르가 직녀로부터 은하수를 거쳐 실제 견우인 다비흐와 비슷한 방향에 있는데다가 다비흐가 많이 어두워서 훨씬 밝은 알타이르가 눈의 잘띄기 때문에 그랬을거라는 추측을 합니다.

보통 일반인들은 모르겠지만 별에 대해서 관심이 있는 분이라면 그냥 넘기지 않을거라는 생각이 드네요.

직녀성 : http://100.naver.com/100.nhn?docid=74104

견우성 : http://100.naver.com/100.nhn?docid=9341

거문고자리 : http://astronote.org/board/index.php?section=&print=&menu=7253&table_name=88&job=view&idx=26432

염소자리 : http://astronote.org/board/?table_name=88&job=view&idx=26448

그런 다음에 몇시간 지난뒤 아래처럼 바뀌었습니다.

그 다음에 네이버 측에서 감사하다는 말과 선물도 받았습니다.

아무튼 이 일로 여러가지를 깨달았습니다. 이런 나의 지식이 공익에 도움이 되니 기분이 좋다는 생각이 들었고 그것을 적극 활용해야겠다는 다짐을 했고요. 또 하나는 서비스를 만들어가는 입장에서 네이버의 고객대응자세였습니다. 철저하고 발빠른 검토끝에 자신들의 잘못을 인정하고 고객을 대응한다는 점이였습니다. 이러한 점은 서비스를 만들어가는 제 입장에서 비출때 배워야 하는 점이기도 했습니다. 물론 환경은 많이 다르긴 하지만요.

아무튼 저 로고를 보니 지난 날이 생각이 나네요. ㅎㅎ

근데... 정말 견우와 직녀가 만나는 걸까요?

'천문학 > 천문학 유용정보' 카테고리의 다른 글

칠월칠석을 담은 네이버 로고 (견우와 직녀가 만나는 그날) (2)	2011/08/06
[천문/우주]일본 국립천문대에서 제공하는 종이공예 (2)	2009/12/21
[천문/우주]일본 문부과학성에서 제공하는 우주도(宇宙圖) (0)	2009/12/21
기네스북 도전! 한 장소에서 천체망원경 400대. 대규모 별축제 (0)	2009/10/26
이번 주말에 수성을 보자. (2)	2009/05/15
[천문]달사진 촬영법 (0)	2009/05/15

Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰

지돌스타 — Thu, 04 Aug 2011 17:43:04 +0900

Flex 4.5 또는 ActionScript 3.0 기반으로 제작한 아이폰, 안드로이드 어플 내에서 Youtube 동영상은 어떻게 하면 보여줄 수 있을까?

방법 1 : ActionScript 3.0 API 활용
PC에서 Flash/AIR 환경에서 동작하는 앱이라면 Youtube 동영상을 보여주는 방법은 간단한 편이다. 방법은 YouTube는 ActionScript 3.0 기반 API Reference를 제공하고 있다.

http://code.google.com/intl/ko-KR/apis/youtube/flash_api_reference.html

위 문서에 있는 예제를 보면 알겠지만 라이브러리를 별도로 swc로 배포하지 않고 Loader를 이용해 Youtube 영상을 렌더링할 수 있는 swf를 컨텐츠로 로드해 접근해 사용하도록 하고 있다. 이 방법은 PC환경에서 Flash Player 또는 AIR로 만들때 전혀 문제가 되지 않는 방법이다. 게다가 UI를 새로 구성할 수 있다는 장점도 있다.

Flex를 이용해 안드로이드 모바일 어플을 만드는 경우에 위 방법을 사용할 수 있다. 다음 링크를 참고하길 바란다.

Create a YouTube Player for Android using Flash Builder 4.5 : http://goo.gl/QFMC9

하지만 제작후 iOS에서 동작시키면 제대로 동작하지 않는다. Flash CS 5.5나 Flash Builder 4.5 기반에서 만든 안드로이드 앱은 기본적으로 안드로이드 OS 2.2(프로요) 환경에서만 동작하며 AIR 런타임이 설치되어야만 실행이 가능하다. 즉 AIR라는 가상머신 기반에서 동작하기 때문에 YouTube SWF를 로드해서 동작하는데 문제가 없는 것이다. 하지만 iOS 앱은 AIR기반이 아니다. iOS Native 기반으로 컴파일 되기 때문에 YouTobe SWF를 로드해 동작시키는 것 자체가 지원되지 않는다.

그러므로 안드로이드, iOS 환경에서 모두 Youtube 동영상을 볼 수 있도록 하기 위해서는 다른 방법을 취해야한다.

방법 2 : URL scheme 활용
URL Scheme라는 개념이 있다. navigateToURL(new URLRequest("sms:01032223211")) 처럼 호출하면 문자를 보내는 어플이 실행된다. YouTube도 동일하게 navigateToURL(new URLRequest("http://www.youtube.com/v/{youtubeId}")) 처럼 하면 해당 동영상을 볼 수 있다. 안드로이드든, iOS이든 모두 외부 YouTube 어플이 실행되면서 자동으로 동영상이 시작된다. 하지만 이 방법도 안드로이드의 경우에는 폰상에 back버튼만 뒤로 가는 반면, iOS는 뒤로 버튼이 없기 때문에 background에서 실행되는 원래 어플을 다시 active시켜줘야한다. 어플을 이렇게 만들고 배포하면 욕 먹을거다. ㅎㅎㅎ

방법 3 : StageWebView 활용

결국, 안드로이드, iOS 모두 Youtube 동영상을 감상할 수 있도록 하기 위해 마지막으로 선택한 방법은 StageWebView이다. StageWebView는 AIR 2.5부터 지원하며 현재 Flash CS 5.5, Flash Builder 4.5에서는 AIR 2.6 이상 개발을 지원하므로 어렵지 않게 개발환경을 만들 수 있다. StageWebView는 다른 디스플레이 객체가 아니기 때문에 addChild 등으로 자식으로 추가될 수 없다. StageWebView.stage 속성에 기반 stage를 참조시킴으로써 화면에 렌더링 된다.

Flex 기반에서 컴포넌트 형태로 사용할 수 있도록한 클래스가 아래 링크에 있으니 참고바란다.

Using StageWebView within a UIComponent in Mobile : http://goo.gl/wPDdp

위 링크에서 제공하는 클래스를 이용하면 어렵지 않게 Flex로 만든 모바일 어플에 활용할 수 있다. View전환시 snapshot mode를 사용하면 자연스러운 화면전환이 가능하므로 참고바란다. 필자는 아래 View 소스처럼 StageWebView를 참고했다. 중간에 Youtube 동영상을 보기 위해 웹페이지 주소로 http://m.youtube.com/watch?v=youtubeId 를 넘겨주고 있다. BusyIndicator 컴포넌트를 활용한 것도 눈여겨 보길 바란다.

<?xml version="1.0" encoding="utf-8"?>
<!-- 
	Youtube 동영상 보기를 위한 StageWebView
	참고 : http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:components="com.jidolstar.mobile.components.*" 
		title="{(data as YoutubeEntry).title}"
		backKeyPressed="webview_snapshotMode()"
		viewActivate="view1_viewActivateHandler(event)"
		viewDeactivate="view1_viewDeactivateHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			import spark.events.ViewNavigatorEvent;
 
			import valueObjects.YoutubeEntry;
 
			/**
			 * 뒤로 버튼 처리 
			 */ 
			protected function btnBack_clickHandler(event:MouseEvent):void
			{
				webview_snapshotMode();
				this.navigator.popView();
			}
 
			/**
			 * StageWebView 위치 변경이 곧 일어날때 
			 * HTML 내용으로부터 위치변경이 사작될때만 해당함
			 * historyBack(), historyForward(), historyGo(), loadString(), loadURL(), reload() 등의 함수를 통해서는 이벤트 전달이 되지 않음
			 * @see http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html#event:locationChanging  
			 */ 
			protected function stageWebView_locationChangingHandler(event:LocationChangeEvent):void
			{
				spinner.visible = true;	
				stageWebView.hideWebView();
			}
 
			/**
			 * StageWebView 위치 변경이 되었을때 
			 * location 속성이 변경되면 무조건 전달됨 
			 * @see http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html#event:locationChange
			 */ 
			protected function stageWebView_locationChangeHandler(event:LocationChangeEvent):void
			{
				spinner.visible = true;	
				stageWebView.hideWebView();
			}
 
			/**
			 * StageWebView 로드 작업이 완료되었을때 
			 * loadString() 또는 loadURL() 메서드에서 요청한 마지막 로드 작업 완료시 전달 
			 * @see http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html#event:complete
			 */ 
			protected function stageWebView_completeHandler(event:Event):void
			{
				spinner.visible = false;	
				stageWebView.showWebView();
			}
 
			/**
			 * StageWebView 오류가 발생했을때 
			 * @see http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html#event:error
			 */
			protected function stageWebView_errorHandler(event:ErrorEvent):void
			{
				spinner.visible = false;	
				stageWebView.showWebView();
			}
 
			/**
			 * StageWebView Snapshot Mode로 변경됨
			 * 이것은 StageWebView를 BitmapMode로 바꿔. 뒤로가는 애니메이션 처리시 화면전환 모습을 보여주기 위함이다. 
			 */ 
			protected function webview_snapshotMode():void
			{
				//stageWebView.hideWebView();
				//return;
				if(stageWebView.snapshotMode === true) 
				{
					return;
				}
				stageWebView.snapshotMode = true;
			}
 
 
			/**
			 * 유투브의 모바일 영상 페이지를 보여주도록 유도  
			 */ 
			private function loadPage():void 
			{
				var entry:YoutubeEntry = data as YoutubeEntry;
				var youtubeId:String = entry.media_group.yt_videoid;
				var url:String = "http://m.youtube.com/watch?v=" + youtubeId;
 
				//spinner를 보여줘 로딩중임을 표시 
				spinner.visible = true;
				stageWebView.hideWebView();
 
				//이전 location과 같으면 다시 리로드 시킨다.
				if(stageWebView.source == url) 
				{
					stageWebView.reload();
				} 
				//이전 Location과 다르면 url 반영 
				else 
				{
					stageWebView.source = url;
				}
			}
 
			/**
			 * View가 Active될때 페이지 로드 요청 
			 */ 
			private function view1_viewActivateHandler(event:ViewNavigatorEvent):void
			{
				loadPage();
			}
 
			/**
			 * View가 Deactive될때 stageWebView를 감춘다. 
			 */ 
			private function view1_viewDeactivateHandler(event:ViewNavigatorEvent):void
			{
				stageWebView.hideWebView();
			}
 
 
		]]>
	</fx:Script>
 
	<!-- 뒤로 버튼 -->
	<s:navigationContent>
		<s:Button id="btnBack" label="Back" click="btnBack_clickHandler(event)"/>
	</s:navigationContent>
 
	<!--
		StageWebView기반 Flex 컴포넌트 
		참고 : http://www.judahfrangipane.com/blog/2011/01/16/stagewebview-uicomponent/ 
	-->
	<components:WebView left="0" right="0" top="0" bottom="0"
						id="stageWebView" 
						locationChanging="stageWebView_locationChangingHandler(event)"
						locationChange="stageWebView_locationChangeHandler(event)"
						complete="stageWebView_completeHandler(event)"
						error="stageWebView_errorHandler(event)"
						/>
 
	<!-- 로드 중임을 표시하기 위해 사용 -->
	<s:BusyIndicator id="spinner" horizontalCenter="0" verticalCenter="0"/>
</s:View>

이렇게 아이유 동영상 페이지가 예쁘게 나와준다. ^^

정리하며

이러한 테스트는 굉장히 어려운 편이다. 개발시 ADT를 이용한 테스트는 위 예제처럼 각 디바이스 별 특성에 의존하는 것까지 알기에는 부족하기 때문이다. 그래서 결국 디바이스 별로 테스트 해야하는데, 안드로이드의 경우에는 그나마 테스트가 용이한 편이나 아이폰, 아이패드의 경우에는 iTunes를 거쳐야하기 때문에 디바이스 테스트는 정말 귀찮은 작업이다. 하나의 개발환경으로 멀티스크린 개발을 한다는 것은 말처럼 쉬운 것은 아니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/781)

'Adobe Flash Platform' 카테고리의 다른 글

파워플에 PixelBender 에 대한 연재를 시작합니다. (1)	2011/09/16
2회 Adobe Flash Platform e세미나 - 모바일 개발 (5)	2011/08/18
Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰 (1)	2011/08/04
Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전 (4)	2011/07/21
Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준 (0)	2011/07/21
제8회 플래시 커뮤니티 컨퍼런스 : "3D In Flash" 발표자료를 공유합니다. (5)	2011/07/10

Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material

지돌스타 — Mon, 01 Aug 2011 17:59:13 +0900

Away3D 4.0을 시간날때마다 종종 관심있게 해보고 있습니다. GPU 렌더링이 Flash Player 11부터 가능해짐에 따라서 3D 렌더링에 대한 기존 방식이 완전 바뀌어 Away3D도 기존 3.6버전의 내부구현형태가 싹 바뀌었습니다. 하지만 이것을 응용하는 개발자는 그것에 개의치 않고 개발할 수 있다는 것이 Away3D와 같은 라이브러리가 주는 매력이 아닐까요?

각설하고...
Flash Player 11 beta가 지난 7월 초중순에 배포됨에 따라 기존에 Flash Player 11 Incubator에서 동작하던 데모 예제들이 동작하지 않게 되었습니다. 가장 큰 이유는 Stage3D의 viewport 속성이 없어졌기 때문입니다. 대신 Stage3D에 x, y 속성이 추가 되었고 Context3D의 configureBackBuffer()메서드에서 width, height를 지정하도록 했습니다. configureBackBuffer()는 이전부터 있던거라 Stage3D.viewport를 통해 width, height를 지정하고 또 configureBackBuffer()에도 지정하는 것은 논리적으로 맞지 않다고 판단했나봅니다. 그러면서 viewport 속성이 없어졌겠죠.

아무튼 Flash Player 11 beta에 viewport속성이 없어짐으로 기존에 예제들이 무용지물(?) 되어버리면서 발만 동동구르고 있다면 문제겠죠?

Away3D 4.0은 github에 오픈소스로 올라와 있습니다.

https://github.com/away3d

여기서 여러분은 원하신다면 가장 최신 Away3D 4.0 라이브러리와 데모예제들을 받아서 테스트 해볼 수 있지요.

Public Repositories에 보면 away3d-core-fp11이 있습니다. 이게 Flash Player 11 beta에 맞춘 라이브러리입니다. 즉 Stage3D.viewport속성이 없어진 것에 대응되어 있는 버전인데다가 끊임없이 업데이트 되고 있는 버전입니다. 지금 이 글을 쓰는 시점에서 겨우 16시간 전에 마지막 업데이트가 있었습니다.

그리고 예제는 away3d-exampes-broomstick에 방문하시면 있습니다. 제가 예전에 세미나해서 보여줬던 예제들보다 훨씬 많이 있습니다.

github에 있는 소스는 Eclipse를 사용하시는 개발자라면 Egit 플러그인을 설치하셔서 가장 최신버전을 언제든지 테스트 해볼 수 있습니다. Egit사용하는 법은 인터넷을 통해 알아보시고요~

요즘 Away3D 4.0에 관해 Scene Graph 구조 및 Material 및 Geometry 공유에 대한 따끈따끈한 글을 접했습니다. 여러분은 아래 링크를 통해 이 글들을 접할 수 있어요.

- The Away3D 4.0 Scene Graph Architecture 1: Node Types

- The Away3D 4.0 Scene Graph Architecture 2: Meshes and Geometries

- Building efficient content in Away3D 4.0: Sharing Materials & Geometries

Away3D 4.0 기반으로 다양한 컨텐츠를 생산하면서 퍼포먼스는 매우 중요한 사항일겁니다. 위 글들은 퍼포먼스 향상에 직접적인 영향을 줄 수 있는 지식입니다. 꼭 참고하세요.

Scene Graph에 대해서 위 글을 접하고 처음 알았습니다. 그러다가 검색해봤는데, 꽤 어렵더군요.
- Secne Graph Rendering

아무튼 저는 Scene Graph를 이해하기를 일단 Scene는 GPU에 렌더링할 3D 객체들을 예약시키는 일을 할겁니다. 그럼 Scene에 붙은 자식들은 아래와 같은 그림처럼 구조를 가집니다. 여기서 검은색 화살표는 Scene Graph의 상속구조이고 흰색은 Mesh 및 Geometry 구조입니다. 이런 구조의 3D 관련 객체 및 정보를 GPU에 렌더링할 넘이다라고 예약하고 여러 로직에 따라서 변환(transform) 정보를 전달하여 렌더링합니다. 더 공부해봐야겠지만 일단 이렇게 이해하고 공부하려고요. ^^

위에서 소개한 글에서 Mesh, Geometry는 각각 메쉬, 기하구조라고 해석할 수 있습니다. Mesh는 하나의 기하구조를 가지고 있죠. 실제로 Geometry클래스가 그것을 담당합니다. Geometry에는 여러개의 SubGeometry를 담고 있고 애니메이션 정보 및 스케일 정보들을 담습니다. SubGeometry는 정점(Vertex), UV, 인덱스(index), 법선(normal)등 3D객체를 표현하기 위한 기존 정보들을 담고 있습니다. 즉 Mesh는 여러개의 SubGeometry를 담을 수 있죠. 가령 자동차하나를 표현할때 바퀴 SubGeometry, 외부프레임 SubGeometry, 문 SubGeometry등으로 나뉠 수 있겠죠. Mesh는 실제 3D 객체가 되는 것으로 기하구조 정보와 재질(Material)을 함께 가집니다. 이런 구조를 가지는 것은 결국 구조적 접근의 편리함과 적은 정보를 GPU에 던져줌으로써 퍼포먼스를 향상시키려는 의도가 아닌가 생각합니다.

글 내용을 보시면 재질(Material)과 기하구조(Geometry)도 같은 것이라면 clone처리해서 재사용하는게 퍼포먼스 향상에 유리하다고 했습니다. 글에 아주 적절한 예제가 있으니깐요. 여러분들도 테스트 해보시길 바랍니다.

Flash Builder 4.5 환경에서 테스트하는 방법은 제가 3번이나 세미나를 해왔기 때문에 자료는 충분합니다. 참고하세요.
http://blog.jidolstar.com/778

사실 쭉 분석해서 글하나 만들까 하다가 요즘 글쓰는게 압박이라... ㅎㅎ

글쓴이 : 지돌스타(http://blog.jidolstar.com/780)

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Flash Player 11 3D 용어 정리 (3)	2011/10/18
Starling Framework - 2D GPU 가속 렌더링 플래시 게임 엔진 (1)	2011/09/23
Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material (0)	2011/08/01
1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발 (8)	2011/07/16
[ACC 기술세미나]Adobe Flash Builder 4.5 환경에서 Molehill 3D를 이용한 개발소개 (5)	2011/05/29
[Flash] Molehill을 이용한 2D 렌더링 (27)	2011/04/21

Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전

지돌스타 — Thu, 21 Jul 2011 11:45:05 +0900

Flash Player 11 및 AIR 3.0등 차세대 Flash Platform 기반을 위한 레퍼런스이다. Flash Player 11과 AIR 3.0은 아직 Beta 버전이지만 개발자들에게 이 문서는 앞으로 대비하기 위해 필요한 유용한 자료가 될 것이다.

http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/index.html

참고
1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발 : http://blog.jidolstar.com/778
Adobe Flash Player 11 Beta for Desktop : http://goo.gl/s0NOx
Adobe AIR 3 Beta for Desktops : http://goo.gl/09PP9

글쓴이 : 지돌스타(http://blog.jidolstar.com/779)

'Adobe Flash Platform' 카테고리의 다른 글

2회 Adobe Flash Platform e세미나 - 모바일 개발 (5)	2011/08/18
Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰 (1)	2011/08/04
Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전 (4)	2011/07/21
Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준 (0)	2011/07/21
제8회 플래시 커뮤니티 컨퍼런스 : "3D In Flash" 발표자료를 공유합니다. (5)	2011/07/10
Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치 (17)	2011/06/27

Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준

지돌스타 — Thu, 21 Jul 2011 10:37:40 +0900

Flash Builder 4.5.1에는 Flex SDK 4.5.1기반으로 개발 할 수 있으며 이 SDK는 Adobe AIR 2.6 을 지원하고 있다. 하지만 AIR 2.7기반으로 iOS 앱을 만들때 퍼포먼스 차이가 상당히 차이가 나므로 AIR 2.7로 업그레이드 시켜 개발하는 것이 더 좋을 것이다. 다음 글을 보면 AIR 2.7에 대해서 좀더 이해할 수 있을 것이다.

Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다!

항상 그렇듯, 개발은 하고 싶은데 못하는 가장 큰 이유는 어떻게 하는지 몰라서이다. 그것을 찾기 위해서 자료를 찾고 책을 봐야하는데, 특히나 최신기능 및 툴이 나올때마다 또 연구에 대한 압박이 있다. 데모 및 예제들은 수도없이 나오는데... 근데 그거 어떻게 개발하는데에 대한 답변은 찾기가 쉽지 않은게 사실이다. 이 부분에 대해서 약간의 수고를 덜어주고자 이 글을 작성했다. ^^

1. Flash Builder 4.5.1로 설치/업그레이드 하기
AIR 2.7을 사용하기 전에 Flash Builder 4.5를 4.5.1로 업그레이드 하길 바란다.

Flash Builder 4.5.1로 업그레이드 하는 방법은 다음과 같다.

1. Flash Builder 4.5를 다운로드 받아 설치한다.
Adobe Flash Builder 4.5 Premium Try 버전을 다운로드 받는다.

2. (현재는 이 부분이 필요없음)Flash Builder 4.5를 4.5.1로 업데이트 한다.
Help > Search For Flash Builder Updates... 로 업데이트 하면 되겠다.
또는 Adobe Flex Support Center 에서 직접 다운받아 Updater를 설치한다.

참고로 Flash Builder 4.5.1로 설치후 Eclipse 플러그인으로 설치를 원하시는 분은 다음글을 참고하길 바란다.

Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치 http://blog.jidolstar.com/774

2. Flash Builder 4.5.1에 AIR 2.7 SDK 설치

윈도우 기준으로 설명하겠다. Mac에서는 파일덮어쓰기 개념이 윈도우와는 다르므로 아래글을 참고하면 되겠다.

Mac에서 AIR 2.0 Beta 개발환경 만들기 http://blog.jidolstar.com/626

1. AIR 2.7 SDK을 다운로드 받고 압축을 풀자.
http://www.adobe.com/products/air/sdk/
2. {Flash Builder 4.5 설치경로}/sdks/4.5.1 을 복사해서 같은 폴더에 붙어놓자.
3. 복사한 폴더의 이름을 "4.5.1 with AIR 2.7" 로 바꾸자.
4. 받은 AIR 2.7 SDK 안에 내용을 전부 복사해서 "4.5.1 with AIR 2.7" 내부에 덮어쓰자. (맥 사용자의 경우에는 덮어쓰면 폴더가 대치되므로 이 방법으로 하면 안됩니다.)
5. 이것으로 AIR 2.7을 개발할 수 있는 Flex 4.5.1 SDK가 만들어진 것이다.

3. Flash Builder 4.5.1에서 AIR 2.7 SDK 개발환경 만들기

Flash Builder 4.5.1는 기본적으로 Flex 4.5.1을 기본 SDK로 설정되어 있다. 앞서 AIR 2.7을 지원하는 Flex 4.5.1 SDK를 사용하기 위해서 Flash Builder 에서 간단한 설정이 필요하다.

1. Flash Builder 4.5.1을 실행한다.
2. 메뉴에서 Window > Preperences 로 들어간다.
3. 아래 화면처럼 Preperences 설정창에서 Flash builder > Installed Flex SDKs를 선택한다. 현재 Flex 4.5.1이 기본 SDK로 설정되어 있음을 알 수 있다. Add 버튼을 누른다.

4. Browse... 버튼을 눌러 "{Flash Builder 4.5 설치폴더}/sdks/4.5.1 with AIR 2.7"를 찾아 Flex SDK location을 입력하고 Flex SDK name은 Flex 4.5.1 with AIR 2.7 로 수정하자. 그리고 OK를 누른다.

5. 다음 화면처럼 Flex 4.5.1 with AIR 2.7이 추가되었다. 이것을 기본 Flex SDK로 삼기 위해 Flex 4.5.1 with AIR 2.7을 체크하자. 그리고 OK버튼을 누른다.

이것으로 Flash Builder 4.5 환경에서 AIR 2.7 SDK 기반으로 개발할 수 있는 환경이 만들어졌다.

4. Flash Builder 4.5.1에서 AIR 2.7 기반 Mobile Project 만들기

1. 메뉴에서 File > New > Flex Mobile Project를 선택한다.
2. Project Name을 입력한다. Flex SDK version이 기본으로 Flex 4.5.1 with AIR 2.7로 설정되어 있다. 앞서 설정한 탓이다. 만약 다른 SDK를 사용하고 싶으면 Use a specific SDK로 바꾸면 되겠다. Next 버튼을 누른다.

3. Target platforms와 각종 설정을 한다. 아래 화면처럼 Flash Builder 4.5를 이용해 iOS, BlackBerry, Android 어플을 1개의 프로젝트로 모두 개발할 수 있음을 알 수 있다. Finish를 눌러 프로젝트를 생성하도록 하자. 필요하다면 Next 버튼을 눌러 Server Setting 및 Build Paths를 설정하면 되겠다.

4. Package Explorer에 아래처럼 MyMobileApp 프로젝트가 생성되었다. 여기 여기서도 Flex 4.5.1 with AIR 2.7을 사용하고 있음을 알 수 있다.

5. MyMobileApp-app를 두번클릭해 열어보자. 어플의 xmlns 네임스페이스가 2.7로 잡혀있다. 만약 기존에 AIR 프로젝트나 모바일 프로젝트를 만들어 이 부분에서 에러가 난다면 2.6에서 2.7로 바꾸면 문제없이 컴파일 된다.

6. MyMobileApp 프로젝트가 선택된 상태에서 Run > Run을 해보자. Run Configuration을 설정창이 뜬다.
이창은 어플을 실행할때 어떤 장치에서 실행해줄지 결정해준다. iOS, Android만 다뤄보면 일단 창내에 Name에 MyMobileApp(iOS)라고 입력하고 Target platform을 Apple iOS로 선택하자. Launch method는 2종류가 있다. 실뮬레이션하고 싶다면 On desktop을 선택한다음 Apple iPhone 4를 선택하자.(어떤것을 선택해도 상관없다. 단지 실행되는 ADL의 해상도만 다르다.) 만약 기기에 직접 쓰고 실행하고 싶다면 On device를 선택하면 되겠다. 이 경우에는 몇가지 더 설정해야한다.
Apply 버튼을 눌러 적용해두자. 만약 Run버튼을 누르면 ADL이 실행될 것이다.

Android도 추가해보자. 아래 화면처럼 Mobile Application내에 MyMobileApp(iOS)를 선택하고 마우스 오른쪽 버튼을 눌러 컨텍스트 메뉴에 Duplicate하도록 한다.

이번에는 MyMobileApp(Android)로 바꾸고 Target platform을 Google Android, Launch method를 On desktop으로 선택한다음 원하는 기기를 선택한다. Apply를 눌러 적용시키자.

이제 원하는 Configuration을 선택해서 Run버튼을 눌러 실행하면 된다.

7. Run Configuration을 통해 실행하면 아래처럼 실행아이콘 옆에 화살표를 선택하면 최근 실행된 앱이 있으므로 빠르게 테스트 해볼 수도 있겠다.

5. 디버깅 및 배포

지금까지 앱를 만들고 Desktop에서 ADL 기반으로 시뮬레이션하는 방법을 알 수 있었다. 하지만 제작한 어플을 디버깅 및 배포하지 못하면 아무 소용이 없을 것이다. 디버깅의 경우 안드로이드에서는 직접 디바이스에 연결하여 직접 디버깅을 할 수 있기 때문에 의외로 쉽다. 하지만 iOS 어플의 경우 애플 개발자로 등록되어야 하고 애플에서 제공하는 인증서를 p12로 변환한 파일과 프로비저닝 파일을 가지고 ipa을 만들어 itunes를 통해 아이폰/아이패드등에 배포후 디버깅이 가능하다. iOS 어플의 태생적인 문제때문에 이 방법외에는 없다. 결국 디바이스 디버깅 및 테스트는 안드로이드에서 하다가 최종적으로 아이폰에서 진행해보는 것이 좋겠다.

배포의 경우 안드로이드는 인증서만 만들고 이것을 가지고 apk를 만들면 된다. 그리고 안드로이드 마켓을 통해 버전을 맞추어 배포하면 된다. 아이폰의 경우 개발자 인증서와 AppStore 배포를 위한 프로비저닝 파일이 있어야 배포용 ipa로 만들 수 있다. 하지만 배포는 윈도우 환경에서는 불가능하다. 왜냐하면 애플에서 제공하고 있는 배포방식을 따르지 않으면 배포가 불가능하기 때문이다. 그래서 ipa를 배포하기 위해 맥용 개발툴인 Xcode와 함께 있는 ApplicationLoader라는 프로그램을 통해서만 배포할 수 있다.

디버깅 및 배포를 위해 다음 몇가지 정보를 참고하면 좋겠다.

맥이 있는 유저라면 인증서를 p12로 만드는데 키체인이라는 프로그램을 이용하면 된다. 하지만 맥이 없다면 다른 방법으로 p12 파일을 만들 수 있는데, 다음 링크를 참고하길 바란다.

- 개발자 인증서를 p12 파일로 변환하는 방법: http://goo.gl/DLpor

다음글로부터 안드로이드 기반에서 디바이스를 연결에 개발하는 방법을 알 수 있다.
- Flex로 쉽게 모바일 어플을 만들자. - Adobe AIR Launchpad : http://blog.jidolstar.com/717

우야꼬님의 다음 글로부터 아이폰 환경에서 개발/배포하는 방법을 알 수 있다.
- Flash Builder 4.5로 iPhone4용 듀얼 브라우져 앱 만들기 : http://goo.gl/p3n2P

아래 링크는 우야꼬 님이 만든 Flash 앱입니다. Flash Builder가 아닌 Flash CS 5.5 기반에서 만들어 배포한 것이다.
- 아쿠아알리미 - Flash로 아이폰 앱 안드로이드 앱을 동시에 개발했습니다 : http://goo.gl/iZWVp

아이폰용 어플을 개발하기 위한 전반적인 지식을 습득하기 위해 다음 링크를 참고한다.
- Packager for iPhone : http://goo.gl/qWFgS

6. Flash Platform 환경에서 모바일 개발을 위한 다양한 정보

Flash Platform 환경에서 개발을 하기 위한 정보는 이미 많이 있다. 기본적으로 Adobe의 개발자 센터의 모바일 파트에 가면 다양한 사례와 개발 방법을 학습할 수 있다.

Mobile and Devices Developer Center : http://www.adobe.com/devnet/devices.html

그중에 다음 링크들을 참고하면 학습에 도움이 될 것이다.

Reference
Flex 4.5 Mobile Apps : http://help.adobe.com/en_US/flex/mobileapps/index.html
ace

Beginning

- Build your first mobile Flex Application - Twitter Trends : http://goo.gl/fEBnE

- Flex Test Drive for Mobile : Build a mobile application in an hour #1: http://goo.gl/DCLg

- Flex Test Drive for Mobile : Build a mobile application in an hour #2 : http://goo.gl/pfRRq

- Flex Test Drive for Mobile : Build a mobile application in an hour #3 : http://goo.gl/hxuyz

- Flex Test Drive for Mobile : Build a mobile application in an hour #4 : http://goo.gl/x8eus

- Flex Test Drive for Mobile : Debug and package the application #1 : http://goo.gl/XCMHO

- Flex Test Drive for Mobile : Debug and package the application #2 : http://goo.gl/j3ERb

- Flex Test Drive for Mobile: Add application functionality #1 : http://goo.gl/1dXUH

- Flex Test Drive for Mobile: Add application functionality #2 : http://goo.gl/4yoTB

Flex Mobile skins

- Part1 : Optimized skinning basics : http://goo.gl/0VAjD

- Part2 : Handling different pixel densities : http://goo.gl/MGbyb
- Part3 : Multiplatform development : http://goo.gl/E7Jzr

- (동영상)Default Flex Mobile Theme vs. iOS Theme Concept : http://goo.gl/DJcjP

- Support multiple screen sizes and DPI values in a mobile application : http://goo.gl/9A1iZ

오픈소스

- Flexpad : http://code.google.com/p/flexpad/

배포관련

- (동영상)Build iOS Applications using Flex and Flash Builder 4.5 : http://goo.gl/MoQyv

- Packager for iPhone : http://goo.gl/qWFgS

7. 정리하며
Flash builder 4.5.1 환경에서 AIR 2.7 SDK를 이용해 아이폰 및 안드로이드용 앱을 개발하고 배포하는 방법에 대해서 전반적으로 소개했다. Flash로 앱을 만든다는 것의 큰 장점은 아무래도 기존 Flash 개발자가 언어의 제약없이 기존 개발경험으로 개발할 수 있다는 점이다. 수개월 동안 Xcode 에서 아이폰 앱 개발을 한 경험으로 비춰봤을때 안드로이드, 아이폰용 앱을 한번에 동시에 개발할 수 있다면 정말 좋겠다는 생각을 많이 가졌다. Adobe Flash Platform을 이용해 사실 이러한 것들이 가능한 것이다. 그러나 분명한 것은 장점이 있으면 제약점도 있다. 각각의 OS는 특색이 있기 때문에 각 OS에 특정적인 기능은 수행하는 것은 불가능하다. 가령 안드로이드의 C2DM이나 iOS의 APNS와 같은 Push서비스는 각 플랫폼에 의존적이다. 위젯기능도 안드로이드 의존적이기 때문에 당연히 이런 것도 개발할 수 없다. 안드로이드용으로 배포할때는 프로요이상이어야 하며 AIR가 설치되어야만 한다. 이러한 제약점과 한번의 개발로 여러 플랫폼에 배포할 수 있다는 장점을 명확히 알고서 개발하는 것은 매우 중요하다.

추가사항
이 글을 페이스북에 공유하면서 얻은 정보입니다. 아이폰 개발을 지금까지 하면서 이걸 모르고 있었다니... ㅎㅎㅎ 김병규님께 감사드린다는... 이래서 열심히 활동해야한다는 ^^

글쓴이 : 지돌스타(http://blog.jidolstar.com/776)

'Adobe Flash Platform' 카테고리의 다른 글

Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰 (1)	2011/08/04
Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전 (4)	2011/07/21
Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준 (0)	2011/07/21
제8회 플래시 커뮤니티 컨퍼런스 : "3D In Flash" 발표자료를 공유합니다. (5)	2011/07/10
Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치 (17)	2011/06/27
Adobe Flash Builder 4.5.1 로 아이폰, 안드로이드, 블랙베리 앱을 만드세요. (11)	2011/06/23

1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발

지돌스타 — Sat, 16 Jul 2011 02:06:06 +0900

2011년 7월 5일 저녁 금쪽같은 금요일 저녁에 이번 온라인 세미나에 참석해주신 분들께 진심으로 감사합니다. 이번 발표에 Q&A로 수고해주신 NHN에서 근무하시는 ACC 오창훈 선임님께 감사의 말씀 드립니다.

내용은 어떠셨는지요? 이미 경험해 보신 분들에게는 식상한 내용일지 모르겠지만 그래도 많은 분들께서 이런 분야에 관심이 많을거라는 생각이 들어서 최대한 쉽게 설명하려고 노력했습니다. 아쉽게도 시간이 모자라서 끝부분에 많은 내용을 보여드리지는 못했네요.

이번 세미나하기 전에 Flash Player 11 Beta와 AIR 3가 바로 전날에 배포가 되는 바람에 예전에 소스들이 제대로 실행이 안되는 아주 웃지못할 상황이 발생했습니다. 그것때문에 무엇이 바뀌었는지 부랴부랴 찾아서 내용을 수정했지요. Stage3D.viewport가 없어지고 Stage3D.x, Stage3D,y, Context3D.width, Context3D.height로 대체되어 기존에 나온 Flash Player 11 Incubator기반 데모들은 제대로 동작이 안되는 상황이 발생했던겁니다. 이 때문에 정말 마음 고생이 심했다는... ㅎㅎ

이번 온라인 세미나는 Flash Platform 주제로 최초로 시행했고요. Adobe Connect 기반으로 진행했습니다. 원할한 발표를 위해 해상도를 1024 기준으로 맞췄습니다. 다행히 무리 없이 진행되었던 것 같습니다.

사실 이번 발표주제는 이미 2번의 오프라인 세미나를 통해 연습을 했던 사항입니다. 하지만 온라인은 너무 느낌이 다르더군요. 뭔가... 허공에다 대고 1시간동안 혼자서 떠드는 느낌입니다. 저는 발표중간에 채팅화면은 볼 수 없거든요. ㅎㅎ 발표중간에 윈도우 정품확인창이 떴을때는 대략 난감했다는... 사실 제 노트북으로 한게 아니라 빌려서 한건데요. 이런 메시지가 나올지는 상상도 못했다는.. ㅎㅎㅎ

발표하기전 노트북에 인터넷이 안잡혀서 완전 난감했었습니다. 거의 40분 가량을 해맸다는... 알고보니 컴퓨터에 프록시 설정이 켜져 있었습니다. ㅎㅎㅎ 다행히도 세미나 30분전에 찾았죠.

발표자료를 공유하겠습니다.

Flash Player 11과 AIR 3 환경에서 3D 개발

View more presentations from Yongho Ji.

발표 PPT는 아래 링크에서 다운로드 받아가세요.

Flash_PPT_Presentation_4x3_1.pdf

아래 링크들을 참고하시면 좋겠습니다.
- Flash Player 11 Incubator ActionScript 3.0 API 문서 (임시): http://jidolstar.net/asdocs/incubator/
- Molehill 3D API (Stage3D API) 관련 유용한 링크들 : http://goo.gl/pcIzG
- Molehill Demos : http://www.leebrimelow.com/?p=2607
- Flash Player 3D의 미래 동영상 : http://2010.max.adobe.com/online/2010/MAX175_1288221804987EOHN
- Adobe Flash Platform 한국 SNS : http://facebook.com/flashplatformkr

발표때 예제로 사용되었던 소스들입니다.
- Molehill Getting Started : http://blog.naver.com/q3korea/120126463667
- Simple 2D Molehill Example : http://lab.polygonal.de/2011/02/27/simple-2d-molehill-example/
- Clear Water [Molehill Version) : http://wonderfl.net/c/enj6
- Away 3D 4.0.0 Alpha : http://away3d.com/download/
- Alternativa3D 8 : http://alternativaplatform.com/en/download8/
- ND2D Molehill 2D Engine : https://github.com/nulldesign/nd2d

위 예제 및 라이브러리들은 다음 문서를 통해 어떻게 Flash Builder 4.5.1에서 테스트 해볼 수 있는지 알 수 있습니다.
- Adobe Flash Builder 4.5에서 Molehill 3D 개발환경 및 Away3D 4.0 예제 실행방법 : http://goo.gl/uXuH2

아래 링크는 위 소스들을 이용해 Flash Builder 4.5 환경에서 Stage3D 기반과 Away3D, Alternativa3D, ND2D 라이브러리를 기반으로 테스트한 워크스페이스를 압축한 것입니다. 위 링크대로 개발환경을 만들시고 압축한 파일을 풀어 Flash Builder 4.5.1에서 이 폴더를 Workspace경로로 잡으면 바로 테스트 해볼 수 있습니다. 제가 발표할때 처럼 직접 해보시는게 가장 중요합니다. 하다가 막히시면 댓글 달아주세요.

- 실습소스 : 20110715_Molehill_Examples.zip

동영상 자료는 나중에 공유가 될 예정입니다.

한국에서도 Molehill 3D(Stage3D)에 대한 많은 예제와 경험들이 공유되길 희망합니다. ^^

글쓴이 : 지돌스타(http://blog.jidolstar.com/778)

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Starling Framework - 2D GPU 가속 렌더링 플래시 게임 엔진 (1)	2011/09/23
Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material (0)	2011/08/01
1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발 (8)	2011/07/16
[ACC 기술세미나]Adobe Flash Builder 4.5 환경에서 Molehill 3D를 이용한 개발소개 (5)	2011/05/29
[Flash] Molehill을 이용한 2D 렌더링 (27)	2011/04/21
Adobe Flash Player 11 Incubator의 "Molehill" 3D를 활용하기 위한 개발환경 만들기 (29)	2011/03/30

제8회 플래시 커뮤니티 컨퍼런스 : "3D In Flash" 발표자료를 공유합니다.

지돌스타 — Sun, 10 Jul 2011 02:20:28 +0900

먼저 이번 컨퍼런스를 준비하고 마무리하시느라 고생하신 플래시 액션스크립트 카페 스텝 여러분께 진심으로 수고의 말씀을 드립니다. 그리고 귀중한 시간을 내어주신 카페회원분들께도 감사드립니다. 게다가.... 저의 발표도 끝까지 들어주셔서 감사하고요. 아무튼 다 감사합니다. ㅎㅎ

이번 컨퍼런스에서는 지난 ACC 기술세미나과 동일한 주제로 발표했습니다. 그때는 Molehill 3D API에 대해서 너무 파서 그런지... 정말 어렵고 지루해 하시는 것 같더군요. 그래서 PPT는 같은 내용이지만 짧게만 소개하고 바로 차세대 Flash Player 11기반에서 Flash Builder 4.5.1을 이용해 Low-level 또는 High-level 형태로 Molehill 3D 개발을 어떻게 시작할 수 있는지에 설명을 집중했습니다. 이미 아시는 분들은 한번 체크해보는 시간이 되셨겠고 모르셨던 분들에게는 도전이 되는 내용이 될 수 있었을 것이라 생각합니다.

약속드렸듯이 제 발표자료를 이번에도 공유하겠습니다.
PPT자료는 지난 ACC 기술세미나 발표때와 동일합니다.

2011.05.28 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개

View more presentations from Yongho Ji

발표 PPT

20110528_ACC_seminar_Molehill3D.pdf

아래 링크들을 참고하시면 좋겠습니다.
- Flash Player 11 Incubator ActionScript 3.0 API 문서 (임시): http://jidolstar.net/asdocs/incubator/
- Molehill 3D API (Stage3D API) 관련 유용한 링크들 : http://goo.gl/pcIzG
- Molehill Demos : http://www.leebrimelow.com/?p=2607
- Flash Player 3D의 미래 동영상 : http://2010.max.adobe.com/online/2010/MAX175_1288221804987EOHN
- Adobe Flash Platform 한국 SNS : http://facebook.com/flashplatformkr

발표때 예제로 사용되었던 소스들입니다.
- Molehill Getting Started : http://blog.naver.com/q3korea/120126463667
- Simple 2D Molehill Example : http://lab.polygonal.de/2011/02/27/simple-2d-molehill-example/
- Clear Water [Molehill Version) : http://wonderfl.net/c/enj6
- Away 3D 4.0.0 Alpha : http://away3d.com/download/
- Alternativa3D 8 : http://alternativaplatform.com/en/download8/
- ND2D Molehill 2D Engine : https://github.com/nulldesign/nd2d

위 예제는 다음 문서를 통해 어떻게 Flash Builder 4.5.1에서 테스트 해볼 수 있는지 알 수 있습니다.
- Adobe Flash Builder 4.5에서 Molehill 3D 개발환경 및 Away3D 4.0 예제 실행방법 : http://goo.gl/uXuH2

아래 링크는 위 소스들을 이용해 만든 프로젝트들의 Workspace를 압축한 파일입니다. 위 링크대로 개발환경을 만들시고 압축한 파일을 풀어 Flash Builder 4.5.1에서 이 폴더를 Workspace경로로 잡으면 바로 테스트 해볼 수 있습니다. 제가 발표할때 처럼 직접 해보시는게 가장 중요합니다. 하다가 막히시면 댓글 달아주세요.
- Molehill 3D 예제 워크스페이스 압축파일 : http://goo.gl/RbCku

한국에서도 Molehill 3D에 대한 많은 예제와 경험들이 공유되길 희망합니다. ^^

참고사항
금요일(7월 15일)에 같은 주제로 e-세미나를 합니다. 혹시 관심있으신 분은 참석하세요. ^^

http://www.adobeevent.co.kr/flash/fe1/index.html?promoid=ITZLS

(이번 컨퍼런스에 참석하신 분들께 부탁드리는 것은 이번 발표에 대해서 댓글로 소감이나 개선사항등을 말해주시면 참 좋겠습니다. e-세미나때 참고하겠습니다.)

글쓴이 : 지돌스타(http://blog.jidolstar.com/777)

'Adobe Flash Platform' 카테고리의 다른 글

Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전 (4)	2011/07/21
Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준 (0)	2011/07/21
제8회 플래시 커뮤니티 컨퍼런스 : "3D In Flash" 발표자료를 공유합니다. (5)	2011/07/10
Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치 (17)	2011/06/27
Adobe Flash Builder 4.5.1 로 아이폰, 안드로이드, 블랙베리 앱을 만드세요. (11)	2011/06/23
Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다! (0)	2011/06/15

Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치

지돌스타 — Mon, 27 Jun 2011 22:57:31 +0900

Flash Builder 4.5.1은 다양한 디바이스에서 동작하는 Flash 어플리케이션을 Flex 또는 ActionScript 3.0 기반으로 개발을 할 수 있게하는 개발통합환경이다. Eclipse 기반으로 제작되어 Java기반 개발자들에게는 매우 익숙하게 접근할 수 있는 환경을 제공해준다. 특별히 iOS, Android, BlackBerry 기반의 어플리케이션을 1개의 프로젝트안에서 개발할 수 있게 되었다.

우리는 Flash Builder를 all-in-one 환경에서 개발해도 된다. 하지만 Eclipse에 Plug-in으로 설치가 되어 사용하면 Eclipse 자체의 모든 기능을 사용할 수 있다. 그래서 많은 개발자들이 Flash Builder를 Plug-in으로 설치해서 개발한다.

Adobe는 기존에 Flash Builder를 all-in-one 버전과 plug-in 버전을 따로 배포했다. 개발자의 구미에 맞게 다운로드 받아서 사용하면 되었다. 하지만 4.5부터는 plug-in 버전이 따로 없다. 대신 all-in-one 버전을 설치하면 설치된 경로에 utilities폴더내 Adobe Flash Builder 4.5 Plug-in Utility가 존재한다.

간단하게 설치하는 방법을 설명하겠다.(MS Window 기준)

1. Eclipse Indigo(2011.6.27 최신버전)를 다운로드 받는다. http://www.eclipse.org/downloads/
2. Eclipse를 압축을 풀어놓는 것만으로 Eclipse는 설치가 된 것이다.(한번쯤 실행해서 제대로 실행되는지 확인해보자. 그리고 종료한다.)
3. Eclipse에 Flash Builder 환경에 최적화 시키기 위해 eclipse 설치경로내에 eclipse.ini를 열어 -vmargs 옵션에 아래 내용으로 수정,추가한다.

-vmargs
-Xms256m
-Xmx512m
-XX:MaxPermSize=256m
-XX:PermSize=64m

단, Mac OS의 경우에는 eclipse.ini는 다음 방법으로 찾는다.
- Eclipse 설치폴더내에 eclipse.app를 선택해 오른쪽 마우스 클릭후 컨텍스트 메뉴가 뜨면 "패키지 내용 보기(Show Package Contents) 를 선택한다.
- Contents > MacOS에 eclipse.ini를 찾는다.
- eclipse.ini 파일을 텍스트 편집기 등으로 연다.
- 위 옵션을 추가/수정한다.

4. Flash Builder 4.5를 다운로드 받아 설치한다.
Adobe Flash Builder 4.5 Premium Try 버전을 다운로드 받는다.

5. Flash Builder 4.5를 4.5.1로 업데이트 한다.
Help > Search For Flash Builder Updates... 로 업데이트 하면 되겠다.
또는 Adobe Flex Support Center 에서 직접 다운받아 Updater를 설치한다.

6. {Flash Builder 4.5 설치경로}/utilities 내에 Adobe Flash Builder 4.5 Plug-in Utility를 실행하고 중간에 Eclipse 설치경로를 잡아주어 Eclipse에 설치한다.

7. Eclipse를 실행한다. Flash 관련 Perspective를 추가해야 Flash 관련 개발이 가능하므로 메뉴에서 Window > Open Perspective > Other... 를 선택한뒤 Flash를 찾아 추가하면 된다.

8. 메뉴가 한글로 되어 있을 것이다. 이 부분을 영어로 바꿔주길 원한다면 Eclipse를 종료하고 eclipse.ini를 열어 맨 아래에 다음 옵션을 추가한다. 다시 Eclipse를 실행하면 한글메뉴대신 영어로 나온다.(출처 : 닥서클님 블로그 : http://superman.pe.kr/134)

-Duser.language=en
-Duser.country=US

9. 모바일 프로젝트를 실행해보자. 메뉴 File > New > Flex Mobile Project 를 선택한다. Project Name에 원하는 프로젝트 명을 입력한다. Flex SDK 버전이 Flex 4.5.1인 것을 확인하자. Flex 4.5.1은 AIR 2.6를 요구한다.
아래와 같은 화면을 경험할 것이다. Target platforms가 iOS, BlackBerry, Android이다. 1개의 프로젝트로 3개 이상의 모바일 OS에 대응하는 어플리케이션을 만들 수 있다.

지금까지의 설명은 Mac OS에서도 동일하다.

Mac OS든 Window든 시뮬레이터 또는 Device를 이용한 개발/디버깅/배포가 가능하다. 단 iOS의 경우 Mac OS에서만 앱스토어 배포를 할 수 있다. MS Window에서는 Device용 패키징/개발까지 가능합니다. 왜냐하면 배포의 경우 XCode에서 지원하는 Application Loader라는 프로그램을 이용할 수 밖에 없기 때문이다.

참고글
Adobe Flash Builder 4.5.1 로 아이폰, 안드로이드, 블랙베리 앱을 만드세요.
Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다
Adobe Flash Builder 4.5의 큰변화

글쓴이 : 지돌스타(http://blog.jidolstar.com/774)

'Adobe Flash Platform' 카테고리의 다른 글

Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준 (0)	2011/07/21
제8회 플래시 커뮤니티 컨퍼런스 : "3D In Flash" 발표자료를 공유합니다. (5)	2011/07/10
Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치 (17)	2011/06/27
Adobe Flash Builder 4.5.1 로 아이폰, 안드로이드, 블랙베리 앱을 만드세요. (11)	2011/06/23
Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다! (0)	2011/06/15
Adobe Flash Builder 4.5의 큰변화 (6)	2011/05/27

Adobe Flash Builder 4.5.1 로 아이폰, 안드로이드, 블랙베리 앱을 만드세요.

지돌스타 — Thu, 23 Jun 2011 03:03:27 +0900

Adobe Flash Builder 4.5.1 이 정식 배포되었습니다. (한국 2011년 6월 21일)
Adobe Flash Builder 4.5에서 Flex를 이용해 iOS, BlackBerry 어플을 배포할 수 없었는데, 이 점이 개선되었습니다. 이제 Adobe Flash Builder 4.5.1 을 이용해 iOS(iPhone, iPad), BlackBerry, Android 어플을 Flex나 ActionScript 3.0으로 개발할 수 있게 되었습니다.

아래 화면은 Flash builder 4.5.1에서 Flex 모바일 프로젝트로 Apple iOS, BlackBerry Tablet OS, Google Android 어플을 개발할 수 있음을 보여줍니다.

아래 링크를 통해 Flash builder 4.5.1 의 개선된 내용을 확인할 수 있습니다.
- Flash Builder 4.5.1 Release Notes
- Flash Builder 4.5.1 with Improved iOS Support

Flash Builder 4.5.1로 업데이트 하기 위해서는 2가지 방법이 있습니다. 기존 Flash Builder 4.5가 설치했다면 다음 방법을 택일할 수 있습니다.(먼저 Download a free trial of Flash Builder 4.5 Premium Edition 에서 Flash Builder 4.5를 다운받아 설치하세요.)

1. Flash Builder 4.5 자동업데이트 기능을 이용
이 방법은 빌더를 실행하고 Help > Search for Flash Builder Updates...로 들어가시면 됩니다. 열이아빠님의 말에 의하면 많이 느리답니다. 참고: 열이아빠님의 플래시 빌더 4.5.1

2. 업데이트 파일을 다운받아 업데이트 실시
Adobe Flex Support Center 에서 직접 다운받으실 수 있습니다. 이 방법이 첫번째 방법보다는 빠릅니다. ^^

Flash Builder 4.5.1에는 AIR 2.6이 탑재되어 있습니다. 그러므로 최근에 배포된 AIR 2.7을 다운받아 설치하시면 AIR 2.6, AIR 2.7 환경에서 개발이 가능합니다. AIR 2.7은 iOS 어플의 속도를 적어도 4배이상 향상시켰기 때문에 AIR 2.7을 설치할 것을 권고하는 바입니다.

Flash Builder 4.5.1을 이용해 Flex 4.5.1 기반에서 개발하면 생산성이 극대화 됩니다. 하나의 프로젝트로 iOS, Android, BlackBerry 어플개발을 할 수 있습니다. 아래 링크에 있는 영상을 보시면 약 8분여만에 트위터와 연동하는 어플을 만들어 각각의 디바이스에 실행해보는 모습을 보여주고 있습니다.

FLASH BUILDER 4.5.1 ROCKS

여러분은 Flash Builder 4.5.1에서 iOS 어플 개발하는 방법은 다음 동영상과 문서를 통해 배울 수 있습니다. 중요한 것은 Mac뿐 아니라 Window환경에서도 iOS 어플을 개발할 수 있습니다.

Build iOS applications with Flex and Flash Builder 4.5.1
Using Flash Builder 4.5 to package applications for Apple iOS device
Flex/AIR for iOS Development Process Explained!

Android와 BlackBerry 어플을 어떻게 만드는지도 알 수 있습니다. 다음 문서들을 보세요.
Using Flash Builder 4.5 to package applications for Google Android device
Using Flash Builder 4.5 to package applications for BlackBerry Tablet OS devices

기존 Flash 개발자나 Flex, ActionScript, AIR 개발자는 모두 별 어려움없이 iOS, Android, BlackBerry 어플을 개발할 수 있다는 점이 이번 Flash Builder 4.5.1 배포의 가장 큰 매력이 아닌가 생각합니다.

하지만 한가지 아셔야 하는 것은 각각 OS별로 특정 기능은 지원할 수 없다는 점입니다. 가령 안드로이드 기반의 위젯같은 것은 현재로선 개발이 불가능하지요. 그러므로 이런 경우에는 원래 개발 방식대로 개발해야할 것입니다.

AIR 2.7이 Linux 환경에서 더이상 지원하지 않는다는 뉴스는 개발자로서 아쉬움이 남지만, Flash Builder 4.5.1의 런칭으로 극복되길 바라는 바입니다.

참고글

열이아빠님의 플래시 빌더 4.5.1
Download a free trial of Flash Builder 4.5 Premium Edition
Adobe Flex Support Center - 여기서 Flash Builder 업데이트 버전을 직접 받을 수 있습니다.
Flash Builder 4.5.1 Release Notes
FLASH BUILDER 4.5.1 ROCKS
Flash Builder 4.5.1 with Improved iOS Support
Build iOS applications with Flex and Flash Builder 4.5.1
Flex SDK and Flash Builder updates available - adds iOS and BlackBerry PlayBook support
(동영상)Mobile Application Development with Flex and Flash Builder
Flash Builder Developer Center
Adobe Flash Builder 4.5.1, AIR 2.7 and iOS
Hands On with Flash Builder 4.5.1 for Apple iOS
Flex/AIR for iOS Development Process Explained!
Build iOS applications with Flex and Flash Builder 4.5.1
Build Mobile Apps for Android Devices, BlackBerry PlayBook, iPhone and iPad Today!
(우야꼬)Flash Builder 4.5로 iPhone 4용 듀얼 브라우져 앱 만들기
(지돌스타)Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다!
Episode : Mr.MixIt And Pyramix Games For Android and iOS
What’s your favorite Flash Builder 4.5 feature?
Flash Builder 4.5 에서 plug-in 버전 설치 하기
AIR 2.7 now available for desktop, Android, iOS and Blackberry Tablet OS.

글쓴이 : 지돌스타(http://blog.jidolstar.com/773)

'Adobe Flash Platform' 카테고리의 다른 글

제8회 플래시 커뮤니티 컨퍼런스 : "3D In Flash" 발표자료를 공유합니다. (5)	2011/07/10
Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치 (17)	2011/06/27
Adobe Flash Builder 4.5.1 로 아이폰, 안드로이드, 블랙베리 앱을 만드세요. (11)	2011/06/23
Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다! (0)	2011/06/15
Adobe Flash Builder 4.5의 큰변화 (6)	2011/05/27
Adobe Flash Builder 4.5 - AIR로 iOS, 안드로이드 어플을 개발하자. (1)	2011/05/06

친구들과 함께 키우는 나만의 위젯형 다마고치 '스타펫'

지돌스타 — Thu, 16 Jun 2011 14:34:09 +0900

아이폰용도 나왔습니다. ^^

http://itunes.apple.com/app/id446340438

스타플(http://starpl.com)에서 친구들과 함께 하는 SNS형 다마고치 '스타펫' 어플을 출시했습니다.

지금 바로! 안드로이드 마켓에서 다운로드 받을 수 있어요.(아이폰용도 조만간 오픈할 것입니다.)

스타펫받기 : https://market.android.com/details?id=com.starpl.android.starpet

귀여운 스타펫과 함께 보내신다면 여러분의 하루가 더 즐겁지 않을까요? ^^

*** [스타펫]으로 작성한 글/댓글은 스타플(starpl.com) 웹서비스에도 자동 업로드됩니다.
PC에서 www.Starpl.com으로 접속하시면 더욱 다양한 기능의 스타플 서비스를 이용하실 수 있습니다.

*** 다양한 스타플 연동 어플리스트

- (안드로이드)바른생활
- (안드로이드)2011 토정비결S
- (안드로이드)뒷담화
- (안드로이드)책을읽자!
- (안드로이드)아이돌배틀
- (안드로이드)자랑질

- (아이폰)책을읽자!
- (아이폰)바른생활
- (아이폰)뒷담화
- (아이폰)신조어능력시험
- (아이폰)2011 토정비결S
- (아이폰)2011 신년운세S
- (아이폰)어플지름신
- (아이폰)타임라인
- (아이폰)오픈배경화면

- (아이폰)아이돌배틀

- (아이폰)자랑질

글쓴이 : 지돌스타(http://blog.jidolstar.com)

'스타플(starpl.com)' 카테고리의 다른 글

회사 구성원으로서의 자세 - 팀장, 직원 (0)	2012/03/28
[아이폰]앱플러스-App+ (0)	2012/03/15
친구들과 함께 키우는 나만의 위젯형 다마고치 '스타펫' (4)	2011/06/16
[아이폰/안드로이드]자랑질 어플 출시 (0)	2011/05/20
아이돌배틀 무료아이폰어플 출시 - 팬심으로 대동단결. 매일매일 우리 아이돌에게 ♥를 조공해요. (0)	2011/04/15
[스타플]'오픈배경화면'으로 아이폰용 배경화면과 짤방 사진을 공유해요. (1)	2011/04/05

Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다!

지돌스타 — Wed, 15 Jun 2011 13:52:43 +0900

Adobe AIR 2.7 버전이 정식 배포되었습니다. 개발자를 위한 SDK와 Runtime이 함께 배포되었습니다. Adobe AIR 2.7은 데스크탑 또는 모바일 환경 모두 동작하며 모바일의 경우 안드로이드 2.2 이상, BlackBerry Tablet OS, iOS 4.0 이상에서 동작합니다.

현재 Flash Builder 4.5는 아직 Flex기반 iOS 어플 개발이 불가능하지만 Flash builder 4.5가 이번 달에 새로 배포되면 AIR 2.7이 같이 탑재되면서 Flex로 iOS 어플 개발이 가능하게 됩니다. 현재 Flash Builder 4.5에 AIR 2.7이 없어서 Flex로 iOS 개발을 막아놓았던 것 같네요.

iOS를 위한 AIR 어플은 CPU모드에서 4배이상 빠른 렌더링을 지원합니다. 기존에 Flex로 iOS기반 어플을 만들게 되면 퍼포먼스 문제가 있었는데 이 부분이 말끔하게 해결된 듯합니다. 다음 동영상을 보세요.

Adobe AIR 2.7 : Faster app performance on iOS http://goo.gl/VJxnR

iOS에서 디버깅 및 테스팅 환경이 많이 개선되었다고 합니다. 또한 Android기반에서 SD카드에 AIR 런타임을 설치할 수 있게 되었습니다.

데스크탑환경에서 Media Measurement를 위한 통합기반이 지원됩니다. Adobe Flash Player 10.3에서 부터 지원되었으면 AIR 2.7에서도 이것을 지원합니다. 관련된 내용은 아래 링크를 참고하세요.

Measuring video consumption in Flash : http://goo.gl/wPcf0

또한 Acoustic Echo Cancellation를 지원합니다. Flash Player 10.3에서도 지원하고 있습니다. 여기에 관련된 API가 도입됨에 따라 헤드셋없이도 애코조절이 훨씬 원할해집니다.

그리고 HTMLLoader에서 HTML 컨텐츠에 대한 로케이션 제어 권한이 훨씬 향상되었습니다. 과거에 이 부분때문에 고생한 적이 생각난다는.....

다음 사이트들을 둘러보시면 AIR 2.7을 이해하는데 더욱 도움이 될 것입니다.

Adobe AIR 2.7 Now Available : iOS apps 4x Faster! : http://goo.gl/5IEIz
Adobe AIR 2.7 Developer Release Notes : http://kb2.adobe.com/cps/906/cpsid_90612.html
Adobe AIR 공식페이지 : http://www.adobe.com/products/air/
Download Adobe AIR SDK : http://www.adobe.com/products/air/
Adobe Flash Builder : http://www.adobe.com/products/flash-builder.html

글쓴이 : 지돌스타(http://blog.jidolstar.com)

'Adobe Flash Platform' 카테고리의 다른 글

Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치 (17)	2011/06/27
Adobe Flash Builder 4.5.1 로 아이폰, 안드로이드, 블랙베리 앱을 만드세요. (11)	2011/06/23
Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다! (0)	2011/06/15
Adobe Flash Builder 4.5의 큰변화 (6)	2011/05/27
Adobe Flash Builder 4.5 - AIR로 iOS, 안드로이드 어플을 개발하자. (1)	2011/05/06
급변하는 Adobe Flash/AIR 기술 (2)	2011/04/12

[ACC 기술세미나]Adobe Flash Builder 4.5 환경에서 Molehill 3D를 이용한 개발소개

지돌스타 — Sun, 29 May 2011 02:27:47 +0900

2011년 5월 28일에 진행한 ACC 기술세미나에 스피커로 참여했습니다. 주말 좋은 날씨임에도 불구하고 귀중한 시간 내어주신 분들께 감사드립니다. 어려운 주제임에도 끝까지 경청해주셔서 더욱 고맙고요.

구준호님이 촬영해 주신 인증샷 ^^

출처 : Flash Platform facebook 사이트 http://facebook.com/flashplatformkr

아마도 많은 분들이 발표자료를 보고 싶어하실 것 같아 블로그를 통해 공유해드립니다.

2011.05.28 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개

View more presentations from Yongho Ji

발표 PPT

20110528_ACC_seminar_Molehill3D.pdf

Molehill3D 예제소스 다운로드
http://goo.gl/pFHEv

위 예제소스는 Flash Builder 4.5 기반에서 만들어진 것들입니다. 이것 자체가 Workspace이므로, 다운로드 받은 파일을 압축을 푼뒤 Flash Builder 4.5 메뉴에서 File > Switch Workspace를 통해 위 소스를 경로로 잡으면 되겠습니다. (되도록이면 압축푼 장소를 영문경로로 잡아주세요. 한글경로로 잡으면 안될 수도 있습니다.)

발표 중간에 몇가지 유용한 정보를 말씀드렸습니다.
- Flash Player 11 Incubator ActionScript 3.0 API 문서 (임시): http://jidolstar.net/asdocs/incubator/
- Molehill 3D API (Stage3D API) 관련 유용한 링크들 : http://goo.gl/pcIzG
- Adbobe Flash Builder 4.5에서 Molehill 3D 개발환경 및 Away3D 4.0 예제 실행방법 : http://goo.gl/uXuH2
- Adobe Flash Platform 한국 SNS : http://facebook.com/flashplatformkr

이번에 발표내용은 저 자신도 너무 어렵고 힘든 주제였습니다. 그럼에도 불구하고 세미나 주제로 이것을 정한 이유는 이 분야에 대한 관심을 가지는 개발자들이 많아져서 많은 정보를 공유할 수 있는 분위기가 되었으면 하는 작은 바램이 있기 때문입니다. 저 자신도 열심히 공부해서 뭔가 의미있는 결과를 만들어내길 강하게 바라고 있습니다. 함께 좋은 정보 공유하길 바랍니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/770)

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material (0)	2011/08/01
1회 Adobe Flash Platform e세미나 - Flash Player 11과 AIR 3 환경에서 3D 개발 (8)	2011/07/16
[ACC 기술세미나]Adobe Flash Builder 4.5 환경에서 Molehill 3D를 이용한 개발소개 (5)	2011/05/29
[Flash] Molehill을 이용한 2D 렌더링 (27)	2011/04/21
Adobe Flash Player 11 Incubator의 "Molehill" 3D를 활용하기 위한 개발환경 만들기 (29)	2011/03/30
차세대 Flash Player 3D API Molehill (0)	2010/12/20

지돌스타 블로그

[iOS]앱 배포시 "An error occurred uploading to the iTunes Store" 에러 대처 방법

'Mobile/Tablet > iOS - 아이폰/아이패드' 카테고리의 다른 글

안드로이드 개발시 ADB가 실행중 "Please 'adb uninstall ~' in a shell" 에러 메시지가 뜰 경우 처리

'Mobile/Tablet > Android - 안드로이드' 카테고리의 다른 글

[아이폰]앱플러스-App+

'스타플(starpl.com)' 카테고리의 다른 글

Away3D 3.6 Essentials 번역서 출간

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #2

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 6장 코드 재사용 패턴 #1

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 5장 객체 생성 패턴

네임스페이스 패턴

의존 관계 선언

비공개 프로퍼티와 메서드

프로토타입과 비공개 맴버

모듈패턴

샌드박스 패턴

스태틱 맴버

객체 상수

체이닝 패턴

method() 메서드

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 4장 함수

자바스크립트에서 함수의 중요한 특징

함수를 생성하는 문법

함수 호이스팅

함수패턴 : API 패턴

함수패턴 : 초기화 패턴

함수패턴 : 성능 패턴

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 3장 리터럴과 생성자

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심 패턴 : 2장 기초

유지보수 가능한 코드 작성

전역변수를 최소화 하라!

단일 var 패턴을 사용하라

호이스팅(hoisting)

for 루프

for-in 루프

switch 패턴

암묵적 캐스팅 피하기

evel()은 보안문제로 무조건 피하라!

parseInt()를 통한 숫자 변환

코딩규칙

명명규칙

주석 작성

출시단계 압축

JSLint 실행

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 코딩 기법과 핵심패턴 : 1장 개요

자바스크립트의 함수는 일급객체(first-class object) 이다.

패턴

자바스크립트 개념

'개발 > JavaScript' 카테고리의 다른 글

Away3D 4.0 으로 만들어본 지구

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Flash Player 11 3D 용어 정리

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Pixel Bender + TextMate 소개

'Adobe Flash Platform' 카테고리의 다른 글

Starling Framework - 2D GPU 가속 렌더링 플래시 게임 엔진

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

픽셀벤더(Pixel Bender)에 대한 나름 간단 정리

'Adobe Flash Platform' 카테고리의 다른 글

파워플에 PixelBender 에 대한 연재를 시작합니다.

'Adobe Flash Platform' 카테고리의 다른 글

2회 Adobe Flash Platform e세미나 - 모바일 개발

'Adobe Flash Platform' 카테고리의 다른 글

칠월칠석을 담은 네이버 로고 (견우와 직녀가 만나는 그날)

'천문학 > 천문학 유용정보' 카테고리의 다른 글

Flash/Flex 기반 모바일 어플에 Youtube 동영상을 보여주기에 대한 고찰

'Adobe Flash Platform' 카테고리의 다른 글

Away3D 4.0 학습에 대해 - Github 오픈소스 활용 및 Scene Graph, Mesh, Geometry, Material

'Adobe Flash Platform > Adobe Flash 3D' 카테고리의 다른 글

Flash Player 11, AIR 3.0을 위한 ActionScript 3.0 레퍼런스 Beta버전

'Adobe Flash Platform' 카테고리의 다른 글

Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준