레이블이 Internet Explorer인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Internet Explorer인 게시물을 표시합니다. 모든 게시물 표시

2010년 1월 11일 월요일

트위터KR: 트위터 계의 옴니아2 또는 IE?

우리나라의 트위터 사용자 중 많은 사람들이 twitter.com이 아니라 트위터KR(twtkr.com, 이하 twtkr)을 사용한다.

twtkr는 다양한 기능을 제공할 뿐만 아니라 다른 장점도 갖추고 있다.

- 링크된 이미지/비디오를 자동으로 보여줌
- 입력하는 글을 적절히 커스터마이즈 (URL 축소, 이미지 삽입, 위치정보 입력 등)
- twitter와 거의 비슷한 화면에서 그대로 한글화하여 외국어 알러지가 있는 사람들에게 편안한 느낌을 줌

내 블로그에서도 twitter이 아니라 twtkr로 링크하도록 해뒀다.

그런데, twtkr은 좋은 트위터 클라이언트일까?
그렇지는 않은 것 같다.

내가 느끼는 twtkr의 가장 큰 문제는 개발철학이 뭔지를 모르겠다는 것이다.

- twitter 기능 몽땅 지원
- twitter 관련 서비스 몽땅 지원
- twrtter에 없는 서비스도 추가로 지원 (긴글)

이 정도를 목표로 만든 것 같은데, 이 중 긴글은 트위터 서비스의 본질을 건드린다는 문제도 갖고 있다.
(트위터의 본질은 140자 이내의 글자를 공개한다는 것임)

이런 식으로 명확한 철학 없이, 모든 기능을 다 되게 하고, 거기에 자기만의 기능을 추가한 놈들이 있다.

하나는 스마트 폰 계의 졸작 옴니아2이고, 하나는 웹 브라우저 계의 졸작 인터넷 익스플로러이다.

옴니아2... 전지전능(풉!)하단 이름 그대로 안 되는 기능은 거의 없는 것 같다.
H/W 스펙에 비해 느려터진 속도, 각 기능들을 서로 완전히 따로 만든 듯한 부정교합, 그러면서도 어설프게 아이폰을 베낀 모습들 그리고, 싼티가 철철 넘치는 광고 등이 문제여서 그렇지...

인터넷 익스플로러... 역시 비슷한 철학(?)으로 시작했다.
지금 듣보잡 취급을 받는 IE6마저 처음엔 모든 경쟁 브라우저의 기능이 다 지원되고 추가로 ActiveX가 지원되는 것을 목표로 만들어진 것이다. 웹표준을 잘 지원하지도 않고, ActiveX 덕분에 컴퓨터가 개판이 되는 문제가 있어서 그렇지...

옴니아2, 인터넷 익스플로러 모두 많은 기능에 비해 평은 좋지 않다.
특히, 긴글 기능을 보면 twtkr이 그들과 같은 길을 가려는 것이 아닌가 우려된다.

2009년 12월 26일 토요일

우리에게 nProtect가 있다면 미쿡엔 HP Smart Web Printing이 있더라!

요즘 들어 정말 마음에 들지 않는 단어 중 하나가 Smart이다.
아무래도 대가리머리가 smart하지 않으면 쓰지도 말라는 삼성의 smart 폰 얘기 때문인 것 같다.
Smart guys like smart toys.
여담이지만, 이 광고는 정말 웃긴게 smart toy라면 dummy라도 쓸 수 있어야한다는 기본을 무시하는 병신같은 놈이다.

각설하고, HP의 프린터 드라이버를 설치하면 HP Smart Web Printing이란 놈이 알아서 설치된다.
이 놈은 Internet Explorer에서 smart(?) 한 인쇄를 도와주는 프로그램이다.

이게 정말 문제덩어리 프로그램인 것이 이 정도의 문제를 달고 산다.

1. Web 이라고 하지만, IE에서만 동작함 (대한민국의 현실에 최적화?)
2. 제 마음대로 동작하다가 정상적인 클릭이 안 되는 문제 발생
3. 게다가 이름도 Smart다! 삼성의 smart와 동급인 것이다!

인터넷 뱅킹때문에 IE를 써야 한다는 것도 짜증인데, 그마저도 제대로 못 쓰니 순간적으로 꼭지가 돌아버리는 거다.

클릭을 하면 이딴 화면이 나오는데, 이 모드를 벗어날 방법은 없다!


이 모드는 HP Smart 어쩌고 표시를 숨겨도 동작한다. 즉, 한번 지 마음대로 이 모드로 들어서면 다시는 못 나가는 것이다!

이걸로 계속 껐다 켰다 해봤자 헛수고라는 거...


결국 IE를 중단시킨 뒤에 이 놈을 제거하고 다시 뱅킹...

다시는 보지 말자. Smart!


이거 정말 우리의 nProtect만큼이나 사용자의 꼭지를 돌아버리게 만드는 프로그램이더라!

2009년 11월 14일 토요일

Syntax Highlighter 2.1.364 업데이트

무려 1달이나 전에 Syntax Highlighter가 2.1.364로 업데이트되었다.
이제야 알았다는 아쉬움을 뒤로하고, 바로 티스토리에 적용했다.

사용자 삽입 이미지


이번 패치 역시 많은 양의 버그 패치와 더불어 약간의 기능 추가 및 변화가 있다.

수정된 주요 기능은 아래와 같다.

- ruler 기능 제거. 아무도 안 쓰는 것 같아서임
- line wrapping이 모든 환경에서 정상 작동
- expand source를 show source로 변경
- <pre> 태그 외에 <script> 로 사용 가능 (updated usage page)
- 테마 파일 구성의 변경 (즉, 기존에 자체적으로 만든 테마가 있으면 사용 불가 ㅡ.ㅡ;)

더 자세한 변경된 기능은 공식 홈페이지에 올라온 변경 내역를 참고하기 바란다.

이 중 가장 주목할만한 기능은 <script> 태그이다.
기존의 사용법은 아래와 같았다.


이것을 아래와 같이도 쓸 수 있다.


이렇게 <script> 태그를 사용하면 아래와 같은 장단점이 있다.

장점
- 티스토리 새관리의 개같은 버그<pre> 태그에 지맘대로 <br />을 붙이는 버그에서 해방
- <pre>를 사용하면 하일라이팅 되지 않은 코드가 보였다 하일라이팅된 모양으로 변하는데, 이런 깜박임이 없어짐

단점
- 위지윅 편집기에서 볼 수 없음 ㅡ.ㅡ;


설치는 아래의 파일을 다운받아 압축푼 뒤, 스킨 업로드로 올린 뒤에 스킨을 수정하면 되며, 세부 수정 방법은 티스토리에 Syntax Highlighter 2.0 적용하는 방법 포스트를 참고하면 된다.


이 스킨에는 기존에 공개한 스킨에 포함된 아래의 패치가 모두 포함되어있다.

- 치환자 입력 가능
- 언어팩 추가: MSX, AviSynth
- Copy to Clipboard 버그 수정


덧. 이 버전을 적용하면서 커맨트 영역이 제대로 출력되지 않는 문제가 발생했다.
여러모로 확인한 결과 스킨 css의  .post  .commentsSH의 .comments충돌한다는 것을 알게되었다.

이 문제를 해결하려고 Firefox+Web DeveloperInternet Explorer 8개발자 도구를 사용해봤는데, 결국 IE8로 찾았다.

IE8이 여전히 다수의 문제점을 안고 있는 브라우저이긴 하지만, 엄청난 발전이 있던 것도 사실이다.
IE8의 개발자 도구는 css의 충돌을 찾는데 있어서 최적의 도구이다.

사용자 삽입 이미지

저렇게 엔터를 끼워넣은 적이 없다구!


2009년 10월 19일 월요일

JW Player 도우미 2.2a 업뎃: 플레이어 업데이트

JW Player 도우미 2.2에서 JW Player만 업데이트함.

최근 JW Player가 4.5에서 4.6으로 업데이트 되었다. (업데이트 내역 보기)
이에 따라 JW Player만 업데이트함.


덧. FLVPDF.js 파일도 약간 수정되었는데, 기능 수정이나 버그 패치는 없는, 단순 코드 관리 목적의 수정임.

2009년 10월 10일 토요일

JW Player 도우미 2.2 업뎃: 버그 패치 및 사소한 기능 수정

JW Player 도우미 2.1에서 발견된 버그를 해결하는 포스팅임.

이 문제가 이제야 리포팅되는 걸 보면 사용자가 없기는 없는 모양이다...
그저 리포팅해주신 애쉬™ 님께 무한히 감사드릴 뿐...

플러그인(이라고 쓰고는 스킨 수정이라 읽음)을 만들 때 IE에서의 동작여부는 잘 확인하지 않는다.
IE에서 동작하게 만들다보면 정상적인 브라우저에서 바보가 되는 경우가 허다하기 때문이다.

어쨌거나 도우미 2.1은(이전 버전과 마찬가지로) IE 계열에서 잘 동작하지 않았다.
문제는 1.x대에서 IE에서 잘 동작하지 않았던 문제를 수정했음에도 불구하고 동작하지 않았다는 거...

구글 닥스 화면이 뜨는 것만 보고 잘 되는 줄 알고 창을 닫아버렸는데, 내부의 창이 안 뜨는 문제가 있었던 거다. OTL

결국 애쉬™ 님 덕분에 문제점을 파악하여, 잘 동작하도록 수정했다.
또한, (애쉬™ 님의 요청대로) mp4 비디오도 재생이 가능하도록 수정했다.


1. 플러그인의 기능

- 첨부 비디오(flv/mp4) 및 오디오(mp4) 재생 (JW Player 도우미 플러그인 1.2 업데이트 참조)
- 외부 비디오(flv/mp4) 및 오디오(mp4) 재생 (JW Player 도우미 플러그인 1.5 업데이트 참조)
- 첨부 PDF 및 PPT 파일 임베드 (JW Player 도우미 2.1 업뎃 참조)


2. 수정 사항

- IE에서 잘 동작하도록 수정 (이번엔 잘 되겠지?)
- mp4 비디오를 재생할 수 있도록 수정
  mp4 비디오 파일 첨부시 파일명을 _가로x세로.mp4 로 끝나도록 지정하면 됨. (예: test_320_240.mp4)


3. 설치 방법

아래 파일을 다운받고 압축을 풀어 스킨 직접 올리기로 업로드한 뒤 스킨의 헤더 부분을 수정하면 된다.
스킨 수정 방법은 JW Player 도우미 2.1 업뎃을 참조.
(링크가 많아 거창하고 어려워보이지만, 사실 별 거 없음)


2009년 9월 28일 월요일

JW Player 도우미 2.1 업뎃: PDF/PPT 임베딩 기능 추가!

1. JW Player 도우미

JW Player 도우미 플러그인JW Player라는 걸출한 웹 임베디드 미디어플레이어를 간편하게 사용할 수 있게 도와준다.
그런데, 사소한(이라고 쓰고 거대한이라 읽는...) 버그가 하나 있었다. 바로 IE6/7에서 동작하지 않는다는 것이다.
(사실 워낙에 IE 보기를 개처럼 하는지라 아예 테스트해보지도 않았음. Win7+IE8에서 되는 거 보고 걍 패스)



2. PDF 파일의 블로그 임베드

이와는 별도로 그동안 PDF 파일을 블로그에 임베드시키는 방식을 놓고 여러모로 고민을 했었는데, 결국 방향을 정했다.
당연히 Adobe Reader를 설치한 뒤에 이를 브라우저에서 부르는 것이 정석이지만, 이 정석께서는 크롬에서 동작을 안 하신다.

사용자 삽입 이미지

크롬 살려!


원래 이 정석 자체가 약간의 꼼수가 포함된 방식인데다(IE와 FF의 태그 해석 방식이 달라 두 브라우저를 모두 사용할 수 있도록 이상하게 만들어져 있음) 그마저도 HTML 태그에 익숙하지 않은 대부분의 블로거들에게는 결코 쉽지 않은 방식이다.
더군다나 Foxit Reader만 달랑 깔고 사용하는 사용자들에게 Adobe Reader를 깔아달라고 부탁할 수도 없는 노릇이다.
(여전히 Adobe Reader는 느려터졌다. 많이 빨라졌다곤 하지만 그건 지들 생각일 뿐이다)

Scribd에서 PDF 파일을 멋진 뷰어와 함께 게시하는 서비스를 제공하는데, (티스토리 서버가 아닌) 제 3의 서버에 올리는 것이 부담스러워 사용을 꺼리고 있었다.
(인터페이스 및 출력 품질은 이 쪽이 최강임. 사용법은 PDF를 블로그에 삽입할 수 있는 해주는 사이트 참조)

그런데, 구글 도큐먼트 뷰어를 이용하면, 간단하게 임베드시킬 수 있다는 것을 알았다. 얏호!

그래서 이 방식을 이용하는 플러그인을 만들었다.



3. 플러그인 업데이트 및 통합

처음 코딩을 할 때는 두 플러그인이 (당연히) 분리되어 있었다.
그런데, 동작방식이 완전히 동일한 플러그인을 별도로 동작시킬 필요가 없다는 생각이 들었다.
더군다나 서버 쪽이 아니라 클라이언트(자바스크립트) 쪽에서 돌아가는 코드이기 때문에 IE6같은 쓰레기 브라우저에선 미친듯이 버벅댈 가능성이 농후하다.

그래서 아예 둘을 통합시켜버렸다.

이 플러그인을 설치하면 다음과 같은 기능들을 사용할 수 있다.

1. 첨부 비디오(flv) 및 오디오(mp4) 재생 (사용법은 JW Player 도우미 플러그인 1.2 업데이트 참조)
2. 외부 비디오(flv) 및 오디오(mp4) 재생 (사용법은 JW Player 도우미 플러그인 1.5 업데이트 참조)
3. 첨부 PDF 및 PPT 파일 임베드

사용법은 구버전 링크를 참조하면 되며, 설치 방법은 다음과 같다.


a. 관련 파일 업로드

언제나 여기는 동일하다. 아래 파일을 다운받아 압축 풀고, 스킨 직접 올리기를 통해 올리면 된다.



b. 스킨 헤더 수정

스킨 헤더에 아래와 같은 코드를 스킨의 헤더 영역에 삽입하면 된다.
단, 구버전을 사용하는 블로거의 경우 기존 삽입된 코드는 삭제해야 한다.

<script type="text/javascript" src="./images/FLVPDF.js"></script>
<script type="text/javascript">
//<![CDATA[
  FLVPDFHelper.all(
1,
 1,
 680, 500,
 "./images/player.swf",
 "./images/zockrflv.png",
 27,
 "./images/modieus.swf");
//]]>
</script>

기존의 구성에 비해 추가된 것이 5, 6, 7행이다.

- 5행(1) : PDF/PPT 임베딩 기능 사용여부 지정. 0이면 사용하지 않음. 0이 아니면 사용함
- 6행(1) : 미디어 플레이어 임베딩 기능 사용여부 지정. 0이면 사용하지 않음. 0이 아니면 사용함
- 7행(680, 500) : PDF/PPT 임베딩시 폭과 높이 지정. 지정하지 않으면 각각 600, 500으로 자동지정
- 8행~11행은 각각 JW Player 주소, 인각, 스킨 컨트롤 영역 높이, 스킨파일로 플러그인 1.2의 인자들과 동일

이 중 앞의 두 인자 즉, PDF/PPT 임베딩 여부 및 미플 임베딩 여부는 생략할 수 없으며, 나머지 인자들은 생략시 내부 기본값들로 자동 지정된다.



4. 샘플

아래 보는 것과 같다. 역시 구글 킹왕짱인 것이다!




2009년 4월 1일 수요일

innerHTML에서 다시금 느낀 "난 IE가 싫어!"

우리나라의 국민 웹브라우저는 물론 IE입니다.
그것도 문제투성이인 IE6가 이상하게도 IE7을 제치고 점유율 1위입니다.
(IE7은 안정성에 문제가 있어 신뢰성 있는 IE6을 쓴다는 분들을 보면 가슴이 답답합니다)

WP-Cumulus를 TiStory에서 사용할 수 있도록 작업을 하면서보니 FF, 크롬에선 문제없는 코드가 이상하게 IE에서만은 동작하지 않는 문제를 경험했습니다.

그래서 아래의 코드를 innerHTML로 추출해서 눈으로 확인해봤습니다.

<TAG><a href="/tag/123" style="font-size:12pt">123</a></TAG>

아래 화면은 위의 코드를 크롬에서 다시 화면에 띄운 것입니다.
모든 태그와 속성을 소문자로 변환해서 처리한다는 것을 알 수 있습니다.

사용자 삽입 이미지

다음은 Firefox 3.0에서 띄운 화면입니다.
역시 소문자로 변환합니다. 따라서 크롬과 거의 똑같이 처리한다는 것을 알 수 있습니다.

사용자 삽입 이미지

하지만...
IE에서 같은 함수를 돌려보면 결과가 다릅니다.

사용자 삽입 이미지

네. 모든 태그와 속성을 대문자로 처리합니다.

물론 HTML은 대소문자를 가리지 않습니다만, 대문자의 사용은 W3C의 권고사항에도 정면으로 배치되는 것으로 W3C에서는 XHTML을 위해 소문자를 권고하고 있습니다.

이점은 MSDN을 읽어보면 명확해지는데, MSDN에서는 모든 태그와 속성을 대문자로 표시하고 있습니다.


Cumulus의 플래쉬는 (PHP를 통해) 소문자가 입력된다는 가정하게 개발이 되었기 때문에 IE의 javascript에서는 정상동작하지 않았던 것이었던 거죠.
(작업을 쉽게 하기 위해) 모든 대문자를 소문자로 일괄 변환해버리면 태그 자체에도 영향을 미치기 때문에 결국 <A>와 <TAG> 등의 태그만 일일이 소문자로 변환해 문제를 해결했습니다만, IE 덕분에 시간을 낭비한 것을 생각하면...

덧. 이렇게 힘겹게 변환된 티스토리용 Cumulus는 약간의 시험과 변형을 거친 후 공개하도록 하겠습니다.


2009년 3월 27일 금요일

IE8에서야 정상이 되어가는 자바스크립트 엔진. 하지만...

M$에서 Internet Explorer 8.0을 공개했습니다.
하지만, IE8에선 여러가지 문제점이 터지고 있더군요.

저에겐 그 중 하나가 BBCode for TiStory 2.4오동작을 한다는 것이었습니다.
원인을 확인해보니 일관성이 없는 IE의 js 엔진억지로 맞춰놓은 코드가 원인이었습니다.

아래는 HTML 소스 전체를 뒤져서 <div class="bbcode">가 발견되면 발견된 메시지 박스를 띄우는 코드입니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttribute('class') == 'bbcode')
            alert("non MSIE!");
</script>
</body></html>

이 별 특성 없는 코드는 Opera, Firefox, Chrome 에서는 버전에 상관없이 잘 동작합니다.

사용자 삽입 이미지

하지만, 대한민국의 국민 웹브라우저 IE에서는 좀 다릅니다.
IE6, IE7에서는 정상동작을 하지 않습니다.
정확히는 getAttribute() 함수를 씹어먹어버립니다.

오류도 띄우지 않습니다. 그야말로 "아무것도 묻지도 따지지도 않고" 넘어갑니다.

이 코드를 IE6, IE7에서 동작시키려면 아래와 같이 변경해야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    if (/msie/i.test (navigator.userAgent)) { // IE6, 7만을 위하여...
        for (var i = 0; i < tags.length; i++)
            if (tags[i].getAttributeNode('class').value == 'bbcode')
                alert("MSIE!");
    }
    else
    {
        for (var i = 0; i < tags.length; i++)
            if (tags[i].getAttribute('class') == 'bbcode')
                alert("non MSIE!");
    }
</script>
</body></html>

추가된 if (/msie/i.test (navigator.userAgent)) 는 브라우저의 userAgent를 읽어 msie인지 확인하는 부분입니다.
그리고, getAttribute() 함수 대신에 getAttributeNode() 함수를 사용해서 동일하게 동작하도록 만들었습니다.
이렇게 수정하면 IE6, IE7에서도 동일하게 동작합니다.

그런데... 이 코드는 불행하게도 IE8에서는 동작하지 않습니다.

사용자 삽입 이미지

이게 뭐냐고!!!!!!!!!


IE8에서는 getAttributeNode() 함수의 동작방식이 정상적으로 바뀌었기 때문입니다.
IE8을 포함한 거의 모든 웹브라우저에서 정상동작하도록 하려면 아래와 같이 변경해야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttributeNode('class') &&
            tags[i].getAttributeNode('class').value == 'bbcode')
            alert("MSIE!");
</script>
</body></html>

이제야 MS의 웹브라우저가 정상적인 궤도에 가까워졌습니다.

하지만, 이 상태로 만세를 불러줄 수만은 없는 것이... IE6, IE7에만 최적화된 페이지가 너무나 많기 때문입니다.
더불어 이렇게 버그 투성이로 렌더링하는 것이 소위 "호환성 보기"의 실체란 점도 있습니다.

부디 우리나라의 웹 개발자들이 특정 회사의 브라우저에 종속적이지 않고 웹표준을 준수하면 좋겠습니다.
아마 그랬으면 이런 원초적인 버그가 진작에 해결되지 않았을까요?


덧. 이 사태의 진정한 문제는 IE6, IE7 때문에 getAttribute() 함수 자체가 못쓰는 함수가 되었다는 점입니다.



2009년 2월 7일 토요일

웹 브라우저를 통한 인터넷 뱅킹을 없애야 하는 이유

사용자 삽입 이미지

인터넷 뱅킹은 여러가지 편리를 안겨주었습니다.
인터넷 뱅킹 이전에도 폰뱅킹 서비스를 통해 간단한 서비스를 손쉽게 받을 수 있었습니다만, 인터넷 뱅킹이 주는 편리에 비교할 바는 못되었습니다.

그런데, 인터넷 뱅킹은 사실, 인터넷 뱅킹이 아니라 익스플로러 6-7 뱅킹일 뿐입니다.

게다가, 억지로 끼워맞춰진 환경과 법적 책임 덕분에 기형적인 환경 + 엉망진창 ActiveX의 놀이터가 되었습니다.



1. 대부분의 웹브라우저를 지원하지 못하면 인터넷 뱅킹이란 이름은 억지임

인터넷 뱅킹을 사용할 수 있는 환경은 (극소수 은행의 리눅스를 제외하고는) MS 윈도우 + 인터넷 익스플로러 7.0 이하일 뿐입니다.
익스플로러 8.0은 공식적으로는 ActiveX를 포함한 익스플로러 7.0의 기능을 모두 포함하고 있지만, 여전히 일부 뱅킹 사이트에서 제대로 동작하지도 않습니다. (물론 아직 베타테스팅 중입니다)

그나마 윈도우 환경에서는 억지춘향으로 익스플로러를 쓰면 된다지만, 리눅스(그래도 그나마 낫죠), 맥킨토시 등에선 이럴 선택의 여지도 없습니다.



2. 키보드 해킹을 당하면 은행이 책임을 져야한다고?

문제는 키보드 해킹 등의 방식으로 인터넷 뱅킹이 뚫리는 경우 해킹툴이 깔리도록 방치한 사용자가 아니라 인터넷 뱅킹 환경을 구축한 은행에 책임이 있다는 점입니다.

차를 도난당하면 자동차 회사에서 물어줘야 한다는 논리가 되는 것입니다.

그러다보니, 인터넷 뱅킹 환경에서도 키보드 해킹 방지 프로그램을 자동으로 설치해야 하고, 그러려면 ActiveX 외엔 방법이 없는 것입니다.
덕분에 각종 악성프로그램들이 합법적이면서도 강제적으로 PC에 억지로 설치되는 것입니다.



3. 게다가 ActiveX를 통한 인증서는 법적으로 보호를 받게 되었음

사실, 키보드 해킹에 앞서 인터넷 뱅킹 환경을 ActiveX에 고착화시킨 주범은 다름아닌 인증서입니다.

이 인증서가 (개발이 편하다는 이유만으로) ActiveX로만 만들어졌는데, 이게 결국 법정까지 가서 보호를 받는 입장이 되어버렸습니다.
(좀더 정확히는 ActiveX를 통한 인증서가 브라우저 선택권을 박탈당한 것이라는 소송이 기각된 것입니다)



4. 그럼 방법은 없나?

방법은 있습니다. 게다가 이 방법은 사실 많은 은행들이 이미 사용하고 있습니다.
다름아닌 별도의 어플리케이션을 만들어 배포하는 것입니다.

별도의 프로그램을 사용하면 위에 적은 많은 문제들을 해결할 수 있습니다.

키보드 보안 프로그램? 프로그램 내에 모듈로 포함시키면 됩니다. 각종 쓰레기같은 보안 프로그램이 컴퓨터를 느리게 하는 이유는 ActiveX를 통해 PC에 설치되어버린 뒤 항상 동작하기 때문입니다. 그냥 모듈 단위로 만들면 뱅킹을 할 때만 동작하게 할 수 있고, PC는 훨씬 가벼워집니다.

인증서? 인증서에 대한 표준 규약을 다시 만들면 됩니다.
MS 윈도우와 더불어 맥킨토시, 리눅스 등에서도 적용할 수 있는 표준 규약을 만들고 이 규약에 입각한 인증서 모듈을 배포해서 인터넷 뱅킹 프로그램에 포함시키면 됩니다.

게다가 이렇게 하나의 프로그램으로 설치하면 ActiveX를 통해서 수많은 쓰레기 보안 프로그램설치되고 서로 충돌하는 문제를 근본적으로 해결할 수도 있습니다.



5. 익스플로러에서 다 알아서 깔아주는 것보다 불편할 것 같은데?

ActiveX를 통해 자동으로 설치되는 것보다 불편해보일 수도 있습니다.
하지만, 조금만, 0.5초만 더 생각해보면 전혀 아니라는 것을 알 수 있습니다.

익스플로러 7.0은 기본적으로 ActiveX의 설치를 한번 더 통제합니다.

그럼 화면 상단의 노란 바를 클릭해줘야 하는데, 이런 클릭 몇 번이면 다운받아 설치하는 것과 차이가 없습니다.

게다가 익스플로러의 ActiveX는 매 접속시 설치가 진행되지만, 다운받아 설치할 때는 한번만 설치하면 끝입니다.



요즘은 전자정부민원, 연말정산 등의 정부 서비스에서도 ActiveX 공인인증서를 사용하고 있어, 플랫폼 종속은 더욱 심해질 것 같습니다. 인터넷 뱅킹 환경은 언제나 정상화가 될 수 있을까요?


 

2008년 4월 13일 일요일

IE6에서 아무런 문제 없도록 블로그 약간 리뉴얼 + α

원래 블로그 헤더 이미지로 투명 PNG를 사용했습니다.
IE6에서는 투명 PNG를 엉망진창으로 표시하는 문제가 있기는 했지만, ie7-js를 활용해서 IE6에서 투명 PNG를 IE6에서 보이기를 이용해서 무난히 표시했다고 생각했습니다.
(이 방법을 사용하면 화면의 출력은 깨끗하지만, 출력이 약간 느려지는 문제가 있습니다)

하지만, CSS Naked Day에 참가하면서 CSS를 제거한 상태에서 IE6에서 띄워보니 문제가 컸습니다.
네. CSS를 제거했으면 데이터만 빨라당 출력되어야 하는데, 느린 출력이라뇨…

아직까지도 (특히 우리나라에서) 압도적으로 높은 IE6의 점유율을 생각해보면  출력이 늦다는 것은 심각한 문제인데 말이죠.

그리고, 이미지를 바꾸는 김에 몇 가지 생각한 기능들을 추가하기로 했습니다.





1. 헤더 이미지를 투명 GIF로 교체

사용자 삽입 이미지

간결하고 명확한 글꼴을 고민하던 중 스타워즈 글꼴을 이용하기로 했습니다.
위 아래 STARWARS를 넣을까도 했지만, 스타워즈 전문 블로그가 아니라 그건 하지 않았습니다. -.-;;;


2. 링크 예쁘게 만들기

사용자 삽입 이미지

예전부터 LoveBe.Net궁극의 힘을 보면서 언젠가는 훔쳐오려고 노리던 무공비급을 드디어 훔쳐왔습니다.
(아이콘 파일은 약간 바꿨는데, 다행히 주화입마는 피한 것 같습니다. ^^;;;)
상세한 설명은 LoveBe.Net - Tistory 링크 이쁘게 만들기를 참고하시면 됩니다.


3. 이모티콘 삽입기능 보강

사용자 삽입 이미지

역시 LoveBe.Net궁극의 힘을 통해서 알게 되고, 훔쳐온 비급입니다.
이 비급을 적용한 후에 댓글/방명록 이모티콘 표시 플러그인을 적용하면 깜찍한 효과를 볼 수 있습니다.
역시, 상세한 설명은 LoveBe.Net - 이모티콘 삽입 기능을 참고하시면 됩니다.





전세계의 웹에서 널리 사용되고 있는 투명 PNG가 유독, 우리나라에서만은 아직 시기상조인 것 같습니다.
빨리 IE6이 멸종(?)되는 날이 오기를…



 

2008년 3월 9일 일요일

IE8 : ACID2만 통과하면 표준을 잘 준수하는 것인가?

제 블로그의 헤더는 원래 복잡한 <table> 태그로 구성되어 있었습니다.
<div><table>이나 아무거나로 만들기만 하면 된다는 매너리즘으로 중무장해서 만든 결과물이었습니다.
(다들 아시다시피, 현재의 웹은 <table>으로  레이아웃을 잡지 않는 것을 권고하고 있습니다)

물론, IE6/7이나 Firefox은 물론, Opera나 Safari까지의 모든 브라우저들에서 정상적으로 출력되었습니다.

그러다가, 이번에 Internet Explorer 8 beta 1이 나온 것을 보고 돌려봤더니… 제 블로그 헤더가 무참하게 깨져서 나오더군요.


아직 베타버전인 브라우저이기는 하지만, 언젠가는 <table><div>로 바꿀 생각을 했기 때문에 좋은 기회라고 생각하고, 몽땅 바꿨습니다.
덕분에 복잡하게 구성되어 일부 브라우저에서는 늦게 떴던 헤더가 깔끔하게 빨리 뜨도록 바뀌었습니다.

각 브라우저들에서 일일이 띄워본 결과 아무런 문제 없이 뜨는 것을 확인했습니다. IE8만 빼고 말이죠…



이렇게 깨지는 것이 왜 문제가 되냐면…

  1. 제가 사용한 태그는 아주 평범한 <div> 태그입니다.
    <table> 태그를 사용하지 않고, <div>를 사용하는 것이 현재 웹 표준과 IE8의 권고사항인데, 정작 <div>를 제대로 해석하지 못하고 있습니다.
    저는 헤더 전체를 <div position:relative;>로 지정하고, 세부적인 구성을 <div position:absolute;>로 지정해서 배치했습니다.
    #header { position: relative; float: left; width: 938px; height: 154px;}
    #hdrimgban { position: absolute; left:4px; top:22px; width:176px; height:120px;}
    #hdrimgm1 { position: absolute; left:188px; top:98px; width:64px; height:12px;}
    이런 식으로 말이죠. 이걸 제대로 출력하지 못한다니요…

  2. MS는 IE8이 ACID2 테스트를 통과했다고 대대적으로 광고했습니다.
    ACID2 테스트의 중요한 요소 중 하나는 복잡한 <div> 태그를 잘 해석하는가 하는 점입니다.

즉, 그렇게도 <div>를 잘 지원한다고 광고하는 브라우저가 기본적인 <div>를 제대로 렌더링하지 못한다는 것이 말이 안 되는 것입니다.

하지만 여전히 ACID2 테스트는 잘 통과하고 있습니다.
(뭐, 다른 ACID2 테스트를 통과하지 못한다는 문제가 있지만 말이죠…)

얼마전 nVidia에서, 또 예전에는 ATi에서 특정 프로그램에서만 빠르게 동작하는 척하는 드라이버를 출시한 것이 문제가 된 적이 있었습니다. ATi는 심지어 실행파일명을 바꾸면 느리게 동작하는 촌극도 보였더랬죠.

지금 IE8의 행보가 꼭 그 때의 비디오 카드/드라이버 벤더들의 행보와 비슷해보입니다.

계속 브라우저 점유율을 빼앗기고 있고, 표준에 대해서는 항상 말이 많은 MS가 이번에 뭔가 대형 사기극을 펼치고 있는 것이 아닌가하는 우려가 듭니다.

또 아래와 같은 엉터리 HTML의 세상을 만들기 위해 뭔가 음모를 꾸미는 것은 아닐까요?
<html
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:myns="http://internet.com/namespaces/smarttags">
<o:SmartTagType
name="customer"
namespaceuri="urn:schemas-fourth-coffee:contact"
downloadurl="http://www.fourthcoffee.com/download.asp">
</o:SmartTagType>
제발 정식버전에서는 이런 황당한 일이 없기를 빌어봅니다



2008년 2월 22일 금요일

투명 PNG를 IE6에서 보이게 하는 방법 소개 #2 : 쉬운 방법 - ie7-js 활용

사용자 삽입 이미지

투명 PNG를 IE6에서 보이게 하는 어려운 방법에서 적은 내용은 이 글을 적기 위한 서문이었습니다.

google code에서 배포하는 코드들은 여러모로 쓸만하면서도 간결한 것들이 많습니다.
Code Highlighter도 google code에서 배포하는 것을 티스토리에서 활용한 것입니다.

이 중 ie7-js/ie8-js는 css 표준을 IE가 잘 지원하도록 도와주는 유용한 스크립트입니다.

아니, 도와준다기 보다는 css 표준을 잘 준수한다고 최면을 건다는 편이 더 맞습니다. 레드-썬!

간단하게 몇 줄의 코드만 스킨(skin.html)에 추가하면 동작하며 IE 계열의 약점인 표준 미준수 문제를 많이 해결해줍니다.

ie7-js와 ie8-js의 주요 기능은 아래와 같습니다.

  • ie7-js(IE7.js) : MSIE 5,6을 IE7과 같이 동작하도록 최면을 검

  • ie8-js(IE8.js) : MSIE 5-7에서 지원하지 못하는 CSS 기능들을 구현하게 최면을 검
    ※ IE8.js에는 IE7의 기능이 모두 포함되어 있음

이 js 중 하나만 사용하면 투명 PNG 문제를 포함한 CSS와 관련된 여러가지 문제를 해결해줍니다.

사용법은 간단합니다. 아래의 코드를 스킨파일(skin.html)의 헤더에 삽입하면 됩니다.

IE7.js

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
  type="text/javascript"></script>
<![endif]-->

IE8.js

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
 type="text/javascript"></script>
<![endif]-->
※ 앞에도 설명했듯이, IE8.js를 사용할 때는 IE7.js를 사용할 필요가 없습니다.

단, 투명 PNG 파일을 저장할 때 png 파일은 파일명이 반드시 -trans.png로 끝나도록 지정해야 합니다.
스크립트 내에서 -trans.png 파일인 경우만 별도의 렌더러를 호출하도록 해주기 때문입니다.

투명 PNG 외에도 이 스크립트들이 해결해주는 호환성 문제가 꽤 많습니다.
상세한 기능들은 IE7/IE8 시험페이지를 보시면 볼 수 있습니다.

덧, 티스토리에 글을 포스팅할 때는 파일명 문제때문에 정상적으로 투명 PNG를 활용할 수 없습니다.




2008년 1월 30일 수요일

IE를 안전하게 사용하려면 : Sandboxie 소개

Internet Explorer를 믿지 못하는 이유가 크게 둘 있습니다.

  1. 무분별한 ActiveX 설치 및 AX 간의 충돌
    네, 장난 아니죠. 특히 nProtect, XecureWeb(이거 홈페이지 아시나요?) 등은 같은 프로그램끼리도 충돌합니다.

    ActiveX를 이용해서 시스템에 해악을 끼치는 방법도 너무 많이 나와버렸습니다.

  2. css 등의 레이아웃 문제
    IE는 광고와는 달리, 웹 표준 -특히 복잡한 css v2.1-을 충실하게 지원하지 못합니다.


2번은 불편함의 문제지 안정성의 문제는 아닙니다.
하지만, 1번은 정말 심각합니다.


깨끗하게 포맷한 PC에서 PC뱅킹 2군데만 접속해보고나서 설치된 ActiveX를 보면 황당할 지경입니다.

또, 어디선가 날아온 스팸 메일을 실수로라도 클릭하면 "오빠 한가해요~", "조건 만남 환영" 따위의 쓰레기같은 아이콘들이 바탕화면과 시작메뉴를 도배하기도 하구요.


이런 상황을 한칼에 타개하기 위해서 전문가분들은 보통 가상머신을 설치합니다.

가상머신은 VMWare, Virtual PC 등이 주로 사용되는데, 일반 사용자가 설치하기에는 좀 무리가 있습니다.
(사실, 설치하고 보면 그렇게 어렵지는 않습니다)

그러다보니 전문가분들은 가상머신 없이도 안전하게 사용할 수 있지만, 가상머신을 사용하려고 하고,
정작 가상머신이 필요한 비전문 일반사용자는 부담스러운 현상이 발생합니다.

이런 문제를 손쉽게 해결할 수 있는 프로그램이 Sandboxie입니다.

Sandboxie는 이름 그대로, 가상의 모래상자를 하나 만든 뒤에 이 안에서 프로그램을 실행시키는 프로그램입니다.


사용자 삽입 이미지

   

사용자 삽입 이미지

일반적인 윈도우 사용


Sandboxie 설치시


파일을 읽어들일 때는 정상적으로 컴퓨터의 파일을 읽어들입니다.
하지만, ActiveX 설치를 포함하여 파일을 기록할 때는 모래상자를 하나 만들어 기록합니다.
(기본적으로 c:\Sandbox\사용자명\ 에 저장합니다)


즉, 파일을 저장하든지, ActiveX를 설치하든지 또는 시스템 파일을 작살내든지, 또… 뭘 하든지, 지 딴에는 뭔가를 하겠지만, 실제로는 모래상자에서만 일이 벌어지기 때문에 모래상자 밖에 있는 윈도우는 항상 안전합니다.

대단하죠!!

그리고, 이름과는 달리 이 프로그램은 꼭 IE에서만 동작하는 것이 아닙니다.

Firefox 등의 웹브라우저는 물론, 프로그램 설치나 못미더운 프로그램 실행 등, 뭔가 찜찜한 작업을 할 때는 언제라도 사용할 수 있습니다.


덧1. 이 프로그램은 QAOS.com에서 처음 알게 되었습니다. myst님께 다시 한번 감사드립니다.


덧2. cjcj님의 블로그에 상세한 사용기가 올라와있습니다. 새로운 프로그램 설치가 부담되시면 읽어보시면 좋습니다.
       하지만, 이 프로그램은 그냥 고고씽~해서 설치해도 무방합니다. (광고도 없고, 5000% 안전합니다)






2008년 1월 24일 목요일

드디어 이름에 맞는 테마 적용!

블로그 이름은 BLUE로 시작하는데, 정작 테마는 White여서 뭔가 어색해 보였습니다.

며칠간 완전히 헤맨 끝에 blueskin의 배경그림과 지금까지 사용하던 Tistory Studio White의 구성에 이것저것 섞어서 저만의 블루테마를 만들었습니다.

헤더는 몽땅 투명 PNG로 떡칠을 해서 blueskin의 멋진 배경이 그대로 보입니다.
<div> 태그를 잘 쓰지 못해 헤더는 몽땅 <table>의 천국입니다.
※ 3중 테이블까지 썼습니다. 무슨 삼단콤보어택도 아니고…

사용자 삽입 이미지


사용자 삽입 이미지
열심히 투명 PNG로 메뉴를 구성했더니 만만한 웹브라우저는 모두 투명 PNG를 제대로 표시를 못하는군요.
Internet Explorer 7, Firefox 2.0은 물론, ACID2 테스트를 가뿐하게 통과한 Opera 9.0에서도 투명 PNG가 여러장 겹치니까 그림이 조금 깨져보입니다.

내일 메뉴를 다시 투명 PNG로 그려보고, 도저히 안 될 것 같으면 불투명하게 다시 만들던지 해야겠습니다. (현 시각 새벽 3시 30분…)

테마 구성이랑 2차 도메인 설정을 하고 나면 이 블로그의 외형은 자리를 잡아가는 것 같습니다.

이제 많이들 찾아만 오시면 되는데… 이런… 가장 중요한 것이 빠졌군요. 사람들…

※ 투명 PNG 2장이 겹쳐지는 경우 IE7/FF2/Opera 모두 정상적으로 처리하지 못한다는 것을 발견하고는
    아예 AniGIF로 변경했습니다.
    마침 기회가 있어 IE6에서 테스트해봤는데, IE6투명 PNG 처리가 완전히 꽝이군요...
    그래서, javascript 도배를 해서 IE6일 때는 투명 GIF가 뜨도록 했습니다.

2008년 1월 21일 월요일

이제는 더욱 멀어질 것 같은 ActiveX로부터의 독립

사용자 삽입 이미지

Firefox에서도 IE만 걱정하기냣!

우리나라의 인터넷 환경은 상당히 기형적입니다.

지금의 웹 환경은 (초기의 웹 환경과 달리) 공인인증서 서비스를 제공할 수 있는 여러가지 "표준" 기술이 나와있고, 표준 자체발전도 많이 이루어져왔습니다.

하지만, 유독 우리나라에서는 Internet Explorer에서만 완벽하게 동작하는 ActiveX만을 널리 사용하고 있습니다.

열기: ActiveX 관련 Open Web 개념글



현재까지 웹에 대한(그리고 운영체제까지) 정보통신부의 정책은 Linux 클라이언트를 확산시키는 방향이었습니다.


문제는 서비스를 제공하는 방식에 대해서는 정통부의 정책 방향 자체가 존재하지 않았다는 것입니다.

서비스를 제공하는 기관에서는 아무리 정통부가 Linux를 떠들어대도 대다수가 IE를 사용하니까 IE만 잘 지원하도록 만들 수 밖에 없었습니다.
그러다보니, 정보통신부의 산하기관인 우체국에서 운영하는 우체국 뱅킹에서도 ActiveX만 지원하는 웃기지도 않은 일이 벌어지고 있었습니다.

사실 정책 방향은 리눅스 지원이 아니라, 중립성을 갖고 있는 표준을 준수하는 방향으로 했어야 하는 것입니다.

일부 우체국에 가면 인터넷을 자유롭게 이용할 수 있도록 PC 몇 대를 배치해놨습니다.
그런데, 정말 웃긴 것은 여기엔 LinuxFirefox가 설치되어 있어서 인터넷 뱅킹을 사용할 수 없다는 것입니다.
물론, 정보통신부에서 직접 육성을 챙겼다는 공개 S/W도 하나도 깔려있지 않습니다.





정책의 방향이 잘못되어있기 때문에 표준을 준수하는 대부분의 브라우저아닌 IE에서만 동작하는 고급 서비스들이 넘쳐나고 있었습니다.
그런데, 이 정책을 바로잡아야 할 정보통신부가 조만간에 산산조각날 예정입니다.

정통부가 조각나고, 통일된 정책이 없어지면 현재 정책 그대로 진행될 것입니다.
각종 브라우저는 256비트 암호화를 기본으로 지원하는 마당에 128비트 암호화를 위한 ActiveX만 줄창 깔아댈 것이고, 이 ActiveX 간의 충돌은 더 심해질 것입니다.

IE8이 통과했다는 Acid2 소개 : 웹브라우저의 표준준수 시험 사이트에서도 적었듯이 이제 차세대 브라우저의 대세는 웹 표준 준수입니다. 까다로운 css 태그들을 어떻게 잘 적용시킬 것인가가 대세입니다.
브라우저 개발사(Microsoft, Mozilla, Opera 등)들은 웹 표준 준수를 메인으로 광고하고 있습니다.
Web Standard Project는 Acid2 다음 버전인 Acid3 개발에 대하여 언급하고 있습니다.

하지만, 우리나라의 공인인증서 서비스와 이를 기반으로 하는 인터넷 뱅킹, 전자정부 등은 여전히 ActiveX를 사용할 것입니다.
MS 마저도 이건 아니올시다라고 판단한 서비스이지만, 뭐 어떻습니까? 지금까지 만들어 놓은 거 그대로 재활용할 건데…

이제는 ActiveX로부터의 독립이 더 멀어질 것 같습니다. 휴~ Firefox3가 정식으로 출시되면 IETab도 업그레이드 되겠죠? (현재 버전은 Firefox3 beta에서 동작하지 않습니다)

※ SEED를 개발하신 분들께 죄송한 말씀이지만, 업그레이드하거나 W3C 표준으로 등재시킬 의지가 있기는 합니까?



2008년 1월 20일 일요일

블로그팁: 특정 카테고리의 글에만 원하는 내용을 추가하기

QAOS.com 시삽님의 배려로 블로그 본문 맨 위쪽에 QAOS의 최신 정보를 올려두었습니다.
정말 좋은 정보이지만, 컴퓨터와 관련이 없는 글을 볼 때도 올라와있는 것이 다소 어색해보였습니다.
사용자 삽입 이미지

QAOS의 최신 팁들 (4줄 위에 있는 제목 바로 위에 있는 것입니다)


그래서 컴퓨터 관련 카테고리에서만 이 정보를 띄우는 방법을 찾았습니다.
특정 카테고리에서만 원하는 내용을 출력하려면 태터툴스 치환자javascript를 함께 사용해야 합니다.

일단, 위의 정보를 출력하기 위한 코드는 아래와 같습니다.
사용자 삽입 이미지
※ 이 코드는 공식적으로 배포된 코드가 아니기 때문에 주소는 지웠습니다.

태터툴즈(및 태터 기반의 티스토리)에서는 치환자를 이용해서 각종 제어가 가능합니다.
이 중 카테고리의 치환자는 [##_article_rep_category_##]입니다.

제 블로그의 카테고리중 컴퓨터 관련 사항은 모두 컴퓨터야그 카테고리 아래에 들어있습니다.
즉, 치환자를 통해 카테고리를 읽어내어 컴퓨터로 시작하는 경우에만 위의 코드를 출력하도록 하면 되는 것입니다.

그렇게 수정된 코드는 아래와 같습니다.
사용자 삽입 이미지

여기서 주의할 점은 아래와 같습니다.

  1. [##_article_rep_category_##] 치환자는 s_article_rep/entry 내부에서만 동작함
    동작 여부는 alert("[##_article_rep_category_##]"); 코드로 미리 확인해야 합니다.

  2. document.write로 코드 출력시 태그 문자(" ' /)는  모두 역슬래쉬(\)를 붙일 것
    스크립트 코드를 출력하는 경우(</script>가 있음)는 브라우저 별로 해석하는 방법이 다릅니다.

  3. 작업이 종료될 때 까지 원래의 코드는 주석처리하고 지우지 말 것


이렇게 하면 모든 작업이 끝나는 줄 알았습니다만…
IE7에서는 문제가 발생합니다. 아래와 같이 비정상적으로 출력됩니다.
사용자 삽입 이미지

허걱! 빌 형 왜이러오…



내부의 스크립트 실행 결과는 일정 내용을 출력해서 HTML에 끼워넣는 것인데, 여러모로 검토해본 결과 IE가 이 끼워넣는 작업javascript 실행 종료 이후에 하는 것이 문제의 원인임을 확인했습니다.

즉, <fieldset>~</fieldset> 태그 사이에 집어넣도록 만들었는데, </fieldset> 뒤에다 붙이도록 동작하는 것입니다.

(이건 명백히 IE7의 버그입니다)

이 문제를 해결하려면 위의 코드를 둘로 쪼개서 해결해야 합니다.
이 문제가 해결된 코드는 아래와 같습니다.
사용자 삽입 이미지

아래와 같이 IE에서도 FF와 같이 정상적으로 출력되는 것을 확인할 수 있습니다.
사용자 삽입 이미지


2008년 1월 17일 목요일

블로그 헤더 리뉴얼 중 발견한 FireFox 버그 하나

FireFox와 IE를 동시에 테스트하면서 FireFox의 <img> 태그의 버그를 하나 발견했습니다.

(결과적으로 사용하지는 않았지만) 헤더에 있는 4가지 메뉴에 onmouseover 이벤트에서 이미지를 바꾸는 기능image map을 동시에 적용해봤습니다.

즉, 아래와 같은 코드를 적었습니다.

<img src="./images/02a3.png" width="68" height="20" name="m1"
   onmouseover
="document.m1.src='./images/02a4.png'"
   onmouseout="document.m1.src='./images/02a3.png'" usemap="#_m1">
이 코드에서 사용하려는 기능은 다음 2가지 입니다.

  1. 마우스 커서가 올라가면 02a3.png를, 그렇지 않으면 02a4.png를 보여줌

  2. 마우스 커서가 올라가거나 클릭하면 _m1 이미지 맵에 따라 동작

그런데, 이 코드를 적용해보면 FireFox 2.0에서는 이미지 교체(1번)가 동작하지 않습니다.
"공공의 적" Internet Explorer 7.0에서는 두 기능 모두 정상동작 하고 말이죠.

물론, onmouseover와 usemap을 각각 따로 적용해보면 잘 동작합니다.
그렇다면 결론은, FireFox의 img 태그의 버그라는 것이죠.





그리고, 오랜만에 블로그 헤더를 리뉴얼했습니다. 무려 사흘씩이나 걸려서요…
블로그의 테마를 직접 만들 내공은 안 되지만, 그렇다고 있는 테마에 그림만 바꿔넣기는 싫어서 헤더를 직접 고쳤습니다.

Animated GIF를 이용해서 린이짱이가 티격태격하는 장면을 무한반복으로 만들어넣었는데, 정적인 것 보다는 더 나은 것 같습니다.

이 외에도 이번 리뉴얼에 살짝 바꾼 내용은 아래와 같습니다.

  1. (앞에 언급한) 린/짱의 쌈 장면 AniGIF로 붙임

  2. 헤더로 옮긴 Media/Guestbook/Admin/Newpost에 onmouseover 이미지 변경 기능 부여

  3. rss도 AniGIF로 만들어 약간 반짝이게 수정

  4. Line Calendar의 부활


※ 헤더 전체를 몽땅 표(table)로 만들어서 구현했는데, 모든 좌표를 종이에 일일이 적어서 그려냈습니다. 휴~


2007년 12월 27일 목요일

IE8이 통과했다는 Acid2 소개 : 웹브라우저의 표준준수 시험 사이트

웹브라우저의 표준 준수 여부를 시험하는 공식적인 방법은 없습니다.
하지만, 웹 표준 준수를 시험하는 방법(사이트)은 있습니다. : The Web Standard Project

Acid2는 투명 PNG, 절대좌표, 여백, CSS 등에 대해서 종합적으로 한방에 테스트해주는 방식입니다.

사용자 삽입 이미지
여기를 클릭하시면 현재 사용중인 브라우저가 웹 표준을 잘 준수하는지 여부를 간단하게 확인해줍니다. 표준을 잘 준수하는 경우에는 오른쪽 그림과 같은 웃는 얼굴이 표시되지만, 그렇지 않은 경우에는... 얼굴이 제대로 보이지 않고 깨져보입니다.

좀더 자세한 내용이 궁금하면 여기를 클릭하면 됩니다. 상세하게 각 줄마다 어떤 기능을 테스트하는지를 설명해줍니다.

저는 Firefox2과 IE7(IETab 확장 활용)을 사용하는데, 두 브라우저 모두 만족할만한 결과를 보여주지 못하고 있습니다.

  • IEBlog에 따르면 최근 개발중인 IE8Acid2를 통과했다고 합니다.
    IE가 표준을 잘 준수하지 못한다는 비난을 조금은 덜 듣겠군요

  • Firefox 3.0 beta2를 설치해본 결과 Acid2를 통과합니다.
    차세대 브라우저의 경쟁 기준 중 하나는 웹 표준 준수가 될 것 같습니다.