3 부 애니빌더로 고급 기능 배우기

무선 인터넷 프로그래밍

3 부 애니빌더로고급 기능 배우기

3 부 애니빌더로고급 기능 배우기


2-1 폰페이지 재미있게 꾸미기[ 문서정보 ] 대화상자 / 색상설정 / 타이머설정

2-1 폰페이지 재미있게 꾸미기[ 문서정보 ] 대화상자 / 색상설정 / 타이머설정

3 무선 인터넷 프로그래밍

문서 정보 창 살펴보기 문서 정보 창 살펴보기

[ 문 서 정 보 ] 대 화 상 자 는 목 록 에 해 당 되 는 페 이 지 의 정 보 를 설정해주는 기능입니다 . 여기서는 파일 이름 , 확장자와 같은 기본 정보 수정부터 타이머 적용 , 색상 , 광고 등 문서에 적용할 수 있는 고급 효과들을 설정할 수 있습니다 . 고급 기능은 [ 고급 ] 탭을 클릭해야 설정이 가능합니다 . [ 고급 ] 기능은 퍼스널 버전에서는 지원하지 않습니다 .


문서 정보 창 살펴보기 문서 정보 창 살펴보기

- 파일명 : 선택한 문서의 파일 이름을 변경합니다 . - 파일 확장자 : 선택한 문서의 파일 확장자를 변경합니다 . - 카드명 / 타이틀 : 선택한 목록이 있는 부분의 카드명과 타이틀 이름을 설정합니다 . - 캐시처리 & 변수 초기화 유무 : 캐시와 변수를 처리합니다 . - 타이머 설정 : 문서에 타이머를 설정합니다 . - 색상 : 문서의 색을 지정합니다 . - 광고 : 광고창을 띄웁니다 . -CacheClear : 휴대폰의 캐시 기능을 초기화 합니다 . - 변수 클리어 : 변수의 값을 초기화합니다 . - 이전 / 지움버튼 disable 설정 : 이전 / 지움 버튼의 기능인 이전 페이지로 가는 것을 못하게 합니다 .


문서 정보 창 살펴보기 문서 정보 창 살펴보기 억세스 정보

•프로젝트의 페이지에 접속할 때 해당 도메인과 경로을 거쳐야만 사이트 접속이 가능하도록 설정을 합니다 . Domain 항목에는 폰페이지가 있는 도메인 주소를 입력하고 [path] 항목에는 경로를 입력합니다 . 입력한 경로에 있는 문서만 접속이 가능하게 합니다 . 입력한 경로 상위의 페이지도 접속이 불가능하게 되므로 특별한 경우가 아니만 설정하지 않습니다 . 이 기능은 mHTML 에서는 동작하지 않습니다 .

-Domain : 접속하는 도메인명을 입력합니다 . -path : 도메인 다음의 경로을 입력합니다 . - 프로젝트 전체적용 : 현 프로젝트의 모든 페이지에 억세스 정보를 추가 합니다 .


문서 정보 창 살펴보기 문서 정보 창 살펴보기 타이머 적용

지정된 시간이 흐르면 입력한 URL 을 열거나 사이트 안에 있는 페이지를 열어 줍니다 .

- 지연 시간을 입력합니다 . - 연결 구분 : 주소 (URL) 로 연결할 것인지 다른 페이지 (Link) 로 연결할 것인지 선택합니다 . - 연결 : 연결할 주소를 입력하거나 페이지의 경로가 표시됩니다 . -VAR : 연결 주소로 전달할 변수를 선택합니다 . -URL : 각 언어별로 주소 경로를 수정합니다 .


문서 정보 창 살펴보기 문서 정보 창 살펴보기 색상

•폰페이지의 배경 , 기본 글자색 , 하이퍼링크 글자색을 설정합니다 . WML, HDML 에서는 동작하지 않습니다 .


문서 정보 창 살펴보기 문서 정보 창 살펴보기 광고창 띄우기

•문서를 로딩 할 때 페이지 하단에 검정색 띠지의 광고창이 나타나게 해주는 기능입니다 . 문장이 길 경우에는 글자가 스크롤되면서 나타납니다 . 이 기능은 mHTML 에서만 동작합니다 .


[ 예제 3-1-1] 문서 등록 정보 속성 설정 [ 예제 3-1-1] 문서 등록 정보 속성 설정

[ 문서정보 ] 대화상자의 속성을 이용해서 문서 배경색을 지정하고 문서가 열린 후 3 초가 지나면 애니빌 홈페이지로 이동하게 만들어 보고 문서 하단에는 광고를 표시하게 만들어 보겠습니다 .


3-2 폰페이지에 입력양식 만들기 3-2 폰페이지에 입력양식 만들기 [ 입력 ] 도구 / [ 옵션 ] 도구


입력양식이란 입력양식이란 입력양식이란 사용자가 글을 입력할 수 있도록 해주는 공간을 말합니다 . 폰페이지에서는 글을 입력할 수 있는 TEXT 입력양식과 비밀번호를 입력해주는 PASSWORD 입력 양식을 많이 사용하고 있습니다 . 무선 홈페이지에서 사용하는 입력양식 형태는 각양각색인데 011, 017, 019 는 대부분 홈페이지와 유사하게 나타나고 016, 018 은 한 페이지에 입력양식이 하나씩 나타나는 형태를 가지고 있습니다 . 하단 메뉴를 이용해서 입력양식을 이동하면 글을 입력하거나 입력양식을 단계별로 거쳐가며 내용을 입력합니다 .


입력양식의 종류 입력양식의 종류

무선 홈페이지에서 사용하는 입력양식은 홈페이지의 입력양식과 기능이 동일합니다 . 단지 포괄적으로 사용되고 있는 입력양식은 TEXT 입력 양식과 PASSWORD 입력양식만을 사용하고 있기 때문에 표현의 제한을 많이 가지고 있다는 점만 다릅니다 . 여기서는 무선 홈페이지에서 사용되는 입력양식에 대해서 알아보도록 하겠습니다 .


입력양식의 종류 입력양식의 종류 TEXT 입력양식

•TEXT 입력양식은 글을 입력할 수 있는 양식으로 글 제목이나 이름 , 내용 등을 입력할 때 많이 사용합니다 . 모든 언어에서 모두 지원하므로 가장 포괄적으로 사용되고 있는 입력양식 중에 하나입니다 .

PASSWORD 입력양식 •PASSWORD 입력양식은 사용자가 입력한 내용이 화면에 ●으로 표시해주는 양식입니다 . 보통 비밀번호를 입력하는 입력양식에 사용됩니다 . TEXT 입력양식과 더불어 모든 언어에서 모두 지원하므로 자주 사용되고 있습니다 .


입력양식의 종류 입력양식의 종류 CHECKBOX 입력양식

CHECKBOX 입력양식은 여러 개의 목록 중에서 사용자가 원하는 목록을 선택하게 해주는 양식입니다 . 선택은 목록 중에 여러 개를 선택할 수 있는 기능으로 홈페이지의 CHECKBOX 입력양식과 동일합니다 . CHECKBOX 입력양식은 c-HTML 언어에서만 제공되는 입력양식으로 자주 사용하지는 않는 입력양식입니다 .

RADIO 입력양식 RADIO 입력양식도 CHECKBOX 입력양식과 동일하게 여러 개의 목록 중에서 사용자가 원하는 목록을 선택하게 해주는 양식입니다 . CHECKBOX 입력양식과 차이점은 RADIO 입력양식은 목록 중에 하나만 선택이 가능합니다 . c-HTML 언어에서만 제공되는 입력양식으로 자주 사용하지는 않는 입력양식입니다 .


입력양식의 종류 입력양식의 종류 HIDDEN 입력양식

HIDDEN 입력양식은 사용자가 입력할 수 있는 양식이 아니라 개발자가 특별한 값을 전달할 경우에 사용됩니다 . 이 입력양식도 c-HTML 언어에서만 제공되는 입력양식으로 자주 사용하지는 않는 입력양식입니다 .

TEXTAREA 입력양식 TEXTAREA 입력양식은 여러 줄의 글을 입력할 수 있게 해주는 입력 양식입니다 . 이 입력양식도 c-HTML 언어에서만 제공되는 입력양식으로 자주 사용하지는 않는 입력양식입니다 .


입력양식 만들기 입력양식 만들기 [ 입력 ] 도구 단추를 이용해서 [text], [password], [checkbox], [radio], [hidden], [TEXTAREA] 의

입력양식을 만들 수 있습니다 . 이중에서 [text], [password] 도구를 주로 사용해서 꾸밉니다 . 등록정보 대화상자에서 [ 내용 ] 항목에서는 입력상자 위에 표시할 글을 입력하고 [ 고급 ] 탭에서는 입력양식의 환경을 설정합니다 .

- 입력타입 : 입력양식의 종류를 선택합니다 . [text], [password], [checkbox], [radio], [hidden], [TEXTAREA] - 변수명 : 입력양식에 기록한 내용을 지정하는 이름을 설정합니다 . - 기본값 : 입력양식에 기본값으로 표시하게 할 내용을 기록합니다 . - 입력양식 : 입력양식에 기록할 내용의 종류를 선택합니다 . -Format 문 : 입력양식에 기록할 내용의 형식을 설정합니다 . - 최대길이 : 최대 입력가능한 글자수를 지정합니다 . - 크기 : 입력 내용의 크기를 지정합니다 . - 널허용 : 사용자의 입력을 반드시 필요로 할 때 사용합니다 . -checked : checkbox, radio 입력양식일 경우 체크 상태를 지정합니다 . -Row : textarea 입력양식에서 글상자의 행 길이를 지정합니다 . -Col : textarea 입력양식에서 글상자의 열 길이를 지정합니다 .


입력양식 만들기 입력양식 만들기 [Format 문 ] 항목에는 사용자가 입력양식에 넣을 입력형식을 설정할 수 있습니다 .

[ 입력양식 ] 항목에 [ 사용자 정의 ] 를 선택한 다음 [Format 문 ] 항목에 원하는 형식을 지정할 수 있습니다 . Format 을 설정하지 않으면 *M 으로 설정됩니다 . 통신사에 따라 제대로 지원되지 않는 경우가 있으므로 특별한 경우가 아니라면 설정하지 않도록 합니다 . [ 입력양식 ] 에 사용하고 싶은 목록을 선택하면 [Format문 ] 항목에 해당 기호가 표시되는데 이것은 형식을 소개하기 위한 예이므로 예를 보고 적당하게 내용을 수정해주도록 합니다 .

[ 예 ] 4N : 4 자리의 숫자가 입력 가능 AAA : 4 자리의 특수 기호나 알파벳 대문자만 입력 가능 *M : 모든 문자를 자리 수 상관없이 입력 가능


[ 예제 3-2-1] 입력양식 만들기 [ 예제 3-2-1] 입력양식 만들기

텍스트 입력양식과 패스워드 입력양식을 이용해서 이름과 주민등록 , 비밀번호을 입력할 수 있는 입력양식을 만들어 보겠습니다 .


[ 옵션 ] 도구 만들기 [ 옵션 ] 도구 만들기 •옵션 도구란 여러 개의 항목 중 사용자가 하나 또는 여러 개를 선택할 수 있도록 해주는 도구로서 사용자가 직접 입력하는 것이 아니라 선택할 수 있도록 해줍니다 .

- 화면에 표시할 항목 이름 - 옵션 Label : 항목에 커서를 위치할 때 아래 메뉴에 표시할 이름 - 옵션 Value : 항목을 선택했을 때 전송될 값


[ 옵션 ] 도구 만들기 [ 옵션 ] 도구 만들기 •옵션 도구란 여러 개의 항목 중 사용자가 하나 또는 여러 개를 선택할 수 있도록 해주는 도구로서 사용자가 직접 입력하는 것이 아니라 선택할 수 있도록 해줍니다 .

- 그룹선택 : 같은 항목일 경우 같은 그룹으로 선택합니다 . - 변수명 : 같은 항목으로 지정할 변수의 이름을 입력합니다 . - 기본값 : 값을 선택할 때 전송될 값으로 이미 지정되어 있는 값 목록이 표시됩니다 . -Multiple : 같은 항목에 여러 개의 값을 중복해서 선택할 수 있도록 합니다 .


[ 예제 3-2-2] 혈액형 선택하기 [ 예제 3-2-2] 혈액형 선택하기

옵션 도구를 이용해서 혈액형을 선택하는 예제입니다 . 옵션 도구로 A, B, AB, O형 4 가지의 항목을 만든 후 사용자가 선택한 값을 화면에 출력하게 만들어 보겠습니다 . 선택한 값을 화면에 출력하게 하기 위해서 서버스크립트를 이용해야 하므로 서버스크립트가 동작하는 서버를 이용할 경우에만 동작합니다 .


3-3 모바일용 문서와 그림 변환하기 3-3 모바일용 문서와 그림 변환하기 [ 소스생성하기 ], [ 이미지 변환 ]


[ 소스생성하기 ] 란 [ 소스생성하기 ] 란 제너레이트 (Generate) 라고도 부르는 [ 소스생성하기 ] 란 작업한 문서에 사용된 내용들을 모바일에 사용할 수 있는 파일로 저장해주는 기능입니다 . 단지 파일을 저장하는 것 뿐 만 아니라 휴대폰 종류에 따른 다양한 형식으로 문서를 만들어서 문서를 실행하면 휴대폰 종류에 알맞은 문서를 찾아서 열어주는 동적인 기능도 만들어 줍니다 . 또한 문서에 삽입되어 있는 그림들도 사용자의 휴대폰이 컬러를 지원하는지 흑백을 지원하는지 판별해서 알맞은 그림 형식을 불러오도록 해주는 역할도 수행합니다 . 제너레이트 (Generate) 를 실행하려면 [ 소스생성하기 ] 단추를 클릭해서 [ 소스생성하기 ] 대화 상자를 실행합니다 . 대화 상자에서 속성을 설정한 후 [ 확인 ] 단추를 클릭하면 프로젝트 파일을 저장한 폴더에 데이터들이 저장됩니다 .


[ 소스생성하기 ] 란 [ 소스생성하기 ] 란

-언어 선택 : 문서를 저장할 언어 종류를 선택합니다 . - 문서 파일 이름을 등록정보에 입력한 이름으로 설정합니다 . - 문서 파일 이름을 기본 파일명과 하위 파일 명의 이름을 임의로 설정합니다 . - 파일명의 절대 경로로 설정합니다 . - 모든 타이틀을 흐르는 문자열로 설정합니다 . - 모든 링크가 설정되어 있는 문자를 흐르는 문자열로 설정합니다 . - 모든 파일들의 경로를 절대 경로로 설정합니다 . - 파일 생성이 완료된 후 [ 소스생성하기 ] 대화 상자를 종료합니다 . - 문서에 삽입한 그림들을 bmp, wbmp, nbmp 그림 형식으로 변환합니다 . - 전체 / 부분 선택 : 소스생성을 문서 전체를 실행할 것인지 현재 커서가 표시되어 있는 문서만 실행할 것인지 설정합니다 . - 확인 : [ 소스생성하기 ] 를 실행합니다 . -닫기 : 대화 상자를 닫습니다 .


[ 예제 3-3-1] [ 소스생성하기 ] 실행하기 [ 예제 3-3-1] [ 소스생성하기 ] 실행하기

이제까지 작업한 폰페이지에 제너레이트를 실행해서 문서를 저장해보도록 하겠습니다 . 여기서는 우리나라에서 지원하지 않는 cHTML 을 제외한 모든 형식을 생성하고 그림 파일들은 흑백 모드인 bmp, wbmp, nbmp 그림 형식으로 변환되도록 속성을 설정합니다 .


폰페이지 소스 구조 살펴보기 폰페이지 소스 구조 살펴보기 폴더 구조

제너레이션을 실행하면 프로젝트를 저장한 폴더에 문서를 열어 주는 default.asp 파일과 여러 가지 폴더들이 만들어 집니다 . hdml, mhtml, upwml, wml 등의 폴더는 폰페이지 관련 문서들이 저장되고 images 폴더는 그림이 저장되고 include 폴더는 동적처리에 관련된 데이터들이 저장됩니다 .


폰페이지 소스 구조 살펴보기 폰페이지 소스 구조 살펴보기

[ 메일 ] 도구로 메일 설정시 첨부한 파일들을 보관하는 폴더입니다 .

hdml 문서들이 포함되어 있습니다 .

폰페이지에 사용된 그림들을 색깔별 종류별로 구분해 놓은 폴더입니다 .

폰페이지 동적 처리 및 스크립트 관련 파일들이 저장되어 있는 폴더입니다 .

KUN용 폰페이지 문서들이 저장되어 있는 폴더입니다 .

mHTML 용 폰페이지 문서들이 저장되어 있는 폴더입니다 .

문서에 삽입되어 있는 벨소리를 화음별 , 종류별로 구분해서 저장해둔 폴더입니다 .

UP-WML 용 폰페이지 문서들이 저장되어 있는 폴더입니다 .

WML 용 폰페이지 문서들이 저장되어 있는 폴더입니다 .

wml2 용 폰페이지 문서들이 저장되어 있는 폴더입니다 .

xHTML 용 폰페이지 문서들이 저장되어 있는 폴더입니다 .

폰페이지 접속시 처음 열리게 할 인덱스 문서입니다 .

애니빌더 프로젝트 파일입니다 .


폰페이지 소스 구조 살펴보기 폰페이지 소스 구조 살펴보기 휴대폰 접속 시 문서를 찾아가는 순서

•소스생성하기를 실행하면 처음 실행 문서인 default.asp 가 만들어 지는데 이 파일은 문서를 열 때 제일 먼저 실행하여 접속자 휴대폰의 브라우저를 검색하여 휴대폰에서 지원하는 폰 페이지 언어를 찾습니다 . 그런 다음 해당 문서가 포함되어 있는 해당 폴더로 이동한 후 폴더 안에 있는 index.asp 문서를 실행합니다 .

default.asp ->

[017/019 일 경우 ] h(hdml) 폴더로 이동[016/018 일 경우 ] m(mhtml) 폴더로 이동[016/018 일 경우 ] k(KUN) 폴더로 이동[017/019 일 경우 ] u(upwml) 폴더로 이동[011/017 일 경우 ] w(wml) 폴더로 이동[011/017 일 경우 ] wml2(wml2) 폴더로 이동[011/017 일 경우 ] x(XHTML) 폴더로 이동

-> index.asp 문서를 실행


폰페이지 소스 구조 살펴보기 폰페이지 소스 구조 살펴보기 그림 구조와 벨소리 구조

소스생성하기를 실행하면 [images] 폴더 안에 휴대폰 컬러별로 [2c], [4c], [256c], [4096c], [65536c] 폴더가 생성됩니다 . 2c 는 흑백 모드이고 4c 는 4색 컬러 , 256c, 4096c, 65536c 는 각각 256 컬러 , 4096 컬러 , 65536 컬러 모드를 의미합니다 . 그리고 각 폴더에 그림 형식에 따라 [bmp], [nbmp], [wbmp], [gif], [sis] 등의 폴더로 구분됩니다 . [ 소스생성하기 ] 를 실행하면 문서에 삽입한 그림들은 색상별 , 그림 형식별로 변환해서 해당 폴더에 저장됩니다 . 그러므로 문서를 실행하면 휴대폰에서 지원하는 그림 형식을 찾아서 화면에 그림을 표시해줍니다 . 그러나 애니빌더는 흑백 모드에 최적화되어 있기 때문에 4c 칼라와 256 칼라는 별도로 그림을 변환해서 해당 폴더에 저장해주어야 합니다 . 같은 방법으로 문서에 삽입한 벨소리 음악 파일들도 [melody] 폴더에 1폴리 , 4 폴리 , 16폴리 , 40폴리 , 64 폴리 별로 음원별로 구분했고 휴대폰에 따라 각각 [011] 과 [016] 폴더로 구분해 두었습니다 .


폰페이지 소스 구조 살펴보기 폰페이지 소스 구조 살펴보기 동적인 처리를 해주는 기능

애니빌더는 사용자의 휴대폰 기능을 판별해서 알맞은 문서와 그림들을 선택해주는 동적 처리 기능을 제공합니다 . 동적으로 처리한다는 의미는 문서에 삽입되어 있는 그림들을 사용자 휴대폰의 종류와 지원 색상에 따라 알맞은 그림을 찾아서 표현하게 해주는 기능을 말합니다 . 또한 서버스크립트를 이용한 효과들을 사용할 경우 사용되는 소스 파일들이 저장됩니다 . 이 파일들은 [ROOT] 등록정보에서 [ 파일 확장자 ] 를 ASP, JSP, PHP 로 선택한 경우에만 실행됩니다 . [ 소스생성하기 ] 를 실행하면 생성되는 [include] 폴더에는 이러한 동적 처리를 실행해주는 파일들이 저장됩니다 .


모바일용 그림으로 변환해주는 [ 이미지 변환 ] 모바일용 그림으로 변환해주는 [ 이미지 변환 ] •[ 소스생성하기 ] 를 실행하면 문서에 삽입되어 있는 그림들을 흑백 이미지로 변환해주지만 컬러 그림들은 제대로 변환해주지 못하므로 [ 이미지 변환 ] 을 이용해서 그림들을 변환해주어야 합니다 . [ 이미지 변환 ] 은 문서에 삽입되어 있는 그림 파일을 무선 홈페이지에서 사용할 수 있는 그림 형식으로 변환해주는 기능으로 [SIS] 형식을 제외한 [BMP], [WBMP], [NBMP], [GIF], [PNG], [JPG] 등 대부분의 그림들을 흑백과 컬러로 자동 변환해 줍니다 . 변환된 그림은 선택한 [ 변환위치 ] 폴더에 [images] 폴더에 해당 그림 형식 폴더 안에 저장됩니다 . 이 기능은 애니빌더 퍼스널과 셰어웨어 버전에는 포함되어 있지 않습니다 .


모바일용 그림으로 변환해주는 [ 이미지 변환 ] 모바일용 그림으로 변환해주는 [ 이미지 변환 ]


[예제 3-3-2] 모바일용 그림으로 변환하기 [예제 3-3-2] 모바일용 그림으로 변환하기

[ 소스생성하기 ] 를 실행한 후 [ 이미지 변환 ] 을 실행하여 문서에 삽입되어 있는 그림들을 컬러별로 자동 변환해 보겠습니다 .

Documents

3 부 애니빌더로 고급 기능 배우기