• 2007/10/01  

기사출처 : http://www.mydigitallife.info

1. 디자인 중인 웹 사이트의 웹 페이지가 방문자들이 사용 중인 여러 종류의 웹 브라우저에서 왜곡 없이 잘 보이는지를 테스트하는 쉬운 방법에 관한 글입니다.

2. 세계 각처의 구석구석의 방문자들은 수많은 각기 다른 종류와 버전의 웹 브라우저를 통하여 사용자가 구축한 웹 사이트나 블로그를 들여다 보게 됩니다.

3. 더욱이 각 방문자가 사용하고 있는 디스플레이 장치도 다를 뿐만 아니라 그 해상도도 제각각입니다.

4. 따라서 최소한 이러한 복잡한 환경 하에서 웹 디자이너는 가급적 폭넓은 조건을 수용할 수 있는 최적의 레이아웃으로 웹 페이지를 디자인하도록 노력하게 됩니다.

5. 이 외에도 일반적인 현상이나 문제가 발생하는 것은 이종의 Operating System Platform이라는 측면도 있습니다.

6. 그리고 나타나는 문제점도 화면 디스플레이의 왜곡을 포함하여 페이지 디자인 구성 요소의 뒤섞인 배치, 왜곡된 화면 표시, JavaScript 오류 등도 나타납니다.

7. 그러나 현실적으로 극히 제한된 테스트 환경을 만들기 위한 Virtual Machine 류의 프로그램을 설치하여 테스트하는 등 소극적인 방법은 동원 가능할런지 모르지만, 웹 다자인 시에 이러한 모든 변수를 고려한 전역적인 테스트는 불가능합니다.

8. 그러나 길은 있으며, 여기에 좋은 대안으로 BrowserShots.org의 웹 마스터와 블로거를 위한 손쉬운 오픈 소스의 온라인 서비스가 있습니다.

9. 이 온라인 서비스에서는 각기 다른 웹 브라우저 상에서의 사용자의 웹 디자인을 스크린샷으로 만들어 줍니다.

10. 이 사이트를 방문하여 사용자의 웹 주소(각기 다른 웹 브라우저에서 그 사이트가 어떻게 보이는지를 테스트하고자 원하는 URL Link Location)를 제공하면 됩니다.

11. 사용자가 입력한 웹 주소에 의한 작업 큐가 추가되면, 분산된 컴퓨터가 사용자 입력의 웹 사이트나 URL을 열어 그 화면을 캡쳐하여 스크린 샷을 만들고 클라이언트 컴퓨터는 이를 BrowserShots.org의 중앙 서버에 업로드하여 결과적으로 사용자는 자신의 웹 사이트나 블로그가 이종의 다른 웹 브라우저에서 디스플레이 되는 상황을 볼 수 있게 되는 것입니다.

12. 아래 링크에서 사용자 웹 사이트나 블로그를 테스트할 수 있습니다.

    BrowserShots.org

13. BrowserShots는 다음에 열거하는 웹 브라우저의 에뮬레이션을 제공합니다.

    BonEcho 2.0, Dillo 0.8,
    Epiphany 2.14/2.18,
    Firebird 0.6/0.7,
    Firefox 1.0/1.5/2.0,
    Flock 0.7/0.9,
    Galeon 2.0,
    GranParadiso 3.0,
    Kazehakase 0.4,
    Konqueror 3.5,
    Minefield 3.0,
    Mozilla 1.0/1.1/1.2/1.3/1.4/1.5/1.6/1.7,
    Navigator 4.8,
    Opera 9.23,
    Phoenix 0.2/0.3/0.4/0.5,
    SeaMonkey 1.0/1.1/2.0 in Linux,
    Firefox 1.5/2.0,
    Internet Explorer (MSIE) 5.0/5.5/6.0/7.0,
    Safari 3.0 in Windows and Firefox 2.0,
    Safari 1.3/2.0 in Mac OS.

14. BrowserShots은 접속자가 스크린 사이즈와 Color Depth를 선택할 수 있도록 하며, Javascript의 Enable, Disable 선택과 시뮬레이션 중의 Java와 Flash 서포트 여부도 선택할 수 있습니다.