Introduction

  • 리비전 슬러그: XUL_Tutorial/Introduction
  • 리비전 제목: Introduction
  • 리비전 아이디: 127333
  • 제작일시:
  • 만든이: Suguni
  • 현재 리비전인가요? 아니오
  • 댓글 /* XUL로 만들 수 있는 사용자 인터페이스는 무엇인가? */

리비전 내용

{{template.Next("XUL Tutorial:XUL Structure")}}

이 설명서는 XUL(XML 사용자 인터페이스 언어)를 배우는 데 도움을 주기 위한 것입니다. XUL은 응용 프로그램의 사용자 인터페이스를 작성하는 데 쓰이는 크로스 플랫폼 언어입니다.

이 설명서는 매킨토시의 셜록이나 윈도우의 검색 대화상자처럼 파일 찾기 기능을 갖춘 간단한 사용자 인터페이스를 만드는 방법을 설명해나갈 것입니다. 하지만 다루는 내용은 사용자 인터페이스를 만들고 몇 가지 기능을 추가하는 것으로 제한할 것입니다. 실제로 파일을 찾는 기능에 대한 설명은 제공되지 않습니다. 문서 왼쪽에 파란선이 나타나는 문단은 파일 찾기 대화상자가 수정되는 부분입니다. 이러한 문단을 따라가면 우리가 원하는 사용자 인터페이스가 완성됩니다.

XUL은 무엇이며 왜 만들어졌는가?

XUL은 신선한 리듬감을 더하여 "줄"이라고 읽습니다. XUL은 더 쉽고 빠르게 모질라 브라우저 개발을 하기 위해 만들어졌습니다. XML 언어이기 때문에 XML에서 사용할 수 있는 모든 기능은 XUL에서도 사용할 수 있습니다.

응용 프로그램을 개발할 때 특정 플랫폼의 기능을 사용해야 하는 경우가 많기 때문에 크로스 플랫폼 소프트웨어를 만드는 데는 많은 시간과 비용이 필요합니다. 그래서 오래 전부터 크로스 플랫폼 개발 도구가 개발되고 있습니다. 예를 들어, 자바는 이식성을 가장 큰 장점으로 내세우고 있습니다. XUL도 이식 가능한 사용자 인터페이스를 만들기 위해 고안된 언어입니다. 한 플랫폼에 맞추어 응용 프로그램을 개발하는 데에도 많은 시간이 걸립니다. 컴파일을 하고 디버그를 하는 과정이 매우 길어질 수도 있습니다. 하지만, XUL을 사용하면 빠르고 쉽게 인터페이스를 만들고 수정할 수 있습니다.

XUL은 다른 XML 언어의 장점을 모두 갖추고 있습니다. 예를 들어 XHTML이나 MathML, SVG 같은 XML 언어를 XUL 안에 삽입할 수 있습니다. 그리고 XUL에 사용된 문구는 쉽게 현지화할 수 있기 때문에 번역 작업이 수월합니다.

XUL로 만들 수 있는 사용자 인터페이스는 무엇인가?

XUL은 다양한 기능을 제공하여 세련된 그래픽 인터페이스를 만들 수 있게 해줍니다. 예를 들어 아래와 같은 엘리먼트를 만들 수 있습니다.

  • 텍스트박스, 체크박스 같은 입력 컨트롤
  • 버튼 등의 기능을 갖춘 도구막대
  • 메뉴 막대나 팝업 메뉴에 사용되는 메뉴 항목
  • 탭으로 이루어진 대화상자
  • 상하 관계나 표를 나타내는 트리
  • 키보드 단축글쇠

화면에 표시되는 내용은 XUL 파일 내부의 내용이나 데이터소스에 있는 자료를 이용하여 만들어집니다. 모질라에서는 사용자의 편지함, 북마크, 검색 결과 등도 데이터소스로 사용할 수 있습니다. 메뉴나 트리 같은 엘리먼트에 내용을 넣을 때에는 이런 자료뿐만 아니라 원하는 내용을 직접 RDF 파일로 작성하여 사용할 수도 있습니다.

XUL은 다음과 같이 사용할 수 있습니다.

  • 파이어폭스 확장 기능 -- 확장 기능은 브라우저에 새로운 기능을 넣는 프로그램입니다. 확장 기능은 도구 막대나 상황 메뉴에 새로운 도구를 넣기도 하고 브라우저의 사용자 인터페이스를 변화시키기도 합니다. 이러한 작업은 XUL이 제공하는 오버레이 기능을 통해 이루어지는데, 이렇게 하면 확장 기능에 제시된 사용자 인터페이스를 파이어폭스 브라우저의 사용자 인터페이스와 합칠 수 있습니다. 확장 기능은 썬더버드 등 다른 모질라 제품에도 적용될 수 있습니다.
  • 독립된 XULRunner 응용 프로그램 -- XULRunner는 모질라 플랫폼을 패키지화한 것으로, 이를 이용하면 독립된 XUL 응용 프로그램을 만들 수 있습니다. 이렇게 만들어진 프로그램은 실행 파일을 갖고 있기 때문에 브라우저가 없이도 실행할 수 있습니다.
  • XUL 꾸러미 -- 확장 기능과 XULRunner 응용 프로그램의 중간에 위치한 단계입니다. 확장 기능처럼 만들어지지만 독립된 창에서 실행되어 독립된 응용 프로그램처럼 작동합니다. 대용량의 XULRunner를 포함하지 않는대신, 사용자가 필요에 따라 모질라 브라우저를 설치해야 합니다.
  • 원격 XUL 응용 프로그램 -- XUL 코드를 웹 서버에 저장하여 브라우저에서 열게 하면 일반 웹 문서처럼 작동합니다. 하지만 다른 창을 여는 등 일부 기능은 보안과 관련된 문제 때문에 사용할 수 없습니다.

앞의 세 가지는 실행하기 전에 사용자의 컴퓨터에 설치를 해야 합니다. 하지만, 이들은 보안과 관련된 제약이 없기 때문에 하드디스크의 파일에 접근하거나 사용자의 환경 설정을 읽고 바꾸는 것과 같은 작업도 할 수 있습니다. 확장 기능은 XUL 파일을 비롯한 스크립트, 그림 파일 등이 하나의 파일로 압축되어 제공되는데 사용자는 이를 내려 받아 설치할 수 있습니다. 파이어폭스 등의 모질라 응용 프로그램은 사용자가 손쉽게 확장 기능을 설치할 수 있도록 확장 기능 관리자를 제공합니다.

XUL 파일을 하드 디스크나 웹 사이트에서 바로 열 수도 있습니다. 하지만, 이 경우에는 사용할 수 있는 기능에 제약이 있고 XUL의 일부 기능이 바르게 작동하지 않을 수 있습니다. XUL로 작성된 프로그램이 웹 사이트를 통해 열리게 하려면, 웹 서버가 XUL 파일을 "application/vnd.mozilla.xul+xml" 컨텐트 타입으로 전송하도록 설정하여야 합니다. XUL은 보통 확장자가 .xul인 파일에 저장됩니다. 모질라에서는 다른 파일을 열 때처럼 파일 메뉴 아래의 파일 열기를 이용하거나 주소 막대에 직접 URL을 입력하여서도 XUL 파일을 열 수 있습니다.

이 설명서를 읽기 위해 알아야할 것은 무엇인가?

HTML과 XML, CSS에 대한 기본적인 지식이 필요합니다. 다음 사항을 항상 기억하시기 바랍니다.

  • XUL 엘리먼트와 속성은 반드시 소문자로 입력해야 합니다. 왜냐하면 XML은 대소문자를 구분하기 때문입니다. (HTML은 그렇지 않습니다.)
  • 속성값은 반드시 인용 부호 안에 입력해야 합니다. 숫자도 예외가 아닙니다.
  • XUL 파일은 보통 네 파일로 나뉘어지는데, 각각 레이아웃과 엘리먼트를 정의한 파일, 스타일을 선언한 파일, 현지화에 사용되는 엔티티를 선언한 파일, 스크립트 파일입니다. 여기에 그림 파일이나 특정 플랫폼을 위한 자료가 추가될 수 있습니다.

XUL은 모질라와 그에 바탕한 브라우저(네스케이프 6 이상 그리고 모질라 Firefox)에서 지원됩니다. XUL 구문은 오랜 시간동안 여러 변화가 있었기 때문에, 올바르게 작동할 수 있는 최신의 사례를 보았으면 할 것입니다. 대부분의 사례는 모질라 1.0 이상에서 작동합니다.

파이어폭스 등의 브라우저에서 작동하는 XUL도 이와 매우 비슷하지만, 도구 막대 편집 기능 등 각 브라우저에 특화된 기능을 갖추고 있습니다.

이 설명서는 XUL의 다양한 기능을 설명할 것이지만 모든 기능을 다루지는 않을 것입니다. XUL에 어느 정도 익숙해진 후에 특정 엘리먼트가 지원하는 기능들을 살펴보고 싶으면 XUL Reference를 이용하시기 바랍니다.

{{template.Next("XUL Tutorial:XUL Structure")}}

{{ wiki.languages( { "ja": "ja/XUL_Tutorial/Introduction", "pl": "pl/Kurs_XUL/Wprowadzenie" } ) }}

리비전 소스

<p>{{template.Next("XUL Tutorial:XUL Structure")}}
</p><p>이 설명서는 <abbr title="XML User Interface Language">XUL</abbr>(XML 사용자 인터페이스 언어)를 배우는 데 도움을 주기 위한 것입니다. XUL은 응용 프로그램의 사용자 인터페이스를 작성하는 데 쓰이는 크로스 플랫폼 언어입니다.
</p><p>이 설명서는 매킨토시의 셜록이나 윈도우의 검색 대화상자처럼 파일 찾기 기능을 갖춘 간단한 사용자 인터페이스를 만드는 방법을 설명해나갈 것입니다. 하지만 다루는 내용은 사용자 인터페이스를 만들고 몇 가지 기능을 추가하는 것으로 제한할 것입니다. 실제로 파일을 찾는 기능에 대한 설명은 제공되지 않습니다. 문서 왼쪽에 파란선이 나타나는 문단은 파일 찾기 대화상자가 수정되는 부분입니다. 이러한 문단을 따라가면 우리가 원하는 사용자 인터페이스가 완성됩니다.
</p>
<h3 name="XUL.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B4.EB.A9.B0_.EC.99.9C_.EB.A7.8C.EB.93.A4.EC.96.B4.EC.A1.8C.EB.8A.94.EA.B0.80.3F"> XUL은 무엇이며 왜 만들어졌는가? </h3>
<p>XUL은 신선한 리듬감을 더하여 "줄"이라고 읽습니다. XUL은 더 쉽고 빠르게 모질라 브라우저 개발을 하기 위해 만들어졌습니다. <abbr title="Extensible Markup Language">XML</abbr> 언어이기 때문에 XML에서 사용할 수 있는 모든 기능은 XUL에서도 사용할 수 있습니다.
</p><p>응용 프로그램을 개발할 때 특정 플랫폼의 기능을 사용해야 하는 경우가 많기 때문에 크로스 플랫폼 소프트웨어를 만드는 데는 많은 시간과 비용이 필요합니다. 그래서 오래 전부터 크로스 플랫폼 개발 도구가 개발되고 있습니다. 예를 들어, 자바는 이식성을 가장 큰 장점으로 내세우고 있습니다. XUL도 이식 가능한 사용자 인터페이스를 만들기 위해 고안된 언어입니다. 한 플랫폼에 맞추어 응용 프로그램을 개발하는 데에도 많은 시간이 걸립니다. 컴파일을 하고 디버그를 하는 과정이 매우 길어질 수도 있습니다. 하지만, XUL을 사용하면 빠르고 쉽게 인터페이스를 만들고 수정할 수 있습니다.
</p><p>XUL은 다른 XML 언어의 장점을 모두 갖추고 있습니다. 예를 들어 XHTML이나 <abbr title="Math Markup Language">MathML</abbr>, <abbr title="Scalable Vector Graphics">SVG</abbr> 같은 XML 언어를 XUL 안에 삽입할 수 있습니다. 그리고 XUL에 사용된 문구는 쉽게 현지화할 수 있기 때문에 번역 작업이 수월합니다.
</p>
<h3 name="XUL.EB.A1.9C_.EB.A7.8C.EB.93.A4_.EC.88.98_.EC.9E.88.EB.8A.94_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EB.8A.94_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F"> XUL로 만들 수 있는 사용자 인터페이스는 무엇인가? </h3>
<p>XUL은 다양한 기능을 제공하여 세련된 그래픽 인터페이스를 만들 수 있게 해줍니다. 예를 들어 아래와 같은 엘리먼트를 만들 수 있습니다.
</p>
<ul><li> 텍스트박스, 체크박스 같은 입력 컨트롤
</li><li> 버튼 등의 기능을 갖춘 도구막대
</li><li> 메뉴 막대나 팝업 메뉴에 사용되는 메뉴 항목
</li><li> 탭으로 이루어진 대화상자
</li><li> 상하 관계나 표를 나타내는 트리
</li><li> 키보드 단축글쇠
</li></ul>
<p>화면에 표시되는 내용은 XUL 파일 내부의 내용이나 데이터소스에 있는 자료를 이용하여 만들어집니다. 모질라에서는 사용자의 편지함, 북마크, 검색 결과 등도 데이터소스로 사용할 수 있습니다. 메뉴나 트리 같은 엘리먼트에 내용을 넣을 때에는 이런 자료뿐만 아니라 원하는 내용을 직접 <abbr title="Resource Description Framework">RDF</abbr> 파일로 작성하여 사용할 수도 있습니다.
</p><p>XUL은 다음과 같이 사용할 수 있습니다.
</p>
<ul><li> 파이어폭스 확장 기능 -- 확장 기능은 브라우저에 새로운 기능을 넣는 프로그램입니다. 확장 기능은 도구 막대나 상황 메뉴에 새로운 도구를 넣기도 하고 브라우저의 사용자 인터페이스를 변화시키기도 합니다. 이러한 작업은 XUL이 제공하는 오버레이 기능을 통해 이루어지는데, 이렇게 하면 확장 기능에 제시된 사용자 인터페이스를 파이어폭스 브라우저의 사용자 인터페이스와 합칠 수 있습니다. 확장 기능은 썬더버드 등 다른 모질라 제품에도 적용될 수 있습니다.
</li><li> 독립된 XULRunner 응용 프로그램 -- XULRunner는 모질라 플랫폼을 패키지화한 것으로, 이를 이용하면 독립된 XUL 응용 프로그램을 만들 수 있습니다. 이렇게 만들어진 프로그램은 실행 파일을 갖고 있기 때문에 브라우저가 없이도 실행할 수 있습니다.
</li><li> XUL 꾸러미 -- 확장 기능과 XULRunner 응용 프로그램의 중간에 위치한 단계입니다. 확장 기능처럼 만들어지지만 독립된 창에서 실행되어 독립된 응용 프로그램처럼 작동합니다. 대용량의 XULRunner를 포함하지 않는대신, 사용자가 필요에 따라 모질라 브라우저를 설치해야 합니다.
</li><li> 원격 XUL 응용 프로그램 -- XUL 코드를 웹 서버에 저장하여 브라우저에서 열게 하면 일반 웹 문서처럼 작동합니다. 하지만 다른 창을 여는 등 일부 기능은 보안과 관련된 문제 때문에 사용할 수 없습니다.
</li></ul>
<p>앞의 세 가지는 실행하기 전에 사용자의 컴퓨터에 설치를 해야 합니다. 하지만, 이들은 보안과 관련된 제약이 없기 때문에 하드디스크의 파일에 접근하거나 사용자의 환경 설정을 읽고 바꾸는 것과 같은 작업도 할 수 있습니다. 확장 기능은 XUL 파일을 비롯한 스크립트, 그림 파일 등이 하나의 파일로 압축되어 제공되는데 사용자는 이를 내려 받아 설치할 수 있습니다. 파이어폭스 등의 모질라 응용 프로그램은 사용자가 손쉽게 확장 기능을 설치할 수 있도록 확장 기능 관리자를 제공합니다.
</p><p>XUL 파일을 하드 디스크나 웹 사이트에서 바로 열 수도 있습니다. 하지만, 이 경우에는 사용할 수 있는 기능에 제약이 있고 XUL의 일부 기능이 바르게 작동하지 않을 수 있습니다. XUL로 작성된 프로그램이 웹 사이트를 통해 열리게 하려면, 웹 서버가 XUL 파일을 "application/vnd.mozilla.xul+xml" 컨텐트 타입으로 전송하도록 설정하여야 합니다. XUL은 보통 확장자가 <code>.xul</code>인 파일에 저장됩니다. 모질라에서는 다른 파일을 열 때처럼 파일 메뉴 아래의 파일 열기를 이용하거나 주소 막대에 직접 URL을 입력하여서도 XUL 파일을 열 수 있습니다.
</p>
<h3 name=".EC.9D.B4_.EC.84.A4.EB.AA.85.EC.84.9C.EB.A5.BC_.EC.9D.BD.EA.B8.B0_.EC.9C.84.ED.95.B4_.EC.95.8C.EC.95.84.EC.95.BC.ED.95.A0_.EA.B2.83.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F"> 이 설명서를 읽기 위해 알아야할 것은 무엇인가? </h3>
<p><abbr title="HyperText Markup Language">HTML</abbr>과 XML, <abbr title="Cascading Style Sheets">CSS</abbr>에 대한 기본적인 지식이 필요합니다. 다음 사항을 항상 기억하시기 바랍니다.
</p>
<ul><li> XUL 엘리먼트와 속성은 반드시 소문자로 입력해야 합니다. 왜냐하면 XML은 대소문자를 구분하기 때문입니다. (HTML은 그렇지 않습니다.)
</li><li> 속성값은 반드시 인용 부호 안에 입력해야 합니다. 숫자도 예외가 아닙니다.
</li><li> XUL 파일은 보통 네 파일로 나뉘어지는데, 각각 레이아웃과 엘리먼트를 정의한 파일, 스타일을 선언한 파일, 현지화에 사용되는 엔티티를 선언한 파일, 스크립트 파일입니다. 여기에 그림 파일이나 특정 플랫폼을 위한 자료가 추가될 수 있습니다.
</li></ul>
<p>XUL은 모질라와 그에 바탕한 브라우저(네스케이프 6 이상 그리고 모질라 Firefox)에서 지원됩니다. XUL 구문은 오랜 시간동안 여러 변화가 있었기 때문에, 올바르게 작동할 수 있는 최신의 사례를 보았으면 할 것입니다. 대부분의 사례는 모질라 1.0 이상에서 작동합니다.
</p><p>파이어폭스 등의 브라우저에서 작동하는 XUL도 이와 매우 비슷하지만, 도구 막대 편집 기능 등 각 브라우저에 특화된 기능을 갖추고 있습니다.
</p><p>이 설명서는 XUL의 다양한 기능을 설명할 것이지만 모든 기능을 다루지는 않을 것입니다. XUL에 어느 정도 익숙해진 후에 특정 엘리먼트가 지원하는 기능들을 살펴보고 싶으면 <a href="ko/XUL_Reference">XUL Reference</a>를 이용하시기 바랍니다.
</p><p>{{template.Next("XUL Tutorial:XUL Structure")}}
</p>{{ wiki.languages( { "ja": "ja/XUL_Tutorial/Introduction", "pl": "pl/Kurs_XUL/Wprowadzenie" } ) }}
Revert to this revision