브라우저 호환성

IE를 이용해서 내 블로그에 등록된 글을 보다가 갑자기 좌측 메뉴가 밑으로 밀리는 현상을 발견하게 되었다. 문제의 원인을 찾느라 HTML소스 코드를 한참 뒤져봤는데, 문제는 이미지 폭이였다.

Firefox나 Apple의 Safari같은 경우 이미지 폭이 블로그 본문 폭을 넘어서면 자동으로 그림을 줄여준다. 그 품질은 브라우저 마다 플랫폼 마다 다른 것 같다. 맥에서는 이미지가 깨지지 않고 자연스럽게 줄어든다. 맥에서 이미지를 렌더링하는 API가 렌더링 크기에 맞게 이미지를 scaling해주는 것 같다. 문제는 IE인데, 원래 크기로 이미지가 나타나는데, 그 크기가 블로그 본문을 넘어서면 메뉴가 이미지를 피해 본문 뒤로 밀리는 것이다. 기존처럼 Table 태그를 이용해서 전체적인 윤곽을 잡았다면 이런 현상은 없겠지만, 워드프레스는 CSS를 이용해서 전체 윤곽을 잡기 때문에, 이미지와 메뉴를 같은 영역에서 표시할 경우, 브라우저 마다 다르게 렌더링 되고 있는 듯 보인다.
사실 XHTML, CSS 스펙을 아무리 잘 정의해도 이를 화면에 그려낼 때는 사소한 부분에 구멍이 생기게 마련이다. 이 경우 가장 대중적인 브라우저를 렌더링 방식을 모방하게 되는데, 지금은 사정이 그렇지 못한 것 같다. 대부분의 공개 소프트웨어가 Firefox를 기반으로 개발되다 보니 오히려 미묘한 부분에 있어서 IE에서 문제를 일으키고 있다. 물론 IE가 CSS 풀스펙을 지원하지 못해 생기는 문제일 수도 있다.
미묘하지만 이러한 브라우저 호환성은 실제 컨텐츠를 개발할 때 늘 문제거리가 되고 만다.

TV 제품 마다 다르게 방송신호를 보내거나 영상을 만들어한다고 생각해보자. 가정마다 TV를 채널별로 갖고 있을 수도 있다. 무척 우스운 일 처럼 보이지만 실제 웹을 두고 이런 일이 벌어지고 있다. 표준화가 어렵기는 하지만 조금만 욕심을 버리고 기술의 표준화를 통해 웹의 접근성을 높였으면 좋겠다. 특정 컨텐츠를 이용하기 위해 또 다른 컴퓨터를 켜는 일은 더 이상 없어야 할 것이다.