IT/Web Dev | Posted by 철규님(최규철) 2011. 2. 11. 00:22

[WebKit] 웹킷(WebKit) 개발 환경 구축하기


# 웹킷이란?

웹킷(WebKit)은 웹 브라우저를 만드는데 필요한 기능을 제공하는 오픈 소스 프레임워크다. 최초 Konqueror 브라우저의 KHTML 라이브러리였으나, 맥OS에서 사파리 브라우저 제작을 위해 차용해왔고, 최근에는 다양한 플랫폼에 이식되어 사용되고 있다.
웹킷 공식 홈페이지는 http://webkit.org/ 로 이곳에서 개발과 관련한 대부분의 정보를 얻을 수 있다.



# 웹킷 개발 환경 구축하기

웹킷 개발 환경을 구축하는 방법 또한 위 사이트에서 확인 할 수 있다.
 이 포스팅에서는 윈도7을 중심으로 간단한 순서와 링크만 제공하려고 한다.


[Installing Developer Tools]

웹킷 개발자 툴은 Visual Studio 2005 버전만 지원하고 이후 버전을 지원하지 않는다.
VIsual Studio 2005 버전 소유 여부에 따라 아래 과정 중 선택해서 따르면 된다.

1-1. VIsual Studio 2005가 있는 경우

1-2. Visual Studio 2005가 없는 경우
(7) (5)단계의 Step 3에서 path를 설정할 때 아래의 path도 같이 설정한다.
 C:\Program Files\Microsoft Platform SDK for Windows Server 2003 R2\Include\mfc

2. Cygwin 설치
(1) cygwin-downloader.zip. 다운로드 후 압축을 풀고 cygwin-downloader.exe 파일을 실행 시킨다. 해당 파일을 실행 시키면 WebKit 개발을 위한 툴이 포함된 Cygwin utility들을 로컬 디렉토리로 다운 받는다.
(2) 다운로드가 완료되면 해당 폴더에 setup.exe가 생기는데, 이 파일을 실행 시키고 Install from Local Directory를 선택한다.
(3) 설치 완료 후에  command 창을 열고 다음 커맨드를 입력한다.
C:\cygwin\bin\ash -c /bin/rebaseall
(4) Cygwin 을 실행한 후, /home/[username]/.bashrc 파일에서 아래 부분을 삭제한다.
unset TMP
unset TEMP
 
3. QuickTime SDK 설치
멀티미디어 파일 지원을 위해서 Apple 홈페이지에서 QuickTime SDK를 설치한다.
http://developer.apple.com/quicktime/download/

4. DirectX 설치

Microsoft의 DirectX를 다운받아 설치한다. 2010년 2월 이후의 버전은 지원하지 않으므로 2010년 2월 버전을 받도록 한다.

5. Debugging 툴 설치


[Getting the Code]

- WebKit 받아오기 : pre-built된 최신 WebKit을 다운받기 위해서는 WebKit Nightly Builds를 참고한다.
- Code 보기 : WebKit Trac을 이용하면 온라인에서 소스코드를 볼 수 있다.
- 소스코드 Check Out : Subversion을 이용해 서버로부터 소스코드를 받아온다.
(1) Cygwin 실행 후 아래 명령어를 실행해서 repository에서 최신 소스를 받아온다.
svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit
(2)  WebKit Support LibrariesC:\cygwin\home\<username>\WebKit다운로드 받는다. 파일명은 WebKitSupportLibrary.zip이어야 하고, 압축을 풀 필요는 없다.
(3) 소스 트리를 업데이트 하기 위해서는 WebKit/Tools/Scripts 디렉토리에서 update_webkit 스크립트를 실행시킨다.


[Building WebKit]


- WebKit/Tools/Scripts
디렉토리에서 build-webkit 스크립트를 실행시킨다.
- 빌드 결과물은 기본적으로 WebKit/WebKitbuild 디렉토리에 생성된다.
- build-webkit --debug 옵션으로 빌드를 실행하면 debugging symbol과 assertion이 포함되어 빌드된다.
- Debug mode나 Release mode는 아래의 명령어를 실행하여 default 옵션을 지정할 수 있다.
- set-webkit-configuration --debug
- set-webkit-configuration --release


[Running WebKit]

- 빌드가 완료된 후 웹킷을 실행 시키기 위해서는 run-safari 스크립트를 실행시킨다.
- Debug mode로 빌드를 할 경우에는 run-safari --debug 를 실행한다.

댓글을 달아 주세요

IT/Web Dev | Posted by 철규님(최규철) 2011. 2. 10. 00:55

웹 어플리케이션 프레임워크 - Sencha Touch


요즘은 OS/플랫폼의 춘추전국시대라 해도 과언이 아닐 정도다. 모바일 플랫폼만 해도 안드로이드, iOS, Windows Mobile, Bada, SLP(LiMo)등이 사용되고 있고, 윈도의 영향력이 막강한 PC OS에도 Chrome OS가 도전장을 내밀고 있는 형국이다.

사용 환경이 늘어나고 경쟁을 통해 많은 발전을 이뤄내고 있어 사용자들에게는 좋은 소식일지는 모르나, 어플리케이션 제작자 입장에서는 모든 OS/플랫폼을 지원해야되는 또는 일부만 지원하고 나머지는 포기해야하는 부담이 생기게 마련이다. 당연히 한번의 개발로 모든 플랫폼/OS에서 사용할 수 있는 어플리케이션 제작에 대한 욕구가 나타나는데 웹 어플리케이션이 한 가지의 답이 될 수 있을 것 같다.

하지만 아직 웹 어플리케이션 프레임워크 시장은 활성화되지 않아 주도권을 잡은 프레임워크는 없는 상태이고 몇개의 프레임워크가 주도권 다툼을 하고 있는 상태이다. 하지만 기본적으로 대부분 HTML5, Javascript 등을 기반으로 하고 있기 때문에 어플리케이션이 기존처럼 특정 환경에서만 동작하는 문제는 없을 것 같다.

대표적인 웹 어플리케이션 프레임워크인 Sencha Touch에 대해서 간략히 정리해볼까 한다.


Sencha Touch

일본산 녹차의 이름인 Sencha는 ExtJS를 기반으로 jQTouch, Raphael이 결합된 프레임워크이다. 아직 모든 플랫폼을 지원하지는 않고 iOS와 안드로이드만을 지원하는데, 플랫폼 간의 이식이 어렵지 않으므로 관련 시장만 활성화된다면 다른 플랫폼들도 지원할 것으로 예상된다.

Sencha Touch 프레임워크에 포함된 요소들을 간단하게 알아보면 다음과 같다.

  • ExtJS는 대화명 웹 어플리케이션 제작을 위한 자바스크립트 라이브러리로 AJAX, DHTML, DOM 등을 사용한다. 
  • jQTouch는 오픈 소스 jQuery 플러그인의 하나로 HTML, CSS, Javascript 등을 사용하여 Touch UI를 강화하는 기능을 한다.
  • Raphael은 SVG(Scalable Vector Graphic, 2D 벡터 그래픽 지원을 위한 XML 기반의 파일 형식)를 지원한다.


자료를 주고 받는 방식으로는 key와 Value 구조를 가진 JSON(JavaScript Object Notation)을 사용하는데 다음 예제를 보면 쉽게 이해할 수 있다.


var person = { name : 홍길동, tel : { office : 02-123-4567, mobile : 010-1234-5678 } }
alert( person .name ); // 홍길동 출력
alert( person .tel.mobile ); // 010-1234-5678 출력

Sencha Touch를 사용하기 위해서는 아래 URL에서 관련 파일을 다운로드 받는다.
http://www.sencha.com/products/touch/download/
다운로드 받은 파일의 압축을 풀고 HTML 파일을 만들어 sencha-touch-debug.js 파일과 sencha-touch-debug.css 파일을 포함 시키는 것으로 개발준비는 끝난다.

'Hello world!'를 출력시키는 예제는 다음과 같다.

helloworld.html

<!DOCUMENT TYPE=html>
<HTML>
<TITLE>Sencha Touch - Hello World!</TITLE>
<META CHARSET='utf-8'>
<META NAME='viewport' CONTENT='width=device-width, initial-scale=1.0'>
<LINK REL='stylesheet' HREF='/sencha-touch-1.0.1a/sencha-touch-debug.css' TYPE='text/css'>
<SCRIPT SRC='/sencha-touch-1.0.1a/sencha-touch-debug.js' TYPE="text/javascript"></SCRIPT>
<SCRIPT TYPE='text/javascript'>
Ext.setup({
   onReady: function() {
      new Ext.Panel({
         fullscreen: true,
         layout: 'fit',
         items: [
            { html: "Hello world!"}
         ]
      });
   }
});
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

결과 보러 가기 <IE8에서는 정상적으로 보이지 않음.>

결과 화면




 

관련 페이지

Sencha Touch - http://www.sencha.com
jQTouch - http://www.jqtouch.com
Raphael - http://www.raphaeljs.com



 

댓글을 달아 주세요

  1.  댓글주소  수정/삭제  댓글쓰기 Cynthia. 2011.05.12 15:53 신고

    정말 감사합니다.
    한번 궁금해서 시도해보고 있었는데 저같은 아무것도 모르는 사람한태 꼭 필요한 글인거 같네요.

IT/Tech Notes | Posted by 철규님(최규철) 2011. 2. 9. 22:10

[용어] Cloud computing



Cloud computing
<출처 : Wikiepedia / http://en.wikipedia.org/wiki/Cloud_computing >

아래는 Wikiepedia 검색 결과의 abstract 부분을 번역한 내용이다.


Cloud computing is location-independent computing, whereby shared servers provide resources, software, and data to computers and other devices on demand, as with the electricity grid.
클라우드 컴퓨팅은 위치 독립적인 컴퓨팅 방식으로, 이를 통해 공유된 서버는 컴퓨터나 다른 장치의 요구에 따라 리소스, 소프트웨어, 데이터 등을 제공한다.

Cloud computing is a natural evolution of the widespread adoption of virtualization, service-oriented architecture and utility computing.
클라우드 컴퓨팅은 가상화 기술의 광범위한 적용, 서비스 기반 아키텍처, 유틸리티 컴퓨팅의 자연스러운 진화이다.

Details are abstracted from consumers, who no longer have need for expertise in, or control over, the technology infrastructure "in the cloud" that supports them.
상세한 사항은 그들이 사용하는 "클라우드"라는 기술적 기반에 전문성이 없거나 그것을 제어할 수 없는 사용자들로부터 모아졌다.

Cloud computing describes a new supplement, consumption, and delivery model for IT services based on the Internet, and it typically involves over-the-Internet provision of dynamically scalable and often virtualized resources.
클라우드 컴퓨팅은 인터넷 기반의 IT 서비스에 있어서 새로운 공급과 수요, 전달 방식을 설명한다. 그리고 일반적으로 동적인 규모로 때론 가상화된 리소스의 인터넷 상 제공을 포함하기도 한다.

It is a byproduct and consequence of the ease-of-access to remote computing sites provided by the Internet.
그것은 인터넷에 의해서 제공되는 원격 컴퓨팅에 손쉽게 접할 수 있게 하는 방법의 부산물이자 결과이다.

This frequently takes the form of web-based tools or applications that users can access and use through a web browser as if it were a program installed locally on their own computer.
이것은 주로 컴퓨터에 프로그램이 설치만 되어 있다면 웹 브라우저를 통해 사용자가 쉽게 접근하고 사용할 수 있는 웹 기반 툴 또는 어플리케이션의 형태를 가진다.

The National Institute of Standards and Technology (NIST) provides a somewhat more objective and specific definition here.
미국 국립 표준 기술원(NIST)은 이제 좀 더 명확하고  구체적인 정의를 제공한다.

The term "cloud" is used as a metaphor for the Internet, based on the cloud drawing used in the past to represent the telephone network, and later to depict the Internet in computer network diagrams as an abstraction of the underlying infrastructure it represents.
"클라우드"라는 용어는 과거 전화망을 나타낼 때 사용되어오다 이후에 인터넷이 나타내는 하부 구조의 추상화를 나타내는 컴퓨터 네트웍 다이어그램을 묘사하는데 사용된 "cloud drawing"이라는 단어에서 나온 인터넷을 은유하는 것으로 사용된다.

Typical cloud computing providers deliver common business applications online that are accessed from another Web service or software like a Web browser, while the software and data are stored on servers.
일반적인 클라우드 컴퓨팅 제공자는 소프트웨어와 데이터는 서버에 저장되지만, 브라우저와 같은 웹 서비스나 소프트웨어를 통해 접근이 가능한 일반적인 온라인 비지니스 어플리케이션을 제공한다.

Most cloud computing infrastructures consist of services delivered through common centers and built on servers.
대부분의 클라우드 컴퓨팅 인프라들은 공용 센터와 기반 서버로 부터 제공되는 서비스들로 구성되어 있다.

Clouds often appear as single points of access for consumers' computing needs.
클라우드는 때로 사용자의 컴퓨팅 필요에 의해 단일 접근 포인트 형태가 되기도 하다.

Commercial offerings are generally expected to meet quality of service (QoS) requirements of customers, and typically include service level agreements (SLAs).
상업적으로 제공되는 것들은 일반적으로 사용자의 QoS 요구 사항을 만족시켜야하고, 보통 서비스 수준의 계약(SLAs)을 포함한다.

 

댓글을 달아 주세요