가이드라인: 웹 사용자 인터페이스 빌드
이 가이드라인은 RAD 6.0 모델링 환경을 사용하여 웹 사용자 인터페이스를 빌드하는 방법에 대해 설명합니다.
관계
관련 요소
기본 설명

소개

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

개발 접근 방식

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

  • 웹 사이트의 탐색 구조 정의:

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

  • 페이지 템플리트 적용:

    페이지 템플리트는 모든 페이지에 공통적인 시각적 요소 및 레이아웃을 정의하며, 웹 사이트에 일관적인 룩앤필을 적용할 수 있습니다. 웹 프로젝트를 작성할 때 또는 이후에 별도로 마법사를 사용하여 작성할 수 있습니다. 탐색 편집기를 사용하면 다이어그램의 모든 페이지 또는 선택한 페이지에 쉽게 템플리트를 적용할 수 있습니다. 제안되는 우수 사례는 템플리트에 탐색 요소를 포함하고 해당 템플리트를 모든 페이지에 적용하여 전체 웹 사이트에 대한 일관적으로 탐색 제어 기능을 제공하는 것입니다.

  • 각 웹 페이지에 사용할 페이지 유형 선택:

    페이지를 두 번 클릭하여 페이지 작성 마법사를 실행하십시오. 이 마법사를 사용하면 지원되는 페이지 유형 중 하나를 선택하고(페이지 유형 선택 참조), 초기 페이지 특성을 지정하여 Page Designer 편집기에서 열 수 있습니다. 이제 웹 페이지 컨텐츠를 작성하고 편집할 수 있습니다. 팔레트 보기에서 웹 사이트 탐색 드로어를 자동으로 사용할 수 있습니다. 이 드로어를 사용하면 탐색 요소를 페이지로 끌어서 놓을 수 있습니다.

페이지 유형 선택

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

지원되는 사용자 인터페이스 기능

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에 대한 설명은 개념: 웹 응용프로그램 프레임워크를 참조하십시오). 이 페이지는 JSF 코어 태그 라이브러리와 페이지로 끌어서 놓을 수 있는 사전 정의된 사용자 인터페이스 컴포넌트(Faces 컴포넌트)에 대한 액세스를 제공합니다. 또한 Faces JSP는 예를 들어, Java 스니펫을 사용한 스크립팅을 지원함으로써 사용자 인터페이스 컴포넌트 이벤트 처리를 지정할 수 있습니다.

클라이언트측 캐싱을 사용하는 Faces JSP

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

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

아래 표는 각 페이지 유형에서 지원하는 기능을 요약 설명하며 웹 응용프로그램의 사용자 인터페이스 요구사항을 최대한 충족시키는 유형을 판별하기 위한 안내로 사용할 수 있습니다.

페이지 유형 마크업 언어 캐스케이딩 스타일시트 지원 페이지 템플리트 지원 XML 스타일 구문 스크립트 지원 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 스니펫

Macromedia Flash

예(클라이언트측 데이터 캐싱 사용)

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

표 1 - 페이지 유형 기능

웹 응용프로그램 적용 가능성


웹 사용자 인터페이스 구현에 사용할 페이지 유형은 주로 개발 중인 웹 응용프로그램의 유형에 영향을 받습니다. 정적 웹 응용프로그램의 경우, HTML 페이지 유형이 유일한 옵션이므로 쉽게 선택할 수 있습니다. 동적 웹 응용프로그램의 경우, HTML 및 JSP 페이지를 모두 사용할 수 있습니다. 또한 Struts 또는 JSF 프레임워크를 사용하여 동적 웹 응용프로그램을 개발하는 경우, 이러한 기술에만 해당되는 사용자 인터페이스 페이지 유형을 사용하는 데 따른 이점을 얻을 수 있습니다. 이를 통해, 도구에서 제공하는 특수 지원을 이용하여 사용자 인터페이스를 쉽게 구성할 수 있습니다. 표 2는 정적 웹 응용프로그램, 동적 웹 응용프로그램과 Struts 및 JSF 프레임워크를 사용하는 웹 응용프로그램에 대한 각 페이지 유형의 적용 가능성을 보여줍니다.

페이지 유형 정적 웹 응용프로그램 동적 웹 응용프로그램(비프레임워크 기반) Struts 웹 응용프로그램 JSF 웹 응용프로그램
HTML
JSP 아니오
Struts JSP 아니오 아니오 예(권장사항) 아니오
Faces JSP 아니오 아니오 예(통합 라이브러리 사용) 예(권장사항)
클라이언트측 캐싱을 사용하는 Faces JSP 아니오 아니오 예(통합 라이브러리 사용) 예(권장사항)

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

페이지 편집

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 코드 스니펫을 페이지에 빠르게 추가할 수 있습니다. 페이지에서 컴포넌트를 선택하면 가능한 이벤트 목록이 빠른 편집 보기의 왼쪽 분할창에 표시됩니다. 그러면 이벤트를 선택하고 다음 중 한 가지 방법으로 해당 스크립트를 추가할 수 있습니다.

  • 오른쪽 분할창에서 스크립트 편집기에 직접 스크립트를 입력합니다.
  • 스크립트 편집기를 마우스 오른쪽 단추로 클릭하고 스니펫 삽입을 선택한 후 제공된 컨텍스트 기반 목록에서 스니펫을 선택합니다.

자원

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

  1. Rational Application Developer v6.0을 시작하십시오.
  2. 메뉴 표시줄에서 도움말 > 도움말 목차를 선택하십시오.
  3. 웹 응용프로그램 개발을 펼치십시오.
  4. 웹 사이트 디자인 또는 웹 페이지 디자인을 탐색하십시오.