주제

소개To top of page

RAD 6.0의 웹 개발 환경은 웹 사용자 인터페이스를 빠르게 빌드할 수 있는 포괄적인 툴 세트를 제공합니다. 이 툴에는 Web Site DesignerPage Designer와 복잡한 웹 페이지를 간단하게 작성할 수 있는 여러 가지 마법사가 포함됩니다. 이 문서는 개발 방법을 설명하고 지원되는 페이지 유형을 식별하며 웹 페이지 작성을 용이하게 하는 기능을 강조함으로써 이러한 툴을 사용하여 웹 사용자 인터페이스를 효과적으로 빌드할 수 있는 방법에 대한 가이드라인을 제공합니다.

개발 접근법 To top of page

Page Designer를 사용하여 즉시 사용자 인터페이스에 개별 웹 페이지를 빌드할 수도 있지만 RAD 6.0에서는 Web Site Designer에서 시작하는 하향식 개발 방법을 권장합니다. 이 경우 탐색 편집기를 사용하여 다음 기능을 수행할 수 있습니다.

  • 다음과 같이 웹 사이트의 탐색 구조를 정의합니다.
  • 먼저 웹 사이트 구조를 나타내는 계층 구조 다이어그램을 빌드합니다. 기존 또는 새 페이지 및 프로젝트를 다이어그램으로 끌어서 놓아 그룹으로 구성할 수 있는 사이트 드로어를 팔레트 보기에서 사용할 수 있습니다. 편집기를 사용하면 시각적 방식으로 페이지를 쉽게 추가, 삭제 및 재배열할 수 있습니다. 탐색 다이어그램을 작성하면 Web Site Designer가 자동으로 웹 페이지 간의 탐색 링크를 식별 및 추적하고 사이트 맵을 생성할 수 있습니다. 나중에 Page Designer를 사용하여 개별 페이지를 작성하는 경우, 탐색줄 또는 메뉴와 같이 사이트 구조에 따라 적합한 링크만 표시하도록 사용자 정의할 수 있는 탐색 요소를 추가할 수 있습니다(예: 맨 위, 상위, 동위 및 첫 번째 하위에 대한 링크만 표시).

  • 다음과 같이 페이지 템플리트를 적용합니다.
  • 페이지 템플리트는 모든 페이지에 공통적인 시각 요소 및 레이아웃을 정의하여 사용자가 웹 사이트에 대한 일관적인 룩앤필을 적용할 수 있습니다. 웹 프로젝트를 작성할 때 마법사를 사용하여 작성하거나 나중에 별도로 작성할 수 있습니다. 탐색 편집기를 사용하면 다이어그램의 모든 페이지 또는 선택한 페이지에 템플리트를 쉽게 적용할 수 있습니다. 전체 웹 사이트에 대한 탐색을 일관적으로 제어하려면 템플리트에 탐색 요소를 포함하여 모든 페이지에 적용하는 것이 가장 올바른 방법입니다.

  • 다음과 같이 각 웹 페이지에 사용할 페이지 유형을 선택합니다.
  • 페이지를 두 번 눌러 페이지 작성 마법사를 실행합니다. 이 마법사를 사용하면 지원되는 페이지 유형 중 하나를 선택하고(페이지 유형 선택 참조) 초기 페이지 특성을 지정한 후 Page Designer 편집기에서 열 수 있습니다. 이제 웹 페이지 컨텐츠를 작성 및 편집할 수 있습니다. 웹 사이트 탐색 드로어는 팔레트 보기에서 자동으로 사용할 수 있으며 사용자가 탐색 요소를 페이지로 끌어서 놓을 수 있습니다.

페이지 유형 선택 To top of page

RAD 6.0은 HTML, JSP 및 Faces JSP 기술을 사용한 웹 사용자 인터페이스 빌드를 지원합니다. 각 기술은 다른 유형의 웹 어플리케이션 요구사항을 처리하는 구현 선택사항을 나타냅니다. 각 기술은 또한 다른 웹 사용자 인터페이스 기능을 지원하는 페이지 유형을 정의합니다. 따라서 웹 사용자 인터페이스를 빌드할 때는 각 페이지 유형이 지원하는 기능을 이해하고 개발 중인 웹 어플리케이션 유형에 적합한지 여부를 판단할 수 있어야 합니다. 아래 섹션에서는 RAD 6.0의 다른 페이지 유형이 지원하는 웹 사용자 인터페이스 기능을 식별하고 웹 어플리케이션에 따라 정적, 동적, Struts 및 JSF(JavaServer Faces) 프레임워크에서 사용할 수 있는 페이지 유형을 지정합니다.

지원된 사용자 인터페이스 기능 To top of page

RAD 6.0에서 웹 사용자 인터페이스를 구현하기 위해 제공하는 다른 페이지 유형은 HTML, JSP 및 Faces JSP의 세 가지 카테고리로 분류할 수 있습니다. JSP 페이지 유형은 또한 간단한 JSP 파일과 Struts JSP 페이지를 구분합니다. 마찬가지로 Faces JSP 페이지 유형은 기본 Faces JSP 또는 클라이언트측에 캐싱하는 Faces JSP일 수 있습니다. 다른 페이지 유형은 아래에서 설명합니다.

HTML

이 페이지 유형을 사용하면 기본 HTML 페이지를 빌드할 수 있으며 또한 기타 마크업 언어를 지원합니다(표 1 - 페이지 유형 기능 참조). 프레임 세트, 계단식 스타일시트 및 JavaScript 스크립팅과 같은 일반 HTML 기능 또한 지원됩니다. 또한 이 툴을 사용하면 페이지 템플리트를 정의 및 사용하여 웹 페이지 룩앤필을 일관적으로 작성할 수 있습니다.

JSP

JSP 페이지 유형은 JSP 기술을 사용하여 구현되는 사용자 인터페이스를 지원합니다. (RAD 6.0은 JSP 2.0 표준을 지원합니다.) 기본 HTML 페이지의 모든 기능은 JSP 스크립팅(Java Scriptlet) 및 조치(사용자 정의 태그) 기술로 사용 및 구현됩니다. 이 툴을 사용하면 JSP 단편의 정의에 기타 JSP 페이지에서 올바르게 포함될 수 있는 별도 파일로 페이지의 공통 부분을 포함할 수 있습니다. SDO(Service Data Object) 기술을 사용한 백엔드 데이터 액세스 또한 지원됩니다. (SDO에 대한 설명은 개념: 웹 어플리케이션 기본 구조를 참조하십시오.)

Struts JSP

Struts JSP 페이지는 Struts 특정 요소에 대한 지원을 자동으로 포함하여 간단한 JSP를 확장합니다. (Struts에 대한 설명은 개념: 웹 어플리케이션 기본 구조를 참조하십시오.) 이 페이지는 Struts 기본 구조를 사용하여 구현되는 어플리케이션의 웹 사용자 인터페이스를 개발하기 위해 사용됩니다. 특히 이 툴에는 Struts HTML(struts-html.tld) 및 Bean(struts-bean.tld) 태그 라이브러리에 대한 액세스가 자동으로 포함되며 ActionForm Bean의 필드를 직접 페이지에 포함할 수 있습니다. 또한 기타 Struts 라이브러리를 추가할 수 있는 옵션을 제공합니다.

Faces JSP

Faces JSP 페이지 유형은 특히 JSF 기술을 사용하여 구현되는 웹 사용자 인터페이스에 맞게 설계된 JSP 페이지입니다. (JSF에 대한 설명은 개념: 웹 어플리케이션 기본 구조를 참조하십시오.) 이 페이지 유형은 페이지로 끌어서 올 수 있는 사전 정의된 사용자 인터페이스 컴포넌트(Faces 컴포넌트) 및 JSF 코어 태그 라이브러리에 대한 액세스를 제공합니다. 또한 Faces JSP는 예를 들어 Java 스니펫을 사용하여 사용자 인터페이스 컴포넌트 이벤트의 처리를 지정하는 스크립팅을 지원합니다.

클라이언트측에 캐싱하는 Faces JSP

이 페이지 유형은 클라이언트측에 데이터를 캐시할 수 있는 사용자 인터페이스 컴포넌트를 제공하여 Faces JSP를 확장합니다. 특히 클라이언트측 캐싱을 사용하면 서버측 데이터와 반대로 JavaScript 변수에 컴포넌트를 바인드할 수 있습니다. 이 경우 클라이언트와 서버 간의 라운드트립 횟수가 줄어들어 웹 페이지 빌드를 보다 효과적으로 수행할 수 있습니다. 제공되는 Faces 클라이언트 컴포넌트는 다음과 같습니다.

  • 데이터 눈금: 관계형 데이터 소스의 레코드 또는 테이블의 JavaBean 배열에 있는 요소를 표시합니다.
  • 그래프: 데이터를 막대 그래프, 파이 차트 또는 선 그래프로 표시합니다. 그래프를 사용하려면 매크로미디어 플래시 플러그인을 브라우저에 설치해야 합니다.
  • 트리 보기: 계층 구조 데이터를 트리 구조로 표시합니다.
  • 웹 서비스: Faces 페이지에서 페이지를 새로 고치지 않고 기존 웹 서비스에서 데이터를 검색할 수 있습니다.

아래 표는 각 페이지 유형에서 지원하는 기능에 대해 요약 설명하며 웹 어플리케이션의 사용자 인터페이스 요구사항을 가장 충족시키는 유형을 판별하기 위한 지침으로 사용할 수 있습니다.

페이지 유형 마크업 언어 계단식 스타일시트 지원 페이지 템플리트 지원 XML 스타일 구문 ScriptingSupport SDO 데이터 액세스(*)
HTML

HTML 4.01

HTML 4.01 프레임 세트

Compact HTML 1.0

XHTML 1.0 또는 1.1

XHTML 1.0 프레임 세트

WML 1.3

아니오

아니오

아니오

아니오

아니오

아니오

없음 JavaScript 없음
JSP

HTML 4.01

HTML 4.01 프레임 세트

Compact HTML 1.0

XHTML 1.0 또는 1.1

XHTML 1.0 프레임 세트

WML 1.3

아니오

아니오

아니오

아니오

아니오

아니오

아니오

아니오

아니오

JavaScript

Java Scriptlet

사용자 정의 태그

Struts JSP

HTML 4.01

HTML 4.01 프레임 세트

XHTML 1.0 또는 1.1

XHTML 1.0 프레임 세트

 

아니오

아니오

아니오

아니오

JavaScript

Java Scriptlet

사용자 정의 태그

Faces JSP

HTML 4.01

XHTML 1.0 또는 1.1

아니오

JavaScript

Java Scriptlet

사용자 정의 태그

Java 스니펫

클라이언트측에 캐싱하는 Faces JSP

HTML 4.01

XHTML 1.0 또는 1.1

아니오

JavaScript

Java Scriptlet

사용자 정의 태그

Java 스니펫

매크로미디어 플래시

예(클라이언측 데이터 캐싱을 사용하는 경우)

* SDO 데이터 액세스에는 WAS v5.1이 전개 대상으로 필요합니다.

표 1 - 페이지 유형 기능

 

웹 어플리케이션 적용 가능성To top of page


웹 사용자 인터페이스 구현시 사용할 페이지 유형은 주로 개발 중인 웹 어플리케이션 유형의 영향을 받습니다. 정적 웹 어플리케이션의 경우, HTML 페이지 유형만 선택할 수 있으므로 선택이 간단합니다. 동적 웹 어플리케이션의 경우 HTML 및 JSP 페이지를 모두 사용할 수 있습니다. 또한 Struts 또는 JSF 기본 구조를 사용하여 동적 웹 어플리케이션을 개발하는 경우, 이러한 기술에만 적용되는 사용자 인터페이스 페이지 유형을 사용하는 것이 좋습니다. 이를 통해 툴이 제공하는 특수화된 지원을 이용하여 쉽게 사용자 인터페이스를 구성할 수 있습니다. 표 2는 정적 웹 어플리케이션, 동적 웹 어플리케이션과 Struts 및 JSF 기본 구조를 사용하는 웹 어플리케이션에 대한 각 페이지 유형의 적용 가능성을 보여줍니다.

페이지 유형 정적 웹 어플리케이션 동적 웹 어플리케이션(비기본 구조 기반) Struts 웹 어플리케이션 JSF 웹 어플리케이션
HTML
JSP 아니오
Struts JSP 아니오 아니오 예(권장) 아니오
Faces JSP 아니오 아니오 예(통합 라이브러리 사용) 예(권장)
클라이언트측에 캐싱하는 Faces JSP 아니오 아니오 예(통합 라이브러리 사용) 예(권장)

표 2 - 페이지 유형 적용 가능성

 

페이지 편집To top of page

Page Designer는 RAD 6.0에서 웹 페이지를 편집하기 위해 사용하는 툴입니다. 이 툴은 시각적인 WYSIWYG 또는 텍스트 소스 코드 기반 방식으로 페이지를 작성할 수 있는 중앙 편집기 보기를 제공합니다. 이 툴은 다른 웹 페이지 유형의 개발을 지원하는 기타 보기와 함께 사용합니다. 특히 다음 보기를 사용하여 페이지를 쉽게 편집할 수 있습니다.

팔레트 보기

팔레트 보기는 페이지로 이동하여 즉시 사용할 수 있는 다양한 UI 컴포넌트 세트를 제공합니다. 이 보기는 기능적으로 관련이 있는 컴포넌트를 드로어로 분류합니다. 예를 들어, 단추, 텍스트 필드 및 드롭 다운 상자와 같은 표준 HTML 양식 요소는 양식 태그 드로어로 분류됩니다. 팔레트 보기에 표시되는 드로어 목록은 편집 중인 페이지 유형에 따라 다릅니다. 표 3에는 지원되는 각 페이지 유형에 표시되는 기본 드로어가 나열됩니다. 팔레트와 대부분의 드로어는 드로어와 컴포넌트를 각각 추가, 삭제, 숨기기 또는 표시하여 사용자 정의할 수 있습니다. 각 드로어 및 해당 기본 컨텐츠에 대한 설명은 제품 문서를 참조하십시오.

팔레트 드로어 HTML JSP Struts JSP Faces JSP 클라이언트측에 캐싱하는 Faces JSP
HTML 태그 X X X X X
양식 태그 X X X    
페이지 템플리트 X X X X X
웹 사이트 탐색 X X X X X
포털 X X X X X
JSP 태그   X X X X
데이터   X X X X
Faces 컴포넌트       X X
Faces 클라이언트 컴포넌트         X
Struts HTML 태그     X    
Struts Bean 태그     X    
Struts 논리 태그     X    
Struts 내포 태그     숨김    
Struts 타일 태그     숨김    

표 3 - 페이지 유형별 기본 팔레트 드로어

 

빠른 편집 보기

이 보기를 사용하면 JavaScript 코드 스니펫을 빠르게 페이지에 추가할 수 있습니다. 페이지에서 컴포넌트를 선택하면 해당 컴포넌트에 적합한 이벤트 목록이 빠른 편집 보기의 왼쪽 분할창에 표시됩니다. 그러면 이벤트를 선택하여 다음 중 한 가지 방법으로 해당 스크립트를 추가할 수 있습니다.

  • 오른쪽 분할창의 스크립트 편집기에 직접 스크립트를 입력하십시오.
  • 스크립트 편집기를 마우스 오른쪽 단추로 누르고 스니펫 삽입을 선택한 다음 제공되는 컨텍스트 기반 목록에서 스니펫을 선택하십시오.

자원To top of page

Web Site DesignerPage Designer에 대한 자세한 정보는 다음과 같이 제품 문서를 참조하십시오.

  1. Rational Application Developer v6.0을 시작하십시오.
  2. 메뉴표시줄에서 도움말 > 도움말 목차를 선택하십시오.
  3. 웹 어플리케이션 개발을 펼치십시오.
  4. 웹 사이트 설계 또는 웹 페이지 설계를 탐색하십시오.



Rational Unified Process   2003.06.15