언어 설정과 JavaScript 지원 같은 다양한 웹 브라우저 기능들 때문에 웹 애플리케이션들이 브라우저 마다 다르게 작동한다. 브라우저들 간 일관성이 부족하기 때문에 애플리케이션 모양이 엉망이 되고, 고장도 일으킨다. 이 글에서 이러한 문제들을 해결할 수 있는 유용한 팁을 설명한다.

다양한 종류의 브라우저 다루기

웹 페이지들이 어디에서나 작동할 수 없는 가장 큰 이유는 다양한 종류의 브라우저들이 다른 표준들을 지원하기 때문이다. 이러한 문제를 극복하는 최상의 방법은 공통 애트리뷰트와 메소드만 사용하는 것이다. 하지만, 가끔은 특별한 코드를 작성해야 한다.

innerText 애트리뷰트 구현하기

innerText 애트리뷰트를 사용하여, Microsoft® Windows® Internet Explorer®에만 정의된 객체의 시작 및 종료 태그 사이에 있는 텍스트를 설정 또는 가져올 수 있다. 이 애트리뷰트가 널리 사용되지만, 표준 애트리뷰트는 아니다. 대신, innerHTML을 사용할 수 있지만, 이것은 같은 것이 아니다. innerText 애트리뷰트는 자식 노드의 텍스트를 직접 가져올 수 있는 기능 같은 특별한 기능이 있는데, 이로서 코드가 더 깨끗해진다. innerText를 사용하는 레거시 페이지도 생길 수 있다. innerText 애트리뷰트를 구현함으로써, 이러한 페이지들이 더 많은 브라우저들을 지원하도록 할 수 있다. 예를 들어, Mozilla 기반 브라우저에서 애트리뷰트를 구현해야 한다. Listing 1은 그 방법이다.

				
HTMLElement.prototype.__defineGetter__ 
(
   "innerText",function()
   //define a getter method to get the value of innerText, 
   //so you can read it now! 
   {
      var textRange = this.ownerDocument.createRange();
      //Using range to retrieve the content of the object
      textRange.selectNodeContents(this);
      //only get the content of the object node
      return textRange.toString();
      // give innerText the value of the node content
   }
);

스크롤 값과 창 크기 알기

대부분의 웹 애플리케이션은 창 크기와 스크롤 값 같은 기하학적 값을 필요로 한다. 하지만, 브라우저는 이러한 값들을 다른 애트리뷰트로 저장할 수 있다. 일부 애트리뷰트는 같은 이름이지만 의미는 다르다. 자신만의 고유 변수를 만들어서 애트리뷰트 값을 나타내는 것이 더 낫다. Listing 2는 대부분의 브라우저에서 유일한 애트리뷰트를 구현하는 방법이다.

				
var scrollLeft,scrollTop;
// scrollLeft: The distance between the horizontal scrollbar 
// with the left edge of the frame.
// scrollTop:  The distance between the vertical scrollbar
// with the top edge of the frame. 

// Get the scroll value from different browsers.
// Determine the browser type first. 
// And then get the value from the particular property.		
if (window.pageYOffset){  
	scrollTop = window.pageYOffset 
} else if(document.documentElement && document.documentElement.scrollTop){ 
	scrollTop = document.documentElement.scrollTop; 
} else if(document.body){ 
	scrollTop = document.body.scrollTop; 
} 

if(window.pageXOffset){ 
	scrollLeft=window.pageXOffset 
} else if(document.documentElement && document.documentElement.scrollLeft){ 
	scrollLeft=document.documentElement.scrollLeft; 
} else if(document.body){ 
	scrollLeft=document.body.scrollLeft; 
}


var windowWidth,windowHeight; // frame width & height

if(window.innerWidth){ 
	windowWidth=window.innerWidth; 
} else if(document.documentElement && document.documentElement.clientWidth){ 
	windowWidth=document.documentElement.clientWidth; 
} else if(document.body){ 
	windowWidth=document.body.offsetWidth; 
} 

if(window.innerHeight){ 
	windowHeight=window.innerHeight; 
} else if(document.documentElement && document.documentElement.clientHeight){ 
	windowHeight=document.documentElement.clientHeight; 
} else if(document.body){ 
	windowHeight=document.body.clientHeight; 
}

양방향 언어의 창의 시작점

아랍어와 히브리어 같은 일부 언어들은 양방향 언어로 알려져 있다. 오른쪽에서 왼쪽으로 읽혀지는 것을 의미한다. 현재 브라우저는 오른쪽에서 왼쪽으로 콘텐트를 보여주는 기능을 지원한다. 하지만, 페이지가 오른쪽에서 왼쪽으로 보여지면, Internet Explorer는 창의 다른 시작점을 정의한다. 시작점은 캔버스의 왼쪽 코너에 없다. 대신, 보이는 부분의 왼쪽 코너에 있다. 다시 말해서, 페이지의 일부는 음수 x 값을 가질 수 있고, 페이지의 일부 엘리먼트가 잘못된 위치에 나타날 수 있다. 그림 1은 페이지가 왼쪽에서 오른쪽으로 보여질 때, Internet Explorer에 시작점이 어디에 있는지를 보여주고 있다.

페이지가 Internet Explorer에서 오른쪽에서 왼쪽으로 보여지면 계산을 다시 해야 한다. 최초 시작점으로 엘리먼트의 위치를 조정한다.

멀티라인(multiline) 트리 뷰 리스트

<ul>과 <li> 태그를 사용하여 트리 뷰 리스트를 보여준다. 하지만 Mozilla 기반 브라우저에서는 다른 엘리먼트들을 <li>에 삽입할 수 없으므로, 단순한 리스트 아이템만 가질 수 있다. 이 문제를 해결하려면, 테이블을 사용하여 트리 뷰 리스트를 만들 수 있다. LI 대신 TABLE을 사용하여 아이템을 구현함으로써, 복잡한 아이템을 가질 수 있다.

하지만, TABLE이 여러 칼럼을 갖고 있으면 다시 문제가 생긴다. 마우스로 창을 조절하면 그림 2와 같은 페이지가 만들어진다.

그림 3은 프레임을 조절할 경우 페이지 모습이다. 칼럼에는 더 이상 격자가 없다.

트리 뷰의 테이블에서, 넓이를 TD로 할당하지만, 잘 작동하지는 않는다. TD의 넓이는 최대 사이즈만을 의미하기 때문에, 브라우저는 TD를 조절하여 창을 조절할 때 더 많은 콘텐트가 보이도록 해야 한다. 조직화된 모습을 보이려면 DIV가 필요하다. (이 글에서, DIV, TABLE, TD는 DOM 트리의 노드들을 나타낸다. 물론, 이들을 HTML 태그로 다룰 수도 있다.

DIV가 비슷한 문제를 일으킨다는 사실을 바로 알게 된다. DIV의 넓이는 절대값이 아니라, 최소 넓이다. 윈도우 크기를 변경하면, 일부 브라우저들은 DIV의 넓이를 변경할 수도 있다. TD와 DIV를 결합한다면? DIV를 TD에 중첩시키면, 셀의 최대/최소 크기가 정의된다. 이제 고정된 사이즈가 생겼다. (그림 4)

위로

여러 언어 처리하기

애플리케이션이 여러 언어를 지원할 경우, 다른 언어로 된 같은 텍스트의 길이는 달라지고, 이는 페이지 모습을 엉망으로 만든다. 텍스트를 포함하는 DIV를 조율하면 이 상황에 도움이 된다.

DIV에 올바른 사이즈 정의하기

DIV를 사용하여 팝업 메뉴를 그린다고 해보자. 메뉴에 고정된 크기를 정의하지 않으면, 페이지를 스크롤 할 때 문제가 생긴다. (그림 5)

보다시피, 텍스트가 오버플로우 된다. Internet Explorer는, DIV가 고정된 사이즈를 갖고 있지 않으면, 보이는 부분의 크기에 DIV를 자동으로 준다. 따라서, 보이지 않는 부분을 보기 위해 페이지를 스크롤링 하면, DIV가 충분히 크지 않으면, 텍스트 오버플로우 현상이 발생한다. 이 문제를 해결하려면, DIV에 고정된 크기를 정의해야 한다.

사이즈를 다루는 방법을 알아야 한다. DIV에서 텍스트의 길이는 다중 언어를 지원한다면 고정되지 않기 때문에, 사이즈를 하드 코딩 할 수 없다. 텍스트 길이를 동적으로 받아서, DIV의 크기를 설정한다. 이때 테이블이 도움이 된다. 테이블의 크기는 가시성과 무관하다. Listing 3은 DIV에 알맞은 넓이를 주는 모습이다.

				
var leftmenu = document.getElementById("leftmenu");
var divWidth = parseInt(document.getElementById("divtable").offsetWidth);
leftmenu.style.width = divWidth  +"px";

위로

다른 브라우저 설정 처리하기

문제는 다른 브라우저와 언어에서뿐만 아니라, 사용자들에게서도 기인한다. 사용자들은 브라우저에 특별한 설정을 할 때 문제를 야기시킨다. 예를 들어, JavaScript 기능을 중지시키면 애플리케이션에 문제를 일으킬 수 있다.

JavaScript를 지원하지 않는 브라우저 지원

일부 사용자들은 여전히 오래된 브라우저 버전을 사용하고, 일부는 브라우저에서 JavaScript를 중지시키면, 웹 페이지는 잘못 디스플레이 된다. 이를 해결하기 위해, <noscript> 태그를 사용할 수 있다. 태그에 텍스트를 추가하여 브라우저가 JavaScript를 지원하지 않으며, 페이지를 정확하게 볼 수 없다는 것을 사용자에게 알려준다. Listing 4는 여러분이 사용할 코드이다.

				
<html>
	<head>
	<noscript>
		Your browser does not support JavaScript, 
		or you've disabled the JavaScript in your browser, 
		so you cannot view this page correctly.
	</noscript>
	</head>
</html>

더 나은 솔루션은 JavaScript에 의존하지 않는 또 다른 버전의 웹 애플리케이션을 제공하는 것이다. JavaScript를 지원하는지의 여부와 관계 없이, 여전히 애플리케이션을 사용할 수 있다. 아래 Listing 5의 코드를 사용하여 사용자를 비-스크립트 버전으로 돌릴 수 있다.

				
<noscript>
	<meta HTTP-EQUIV="REFRESH" CONTENT="0;URL=noscriptversion.jsp?">
</noscript>

위로

요약

Mozilla 기반 브라우저에서 innerText 애트리뷰트 구현하는 방법, 기하학적 값을 나타내는 변수를 사용하여 모든 브라우저에 나타내는 방법, 페이지가 Internet Explorer에서 오른쪽에서 왼쪽으로 보일 때 최초 출발점으로 엘리먼트의 위치 조정하는 방법을 설명했다. 또한, 멀티 라인 트리 뷰 리스트를 얻는 방법, DIV 엘리먼트에 올바른 사이즈를 설정하는 방법, JavaScript를 지원하지 않는 브라우저를 지원하는 방법도 설명했다. 이 팁이 여러분에게 도움이 되었기 바란다.

기사의 원문보기

• Adapt Web applications to work with multiple browsers

참고자료

교육

• The cranky user: Curbing JavaScript dependency (Peter Seebach, developerWorks, March 2001)
  
  
• JavaScript and the Document Object Model (Nicholas Chase, developerWorks, July 2002)
  
  
• A cross-browser DHTML table (Shelley Saxena, developerWorks, May 2001)
  
  
• World Wide Web Consortium (W3C)
  
  
• Mozilla
  
  
• Technology bookstore
  
  
• 디벨로퍼웍스 웹 개발 존 (한글 페이지): Web 2.0, Ajax, wikis, PHP, mashups, 기타 웹 프로젝트의 참고자료
  
  
• developerWorks technical events and webcasts
  
  

제품 및 기술 얻기

• IBM trial software 다운로드 (한글 페이지)
  
  
• developerWorks Web Development Downloads and products area
  
  

토론

• developerWorks blogs developerWorks community (한글 페이지)!
  
  

필자소개

아티클 순위

의견

위로

목차

• 다양한 종류의 브라우저 다루기
• 여러 언어 처리하기
• 다른 브라우저 설정 처리하기
• 요약
• 참고자료
• 필자소개
• 의견