Rsef.net

풀브라우징. 그리고 웹표준과 크로스 브라우징

peris — Thu, 27 Mar 2008 09:31:00 +0900

올해 4월부터 삼성전자와 LG전자를 통하여 풀브라우징(모바일 브라우징이라고 하는 것이 더 정확)이 가능한 휴대폰이 등장하게 되었다.
게다가 아직 정확한 것은 발표되지 않았으나 LGT에서 월 1만원대의 정액 요금제를 선보일 예정이라고하니 모바일 웹의 활성화를 기대하지 않을 수 없다.
(모바일 브라우징이 시장에 끼칠 영향은 어마어마할 수 있다. 물론 LGT의 전략이 성공한다는 가정이 필요하지만..)

그런데 여기서 문제점이 하나 생기니..
그것은 바로 ActiveX와 비표준으로 도배된 우리나라 웹페이지들이다.
기사에 따르면 SKT는 자사의 멜론에서 음악을 구매할 수 없다. 바로 ActiveX로 된 결제 서비스 때문이다. 기사에서야 저렇게 써놨지만 물론 이 문제는 SKT만의 문제가 아니다.(그렇기 때문에 더 큰 문제라는 것이 안타까울 뿐이다.)

결제 관련한 모바일웹표준이 제정돼 있지 않아 통신사가 풀 수 있는 문제가 아니다

위 기사 중 위와 같은 SKT 관계자의 말을 인용한 부분이 있다.

위의 표는 ETRI에서 2007년 12월에 전자통신동향분석으로 내놓은 모바일 웹 2.0과 모바일OK 표준화 동향이라는 자료이다.

표에 나와 있듯이 모바일 웹 관련 표준인 W3C의 DDC 1.0에서는 HTTPS/SSL이 빠져있어 결제같은 보안이 필요한 서비스는 힘들지만, 한국 DDC 1.5에서는 HTTPS/SSL을 지원한다고 명시되있기 때문에 이것이 가능하다.
결제서비스를 구현하기 위해 ActiveX보다 더 악질의 꼼수(있을지는 모르겠지만..)를 쓰지 않기 위해서라도 하루 빨리 W3C DDC에 HTTPS/SSL이 포함되어 세계 표준이 되어야 할 것이다.(그러는 김에 일반 웹페이지도 바꿔주면 금상첨화고;;)
그 외에도 한국 DDC 1.5의 안은 현재의 추세를 잘 반영하고 있다고 보여진다.(언제 실제로 적용되느냐가 문제겠지만..)

그리고 위의 표에서 주목해야될 점은 마크업 언어가 현재 일반 웹페이지에서 사용되는 (X)HTML이 아니라 XHTML Basic 1.1이라는 것을 사용한다.
XHTML Basic 1.1의 명세서를 보지는 않았지만 기존의 웹페이지와 완벽한 호환이 되지 않는다면 웹표준(모바일 웹도 결국은 웹이니..)이나 크로스 브라우징에도 많은 영향을 끼칠 수 밖에 없게 된다.
실제로 출시될 단말기에 내장된 브라우저가 어떤 명세서를 적용해서 어느 수준까지 구현이 되어 있는지 아직 알 수가 없기 때문에 일단은 지켜봐야 되겠지만 만약 렌더링이 다르게 된다면 크로스 브라우징을 위해 고려해야 될 브라우저가 추가되게 될 것이다.
게다가 벤더마다 서로 다른 렌더링까지 해버리면.. 아주 난감한 상황이 오게 될지도 모른다.

제발 내장 브라우저가 표준 명세서를 충실히 지켜서 개발되었기를 바랄 뿐이다.

덧. 글이 두서가 좀 없군요. OTL;;

Textcube ERD - Sandbox R5614

peris — Mon, 24 Mar 2008 16:57:27 +0900

Textcube ERD

텍스트큐브 소스를 다시 보다 대~충 그려본 ERD.
(태터툴즈 사용하다 그냥 티스토리로 넘어가다보니 텍스트큐브를 사용할 일이 없어서 이제서야 조금씩 소스보고 있음;;)

샌드박스 R5614 기준임(텍스트큐브 1.6.1 발표 후 revision임)

[FireFox bug] select element 선택 버그

peris — Mon, 03 Dec 2007 14:02:55 +0900

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
h1 { text-indent:-5000px; }
#aaa { position:fixed; }
</style>
</head>

<body>

<div id="aaa">
<h1>Test</h1>
<form action="">
<select size="3" style="width:100px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
</div>
</body>
</html>

FireFox에서 위와 같은 내용을 html 파일로 저장 후 select box를 선택하려고 마우스 클릭을 해보면 선택이 되지 않는다.

position:fixed; 의 값을 변경하거나, text-indent 의 값을 0 이상으로 주거나, select element의 size를 1로 주거나 없애면 정상적으로 선택이 된다.
재미있게도 text-indent의 -값이 적을 경우 일부분만 클릭이 제대로 된다.

그러니까 이 버그는 position:fixed;가 되어 있는 element 안에, text-indent 가 0 미만인 element 와 size가 2 이상인 select element가 같이 있을 경우 생기게 된다.
(조건도 참 복잡하네 -_-;)

FireFox ver : 2.0.0.11

HTTP request을 줄이기 위한 image background 처리

peris — Tue, 21 Aug 2007 18:40:13 +0900

YSlow가 공개되면서 '13가지 규칙'에 대해 관심을 가지는 분들이 계실 겁니다.

이 글은 13가지 규칙 중 첫번째인 Make Fewer HTTP Requests에 나와 있는 CSS Sprites에 관한 글입니다.

실례로 Daum의 실시간 이슈 검색어를 가지고 설명을 하겠습니다.

Daum 실시간 이슈 검색어

위의 실시간 이슈 검색어를 보면 왼쪽에 1~15까지 번호가 있는데, 이 것을 표현하기 위해 총 15개의 이미지 파일을 사용 하고 있습니다.
이 것을 하나의 이미지로 만들면 총 14번의 HTTP request를 줄이는 효과를 가져올 수 있습니다.(사실 배경 이미지만 깔고 숫자는 텍스트로 표현하는 쪽이 더 좋겠습니다만;;)

이 방식은 왼쪽의 이미지와 같이 15개의 이미지를 하나의 파일로 만들어 놓은 후, CSS의 background-position 속성을 이용하여 브라우저에 원하는 부분만 렌더링을 시켜주는 방식입니다.

Firebug 같은 Firefox의 확장 기능을 이용하여, Daum의 검색 결과 화면에서 Edit > HTML > body Element에 Edit HTML... 기능을 이용하여 아래와 같은 코드를 삽입해 보시면 어떻게 적용이 되는지 간단히 확인하실 수 있습니다.
이 방식을 실제로 사용한다면 아래의 CSS는 좀 다듬을 필요가 있습니다만 이건 어디까지나 예제이므로.. :)

위의 CSS를 보면 한눈에 보이듯이 번호가 증가할 수록 0, -11px, -22px... 등으로 background-position의 마이너스 값이 증가하게 되어 해당 위치부터 브라우저상에 렌더링 되게 되며 height에 의하여 11px만큼만 보여지게 됩니다.

따라서 여러개의 이미지 파일을 가지고 있는 것과 동일한 효과를 얻을 수 있습니다.

덧. http://google.co.kr 에서 사용하고 있는 이미지 애니메이션 효과도 이 방법을 응용한 것입니다.

브라우저별 W3C DOM module support chart

peris — Wed, 30 May 2007 10:57:14 +0900

IE 6.0

FF 2.0.0.3

Opera 9.01

Safari 2.0.4

위의 캡쳐 이미지에서 보듯이 4개의 브라우저 중에서 Opera가 W3C DOM을 제일 제대로 지원하고 있다.
물론 이 테스트 결과가 절대적일 수는 없다. 참고용 정도로 활용하면 될 듯..

Safari나 IE7은 어떤 결과가 나올런지 궁금하기는 하지만.. 맥도 없고; IE7을 설치할 수 있는 상황도 아니니 패스;;

테스트 URL : http://www.w3.org/2003/02/06-dom-support.html

추가 : Safari 캡쳐 이미지는 http://www.browsrcamp.com/ 이 곳을 이용하여 추가함.