개발언어를 공부할 때 가장 좋은 방법은 게임을 만들어보는 것입니다. 게임은 그나마 비지니스 지향의 모델보다는 현실적인 객체지향을 공부할 수 있는 환경을 경험할 수 있다고 합니다. 그래서 올 한해 해온 일을 정리하는 느낌으로 간단한 웹게임을 구현해보고 있습니다.

웹게임에 대해서는 지속적으로 관심이 많았습니다. 웹은 비록 문서로 출발하였으나 플랫폼의 역할로 자리 잡은 지 오래되었습니다. 그럼에도 아직 걸출한 순수 웹기반 게임은 나오지 않았죠. 유료화의 모델이나 소스가 노출되는 경우의 문제점도 많았습니다만 실질적으로는 front-end 개발에 대해 전문가가 없었던 시장 상황이 가장 큰 영향이었던 것 같습니다. 최근 jQuery 등 다양한 javascript framework이 나와 쉽게 ajax와 연동하여 말 그대로 상호작용하는 웹을 구축하는데 이전에 비해 상당히 간편해진 편입니다. 오픈소스로 돌아다니던 수많은 웹게임은 request-response 의 한계를 극복하기 힘들어 내재된 iframe으로 계속 새로고침 한다거나 사용자 스스로가 F5를 연타함으로 실시간의 데이터를 불러오기 위해 고생 아닌 고생을 했었던 것에 비하면 엄청난 UX 증대라고 볼 수 있겠죠. 게다가 long-lived의 connection이 요구되었는데 때마침 node.js와 같은 다양한 도구들이 나타나기 시작했습니다. 지금까지의 웹게임은 대부분 플래시, activeX, 실버라이트와 같은 서드파티의 지원이 없어서는 안될 상황이었지만 이제는 웹 자체만으로도 충분히 가능한 상황이 되었습니다.

특히 그래픽이 화려하고 장시간을 투자한 헤비 유저와 하루에 십 여분 즐기는 라이트 유저 중 후자에게 웹게임은 충분히 메리트가 있었습니다. 게다가 웹게임은 일반 게임들에 비해 고사양을 요구하는 것도 아니며 브라우저만 있으면 장소와 운영체제(모바일까지도) 구분 없이 접속해 즐길 수 있다는게 최근 시장에 반영되어 웹게임 벤더도 많이 늘었고 대형 포털에서도 그에 맞는 웹게임들을 제공하기 시작했습니다. 소셜게임이라는 형태로 SNS와 연계되어 공간과 상관 없이 함께 즐길 수 있어 이와 같은 부분도 흡인요인으로 작용했습니다. facebook이나 싸이월드 등에서 즐기는 게임들이 다 이런 형태죠.

여튼 서문이 길어졌는데 제가 만들고 있는 아주 단순한 수준의 (서문에 비해 보잘것 없는;) 웹게임입니다. zynga에서 facebook을 통해 제공하는 farmvile이란 서비스를 모델로, 농장에 나무를 심는 그런 내용의 게임인데요. 틀을 만들어가다보니 나름 서비스의 방향성을 생각하게 되어 그냥 연습 이상에 뭔가(?)가 만들어질 것 같다는 생각에… 물론 뚜껑은 열어봐야 알겠지만요;

웹게임을 개발하면서 이것저것 검색도 해보니 게임코디라는 대형 커뮤니티도 있고(물론 웹게임에 관한 이야기는 거의 전무하죠..) 게임프로그래밍은 독자적인 영역으로서 인정받고 굳건하게 존재한다는 사실도 알게 되었습니다. 그리고 웹게임이 실제로 서비스가 된다면 그에 따라 게임물등급위원회의 심사도 받아야 하는데 이게 또 악명(?)이 높은가 봅니다.

일단 개발 자체에 대해서 몇자 적어보자면

• 개발은 php(codeigniter), mysql
• 모바일에서도 쉽게 즐길 수 있도록 가볍게 제작
• ux를 높이기 위한 js(jQuery) 사용
• 실 서비스를 염두함
• 앱으로 컨버팅 고려 (최소한 웹뷰 고려)
• 데이터는 json으로
• 기존의 소셜게임과는 조금 다른 접근으로

facebook에서 링크를 공유하거나 담벼락에 게시한 경우 해당 사이트의 정보가 페이스북에 캐싱되어 있습니다. 그래서 페이지 내용이 수정되면 캐시를 초기화 해줘야 하는데요. 아래의 주소로 들어가 해당 주소를 넣어주시면 갱신이 됩니다.

http://developers.facebook.com/tools/debug

php 싱글톤(singleton) 패턴인데 클래스 외부에서 function을 선언함으로 해당 클래스 자체에서 사용 가능하게 되는 형태였네요. CI가 이런 형태로 구현되어 있습니다.

<?php

function &#038; get_instance()
{
 return controller::get_instance();
}

class controller {
 private static $instance;

 function __construct(){
  self::$instance = &#038; $this;
  $this->load = new loader();
 }


 public static function &get_instance(){
  return self::$instance;
 }
}

class loader{
 function model($model_name){
  $controller = & get_instance();
  $controller->$model_name = new $model_name;
 }
}

class say{
 function hello(){
  echo "hello";
 }
}

class main extends controller {
   function __construct(){
      parent::__construct();
      $this->load->model("say");
   }

   function index(){
    $this->say->hello();
   }
}

$c = new main();
$c->index();

2014년 4월 추가 : 에디터 적용을 위해 이 글을 보고 있다면 Summernote를 확인하자. http://hackerwins.github.io/summernote/

에디터 문제로 늘 골머리를 썩히고 있는데 naver smart editor를 적용하자니 jindo라는 프레임워크를 하나 더 올리는게 부담스러워서 사용하지 않았었습니다. 한동안 열심히 에디터를 찾아봤지만 적당한 대안이 없어 …그냥 도입하기로 했습니다.

적용하려고보니 약간 문제가 있었습니다. jindo 에서 jQuery랑 동일하게 $를 사용하고 있는 문제로 jquery에 네임스페이스(namespace)를 지정해서 사용해야 했는데 jindo를 에디터에만 사용하기 때문에 스마트 에디터를 수정해서 jindo의 네임스페이스를 사용하는 편이 낫다는 판단을 했습니다. 앗, 절대 jindo가 별로라거나 나쁘다는 의미가 아닙니다…ㅎㅎ 사내에서 이미 jQuery를 많이 사용하고 있어서 교차로 사용하기엔 교육 문제도 있으니까요.

1. 먼저 nforge에서 smart editor, jindo(namespace)를 내려받습니다.
2. jindo를 js 폴더에 넣고 js 폴더에 있는 js 파일들을 열어 아래의 정규식으로 치환해줍니다.

> (\$\$\(|\$\$\.|\$A\(|\$A\.|\$Agent\(|\$Agent\.|\$Ajax\(|\$Ajax\.|\$Class\(|\$Class\.|\$Cookie\(|\$Cookie\.|\$Date\(|\$Date\.|\$Document\(|\$Document\.|\$Element\(|\$Element\.|\$ElementList\(|\$ElementList\.|\$Event\(|\$Event\.|\$Fn\(|\$Fn\.|\$Form\(|\$Form\.|\$H\(|\$H\.|\$Jindo|\$Json\(|\$Json\.|\$S\(|\$S\.|\$Template\(|\$Template\.|\$Window\(|\$Window\.)

> jindo.\1

내용은 jindo 레퍼런스에서 긁어와서 무식하게 만들었습니다; 저는 에디터 플러스에서 했습니다. 정규표현식으로 치환이 가능한 도구를 사용하시면 되겠습니다.

차기 네이버 스마트 에디터에서는 네임스페이스 버전을 제공한다고 개발자센터에 써져 있는 것 보면 얼른 업데이트 되길 기대해봅니다. 근데 최종이 2009년 9월이네요.

이번에 mysql 최신 버전을 써보겠다는 일념으로 mysql 5.5.x 소스를 받아 컴파일해서 서버에 올렸습니다. 이상하게 한글이 깨져 보니 기본 캐릭터셋이 latin1로 되어 있어서 변경해보고자 검색을 해봤지만 적용하니 mysql이 시동조차 되지 않는 상황; 다행히 mysql 커뮤니티를 계속 뒤진 결과 답을 찾을 수 있었습니다.

/etc/my.cnf 파일을 수정해서 [mysqld] 아래에 추가합니다.

[mysqld]
collation_server=utf8_unicode_ci
character_set_server=utf8

Cufon은 font를 js 데이터로 변환해 canvas로 출력하는 방식으로, 기존 iFR, FIR, sFIR 처럼 텍스트를 그래픽 폰트로 변경해주는 도구다. canvas 기반이라 플래시보다 무겁진 않지만 글꼴의 끝부분이 다소 뭉개지는 현상이 있다. 한국어 폰트는 여전히 글자수가 많기 때문에 용량상 이득은 크게 없는 편이다.

Cufon에서 :hover를 사용하기 위해서는 다음과 같은 방법으로 작성해야 한다.

Cufon.replace('#navlist li a', { hover: true, fontFamily: 'MyFont' });
Cufon.replace('h2, h3, h4', { hover: true,  fontFamily: 'MyOtherFont'});

다음과 같이 작성하면 내용이 덮어져 :hover가 동작하지 않는다는 점을 유의하자.

Cufon.replace('#navlist li a', {hover: true});
Cufon.replace('#navlist li a', {fontFamily: 'MyFont'});

java 소스도 겨우 읽는데 tomcat 서버 설치하느라 고생했습니다. 상당히 단순한 절차인데도 개발자분이 올린 소스가 계속 에러가 나서 설치 문제인줄 알고 몇번이고 다시 설치를 시도했는데 다행히도(?) 폴더명이 문제였습니다. 지웠다가 재설치 하는 작업은 반복적으로 하면 서버가 지저분해지는 문제점(?)이 있어 싫어하는데 이번에 처음으로 해본 가상서버 호스팅은 간편하게 서버를 초기화 할 수 있어 엄청나게 편리했습니다. 이 내용은 centOS (64bit)를 기준으로 작성하였습니다.

1. 먼저 jdk를 설치해야 합니다. http://java.sun.com/javase/downloads/index.jsp 로 가서 해당 환경에 맞는 버전을 내려 받아 설치합니다.

cd /usr/tmp

wget http://download.oracle.com/otn-pub/java/jdk/7u1-b08/jdk-7u1-linux-x64.rpm

rpm -Uvh jdk-7u1-linux-x64.rpm

위와 같이 입력하면 JDK 설치는 완료 됩니다.

2. tomcat을 설치합니다. http://tomcat.apache.org/ 에 가서 사용하고자 할 버전에 맞춰 내려 받습니다.

wget http://apache.mirror.cdnetworks.com/tomcat/tomcat-7/v7.0.22/bin/apache-tomcat-7.0.22.tar.gz

tar xvfpz apache-tomcat-7.0.22.tar.gz

mv apache-tomcat-7.0.22 /usr/local/tomcat

3. tomcat을 서비스로 등록해야합니다. 아래의 쉘 스크립트를 작성해서 /etc/rc.d/init.d/에 저장합니다.

#!/bin/sh

Startup script for Tomcat

chkconfig: 35 85 15

description: apache tomcat 6.x

processname: tomcat

Source function library.

export JAVA_HOME=/usr/java/default export CATALINA_HOME=/usr/local/tomcat export PATH=$PATH:$JAVA_HOME/bin:$CATALINA_HOME/bin

See how we were called.

case "$1" in start) echo -n "Starting tomcat: " $CATALINA_HOME/bin/catalina.sh start echo ;; stop) echo -n "Shutting down tomcat: " $CATALINA_HOME/bin/catalina.sh stop echo ;; restart) $0 stop sleep 2 $0 start ;; *) echo "Usage: $0 {start|stop|restart}" exit 1 esac exit 0

cat /etc/rc.d/init.d/tomcat #위 내용을 저장

chmod 755 /etc/rc.d/init.d/tomcat

4. tomcat을 서비스로 등록한 후 서비스 시작을 해줍니다.

chkconfig –add tomcat

service tomcat start

apache-tomcat으로 설치해줬기 떄문에 웹서버 설정은 별도로 변경할 필요가 없습니다. http://localhost:8080 으로 접속하면 tomcat 고양이가 야옹거리며 기다리고 있습니다.

설정하면서 기억할만한 내용들은 아래와 같습니다.

• web manager, host manager 를 지원하는데 /usr/local/tomcat/tomcat-user.xml 에 계정을 추가해주면 사용할 수 있다.
• tomcat은 WAS(web application server) 개념이다. 각각의 프로젝트가 /usr/local/tomcat/webapps 에 각 디렉토리로 저장이 되는데 LAPM에서 계정발급 해주고 FTP 접속 열어주고 하는 것처럼 하려면 webapps 쪽으로 vsftp를 수정하기 보다는 기존 계정 발급과 동일하게 생성해주고 webapps 폴더에 해당 계정 디렉토리 심볼릭 링크를 걸어주는 편이 한결 간편하고 쉽다.

안내 : 이 글은 2011년에 작성한 글입니다¹

최근에 @sh84ahn님이 관련 글을 작성하셔서 링크를 남깁니다.

• Aptana Studio SVN error folder ” does not exist remotely 대처법

개발에 Eclipse php development tools(PDT)를 사용했는데 syntax highlighter의 문제인지 들여쓰기를 조정하다보면 일부 부분들이 없어지는 현상이 자주 발생한다. 그런 이유로 Aptana를 설치하게 되었다.

Aptana studio는 웹개발에 최적화된 도구로 syntax highlighter도 잘 동작하고 들여쓰기 문제나 자동완성 부분도 상당히 편리하게 구성되어 있다. 요즘 유행하는 git도 별도의 설치 없이 바로 사용할 수 있고 remote(FTP)를 통해 프로젝트를 관리하기에도 상당히 편리하다. 하지만 SVN은 기본 설치가 되어 있지 않아 별도로 설치해줘야 한다. eclipse 설치하는 것과 같이 Help > Install New Software… 메뉴에 들어와 Work with에 아래의 주소를 입력한다.

http://subclipse.tigris.org/update_1.6.x

위 주소를 입력하고 아래에 해당 사항을 체크해 설치하면 된다. 기본 eclipse 값과 다른 부분이 있어서 그런지 모두 선택해서 설치하면 설치가 되지 않는다.

Subclipse Integration for mylyn 3.x (Optional)
Subversion Revision Graph

두가지 체크를 풀어 설치하면 바로 설치되어 사용할 수 있다.

httpd -k restart

위 커맨드를 사용해서 httpd를 재시작해줬는데 오늘 봤더니 CBand에 기록된 트래픽도 초기화 되더군요. 깜짝 놀랐습니다 ;ㅅ; 검색해보니… graceful이란게 있더군요. (http://httpd.apache.org/docs/2.0/ko/stopping.html) httpd.conf가 변경될 때는 서버의 연속성을 유지하며 재시작(이 표현이 적절한지 모르겠습니다만) 하기 위해서는 아래와 같이 하시면 되겠습니다.

httpd -k graceful

연재할 듯 글을 시작했으나 연재하지 않고 있습니다. (…)

이름 이쁜 프로그래밍 언어 루비. 루비 온 레일즈가 각광 받는데 궁금해서 전부터 배우고 싶었던 언어였고, 휴가를 이용해 배워보려고.

루비를 일단 설치해야 하는데 RoR이 최종 목표이므로 RoR 사이트(http://rubyonrails.org/)에서 win32 installer를 다운받아 설치하였다.

cmd를 시작 > 실행 해서 ruby를 실행하면 시스템변수로 선언이 안되어 있기에 당연히 안되고 그 설정 부분을 찾다찾다 보니까 별도의 설정이 아니라 Start Command prompt with Ruby를 이용해서 사용하면 되는 것이었다. 그것도 모르고 삽질을 ;ㅅ;

몇분 만에 블로그 만들기라는 이름으로 유명했던 RoR 튜토리얼 보고 해보려다가 rake db에 막혀서(sqlite3이 기본 db인데 어떻게 연결해야 하는지도 모르겠고;;) 루비 20분 가이드(http://www.ruby-lang.org/ko/documentation/quickstart/) 먼저 봤다. 베이직 언어 비슷한 느낌이 들지만 상당히 간편하고 개발 언어의 장점을 모아놓은 느낌. 뭐 튜토리얼 보고서 그런걸 한번에 알 순 없지만;;

20분 가이드의 결과물.

#!/usr/bin/env ruby

class MegaGreeter
  attr_accessor :names

  # Create the object
  def initialize(names = "World")
    @names = names
  end

  # Say hi to everybody
  def say_hi
    if @names.nil?
      puts "..."
    elsif @names.respond_to?("each")

      # @names is a list of some kind, iterate!
      @names.each do |name|
        puts "Hello #{name}!"
      end
    else
    puts "Hello #{@names}!"
    end
  end

  # Say bye to everybody
  def say_bye
    if @names.nil?
      puts "..."
    elsif @names.respond_to?("join")
      # Join the list elements with commas
      # 독특한 처리 방식, 값이 여럿(array인진 모르겠음;) 들어있으면 join이란 method가 생성
      # 이게 뭐 루비가 가지는 특성인 모양.
      puts "Goodbye #{@names.join(", ")}.  Come back soon!"
    else
      puts "Goodbye #{@names}.  Come back soon!"
    end
  end

end

if __FILE__ == $0
  mg = MegaGreeter.new
  mg.say_hi
  mg.say_bye

  # Change name to be "Zeke"
  mg.names = "Zeke"
  mg.say_hi
  mg.say_bye

  # Change the name to an array of names
  mg.names = ["Albert", "Brenda", "Charles",
    "Dave", "Englebert"]
  mg.say_hi
  mg.say_bye

  # Change to nil
  mg.names = nil
  mg.say_hi
  mg.say_bye
end