한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 이번 시간에는... 지난 시간에는 WAP 의 WTA 프로토콜의 기능과 구성, 서비스 예에 대해서 학습하고, WAP 보안을 위한 WTLS 와 WAP 애플리케이션 레이어 보안, 그리고 WAP Identity Module 에 대해서 알아보았 습니다. 이번 시간에는 2 회차에 걸쳐 WAP 컨텐츠 제작을 위한 마크업 언어인 WML 에 대해서 학습해 보 도록 하겠습니다.
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 학습 목표 15 회차 강의에서 다루게 되는 내용은 다음과 같습니다. WML 의 소개와 정의, WML 문서 구조에 대해 알 수 있다. WML 사용의 첫번째 예제를 소개하고 WML 마크업 언어의 사용 스타일에 대해 알 수 있다. WML 의 택스트 포맷 태그와 이미지 처리 태그에 대해 알 수 있다. 이번 장의 학습 목표 WML 개발 - I
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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 전송, 한 화면에 한개의 카드 표시, 다음 화면에 다음 카드 표시
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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 로 분리하여 개 발 가이드라인사용 예
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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 : 무선 네트워크 컨텐츠 전 송의 단위
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I WML 문서 구조 WML Deck & Card 하나의 WML 문서 전송은 하나의 WML Deck (Prolog 와 다수개 Card 로 구성 ) 의 전송을 의미 처음카드 첫째 카드 다음카드 둘째 카드 확인 버튼 <!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN" " 첫째 카드 둘째 카드 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 구문 을 이용한 링크를 삽입해야 함
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I WML 문서 구조 WML 문서 - 첫번째 예제 처음 WML Card 에서 두번째 Card 로의 이동은 “ 다음 ” 버튼 클릭으로 이동 WML Card 이동 두번째 WML Card 에서 “ OK ” 버튼 클릭 시, “ ” 로 이동 하이퍼 링크 이동 모바일 강좌 디렉토리 _____________ 다음카드 강좌홈피 ____________ OK <!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML 1.0//EN" " 모바일 강좌 디렉토리 강좌홈피
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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_ “ 은 한글에 대한 인코딩을 선언 과 맨 끝라인의 은 하나의 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 만 사용할 경우 와 같이 사용
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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 개 이상 지원
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 특수문자표현 방법 10 진수 표현 방법 <<< >>> ‘'' “"" &&& $$$ 공백 (Space) 소프트 하이픈 (-) ­ WML 특수문자 표시 Tag WML 에서 Special Character 표시 방법 1 < 2 = True 1 > 2 = False Display Dollar : $$ Display Dollar : $ WML 하이퍼링크를 위한 URL 에서의 “ & ” 특수 문자 표 시는 “ & ” 로 대치
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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 저 장 지원
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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) 에 따라 처리
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 요약 정리 WML 의 소개와 정의, WML 문서 구조에 대해 알아 보았습니다. WML 문서 첫번째 예제를 소개하고 WML 마크업 언어의 사용 스타일에 대해 학 습하였습니다. WML 의 택스트 포맷 태그와 이미지 처리 태그에 대해 학습하였습니다. 이번 시간에 소개했던 내용을 정리해 봅시다. 다음 시간에는 WML 개발 – II 에 대하여 학습하시게 될 것입니다.
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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 태그를 말해보시오 정답은 다음과 같습니다.,,,,,, 태그 해설내용 : 태그는 새로운 문단을 정의하고, 정의한 문단을 어떻게 나타낼 것인지 명시, 태그는 문자를 기본 폰트 크기보다 크게 지정, 태그는 굵은 폰트 지 정, 태그는 텍스트 에 밑줄 지정, 태그는 이탤릭 체 지정, 태그는 기본 폰트 크기보다 작게, 은 크게 지정 정답은 다음과 같습니다.,,,,,, 태그 해설내용 : 태그는 새로운 문단을 정의하고, 정의한 문단을 어떻게 나타낼 것인지 명시, 태그는 문자를 기본 폰트 크기보다 크게 지정, 태그는 굵은 폰트 지 정, 태그는 텍스트 에 밑줄 지정, 태그는 이탤릭 체 지정, 태그는 기본 폰트 크기보다 작게, 은 크게 지정
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 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 을 지원합니다.