사용자의 모니터 해상도는 웹 페이지의 디자인을 근본적으로 바꿔버릴 수도 있다. 디자인 기술을 향상시켜야 된다. 모니터의 해상도 문제를 해결하고 모든 사람들이 보기좋은 웹페이지를 만드는 방법을 배우자.웹디자인에서 가장 자주 간과되는 요소 중의 하나가 모니터의 해상도이다. 대부분의 웹페이지가 모든 화면 해상도 범위에 잘 맞지만 어떤 웹페이지는 제작자가 의도한 특정 해상도 외의 다른 해상도에서 보면 아주 혼란스러운 경우가 있다. 해상도란 무엇이고 왜 주의해야 하는가?해상도란 화면을 구성하는 픽셀의 크기를 말한다. 만약 모니터가 몇 년 정도 지난 것이라면 그 컴퓨터는 640 × 480픽셀로 구성되어 있을 것이다. 새로운 모델일수록 일반적으로 600 × 800또는 1024 × 768 정도의 고해상도를 유지하고 있다. 어떤 것은 1600 × 1280인 것도 있다.만약 다른 여러가지 해상도에서 웹 페이지를 보면 사물이 크거나 작게 보인다는 것을 알 수 있을 것이다. 가로 640 픽셀 크기의 그래픽은 전체 넓이 640×480의 화면에 딱 맞을 것이다. 하지만 1600×1280 해상도에서 보면 화면의 반도 차지하지 않을 것이다. 갑자기 빈 공간이 많아질 것이다. 웹 페이지 디자이너들은 대체로 모든 것을 조심스럽고 정확하게 배치하기 위해서 넓은 공간을 이용한다. 그런데 그때 만약 화면의 해상도를 고려하지 않았면 디자이너와 똑같은 해상도를 가진 사람들만 디자이너가 의도한대로의 페이지를 볼 수 있을 것이다. 모니터를 저해상도로 설치해놓은 사람들은 작은 공간에 모든 것을 막 쑤셔놓은 듯이 보일 것이고 반면에 고해상도로 설정해놓은 사람들은 그 페이지가 심하게 펼쳐진 것처럼 보일 것이다. (편집자주: 이 기사의 모든 도안과 코드의 견본은 2번째 창에서 팝업 메뉴로 뜰 것입니다.)그림 A와 그림 B는 이런 해상도의 차이에서 생겨나는 간단한 예를 보여 준다. 스키피(Skippy)는 640×480화면에서 웹 페이지를 만들어서 잘 보인다고 생각했다. 불행히도 그는 고해상도를 유지한 사람들은 모든 것이 위쪽 반화면에만 나타나고 바닥의 반쯤은 빈 공간으로 남겨져서 결과적으로 그 페이지가 빈약해 보인다는 사실을 몰랐던 것이다. 여러 해상도에서 배치를 확인하자. 결론은 이것이다. 웹 페이지의 배치가 중요하다면 모든 것이 제대로 보이는지 확인하기 위해서 여러가지 화면해상도에서 확인할 필요가 있다. 한가지 방법은 간단히 직접 화면의 디스플레이를 바꿔보는 것이다. 윈도95라면 컴퓨터의 하드웨어가 지원하는 최대 해상도나 그 이하의 해상도로 바꾸어 볼 수 있다. 간단히 제어판을 열어서 디스플레이를 클릭하고 세팅 탭을 누르기만 하면 된다. 그리고 배경화면의 활성창을 끌어서 해상도를 조정한다. 그림 C는 대화상자가 어떻게 보이는 지 보여준다. 이 방법은 모든 것이 다 제대로 됐는지 확인하고 페이지를 웹 서버에 업로드하기 전에 마지막으로 확인하는 경우에 쓰면 좋다. 그렇지만 수정할 것이 많으면 시간이 많이 걸릴 위험이 있다. 먼저 할 일 하나는 일정한 넓이로 정의된 테이블에 모든 것을 집어넣는 것이다. 필요한 HTML코드는 예를 들어 다음과 같다:
넓이="640" 이라는 구문은 사용자의 화면 해상도에 상관없이 테이블을 640픽셀 크기의 넓이로 만들어준다. 이것은 모든 사람들이 똑같은 레이아웃을 보게 된다는 것을 의미한다. 하지만 이것도 나름대로 문제가 있다. 고해상도로 설정해놓은 사용자들이라면 테이블의 한 쪽에 빈 공간이 생기게 된다. (만약 중심에 오도록 했으면 양쪽에 여백이 생긴다.) 어떤 경우에는 이렇게 하면 괜찮을 수도 있지만 모든 사람들의 문제를 해결할 수 있는 근본적인 해결책은 아니다. 만약 내용의 일부를 테이블에 미리 넣었다면 결과적으로 그 테이블 안에 또 테이블이 들어가게 되는 것이다. 대부분 유명한 브라우저들은 이 문제를 해결할 수 있지만 확실하게 모든 것을 제대로 만들려면 HTML 코드를 짤 때 주의해야 한다. 단순한 텍스트 편집기를 써서 손으로 직접 웹페이지의 코드를 짜는 디자이너들은 이것을 특별히 고려해야 한다.또한 테이블의 전체 내용이 다운로드되기 전까지는 어떤 텍스트도 브라우저를 통해 보이지 않는다는 사실을 기억해야한다(테이블의 전체 내용이 다운로드 된 뒤에야 텍스트의 내용이 브라우저를 통해 보인다는 것을 기억해야 한다). 텍스트의 내용이 많은 경우에는 사이트의 방문자가 내용을 읽기도 전에 오래 기다려야 될 가능성이 있다. 이 문제는 텍스트를 (전체) 640픽셀 크기의 더 작은 테이블들로 나누는 방법으로 풀 수 있다.
측정기훨씬 더 좋은 방법은 Brian Apps의 홈페이지를 방문해서 측정기를 다운받는 것이다. 측정기는 다른 해상도에서 화면이 어떻게 나타나는 지를 보여주는 성능 좋은, 작은 무료 소프트웨어이다. Brian Apps의 홈페이지 주소는 http://www.bath.ac.uk/~ensba/. (그 사이트가 현재는 다운이 되는 것 같다. http://hotfiles.zdnet.com/cgi-bin/texis/swlib/hotfiles/info.html?fcode=000S3G에 가도 같은 측정기를 구할 수 있다.) 측정기를 작동시키면
그림 D에서 보이는 사방 화살표 모양의 아이콘이 시스템 상자에 장착된다. 그 메뉴를 활성화시키려면 그 측정기의 아이콘을 오른쪽 마우스로 클릭하면 된다. 보다시피 그 메뉴는 표준 화면 해상도에 맞는 크기를 선택하게 해준다. 원하는 해상도를 클릭하면 측정기가 현재의 활성창을 선택한 크기로 만들어준다. 이 측정기는 화면의 해상도를 바꾸지는 않지만 선택한 해상도에서 최대로 확대된 모습을 보여준다.
표준 사이즈는 없다.측정기의 가장 분명한 용도는 웹페이지 개발이지만 모든 윈도95 애플리케이션에서도 유용하게 쓸 수 있다. 조사에 의하면 측정기가 동일한 창의 크기에서 여러가지 화면의 사진을 보려는 사람에게도 유용하다. 또한 화면의 기준 해상도가 아닌 다른 크기의 창도 만들 수 있다. 메뉴의 옵션인 [Configure Menu..]를 간단히 클릭만 하면
그림 E에서 보이는 대화 상자가 뜬다. 당신의 맞춤 크기에 이름을 붙이고 측정기에 원하는 크기를 말해보라. 보다시피 738×321의 [맞춤1번] 이라는 이름의 자기만의 크기가 만들어졌다.
주의 사항실제로 해상도를 바꾸는 것보다 측정기를 쓰는 것이 훨씬 더 빠르고 편리하지만, 몇 가지를 유념해야 한다. 첫째, 가지고 있는 하드웨어의 최대 해상도보다는 창을 더 크게 만들 수 없다. 다시 말해서, 모니터의 크기가 640×480인 경우 더 높은 해상도에서 보려고 하면 더 큰 해상도를 지원하는 좀 더 최신 시스템에서 웹 페이지를 보아야 한다는 뜻이다. 둘째, IE나 넷스케이프 같이 주로 사용되는 브라우저들은 글씨의 크기를 재조정하는 기능이 있다. 시력이 나쁜 사람들은 텍스트를 잘 보려고 글자 크기를 늘릴 수 있다. 어떤 사람들은 화면에 더 많은 것들을 담아두고 보기 위해서 글씨 크기를 줄이기도 한다. 그렇게 되면 웹 페이지를 만든 것이 보기 좋지않게(이상하게) 된다. 당연히 사람들의 성향은 조절할 수 없다. 그러나 여러가지 해상도에서 글씨 크기를 시험적으로 여러번 늘였다 줄였다해 본다면(재조정해 본다면) 틀림없이 의도한 배치가 망가지는 일은 없을 것이다.@원문 작성일자 : 1999/03/22
