Download
1 / 16
160 likes | 373 Views
이번 시간에는. 지난 시간에는 WAP 의 WTA 프로토콜의 기능과 구성 , 서비스 예에 대해서 학습하고 , WAP 보안을 위한 WTLS 와 WAP 애플리케이션 레이어 보안 , 그리고 WAP Identity Module 에 대해서 알아보았습니다 . 이번 시간에는 2 회차에 걸쳐 WAP 컨텐츠 제작을 위한 마크업 언어인 WML 에 대해서 학습해 보도록 하겠습니다. 학습 목표. 15 회차 강의에서 다루게 되는 내용은 다음과 같습니다. WML 개발 - I. 이번 장의 학습 목표.
E N D
이번 시간에는... 지난 시간에는 WAP의 WTA 프로토콜의 기능과 구성, 서비스 예에 대해서 학습하고, WAP 보안을 위한 WTLS와 WAP 애플리케이션 레이어 보안, 그리고 WAP Identity Module에 대해서 알아보았습니다. 이번 시간에는 2회차에 걸쳐 WAP 컨텐츠 제작을 위한 마크업 언어인 WML에 대해서 학습해 보도록 하겠습니다.
학습 목표 15 회차 강의에서 다루게 되는 내용은 다음과 같습니다. WML 개발 - I 이번 장의 학습 목표 WML의 소개와 정의, WML 문서 구조에 대해 알 수 있다. WML 사용의 첫번째 예제를 소개하고 WML 마크업 언어의 사용 스타일에 대해 알 수 있다. WML의 택스트 포맷 태그와 이미지 처리 태그에 대해 알 수 있다.
WML 소개 • WML 정의와 특징 • WML (Wireless Markup Language)은 WAP 컨텐츠를 구성하는 기본 마크업 언어(Markup Language)로, 일반 유선 인터넷 페이지를 HTML로 만드는 것과 같이 WAP 용 무선 인터넷 페이지를 WML로 작성 • WML 특징 • WML은 문서 표현 Tag를 가지고 있는 브라우징 언어로, W3C의 XML에 기반한 마크업 언어이며 HDML과 HTML과 유사 • WML 문서는 휴대폰등 모바일 단말기의 WAP 브라우저에서 표현되며, WML 문서를 만들기 위해 일반 텍스트 편집기를 사용하고, 그 확장명을 “.wml”로 저장 • 작은 화면과 제한된 메모리, CPU, 낮은 대역폭(bandwidth), 긴 접속대기시간을 가지고 있는 휴대폰, PDA 등 이동단말기에 적합한 무선 마크업 언어 • WML 기능 • 휴대폰 스크린 관리 기능 (텍스트 & 이미지) • 사용자 정보 입력 지원 (텍스트 입력, 리스트 선택 지원) • 링크와 네비게이션 지원 • WML 구성 • 하나의 WML 문서는 하나의 WML Deck이며, 하나의 WML Deck은 다수개의 WML Card로 구성 • 한번 컨텐츠 전송 시, 하나의 Deck 전송, 한 화면에 한개의 카드 표시, 다음 화면에 다음 카드 표시
WML 소개 • WML 개발 방향 • WML 문서의 개발은 무선 네트워크와 무선 단말기의 특성을 고려한 개발이 이루어 져야 함 WML 문서를 보는 사용자의 입장에서 가독성(Readability)을 고려하여 개발 • 하나의 WML 문서에 대하여 적절한 단위로 각 WML 카드를 구성하고 각 WML 카드는 Card는 한 화면의 한 줄에서 표현 가능한 글자 수를 고려하여 개발 • WML 개발 가이드라인 작은 디스플레이 화면을 고려하여, 단말기 LCD 창에 디스플레이 할 수 있는 한 화면 단위로 개발 한 화면에 12줄 표현이 가능한 휴대폰에 25줄 단위로 WML Card를 구성할 경우, 사용자는 한 화면을 보기 위하여 세번의 다음(Next) 버튼을 눌러야 하는 경우 발생 화면의 한 줄에 표시될 수 있는 문자 수를 고려하여 개발한다 한 줄에 문자 10개를 표현할 수 있는 디스플레이 창을 가진 휴대폰에 한 줄이 80 자로 구성된 WML 문서를 전송할 경우, 사용자는 한 줄을 읽기 위해 7번을 아래로 스크롤 해야 하는 경우 발생 전체 WML 문서 라인 수를 고려하여 하나의 WML 문서를 여러 개의 WML Card로 분리하여 개발 한 화면에 12줄, 한줄에 10개 문자를 표현할 수 있는 휴대폰(한 화면에 120문자 표현이 가능한 휴대폰)에 500자로 구성된 문서를 WML 로 작성할 경우,하나의 WML Card에 모두 구성하기 보다, 5개의 WML Card로 구성 가이드라인 사용 예
DECK Deck : 무선 네트워크 컨텐츠 전송의 단위 Prolog Prolog : WAP 문서 선언부, 서문 Card : 디스플레이 화면이 보이는 단위 CARD WML 소개 • WML Deck • WML Deck은 WML 문서의 단위 하나의 WML 문서는 하나의 WML Deck으로 구성 • WML Deck 구성 • WML Deck은 하나의 WML 문서 서문 (Prolog)와 한 개 이상의 WML Card로 구성 • WML 문서 서문 (Prolog) • XML 및 WML 문서 타입 선언 부 • WML문서가 시작된다는 것을 선언하는 부분 • WML Card • WML 문서는 한 개 이상의 WML Card로 구성 • 휴대폰 Display 창에 보이는 단위
Sample.wml <?xml version="1.0"?> <!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN" "http://www.wapforum.org/DTD/wml.xml"> <WML> <CARD id=“First_Card” title=“처음카드”> 첫째 카드 <CARD> <CARD id=“Next_Card” title=“다음카드”> 둘째 카드 </CARD> </WML> WML Prolog WML Deck Card #1 처음카드 첫째 카드 First_Card Display Card #2 확인 버튼 Next_Card Display Sample.wml DECK First_Card WML Deck 전송 다음카드 둘째 카드 Next_Card WML 문서 구조 • WML Deck & Card • 하나의 WML 문서 전송은 하나의 WML Deck (Prolog와 다수개 Card로 구성) 의 전송을 의미 위 WML 문서는 이해를 돕기위해 작성한 문서로, 실제 작동을 위해서는 첫번째 Card 구문에 두번째 Card로의 이동을 위해 DO와 GO 구문을 이용한 링크를 삽입해야 함
<?xml version="1.0“encoding="ks_c_5601-1987"?> <!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN" "http://www.wapforum.org/DTD/wml.xml"> <WML> <CARD> <DO TYPE="ACCEPT" LABEL="다음카드"> <GO URL="#card2"/> </DO> 모바일 강좌<BR/>디렉토리 </CARD> <CARD NAME="card2"> <DO TYPE="ACCEPT"> <GO URL=“http://www.ikpu.org"/> </DO> 강좌홈피 </CARD> </WML> 모바일 강좌 디렉토리 _____________ 다음카드 강좌홈피 ____________ OK WML 문서 구조 • WML 문서 - 첫번째 예제 • 처음 WML Card에서 두번째 Card로의 이동은 “다음” 버튼 클릭으로 이동 WML Card 이동 • 두번째 WML Card에서 “OK”버튼 클릭 시, “http://www.mobile.org”로 이동 하이퍼 링크 이동
WML 문서 구조 • WML 문서 - 첫번째 예제 • WML 문서를 시작할 때 WML문서가 시작됨을 선언하는 WML Prolog 부분, 2~3 라인은 WML문서가 WAP 포럼에서 정의하는 DTD(Document Type Definition)를 따른다는 것을 선언하는 부분 • xml version="1.0“은 XML 버전 1.0의 문서 타입을 따른다는 의미 • encoding="ks_c_5601-1987“은 한글에 대한 인코딩을 선언 • <wml>과 맨 끝라인의 </wml>은 하나의 WML 문서, 즉 하나의 WML Deck을 정의하는 부분으로 모든 WML 문서에 필수적으로 있어야 함 • 첫번째 WML Card 부분, WML Card는 모든 WML문서에 한 개 이상이 존재. 즉, 휴대폰 Display 창에 나타날 내용과 실행할 액션을 포함 • <DO> 태그는 실행할 액션을 정의하며, TYPE=“ACCEPT”는 Accept 버튼을 눌렀을 때 액션을 취할 것을 명시, LEVEL=“다음”은 Accept 버튼을 누를 화면에 표시될 글자를 “다음카드”로 표시할 것을 명시 • <GO URL="#card2"/>의 <GO> 태그는 <DO> 태그가 실행할 액션을 정의, 여기서는 URL="#card2“는 하나의 WML Deck 에 있는 카드 이름이 card2인 카드로 이동할 것을 명시. • 두번째 WML Card 부분, 하나의 WML 문서에서 두개 이상의 WML Card가 존재할 때는 두번째 WML Card부터는 그 이름 또는 ID를 명시 • <DO> 태그 사용시, LEVEL을 명시하지 않으면, 화면에 “OK”로 표시 • <DO> 와 함께 쓰이는 <GO> 태그는 WML Card 간 이동 뿐만 아니라 하이퍼링크로 사용되어, <GO URL=“http://www.ikpu.org"/>와 같이 다른 모바일 사이트로의 이동에 사용 WML은 HTML과 유사한 Tag 기반 마크업 언어로, 일반적으로 Tag의 시작은 <card>과 같이, 그 끝은 “/”를 추가하 </card>와 같이 사용하나, 시작 Tag와 끝 Tag 없이 하나의 Tag만 사용할 경우 <GO URL=“#card2”/>와 같이 사용
WML Text Format Example WML 텍스트 포맷 Tag • Text Format을 위한 WML Tag • WML <P> 태그 • WML <P> 태그는 새로운 문단을 정의하고, 정의한 문단을 어떻게 나타낼 것인지 명시 • <P> 태그의 align 속성은 left, right, center값을 가질 수 있으며, 문단을 어떻게 정렬할 것인지 설정. 기본 값은 left • WML <BIG> 태그 • WML <BIG> 태그는 문자를 기본 폰트 크기보다 크게 지정 • WML <B> 태그 • 굵은 폰트 지정 <wml> <card id="main" title="WML Example"> <p align="center"> <big> <b> WML Text Format Example </b> </big> </p> </card> </wml> • 다양한 종류의 휴대폰 Display 액정 화면 크기에 따라 표시가능한 문자 개수 조정 • 최소 영문20자 x 6줄(Soft 키 Line 포함) 이상 표시 • 최소 한글/영문 Font Size 2개 이상 지원
WML Text Example WML Text Ex WML Text Ex WML Text Ex WML 텍스트 포맷 Tag • Text Format을 위한 WML Tag • WML <U> 태그 • WML <U> 태그는 텍스트 에 밑줄 지정 • WML <I> 태그 • 이탤릭 체 지정 • WML <SMALL> 태그 • 기본 폰트 크기보다 작게 지정 • WML <EM> 및 <STRONG> 태그 • 텍스트를 강조할 때 사용, <STRONG>은 <EM>보다 강하게 강조할 때 사용 <wml> <card id="main" title="WML Example"> <p align="center"> <big>WML Text Example</big> <br/> <u>WML Text Ex</u> <br/> <i>WML Text Ex</i><br/> <small>WML Text Ex</small><br/> </p> </card> </wml> WML <BR> 태그는 키보드의 Enter키를 누를 때와 같이 CR + LF 즉, 화면상에 한 라인을 바꾸는 역할 수행
Display Dollar : $ WML 특수문자 표시 Tag • WML에서 Special Character 표시 방법 <wml> <card id="main" title="Special Characters"> <p align="center"> <big> <b> 1 < 2 = True<br/> 1 > 2 = False<br/> Display Dollar : $$ <br/> </b> </big> </p> </card> </wml> WML 하이퍼링크를 위한 URL에서의 “&”특수 문자 표시는 “&”로 대치
WML 그림파일 표시 • Image 표현을 위한 WML Tag • WML <IMG> 태그 • WML <IMG> 태그로 이미지 표시, src=“jangpo.bmp”휴대폰 액정화면에 표시할 이미지 소스 파일명, alt=“우리집강아지” 이미지 소스 파일을 찾을 수 없을 경우 표시할 텍스트 지정 • WML Image Format • WAP이 지원하는 Image Format에는 흑백 이미지인 WBMP, SIS 파일 포맷의 4 Gray 이미지, 컬러 액정화면을 가진 단말기의 경우, SIS, BMP 및 JPEG (JPG) Image Format 지원 • WAP Image 표시 • WAP 단말 휴대폰이 지원하는 Image는 애니메이션(SIS 파일 Format Image)과 정지 이미지 (WBMP, BMP, JPG) 지원하며, Image File Format에 관계 없이 최소 5개 이상의 Image File 저장 지원 <wml> <card id="card1" title=“우리집강아지" > <p align="center"> <img src="jangpo.wbmp" alt="우리집강아지"/> <br/> </p> </card> </wml>
WML 그림파일 표시 • WAP 단말 휴대폰의 이미지 처리 • WAP 단말에서의 Image 사용 Image의 액정 표시 및 Image 저장 (용도: 미리 보기(수신함 보기), 켤 때 화면, 끌 때 화면, 대기(평상시) 화면, 전화 올 때 화면, 무선 인터넷 (예: Nate) 접속 화면) • 흑백 휴대폰용 Image의 표시 • WAP용 흑백 이미지는 WBMP로 표시 2000년 이후 출시된 WAP 단말기의 LCD는 96 x 64 pixel 이상이며, 따라서 이미지 그림 파일의 가로 크기는 이 규격을 넘지 않아야 하고, 세로 크기는 Scroll 키를 사용하여 처리 • 4 Gray 휴대폰용 Image 표시 • 4 Gray 이미지는 가로 128pixel 이상으로, 애니메이션인 SIS와 정지 이미지인 BMP를 지원 • 컬러 휴대폰용 Image 표시 • 컬러 휴대폰 단말기는 컬러 SIS, BMP 및 JPEG 파일 지원 • SIS에 대한 단말기 처리 데이터 사이즈 및 크기 압축된 SIS image (Max) : 10KB, 이미지 크기 : 120 * 96, FRAME수 : 20 FRAME • 컬러 BMP 이미지 크기 120*96, 최소 11.5KB의 BMP 파일 사이즈 지원, • 컬러 JPEG 이미지 12 Bit 이상의 컬러 지원 단말기는 JPEG 사용, Size 120 * 112 이하의 임의의 이미지 사이즈의 24 Bit JPEG 이미지에 대하여 단말기 LCD 사양 (크기 및 Color Depth)에 따라 처리
요약 정리 이번 시간에 소개했던 내용을 정리해 봅시다. WML의 소개와 정의, WML 문서 구조에 대해 알아 보았습니다. WML 문서 첫번째 예제를 소개하고 WML 마크업 언어의 사용 스타일에 대해 학습하였습니다. WML의 택스트 포맷 태그와 이미지 처리 태그에 대해 학습하였습니다. 다음 시간에는 WML 개발 – II 에 대하여 학습하시게 될 것입니다.
평가 하기 문제1 WML을 구성하는 세가지 요소에 대해 말해 보시오 정답은 다음과 같습니다. WML Deck, WML Prolog, WML Card 해설내용: WML 문서는 하나의 WML Deck으로 이루어지고, 하나의 WML Deck은 하나의 WML 선언부(Prolog)와 다수개의 WML Card로 구성됩니다. WML Prolog에는 WML 문서 DTD 정의와 WML 버전 정보, WML 문서 인코딩 정보 등이 포함됩니다. 문제2 택스트 포맷을 위한 WML 태그를 말해보시오 정답은 다음과 같습니다. <P>, <BIG>, <B>, <U>, <I>, <SMALL>, <STRONG> 태그 해설내용: <P> 태그는 새로운 문단을 정의하고, 정의한 문단을 어떻게 나타낼 것인지 명시, <BIG> 태그는 문자를 기본 폰트 크기보다 크게 지정, <B> 태그는 굵은 폰트 지정, <U> 태그는 텍스트 에 밑줄 지정, <I> 태그는 이탤릭 체 지정, <SMALL> 태그는 기본 폰트 크기보다 작게, <STRONG>은 크게 지정
평가 하기 WAP이 지원하는 이미지 포맷은 무엇입니까? 문제3 정답은 다음과 같습니다. WBMP, SIS, BMP 및 JPEG (JPG) Image Format 지원 해설내용: WAP이 지원하는 Image Format에는 흑백 이미지인 WBMP, SIS 파일 포맷의 4 Gray 이미지, 컬러 액정화면을 가진 단말기의 경우, SIS, BMP 및 JPEG (JPG) Image Format을 지원합니다.
