IT 기술 따라잡기

오늘은 Corona SDK 로 만든 돈 넣고 돈 먹기 게임을 공부해 보겠습니다.
예전에 장터에 가면 사발이 세개 있고 그 중 한개에 구슬이나 주사위를 넣은 다음 막 돌린 다음 그 주사위가 어디에 있는지 알아 맞추는 놀이가 있었죠?
야바위라고 어른들이 그러셨는데....

Carlos Yanez 라는 개발자가 이 야바위를 모바일 애플리케이션으로 개발 했습니다. Corona SDK로요.
그리고 그 소스를 공유했습니다.

제가 보기엔 아주 프로그램이 알차게 잘 돼 있는 것 같습니다.
이 소스코드를 분석하면 아주 공부가 잘 될 것 같습니다.
(그리고 이 야바위 게임이 전 세계적으로 있었나 보네요. 몰랐는데......)

아래 각 게임 화면들을 캡쳐 했습니다.

이걸 게임 개발 하기 전에 개발자가 받은 Story Board 라고 생각을 해 보죠.
아주 훌륭한 기획자라면 이렇게 디자인까지 다 된 스토리보드를 개발자에게 줄 거예요.
그런데 너무 그런거까지 기대하지 마세요. 디자인 까지는 안 되더라도 모바일 이미지 내 objects 배치해서 주는 기획자도 드물거예요.
그냥 볼펜으로 끄적인 스토리 보드만 줘도 감지덕지죠.
안 에 들어가는 Objects 들하고 있게 될 Event 들 하고 그 이벤트로 인해 진행되는 object 들의 behavior 만 잘 정리 되면 되죠 뭐.

하여간 아래 내용은 세계에서 최고로 개발자에게 편하게 기획하는 기획자가 만든 앱의 스토리보드라고 생각해 봐요 우리.

1. 첫 화면

Objects (객체들)

:  bg 배경이미지, title 게임 제목,  playBtn 플레이 버튼, creditsBtn 크레딧 버튼

Events/Behavior (이벤트)

: playBtn 누르면 현재화면 중 배경만 남고 모두 없어짐 -> 게임 화면으로 옮김

  현재 화면 객체들 왼쪽으로 slide 되면서 없어질 것

: creditsBtn 누르면 Credits를 보여 줌

  플레이와 크레디트 버튼 없어지고 크레디트 이미지가 왼쪽에서 slide 되면서 나옴

2. Credit 화면 (Credit 버튼 누르면 나옴)

Objects

: Credits 이미지

  나머지 bg와 title은 이전화면에서 없어지지 않고 그대로 있음

: Events/Behavior

  Credits 이미지를 클릭하면 이미지가 왼쪽으로 사라짐

  1번 화면이 다시 나옴

3. 게임 화면

objects

: bg 배경화면 그대로

: bank 왼쪽 상단 숫자, 처음엔 5자가 표시 됨

: bankText BANK 이미지

: ball

: s1/s2/s3 shell 3개

: buttonBar 밑에 진한 사각형

: msg 좌측 하단에 메세지, 처음에 Click Bet to start 가 표시 됨

: betBtn 게임 시작 버튼

Events/Behavior

betBtn 버튼에 tab 리스너를 담.

betBtn을 누르면

- Bank 숫자에서 -1을 함

- betBtn 리스너를 Remove 함

- msg 텍스트를 없앰

- 위로 올라간 shell 이 ball 을 덮음

- shell 을 총 5번 움직임. 움직임 속도는 600으로 함. 랜덤하게 움직임

4. Shell 이 다 움직이고 User 의 선택을 기다리는 화면, 선택한 후 화면

objects

: 게임 화면이므로 3번 게임화면과 똑 같음

Event/Behavior

: msg는 Click where the ball is 를 표시함

: 각 shell 에 리스너를 담

: 어떤 Shell 을 클릭해도 공이 있는 Shell이 올라감

: 공이 있는 Shell 을 클릭하면 bank+2를 해 줌, msg는 Correct! Click Bet to play again 을 표시해 줌

: 공이 없는 Shell 을 클릭하면 msg는 Wrong! Click Bet to play again을 해 줌

: betBtn 에 다시 리스너를 담,

: bank 가 0점이면 alert() 화면을 띄움

5. Game Over 화면 (Alert)

Objects
: alert 이미지
Event/Behavior
: msg는 표시 안 함
: alert 이미지에 리스너를 담
  클릭하면 게임을 재 시작 함


자 여기까지가 바로 세계에서 제일 훌륭한 기획자가 만든 스토리 보드 입니다.
기획에서 이정도만 해주면 개발자는 아주 편하겠죠?

이제 이 것을 토대로 Flow Chart 도 만들어 보고 Use Case 도 만들어보고 나름대로 함수(클래스) 설계도 해 보세요.

아마 그러면 실력향상에 아주 도움이 될 겁니다.

다음 시간엔 이 스토리 보드를 가지고 소스 코딩을 해 보겠습니다.

이전 글에 이어서 계속 HTML5 의 Form 에 대해 알아보겠습니다.

*** type="color"
이 기능도 아주 매력적인 기능입니다.
색을 유저가 고를 수 있게 도와주는 기능인데요. 단지 HTML의 Input 태그에서 type만 color로 해주면 됩니다. 너무 간단한데 아직까지는 Opera에서만 지원이 되나봐요.
어제 코드에 아래 코드를 추가해 주세요.
            <label for="background-color">Choose a calor for background(Opera 11 only) :</label>
            <input id="background-color" type="color" /> <br/>

이렇게 유저가 색을 고를 수 있구요. Other를 누르면 좀 더 다양한 색을 고를 수 있습니다.

*** type="range"
이 기능은 한정된 숫자 범위 중에 유저가 입력 없이 Drag나 Touch 로 숫자를 선택할 수 있는 기능입니다.
일반 웹페이지에서도 사용할 수 있겠지만 모바일에서 훨씬 유용하게 사용될 수 있을 것 같네요.
<label >Forget about writing, just slide.</label>
 <input type="range" min="1" max="10" step="1" value="1"/><br/>

number type 과 같이 미니멈,맥스멈, step을 설정할 수 있습니다. 물론 대부분의 input 에서 지원되는 value 도 지정할 수 있구요.
위 화면은 오페라 브라우저 입니다. 다른 브라우저들에서는 다르게 나올 수 있습니다. HTML5가 지원이 안 되는 브라우저에서는 안 나올 수도 있구요.
모바일에서는 안드로이드, 아이폰 모두 HTML5 를 지원하니까 다 제대로 나올 겁니다.

*** type="file"
파일 업로드 할 때 사용할 수 있습니다.
여러 파일을 한꺼번에 업로드 하는 것 을 지원 하려면 multiple을 사용하시면 됩니다.
실제로 업로드(서버로)를 하려면 Server side script 언어인 PHP,JSP,ASP 등을 사용해야 합니다.
<input type="file" name="multiplefieldupload" multiple /><br/>

*** datalist
사용자에게 여러 리스트 중에서 하나를 선택하도록 할 때 datalist 를 이용합니다.
이 경우 <input > 태그의 type은 text 이지만 이외에 list="aaa" 라고 따로 리스트를 지정해 줍니다.
그리고 <datalist id="aaa">로 datalist 태그를 만들고 그 안에 원하는 리스트를 넣으면 됩니다.
그리고 유저가 리스트 중 하나를 선택하면 이 값을 받아서 display 할 수도 있습니다.
예전에는 모두 javascript로 작성했는데 HTML내에서 아주 간단하게 처리할 수 있네요.
아래 코드를 넣어 보세요.
<label> <h6>요즘 인터넷에 떠도는 이명박 대통령이나 친인척 관련 비리 루머들이 있습니다. <br/>
                여러분은 이중 어느것이 진실이고 실제로 어느것이 이명박 대통령과 관계가 있다고 생각하시나요? :

</h6>
            <input type="text" name="mbbiri" list="mbbiri"/>
                <datalist id="mbbiri">
                    <option value="주가조작BBK실소유주">
                    <option value="내곡동사저비리">
                    <option value="부산저축은행비리">
                    <option value="4대강 비리">
                    <option value="인천공항매각비리">
                    <option value="삼화저축은행비리">
                    <option value="모두다 관련이 있다">
                    <option value="아무것도 관련이 없다">
                </datalist>
            </label> <br>
            <label> You have entered:
                <output onforminput="this.value=mbbiri.value" />
            </label><p>

브라우저에서 실행합니다.

유저가 textbox를 선택하면 프로그램적으로 얘기하면 이 textbox가 활성화 되면 이렇게 리스트가 출력 됩니다.

그리고 유저가 이 리스트 중 아무거나 선택을 하면 그 선택한 값을 이렇게 출력 할 수도 있습니다.

조금 정치적인 예문이었죠?

인터넷 뉴스 보면 나오니까... 들은 얘기들인데... 내 생각은 말 못하겠어요... ^^

그래서 급하게 '아무 말 못하겠다'를 하나 더 만들어서 그걸 선택해 버렸네요.

쫄지 말아야 되는데... :)

아 그리고 론스타 비리, 디도스 부정선거 비리도 있는데 깜빡했다.. 아쉽네...

지난번에도 썼었는데..

학생은 하라는 공부하고 직장인들은 경제를 위해서 열심히 일해야 합니다.

그리고 국민들은 열심히 정치에 참여해야 합니다.   ^^

이 기능도 오페라 브라우저에서는 잘 됩니다. 그런데 다른 브라우저에서는 잘 되는지 모르겠네요. 제가 테스트하던 크롬에서는 안되네요.

***  placeholder

input box를 보면 미리 연한 글씨로 글자가 쓰여져 있는 경우가 있습니다. 유저가 그 textbox를 클릭하면 이 연한 글자는 지워지고 유저가 원하는 글자를 입력할 수 있게 되는데요. 이 연한 글자(guide)가 나오도록 하는 것이 placeholder 입니다.

<input type="text" placeholder="Type Anything"> <p>

보시면 맨 아래 input box에 Type Anything이라는 글자가 미리 나와 있죠?

*** Required

회원가입을 하다보면 id, password 같은 것들은 필수 입력 항목입니다.

이 필수 입력항목을 넣지 않고 버튼을 누르면 이 입력 항목을 넣으라는 메세지가 나오죠?

예전에는 이것을 모두 JavaScript로 했는데 HTML5에서는 자체적으로 이 기능을 제공하고 있습니다.

방금 전 placeholder 했던 tag에 required 를 넣어 보세요.

<input type="text" placeholder="Type Anything" required> <p>

이렇게 Required 를 한 input box에 아무것도 안 넣고 버튼을 누르면 값을 넣으라고 메세지가 나옵니다.

브라우저 마다 똑 같이 나오는 것은 아닙니다. 처음 것은 Opera 이고 두번째 것은 Chrome 입니다. 기능은 제공하지만 모양이나 문구는 다르게 나옵니다.

*** date,time,month,week

유저에게 날짜등을 입력받을 때 달력이 뜨게 하는 기능이 있습니다.

아직까지는 이 기능 구현할 때 아주 복잡한 자바스크립트를 사용합니다.

하지만 HTML5에서는 아주 간단하게 이런 기능을 구현할 수 있습니다.

다만 이것도 오페라 브라우저에서만 지원이 되는 것 같습니다.

<label> Choose a date :
            <input type="date"/>
            </label><br/>
            <label> Choose a time :
            <input type="time"/>
            </label><br/>
            <label> Choose a month :
            <input type="month"/>
            </label><br/>
            <label> Choose a week :
            <input type="week"/>
            </label><br/>

이렇게 해당 칸을 클릭하면 달력이 뜹니다. 그냥 단지 type="date" 했을 뿐인데 아주 근사한 달력이 제공 되네요. (오페라에서만.. 아직 까지는...)

보시다 시피 date 타입은 연월일, month 타입은 연월 그리고 week 타입은 선택한 주가 1년중 몇번째 주인지가 나옵니다.

time은 1~24시간이 표시됩니다. 분단위로 위아래로 움직일 수 있고 직접 type 도 가능합니다.

여기까지 HTML5이 Form 에 대해서 알아 봤습니다.

그럼.. 새해 복 많이 받으세요....

HTML 5 의 Semantic 관련 태그 공부에 이어서 Form 관련 Tag에 대해 공부하겠습니다.
Form 은 웹페이지에서 아이디 비밀번호를 넣고 버튼을 누르면 로그인이 되는 부분.
그리고 회원가입할 때 이름,주소, 전화번호 뭐 이런거 넣을 때 버튼 누르면 회원가입이 되는 부분.
뭐 이렇게 유저가 데이터를 Type하고 그 데이터를 서버에 보내서 어떤 일을 처리할 수 있도록 하는 부분의 처음에 HTML 웹페이지의 Form에서 이뤄집니다.

일단 이것을 사용하려면 HTML의 <body> </body> 태그 사이에 <form> </form> Tag를 사용해서 구현합니다.

서버로 보내려면 <form > 태그 안에 정보 보낼 목적지가 들어가야 되고 그 목적지에서 PHP나 ASP 같은 Server side script 언어로 서버에 데이터를 보내는 등의 작업이 이뤄져야 하는데요.

이 부분은 여기서 공부하는 HTML5와는 다른 부분이라서 이 글에서는 HTML5 내의 <input> 태그의 종류(Type)에 대해서만 다루겠습니다.
이전 HTML보다 훨씬 진보된 여러 기능이 HTML5에서 지원 됩니다.
우선 아래와 같이 html을 작성 하세요.
<!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Form</title>
    <meta charset="utf-8"/>
</head>
<body>
    <form>
        <fieldset>
            <legend> This is the Web Form of HTML5. </legend>
          
        </fieldset>
    </form>
</body>
</html>

우선 <form></form>태그로 감싸고 그 사이에 <fieldset>과<legend> 로 내용이 들어갈 테두리와 그 제목을 넣습니다.

이제부터 이 <legend></legend> 밑에 코드들을 넣어 가면서 공부하겠습니다.
우선 아주 기본적인 요소인 <label> 태그와 <input> 태그 중에서 type이 text 인 것 과 email 인 것을 넣어 보겠습니다.

그리고 </fieldset> 바로 위에는 버튼을 넣겠습니다.

            <label name="name"> Name</label>
            <input name="name" type="text" /> <br/>
            <label name="email"> Email </label>
            <input name="email" type="email" /> <br/>


<input type="submit" value="Enter" />

이 코드를 넣으면 아래와 같이 됩니다.

위에는 Opera 브라우저에서 본 화면이고 아래는 Chrome 브라우저에서 본 겁니다.
나중에 배울 date와 color type 등은 아직까지 Opera에서만 지원이 되는 것 같더라구요.
그래서 아마 Opera 브라우저 화면으로 테스트를 진행하시면 좋을 겁니다.

여기서 label은 그냥 글자 써 넣을 때 사용하는 것이고 input 태그의 type 이 text 인 것은 user로부터 입력을 받기 위한 것입니다. text type 은 user 가 아무것이나 입력할 수 있도록 허용합니다.
반면에 type 이  email 인 경우에는 email 형식이 아닐 경우 즉 중간에 @이 들어가야 되고 그 이후는 도메인 주소가 되야되고 하는 그런 형식에 위배되면 메세지를 띄웁니다.

예전에는 이런것들을 모두 JavaScript에서 했는데 이제는 그냥 HTML5에서 다 처리해 줍니다.

마찬가지로 blog,숫자,전화번호에 대한 type 들도 따로 있습니다.

            <label name="blog"> Blog </label>
            <input name="blog" type="url" /> <br/>
            <label name="number"> Number </label>
            <input type="number" value="1900" min="1900" max = "2200"/><br/>
            <label name="phone"> Phone </label>
            <input id="phone" type="tel" /><br/>

blog는 인터넷 주소 규칙에 맞게 써야 합니다. 그렇지 않으면 위 화면 같이 메세지가 뜹니다. (http://coronasdk.tistory.com 이렇게 완벽하게 쳐 넣어야 합니다.)
그런데 오페라에서는 앞에 http://가 없으면 자동으로 넣어 주기도 하더라구요.
HTML5가 모든 브라우저에서 동일하게 적용되지 않기 때문에 이런 부분은 주의를 하셔야 합니다.
Mobile에서는 거의 모든 브라우저가 HTML5를 지원하기 때문에 제약이 덜 하겠지만요....
일단 type 이 blog 인 것은 웹 주소 형식을 체크해 주도록 되 있구요.
다음 number와 tel 은 모바일 웹을 개발 할 때 유용할 겁니다.
이곳 input box를 유저가 선택하면 모바일에서는 숫자 입력키보드나 전화번호 입력 키보드가 뜨게 될 테니까요.
number 는minimum 값과 maximum 값을 지정할 수도 있구요. 1단위로 넘어갈지 2단위로 넘어갈지 아니면 10씩 넘어갈지 정하는 step 이라는 인수도 있습니다.
type이 tel 이면 설명 드렸듯이 전화번호를 입력할 거라는 의미인데 모바일 폰에서 유용하게 사용 될 수 있습니다.

오늘은 여기까지 하구요.
다음 시간에는 Opera 브라우저에서 잘 지원되고 있는 date, color type을 비롯해서 range, file 업로드 그리고 datalist 기능 등에 대해 공부 해 보겠습니다.