IT 기술 따라잡기

코로나에서 지난 주부터 Corona SDK Ambassador 의 글을 하나씩 받아서 웹 싸이트 블로그에 올리겠다고 했습니다.

첫 글은 미국에서 코로나 SDK 책을 펴낸 Dr. Brian G. Burton 의 글입니다.

질문과 답변 형식으로 돼 있네요. 질문은 굳이 번역하지 않았습니다.

여러분들에게도 도움이 될 수 있을 것 같아 제 블로그에 올립니다.

==== o ==== o ==== o ==== o ====

Q&A with Dr. Brian G. Burton, Corona Ambassador

Dr. Brian G. Burton, Ed.D.은 Burton’s Media Group의 대표이고 Abilene Christian University의 교수이며 코로나 명예 대사 중 한명 입니다. 또한 그는 "코로나로 모바일 앱 개발하기 , Mobile App Development with Corona: Getting Started" 책의 저자이기도 합니다. 이 책은 코로나를 이용해서 모바일 앱과 게임을 개발하는 것을 도와주는 가이드죠.

Dr. Burton 당신의 얘기를 공유해 줘서 고맙습니다.

==== o ==== o ==== o ==== o ====

What is your background and experience in development?

몇몇의 코로나 개발자들 처럼 저는 1980년대에 시작했습니다. 고등학교 때 TRS-80(1977년에 발표된 Radio Shark 사의 개인용 컴퓨터)이 나왔습니다. 완전 매료 됐죠. 그 컴퓨터가 완전 유행이라는 말을 계속 듣긴 했지만 저는 안정적인 GM의 공장 일을 하는 직업을 선택해야만 했습니다. 그러다가 Ball State University 에서 Computer Science과 Management Information Systems을 공부하기로 결심했죠. 그러면서 저는 원래 계획했던 실리콘 밸리로 가는 것보다 진짜로 제가 가르치는것을 좋아하고 있다는 것을 깨달았습니다. 나는 중고등 학교때 computer science를 생각 했었습니다. 재가 그것을 석사 과정을 할 때 우리 가족들은 미주리주로 이사했습니다. 그리고 Ozark Mountains 와 사랑에 빠졌죠.

제 석사와 박사 과정을 할 때 computing을 할지 education을 할 지 정말 고민이 많이 됐었습니다. 그래 둘 다 같이하자! 컴퓨터 쪽을 가르치면 둘 다 만족할 수 있을 것 같았습니다. 석사 과정을 할 때 Freshman level 컴퓨터 코스를 가르치라는 제의를 받았습니다. 동시에 당시 제가 약간 인기가 있어서 college level에서 full time으로 가르치지 않겠느냐는 제의도 받았습니다. 제가 박사과정을 마쳤을 때 당시 14살이던 제 아들이 게임 디자인과 개발을 공부하고 싶다고 얘기하더라구요. 그게 2004년 이었습니다. 그 당시에는 그렇게 명망있는 게임이 없었습니다. 미주리 주립대학에서 Jeff Huff와 같이 일하는 동안 우리는 game level design 전공을 시작했습니다. 거기서는 프로그래밍과 그래픽 디자인을 가르쳤습니다. 그 강좌는 중부 미주리에서 인기있는 강좌가 됐습니다.

How and why did you become interested in developing mobile apps?

2007년 그 게임 개발 강좌가 성공했다는 것이 알려져 Alma Mater가 텍사스로 옮겨서 그런 강좌를 시작하는게 어떻냐고 제의를 했습니다. 이 시기는 애플 (Apple) 이 iPod Touch와 첫번째 세대 iPhone을 내 놓은 시기였습니다. 저도 어얼리 어답터 중의 한명이었습니다. 그래서 2009년 모바일 앱 개발 강좌를 가르치기 시작했습니다. (스탠포드가 그들의 첫번쨰 코스를 가르친 후 단 몇 주 후의 일이었습니다). 그 코스는 아주 성공적이었습니다. 그래서 그 강좌는 곧바로 정규 강좌로 채택 됐습니다.

2010년대 초 저는 제 학생들과 첫번 째 앱을 개발했습니다. iPad에서 학교 신문을 보여주는 앱이었습니다. (iPad 는 토요일에 나왔고 그 앱은 바로 다음 월요일에 선보였습니다) 그 프로젝트 이후로 학급에서는 꾸준히 다른 앱을 개발하자는 요구가 이어졌습니다.

How did you learn about Corona and what do you like about it?

2010년 초 앱을 개발하는데 좀 더 좋은 방법이 있다는 것을 알게 됐습니다. 저는 iOS 와 안드로이드에서 동시에 동작하는 모바일 앱이나 게임을 만들고 싶었거든요. 그렇게 할 수 있는 툴이 없을까 찾다가 보니까 그런 방법을 고민하는 그룹들이 별로 안 된다는 것을 알았습니다. iOS와 안드로이드 앱이나 게임 개발을 동시에 지원하는 회사는 오직 Ansca Mobile의 Corona 뿐이었습니다. 그래서 이 코로나를 한번 배워보자고 생각했습니다. 금방 매료가 됐죠. 여름 방학동안 제 블로그에 이 툴을 어떻게 사용하는지에 대한 정보를 올렸습니다. 그리고 그해 가을 그것을 거의 1/3 학기 동안 가르쳤습니다. 학생들은 코로나에 대해서 좀 더 보여주길 바랬죠. 그래서 금요일 수업은 코로나에 대해서만 공부하기로 했습니다. 그 클래스 프로젝트로 우리는 Space Explorer 의 초기 버전을 개발했습니다. (이 앱에 대한 내용은 제 책 9장과 10장에 있습니다.)

지금은 코로나로 인해서 컴퓨터 관련 학과 이에의 곳에서도 모바일 앱과 게임 개발 클래스를 해 달라는 제의를 받고 있습니다. 저는 코로나가 누구에게나 앱과 게임 개발을 가능하게 할 거라고 믿습니다.

What interesting projects have you worked on (Corona and non-Corona related)?

작년에 저는 제 클래스에서 사용할 코로나에 대한 책이 하나도 없다는 것이 문제라는 생각을 했습니다. 그래서 책을 쓰기로 작정했죠. 결과적으로 저는 두개의 책을 썼습니다. 하나는 학과 수업을 위한 것이구요. (Beginning Mobile App Development with Corona) 다른 하나는 제 학부 학생 뿐만 아니라 모든 분들을 위한 책입니다. (Mobile App Development with Corona: Getting Started)

말씀드리고 싶은 것은 이 책을 쓰기 시작했을 때는 단지 제가 가르치는 강좌를 위해서 였습니다. 처음에는 일반인을 대상으로 한 책은 염두에 두지 않았습니다. 그런데 하루는 학부 교재를 출판하는 회사의 영업사원이 제 사무실에 들렀습니다. 그 때 제가 그 책을 썼다고 말했죠. 48시간 만에 저는 계약 제안을 받았습니다. 그 책을 쓰고 그것을 지원할 웹 사이트를 만들고 그리고 몇가지 더 일을 해 달라는 것이었습니다. 그들은 책 판매의 10%를 주겠다고 했습니다. 그리고 다른 몇몇개의 출판사에서 비슷한 제의를 받았습니다. 그 때 저는 제가 쓴 책이 다른 사람들이 읽고 싶어 하는 내용일 수도 있겠구나 라는 생각을 했습니다.

그러다가 이런 생각이 들었습니다. 애플이나 아마존이나 구글에 앱을 출판하면 70%를 받는데 왜 이 책을 쓰고 70%보다 훨씬 못한 돈을 받아야 하나? 그래서 별도로 독립적인 루트를 통해서 출판을 하기로 결심했습니다. 출판사랑 같이 하면 훨씬 더 많은 광고를 할 수 있다는 걸 압니다. 하지만 저는 인디 작가, 인대 앱 개발자가 되는것이 훨씬 행복합니다. 그리고 또 가격도 낮출 수 있구요. 여러분이 제 책을 구매해 주시면 저의 indie work를 도와 주실 수 있습니다.

What projects are you working on next?

Beginning Mobile App Development with Corona를 집필하고 있을 때 몇가지 중요한 일들이 일어났습니다.

1) 모바일 앱 개발이 몇개 주에서 고등학교 수업 과정이 되었습니다.
2) 아주 많은 사람들로부터 모바일 앱과 게임을 개발하고 싶다는 말을 많이 들었는데 어떻게 해야 하는지를 모르고 있었습니다.
3) 제 웹사이트에 단지 코딩 하는 법만 올리는 대신 게임을 만들기 위한 전체 개발 과정에 대해서 알려달라는 요청을 많이 받았습니다.
4) Beginning Mobile App Development with Corona를 다른 나라 말로도 출판 해 달라는 부탁을 많이 받았습니다.

이러한 것들은 저를 지금 현재 하고 있는 몇가지 아주 신나는 프로젝트로 안내했습니다. 첫번째로 새로운 책을 시작했습니다. Learning Mobile Application Development 이 책은 모바일 앱과 게임 프록래밍을 배우기 원하는 프로그래밍 경험이 전혀 없는 사람을 위한 책입니다. 이 책은 고등학생이나 대학을 준비하는 혹은 프로그래밍 경험이 전혀 없는 사람들에게 맞도록 만들고 있습니다. 이 책은 2012년 여름에 나올 겁니다.

두번쨰로 저는 게임을 개발하기 위한 전체 과정에 대해 가르칠 수 있는 책 시리즈를 만들기 위해 몇명의 게임과 그래픽 아티스트 (14살 밖에 안 된 내 아들도 포함해서) 들과 일을 하고 있습니다. 이 시리즈 중 첫번째 책은 2012년 봄에 나올 겁니다.

마지막으로 저는 중국어,한국어,이탈리아어, 포르투갈어, 러시아어 그리고 스패니쉬어로 Beginning Mobile App Development with Corona를 번역하는 작업을 몇몇의 코로나 개발자들과 하고 있습니다.

그리고 제 여가시간에는 개인적으로 앱을 개발하고 있기도 합니다.

일단 센차터치에서 그동안 버전업이 됐길래 저는 최신버전으로 새로 받아서 작업하고 있습니다.

제가 받은 버전은 sencha-touch-2.0.0-gpl 입니다.

제가 센차터치 (Sencha Touch) 튜토리얼을 몇개 번역 했는데요.

Component 까지 번역을 했군요.

그런데 실습을 하지 않으면서 계속 번역만 하니까 제가 잘 이해를 못하겠더라구요.

제일 모르겠는건 어떻게 MVC 모델을 적용해서 앱을 만드는지 입니다.

그래서 지난 시간에 했었던 Component 글의 첫번째 예제를 MVC 모델을 적용해서 고쳐 보겠습니다.

var panel = Ext.create('Ext.Panel', {
    layout: 'hbox',

    items: [
        {
            xtype: 'panel',
            flex: 1,
            html: 'Left Panel, 1/3rd of total size',
            style: 'background-color: #5E99CC;'
        },
        {
            xtype: 'panel',
            flex: 2,
            html: 'Right Panel, 2/3rds of total size',
            style: 'background-color: #759E60;'
        }
    ]
});

Ext.Viewport.add(panel);

이것을 app.js에 넣어서 직접 실행해 보려면 아래와 같이 하면 됩니다.

Ext.application({
    name: 'Panel',

    launch: function() {

        var panel = Ext.create('Ext.Panel', {
        layout: 'hbox',

        items: [
            {
                xtype: 'panel',
                flex: 1,
                html: 'Left Panel, 1/3rd of total size aaa ',
                style: 'background-color: #5E99CC;'
            },
            {
                xtype: 'panel',
                flex: 2,
                html: 'Right Panel, 2/3rds of total sizeaaa',
                style: 'background-color: #759E60;'
            }
            ]
        });

        Ext.Viewport.add(panel);
    }
});

보시면 아시겠지만 튜토리얼에 있는 코드를 복사해서 Ext.application 안의 launch:function() 안에 넣으시면 됩니다.

문제는 이 소스를 어떻게 MVC 모델에 맞게 수정하느냐 입니다.

이 소스는 view 만 있는 간단한 소스 입니다. 그러니까 폴더 구조를 아래와 같이 가져가겠습니다.

Panel 폴더가 프로젝트 폴더입니다.

그 안에 index.html과 app.js 가 있습니다. 그리고 sencha-touch.css 와 sencha-touch-all.js는 다운받은 Sencha Touch 소스 파일에서 복사해 넣습니다.

그리고 MVC 패턴을 적용하려면 app 폴더를 만들어야 하는 것 같습니다.

그 app 폴더에 view,controller,model,store 등의 폴더를 만드는데 이 소스에서는 view 만 있으면 되니까 view를 만들었습니다.

저 view 안에 panel.js 파일을 만들어서 그 안에 실제 view 를 담당하는 코드를 넣겠습니다.

일단 index.html 코드를 볼께요.

<!DOCTYPE html>
<html>
<head>
    <title>MVC Sample with Panel</title>
    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

소스는 간단합니다. html 파일에서는 단지 css와 js 파일을 불러왔습니다.

sencha-touch.css와 sencha-touch-all.js 파일을 Panel 폴더 밑에 복사해 넣었기 때문에 위와 같이 불러왔는데요. 서버에서 동작 시키려면 해당 경로를 써 주셔야 합니다.

그 다음은 app.js 파일을 보겠습니다.

Ext.application({
    name: 'Panel',

    launch: function() {
        Ext.create('Panel.view.panel');
    }
});

소스 코드가 아주 간단해 졌죠?

MVC 모델을 쓰는 이유가 이렇게 app.js를 간단하게 만들고 각 기능별로 폴더와 js 파일을 나눠서 코드를 관리하기 위해서 입니다.

여기서는 launch:function() 안에 Ext.create 함수를 사용해서 Panel.view.panel 을 불러왔습니다.

처음 Panel 은 위에서 설정한 이 애플리케이션의 name 이고 view는 app 폴더 밑에 있는 view 폴더를 가르킵니다. 그리고 맨 마지막 panel 은 view 폴더 밑에 있는 panel.js를 말합니다.

이렇게 하면 app/view/panel.js 파일을 불러올겁니다.

다 하고 나니까 이렇게 간단한데 몰랐을 때는 이것 맞추느라고 엄청 헤맸습니다.

다음은 panel.js 파일을 보겠습니다.

Ext.define('Panel.view.panel', {
    extend: 'Ext.Container',

    config: {
            fullscreen: true,
            layout: 'hbox',
            items: [
            {
                xtype: 'panel',
                flex: 1,
                html: 'Left Panel, 1/3rd of total size',
                style: 'background-color: #5E99CC;'
            },
            {
                xtype: 'panel',
                flex: 2,
                html: 'Right Panel, 2/3rds of total size',
                style: 'background-color: #759E60;'
            }
            ]
    }
});

우선 Ext.define 함수를 사용합니다. 곧바로 이 파일의 경로를 표시하구요.

다음으로는 Ext.Container 를 extend 합니다. 이 부분을 extend 하지 않으면 에러가 납니다.

Container 부분 튜토리얼을 번역 했는데 왜 그런지 아직 딱 떠오르지 않네요. 다시 한번 봐야겠습니다.

그 다음은 config 를 사용하고 그 안에서 화면을 full 로 해 준 다음에 원래 튜토리얼에 있던 소스를 위와 같이 해 주면 됩니다.

여기까지 하느라고 많이 헤맸습니다.

아래 제가 완료한 소스파일 올려 놓습니다. 혹시 저처럼 MVC 패턴 적용이 많이 헛갈리시는 분들은 이 소스가 도움이 되실겁니다.

Panel.zip

다음 글은 계속 센차터치의 튜토리얼을 다루겠습니다.

될 수 있는대로 소스코드를 이것 저것 변경해 보고 적용해 봐야 완전히 제것이 될 것 같군요.

다음에는 각 디바이스별로 화면을 달리 하는 Profile 을 한번 적용해 볼까 합니다.

지난주부터 코로나에서는 새로운 블로그 코너를 만들었습니다.

매주 Corona SDK 웹사이트의 포럼이나 댓글에 달린 질문 중에 자주 질문되는 것 몇가지를 골라서  답을 주는 그런 코너입니다.

지난주 수요일에는 5가지가 올라와 있는데요.

저나 여러분한테도 도움이 될 것 같아 이렇게 번역해서 글을 올립니다.

====== o ==== o ==== o =====

FAQ Wednesday  

Posted by Tom Newman

이 블로그 포스트는 새로운 시리즈인데요. 매주 수요일 코로나 댓글이나 포럼등에서 자주 나오는 질문들 (FAQ)을 모아서 이에 대한 답을 올리려고 합니다. 그 질문들은 코로나를 사용하고 계신분들도 있고 아니면 처음 접하시는 분들도 계실 겁니다.

이제 시작하겠습니다.

Question 1

코로나 시뮬레이터를 돌릴 때 코로나 터미널에 print 메세지를 볼 수가 있는데요. Xcode iOS 시뮬레이터나 iOS 디바이스에서 돌릴 때는 print로 찍은 메세지를 볼 수 없습니다. 뭐가 잘못 된 것일까요?

Answer

만약 Xcode를 사용해서 앱을 로드하거나 iOS 디바이스를 테스트 한다면 Xcode 콘솔에서 print 메세지가 display 될 겁니다. Xcode iOS 시뮬레이터를 사용하고 계신다면 Mac의 콘솔앱을 start 하시면 그 메세지를 보실 수 있을 겁니다. 만약 안드로이드 디바이스를 테스트 하신다면 안드로이드 SDK를 다운받아서 adb logcat을 사용하셔야 print 메세지를 보실 수 있습니다.

Tip: 만약 print 메세지를 즉각즉각 확인하시지 못하신다면 main.lua 파일 맨 위에 아래 코드를 붙여 주세요.
io.output():setvbuf('no')


Question 2

display object의 x,y 위치를 세팅하는게 헛갈립니다. 제가 생성할 때의 값이 생성된 이후에도 똑 같은 건가요?

Answer

대부분의 객체들이 x,y 포지션으로 위치를 정의하면 top-left 를 기준으로 위치를 잡습니다 그리고 생성된 다음에는 객체의 중심으로 바꿉니다. 예외 적인 경우는 display.newCircle, display.newLine, display.newGroup 입니다. display.newCircle 객체는 원의 중심을 기준으로 생성됩니다. 그리고 display.newLine은 start와 end 포인트를 사용합니다. display.newGroup은 top-left 포인트를 기준으로 생성되고 생성 된 이후에도 x,y 레퍼런스 포인트가 바뀌지 않습니다. 다른 모든 display object 들은 생성되고 나서 center 기준점을 사용합니다. 이 말은 display 객체의 x,y  파라미터를 변경한다면 그 객체는 객체의 중심을 기준으로 해서 움직일 거라는 겁니다. object:setReferencePoint API 생성 후에 어떤 기준점을 사용할 것인지 정할 수 있도록 해 줍니다.

이런 혼란을 피하기 위해서 프로그래머들은 객체를 처음 생성할 때 (top-left 가 기준일 때) 0,0을 만들어 놓고 나서 생성된 후에 그 객체의 x,y 값을 세팅해 줍니다. 이렇게 하면 그 객체의 x,y 포지션은 (별도로 reference point를 변경하지 않는 이상) center를 기준으로 삼게 된다는 얘기입니다.


Question 3

멀티플 터치 객체들을 사용할 때, 스크린에서 그 객체들이 겹쳐질 때 touch 이벤트가 사용되는 것을 볼 때가 있습니다. 이런 경우 어떻게 stop 시켜야 하죠?

Answer

터치 리스너를 call 하게 되면 그 터치가 일어난 곳의 최상위 객체 (top-most object) 에 그 이벤트가 전달 됩니다. 만약 리스너가 true를 리턴한다면 그 event dispatcher는 그 touch event를 stop 시킬 겁니다. 만약에 리스너가 false를 return 하면 dispatcher는 터치된 위치에 있는 그  다음 객체의 touch listener를 볼겁니다. 이러한 작업은 계속 그 밑으로 밑으로 똑 같이 적용 됩니다. 리스너가 true를 return 할 때까지요. 일반적인 실수로는 return 값을 아예 주지 않는 경우인데요. 그렇게 되면 디폴트로 false가 return 됩니다. 그러니까 그 이벤트를 밑의 object에도 적용시키지 않으려면 항상 이벤트 리스너 마지막 줄에 return true를 해 주셔야 합니다.

Question 4

I’m getting build errors saying the code signing was wrong or invalid entitlements. What can cause this?
빌드할 때 code signing 이 틀리거나 invalid 하다고 나옵니다. 왜 그럴까요?

Answer

빌드할 때 에러가 난다면 코드의 syntax 에러는 아닙니다. build.settings를 지우고 한번 빌드를 해 보세요 그래도 에러가 나는지요. build.settings file이 없을 때 에러가 나지 않으면 build.setting 파일쪽이 문제가 있는 겁니다. 그리고 코로나의 샘플 앱을 한번 빌드 해 보세요. (Hello World 같은...) 그러면 여러분의 프로젝트에 문제가 있는지 없는지 알 수 있을 겁니다. 애플리케이션 이름(폴더 이름)을 test 같은 간단한 이름으로 한번 해 보세요. 그럼 애플리케이션 이름에서 문제가 있는지 없는지 알 수가 있을 겁니다.

Question 5

서브디렉토리에 있는 저의 Lua 코드를 로드하기 위해 require를 사용 합니다. 그리고 코로나 시뮬레이터에서는 잘 돌아 갑니다. 그런데 이것을 제 디바이스에서 돌리면 충돌이 일어납니다. 코로나에서는 서브디렉토리로부터 코드를 로딩하는 것을 지원하나요?

Answer

예 서브디렉토리안에 Lua 코드를 만드실 수 있습니다. 하지만 주의하셔야 할 부분이 있습니다. 코로나 시뮬레이터와 디바이스 사이에는 약간 다른 부분이 있습니다. 첫번째로 require 구문에 있는 파일 이름은 실제 파일 이름이어야 합니다. 일반적인 에러는 실제 파일 이름은 testlib 인데 그 구문에서는 require("Testlib") 이라고 하면 에러가 납니다. 코로나 시뮬레이터에서는 둘 다 작동을 하지만 디바이스에서는 작동하지 않을 겁니다.

두번째로는 subdirectory를 어떻게 표기 했는가 입니다. 맞는 표기는 . 을 사용하는 겁니다. 만약 여러분의 라이브러리 파일이 test.lua 이고 그것이 library 서브디렉토리에 있다면 test = require("library.test") 라고 해야 합니다.

코로나 시뮬레이터에서는 디렉토리 구분자로 . (마침표) 뿐만 아니라 / (슬래시)도 허용합니다. 하지만 디바이스에서는 / 를 사용하면 에러가 날 겁니다. 디바이스에서는 항상 구분자로 . 을 사용해야 합니다. 그러므로 루아 파일의 이름에는 . 가 들어갈 수 없습니다.

한가지 더 말씀 드리자면, 가끔 require 구문을 괄호 없이 사용하는 경우가 있습니다. 이것은 오직 한개의 함수 파라미터만 존재하고 그것이 스트링이거나 테이블일 경우에만 허용됩니다. 그래서 위에 썼던 예제를 이 형식으로 사용한다면 test = require "library.test" 가 될 겁니다.


여기까지가 오늘의 FAQ 입니다. 오늘의 FAQ를 통해서 뭔가 새로운 것을 배우셨기를 바랍니다. 만약 질문이 있으시면 forum들에 올려 주세요. 아니면 댓글에 올려 주시던가요. 여기에 짧게 댓글을 다셔도 됩니다. 하지만 되도록 forum 을 이용해 주실것을 부탁드립니다.