개발 툴 2012. 2. 14. 15:55
1. 다운로드 및 설치
PhoneGap사이트 우측 상단의 DownLoad 버튼을 클릭하면 현재 버전이 1.4.1을 다운로드 받을 수 있다. 다운로드 받은 파일의 압축을 해제하면 아래와 같은 서브폴더들이 생성된다.


폴더명처럼 android, bada, blackberry, ios, symbian, webos, windows를 지원한다. ios 아래의 PhoneGap-1.4.1.dmg를 클릭하고 PhoneGap-1.4.1.pkg를 실행하면 설치된다.

2.  테스트
1) 프로젝트 생성
Xcode를 실행하고 새로운 프로젝트를 생성하면 아래와 같이 PhoneGap 템플릿이 추가되어 있다. "PhoneGap-based Application"를 선택해서 프로젝트를 생성한다.


2) 빌드 & 실행

Automatic Reference Counting를 사용하지 않고 코드에서 autorelease나 dealloc을 사용하기 때문에 빌드 옵션에서 ARC를 비활성화한다. (미리 프로젝트 생성시에 Use Automatic Reference Counting를 체크하지 않으면 된다.)


프로젝트의 Build Settings에서 위와 같이 CLANG_ENABLE_OBJC_ARC 항목을 NO로 설정한다.
 

실행하면 아래와 같이 "www/index.html" 페이지를 찾을 수 없다는 오류메시지가 출력된다. 해당 프로젝트 폴더에 가면 www 폴더는 이미 생성되어 있다.


www 폴더를 드래그 하여 Xcode 좌측의 프로젝트에 드래그&드롭으로 가져다 놓는다. 이동시 Folders 옵션에서 "Create folder references for any addes folders"를 선택한다. 이제 다시 실행하면 www/index.html의 내용이 아래와 같이 출력 된다.




HTML5를 이용한 멀티 플랫폼을 지원하는 개발툴이라는 이야기는 어디서 들었는데 오늘 PhoneGap을 설치를 해보았다. 아마 앱 개발자 보다는 웹 개발자들을 위한 툴이 아닐까 하는 생각도 든다. 기존 앱 개발자들도 다양한 플랫폼을 대상으로 한 웹 환경에서 실행될 수 있는 앱이라면 이런 솔루션들을 고려해 볼만 한 것 같다. 


PhoneGap에선 PhoneGap Build란 클라우드에서 컴파일이 가능한 서비스도 제공한다. 소스와 리소스를 업로드하면 클라이언트에서 개발환경을 구성할 필요 없이 서버에서 빌드를 하여 각각의 플랫폼을 지원하는 실행환경을 제공하는 것 같다.

 
이 서비스는 요금별로 어플 갯수에 제한을 두는 유료 서비스로 제공된다. 이외에 사이트를 둘러 보니 개발자 지원 서비스도 유료로 제공한다. 이 툴과 서비스를 당장 사용할 일은 없을 것 같지만 사용해 볼 날이 왔으면 좋겠다.

'개발 툴' 카테고리의 다른 글

OS X에서 Go 설치  (0) 2010.02.27
실버라이트2 둘러보기  (10) 2008.12.16
프로젝트 관리 도구 OpenProj  (2) 2008.03.21
적당히 참견하는 Xcode  (4) 2008.02.25
OS X의 파이썬  (0) 2008.02.20
AND

개발 툴 2010. 2. 27. 19:31
작년말 구글에서 나온 새로운 개발언어인 Go를 맥에 설치해 보았습니다. 시스템 프로그래밍을 위한 언어라고 하는데 아직 자세히 살펴보지는 못하고 설치만 해보았습니다. 제가 사용한 설치 방법입니다.

1. 다운로드
* MacPorts
설치가 안되어 있을 경우에는 해당 사이트에서 다운로드 받아서 설치합니다. 설치파일이 있어 간단히 설치할 수 있습니다.

* gmake
MacPorts 설치후에는 터미널에서 아래와 같이 gmake를 설치합니다.
> sudo /opt/local/bin/port install gmake

* mercurial
해당 사이트에서 OS X 버젼에 맞는 파일을 다운로드 받아서 설치합니다. MacPorts와 마찬가지로 간단히 설치할 수 있습니다.

2. 설치
Go가 설치될 디렉토리를 계정 루트에 생성합니다.
> mkdir go
> mkdir bin

설치에 앞서 설치환경을 먼저 설정합니다.
> export GOROOT=$HOME/go
> export GOARCH=386
> export GOOS=darwin
> export GOBIN=$HOME/bin

이제 아래와 같이 Go를 설치합니다.
> hg clone https://go.googlecode.com/hg/ $GOROOT
> cd go/src/
>./all.bash

vi와 같은 에디터를 이용하여 bin path를 .bash_profile에 추가합니다.
export PATH=${PATH}:${HOME}/bin

3. Hello, World
새로운 언어를 설치하였으니 Hello, World를 출력해 봅니다. vi등 에디터를 이용하여 아래와 같이 입력하고 hello.go라는 이름으로 저장합니다.

hello.go
package main

import "fmt"

func main() {
    fmt.Printf("Hello, world!\n");
}

터미널에서 아래와 같이 컴파일하여 실행합니다.
> 8g hello.go
> 8l hello.8
> ./8.out
Hello, world!

'개발 툴' 카테고리의 다른 글

PhoneGap 설치  (4) 2012.02.14
실버라이트2 둘러보기  (10) 2008.12.16
프로젝트 관리 도구 OpenProj  (2) 2008.03.21
적당히 참견하는 Xcode  (4) 2008.02.25
OS X의 파이썬  (0) 2008.02.20
AND

실버라이트는 그동안은 런타임조차 설치를 안했을 정도로 관심이 없었고, 그저 플랙스 비슷한 것이 있나 보다 하고 생각하고 있었습니다.

그러다가 갑자기 호기심이 생겨 이제서야 실버라이트 개발환경을 만들어 보고 잠깐 살펴보았습니다. 실버라이트2는 MS에서 나온 RIA(Rich Internet Application)로, 자세한 설명은 MSDN의 실버라이트 한글문서에 잘 나와 있습니다.

* 참조 사이트
아래의 사이트들에서 개발에 필요한 메뉴얼과 샘플을 얻을 수 있습니다.

  • Silverlight Lean - 실버라이트 공식홈페이지로 다양한 문서들과 동영상 강좌, 튜토리얼등이 있습니다.  
  • MSDN Silverlight - MSDN의 실버라이트 색션입니다. 원하는 항목을 쉽게 찾을 수 있고, 항목별로 간단한 샘플등을 확인할 수 있씁니다.

관련 사이트외에도 CHM버젼의 SDK 도움말도 다운로드 받아 사용하실 수 있습니다.


1. 개발환경 설치
설치는 실버라이트의 공식 홈페이지에서 Get Started 문서를 참조하였습니다. 해당 페이지에는 아래와 같이 관련링크와 함께 간단한 설명이 되어 있어 쉽게 설치를 할 수 있습니다. 



1) Silverlight Tools for Visual Studio 2008 SP1
실버라이트 툴즈를 설치하기 위해서는 먼저 Visual Studio 2008 SP1과 Visual Web Developer Express with SP1가 설치되어 있어야 합니다. 이 패키지는 SDK와 개발 런타임, Visual Studio에 관련 기능과 C#/Visual Basic에서 사용할 수 있는 템플릿들을 설치합니다.

저는 일단 권장하는데로 모두 설치를 하였지만 막상 사용을 해보니, 이 패키지 하나만 설치를 하면 기본적인 실버라이트의 개발은 가능할 것 같습니다.

2) Microsft Expression Blend 2 + SP1
60일 트라이얼 버젼을 설치하여 잠시 실행해 보았습니다. UI를 디자인하고 타임라인등의 용어가 있는 것으로 보아 애니메이션을 제작하는 툴 같습니다. 아마 어도비의 플래쉬와 비슷한 개념의 툴인 것 같습니다.


3) Deep Zoom Composer
이미지 관련툴인 것 같은데 사용해보지는 않았습니다.

4) Silverlight Toolkit
실버라이트 어플리케이션에서 사용할 수 있는 콘트롤, 컴퍼넌트, 유틸리티등이 있다고 하는데 역시 사용해 보지는 않았습니다.

2. 테스트 드라이브
1) 동영상 플레이어
동영상을 플레이, 일시중지, 중지를 할 수 있는 간단한 어플리케이션을 만들어 보았습니다. 이런 개발툴에서는 기본기능의 동영상 플레이어는 간단하게 만들어 볼 수 있기 때문입니다.


2) 프로젝트 생성
VS의 New Project에서 프로젝트 템플릿을 아래와 같이 C# / Silverlight / Siverlight Application으로 선택합니다.
 

그런데 프로젝트를 생성하지 못하고 오류가 발생하였습니다. 검색을하여 보니 관련 내용이 있어  아래와 같이 명령 프롬프트에서 실행하고 해결하였습니다.

C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\devenv.com /resetskippkgs  

3) 소스코드 수정
레이아웃을 지정하는 xaml과 동작을 실행하는 C# 소스파일에 아래와 같이 내용을 추가합니다.

* Page.xaml
<UserControl x:Class="SilverlightMovieTest.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="330">
    <Canvas x:Name="LayoutRoot" Background="White">
<MediaElement AutoPlay="False" x:Name="mediaPlayer"
Source="[동영상 URL]"
Width="400" Height="300"></MediaElement>

<Button x:Name="btnPlay" Canvas.Top="310" Content="Play"
Width="60" Height="20"/>

<Button x:Name="btnStop" Canvas.Top="310" Canvas.Left="64"
Content="Stop" Width="60" Height="20"/>

</Canvas
</UserControl>
[동영상 URL] 부분에 해당 동영상의 URL을 입력합니다.

* Page.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightMovieTest
{
    public partial class Page : UserControl
    {
        bool isPlay = false;

        public Page()
        {
            InitializeComponent();

            /* 버튼 이벤트 핸들러 설정 */
            btnPlay.Click += new RoutedEventHandler(PlayButtonClicked);
            btnStop.Click += new RoutedEventHandler(StopButtonClicked);
           
            btnStop.IsEnabled = false;
        }

        /** Play 버튼 클릭 시 */
        void PlayButtonClicked(object sender, RoutedEventArgs e)
        {
            if (isPlay == false)
            {
                mediaPlayer.Play();

                btnPlay.Content = "Pause";
                btnStop.IsEnabled = true;
                isPlay = true;
            }
            else
            {
                mediaPlayer.Pause();

                btnPlay.Content = "Play";
                btnStop.IsEnabled = false;
                isPlay = false;
            }
        }

        /** Stop 버튼 클릭 시 */
        void StopButtonClicked(object sender, RoutedEventArgs e)
        {
            if (mediaPlayer.CurrentState == MediaElementState.Playing)
            {
                mediaPlayer.Stop();
                               
                btnPlay.Content = "Play";
                btnStop.IsEnabled = false;
                isPlay = false;
            }
        }
    }
}


실행을 해보면 아래와 같이 인터넷 익스플로어에서 구동되는 모습을 확인할 수 있습니다.



3. 배포
빌드를 하면 프로젝트명.xap 파일이 생성됩니다. 확장자명을 보면 IIS에서만 실행될 것 같은 느낌이 들지만, 플래쉬의 swf와 같이 로컬의 런타임에서 실행되기 때문에 웹서버와는 상관이 없습니다.

웹사이트에서 실버라이트를 실행하기 위해서는 아래와 같이 HTML을 작성합니다. 자세한 내용은 MSN의 Add Silverlight to Web Page by Using HTML 문서에 잘 나와있습니다. 

<object width="400" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
    <param name="source" value="./SilverlightMovieTest.xap"/>
 
    <!-- Display installation image. -->
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807"
        style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
            alt="Get Microsoft Silverlight"
            style="border-style: none"/>
    </a>
</object>  

<!-- Display installation image. --> 아래 있는 HTML은 실버라이트 런타임이 설치되지 않았을 경우에는 우측과 같은 이미지와 링크를 제공합니다.


사실 간단히 맛만 봐서 '실버라이트2 맛보기'란 제목으로 넣고 싶었는데, 맛보기란 제목이 들어가면 제 의도와는 다른 검색어로 들어 오는 분들이 많으셔서 그냥 둘러 보기로 했습니다.

그동안 몇몇 다른 개발툴들에 대해서 '맛보기' 형식으로 쓴 적이 있는데, MS의 개발툴에 관련된 내용은 처음으로 올리는 것 같습니다. 아무래도 블로그 제목대로 맥을 기반으로한 프로그래밍에 관해 다루어야 한다는 생각이 있었던 것 같은데, 이제부터 관심있는 부분은 가리지 않고 올려 볼려고 합니다.

'개발 툴' 카테고리의 다른 글

PhoneGap 설치  (4) 2012.02.14
OS X에서 Go 설치  (0) 2010.02.27
프로젝트 관리 도구 OpenProj  (2) 2008.03.21
적당히 참견하는 Xcode  (4) 2008.02.25
OS X의 파이썬  (0) 2008.02.20
AND

오늘 류한석님의 블로그에서 '무료프로젝트관리 도구: OpenProj 1.0'이란 포스팅을 보았습니다. 반가운 소식 하나는 기대를 않했는데 자바 어플리케이션이라 맥에서도 구동이 가능하다는 것입니다. 다운로드 사이트에 가보니 친절하게 맥용으로 dmg 파일이 있어 설치해 보았습니다.

사용자 삽입 이미지

현재 버젼은 1.0 입니다. 보이는 것도 그렇고 사용방법도 MS 프로젝트의 심플 버젼 같습니다. 자바라 구동이 조금 느리고 UI가 아쉽지만 직관적이고 단순한 메뉴와 기본적으로 있을 것은 다 있기 때문에 괜찮은 툴로 보입니다.

사용자 삽입 이미지

사용자 삽입 이미지

한글사용에는 문제가 없지만 종료날짜 설정시 하루 앞서 설정되는 버그가 있는 것 같습니다. 아직 1.0 초기버젼이니 버그도 수정되고 점차 좋아질 것으로 생각되고 기대가 됩니다. 지원 파일은 자체 포멧인 *.pod 파일이외에 MS Project (*.mpp, *.mpx, *.xml), Gnome Planner(*.planner)입니다.

사용자 삽입 이미지
OpenPorj와 유사한 맥 특유의 이쁜 GUI를 가진 OmniPlan도 있지만 유료($149.95)입니다.

Omni는 사이트의 Developer 메뉴에서 맥 개발자를 위해 다양한 프레임워크와 샘플소스를 공개해  놓았으니 참고해 보시면 좋을 것 같습니다.

'개발 툴' 카테고리의 다른 글

OS X에서 Go 설치  (0) 2010.02.27
실버라이트2 둘러보기  (10) 2008.12.16
적당히 참견하는 Xcode  (4) 2008.02.25
OS X의 파이썬  (0) 2008.02.20
Java 교육용 프로그램 Greenfoot  (0) 2007.12.23
AND

Xcode를 많이 사용해 보지도 않았고, 간단한 샘플 몇가지만 만들어 본 초보 사용자라 아직 Xcode가 어떻다는 평가를 하기는 어렵습니다. 하지만 주관적인 취향이지만 Xcode 코코아의 GUI 개발 방식이 저에게는 편하게 느껴집니다.

저는 위자드에서 소스코드를 생성해 주는 방식을 선호하지 않습니다. 당장의 편리함과 속도면에서는 손해를 볼 수도 있지만 내가 사용하는 변수와 함수를 직접 타이핑함으로써 존재와 용도를 확실히 인지하고 있는 것이 소스를 이해하고 관리해 나가는데 더 많이 도움이 되기 때문입니다.

그런면에서 Xcode는 최소한의 코드를 생성해 내고 인터페이스빌더에서는 소스코드 자체에는 영향을 주지 않는 것(class 파일을 생성해 주는 일은 합니다)이 좋습니다. 이에 반해 MS의 VC++에서는 Xcode의 코코아에서 보다 훨씬 많은 파일과 코드를 자동으로 생성합니다.

또한 다이얼로그 ID, 컨트롤-변수 연결 정보, 메시지-함수 연결 정보등이 헤더나 소스파일에 기록됩니다. (MS의 개발툴중 VC만 이에 해당되는 것 같습니다) 하지만 Xcode에서는 IBAction, IBOutlet으로 변수와 함수들이 Nib의 객체들과 관련이 있는 것만 나타냅니다.

이는 OS X의 Nib 파일이 리소스, 사용자 인터페이스와 더불어 class, instance, 바인딩과 같은 객체와 연결에 대한 다양한 정보를 가지고 있지만 VC의 .rc파일에서는 객체와 연결정보 등을 가지고 있지 않고 이에 관련된 부분을 소스코드에서 관리하기 때문인 것 같습니다.

또한 코코아에서 생성하는 실행파일은 많은 부분을 컴파일하는 시점 보다 실행될 때 연결되는 동적 바인딩을 사용하고 있기 때문에 소스파일에 존재하여 같이 컴파일 되지 않아도 되기 때문인 것 같습니다.

반대로 VC++에선 rc에 있는 UI, 기타 리소스에 대한 정보와 코드의 연관관계를 소스에서 명확하게 확인할 수 있어 좋습니다. Xcode에서는 그런 정보들이 Nib파일에 들어 가고 인터페이스 빌더에서 관리하기 때문에 소스코드만 보아서는 어떤 객체와 어떻게 연결되었는지 정확히 알 수 없습니다. (하지만 잘된 명명규칙을 따랐다면 쉽게 짐작할 수는 있을 것입니다)

이전 포스팅에서 Xcode에서 소스코드에 아무런 변경없이 간단한 GUI 어플리케이션을 만드는 작업을 해보았습니다. VC++였으면 모든 연관 관계의 작업이 코드에 추가되었을 것입니다. 소스코드는 복잡해 지지만 소스코드만 보면 어떻게 연관되어 있는지 어떤 동작을 하는지 짐작할 수 있을 것 입니다. Xcode에서는 인터페이스 빌더에서 확인해야만 명확하게 알 수 있습니다. 대신 소스코드는 매우 간결합니다.

저는 소스코드가 간단하고 툴이 많은 부분 소스에 관여하는 것 보다는 소스코드가 제 취향과 입맛대로 직접 입력한 내용으로 구성되어 있다는 면에서 Xcode의 방식이 더 편하게 느껴집니다. 이 부분이 Xcode의  본래 설계의도인지 애플이 인력이 부족해 아직 신경을 쓰지 못하는지는 모르겠습니다.

실용주의 프로그래머란 책에선 '자신이 이해하지 못하는, 마법사가 만들어 준 코드는 사용하지 말라'고 합니다. 이유에 있어서 많은 부분 동의 하지만 VC++ 6.0의 클래스 위자드를 사용하지 않거나 기타 다른 툴에서 위자드나 속성창을 이용하지 않고 타이핑에 의한 코딩만 해야 한다면 그리 좋은 방법 같지는 않습니다. 일단 위자드로 생성해 놓고 올바른 위치로 재배열 하는 것이 좋지 않나 생각됩니다. 책에서도 이해하고 사용해라 정도의 의미인 것 같습니다.

툴 자체로만 놓고 본다면 VC++이 분명히 Xcode보다 편리성과 다양한 기능을 가진 더 잘 만들어진 툴입니다. 하지만 꼭 다양한 기능을 가지고 많은 부분을 자동화 해주는 툴이 모든 사람들이 개발하기에 좋다고는 할 수 없을 것 같습니다.

만약 툴이 배려하지 않은 작업을 해야 할 때나 자동으로 처리되는 부분에 있어 변경이 필요할 시에는 더 복잡한 작업을 해야하며 쓸데 없는 내용을 알아야 할 때가 있기 때문입니다. 또한 아무리 도움을 준대도 툴이 지나치게 참견하는 것을 싫어하고 제 손으로 해야만 직성이 풀리는 저같이 깝깝하게 막힌 사람도 있으니까요.

인터페이스 빌더에서 마우스로 드래그 하여 오브젝트들을 연결하는 모습과 오브젝트와 정보들을 Nib란 파일에 순간 냉동포장하여 저장하는 방식은 상당히 재밌습니다. 아마 일반적인 GUI 개발툴에서 자주 보던 방법이 아닌 다소 독특한 Xcode의 개발방법이 익숙치 않고 신선하기 때문에 단점을 묻어 두고 좋은 평가를 내리는지도 모르겠습니다. 익숙해지면 또 어떤 생각이 들지 모르겠네요.

'개발 툴' 카테고리의 다른 글

실버라이트2 둘러보기  (10) 2008.12.16
프로젝트 관리 도구 OpenProj  (2) 2008.03.21
OS X의 파이썬  (0) 2008.02.20
Java 교육용 프로그램 Greenfoot  (0) 2007.12.23
Xcode에서 Flex - Hello World 작성  (0) 2007.12.12
AND

개발 툴 2008. 2. 20. 16:10
사용자 삽입 이미지
리눅스 배포본과 마찬가지로 맥 OS X에는 기본적으로 파이썬이 설치되어 있습니다. 터미널에서 > python[enter]을 입력하면 현재 설치된 파이썬의 버젼을 확인할 수 있습니다. OS X 10.4 (타이거)의 경우에는 2.3대 버젼이 설치되어 있습니다.

현재 파이썬의 경우는 2.5.1 버젼이 나와 있으며 파이썬 사이트에서 다운로드 받을 수 있습니다. GUI 환경에서 클릭만으로 설치할 수 있는 OS X 버젼이 따로 있으니 버젼업을 원하시는 분들은 다운로드 받으셔서 설치하시면 됩니다.

사용자 삽입 이미지
설치는 MacPython.mpkg를 더블클릭하면 간단히 설치됩니다. 설치가 완료되면 응용 프로그램 폴더의 MacPython2.5 폴더에 파이썬의 GUI 툴들이 설치됩니다.

좌측은 파이썬 통합개발환경인 IDLE를 실행한 모습입니다.



기존 버젼은  /System/Library/Frameworks/에 위치하지만 맥파이썬으로 설치하면 /Library/Frameworks/에 설치됩니다. 파이썬 실행 파일들은  /usr/bin/에 위치하며 2.3 버젼의 실행파일에 심볼릭 링크되어 있습니다. 아래와 같이 링크를 변경하면 쉘에서도 2.5 버젼을 사용하실 수 있습니다.

> cd /usr/bin/

> sudo ln -s -f /Library/Frameworks/Python.framework/Versions/2.5/bin/python ./python

> sudo ln -s -f /Library/Frameworks/Python.framework/Versions/2.5/bin/pydoc ./

> sudo ln -s -f /Library/Frameworks/Python.framework/Versions/2.5/bin/pythonw ./

이외에 Objective-C와 혼용 해서 사용할 수있게 해주는 PyObjC가 있습니다. OS X 버젼으로 다운로드 받고 설치하면 Xcode에 PyObjC 프로젝트에 관련된 템플릿을 등록시켜 줍니다. OS X 10.5 (레오퍼드)에는 기본으로 설치되어 있다고 하는데 확인하지는 못했습니다.

저는 파이썬을 능숙하게 사용하지 못합니다. 하지만 간단한 용도로 log등의 대용량 텍스트 파일 처리나 DB에서 데이터를 가져와서 재가공해서 넣는 작업, 복잡한 수치 계산, 쉘스크립트 대용으로 매우 유용하게 사용하고 있습니다.

파이썬은 다른 언어와 비교해 시작하기가 매우 쉽고, 용도에 따라 다양한 모듈을 가지고 있으며 강력합니다. OS X, 리눅스는 물론이고 윈도우즈에서도 편리하게 사용할 수 있습니다. IT관련 업무를 하는 분들이 아니더라도 컴퓨터를 이용해 효율적인 작업을 하고 싶은 분들은 잠깐 시간을 투자하여 배워 보시는 것도 괜찮을 것 같습니다.
AND

Greenfoot은 영국의 Kent 대학에서 쉽게 에니메이션이나 게임을 만들 수 있도록 해주는 Java를 기반으로 한 통합개발툴(IDE)입니다. Java로 만들어졌으므로 윈도우, 맥, 리눅스등 대부분의 환경에서 사용이 가능합니다.

1. 설치

설치는 매우 간단하며 우선 JDK가 설치되어 있어야 합니다. OS가 윈도우일 경우에는 JDK가 설치되어 있지 않으면 다운로드 받고 설치합니다. (맥은 설치되어 있습니다.)

 JDK 설치를 확인하고  greenfoot 사이트 다운로드 페이지에서 사용하는 OS별로 설치파일을 다운로드 받습니다. 맥에서는 압축파일만 풀면됩니다. (윈도우는 설치 파일을 실행합니다.)


2. 실행

greenfoot를 실행합니다. 메뉴에서 Scenario/New를 선택합니다. 상단의 File 입력창에 시나리오명을 입력하고 하단의 [Creat]버튼을 클릭 합니다. 저는 Test로 하였습니다. 아래와 같이 Greenfoot가 실행된 모습을 보실 수 있습니다.

사용자 삽입 이미지

1) 기본 클래스
기본으로 World와 Actor 클래스가 생성되어 있습니다. 두 클래스 모두 추상(abstract) 클래스이므로 바로 사용하실 수는 없습니다. greenfoot는 4개의 클래스로 이루어져 있습니다.

> Greenfoot
전반적인 시스템을 관리하는 클래스입니다. 사용자 입력, 속도, 효과음 출력, 시작, 중지 등에 관련된 메소드를 가지고 있습니다.

> GreenfootImage
화면출력을 담당하는 클래스입니다. 이미지/벡터 및 문자열 출력과 속성에 관한 메소드를 가지고 있습니다.

> World
스테이지(배경)를 관리하는 클래스입니다. 오브젝트 추가/삭제, 배경 및 타일 출력에 관한 메소드를 가지고 있습니다.

> Actor
World 에서 출력되는 오브젝트 클래스입니다. 오브젝트의 움직임과 속성에 관한 메소드를 가지고 있습니다.


2) Object 생성
사용자 삽입 이미지
먼저 World를 생성합니다. 좌측과 같이 World를 우클릭하여 나오는 메뉴에서 New subclass...를 클릭합니다.

클래스 이름을 MyWorld로 입력하고 [Ok] 버튼을 클릭합니다.



생성된 MyWorld를 다시 우클릭 하여 Set image... 를 클릭하여 backgrounds에서 적당한 이미지를 선택합니다.

그 밑의 Actor를 우클릭 하여 다시 New subclass...를 선택합니다. 저는 아래와 같이 클래스 이름을 Tux로 입력하고 리눅스의 마스코트인 tux.png이미지를 선택하였습니다. 각자 취향에 맞는 클래스명과 이미지를 선택한 후 [Ok] 버튼을 클릭합니다.

사용자 삽입 이미지

아래와 같이 MyWorld와 Tux가 생성된 것을 확인합니다.

사용자 삽입 이미지


3. 소스코드 편집

1) Tux class
Tux를 더블클릭하여 소스 에디터를 오픈하여 아래의 내용을 추가로 입력합니다.

import greenfoot.*;  // (World, Actor, GreenfootImage, and Greenfoot)

/**
 * Write a description of class Tux here.
 *
 * @author (your name)
 * @version (a version number or a date)
 */
public class Tux extends Actor
{
    private int speed = 2;
    /**
     * Act - do whatever the Tux wants to do. This method is called whenever
     * the 'Act' or 'Run' button gets pressed in the environment.
     */

    public void act()
    {
        // Add your action code here.
        int xpos = getX();
        int ypos = getY();
       
        if(Greenfoot.isKeyDown("up")) {
            setRotation(0);
            ypos -= speed;
        }       
        if(Greenfoot.isKeyDown("down")) {
            setRotation(180);
            ypos += speed;
        }
        if(Greenfoot.isKeyDown("left")) {
            setRotation(270);
            xpos -= speed;
        }
        if(Greenfoot.isKeyDown("right")) {
            setRotation(90);
            xpos += speed;
        }
        setLocation(xpos, ypos);
    }   
}

짐작하시는 바와 같이 키를 누르면 이미지를 방향에 맞게 회전시켜 전진하게 합니다. greenfoot에서는 범위를 넘어가면 자동으로 좌표가 조절되기 때문에 범위 체크를 하지 않았습니다.

2) MyWorld class
이제 MyWorld를 더블클릭하여 에디터를 오픈하여 아래와 같이 변경합니다.

import greenfoot.*;  // (World, Actor, GreenfootImage, and Greenfoot)

/**
 * Write a description of class MyWorld here.
 *
 * @author (your name)
 * @version (a version number or a date)
 */
public class MyWorld extends World
{

    /**
     * Constructor for objects of class MyWorld.
     *
     */
    public MyWorld()
    {   
        // Create a new world with 20x20 cells with a cell size of 10x10 pixels.
        super(40, 40, 10); // 스테이지 크기 변경
       
        addObject(new Tux(), 20, 20); // 오브젝트 등록
       
        // Put in your own background image by replacing "greenfoot.png" with the
        // image that should be used as background and uncommenting the line below.
       
        //setBackground("greenfoot.png");
    }
}

Tux를 우클릭하여 new Tux()를 선택하여 스테이지로 가져올 수 있지만, 실행 시에 항상 나타나게 하기위해 addObject 메소드로 World에 추가합니다. 이제 하단의 [Complie all]을 클릭하여 컴파일 후 [> run] 버튼을 클릭하여 테스트를 해봅니다.

3) 확인
아래와 같이 방향키에 따라 Tux가 움직이는 모습을 보실 수 있습니다. (greenfoot에 관해 자세한 사항은 Greenfoot 홈페이지에서 메뉴얼과 다양한 시나리오를 다운 받으실 수 있습니다.)

사용자 삽입 이미지
홈페이지에서 소개를 보면 고등학교 이하의 학생들의 교육을 위한 툴이라고 되어 있습니다. 프로그래밍 또는 Java를 처음 시작하는 학생들을 위해 딱딱하지 않고, 쉽게 흥미를 갖고 배울 수 있게 해 줄 것 같습니다.

Kent대학에서 만들어진 또다른 유사품으로 BlueJ가 있습니다. 이는 Java를 이용해 OOP를  가르치기 위한 툴도 있으니 흥미있는 분들은 홈페이지에서 확인해 보세요.

'개발 툴' 카테고리의 다른 글

적당히 참견하는 Xcode  (4) 2008.02.25
OS X의 파이썬  (0) 2008.02.20
Xcode에서 Flex - Hello World 작성  (0) 2007.12.12
Adobe Flex Builder를 딱 한번 써보고...  (8) 2007.12.03
구글 Android 개발환경 둘러 보기  (8) 2007.11.14
AND

1. 프로젝트 및 관련 파일 생성

Xcode를 실행하고 New Project를 클릭합니다. 이전 포스트에서 추가한 Flash >  FlexApplication을 선택하고 "Hello"란 이름으로 프로젝트를 생성합니다.

사용자 삽입 이미지
Hello 프로젝트를 우클릭하고 Add/NewFile 메뉴에서 액션스크립트를 위한 소스 파일인 Hello.as와 테스트를 위한 Test.html을 생성합니다.

좌측과 같이 생성되어 있음을 확인합니다.



2. Hello.mxml 편집

하나의 버튼을 추가하고 과 Hello.as 파일을 인클루드 하기위해 아래의 내용을 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
    <mx:Script source="Hello.as"/>
   
    <mx:Box backgroundColor="#efefef" width="200" height="100" horizontalAlign="center" verticalAlign="middle">
    <mx:Button label="Click" click="buttonClicked()"/>
    </mx:Box>   
</mx:Application>


3. Test.html 편집

생성된 Hello.swf를 테스트 하기 위한 html 파일을 편집합니다.

<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flex Hello</title>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="flexTest" width="200" height="100"
            codebase= "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="bin/Hello.swf" />
<param name="quality" value="high" />
<embed src="bin/Hello.swf" quality="high" bgcolor="#efefef"
                width="200" height="100" name="flex" align="middle"
                play="true"
                loop="false"
                quality="high"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>
</body>
</html>


3. Hello.as 편집

버튼이 클릭되었을 경우 호출되는 "buttonClicked" 메소드를 작성합니다. 간단히 Hello World 창을 오픈합니다.

function buttonClicked()
{
    mx.controls.Alert.show('Hello World!', 'Flex');
}     


4. 확인

사용자 삽입 이미지
파일들을 저작하고 빌드를 실행합니다. 빌드가 오류없이 완료되면, Test.html 파일을 우클릭하여 Open With Finder를 클릭합니다.

Test.html이 브라우져에서 실행됩니다.


아래와 같이 사파리에서 Test.html이 오픈됩니다.. "Click" 버튼을 누르면 우측과 같이 Hello 메시지 창이 뜨는 것을 확인할 수 있습니다.
사용자 삽입 이미지 사용자 삽입 이미지

'개발 툴' 카테고리의 다른 글

OS X의 파이썬  (0) 2008.02.20
Java 교육용 프로그램 Greenfoot  (0) 2007.12.23
Adobe Flex Builder를 딱 한번 써보고...  (8) 2007.12.03
구글 Android 개발환경 둘러 보기  (8) 2007.11.14
리얼베이직 간단한 사용기  (0) 2007.08.30
AND

오늘 오전에 유프리에 관련된 포스트를 보았습니다. 관련된 글을 읽다 아래와 같은 내용을 보았습니다.
ETRI는 유프리를 공개SW로 배포하여 자신이 필요한 각종 SW를 사용자가 직접 개발할 수 있게 유도하고 유프리 센터를 통해 배포하여 공개SW의 활성화에 기여할 수 있을 것이라고 기대했다.
내용 중 "사용자가 직접 개발"이란 문구를 보고 바로 사이트로 가 보았습니다. 웹 주소가 http://www.youfree.or.kr/flex/로 뒤에 flex가 눈에 확 들어 오더군요. 아~ 아도비의 플렉스를 이용한 기술인가 보다 하고 많은 기대를 하였습니다.

제가 못 찾은 것인지 사이트 어디에서도 개발자 버젼은 찾을 수가 없었습니다. 그래서 일반 사용자 버젼인 YouFREE 베이직을 다운 받았습니다. 다운로드 받은 압축 파일을 풀다 보니 *.dll, *.exe 파일들이 보이더군요. 확인을 해봤었어야 했는데 윈도우즈 전용이었습니다.

다시 비스타에서 다운로드 받아서 설치를 해 보았습니다. 아파치와 MySQL에서 사용하는 포트를 현재 다른 프로그램에서 사용중이라고 정상적인 실행이 안된다고 메시지가 나왔습니다.(사용하는 프로그램 없는데...) etri 사이트에 가서 보니 비스타와 리눅스는 아직 지원하지 않는다는 내용을 보고 지웠습니다.

내용을 자세히 읽어 보지 않아서 그런지, 관련 사이트의 글들을 보고는 뭐하는 프로그램인지 정확히 모르겠네요. 아쉬움에 플렉스라도 깔아 보자라는 생각으로 아도비 사이트에서 다운로드 받고 설치해 보았습니다.

30일 사용 가능한 무료 버젼을 다운로드 받았는데, 사이트에서 가격을 보니 249달러 였습니다. 설치는 쉽게 되고 튜토리얼중 하나를 따라해 보았습니다. 막연히 플랙스는 플래쉬와 유사한 것으로 생각했었는데 일단 처음 본 모습과 언어는 제 생각과 틀렸습니다. 통합개발툴은 이클립스를 기반으로 만들어진 것 같습니다.

사용자 삽입 이미지

튜토리얼 내용을 보면서 New/Flex Project를 클릭했습니다.  뭔지 모르지만 Basic을 선택하고 Next를 클릭했습니다. 그리고 프로젝트명에 Test를 입력하고 Finish를 클릭했습니다.

사용자 삽입 이미지

그 후 소스파일 편집에 튜토리얼에서 본 내용중 블로그 주소만 제 블로그의 RSS 주소로 변경하였습니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="feedRequest.send()" layout="absolute">

    <mx:HTTPService
        id="feedRequest"
        url="http://www.cocoadev.co.kr/rss/"
        useProxy="false"/>

    <mx:Panel x="10" y="10" width="475" height="400" title="{feedRequest.lastResult.rss.channel.title}">

        <mx:DataGrid id="dgPosts" x="20" y="20" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}">
            <mx:columns>
                <mx:DataGridColumn headerText="Posts" dataField="title"/>
                <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
            </mx:columns>
        </mx:DataGrid>

        <mx:TextArea x="20" y="175" width="400"/>
        <mx:LinkButton x="20" y="225" label="Read Full Post"/>
    </mx:Panel>
</mx:Application>

그리고 실행하니 아래와 같이 파이어폭스에서 실행되었습니다.

사용자 삽입 이미지

제가 아는 한에서는 가장 단시간에 만든 RSS 리더기입니다. 브라우져에서 HTML 소스를 보니 아래와 같았습니다.
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="AC_OETags.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
// -----------------------------------------------------------------------------
// -->
</script>
</head>

<body scroll="no">
<script language="JavaScript" type="text/javascript" src="history.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);


// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasRequestedVersion ) {
// MMdoctitle is the stored document.title value used by the installation process to close the window that started the process
// This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;

AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "Test",
"quality", "high",
"bgcolor", "#869ca7",
"name", "Test",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "Test",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "Test",
"quality", "high",
"bgcolor", "#869ca7",
"name", "Test",
"flashvars",'historyUrl=history.htm%3F&lconid=' + lc_id + '',
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="Test" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="Test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="Test.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="Test" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</noscript>
<iframe name="_history" src="history.htm" frameborder="0" scrolling="no" width="22" height="0"></iframe>
</body>
</html>

swf 파일로 봐서는 플래쉬와 무관한 것 같지는 않습니다. 아직은 정확히 플랙스가 무엇인지 어떻게 돌아 가는 것인지 알지도 못하지만 흥미있는 툴 같습니다. 다만 공짜였으면...

유프리가 웹기반이고 etri에서 만들었단 말 때문에 맥에서 실행되는 개발툴이 우리나라에서 나온줄 알고  많은 기대를 했었는데, 아직은 윈도우즈 전용이라 다소 아쉽습니다. 곧 리눅스도 지원한다고 하는데 하는 김에 맥까지 바라는 것은 욕심이겠죠?

AND

사용자 삽입 이미지
어제 구글의 Android SDK 공개 기사를 보고 설치해 볼려고 Android 사이트를 살펴 보았습니다. 하지만 인텔맥에서만 된다기에 좌절하고 퇴근후에 집의 인텔 맥미니에 설치를 해보았습니다.

좌측의 아이콘은 안드로이드 에뮬레이터 아이콘입니다. 귀엽습니다.

구글폰이나 Android 소식을 간간히 접하면서 맥의 위젯과 같이 막연히 Ajax를 사용하는 자바스크립트를 사용할 것 같다는 추측을 해보았습니다. 구글의 주력 서비스들이 웹 기반이고 구글의 오픈 API와 연동을 위해서도 웹 기반일거라 생각했습니다.

하지만 어제 다운로드 받아서 확인을 해보니 자바 스크립트가 아니고 자바였습니다. 구글의 능력으로 보았을 때는 충분히 새로운 개발환경(IDE)을 배포할 것 같았는데, 이클립스의 플로그인 형태로 배포 되었습니다.

완전히 새로운 개발환경보다는 이클립스라는 익숙한 개발 환경과 자바라는 대중적인 언어를 선택함으로 기존 개발자들이 쉽게 적응할 수 있을 것으로 보여 집니다.


1. Android SDK 및 이클립스 플러그인 설치
Apach Ant
JDK 5/6도 지원하지만 이클립스로 설치해 보았습니다. 구글도 이클립스를 적극적으로 지원하는 것 같습니다.

1) 이클립스 설치
이클립스가 설치되어 있지 않다면 먼저 이클립스를 다운 받습니다. 전 3.2 버젼이 깔려 있었습니다. 그런데 프로젝트를 만들 때 오류 메시지를 표시해 주지 않아서 헤매다가 3.3을 설치하니 정확히 동작했습니다.

2) Android SDK 설치
이제 Android SDK를 다운 받습니다. Android는 OS X 10.4.8 이상의 인텔맥에서만 설치가 가능합니다. 압축파일만 풀면 되니 쉽게 설치하실 수 있습니다. Android SDK의 압축을 풀면 "android_sdk_darwin_m3-rc20a"와 같은 복잡한 이름의 디렉토리가 생성되는데 접근이 용이하게 Android로 변경해 주고 원하는 위치로 이동 합니다. 저는 잠시만 사용해 보고 삭제할 것이기 때문에 데스크탑에다 디렉토리를 가져다 놓았습니다.

설치가 완료되면 실행파일을 위한 패스를 지정해 줍니다. .bash_profile에 패스를 지정해 주거나 각자의 환경에 맞게 터미널에서 아래와 같이 실행합니다.
> export PATH=/Users/zzerr/Desktop/android/tools


3) ADT 설치
이제 ADT(Android Development Tools)라는 이클립스 플러그인을 설치합니다. 안드로이드 사이트에는 선택사항이라고 되어 있지만, 이클릭스를 사용한다면 필수로 설치를 해야 될 것 같습니다.

a. 이클립스의 헬프 메뉴에서 Software Updates > Find And Install...을 선택합니다.
b. Search for new features to...을 선택하고 Next를 클릭합니다.
c. 우측의 버튼중에 첫번째 New Remote Site...를 클릭합니다.
d. 아래와 같이 Name에 Android Plugin을 입력하고 URL에 https://dl-ssl.google.com/android/eclipse/ 을 입력한 후에 OK를 클릭하고 완료되면 Finish 버튼을 클릭합니다.
사용자 삽입 이미지











e. 다음 단계에서 아래와 같이 Android Plugin을 체크하고 Next 버튼을 클릭합니다.
사용자 삽입 이미지




















f. 라이센스에 동의에 체크하고 Next 버튼을 클릭한 후에 Finish버튼을 클릭합니다.
g. Install All 버튼을 클릭하면 설치 후에 이클립스가 재실행 됩니다.

이클립스의 Preferences... 메뉴를 클릭하고 Android를 선택합니다. 아래와 같이 SDK Location에 이전 단계에서 설치한 Android SDK의 디렉토리를 설정합니다.
사용자 삽입 이미지

"이제 사용할 준비가 완료되었습니다."


2. 샘플 프로젝트 작성

1) 프로젝트 생성
이클립스에서 File > New > Project... 를 클릭하고, Android Project를 선택한 후에 Next 버튼을 클릭합니다.

Project name과 Package Name, Activity name, Application Name을 각각 입력하고 완료 버튼을 클릭합니다. 저는 아래와 같이 입력하였습니다. Application name에 testAndriod로 잘 못 입력하여 나중에 에뮬레이터 화면에서도 Andriod로 나옵니다.
사용자 삽입 이미지

2)  코드 작성
완료되면 아래와 같은 안드로이드 이클립스 개발환경이 나옵니다.
사용자 삽입 이미지

여기선 전 샘플코드를 둘러 보다가 그래픽 샘플코드에서 점을 랜덤하게 출력하는 소스를 복사해서 아래와 같이 만들어 보았습니다.

package com.cocoa;

import android.app.Activity;
import android.os.Bundle;
import android.content.Context;
import android.graphics.*;
import android.view.View;

import java.util.Random;
public class hello extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(new SampleView(this));
    }
   
    private static class SampleView extends View {
        private Paint   mPaint = new Paint();
        private float[] mPts = new float[1000];

        public SampleView(Context context) {
            super(context);
           
            Random rand = new Random();
            final int N = mPts.length >> 1;
            for (int i = 0; i < N; i++) {
                mPts[(i << 1) + 0] = rand.nextFloat() * 320;    // X
                mPts[(i << 1) + 1] = rand.nextFloat() * 240;    // Y
            }
        }
   
        @Override protected void onDraw(Canvas canvas) {
            Paint paint = mPaint;

            canvas.drawColor(Color.WHITE);

            paint.setColor(Color.BLACK);
            paint.setAntiAlias(false);
            paint.setStrokeWidth(10);
       
            canvas.drawPoints(mPts, paint);
        }
    }
}


사용자 삽입 이미지
이제 실행해 보면 좌측과 같은 다이알로그 박스가 나오는데 Android Application을 선택하시고  OK버튼을 클릭합니다
 







아래는 에뮬레이터에서 실행된 모습입니다. 이미지 사이즈를 줄였지만 상당히 큽니다. 맥미니에 연결된 24인치 모니터에 아래와 같은 것이 뜨니 처음에는 핸드폰 에뮬레이터가 아니라 무슨 타자기 에뮬레이터가 뜨는 줄 알았습니다.
사용자 삽입 이미지

기존 자바 개발자나 C#으로 윈도우 모바일 개발 경험이 있는 개발자들은 별다른 노력 없이 쉽게 구글폰 어플리케이션을 제작할 수 있을 것 같습니다. 구글에서 많은 상금이 걸린  Developer Challange도 개최하니 우리나라 개발자들이 많은 상금을 가져 올 수 있었으면 좋겠습니다.


3. 사족 - MS Windows Mobile

이런류의 기기들을 좋아해서 오래전 WinCE 1.0이 탑재된 LG PDA를 구입을 시작으로 현재는 윈도우즈 모바일 5.0의 삼성 블랙잭을 사용하고 있습니다. PC와 인터넷에서의 경쟁이 이제 윈도우즈 모바일을 탑재한 스마트폰, 애플의 아이폰, 구글의 구글폰으로 모바일에서 까지 달아 오르는 것 같습니다.

OS/개발환경/브라우져도 그렇고 경쟁자가 없으면 나태해지는 MS도 이제 바짝 달려야 할 것 같습니다. 다른 건 몰라도 디자인적인 측면에서  신경을 좀 써주었으면 합니다.

아래의 이미지가 제 블랙잭의 스크린샷입니다. 초기화면은 어디선가 다운로드 받은 맥 테마를 변경하여 사용하고 있습니다. 여느 아빠들과 마찬가지로 핸드폰 초기화면은 제 아들 녀석이 자리잡고 있습니다.

우측은 윈도우즈 모바일의 탐색기 이미지입니다. 흑백에서 칼라로 바뀐 것을 제외하고는 10년 전에 본 모습 그대로 입니다. 한때 디자이너가 없다던 소문이 돌던 구글 디자인 컨셉 같습니다.
사용자 삽입 이미지 사용자 삽입 이미지

모바일 기기의 특성상 가능하면 메모리와 저장 공간을 줄여야 하는 것은 알지만 보기에도 좋았으면 좋겠습니다. 제 취향이 이상한 건지도 모르겠습니다. 간혹 급하게 메모할 일이 생길 때면 기본 메모장을 이용하는데 윈 3.1 시절의 향수를 느끼게 해줍니다. 언제 시간날 때 기능은 없고 보기에는 좋은 메모장이나 하나 만들어 볼려고 합니다.
AND

사용자 삽입 이미지
유료라 별로 관심을 두지 않다가 호기심에 한번 설치를 해보았습니다. 리얼베이직 사이트에 가시면 일정기간 사용할 수 있는 맥/윈도우/리눅스용 데모버젼을 다운 받을 수 있습니다.

스텐다드 버젼은 99달러에 프로페셔널 버젼은 500달러에 판매하고 있습니다. 두 버젼의 가장 큰 차이점은 크로스-플랫폼 컴파일 기능의 유무인 것 같습니다. 아카데미 버젼이 존재하니 학생들은 더 저렴하게 구입할 수 있을 것 같습니다.


1. 첫느낌
사용자 삽입 이미지
설치 후 리얼베이직 폴더에 있는 Realbasic Quick Start.pdf의 파일에 있는 간단한 프로그램을 만들어 보았습니다.

URL을 리스트에 추가/삭제하고 Connect 버튼을 클릭하면 해당 URL을 브라우져에서 연결하는 매우 간단한 프로그램입니다.

베이직이라는 언어가 주는 느낌처럼 쉽게 어플리케이션을 만들수 있게 해 주는 것 같습니다.

일반적인 업무용 프로그램이라면 코코아에서의 개발보다 더 빠르게 작업을 할 수 있을 것 같습니다.

당연해야될 얘기지만 별다른 설정 없이 한글 사용과 출력에 아무 문제도 없었습니다.


2. UI
좌측과 같이 각종 컨트롤들을 배치하고 속성을 설정할 수 있는 창이 있는 Layout과  코드를 작성할 수 있는 code 화면을 제공합니다. 일반적인 개발툴들과 크게 다르지 않은 모습이기에 쉽게 적응할 수 있습니다.
사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지
좌측과 같이 De까지 입력을 하면  매칭되는 함수를 흐린글씨로 보여 주고 Tab키를 누르면 자동으로 입력됩니다.

코드 자동완성이나 제안 기능은 Xcode 보다 사용이 더 편리한 것 같았습니다.


3. 리얼 SQL 서버
사용자 삽입 이미지
이 회사 제품을 또 하나 보면 리얼 SQL 서버(500달라)라는 DB 서버를 제공합니다.

좌측은 보시는 바와 같이 Demo 라이센스로 서버를 구동해 본 모습니다.

확인해 보지는 않았지만 Real Basic이랑 좋은 궁합을 이루어 편리하게 데이터 베이스 어플리케이션을 작성할 수 있도록 해줄 것 같습니다.





아래와 같이 매우 기본적인 관리자 툴도 제공을 합니다. DB서버로서의 성능은 모르겠지만 관리툴은 상용 답지 않게  조금 부실해 보이는 것 같습니다.
사용자 삽입 이미지

제 데모사용기간이 3일 남았으니 앞으로는 사용해 볼 수가 없을 것 같아 급히 사용해 보고 간단한 느낌을 올려 보았습니다.

가격도 개발툴로서는 저렴한 편이고 무엇보다도 크로스-플랫폼을 지원하니, 다양한 OS를 지원할 필요가 있는 DB를 사용하는 업무용 소프트웨어 제작시에는 매우 매력적인 개발툴인 것 같습니다.


AND

우연히 Scratch란 프로그램을 보았습니다. Squeak에서 Image 파일이 열리는 것으로 봐서는 확실하지는 않지만 Squeak으로 만들었던지 같은 엔진을 사용한 것 같습니다.

 홈페이지를 가보니 Squeak에 대한 언급은 없었고, MIT 미디어 연구소에서 어린이(8세 이상) 교육을 위해서 개발한 것이라고 합니다. 윈도우용과 맥용 두가지 버젼으로 다운로드 받을 수 있습니다.
사용자 삽입 이미지
위에 보이는 것과 같이  Squeak 보다 더욱 깔끔하고 직관적인 인터페이스를 제공합니다. 잠깐 써봤지만 Squeak 보다 사용법도 더 쉬운 것 같았습니다. 아이들이 쉽게 사용할 수 있도록 Squeak에서 복잡성과 불필요한 부분을 제외하고, UI를 이쁘게 만든 것 같습니다.

또한 사이트로 가면 아래와 같은 동영상 튜토리얼이나, 메뉴얼 등 사용을 도와 주는 다양한 자료들을 제공합니다. 동작들에 대해 그림과 함께 설명이 있는 scrach cards는 프린팅하여 잘라 주면 아이들에게 더욱 흥미를 제공하고, 쉽게 적응할 수 있도록 할 것 같습니다.

사용자 삽입 이미지

또 하나 눈길을 끝는 것은 바로 위에 있는 Scratch Board란 하드웨어 입니다. Scratch와 연동하여 다양한 입출력을 제공하는 것 같습니다. 가격은 25달라인데 선적비용 까지 합치면 한국에선 45달라에 주문할 수 있습니다. 가격이 너무 비싼 것 같습니다. 전기나 회로에 관한 지식만 있다면 만들기가 그리 어려울 것 같지는 않은데, 저는 전혀 없으니 자작은 불가능할 것 같습니다.

직관적이고 심플하여 더 이상 뭐가 있을 것 같지는 않지만, 나중에 더 많이 사용해 보고 제대로 글을 올려 보아야 겠습니다. 
AND

이전 포스트에서 언급했던 Squeck에 대해서 간단한 예제를 작성해 보겠습니다. 이 예제는 squeakland.org에 있는 Drive a Car 예제를 기본으로 한글 Squeak에서 만들어 본 내용들이 입니다. 영어가 조금 되시는 분들은 원문 사이트를 보시는 것이 더 이해가 빠를 수도 있습니다.

squeak의 한국어 이미지 파일을 클릭하여 실행하면, 아래와 같은 화면을 보실 수 있습니다. 아래 화면은 맥에서 본 화일이며, 윈도우 환경 또는 다른 버젼에서는 많이 다른 모습으로 보여질 수 있습니다.
사용자 삽입 이미지
만약 영문으로 나오거나, 위의 모습과 틀리더라도 상관 없습니다. 기본적인 사용법은 똑 같으니, 조금만 살펴 보시면 해당 메뉴를 찾을 수 있습니다.


1. 자동차와 핸들 오브젝트 생성
1. 그림판 열기
사용자 삽입 이미지
스퀵을 실행하고 부품이나 안내자 등을 클릭하여 살펴 보면 그림판 또는 Paint Tool이라는 것이 있습니다. 이 아이콘을 더블클릭하거나 바탕의 화면으로 드래그 하면 간단한 페인트 툴이 나옵니다.


2. 자동차 그리기 및 저장
페인트 툴을 사용하여 아래와 같이 자동차를 하나 그립니다. 꼭 자동차일 필요는 없습니다 .비행기나 로켓트 등 움직이길 원하는 그림을 그리면 됩니다. 그림이 완성되면 우측에 보이는 KEEP 버튼을 클릭합니다. 그림판은 종료되고 자동차 오브젝트만 남습니다.
사용자 삽입 이미지

3. 핸들 그리기 및 저장
사용자 삽입 이미지
이제 핸들을 위해서 다시 그림판을 실행하고 좌측과 같이 핸들을 적당히 그립니다. 핸들도 자동차와 동일하게 그리기가 완료되면 KEEP 버튼을 클릭합니다.

좌측과 같이 이번 예제에 사용될 자동차와 핸들 두개의 오브젝트가 생깁니다.


2. 스크립트 생성

1. 스크립트 뷰어 오픈
사용자 삽입 이미지
이제 차에다 마우스 오른쪽 버튼을 클릭하면, 좌측과 같이 오브젝트 주위에 원모양의 작은 버튼 들이 나옵니다.

이 버튼들은 오브젝트 삭제, 크기 변경, 회전, 색상 선택, 디버깅 등 다양한 속성과 행동을 제어 할 수 있게 합니다. 왼쪽에서 세번째의 눈모양을 클릭하면 아래와 같은 스크립트 뷰어가 나옵니다.


2. 자동차 오브젝트 이름 변경
사용자 삽입 이미지
스크립트 뷰어에서 좌측과 같이 붉은 사각형 영역의 이름 부분을 더블 클릭하면, 이름을 수정할 수 있습니다. Sketch라고 기본으로 나온 이름을 삭제하고 자동차로 입력한 후 [Enter]를 칩니다.

좌측과 같이 자동차로 변경되어 있슴을 확인합니다.

3. 새로운 스크립트 생성
사용자 삽입 이미지
이제 자동차에 관한 새로운 스크립트를 만들기 위해, 좌측과 같이 [자동차][빈 스크립트]를 마우스로 드래그 하여 빈공간에 가져다 놓습니다.


4. 스크립트에 액션 설정
이제 아래과 같이 [자동차][소리내기], [자동차][진행하기], [자동차][돌기] 스크립트를 드래그 하여 빈 스크립트에 놓습니다. 이 상태에서 스크립트가 실행되면 자동차가 소리를 내면서 진행하며, 회전합니다.
사용자 삽입 이미지

5. 핸들 오브젝트 이름 변경
사용자 삽입 이미지
이번에는 핸들을 마우스 오른쪽 버튼을 클릭하고, 제어버튼들이 나오면 위와 같이 눈모양의 뷰어열기를 클릭합니다.

자동차와 같은 방법으로 Sketch1이라고 되어 있는 이름 부분을 클릭하여 핸들로 이름을 변경하여 줍니다.


6. 핸들을 이용한 회전 처리
핸들의 스크립트 중에 [핸들의][머리방향]을 드래그 하여 스크립트의 [자동차][돌기] 근처로 가져다 놓습니다. 아래와 같이 돌기 뒤의 숫자 블럭이 진한 녹색으로 변경되면, 그 자리에 [핸들의][머리방향]을 놓으면 결합됩니다. 결합된 모습은 하단에서 확인할 수 있습니다.
사용자 삽입 이미지

7. 동선 출력 설정
사용자 삽입 이미지
붉은 화살표가 가르키는 좌측의 아이콘은 현재 뷰어에서 보여지는 오브젝트 입니다. 오른쪽 파란 화살표가 가르키는 자동차를 클릭하여 자동차 스크립트를 오픈합니다.

사용자 삽입 이미지
기본으로 되어 있는 곳을 클릭하여 좌측과 같이 펜 사용을 선택합니다. [자동차의][펜 내리기]를 예로 선택합니다.

이제 자동차가 움직이는 동선으로 파란색의 선이 나타나게 됩니다. 펜 색깔, 두께, 스타일등을 변경해 가면서 실행해 봅니다.



3. 스크립트 실행
위의 스크립트를 실행하는 몇 가지 방법이 있습니다.
 
스크립트 왼쪽의 !   아이콘을 클릭하면 해당 스크립트가 클릭한 횟수 만큼 실행됩니다. 또 다른 방법은 아래와 같이 시계 아이콘을 클릭하면, 다시 시계를 클릭하여 멈출 때 까지 스크립트가 실행됩니다.

이제 시계 아이콘을 클릭하고, 핸들을 우클릭하여 좌측 하단의 회전 버튼을 클릭하여 핸들을 이리저리 돌려 보면 자동차가 핸들의 방향으로 진행하는 것을 확인할 수 있습니다.

사용자 삽입 이미지
AND

사용자 삽입 이미지
저에게는 초등학교 3학년인 아들이 하나 있습니다. 어려서부터 제가 컴퓨터에서 작업하던 모습을 보며 자란 이 녀석은 커가면서 제가 하는 작업을 따라 하려고 노력하였습니다.

어려운 프로그래밍을 배우려는 이유는 단 하나입니다. 그토록 좋아하는 게임을 직접 만들 수 있다는 것입니다.


어린 아들에게 프로그래밍을 권유하고 싶은 생각은 없지만, 컴퓨터로 게임만 하는 것보다 프로그래밍 공부를 해보겠다는데 딱히 말릴 이유도 없었습니다.

그래서 관련된 책도 사주었지만, 영어가 기반인 프로그래밍 언어와 VS, Xcode 같은 복잡한 툴을 사용하기에는 아직 어렸습니다.

관심이 없어진 줄 알았는데, 어느날 이 녀석이 티스토리에서 블로그를 만들어 아래와 같은 플래쉬들을 올리고 있다는 것을 알았습니다.
사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

다른 건 어려워서 못하고, 플래쉬는 조금씩 적응을 해나가고 있었나 봅니다. 플래쉬의 액션 스크립트도 약간 쓸 줄 알게 되고, 이제 배우기 쉬운 프로그래밍 언어를 조금씩 가르쳐 볼까하는 생각이 들었습니다.

그래서 구글에서 아이들을 위한 쉽고 재미있는 개발 환경을 찾다가, 우연히 squeakland라는 곳을 방문하게 되었습니다. squeak을 아이들을 위한 교육적인 목적으로 활용는 것에 관해 나와 있는 사이트였습니다. 아~ 바로 이거다 라는 생각이 들었습니다.

사용자 삽입 이미지
그러다가 거기서 본 한장의 사진에서 어디선가 본 듯한 얼굴을 보았습니다.

바로 현대적 PC를 제안하고, OOP의 개념을 확립하고, 스몰토크를 만든  엘런 케이...

(이 사진이 있는 홈페이지에도 엘런 케이라고 언급이 없으니 확실하지는 않지만 콧수염이랑 윤곽이랑 비슷한 것 같습니다.)
사진출처:squeakland

프로그래밍이나 컴퓨터 관련 책에 전설처럼 등장 하는 그가, 이 세상 사람이 아닌 줄 알았습니다. 하지만 그는 지금도 활발하게 활동하고 있었습니다.

사이트를 둘러 보니 squeak은 엘런 케이가 애플에서 그의 오랜 동료들과 시작한 프로젝트였습니다. 엘런 케이는 아이들을 위해 현대 PC 환경에 많은 영향을 준 그 유명한 다이나북을 제안하고, 그 뒤에도 어린이의 컴퓨터 사용에 관해 여러 연구를 진행하였습니다. 그런데 아직까지도 이 분야에서 계속 활동을 하고 있었던 것이었습니다.. 정말 아이사랑이 남다른 분 같습니다.
 
아무튼 저는 squeak을 다운 받아 실행시켜 보았습니다. 찾아보니 한국스퀵 사이트가 있길래, 이 곳에서 한국어 버젼을 다운 받았습니다. (세상엔 참 고마운 분들이 많습니다.)

사용자 삽입 이미지
위는 squeak 맥버젼을 실행시켜 본 모습입니다. 개인마다 차이가 있겠지만 개인적으로는 UI가 화려하다거나, 이쁘다는 느낌은 받지 못했습니다.

그 뒤 squeakland에 있는 drive a car 예제를 따라 해 보았습니다. 차와 핸들을 그리는 시간을 제외하고 자동차를 핸들로 조종하며 움직이게 만드는데 걸린 시간은 단 1분도 안되었습니다. 시키는대로 따라해 보고, 결과물을 본 저는 경악할 수 밖에 없었습니다.

뭐 이런게 다 있지...

아래는 제가 그린 차가 움직이고, 소리를 내고, 원하는 방향으로 움직이게 만드는 스크립트입니다. 모든 작업은 마우스로 하였기 때문에, 스크립트라고 하기도 그렇습니다. 가장 감명 받은 부분은 [붕붕카 돌기][핸들의  머리방향]을 결합 시킬 때였습니다.
사용자 삽입 이미지

제가 마우스로 작업을 하는 동안 squeak은 아래와 같이 스몰토크 코드를 생성해 놓았습니다. 스몰토크의 아래와 같은 문법때문에 위의 액션 블록이 쉽게 스몰토크 코드로 바뀔 수 있는 것 같습니다.
사용자 삽입 이미지

퇴근 후, 집에 가서 아들에게 사용하게 해 보았습니다. 결과는 역시 대성공. 아들 녀석은 자기가 그린 오브젝트들을 마음대로 다룰 수 있는 걸 보고 무척이나 좋아하였습니다. 나 같은 아빠들을 위해 조만간 이 블로그에도 squeak의 사용법에 대해서 간단하게 소개해 볼려고 합니다.

사용자 삽입 이미지
squeak은 아이들 놀이/교육의 용도로만 제작된 것은 아닙니다. SmallTalk-80과 개발환경, 기본 라이브러리를 가지고 있어, 전문적인 개발자도 원하는 용도로 사용할 수 있습니다.

좌측은 Squeak에서 간단한 SmallTalk 소스를 작성하고 실행해 본 이미지입니다. 위의 모습과 달리 개발툴의 냄새가 납니다.

실제 한국 스퀵 사이트는 스퀵으로 만든 웹서버와 웹 어플리케이션으로 운영되고 있다고 합니다.


사용자 삽입 이미지
또한 Squeak VM이 있으면 웹브라우져 상에서도 java 처럼 실행이 가능합니다. 아래는 파이어폭스에서 squeak으로 만든 프리쉘을 실행시켜 본 모습입니다.

이 게임 외에도 테트리스 등의 게임을 해당 사이트에서 확인하고 실행해 볼 수 있습니다.
 



제게 있어 엘런 케이는 오래전 책에서나 존재하던 사람이었습니다. 이제 세상이 좋아져 웹상에서  최근에 올린 그의 글들을 볼 수 있고, 이런 프로그램 까지 쓸 수 있게 되다니... 엘런 케이 아저씨 존경합니다.

"The best way to predict the future is to invent it."
(미래를 예측하는 가장 좋은 방법은 미래를 만드는 것이다.)
- Alan Kay -
AND