Let's CheolGyu

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 Libraries를 C:\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' 카테고리의 다른 글

[펌/번역] Intelligent Site Structure for better SEO  (0) 2011.02.21
HTML5의 시맨틱 태그(Semantic tag)가 가지는 의미  (3) 2011.02.18
[WebKit] 웹킷(WebKit) 개발 환경 구축하기  (0) 2011.02.11
웹 어플리케이션 프레임워크 - Sencha Touch  (1) 2011.02.10
[HTML5/CSS3] HTML5란?  (0) 2011.02.08
RIA(Rich Internat Application)  (0) 2011.01.29
TAGWebKit, 웹킷
Trackback 0 Comment 0

댓글을 달아 주세요

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



 

저작자표시비영리변경금지

'IT > Web Dev' 카테고리의 다른 글

[펌/번역] Intelligent Site Structure for better SEO  (0) 2011.02.21
HTML5의 시맨틱 태그(Semantic tag)가 가지는 의미  (3) 2011.02.18
[WebKit] 웹킷(WebKit) 개발 환경 구축하기  (0) 2011.02.11
웹 어플리케이션 프레임워크 - Sencha Touch  (1) 2011.02.10
[HTML5/CSS3] HTML5란?  (0) 2011.02.08
RIA(Rich Internat Application)  (0) 2011.01.29
TAGsencha touch, web app, 웹 어플리케이션
Trackback 0 Comment 1

댓글을 달아 주세요

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

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

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

[HTML5/CSS3] HTML5란?



인터넷이 일상화되고 사용자의 요구가 증가함에 따라 웹 문서에 텍스트, 표, 이미지 등을 삽입하는 기능만 가진 HTML4는 기능적 한계를 보이게 되었고, 늘어나는 사용자의 요구를 충족시키기 위해 각종 Plug-in 형태의 프로그램, AJAX 프로그래밍 등이 도입된다.

물론 HTML4가 1999년 표준이 제정된 이후, HTML4의 한계를 극복하기 위한 노력이 없었던 것은 아니다. W3C에서는 XML과 HTML을 결합하여 XHTML 규약을 만들었지만, XHTML은 늘어나는 사용자 욕구를 충족시키지 못하고 사장되어 버렸다.

Plug-in과 AJAX 등의 도입으로 인터넷 환경은 단순한 정보를 표시하던 '웹'의 수준에서 특정 기능을 수행하는 '웹 어플리케이션'의 수준으로 발전하게 되지만, 이를 위해 사용자는 추가의 플러그인 프로그램(ActiveX, Flash 등)을 설치하는 불편함을 감수하여야만 했고, 이러한 플러그인 프로그램이 지원되지 않는 플랫폼, 브라우저 등에서는 해당 웹페이지를 볼 수 없거나 웹 어플리케이션을 사용할 수 없는 문제가 생겼다. 이에 일부 브라우저 업체들이 모여 새로운 HTML 표준안을 만들기 시작했고, 이것이 W3C에 흡수되어 HTML5에 대한 정식 표준안이 만들어지게 된다.

HTML5가 아직 정식으로 완성된 표준 규약이 아니지만 현재 관심을 받고 있는 이유 또한 그 필요성을 절실히 느낀 브라우저 업체들로 부터 시작된 표준안이라는 점이다. 때문에 아직 표준안이 완성되지 않았음에도 불구하고 많은 브라우저에서 HTML5를 지원하고 있다. 현재 HTML5를 지원하는 브라우저로는 IE9 Beta, Chrome, Firefox, Opera, Safari 등이 있어, 일반 사용자가 사용하고 있는 대부분의 브라우저에서 지원이 가능하다.

플러그인 프로그램이 없는 웹 환경을 목표로 한 까닭에 HTML5는 기존의 텍스트, 표, 이미지 등을 표시하는 기능에 동영상을 재생하는 태그가 정의되어 있고, 웹 어플리케이션 작성을 위한 API까지 포함하고 있다.

HTML5에서는 HTML4와 비교하여 많은 변화가 일어났는데 대락적인 변화는 아래와 같다.

  • 새로운 태그의 정의
  • 기존 태그에 새로운 속성 정의
  • 태그의 의미 변경
  • 태그의 사용 중단
  • 일부 태그의 미사용 권고
  • 사용이 중단된 속성
  • 웹 어플리케이션 제작을 위한 API

태그나 속성에 대한 변경 사항은 아래 링크를 참조하면 정확한 정보를 얻을 수 있다.

HTML5: The Markup Language Reference
Unofficial Editor’s Draft 21 January 2011

변경의 주된 흐름을 살펴보면 HTML 문서를 구성하는 태그 자체가 그 의미를 가져서 사용자에게 보여지는 화면 뿐만 아니라 HTML 코드 자체도 논리적 의미를 가지게 되었다. 예를 들어 기존의 HTML 문서에서는 문서 구분을 위해 주로 <DIV></DIV>태그를 사용하고 각 태그에 ID를 할당하여 논리적 의미를 부여하였다면, HTML5에서는 헤더에 사용되는 <HEADER></HEADER> 태그, 본문 글에 사용되는 <ARTICLE></ARTICLE> 태그, 푸터에 사용되는 <FOOTER></FOOTER>태그 등이 사용된다.

또한 눈 여겨 볼 부분이 '웹 어플리케이션 제작을 위한 API 제공'인데 아래 API들은 눈여겨 볼만하다고 생각된다.

  • Canvas 2D: 웹 브라우저에서 드로잉 기능을 제공하는 API
  • Web SQL DB: 웹 브라우저 내장 DB를 제공하는 API
  • Web storage: 웹의 내용을 사용자 컴퓨터에 저장하는 기능을 제공하는 API

HTML5의 도입으로 기존의 웹 환경은 단순히 정보를 보여주기만 하던 단계에서 사용자와의 상호 작용을 가능하게 하고, 모든 환경에서 일관적인 웹 사용 환경을 제공하는 단계로 발전하게 될 것이다. 
저작자표시비영리변경금지

'IT > Web Dev' 카테고리의 다른 글

[펌/번역] Intelligent Site Structure for better SEO  (0) 2011.02.21
HTML5의 시맨틱 태그(Semantic tag)가 가지는 의미  (3) 2011.02.18
[WebKit] 웹킷(WebKit) 개발 환경 구축하기  (0) 2011.02.11
웹 어플리케이션 프레임워크 - Sencha Touch  (1) 2011.02.10
[HTML5/CSS3] HTML5란?  (0) 2011.02.08
RIA(Rich Internat Application)  (0) 2011.01.29
TAGhtml5
Trackback 1 Comment 0

댓글을 달아 주세요

IT/Web Dev | Posted by 철규님(최규철) 2011. 1. 29. 16:30

RIA(Rich Internat Application)


RIA(Rich Internet Application)은 기존의 HTML보다 dynamic한 웹 환경을 제공하는 기술,
데스크탑 어플리케이션의 특성을 접목시킨 웹 어플리케이션 등으로 이해하면 되겠다.

MicroSoft Silverlight, Abode Flex, JAVA FX등이 현재 가장 보편적인 3대 플랫폼이라고 하고,
웹 어플리케이션의 사용자 인터페이스 향상과 관련이 있는 Ajax, HTML5 등도 관련 기술로 포함이 된다.



Abode Flex http://www.adobe.com/kr/products/flex/overview/

- Flex를 사용해 제작된 RIA는 Adobe Flash player를 통해 브라우저에서, Adobe AIR®를 통해 브라우저 없이 실행될 수 있다.

- 언어 : MXML, ActionScript®3.0 
- MXML : 개발자가 Flex 어플리케이션의 UI Layout, 모양 및 작동 방식을 정의하기 위해 사용하는 언어
- ActionScript®3.0 : 클라이언트 어플리케이션 로직을 구축하는데 사용되는 언어

- 100여개 이상의 어플리케이션 구성 요소 사용 가능



Microsoft Silverlight http://www.microsoft.com/silverlight/ http://www.silverlight.net/

- .Net 프레임워크의 무료 plug-in을 통해 다수의 브라우저, OS, 장치 등에서 사용 가능, 충분한 기능을 가지고 있으면서 다양한 기기/환경에 이식 가능 => N스크린에 적합한 기술

- 다른 RIA 플랫폼보다 미디어 쪽에 초점이 맞춰져 있음 : IIS Smooth Streaming, Deep Zoom, Media Format Extensibility




JAVA FX http://www.javafx.com/

- 이건 현재 미궁 +_+




AJAX

- Asynchronous Javascript And XML의 약자

- 신기술이 아니라 현존하는 Javascript, DHTML등을 모은 기술

- Javascript, DHTML 등은 사용자의 UI 환경을 동적으로 업데이트 할 수 있지만,
이를 위한 모든 데이터를 서버로 부터 수신완료된 상태이어야 하며,
서버로 부터 받지 않은 정보에 대한 업데이트는 서버 요청->수신->리프레쉬 단계를 거쳐야 함

- 사용자가 서버로 요청을 보내는 도중에도 브라우저에서 내용을 확인할 수 있고,
서버로부터 응답으 도착하면 그 결과를 화면 전환 없이 확인 할 수 있는 기능

- 검색 엔진 등에서 검색어 입력에 밑에 유사 단어 목록 뜨는 것 정도로 이해하면 될 듯



HTML5 & CSS3


- HTML5
- HTML의 최신 규격으로, Active X 없이 동일한 기능 구현 가능
- Abode Flex, MS Silverlight, Java FX 없이 웹브라우저에서 화려한 효과를 낼 수 있도록 한다.
- CSS3 : 정교한 화면 구정, 다양한 효과 지원



 
JAVA FX는 관련 정보도 많이 없고 정말 미궁으로 빠진 듯하고...
Flex와 Silverlight는 웹환경뿐만 아니라 일반 데스크탑, 모바일 환경을 지원하는 RIA 도구,
AJAX와 HTML5&CSS3는 웹환경에 국한된 RIA 도구라고 보면 되겠다.

AJAX와 HTML5&CSS3에 있어서는 일단 초기 주도권을 AJAX가 잡았지만..
결과적으로 AJAX는 구기술의 집합체, HTML5는 신기술이다 보니...
기존의 AJAX가 잠식한 영역을 HTML5가 얼마나 빠르게 먹어 들어오느냐 싸움이 될 것 같고..

재미있는 것은 Adobe Flex와 MS Silverlight의 싸움인데..
기능적 우수성보다는 툴사용자(즉, 개발자)의 근원이 다른데서 오는 차이가 볼만하다.
아무래도 Adobe Flex는 Flash가 베이스가 되다보니,
툴사용자는 개발자보다는 디자인쪽 성향이 짙은 사람이 될 것이고,
MS Silverlight는 .Net 기반이다보니 개발자 성향이 강할 것이고...

기능적 우수성에서 오는 차이라면
어느 한쪽이 반대쪽의 장점을 흡수하면서 시장을 장악할 수 있겠지만,
툴사용자에서 오는 차이점은...
개발자가 디자인계통의 특성을 습득하기도 힘들고...
디자인계통의 사람들이 개발자의 특성을 습득하기도 힘들고...
어느 한쪽이 압도하기 보다는 RIA 어플리케이션의 특성에 따라...
복잡한 어플리케이션은 Silverlight로....
UI 위주의 어플리케이션은 Flex로 갈 가능성도 있다.

결국 우리 같은 개발자는 이것저것 다 해야 된다는 결론이 나오는군...
저작자표시비영리변경금지

'IT > Web Dev' 카테고리의 다른 글

[펌/번역] Intelligent Site Structure for better SEO  (0) 2011.02.21
HTML5의 시맨틱 태그(Semantic tag)가 가지는 의미  (3) 2011.02.18
[WebKit] 웹킷(WebKit) 개발 환경 구축하기  (0) 2011.02.11
웹 어플리케이션 프레임워크 - Sencha Touch  (1) 2011.02.10
[HTML5/CSS3] HTML5란?  (0) 2011.02.08
RIA(Rich Internat Application)  (0) 2011.01.29
TAGajax, CSS3, flex, html5, JavaFX, RIA, Silverlight
Trackback 0 Comment 0

댓글을 달아 주세요