한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 이번 시간에는... 지난 시간에는 WAP 의 WTA 프로토콜의 기능과 구성, 서비스 예에 대해서 학습하고, WAP 보안을 위한 WTLS 와 WAP 애플리케이션 레이어 보안,

Presentation on theme: "한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 이번 시간에는... 지난 시간에는 WAP 의 WTA 프로토콜의 기능과 구성, 서비스 예에 대해서 학습하고, WAP 보안을 위한 WTLS 와 WAP 애플리케이션 레이어 보안,"— Presentation transcript:

1 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 이번 시간에는... 지난 시간에는 WAP 의 WTA 프로토콜의 기능과 구성, 서비스 예에 대해서 학습하고, WAP 보안을 위한 WTLS 와 WAP 애플리케이션 레이어 보안, 그리고 WAP Identity Module 에 대해서 알아보았 습니다. 이번 시간에는 2 회차에 걸쳐 WAP 컨텐츠 제작을 위한 마크업 언어인 WML 에 대해서 학습해 보 도록 하겠습니다.

2 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 학습 목표 15 회차 강의에서 다루게 되는 내용은 다음과 같습니다.  WML 의 소개와 정의, WML 문서 구조에 대해 알 수 있다.  WML 사용의 첫번째 예제를 소개하고 WML 마크업 언어의 사용 스타일에 대해 알 수 있다.  WML 의 택스트 포맷 태그와 이미지 처리 태그에 대해 알 수 있다. 이번 장의 학습 목표 WML 개발 - I

3 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 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 전송, 한 화면에 한개의 카드 표시, 다음 화면에 다음 카드 표시

4 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I WML 소개  WML 개발 방향  WML 문서의 개발은 무선 네트워크와 무선 단말기의 특성을 고려한 개발이 이루어 져야 함  WML 문서 를 보는 사용자의 입장에서 가독성 (Readability) 을 고려하여 개발  하나의 WML 문서에 대하여 적절한 단위로 각 WML 카드를 구성하고 각 WML 카드는 Card 는 한 화면의 한 줄에서 표현 가능한 글자 수를 고려하여 개발  WML 개발 가이드라인 한 화면에 12 줄 표현이 가능한 휴대폰에 25 줄 단위로 WML Card 를 구성할 경우, 사용자는 한 화면을 보기 위하여 세번의 다음 (Next) 버튼을 눌러야 하는 경우 발생 한 줄에 문자 10 개를 표현할 수 있는 디스플레이 창을 가진 휴대폰에 한 줄 이 80 자로 구성된 WML 문서를 전송할 경우, 사용자는 한 줄을 읽기 위해 7 번을 아래로 스크롤 해야 하는 경우 발생 한 화면에 12 줄, 한줄에 10 개 문자를 표현할 수 있는 휴대폰 ( 한 화면에 120 문자 표현이 가능한 휴대폰 ) 에 500 자로 구성된 문서를 WML 로 작성할 경 우, 하나의 WML Card 에 모두 구성하기 보다, 5 개의 WML Card 로 구성 작은 디스플레이 화면을 고려 하여, 단말기 LCD 창에 디스플 레이 할 수 있는 한 화면 단위로 개발 화면의 한 줄에 표시될 수 있는 문자 수를 고려하여 개발한다 전체 WML 문서 라인 수를 고려 하여 하나의 WML 문서를 여러 개의 WML Card 로 분리하여 개 발 가이드라인사용 예

5 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 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 창에 보이는 단위 DECK CARD Prolog : WAP 문서 선언부, 서문 Card : 디스플레이 화면이 보이는 단위 Prolog Deck : 무선 네트워크 컨텐츠 전 송의 단위

6 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I WML 문서 구조  WML Deck & Card  하나의 WML 문서 전송은 하나의 WML Deck (Prolog 와 다수개 Card 로 구성 ) 의 전송을 의미 처음카드 첫째 카드 다음카드 둘째 카드 확인 버튼 <!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN" "http://www.wapforum.org/DTD/wml.xml"> 첫째 카드 둘째 카드 Sample.wml WML Prolog WML Deck 전송 Sample.wml DECK First_Card Next_Card Card #1 Card #2 First_Card Display Next_Card Display 위 WML 문서는 이해를 돕기위해 작성한 문서 로, 실제 작동을 위해서는 첫번째 Card 구문에 두번째 Card 로의 이동을 위해 DO 와 GO 구문 을 이용한 링크를 삽입해야 함

7 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I WML 문서 구조  WML 문서 - 첫번째 예제  처음 WML Card 에서 두번째 Card 로의 이동은 “ 다음 ” 버튼 클릭으로 이동  WML Card 이동  두번째 WML Card 에서 “ OK ” 버튼 클릭 시, “ http://www.mobile.org ” 로 이동  하이퍼 링크 이동 모바일 강좌 디렉토리 _____________ 다음카드 강좌홈피 ____________ OK <!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN" "http://www.wapforum.org/DTD/wml.xml"> 모바일 강좌 디렉토리 강좌홈피         

8 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 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 Deck 을 정의하는 부분으로 모든 WML 문서에 필수적으로 있어야 함  첫번째 WML Card 부분, WML Card 는 모든 WML 문서에 한 개 이상이 존재. 즉, 휴대폰 Display 창에 나타 날 내용과 실행할 액션을 포함  태그는 실행할 액션을 정의하며, TYPE= “ ACCEPT ” 는 Accept 버튼을 눌렀을 때 액션을 취할 것을 명시, LEVEL= “ 다음 ” 은 Accept 버튼을 누를 화면에 표시될 글자를 “ 다음카드 ” 로 표시할 것을 명시  의 태그는 태그가 실행할 액션을 정의, 여기서는 URL="#card2 “ 는 하 나의 WML Deck 에 있는 카드 이름이 card2 인 카드로 이동할 것을 명시.  두번째 WML Card 부분, 하나의 WML 문서에서 두개 이상의 WML Card 가 존재할 때는 두번째 WML Card 부터는 그 이름 또는 ID 를 명시  태그 사용시, LEVEL 을 명시하지 않으면, 화면에 “ OK ” 로 표시  와 함께 쓰이는 태그는 WML Card 간 이동 뿐만 아니라 하이퍼링크로 사용되어, 와 같이 다른 모바일 사이트로의 이동에 사용 WML 은 HTML 과 유사한 Tag 기반 마크업 언어로, 일반적으로 Tag 의 시작은 과 같이, 그 끝은 “ / ” 를 추가하 와 같이 사용하나, 시작 Tag 와 끝 Tag 없이 하나의 Tag 만 사용할 경우 와 같이 사용

9 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I WML 텍스트 포맷 Tag WML Text Format Example  Text Format 을 위한 WML Tag  WML 태그 WML 태그는 새로운 문단을 정의하고, 정의한 문단을 어떻게 나타낼 것인지 명시 태그의 align 속성은 left, right, center 값을 가질 수 있으며, 문단을 어떻게 정렬할 것인지 설정. 기본 값은 left  WML 태그 WML 태그는 문자를 기본 폰트 크기보다 크게 지정  WML 태그 굵은 폰트 지정 WML Text Format Example 다양한 종류의 휴대폰 Display 액정 화면 크기에 따라 표시가능한 문자 개 수 조정 최소 영문 20 자 x 6 줄 (Soft 키 Line 포함 ) 이상 표시 최소 한글 / 영문 Font Size 2 개 이상 지원

10 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I WML Text Example WML Text Ex WML 텍스트 포맷 Tag  Text Format 을 위한 WML Tag  WML 태그 WML 태그는 텍스트 에 밑줄 지정  WML 태그 이탤릭 체 지정  WML 태그 기본 폰트 크기보다 작게 지정  WML 및 태그 텍스트를 강조할 때 사용, 은 보다 강하게 강조할 때 사용 WML 태그는 키 보드의 Enter 키를 누를 때와 같이 CR + LF 즉, 화면상에 한 라인을 바 꾸는 역할 수행 WML Text Example WML Text Ex

11 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 특수문자표현 방법 10 진수 표현 방법 <<< >>> ‘&apos;' “"" &&& $$$ 공백 (Space)   소프트 하이픈 (-) &shy­ WML 특수문자 표시 Tag  WML 에서 Special Character 표시 방법 1 < 2 = True 1 > 2 = False Display Dollar : $$ Display Dollar : $ WML 하이퍼링크를 위한 URL 에서의 “ & ” 특수 문자 표 시는 “ & ” 로 대치

12 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I WML 그림파일 표시 <img src="jangpo.wbmp" alt=" 우리집강아지 "/>  Image 표현을 위한 WML Tag  WML 태그 WML 태그로 이미지 표시, 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 저 장 지원

13 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 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) 에 따라 처리

14 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 요약 정리  WML 의 소개와 정의, WML 문서 구조에 대해 알아 보았습니다.  WML 문서 첫번째 예제를 소개하고 WML 마크업 언어의 사용 스타일에 대해 학 습하였습니다.  WML 의 택스트 포맷 태그와 이미지 처리 태그에 대해 학습하였습니다. 이번 시간에 소개했던 내용을 정리해 봅시다. 다음 시간에는 WML 개발 – II 에 대하여 학습하시게 될 것입니다.

15 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 평가 하기 문제 1 WML 을 구성하는 세가지 요소에 대해 말해 보시오 정답은 다음과 같습니다. WML Deck, WML Prolog, WML Card 해설내용 : WML 문서는 하나의 WML Deck 으로 이루어지고, 하나의 WML Deck 은 하 나의 WML 선언부 (Prolog) 와 다수개의 WML Card 로 구성됩니다. WML Prolog 에는 WML 문서 DTD 정의와 WML 버전 정보, WML 문서 인코딩 정보 등이 포함됩니다. 정답은 다음과 같습니다. WML Deck, WML Prolog, WML Card 해설내용 : WML 문서는 하나의 WML Deck 으로 이루어지고, 하나의 WML Deck 은 하 나의 WML 선언부 (Prolog) 와 다수개의 WML Card 로 구성됩니다. WML Prolog 에는 WML 문서 DTD 정의와 WML 버전 정보, WML 문서 인코딩 정보 등이 포함됩니다. 문제 2 택스트 포맷을 위한 WML 태그를 말해보시오 정답은 다음과 같습니다.,,,,,, 태그 해설내용 : 태그는 새로운 문단을 정의하고, 정의한 문단을 어떻게 나타낼 것인지 명시, 태그는 문자를 기본 폰트 크기보다 크게 지정, 태그는 굵은 폰트 지 정, 태그는 텍스트 에 밑줄 지정, 태그는 이탤릭 체 지정, 태그는 기본 폰트 크기보다 작게, 은 크게 지정 정답은 다음과 같습니다.,,,,,, 태그 해설내용 : 태그는 새로운 문단을 정의하고, 정의한 문단을 어떻게 나타낼 것인지 명시, 태그는 문자를 기본 폰트 크기보다 크게 지정, 태그는 굵은 폰트 지 정, 태그는 텍스트 에 밑줄 지정, 태그는 이탤릭 체 지정, 태그는 기본 폰트 크기보다 작게, 은 크게 지정

16 한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 평가 하기 문제 3 WAP 이 지원하는 이미지 포맷은 무엇입니까 ? 정답은 다음과 같습니다. WBMP, SIS, BMP 및 JPEG (JPG) Image Format 지원 해설내용 : WAP 이 지원하는 Image Format 에는 흑백 이미지인 WBMP, SIS 파일 포맷 의 4 Gray 이미지, 컬러 액정화면을 가진 단말기의 경우, SIS, BMP 및 JPEG (JPG) Image Format 을 지원합니다. 정답은 다음과 같습니다. WBMP, SIS, BMP 및 JPEG (JPG) Image Format 지원 해설내용 : WAP 이 지원하는 Image Format 에는 흑백 이미지인 WBMP, SIS 파일 포맷 의 4 Gray 이미지, 컬러 액정화면을 가진 단말기의 경우, SIS, BMP 및 JPEG (JPG) Image Format 을 지원합니다.