'JavaScript' 태그의 글 목록

[Javascript] html5, Android, iOS 게임 개발 가능한 Cocos2d-JS

자바스크립트(Javascript) 2014. 6. 21. 08:07

Javascript로 html5게임과 Android랑 iOS 게임을 만들 수 있는 멀티플랫폼 게임개발툴입니다. 제가 웹게임을 만드려고 알아보고 있었는데, 이게 가장 적합한 것 같네요. 게다가 같은 소스코드로 그대로 Android, iOS도 같이 빌드할 수 있습니다.

Cocos2d-x인 경우에는 c++을 이용해서 멀티플랫폼을 지원하는데,Cocos2d-x를 잠깐 해봤을 때 c++은 대학교 때 이후로 해보질 않아서 조금 어려운 점이 많았습니다. string을 다루는 법부터 시작해서 헤더파일도 다루고 그러는 것이 익숙치 않더라구요(아...쉬운 문법 언어만 해와서ㅠ).

그래서 사이트에 가서 찾아보니 Javascript로도 개발을 할 수 있는 제품도 있더군요. 그래서 살짝 맛보기를 해보니 클래스명은 x와 서로 비슷하며 사용법 또한 비슷한데, 이것을 Javascript로만 표현을 했습니다. 문법면에서는 훨씬 쉽게 개발할 수 있을 겁니다(물론 저는 웹개발이 주여서 그게 더 쉽게 느껴지지만, c++만 한사람은 x가 더 쉽겠죠?).

간단히 다운로드 셋팅을 한 번 해봅시다. 참고로 저는 맥 이용자입니다. 윈도우에서도 되는지는 잘 모르겠네요.

0. 준비물

Apache ANT : http://ant.apache.org/bindownload.cgi
Python2.7.6 : https://www.python.org/downloads/
AndroidSDK : https://developer.android.com/sdk/index.html?hl=sk
AndroidNDK : https://developer.android.com/tools/sdk/ndk/index.html
XCode : AppStore에서 받으삼.
WebStorm: 있으면 좋음. 없으면 그냥 에디터에서 편집해도 됨 ㅇㅇ

1. Cocos2d-JS 다운로드

http://cocos2d-x.org/download
위 사이트에서 받을 수 있습니다. Cocos2d-JS를 받습니다. 아직까지는 베타버전입니다. 곧 정식버전이 나오길 ㄷㄷ. 그리고 다운로드 사이트에서는 크게 3가지를 받을 수 있는데요. Cocos2d-x, Cocos2d-JS, CocoStudio입니다. Cocos2d-x와 Cocos2d-JS는 말그대로 C++개발, JS개발 툴이구요. CocoStudio는 게임 개발할 때 필요한 Scene, UI, Animation 등을 손쉽게 개발할 수 있는 툴입니다. 유니티를 개발할 때에도 유니티개발툴에서 애니메이션, UI를 개발하는데 그것과 비슷한 것이라고 보면 됩니다.

그리고 개발하기 위해서는 웹에디터가 하나 필요한데요. 여기서 추천하는 것은 WebStorm입니다. 웹스톰이 확실히 자바스크립트 코딩할 때에는 갑이거든요. 자바스크립트 디버깅도 할 수 있고, 코드힌트 에러도 제일 잘 잡는 에디터에요. 웹개발에도 갑이고 꽤 좋은 에디터에요. 여기서 만든 에디터들은 다 좋아요.

2. 환경 설정

환경설정은 Python으로 구현이 되어 있습니다. Cocos2d-JS압축을 풀면 setup.py파일이 나옵니다. 이걸 실행하면 NDK, Android SDK설정이 어디에 있냐고 물어보면서 그대로 대답하게 되면 그 값을 기반으로 .bash_profile에 환경변수와 패스를 저장해줍니다. NDK, SDK, ANT를 적당한 곳에 풀고 해당 패스를 물어보는 것에 적으면 알아서 .bash_profile에 넣어버립니다.
그러면 아래와 같이 자동으로 잡아줍니다.

# Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x

export COCOS_CONSOLE_ROOT=/Volumes/d/mudchobo/cocos2d-js-v3.0-beta/tools/cocos2d-console/bin
export PATH=$COCOS_CONSOLE_ROOT:$PATH

# Add environment variable NDK_ROOT for cocos2d-x
export NDK_ROOT=/Volumes/d/mudchobo/android-ndk
export PATH=$NDK_ROOT:$PATH

# Add environment variable ANDROID_SDK_ROOT for cocos2d-x

export ANDROID_SDK_ROOT=/Volumes/d/mudchobo/android-sdk
export PATH=$ANDROID_SDK_ROOT:$PATH
export PATH=$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/platform-tools:$PATH

근데 보면 버그인지 모르겠지만 ANT_ROOT는 안잡아주더군요. 그래서 그냥 ANT_ROOT는 수동으로 추가했습니다.

# ant root
export ANT_ROOT=/Volumes/d/mudchobo/apache-ant

3. 프로젝트 생성

source ~/.bash_profile을 해서 profile파일을 다시 읽던가 아니면 터미널을 껐다켜면 해당 패스와 환경변수가 잡혀있을 겁니다. 그러면 초간단 프로젝트를 생성할 수 있습니다. COCOS_CONSOLE_ROOT가 패스에 잡혀서 cocos를 실행할 수 있습니다. 얘가 프로젝트를 만들어 줍니다.

만들고 싶은 경로 위치로 가서 아래와 같이 실행하면 바로 만들어 집니다.

cocos new MudchoboTest -l js

new는 프로젝트 생성하라는 것이고 다음은 프로젝트 명입니다. 다음 옵션은 -l은 언어를 선택하는 건데, js로 하라는 것입니다. 그러면 바로 생성이 됩니다.

4. 실행

바로 실행하면 최초 헬로우월드 게임이 나옵니다. 실행도 cocos로 하면 됩니다.

cocos run -p web|ios|android|mac

원소스로 4가지 플랫폼을 전부다 실행해볼 수 있습니다. 올인원 겁나 좋아하는데 딱 저한테 맞는 플랫폼이네요. web으로 띄우면 서버도 자체적으로 만들어서 띄웁니다. web은 따로 컴파일이 필요없고, ios와 android는 따로 컴파일 후에 실행하게 됩니다. 시간이 조금 걸리긴 합니다.

확인해보니 websocket(socket.io모듈도 지원)도 지원을 합니다. 나중에 시간될 때 웹소켓으로 멀티유저게임을 한 번 만들어봐야겠네요.

참고문서
http://cocos2d-x.org/docs/manual/framework/html5/v2/cocos-console/en

Posted by 머드초보

,

[Java] Google App Engine의 ChannelAPI를 이용한 할리갈리 게임

자바(Java) 2011. 12. 7. 20:42

저번에 해커톤에 가서 코딩하고 온 할리갈리 게임입니다.
jQuery Mobile와 Java와 html5의 Cavans의 짬뽕 조화로.....이루어져있습니다....ㄷㄷ
Client는 Cavans로 만들었는데, IE계열에서 전혀 동작하지 않네요. IE9에서도 안되네요ㅠ 그리고 Android계열 브라우저에도 잘 안되는 듯 합니다. 되는 곳은 iPhone계열 밖에 없네요ㅠ 아이폰이랑은 같이 게임을 하실 수 있을겁니다^^
뭐 그냥 ChannelAPI 공부하는데에 전혀 무리 없이 보실 수 있을 것 같습니다.
물론 공식사이트에 있는 Tic-Tac-Toc 예제가 더 심플하고 보기 쉬운 예제입니다ㅠ
http://code.google.com/p/java-channel-tic-tac-toe/

그래도 그 외에 방 개념을 넣어서 만든거라 한서버당 여러 게임을 즐길 수 있어요!
근데 몰랐는데, 문제는 무료 계정을 사용할 경우 Resource에 한계가 있습니다. 근데, 이 ChannelAPI의 Channel Created 리소스는 너무 쪼잔하게 줍니다. 하루에 100개가 제한입니다. 결국은 접속자 100명이 들어오면 끝나는 것이죠....ㄷㄷ 페이지당 채널하나니 뭐 그냥 몇명이 게임하면 끝나는 것이죠 ㅇㅇ

그래서 다음에는 Node.js로 만들어서 무료호스팅 하는 곳에 올려볼 생각입니다!
스샷

일단 원리는 간단합니다.

1. 해당 게임페이지에 접속 시 채널생성.

채널을 생성하고 Javascript에서 Open요청을 하면 /_ah/channel/connected 요청이 호출됩니다. 여기서 입장을 시키면 됩니다. 서버에 접속되었다고 객체의 유저목록에 추가하면 됩ㄴ니다. 그 뒤에 이 사용자가 끊어질 경우 /_ah/channel/disconnected 요청이 호출되므로 그때 유저목록에서 삭제해주면 되죠!

2. 해당 방에 객체를 만들어 ClientId저장

ClientId를 저장해두어야 나중에 해당 방에 있는 유저들에게만 데이터를 보낼 때 해당 ClientId로 보낼 수 있습니다.

쓰다보니 별거없네... 암튼 이런식으로 되는거라......

소스는 여기에
https://github.com/mudchobo/HalliGalliForAppEngine

올려놓은 사이트는 여기에
http://halligalligame.appspot.com/

PS. 만들면서 느끼는 게 Javascript로 타이머 하나 걸면 무조건 이기겠더라구요... 웹게임에 대한 어뷰저는 어떻게 처리를 해야할 지 고민이 크네요...

Posted by 머드초보

,

[유틸리티] Heroku에서 Node.js 호스팅 사용하기 (Windows용)

유틸리티 활용하기 2011. 9. 4. 22:44

Heroku는 호스팅 서비스입니다.
http://www.heroku.com/

요즘은 호스팅 서비스가 참 많이 있는데요. 지원하는 방법도 틀리고, 지원 범위도 매우 다양합니다.
구글 앱엔진 같은 경우, Java와 Python을 통해 앱을 개발하고 구글 앱엔진서버에 올려서 서비스하는 방식이죠. 대신에 FTP 같은 것을 지원하지 않고, 한번에 배포를 하는 방식이며, Database는 우리가 일반적으로 쓰는 SQL형태(MySQL, Oracle 등)과는 다르게 BigTable이라는 접근제한(?)적인 DB를 제공합니다.
국내에서 서비스 하는 Cafe24 같은 경우는 그냥 ftp를 지원하고, Mysql계정을 주며, 직접 안에서 개발을 하고, Java같은 경우 개별 톰캣을 줘서 시작하고 끌 수 있는 형태로 호스팅을 하고 있죠.

Heroku도 구글앱엔진과 비슷한 형태로 서비스를 하고 있는데요. Heroku는 git를 이용해서 로컬에서 개발해놓은 것을 Heroku에 올립니다. 이 때 Procfile이라는 것을 같이 올리는데, 여기에 서비스 시작 명령어 같은 것이 있습니다. 그러면 올리자마자 해당 서비스가 돌아가게 됩니다.
Node.js에 대해서 검색해보다가 Node.js를 호스팅해주는 서비스라고 해서 알아봤는데, Java도 되고, 루비도 되고, 좋은 것 같네요. 근데, 용량을 늘리거나 다른 기능을 쓰려면 돈을 내야합니다. 하지만, 일부는 무료인 것 같습니다.

제가 Windows를 쓰고 있어서 이걸로 설명을......

공식사이트에 나와있는 Windows에서 시작하기 및 Node.js 시작하기 문서를 참조했습니다. 뭐 참조해서 했다기보다 그냥 그거 보고 따라한거에요~ 제 글보다 영어가 편하시면 이 아래의 글을 읽는 게 더편할 듯!
windows에서 시작하기 : http://devcenter.heroku.com/articles/windows
node.js시작하기 : http://devcenter.heroku.com/articles/node-js

1. Heroku 설치

일단 Heroku 사이트에 가입하시구요. 공식사이트에서는 http://railsinstaller.org 에서 한번에 git와 ruby를 설치하는 것을 설명해놨네요.

Heroku설치는 gem을 이용해서 설치하면 됩니다.

gem install heroku

2. ssh key셋팅

git를 제가 잘 몰라서 제가 일단 이해한대로 작성을.....-_-
git에 접근하기 위해서는 그 해당 git에 권한이 있어야 하는데, 해당 git에 등록된 ssh key만이 접근이 가능합니다. 그래서 heroku에 공개키를 업로드해서 얘는 여기에 등록된 사용자 라는 것을 판단하는 것 같습니다.

일단 키를 생성해야 합니다.
git 설치하면 Git Bash프로그램이 생깁니다. 그걸 실행.
아래와 같이 명령어를 치면

ssh-keygen -t rsa

홈폴더/.ssh/id_rsa과 id_rsa.pub파일이 만들어집니다. 그럼 이제 이 pc에서는 git로 이 키가 등록된 곳은 clone이 가능하겠죠. 키를 추가하는 방법은 아래 명령어로 추가합니다.

heroku keys:add

키가 추가됐는지 보려면 그냥 heroku keys 치면 되고, 키를 지우려면 heroku remove mudchobo@MUDCHOBO-VAIO 이렇게 치면 되고, 뒤에 인제 없이 remove만 하면 다 날라가더라구요-_-

3. Node.js 코딩

보니까 socket.io와 expres framework를 지원하는 것 같더라구요. 둘 다 사용하는 예제로 한번 올려보겠습니다.
app.js, index.html, Procfile, package.json 파일을 만들어서 올립니다.
app.js파일은 실제 node.js코드파일이고, index.html은 node.js에서 내려주는 클라이언트 파일이며 Procfile은 heroku에서 사용하는 앱 실행명령어가 있는 파일이며, package.json은 현재 프로젝트에 대한 요약 및 어떤 버전에 의존하고 있는지 명세하고 있는 파일입니다.

app.js

var app = require('express').createServer()

,io = require('socket.io').listen(app);

// 여기서 포트는 지정할 수 없고 하나만 쓸 수 있음. 미리정해진 상수.

app.listen(process.env.PORT);

console.log("port = " + process.env.PORT);

app.get('/', function (req, res) {

res.sendfile(__dirname + '/index.html');

});

io.sockets.on('connection', function (socket) {

socket.emit('news', { hello: 'world' });

socket.on('my other event', function (data) {

console.log(data);

});

index.html

var socket = io.connect();

socket.on('news', function (data) {

console.log(data);

socket.emit('my other event', { my: 'data' });

});

</script>

package.json

{

"name": "node-example",

"version": "0.0.1",

"dependencies": {

"express": "2.2.0",

"socket.io": "0.8.2"

}

Procfile

web: node app.js

4. git로 커밋과 remote쪽인 heroku로 push

이제 이 폴더를 git로 새로 생성해서 커밋을 합니다.

git init
git add .
git commit -m "init"

그리고 heroku의 새로운 프로젝트를 생성해야 합니다.
Heroku에서 얘기하는 Cedar stack이 아직도 뭔지 모르겠습니다. 근데, Java나 Ruby On Rails, Node.js를 사용하려면 이걸로 프로젝트를 생성해야하는 것 같습니다.

heroku create --stack cedar helloworldnodejs(원하는 이름)

이거 하면 해당 git에 remote로 heroku라는 이름으로 추가가 됩니다. 저기 원하는 이름을 쓰지 않으면 랜덤으로 이름을 생성해서 만듭니다. 그리고 현재 heroku에서 존재하는 이름으로 생성해도 Name is already taken이라는 에러메세지가 뜹니다. 유니크하게 적어주면 됩니다.

이제 push하면 됩니다.

git push heroku master

현재 프로세스가 돌아가는지 보려면

heroku ps
또는 정확하게 앱을 찍어서
heroku ps --app helloworldnodejs(앱 명칭)

5. 앱이 잘 돌아가는지 확인

heroku의 앱 url은 앱이름.herokuapp.com 입니다.
http://helloworldnodejs.herokuapp.com/
여기 접속해서 console로 helloworld가 뜬다면 된 것이겠죠. 서버쪽 로그도 확인할 수 있는데, 서버로그는 ps명령어와 동일합니다.

heroku logs --app helloworldnodejs(앱 명칭)

PS. play! framework도 꽤 관심있었는데, 여기서 호스팅까지 해준다니 이번 기회에 한번 봐야겠네요. node.js를 이용해서 초간단 html5게임이나 한번 만들어봐야겠네요~!

Posted by 머드초보

,

[Javascript] 페이스북(Facebook) JavaScript 기반 인증 연동 후 YQL을 이용한 글쓰기

자바스크립트(Javascript) 2010. 9. 20. 16:53

일단 인증을 받기 위해서 애플리케이션을 등록해야합니다.
페이스북 developer페이지
http://www.facebook.com/#!/developers/apps.php

여기서 새 애플리케이션 셋업을 선택해서 애플리케이션을 등록해야합니다.
등록하고 나서 설정에서 Web Site탭에서
Site URL을 해당 "http://인증할 사이트주소/", Site Domain을 "인증할 사이트주소" 이렇게 설정합니다. 이렇게 안하니까 에러나더라구요-_-
저는 http://mudchobo.tomeii.com/ , mudchobo.tomeii.com 이렇게 셋팅했습니다.

그리고 이제 인증받을 페이지를 만듭니다.
index.html
[code]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnAuth").click(function(){
window.location = "https://graph.facebook.com/oauth/authorize?client_id=126292714090241&redirect_uri=http://mudchobo.tomeii.com/test/facebook/callback.html&type=user_agent&display=popup&scope=publish_stream,create_event,rsvp_event,sms,offline_access";
});
});
</script>
</head>
<body>
<button type="button" id="btnAuth" name="btnAuth">인증받기</button>
</body>
</html>
[/code]
뭐 간단한데, 인증버튼이 있는데, 인증 받으려고 해당 url로 갑니다. 이거 팝업으로 한다음에 인증받고 callback에서 다시 팝업->부모페이지로 전달해서 하는 방법도 있는데, 귀찮으니까 그냥 페이지로 넘기고 콜백으로 넘어갑시다-_-

인증url을 보면 client_id가 application_id입니다. 저는 이런 단어통일이 안되어서 몬가 삽질을 좀 했습니다. 왜 단어가 틀려-_-

그리고 rediret_uri는 인증받고 다시 돌아올 주소고, scope는 이 인증에 어디까지 권한을 주는것이냐 입니다. 저기에 있는 게 다인데, 글쓰기권한은 publish_stream하나면 되는 듯. 나머지는 몰라서 막 추가해봤음...ㅠㅠ

인증받으려고 하면 아래와 같은 화면이 뜹니다.

허가하기 누르면 이제 access_token을 가지고 callback url로 옵니다.
이제 이 access_token만 있으면 글쓰기를 하거나, 글을 가져올 수 있습니다.

콜백을 보면...
callback.html
[code]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var url;
var accessToken;
var userId;

$(document).ready(function(){
url = new String(window.location);
accessToken = url.substring(url.indexOf("#") + 14, url.indexOf("&"));
var userId = accessToken.substring(43, 53);

// 자신의 정보 가져오기
$.getJSON("https://graph.facebook.com/me?access_token=" + accessToken + "&callback=?", result);
});

function result(data){
userId = data.id;

// 글쓰기 버튼 이벤트 추가
$("#btnWrite").click(function(){
var data = $("#taWall").val();
if (data.length <= 0){
alert("글을 입력하세요!");
return;
}
var query = "use 'http://mudchobo.tomeii.com/test/facebook/facebook_wall_table.xml' as htmlpost;" +
"select * from htmlpost where " +
"url='https://graph.facebook.com/" + userId + "/feed' " +
"and postdata='access_token=" + accessToken + "&message=" + encodeURIComponent(data) +"'" +
"and xpath='//p'";
var url = "http://query.yahooapis.com/v1/public/yql?format=json&callback=?&q=" +
encodeURIComponent(query) + "&diagnostics=true";
$.getJSON(url, cbResult);
});
}

function cbResult(data){
alert("글쓰기 완료!" + data.query.results.postresult.p);
}
</script>
</head>
<body>
<textarea id="taWall" name="taWall"></textarea>
<button id="btnWrite" name="btnWrite">글쓰기</button>
</body>
</html>
[/code]
accessToken을 url에서 가져오고, 자신의 정보를 access_token을 이용해서 가져옵니다.

그리고, 이제 문제는 글쓰기 부분인데요. 타도메인에 post요청을 할 수 없기 때문에 서버프록시를 이용해야합니다. 제가 가지고 있는 이 tomeii서버는 몬가 https를 요청하니 에러를 뿜는 것 같아-_- YQL이라는 것을 찾았습니다.
이거 좀 짱인데, 나중에 공부해봐야겠습니다.

일단 YQL에 포스트를 날릴 TABLE을 만들어야 하네요. YQL은 저도 잘 모르니 POST요청하는 거 그냥 찾아서 따라해봅니다-_- 아래 사이트 참조
http://www.wait-till-i.com/2009/11/16/using-yql-to-read-html-from-a-document-that-requires-post-data/

facebook_wall_table.xml
[code]
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta>
<author>Mudchobo</author>
<description>HTML pages that need post data</description>
<sampleQuery>
<![CDATA[
select * from {table} where
url='http://mudchobo.tomeii.com/test/facebook/test.php'
and postdata="access_token=a&message=b" and xpath="//p"
]]>
</sampleQuery>
<documentationURL></documentationURL>
</meta>
<bindings>
<select itemPath="" produces="XML">
<urls>
<url>{url}</url>
</urls>
<inputs>
<key id="url" type="xs:string" required="true" paramType="variable"/>
<key id="postdata" type="xs:string" required="true" paramType="variable"/>
<key id="xpath" type="xs:string" required="true" paramType="variable"/>
</inputs>
<execute>
<![CDATA[
var myRequest = y.rest(url);
var data = myRequest.accept("text/html")
.contentType("application/x-www-form-urlencoded")
.post(postdata).response;
var xdata = y.xpath(data,xpath);
response.object = <postresult>{xdata}</postresult>;
]]>
</execute>
</select>
</bindings>
</table>
[/code]
뭐 잘은 모르겠지만, inputs태그에서 postdata랑 url을 받고 여기서 처리를 하는 듯.
javascript같은게 있는데, 여기서 post어쩌구 함수를 호출해서 날리고 response객체 저장시켜놓으면 그걸 얻어올 수 있는 것 같음.

쿼리는 이렇게 날리네요.
[code]
use 'http://mudchobo.tomeii.com/test/facebook/facebook_wall_table.xml' as htmlpost;
select * from htmlpost where url='https://graph.facebook.com/자기페이스북아이디/feed' and postdata='access_token=access_token&message=메세지'and xpath='//p'
[/code]
저렇게 yql을 getJSON으로 날리면 데이터처리를 야후서버에서 하겠죠^^ 그리고 리턴값은 글을 작선한 뒤에 아이디를 받아옵니다.

ps1. YQL진짜 신기하네요-_- 저런식으로 하면 정의된 테이블에 의해서 처리를 한다음에 결과값을 실어서 주네요.

ps2. 예제주소는 여기에....
http://mudchobo.tomeii.com/test/facebook/

Posted by 머드초보

,

[유틸리티] Google에서 만든 Javascript 최적화 및 압축도구 Closure Compiler

유틸리티 활용하기 2010. 9. 15. 20:58

야후에서 만든 YUI Compressor도 있죠.
하지만 구글에서 만든 Closure Compiler는 다양한 방법으로 제공합니다. YUI Compressor같은 경우에는 java로 만든 jar파일을 통해 콘솔로 실행하는 법 밖에 없는 반면에 Closure Compiler는 웹에서 UI형태, API, 애플리케이션(JAR형태) 3가지 방법이 존재합니다.

Google Code프로젝트 Closure Compiler
http://code.google.com/intl/ko-KR/closure/compiler/

UI페이지는 아래와 같습니다.
http://closure-compiler.appspot.com/

URL을 보면 appspot인 것을 보니, 구글앱엔진으로 만들어진 것 같습니다^^ 구글은 구글제품을 활용을 너무 잘하네요^^
이 사이트에 가보면 좌측이 원본소스를 입력하는 곳이 있고, 우측에 컴파일된 파일이 나오는 곳이 있습니다. 사용법은 간단하네요~ 근데 모드를 3가지 중 선택할 수 있는데, 하나는 그냥 공백만 없애고, 하나는 노멀한 심플모드고, 하나가 Advanced모드인데, 이걸로 하니 내부 변수까지 다 바꿔버리네요. 그래서 이걸 사용하고 있는 곳에도 같이 compile을 해버리던가 아님 사용하고 있는 곳에 변수를 바꿔줘야하네요^^
물론 Advanced모드가 훨씬 많이 줄어드네요^^ 변수명도 한자리로 다 바뀌고 ^^