남정현의 Windows Azure 블로그

지난 아티클에서는 Phalanger와 PHP 사이에 차이점들이 있다고 말씀드렸습니다. 구체적으로 어떤 차이점들이 있을까요? 여러 프로그래밍 언어를 지원한다는 사실이 가장 큰 차이점이고 닷넷 기반 위에서 실행된다는 것이 구분되는 점이겠지만 이런 점을 차치하고 PHP 관점에서 차이점을 살펴본다면 지금 이야기하려는 토픽들에 대한 이야기가 빠질 수 없을 것입니다.

App_Code 폴더의 사용

Phalanger가 ASP.NET을 기반으로 하고 있기 때문에 자동으로 이어받는 특성으로, App_Code 폴더의 사용에 관한 부분이 있습니다. ASP.NET에서는 App_Code 폴더 안에 낱개 코드 파일들을 넣어두면 이것을 자동으로 웹 페이지의 서버 런타임에서 자유롭게 가져다쓸 수 있다고 하였는데, Phalanger도 마찬가지입니다. 웹 페이지를 렌더링하기 위한 목적이 아닌 공통이 되는 PHP 코드를 이 폴더에 넣어두기만 하면 자동으로 이 폴더에 속한 모든 PHP 코드들이 글로벌 문맥 상에서 사용 가능하게 활성화됩니다.

단, 조심해야 할 부작용이 하나 있다면 여기에 지나치게 많은 코드를 배치할 경우 컴파일 시간이 늘어나서 처음 사이트를 시작할 때 시간이 오래 걸리게 될 가능성이 있습니다. 안타깝게도 C나 C++처럼 병렬 컴파일은 아직 지원되지 않기 때문에 컴파일 시간이 오래 걸릴 경우 다양한 문제를 야기할 가능성이 있습니다.

php.ini와 같은 Global Configuration이 아닌 web.config에 의한 설정

PHP의 경우 설정을 변경하기 위해서는 PHP 전체의 설정을 주관하는 php.ini 파일을 업데이트하거나, PHP를 다시 컴파일하여 설치하는 번거로운 과정을 거쳐야만 모듈에 대한 설정이나 추가/제거가 가능했습니다. 하지만 Phalanger의 경우 현재 만들어진 응용프로그램 풀마다 다른 설정을 가지도록 구성할 수 있으므로 좀 더 자유도 높은 설정이 가능합니다. 이를 위해서 web.config 파일을 수정하고 저장하기만 하면 됩니다.

이러한 설정을 다루기 위해서는 phpNet이라는 XML 요소를 web.config에 지정해야 하는데, 그냥 지정할 수는 없고 반드시 적절한 처리기를 연결해주어야 합니다. web.config은 단순한 XML 파일이 아니라 닷넷 프레임워크가 직접 내용을 검사하고 분석하는 프로그램 코드의 일부이기 때문에 규칙을 준수하는 것이 매우 중요합니다.

phpNet 요소를 추가하려면 web.config에서 <configuration> 요소의 제일 첫 번째 노드로 아래 XML 조각이 배치되어야 합니다.

<configSections>
<section name="phpNet" type="PHP.Core.ConfigurationSectionHandler, PhpNetCore, Version=3.0.0.0, Culture=neutral, PublicKeyToken=0a8e8c4c76728c71" />
</configSections>

그 다음, 보기에 편리한 위치에 phpNet 요소를 추가합니다. 보통 아래의 코드 조각으로 최초 설정을 시작하면 무난합니다.

<phpNet>
<classLibrary>
  <add assembly="PhpNetClassLibrary, Version=3.0.0.0, Culture=neutral, PublicKeyToken=4af37afe3cde05fb" section="bcl" />
  <add assembly="PhpNetXmlDom, Version=3.0.0.0, Culture=neutral, PublicKeyToken=2771987119c16a03" section="dom"/>
</classLibrary>   
</phpNet>

php.ini 파일의 샘플 사본을 복사하여 php.ini 파일로 사용하던 것과 비슷한 접근 방법이지만 각 사이트 혹은 도메인 별로 따로 사용하는 web.config 파일 안에서 이러한 설정을 다루는 것이 중요한 차이점입니다. 그리고 무엇보다도 안심해도 좋은 것은 INI 파일처럼 프로그램이 잘못 다루게 될 가능성이 있는 파일이 아니라, XML의 형태로 설정 파일이 관리되므로 web.config 파일을 건드리는 다른 써드 파티 어플리케이션 때문에 Phalanger의 설정이 깨지거나 변형될 일이 거의 없다는 점입니다.

위의 기본 설정을 지정하면 Phalanger에서 기본적인 PHP API를 사용할 수 있으며, PHP5부터 기본으로 제공되는 SimpleXMLElement도 위의 설정으로 기본으로 활성화됩니다.

PHP/CLR의 사용

이제 위의 설정을 토대로 PHP/CLR을 활성화하여 닷넷 프레임워크의 기본 API를 Phalanger에서 즉시 호출하여 사용할 수 있습니다. 위의 <phpNet> 요소 아래에 다음의 XML 요소를 추가하면 됩니다.

<compiler>
  <set name="LanguageFeatures">
    <add value="PhpClr" />
  </set>
</compiler>

그리고 <classLibrary> 요소 아래에 .NET Framework 기본 어셈블리에 대한 레퍼런스를 추가합니다.

<classLibrary>
  <add assembly="mscorlib" />
  <add assembly="System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
  <add assembly="System.Drawing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
  <add assembly="PhpNetClassLibrary, Version=3.0.0.0, Culture=neutral, PublicKeyToken=4af37afe3cde05fb" section="bcl" />
  <add assembly="PhpNetXmlDom, Version=3.0.0.0, Culture=neutral, PublicKeyToken=2771987119c16a03" section="dom"/>
</classLibrary>

이제 새로 추가한 코드가 의도한대로 잘 작동하는지 살펴보기 위하여, 이미지 리사이징을 수행하는 샘플 코드를 Phalanger 위에서 실행하도록 PHP/CLR 기반으로 코드를 만들어보도록 하겠습니다. 이 코드는 http://wiki.php-compiler.net/Code_Samples/Resize_image 의 예제를 발췌하여 조금 변형한 것입니다.

<?php
use System\Drawing\Bitmap;
use System\Drawing\Graphics;
use System\Drawing\GraphicsUnit;
use System\Drawing\Rectangle;
use System\Web\HttpContext;

function resize_imageSysDraw($from,$wid,$hgt)
{
  $bmp = Bitmap::FromFile($from);
  $fmt = $bmp->RawFormat;
  $new = new Bitmap($wid, $hgt);
  $gr = Graphics::FromImage($new);
  $gr->DrawImage($bmp,
    new Rectangle(0,0,$wid,$hgt),
    new Rectangle(0,0,$bmp->Width, $bmp->Height),
    GraphicsUnit::Pixel);
  $gr->Dispose();
  $new->Save(HttpContext::$Current->Response->OutputStream, $fmt);
  $new->Dispose();
}

resize_imageSysDraw(realpath('Penguins.jpg'), 320, 240);
?>

PHP/CLR의 경우 여느 닷넷 언어들과 마찬가지로 네임스페이스에 속한 클래스에 대한 참조를 use 명령어로 지정하고 있으며, 정적 멤버에 대해서는 :: 연산자를, 객체 생성은 new 연산자를 사용하였습니다. resize_imageSysDraw 함수에서는 ASP.NET의 HttpContext를 가져와서 기본 출력 대신 비트맵 이미지를 내보내도록 만들었고 그 결과 아래와 같이 축소된 이미지가 렌더링되서 나타나게 됩니다.

Phalanger의 LINQ 지원

이제 마지막으로 PHP/CLR의 하이라이트라고 할 수 있는 LINQ 지원에 대해서 살펴보겠습니다. LINQ는 Microsoft Research에서 C# 언어의 확장 사양인 C-omega 언어의 일부로 개발 중이던 사양을 정규화하여 Production Spec으로 만든 것으로, C# 이외에 VB.NET에도 영향을 주었으며 Prism이나 지금 소개하는 Phalanger에서도 개념을 적극 채택하여 정규 사양으로 활용 중입니다. 그리고 F#은 이러한 접근을 더욱 드라마틱하게 활용하여 함수형 언어로 발전시키기도 하였습니다.

LINQ에 대해서 이야기하려면 책을 한 권 따로 만들어야할 만큼 방대합니다. 그래서 자세한 이야기는 하지 않고, LINQ 자체에 대해서 진지하게 학습하기 원한다면 LINQ 관련 국내외 도서들을 검토하기 바랍니다. 개인적으로는 "생각하는 C# LINQ"라는 책을 추천합니다. :-)

http://kangcom.com/sub/view.asp?sku=200809180001&mcd=571

LINQ는 한 마디로 이야기하면, 프로그래밍 코드를 한 방향에서만 바라보도록 뷰 포인트의 시각을 고정한 것과 같습니다. 본디, 어떤 연관성이 있는 데이터 집합을 접근하는 방법에는 여러 가지 방법이 있을 수 있지만 LINQ는 데이터가 어떤 순서로 들어있든, 어떤 형태로 연결되어있든 관계없이 데이터를 꺼내올 수 있도록 도와주는 Iterator 패턴의 한 형태인 Enumerator를 조금 독특하게 해석하였습니다.

Enumerator가 열거할 대상을 미리 정할 수 있도록 만들고, 열거할 때 조건을 지정하여 필요없는 데이터는 건너뛸 수 있게 해준다던지 이런 취지에서 해석을 한 것이 LINQ입니다. 그리고 Enumerator를 수정하게 되는 시점이 이미 메모리 상에 저장된 데이터 셋에 대한 작업인지, 아니면 아직 수신되지 않은 미지의 데이터 셋에 대한 작업인지에 따라서도 지연 실행이냐 즉시 실행이냐 이렇게 구분하기도 하구요. 그러면서도 항상 잃지 않는 것은 핵심은 Enumerator라는 사실이며, 이에 입각하여 배열이나 리스트같은 정규화된 자료 구조로 변환할 수 있는 길을 항상 열어놓아 최대한의 유연성을 부여하기도 합니다.

어렵게 들릴 수도 있지만 Enumerator를 수정할 수 있게 해준다는 컨셉은 생각보다 활용 폭이 넓은데, 가장 가까이 있는 예로는 SQL 쿼리가 될 수 있습니다. 처음의 아이디어는 SQL 쿼리를 이용하여 전체 데이터 셋보다 가능한 적게 데이터를 반환하여 네트워크 트래픽을 줄이고 빠르게 데이터를 검색할 수 있도록 최적화하자는 것에 있었을 것이며, 이것을 좀 더 프로그래밍 언어와 친화적으로 만들 방법을 모색한 끝에 LINQ to SQL이 나타나게 된 셈입니다. 그리고 이를 필두로 접근할 수 있는 모든 유형의 컬렉션에 대해서 이런 아이디어를 대입하여 현재는 오픈 소스를 찾아보면 정말 엄청나게 많은 LINQ provider들을 발견할 수 있을 정도입니다.

이렇게 독창적이고 전례없던 기술을 Phalanger에서도 이용할 수 있다는 것은 매우 좋은 일입니다. <phpNet> 요소에 대해 PHP-CLR을 활성화하도록 설정을 수정한 후 아래 코드를 테스트해보기 바랍니다.

<?php
$myarray = json_decode('[
    {"label":"foo","name":"baz"},
    {"label":"boop","name":"beep2"},
    {"label":"foo","name":"baz1"},
    {"label":"boop","name":"beep3"},
    {"label":"foo","name":"baz2"},
    {"label":"boop","name":"beep1"}
]', true);

$result =
from $myarray as $x
where $x['label'] == 'foo'
select $x['name'];

foreach ($result as $x) {
    print($x.'<br />');
}

print_r($result);

?>

json_decode라는 기본 PHP 함수를 이용하여 JSON을 PHP 연관 배열로 바꾸고, 이것을 LINQ로 조회한 다음, 그 결과를 foreach 문을 통해서 출력하도록 만들었습니다. C#이나 VB.NET의 LINQ와 약간 다른 점은, from 절에서 in 연산자 대신 as 연산자를 사용하고 in 연산자와는 도치되는 좌/우항 관계를 가집니다. 즉, [나열 변수] in [데이터 소스] 에서 [데이터 소스] as [나열 변수]로 바뀝니다. 그리고 이것은 foreach 문에도 동일하게 적용됩니다. 아래는 실행 결과입니다.

PHP, JSON, 그리고 LINQ가 한 자리에 모여 매우 재미있는 상호 작용을 이룬 것을 볼 수 있습니다. 이 정도면 닷넷에서의 웹 프로그래밍이 이전과는 제법 많이 달라질 수 있다는 것을 체감할 수 있을 것입니다.

다음번에는 Phalanger가 기존 PHP의 모듈들을 어떻게 다루고 관리하는지에 대한 상세한 내용을 살펴보도록 하겠습니다. 긴 글 읽어주셔서 감사합니다. :-)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

안녕하세요. Azure MVP 남정현입니다. 지난번 프로 SQL 애저 입문에 이어 이번에는 모바일 웹과 앱에 대한 번역서를 출간하게 되었는데요, 제목은 "스마트폰을 위한 모바일 웹&앱 개발하기"입니다. 웹 기술 관련 도서로 유명한 SITEPOINT의 책을 번역하였고, 최신 웹 기술의 모바일 관련 사양을 상세하게 다루는 실용적인 책입니다.

책에 대한 정보

• 출판사 공식 홈페이지
• 네이버 책
• 다음 책
• 네이트 책

책 구입하기

• 교보문고 (온라인/오프라인)
• 반디앤루니스 (온라인/오프라인)
• YES24 (온라인)
• 강컴 (온라인)
• 대교 LIBRO (온라인/오프라인)
• 영풍문고 (온라인/오프라인)
• 알라딘 (온라인)
• 11번가 도서 (온라인)
• 인터파크 도서 (온라인)
• d&shop (온라인)
• 영광도서 (온라인/오프라인, 부산지역)
• G마켓, 옥션 - 검색어에 "스마트폰을 위한" - 또는 - "모바일 웹&앱"을 입력해보세요.

책 상세 정보

'스마트폰을 위한 모바일 웹&앱 개발하기'는 모바일 웹 개발의 경이로운 가능성으로 안내하는 책으로, 최일선의 웹 디자이너와 웹 개발자들을 위한 실용 가이드이다. 여러분은 이 책에서 이전과 다른 흥미롭고 새로운 방식의 모바일 웹 디자인과 웹 개발 방법을 찾아나가면서 무한한 가능성을 보게 될 것이다. 모바일 웹 개발은 매우 빠른 속도로 변화하고 있으며, 그 중에서도 터치스크린 방식의 스마트폰에 대한 비중이 날로 높아지고 있는 중이다. 이 책의 지침을 따르면, 여러분은 이러한 새로운 기술의 상당부분에 대한 스킬을 거의 완벽하게 학습할 수 있을 것이다.

더보기

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

지난 아티클에 이어 오늘은 Phalanger를 이용하여 C#과 VB.NET 코드를 동시에 활용하는 예를 한 번 조명해보려고 합니다. 사실 이것이 Phalanger의 하이라이트라고 하여도 무방하지 않습니다. 기존의 C#과 VB.NET 로직을 재사용하면서도 Phalanger로 빠르고 가볍게 웹 페이지를 풀어나가는 방식은 여러모로 웹 개발에 가속을 붙여줄 것입니다.

계속 설명하기 전에, Phalanger가 ASP.NET 위에서 실행되기 때문에 적용되는 한 가지 특수한 규칙을 이야기할 것이 있습니다. 바로 미리 정해진 이름의 폴더인데, Bin, App_Code 폴더입니다. 그 외 많은 폴더들이 있지만 지금은 두 가지만 살펴보겠습니다.

앞에서 이야기한대로 ASP.NET은 닷넷 프레임워크를 기반으로 작동한다고 하였고, 닷넷 프레임워크는 언어의 종류와 무관하게 MSIL이라는 코드로 컴파일되서 나오는 DLL 파일들을 취급할 수 있습니다. 그렇게 만들어지는 DLL 파일들은 Bin 폴더에 파일을 넣어주면면 자동으로 참조가 활성화되서 해당 웹 사이트 안의 모든 닷넷 코드에서 클래스 라이브러리를 사용할 수 있게 됩니다. 단, 주의할 것은 이 폴더 안에 아무 DLL이나 넣을 수 있는 것은 아니며 반드시 닷넷으로 컴파일된 DLL만 포함시킬 수 있습니다.

그리고 이번 아티클에서 가장 핵심이 되는 기능을 제공하는 폴더인 App_Code 폴더는, 컴파일을 하려는 모듈에 대한 코드를 여기에 넣어서 모든 페이지에서 공유할 수 있습니다. 기본적으로 이 폴더에는 한 종류의 언어에 해당되는 파일들만 넣을 수 있고, 그외 다른 언어의 파일이 포함되면 아래 이미지와 같은 오류가 발생합니다. 하지만 제가 이전에 소개했던 약간의 추가 설정을 적용하면 App_Code 폴더에서 여러 프로그래밍 언어를 동시에 사용할 수 있습니다.

위와 같이 나타나는 문제를 해결하기 위하여, App_Code 폴더 자체에서 사용할 언어는 Phalanger로 정하고, App_Code 폴더 안의 두 번째 수준의 디렉터리들에 C#이나 VB.NET 같은 언어를 사용하기로 결정합니다. 그리고 web.config 파일에 다음과 같이 <system.web> 요소 아래에 하위 디렉터리가 존재한다는 것을 알려줍니다.

<system.web>
<globalization requestEncoding="utf-8" responseEncoding="utf-8" fileEncoding="utf-8" />
<compilation>
  <codeSubDirectories>
    <add directoryName="Cs" />
    <add directoryName="Vb" />
  </codeSubDirectories>
</compilation>
</system.web>

그리고 App_Code 폴더에 각각 Cs 폴더와 Vb 폴더를 만듭니다. 폴더 이름에서 바로 알 수 있듯이 각각 C#과 VB.NET 코드를 따로 보관할 수 있도록 하고, 위의 그림처럼 오류가 발생하지 않으면서 자동으로 C#과 VB.NET으로 만든 코드를 Phalanger에서 액세스할 수 있도록 하게 할 것입니다. 이것으로 준비는 모두 끝났으며 우리가 원하는대로 C#과 VB.NET 코드를 추가하기만 하면됩니다.

C# 코드

using System;
using System.Collections.Generic;
using System.Web;

/// <summary>
/// Summary description for ClassName
/// </summary>
public class ClassName
{
    public string Name { get; set; }
    public int Age { get; set; }
    public override string ToString() {
        return String.Format("Name: {0} / Age: {1:D3}", Name, Age);
    }
}

VB.NET 코드

Imports Microsoft.VisualBasic

Public Class ClassName2
    Public Content As String
End Class

그리고 중요한 부분이 있습니다. Phalanger가 서브 디렉터리에 있는 코드들을 컴파일하였을 때 각각 따로 만들게 될 코드 조각들을 인식할 수 있도록 최소한 1개 이상의 임의의 PHP 파일이 필요합니다. 이후 아티클에서 따로 설명하겠지만 Phalanger는 App_Code 폴더 안에 있는 PHP 파일을 모두 자동으로 include하는 동작을 가지고 있습니다. (이것이 이전의 Original PHP와는 다른 부분입니다.)

지극히 일상적이고도 당연한 클래스 선언을 담고 있는 파일을 각 디렉터리에 추가하였습니다. 이제 웹 매트릭스의 폴더 레이아웃은 아래 그림과 같은 형태가 되면 됩니다.

이제 마지막으로 index.php 코드를 아래와 같이 작성합니다. 아래와 같이 작성하면 정말 PHP에서 C#과 VB.NET 코드를 자동으로 불러올 수 있을까요? 기대됩니다. :-)

<?php       
// C#
$test1 = new ClassName();
$test1->Name = "남정현";
$test1->Age = 2012-1987;
print $test1->ToString().'<br />';
print get_class($test1).'<br />';

// VB.NET
$test2 = new ClassName2();
$test2->Content = '<strong>안녕하세요!!!</strong>'.'<br />';
print $test2->Content;
print get_class($test2).'<br />';

phpinfo();
?>

ClassName은 C#으로, ClassName2는 VB.NET으로 만든 코드입니다. PHP/CLR 확장의 도움으로 Name, Age, Content 프로퍼티에 문자열을 대입하고 있으며, print 문을 이용하여 웹 페이지 상에 문자열을 출력합니다. 그리고 get_class라는 기본 PHP 함수를 사용하여 클래스 형식명을 가져오는 일도 하려고 하는군요. 마지막으로는 phpinfo() 함수를 호출하여 Phalanger 및 서버 시스템에 대한 정보도 덤프로 출력합니다. 이제 이 페이지를 실행해보면 아래와 같이 나타나게 될 것입니다. :-)

훌륭합니다! C#과 VB.NET 컴파일러를 따로 부르는 일 없이 앉은 자리에서 한 번에 코드를 컴파일하고, 이것을 PHP에서 보기 좋게 가져다 쓰는 일까지 해냈습니다.

다음 아티클에서는 마지막으로 Phalanger만의 고유한 기능이라고 할 수 있는 자동 include에 대해서 마지막으로 이야기해볼까 합니다. Original PHP에서는 include나 include_once 같은 함수를 어떤 인과 관계에 따라서 포함하게 될 것인지, 그리고 순서에 대해서도 많은 고민을 해야 했지만 Phalanger는 이러한 부분에 대한 고민을 많이 덜어낼 수 있습니다. 그리고 그 중심에는 App_Code 폴더의 역할이 크다고 했는데요, 이 부분에 대해서 집중적으로 살펴보려고 합니다.

 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Phalanger 공식 웹 사이트에서 따로 소개된 적은 없지만, Phalanger와 웹 매트릭스는 아주 이상적인 궁합을 보여주고 있으며 Phalanger가 보여주고자 하는 모습을 가감없이 완벽하게 보여줍니다. 이 아티클을 다 읽고 나면 지금 말하는 것이 어떤 의미인지 알게 될 것입니다.

Phalanger 설치하기

우선 컴퓨터에 Phalanger를 설치해야 합니다. 이전 아티클에서 이야기한대로 Phalanger는 .NET Framework 4.0을 필요로 합니다. 그리고 지금 우리가 실습하려는 WebMatrix도 설치해야 하는데, 결론적으로 지금 이야기하는 도구와 프레임워크들은 한 번에 Microsoft /web 홈페이지에서 제공하는 Web Platform Installer를 이용하여 한 번에 설치할 수 있습니다. http://www.microsoft.com/web 에서 WPI를 설치하고 WebMatrix와 .NET Framework 4.0을 선택하여 설치를 진행하도록 합니다. Phalanger를 설명하는 과정에서는 필요없지만, C#이나 VB.NET을 같이 사용하려고 한다면 Visual Web Developer 2010 Express도 설치합니다.

기본 구성 요소 설치가 끝나면 http://www.codeplex.com/phalanger에서 최신 버전의 Phalanger 설치 프로그램을 다운로드하여 설치를 시작합니다. Phalanger 설치 프로그램 안에는 런타임과 Visual Studio 도구가 모두 들어있습니다. 웹 개발에는 Visual Studio 도구가 따로 필요하지 않으며, Phalanger를 이용해서 PHP/PEAR와 같은 응용프로그램 개발을 하기 원한다면 Visual Studio 도구를 사용하는 것이 편합니다.

WebMatrix에서 Phalanger 사용하기

기본적으로 WebMatrix는 PHP4와 PHP5를 지원합니다. 그러나 WebMatrix가 기본으로 제공하는 PHP 런타임은 사용하지 않고 앞 단계에서 설치한 Phalanger 런타임을 대신 불러오도록 설정을 업데이트할 것입니다. 그러면서도, 기존의 PHP 개발 템플릿을 그대로 이용할 수 있습니다.

WebMatrix에서 Phalanger를 사용하는 방법은 간단합니다. 여러분이 원하는대로 사이트를 하나 새로 만들고, 사이트 탭을 클릭하고 설정 메뉴를 클릭하면 아래와 같이 화면이 나타납니다. 그림에 적은 설명대로, .NET Framework는 버전 4.0을 사용해야 하며, PHP 설정은 사용하지 않고, 필요하다면 index.php가 기본 페이지로 지정되도록 합니다.

이제 파일 탭을 클릭하고 F5키를 눌러 web.config 파일이 있는지 확인합니다. 만약 없다면 web.config 파일을 새 파일로 하나 추가합니다. web.config 템플릿이 WebMatrix에 기본으로 제공되므로 쉽게 추가할 수 있을 것입니다.

참고로 web.config은 기존의 ASP.NET 환경에서도 쓰이지만 WebMatrix가 내부적으로 서버로 사용하는 IIS 7 Express 및 IIS 7의 설정 파일로도 사용되며, IIS 6 이하에서 사용하던 메타베이스 기반 설정과는 달리 Apache HTTP Server의 httpd.conf와 같은 맥락의 디렉터리 단위 설정 파일이라고 보면 되겠습니다.

web.config 파일을 열어서 <system.webServer> XML 요소 아래의 내용을 수정해야 합니다. (다른 부분이 있더라도 여기서는 필요하지 않습니다.) 아래의 내용을 추가하여 PHP 확장자에 대한 지원을 추가하도록 합니다.

<handlers>
  <add name="PhalangerHandler" path="*.php" verb="*" type="PHP.Core.RequestHandler, PhpNetCore, Version=3.0.0.0, Culture=neutral, PublicKeyToken=0a8e8c4c76728c71" resourceType="Unspecified" preCondition="integratedMode" />
</handlers>

파일을 저장하고, 잘 작동하는지 테스트하기 위하여 index.php 파일을 만들고 아래와 같이 코드를 작성합니다. 그리고 상단의 실행 버튼을 눌러 잘 나타나는지 확인합니다.

<?php

class myClass {
    var $x;
}

$test = new myClass();
$test->x = "Hello, World! in ";
print $test->x.'<br />';
print get_class($test);

phpinfo();

?>

그러면 아래와 같이 화면이 나타날 것입니다. 클래스를 선언하고, 변수 필드를 선언하고, 여기에 값을 대입하거나 print 문을 사용하여 문자열을 출력하고, get_class 같은 간단한 형식 조회 함수도 씁니다. 아, 그리고 phpinfo 함수는 PHP 세계에서는 매우 기초적이고도 기본적인 함수였죠. :-)

그리고 흔히 사용하는 include_once 같은 API도 잘 작동합니다. 같은 디렉터리 상에 test.php를 만들고 class 선언만 따로 떼어 저장한 다음 include_once 함수를 호출해보기 바랍니다.

test.php

<?php
class myClass {
    var $x;
}

?>

index.php

<?php

include_once('test.php');

$test = new myClass();
$test->x = "Hello, World! in ";
print $test->x.'<br />';
print get_class($test);

phpinfo();

?>

Phalanger에서 한글을 사용하려면

PHP4나 PHP5와 다를바 없는 실행 모습입니다. 그런데 한 가지 점검해봐야 할 것이 있습니다. Phalanger에서 한국어나 일본어같은 2바이트 문자를 정상적으로 취급할 수 있을까요? 기본 설정으로는 그렇지 않을 가능성이 있습니다. 그리고 웹 매트릭스는 모든 파일을 UTF-8로 저장하기 때문에 문제가 됩니다. 이러한 문제를 예방하기 위해서는 반드시 web.config 설정을 변경해야 합니다.

<system.web> 요소 아래에 다음의 코드를 추가하도록 합니다.

<globalization requestEncoding="utf-8" responseEncoding="utf-8" fileEncoding="utf-8" />

그리고 앞의 코드에서 한국어 문자열을 포함하는 print 명령문을 한 번 더 추가하여 한글이 잘 나오는지 확인합니다.

이제 Phalanger를 WebMatrix에서 개발할 준비는 다 끝났습니다. 다음 아티클에서는 Phalanger만의 고유한 기술적 특징을 살펴보면서, Phalanger를 C#과 VB.NET과 함께 사용하는 방법을 살펴보도록 하겠습니다. :-)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

그 동안 .NET은 ASP.NET을 통해서 개발하는 것이 가장 최선이었고 실제로도 많은 개발 프로젝트는 ASP.NET 웹 폼을 통해서 진행되어왔습니다. 그리고 당연한 이야기이지만 PHP와 .NET은 전혀 다른 도메인에 속해있던 분리된 환경이었고, 그저 IIS를 통해서 호스팅 가능한 서로 다른 응용프로그램 도메인 상의 환경일 뿐이었습니다.

그러나 최근에 아주 흥미롭고 참신한 발견을 다시 했는데, 그간 베타 수준에만 머물러있던 Phalanger의 꾸준한 버전 업그레이드를 통해서 올해 1월에 3.0 버전을 발표했습니다. 64비트 시스템에 대한 지원도 충실히 하고 있으며, PHP의 태생적 한계로 자주 지목된 성능 상의 문제도 .NET 런타임을 사용하기로 하였기 때문에 구조적으로 해결하고 있으며, 무엇보다도 중요한 것은 엄격하게 PHP의 문법을 준수한다는 전제 아래에서 PHP 코드를 사용할 수 있다는 점입니다.

ps. Phalanger의 발음은 '팔란저'라고 하면 됩니다. 뜻은 '여우 원숭이'입니다.

Phalanger 프로젝트의 주요 기능은 다음과 같습니다.

PHP를 .NET 환경의 주요 프로그래밍 언어로 사용 가능하게 만듭니다.
* PHP 언어를 .NET CLR에서 사용 가능한 MSIL로 컴파일합니다.
* .NET 객체를 직접 PHP/CLR 언어 확장을 통해서 곧바로 사용할 수 있습니다.
* C#, VB.NET 등의 .NET 프로그래밍 환경에서 기존 PHP 코드 기반 라이브러리를 재사용할 수 있습니다.

기존 PHP 응용프로그램의 실행 속도를 향상시킵니다.
* 기존의 많은 수의 PHP 응용프로그램을 컴파일할 수 있습니다.
* Just-in-Time (JIT) 컴필레이션을 통해서 실행 속도를 개선할 수 있습니다.
* 표준 PHP 라이브러리 함수들과 네이티브 PHP4 확장 플러그인들을 그대로 사용할 수 있습니다.

PHP/CLR 확장을 통해서 PHP의 기능을 확장할 수 있습니다.
* PHP/CLR을 통해서 기존의 .NET CTS 시스템과 완벽하게 연동할 수 있습니다.
* PHP/CLR 프로젝트에 기존의 C#, VB.NET, C++ CLR 등으로 작성한 코드의 네임스페이스를 불러올 수 있습니다.
* PHP 언어로 .NET 제네릭 형식을 불러오거나 제작할 수 있습니다.
* .NET 커스텀 어트리뷰트, 부분 클래스, 프로퍼티 등 주요 기능들을 지원합니다.

PHP 언어로 .NET 라이브러리를 만듭니다.
* .NET/Mono 어셈블리에 맞추어 PHP 스크립트를 직접 DLL로 컴파일할 수 있습니다.
* Pure Mode를 사용하면 네이티브 코드에 의존하지 않는 완전한 .NET 환경에 맞출 수 있습니다.
* Legacy Mode를 사용하면 기존 PHP4/PHP5와의 호환성을 유지하면서도 .NET 환경에 맞출 수 있습니다.

PHP 프로젝트에서 .NET 라이브러리를 사용할 수 있습니다.
* C#이나 VB.NET으로 작성한 비즈니스 로직 위에 PHP를 표현 수단으로 채택할 수 있습니다.
* Phalanger를 통해서 기존에 작성한 어떤 종류의 .NET 객체이더라도 PHP에서 사용할 수 있습니다.
* ASP.NET 2.0 멤버십 API를 Phalanger 기반 PHP와 ASP.NET 모두에 적용할 수 있습니다.

PHP 언어를 Visual Studio에 통합할 수 있습니다.
* 프로젝트 템플릿, 문법 하이라이트, 디버거를 설치할 수 있습니다.
* 이를 통하여 Windows Forms, Console, Simple Win32 App을 만들 수 있습니다.

미리 이야기할 것이 하나 더 있는데 안타깝게도, Phalanger가 지원하는 PHP 문법은 기존의 PHP 문법과 완벽하게 일치하는 것이 아닙니다. 그래서 Phalanger를 기존의 PHP와 완벽하게 동일한 집합이나 기술로 보는 것은 다소 무리가 있으며, 대신 기존에 여러분이 알고 있던 PHP를 .NET 환경에서 그대로 쓸 수 있다는 사실에 집중하는 것이 바람직합니다.

개인적으로 Phalanger를 테스트하기에 가장 이상적인 환경은 WebMatrix인 것 같습니다. 다음 아티클에서는 Phalanger를 설치하고 WebMatrix위에 Phalanger로 PHP 코드를 작성하는 방법을 소개하도록 하겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Windows Azure에서 리눅스를 게스트 OS로 2012년 중에 지원을 추가할 예정입니다.

Microsoft 전문 테크니컬 칼럼니스트인 Mary-Jo Foley의 기사에 따르면, Microsoft가 2012년 중에 리눅스를 실행할 수 있도록 Windows Azure 서비스를 업데이트할 예정이라고 합니다. 워낙에 특이하고 걸출한 토픽인지라 이 기사 자체가 잘못된 것이 아니냐는 반문을 살 정도로 뜨거운 이슈인 것 같습니다. :-)

현재 나와있는 Web Role, Worker Role은 Visual Studio를 이용하여 개발자가 Application Instance를 패키징해서 Windows Azure에 배포할 때 이것을 VM으로 변환하여 Windows Server 2008이나 Windows Server 2008 R2에서 실행할 수 있도록 바꾸고 있고, 작년에 나온 VM Role은 여기서 좀 더 나아가서 VHD 안에 Windows Server 2008 R2를 설치하고 VHD 단위로 VM을 만들 수 있도록 하는 기능을 내놓았습니다. 그러나 지금까지 나온 것은 모두 한 가지 기술적 특징이 있는데, 실행 중인 VM이 예고 없이 자동으로 재시작되거나 초기화될 수 있다는 점입니다. 그래서 Windows Azure 기반으로 서비스를 개발할 때에는 VM 안에 상태를 보관하는 방식 대신 Stateless/Remote Storage를 활용하는 전략을 택해야 했었습니다.

하지만 Linux VM에 대한 지원과 더불어 장기 실행 VM이 Windows Server에 대해서도 같이 제공되어 Amazon Web Service의 Elastic Cloud Computing 서비스와 같은 형태의 VM Hosting을 Windows Azure에서도 사용할 수 있을 것으로 보입니다. 현재 예상되는 리눅스 배포판으로는 CentOS, RHEL, Suse Linux 등 기존의 Hyper-V 스택에서 원활하게 구동 가능한 상용 리눅스 배포판 대부분이 여기에 포함될 것으로 보입니다.

지금 소개하는 기능은 CTP 버전으로 올해 봄 (2012년 봄) 시즌에 새로 런칭될 것으로 보입니다. 그리고 이 외에도 SharePoint 서버와 SQL Server를 탑재한 가상 머신 이미지의 배포도 같이 지원함으로서 SQL Azure 특유의 기술적 한계를 보완하고 Private Domain에서 사용 가능한 SQL Server를 Windows Azure에서도 이용할 수 있을 것으로 보입니다.

좀 더 자세한 내용은 http://www.zdnet.com/blog/microsoft/microsoft-to-enable-linux-on-its-windows-azure-cloud-in-2012/11508 에서 보실 수 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

오늘 소개하려는 Visual Studio 확장 기능은 멀티 타기팅 팩의 기능을 매우 적극적으로 활용하는 똑똑한 확장 기능이다. 실무에서 3.5세대 혹은 4세대 닷넷 프레임워크를 적극적으로 사용 중인 개발자들이 국내에도 많이 있을텐데 이 경우 숟한 고민에 부딪히게 되는 것 중에 하나는 다중 플랫폼을 지원해야 한다는 점이다. 대충 열거해봐도 세 가지 이상은 된다. ASP.NET, Windows Presentation Foundation, Silverlight, 경우에 따라서는 XNA Game Studio나 Windows Phone 7.1까지 생각해야 하는 셈이다.

물론 신경써서 세심하게 잘 프로그래밍할 수 있을만큼 노련하다면야 이런 도구가 굳이 필요하지는 않겠지만 사람이 하는 일인지라 신경쓸 것이 많아지면 자연스레 귀찮을 수 밖에 없고 실수도 어디선가는 꼭 나온다. 이런 불분명하고 애매한 상황을 도구를 통하여 정확하게 잡아낼 수 있다면 괜찮지 않을까? Microsoft 개발 팀이 이런 문제를 해결해 줄 명쾌한 답을 Visual Studio Gallery에 올려놓았으니 참고하기 바란다. 아래의 URL에서 다운로드할 수 있다.

http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981/

Portable Library Tools를 설치하면 Visual Studio에 새로운 프로젝트 템플릿이 C#과 Visual Basic .NET에 대하여 Windows 카테고리 아래에 아래 그림과 같이 나타날 것이다.

시험삼아 새 프로젝트를 한 번 만들어보자. 이름에서 알 수 있듯이 특별할 것이 없는 공통되는 코드를 묶기 위한 클래스 라이브러리 프로젝트로서 만들어지며 일상적으로 여러분의 코드를 추가할 수 있다. 그런데 정말 중요한 것은 프로젝트 속성 안에 들어있다. 프로젝트 속성을 열어보면 아래와 같이 재미있는 구성을 볼 수 있다.

목표로 하는 프레임워크를 이전처럼 하나만 선택하는 것이 아니라 하나 이상을 동시에 지정할 수 있다. 이는 다시 말해서 이들 프레임워크의 공통 분모만을 사용하여 클래스 라이브러리를 정확히 프로그래밍할 수 있도록 보증한다는 의미이다. 그리고 Change 버튼을 클릭하면 더 유용한 쓰임새를 찾을 수 있다.

Visual Studio와 함께 설치된 다른 멀티 타기팅 팩이 있을 경우 여기에 모두 열거되어 여러분이 선택할 수 있도록 할 수 있다. 프로젝트의 종류가 많고 정말 일반적이면서도 널리 쓰여야 할 클래스 라이브러리를 만들어야 한다면 여기서 선택을 어떻게 하는가에 따라서 사용할 수 있는 API가 자동으로 필터링된다. 만약 위에서 선택한 플랫폼에서 사용할 수 없는 API에 대한 내용이 발견되면 곧바로 빌드 오류로 나타나기 때문에 문제를 쉽게 찾아낼 수 있다. 그리고 여기서 선택한 대로 해당 프로젝트에서 레퍼런스로 추가할 수 있으므로 생산성도 높일 수 있다. 즉, 솔루션이나 프로젝트를 여러벌로 나눠 관리할 필요 없이 한 곳에서 모두 관리할 수 있다.

이 도구를 사용하기 위해서는 Visual Studio 2010 전체 버전이 필요하며 SP1이 설치되어있어야 한다. 그리고 다른 타기팅 팩이 필요하다면 아래 URL에서 추가적으로 설치할 수 있다. 타기팅 팩은 그 자체로 설치할 수 있는 것은 아니고 보통은 해당 플랫폼에 대한 SDK 안에 같이 수록된다는 점에 유의해야 한다.

http://go.microsoft.com/fwlink/?LinkID=153626

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

지난번에 이어 오늘은 jQuery Mobile을 이용하여 단일 HTML 페이지 안에서 여러 멀티 페이지 UI를 포함하도록 모바일 페이지를 만들어 볼 것이다. 적어도 이 정도는 되어야 흔히 말하는 모바일 기반의 웹 사이트를 상상할 수 있는 첫 걸음이 될 것이다.

지난번에 간단히 소개한대로, data-role Attribute가 jQuery Mobile에서는 핵심적인 역할을 수행하며, Page <DIV> 태그가 컨테이너 노릇을 하고, 여기 아래에 Header, Content, Footer 순으로 <DIV> 태그가 배치되어야 한다고 하였다. 그리고 Page <DIV> 태그들 중 가장 먼저 DOM에서 검색되는 항목이 jQuery Mobile에서 가장 처음 노출시키는 페이지가 된다고 하였다. 멀티 페이지 UI는 단순히 여기에 다른 Page <DIV> 태그들을 첫 Page <DIV> 태그 뒤에 이어붙이고 이들 사이를 하이퍼링크로 연결하는 작업만을 하는 것 뿐이다.

따라하기 쉬운 예제를 위하여, 오늘 만들어 볼 것은 모바일 사진 갤러리이다. 준비물은 모바일에서 로드하기에 부담스럽지 않을 정도의 해상도와 품질을 가진 사진 파일 3~4장 정도면 된다. 필요하다면 여러분이 가지고 있는 디카 사진을 적당히 해상도를 줄이거나 품질을 떨어뜨려 샘플 사진을 만들기 바란다.

멀티 페이지 UI 흐름 구상하기

멀티 페이지 UI를 만들기에 앞서, 어떤 순서로 사람들이 페이지를 네비게이션하게 될 것인지를 기획하는 작업이 선행될 필요가 있다. 연필과 종이를 이용해서 스케치를 해도 되고, 좀 더 체계적인 시스템을 사용하기 원한다면 Balsamiq과 같은 전문적인 Mock up 도구를 이용해도 된다. 필자는 아래와 같이 정말 draft type의 mock up을 Balsamiq Online Version을 통해서 만들어 보았다. (사실 이런 것을 따로 기획하지 않아도 될 만큼 단순하지만 여러분의 이해를 돕기 위하여 시도해 본 다소 성의 없는 mock up이니 넓은 이해를 바란다.)

세 장의 사진을 모바일 상에서 표시하기 위하여 위와 같은 UI와 흐름을 가진 멀티 페이지 템플릿 UI를 만들어보려고 한다. 버튼 1과 버튼2와 버튼 3을 눌렀을 때 나타낼 사진은 여러분의 재량에 따르기로 하고 계속해서 페이지 구성을 실제 마크업으로 옮겨보도록 하자.

멀티 페이지 만들기

이제 위의 레이아웃을 실제 멀티 페이지로 옮겨 볼 차례이다. 세 페이지의 화면이 모두 동일하므로 첫 Page <DIV> 태그를 만들고 이 태그를 응용하여 뒤에 다른 페이지들을 붙여나가면 쉽게 완성할 수 있을 것이다. 갤러리 페이지의 화면은 다음과 같은 코드로 나타낼 수 있을 것이다.

         <div data-role="page" id="first">
            <div data-role="header">
                <h1>My Mobile Gallery</h1>
            </div>
            <div data-role="content">
                <div class="ui-grid-b">
                    <img src="Chrysanthemum.jpg" border="0" alt="Chrysanthemum" class="galleryWidget" />
                </div>
                <br />
                <div class="galleryWidget">
                    <a data-role="button" data-inline="true" data-theme="b" href="#first">1</a>
                    <a data-role="button" data-inline="true" href="#second">2</a>
                    <a data-role="button" data-inline="true" href="#third">3</a>
                </div>
            </div>
        </div>

위의 코드에서 굵게 표시한 부분들이 jQuery Mobile이 이해하고 처리하는 실질적인 부분들임을 기억하도록 하자. 위의 코드가 얼핏 보기에는 HTML의 규격을 벗어난 것처럼 보이거나 혹은 서버 사이드에서만 처리가 가능할 것처럼 보일 수 있지만 위의 규격은 HTML5에서 매우 합당하고 정확한 규격이다. 바로 Custom Attribute 덕분인데, 이와 같이 jQuery Mobile과 사전에 약속한 Custom Attribute를 사용함으로서 jQuery Mobile이 이 페이지의 내용을 자유롭게 다룰 수 있도록 해주는 것이다. 반대로 말하면, 위와 같이 지정하지 않은 HTML 요소에 대해서는 jQuery Mobile이 일절 간섭하지 않는다는 뜻이기도 하다.

뷰 포트에 대한 이야기

모바일 웹 페이지를 만들 때 가장 중요한 것이 하나 있는데 바로 뷰 포트에 관한 사항이다. 이제까지 우리가 다루어왔던 웹은 모두 데스크 탑 브라우저를 기준으로 설계되어왔다. WML을 이용하여 모바일 페이지를 디자인하던 시절도 있었지만 이 때만 하더라도 뷰 포트에 대한 이야기는 거의 없었다고 봐야 하겠다. 하지만 HTML이라는 통일된 수단을 가지고 모바일 페이지를 설계하면서부터 이런 논의가 활발해졌고 지금은 하나의 규칙으로 정해져있다.

우리가 일상적으로 보는 뷰포트는 해상도가 아무리 못해도 640x480 이상이 되는 디스플레이를 기준으로 하고 있으며 이는 스마트폰의 디스플레이보다는 어떤 이유에서이든 압도적으로 높은 해상도이다. 당연히 스마트폰이 표시할 수 있는 해상도와는 차이가 생길 수 밖에 없는데 스마트폰 제조 업체들은 나름대로 이에 대한 해결책을 모색하기 위하여 뷰포트를 억지로 맞추어 웹 페이지를 표시한다. 여러분이 초창기 스마트폰을 가지고 스스로 만든 웹 사이트를 브라우징해보면 이를 곧바로 알 수 있는데, 화면이 실제 데스크탑에서 보여지는 것과 비슷하게 보이기는 하지만 너무 작아져서 브라우징하기 참 어려운 모양으로 페이지가 나타나게 됨을 확인한다. 물론 사용자는 이가 없으면 잇몸이라도 쓰는 심정으로 화면을 연신 확대하고 스크롤 해가면서 어렵게 쓰기야 하겠지만.

이런 문제점을 예방하고 꼭 필요한 컨텐츠만을 계획적이면서도 알차게 담을 수 있도록 하기 위하여 스마트폰을 기획하지만 더 구체적으로는 스마트폰이 이런 식의 재정의를 임의로 하지 않도록 규정을 강제할 필요가 있는데 이를 위하여 메타 태그로 페이지마다 뷰포트에 대한 설정을 잡아주는 것이 꼭 필요하다. 우리가 사용할 뷰 포트는 아래와 같으며 아래의 메타 태그를 지금 여러분이 실습할 페이지의 <HEAD> 태그에 추가하기만 하면 된다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

실제로 살펴보기

위의 페이지를 모바일 웹 사이트에서 미리 보면 다음과 같은 모습이 될 것이다. 아래의 화면은 Windows Phone 7.1 Emulator로 살펴본 웹 사이트의 모습이다. 예상한 대로 첫 화면이 잘 보인다.

 

페이지 나머지 완성하기

이제 나머지 페이지를 완성하도록 해보자. 전체 페이지의 코드는 다음과 같이 작성되면 된다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
        <link rel="stylesheet" media="all" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
        <title>My Mobile Gallery</title>
        <style type="text/css" media="all">
            .galleryWidget { display: block; margin-left: auto; margin-right: auto; text-align: center; }
            .ui-grid-b img { width: 80%; height: auto; }
        </style>
    </head>
    <body>
        <div data-role="page" id="first">
            <div data-role="header">
                <h1>My Mobile Gallery</h1>
            </div>
            <div data-role="content">
                <div class="ui-grid-b">
                    <img src="Chrysanthemum.jpg" border="0" alt="Chrysanthemum" class="galleryWidget" />
                </div>
                <br />
                <div class="galleryWidget">
                    <a data-role="button" data-inline="true" data-theme="b" href="#first">1</a>
                    <a data-role="button" data-inline="true" href="#second">2</a>
                    <a data-role="button" data-inline="true" href="#third">3</a>
                </div>
            </div>
        </div>
        <div data-role="page" id="second">
            <div data-role="header">
                <h1>My Mobile Gallery</h1>
            </div>
            <div data-role="content">
                <div class="ui-grid-b">
                    <img src="Hydrangeas.jpg" border="0" alt="Hydrangeas" class="galleryWidget" />
                </div>
                <br />
                <div class="galleryWidget">
                    <a data-role="button" data-inline="true" href="#first">1</a>
                    <a data-role="button" data-inline="true" data-theme="b" href="#second">2</a>
                    <a data-role="button" data-inline="true" href="#third">3</a>
                </div>
            </div>
        </div>
        <div data-role="page" id="third">
            <div data-role="header">
                <h1>My Mobile Gallery</h1>
            </div>
            <div data-role="content">
                <div class="ui-grid-b">
                    <img src="Tulips.jpg" border="0" alt="Tulips" class="galleryWidget" />
                </div>
                <br />
                <div class="galleryWidget">
                    <a data-role="button" data-inline="true" href="#first">1</a>
                    <a data-role="button" data-inline="true" href="#second">2</a>
                    <a data-role="button" data-inline="true" data-theme="b" href="#third">3</a>
                </div>
            </div>
        </div>
    </body>
</html>

페이지 간 탐색을 위하여, data-role이 page로 설정된 <DIV> 요소에 대해서 ID 속성을 지정하였고 이를 Hyperlink에서 Anchor 속성으로 지정한 것에 주목하라. jQuery Mobile은 이에 대한 자바스크립트 수준의 처리를 자동으로 구현해주고 있으므로 여러분이 각 <DIV> 요소의 비주얼을 일일이 관리할 필요가 없다는 것이 매우 바람직하다. 아쉽게도 Windows Phone 7.1에 포함된 IE에서는 조금 미미하지만 다른 스마트폰의 WebKit 기반 브라우저들로 살펴보면 페이지 간 애니메이션 전환 효과도 정확하게 보인다.

마무리하며

jQuery Mobile에 대한 관심은 나날이 늘어가고 있다. PhoneGap에 대한 직접적인 지원도 하고 있으며, 뿐만 아니라 PhoneGap 그 자체도 영역을 넓혀서 이제 Windows Phone 7에서도 직접 사용할 수 있을만큼 프레임워크 수준이 많이 좋아졌다.

jQuery Mobile 덕분에 여러분이 이미 만들었거나 운영 중인 웹 사이트에 이와 같이 모바일 사이트를 하나 더 만드는 것은 약간의 노력을 기울이기만 한다면 얼마든지 손쉽게 추가할 수 있게 되었다. 게다가 이제는 버전 1.0이므로 믿고 사용할 수 있을만큼의 수준이 되었다. 오늘 한 번 시험 삼아서 여러분만의 모바일 웹을 만들어보기 바란다. 홈페이지가 웹 호스팅 환경에서 실행된다고 할지라도 라이브러리나 프레임워크는 CDN에서 내려받도록 걸어주기만 하면 되므로 트래픽 걱정도 할 필요가 없으니 더더욱 자신감을 가지고 만들어보기 바란다. :-)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

지난번에는 jQuery Mobile의 필요성과 사용을 위한 준비 방법을 살펴보았다. 그리고 오늘은 jQuery Mobile을 이용하여 실제로 페이지를 만들 때 주의할 사항들과 대망의 첫 예제 Hello, World!를 만들어보려고 한다.

개발 환경의 선택

계속하기에 앞서 한 가지 언급하고 넘어가도록 하겠다. 웹 개발을 할 때 웹 서버와 함께 좋은 IDE를 반드시 하나 이상 활용하기 바란다. 파일 시스템에서 웹 페이지를 불러와 테스트하는 방법은 요즈음 웹 환경에서는 그다지 좋은 방법이 아니다. 만약 마땅히 테스트 베드로 삼을만한 웹 플랫폼이 없다면, 여러분이 선택할 수 있는 테스트 베드는 두 가지 종류가 있다. 하나는 Visual Web Developer 2010 Express를 사용하는 것이고, 또 다른 하나는 Microsoft WebMatrix를 이용하는 방법이다. 만약 여러분이 ASP.NET에 별로 친숙하지 않다면 ASP나 PHP 개발을 WebMatrix에서 쉽게 진행할 수 있으므로 일반적인 텍스트 에디터만 사용하기보다는 WebMatrix를 병행할 것을 권한다.

Visual Web Developer 2010 Express를 사용하면 서버 사이드 프로그래밍에 필요한 디버거와 웹 응용프로그램 서버를 기본으로 획득한 상태에서 프로젝트 단위로 고급 프로그래밍 기법을 시도해볼 수 있다. 만약 순수하게 자바스크립트를 테스트해볼 수 있는 테스트 베드가 필요하다면 WebMatrix를 사용해도 된다. 양쪽 모두 무료 도구이며 둘 다 설치해서 여러분의 기호에 맞는 도구를 먼저 테스트해볼 수도 있다. 양쪽 도구 모두 http://www.microsoft.com/web 에서 제공하는 Web Platform Installer를 이용하여 손쉽게 설치할 수 있다.

HTML5 제대로 쓰기

다시 본론으로 돌아와서, jQuery Mobile은 이전 시간에 마무리하면서 이야기하기를, HTML5의 사양이 필요하다고 하였다. 기본적으로 우리가 아는 HTML은 HTML4 혹은 XHTML 1.1의 사양이다. 그리고 이를 계승하는 것이 HTML5와 XHTML5가 된다. 버전 4를 계승하여 버전 5가 나온 것이므로 양쪽의 차이점은 사실 그다지 크지 않다. 하지만 jQuery Mobile이 기대는 부분 중에서 굉장히 중요한 부분이 하나 있는데 바로 Custom Attribute의 사용이다. HTML4나 XHTML1.1에서는 Custom Attribute를 사용하는데 제약이 따르게 된다. 그러나 HTML5와 XHTML5에서는 이러한 설정을 공식적으로 지원한다.

웹 브라우저의 입장에서는 HTML4와 HTML5를 구분할 수 있는 방법이 필요한데, 별다른 언급 없이 웹 페이지를 써내려가기 시작하면 브라우저의 선호도에 따라 페이지의 버전이 달리 선택되므로 웹 페이지가 브라우저의 종류나 버전에 따라 일관성없는 결과를 낼 가능성이 크다. 이를 바로잡기 위하여 DOCTYPE을 정확히 지정해야 하며, 그 중에서도 HTML5의 DOCTYPE을 정확히 지정해야 한다. HTML5의 DOCTYPE은 페이지의 제일 첫 줄에 아래와 같이 작성하는것만으로 끝난다.

<!doctype html>

HTML4나 XHTML1.1의 DOCTYPE을 기억하는 이들이라면 위의 DOCTYPE이 정말 전부인지 당황스럽게 느껴질 것이다. 실제로 그렇다. 위와 같이 서술하면 HTML5를 제대로 지원하는 브라우저에서는 HTML5 상태로 페이지를 해석하고 렌더링하게 될 것이고, 그렇지 않은 브라우저들은 HTML4를 기반으로 해석을 시작할 것이다.

그리고 주의할 점이 하나 더 있는데, DOCTYPE 앞에는 어떤 추가적인 요소도 등장해서는 안된다. 즉, DOCTYPE이 공백 문자들을 제외하고 웹 페이지안에서는 절대적으로 최우선이어야만 한다는 뜻이다. 이를 위반하면 페이지가 의도하지 않은 모습으로 표시될 가능성이 커진다.

Hello, World! in jQuery Mobile

드디어 모든 프로그래밍 과제의 첫 번째 예제인 Hello, World!를 jQuery Mobile 스타일로 만들어 볼 차례이다. 여러분의 웹 개발 IDE에서 새 프로젝트를 각자 만들고, 첫 index 페이지를 만들어 아래와 같이 코드를 작성한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" media="all" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    <title>오늘의 뉴스</title>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>페이지 제목</h1>
        </div>
        <div data-role="content">
            <p>Hello, World!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus vehicula libero a fringilla. Nunc volutpat adipiscing felis, non iaculis arcu consectetur vitae. Aliquam tincidunt ultricies dui sed laoreet. Integer ligula tellus, porttitor in ornare vel, eleifend a eros. Ut lacinia porttitor sagittis. Integer interdum metus ligula, in lacinia leo. Cras scelerisque porttitor sagittis. Praesent eget orci eu est sollicitudin faucibus. Duis euismod neque quis nunc malesuada nec tincidunt mi varius. Duis at feugiat odio.</p>...
        </div>
        <div data-role="footer">
            <h1>아무개가 만든 페이지</h1>
        </div>
    </div>
</body>
</html>

jQuery Mobile을 사용한 페이지이지만 어쩐지 자바스크립트 코드가 단 한줄도 보이지 않는다. 어떻게 된 것일까? 의문을 풀기 위하여 실제로 웹 서버에 올려 웹 페이지를 살펴보면 아래와 같이 재미있는 결과가 나오는 것을 볼 수 있다.

특별한 자바스크립트 코드나 CSS 클래스 설정을 하지 않고 단번에 모바일 웹 페이지의 UI가 완성된 모습이 보인다. 첫 시작치고 굉장히 많은 것을 가져다주고 있는 것이다. jQuery Mobile이 기본적으로 하는 일은 바로 이런 일이다. 여러 모바일 브라우저에서 이 페이지에 접근하면 모두 이와 같은 모습으로 페이지를 렌더링해주는 것은 물론, 모바일 브라우저의 해상도와 뷰 포트에 알맞게 와이드 스크린을 지원하는 모바일 장치에서는 지금 여러분이 보는 것과 비슷한 화면으로 웹 페이지가 나타날 것이고, 스마트폰 계열 스크린에서도 약간의 뷰포트 조정을 통해서 적당한 화면을 얻을 수도 있다.

참고로 위의 예제 코드에서 라틴어로 주절주절 써놓은 것은 데모용 웹 페이지에서 흔히 잘 쓰이는 Lorem Ipsum (이하 Lipsum) 텍스트이다. http://www.lipsum.com/ 에서 원하는 분량만큼 만들 수 있으며 여러분의 모바일 디자인을 테스트하기 위하여 양껏 만들어 위와 같이 사용하면 된다.

jQuery Mobile의 UI 구조

다음 시간에 좀 더 구체적으로 살펴보겠지만 jQuery Mobile의 UI 구조는 WML의 카드 레이아웃과 비슷한 점이 많다. 여러분이 어떻게 구현하는가에 따라서 달라질 가능성은 충분히 있지만 페이지를 한 번만 다운로드해서 필요한 모든 UI를 제공할 수 있도록 기능을 만들어주는 것이 jQuery Mobile의 UI 설계 방향이다. 페이지의 구조가 복잡하게 그려질 가능성이 없진 않으나, 정확한 이해와 활용을 전제로 한다면 곧 익숙해질 것이다.

여러분이 위의 스크린 샷에서 본 화면은 페이지의 화면이 아니라 제일 처음 등장하는, 페이지로서의 역할을 수행하도록 설정된 <DIV> 태그의 화면이다. 보통의 <DIV> 태그와 구분되는 점은, HTML5의 Custom Attribute를 이용하여 이 <DIV> 태그가 jQuery Mobile에 의하여 특별하게 취급될 수 있도록 되어야함을 지시할 수 있다는 것인데, 바로 그 Attribute가 data-role Attribute이다. jQuery Mobile 세계 안에서 가장 키포인트가 되는 Attribute가 바로 이 data-role Attribute이므로 잘 봐두길 바란다.

data-role이 page로 지정된 <DIV> 태그 안에는 Header, Content, Footer 순서로 <DIV> 태그가 배치되어야 한다. 시각적으로 일관성있고 이해하기 쉬운 모바일 레이아웃을 만들기 위하여 Header는 사용하는 것이 필요하고, Content야 두 말할 필요 없이 본문에 해당되는 내용이다. 그리고 Footer는 옵션이다. 세 가지 섹션 모두 <DIV> 태그로 구성되지만 당연히 data-role Attribute를 사용하여 각자의 역할을 jQuery Mobile에게 알려주어야 한다. 그러면 jQuery Mobile은 이 부분에 대한 처리를 수행하여 여러분이 보고 있는 화면과 같이 디자인을 마무리해주게 된다.

기존에는 <BODY> 태그 아래에 여러분이 필요한 내용을 직접 써내려가면 그만이었지만 jQuery Mobile 환경 아래에서 모바일 페이지를 프로그래밍하는 것은 이와 같이 약간의 규칙이 따른다. 다음 강좌에서는 지금 보여준 페이지 UI를 하나의 HTML 페이지 안에서 여러 개를 포함하고 전환할 수 있는 방법을 본격적으로 소개하도록 하겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

요즈음 웹 개발에 있어서 하나의 중추적인 트렌드로 자리 잡은 것이 바로 모바일 웹 개발이다. 모바일 웹 개발이라고 하면 흔히 하는 생각으로 막연하다는 느낌부터 들 것이다. 1세대의 모바일 웹 개발은 확실히 HTML보다 가벼워야 했고 하드웨어의 제한 사항이 큰 편이었기 때문에 WML과 같은 메타 언어의 존재감이나 그 수요가 분명했다. 하지만 모바일 기기와 일반 PC의 사양 차이가 날이갈수록 좁혀짐은 물론 이제 모바일 기기가 경우에 따라서는 일반 PC나 랩톱 컴퓨터보다 훨씬 더 유용해지고 쓰임새가 많아지게 되면서 이런 구분이 모호해지게 된다.

필자 역시 모바일 웹 개발을 해야 할 필요성을 자주 느끼게 되었다. 당장 가지고 있는 스마트폰인 Windows Phone 7.1 (이름하여 망고폰)을 비롯해서 주변 지인들이 빠짐없이 가지고 있는 아이폰, 아이팟, 아이패드, 그리고 안드로이드 계열이나 크롬 북을 포함하여 상당히 많은 수의 브라우저들을 고려하는 모바일 웹 사이트가 필요했다. 물론 이들 모두 일정 수준 이상의 HTML5와 CSS3, 그리고 자바스크립트 렌더링 엔진을 갖추고 있긴 하지만 특유의 해상도 제한이나 성능 제한, 그리고 결정적으로 고밀도의 선택이 가능했던 마우스를 대신하여 터치 인터페이스에 최적화된, 이전보다 훨씬 둔감한 조작을 이해할 수 있는 인터페이스를 디자인해야 한다는 것이 난제가 되었다.

기존 웹 기술을 최대한 보존하면서도 검증된 프레임워크의 이점을 누릴 수 있는 방법이 없을까 고민하다가 아주 훌륭한 프레임워크를 테스트해보게 되었고 그 내용을 블로그를 통하여 간단하게 소개하고자 한다. 바로 jQuery Mobile이다.

jQuery Mobile과 jQuery의 차이점?

그냥 얼핏 듣기에 jQuery Mobile과 jQuery는 큰 차이점이 없어보인다. 오히려 어떻게 보면 jQuery의 축소 버전이 아닌가 하는 생각이 들 수도 있다. 하지만 이 둘 사이의 정확한 관계는, jQuery Core를 기반으로 만들어진 Extension이 jQuery Mobile이며, jQuery Mobile은 단순히 기능 집합을 축소한 것이 아니라 오히려 모바일 환경에 알맞도록 확장시킨 일종의 확장팩에 해당되는 개념이다.

사실, 여러분이 어떻게 jQuery Mobile을 사용하는가에 따라서 jQuery 특유의 자바스크립트 기술을 전혀 사용하지 않을 수도 있다. jQuery Mobile이 제공하는 몇 가지 규칙에 맞추어 웹 페이지를 프로그래밍한다면 나머지 시각 효과, 간단한 검색 기능, 심지어 대화 상자 기능까지 자동으로 jQuery Mobile이 알아서 처리해주기 때문이다.

jQuery Mobile을 가장 잘 활용할 수 있는 방법

이제까지 여러분은 자바스크립트 모듈을 어떤 방식으로 사용해왔는가? 대개는 웹 사이트 안에 들어가는 부속품 정도로 여기고 이것을 같은 웹 사이트 안에서 서비스하도록 구성하는 일이 많았다. 그리고 웹 서버에 대한 트래픽이나 부하가 일어나지 않도록 하기 위하여 적절한 Cache Timeout 설정을 사용하여 클라이언트가 jQuery 라이브러리를 지속적으로 재사용할 수 있는 방안을 적용해왔을 것이다.

그렇지만 기왕 최적화를 할 요량이면 밀어 붙일 수 있는 곳까지는 밀어붙여보는 것도 나쁘지 않을 것이다. jQuery는 물론 jQuery Mobile까지 여러분의 웹 서버가 아닌 곳으로 레퍼런스를 걸 수 있는 방법이 요즈음 유행하고 있다. 즉, CDN 서버를 이용하는 방식으로, jQuery를 비롯한 몇 가지 유명한 자바스크립트 및 공통적인 웹 자원들을 공개적으로 서비스하는 곳이 있고 이곳의 라이브러리를 가져다 쓰는 방식이다.

jQuery의 경우 jQuery 프로젝트 팀이 자체적으로 운영하는 CDN 서비스가 있으며, Microsoft의 ASP.NET AJAX CDN, 그리고 잘 알려진 Google의 CDN 서비스까지 모두 세 가지 유형의 CDN 서비스를 사용하여 jQuery 및 jQuery Mobile 자바스크립트 라이브러리를 개별 웹 페이지에 붙여넣을 수 있다.

CDN에 대해서 간단히 설명하면, CDN 네임스페이스 상의 특정한 URL에 대해서 요청이 발생하면 해당 리소스에 대한 사본을 CDN 네트워크 상에서 현재 위치로부터 가장 가깝거나 혹은 빠른 응답 속도를 보이는 서버로부터 데이터를 가져와 클라이언트로 내려보내는 서비스이다. 물론 이 과정을 수행할 수 있도록 하기 위하여 원본 서버가 필요하고 이 원본 서버로부터 데이터를 가져와서 네트워크 상에 고속으로 배포하는 작업은 필수적이다. 글로벌 CDN으로 불리는 서비스들은 당연히 이러한 CDN에 큰 비용을 투자할 수 있는, 그리고 전세계적인 네트워크 망을 보유할 수 있는 기업이어야 할 필요성이 있으며 이러한 기업으로는 대표적으로 Google과 Microsoft가 있는 셈이다.

Microsoft CDN을 이용하여 jQuery 시작하기

각각의 CDN 서비스들마다 자바스크립트를 제공하는 방법에는 차이점도 있고 장단점도 있지만 여기서는 Microsoft의 CDN 서비스를 사용하는 경우를 예로 들어 설명하고자 한다. 당연한 이야이기이지만 Microsoft CDN에서는 jQuery를 Visual Web Developer의 JavaScript Intellisense와 연계할 수 있는 vsdoc 버전의 자바스크립트 라이브러리를 CDN 버전으로 제공받을 수 있다. Microsoft CDN 서비스로부터 여러분이 가져오고 싶은 자바스크립트 코드를 카탈로그로부터 가져오기 위하여 아래 웹 사이트를 찾아볼 수 있다.

http://www.asp.net/ajaxlibrary/cdn.ashx

위의 웹 사이트에 구체적인 설명이 잘 나와있지만 이 웹 페이지에서는 여러분이 상황에 맞게 쓸 수 있도록 코드 조각을 정리하여 설명하려고 한다.

만약 여러분이 jQuery 1.5.1 버전을 http 버전 프로토콜로 연결하려고 하면 아래와 같이 <HEAD> 태그 내부에 Child Element로 기술하면 된다.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>

만약 HTTPS 기반 웹 사이트를 사용 중이고 여기서 CDN을 사용하려고 한다면 프로토콜 접두사만 바꾸면 HTTPS 버전의 CDN도 이용할 수 있다.

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>

만약 VSDOC 버전을 연결하려고 하면 아래와 같이 min 대신 vsdoc으로 이름을 바꾸면 된다.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.vsdoc.js" type="text/javascript"></script>

jQuery UI를 사용하기 위해서는 CSS 파일, 이미지 파일, 그리고 자바스크립트 파일에 대한 참조가 필요한데, CSS 파일에 대한 참조만 정확하다면 이미지 파일들의 경로는 신경쓰지 않아도 된다. 그리고 jQuery UI는 jQuery를 기반으로 하는 프레임워크이므로 jQuery에 대한 참조가 필수이다. 그리고 테마는 여러분이 http://www.asp.net/ajaxlibrary/CDNjQueryUI1816.ashx 페이지에서 1.8.16 버전에 해당되는 미리 제공되는 테마 중에서 하나를 택하여 CSS 파일에 대한 참조만 정확히 지정하면 된다. 이런 설정을 바탕으로 jQuery UI를 CDN에서 가져올 때 Redmond 테마 버전으로 가져오고자 한다면 아래와 같이 코드 조각을 쓸 수 있다.

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" media="all" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

그리고 jQuery Mobile을 사용하려 한다면 아래와 같이 작성한다.

<link rel="stylesheet" src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.css" media="all" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>

jQuery Mobile의 경우 HTML5 마크업을 사용하는 것이 중요하다. Custom Attribute에 대한 지원이 필수적이기 때문이다. 이 부분에 대한 설명은 다음 기회로 넘기기로 하겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.