Layout 1 - 화면 & 해상도

From. HTML & CSS 웹사이트 개발과 디자인 기초 (존 두켓 / 에이콘 출판사)

화면크기

사이트 방문자는 보여주는 정보의 양이 다를 수 있는 다양한 크기의 화면을 통해 사이트에 접속한다. 따라서 다양한 크기의 화면에 최적화될 수 있도록 디자인해야 한다.

인쇄용 디자인에서는 디자인이 인쇄용 종이의 크기를 알고 있다. 하지만 웹 디자인에는 다양한 사용자가 제각각인 크기의 화면을 사용한다는 도전에 직면하게 된다.

컴퓨터가 대중에게 판매된 이후 화면의 크기는 꾸준히 커졌다. 이는 어떤 사람은 사이트를 27인치이상의 모니터로 볼 수 있지만 다른 사람은 13인치 모니터로 볼 수도 있다는 의미다.

사용자의 화면 크기는 얼마나 크게 창을 열 수 있는지와 얼마나 많은 페이지를 볼 수 있는지에 영향을 미친다. 또한 스마트폰과 태블릿같은 작은 화면을 탑재한 손안의 기기의 수도 꾸준히 증가하고 있다.



화면 해상도

해상도는 인치당 화면에 보이는 점의 수를 의미한다. 테스트톱 컴퓨터보다 더 높은 해상도를 제공하는 기기들도 있으며 대부분 OS에서 사용자 화면의 해상도를 변경할 수 있다.

대부분 컴퓨터는 사용자가 화면의 해상도나 화면에 보이는 픽셀의 수를 변경할 수 있는 기능을 제공한다. 예컨대 화면 크기를 720*480픽셀에서 1280*800픽셀로 변경할 수 있다.

참고로 해상도가 높을 수록 텍스트는 더 작게 보인다. 데스트톱 컴퓨터보다 더 높은 해상도를 제공하는 모바일 기기도 많다.



페이지 크기

화면 크기와 해상도는 매우 다양하기 때문에 대부분 웹 디자이너들은 페이지의 너비를 약 960~1000픽셀로 만든다. 화면에서 이 정도의 너비면 대부분 사용자가 디자인을 볼 수 있기 때문이다.

페이지를 아래로 스크롤하지 않아도 화면에서 볼 수 있는 높이를 정하는 일은 매우 어렵다. 지난 몇 년간 디자이너들은 사용자가 페이지의 상위 570~600픽셀은 스크롤 하지 않고 본다고 가정했으며 사용자가 페이지를 아래로 스크롤하지 않을 경우를 대비해 이 영역에 모든 핵심 메시지를 담으려 노력했다.

화면 크기가 커지고 휴대 기기가 점점 더 일반화 되면서 사용자가 보는 영역은 더 다양해 졌다.

스크롤 없이 사용자가 볼 수 있는 페이지 영역을'above the fold'라고도 한다. 이 말은 원래 신문을 반으로 접었을 때 상단에 있는 페이지 영역, 즉 중요한 앞 페이지를 가리키는 것에서 유래됐다.

이제는 사용자가 페이지의 콘텐츠에 관심이 있다면 더 살펴보고자 대부분 아래로 스크롤 한다는 사실을 깨달았다. 또한 사용성(usability) 연구에 따르면 방문자는 아래로 두 번 스크롤 한 다음에 페이지를 판단하는 것으로 나타났다. 따라서 스크롤한 화면에도 새로운 방문자에게 방문자가 찾던 내용이나 관심사와 사이트가 관련 있다는 사실을 인식시키는 일이 중요하다.

결과적으로 대부분 디자인은 사용자에게 상단 570~600픽셀 내에 중요한 정보를 배치하되 동시에 아래쪽에 더 많은 콘텐츠가 있다는 암시를 제공해야 한다. 하지만 상단 영역에 너무 많은 내용을 담지 않도록 주의한다.

이 책을 쓰는 현재는 화면의 크기에 따라 변경되는 적응형(adaptive) 또는 반응형(responsive) 디자인이 증가 추세에 있다.


브라우저 창 크기의 제약으로 인해 보이지 않는 영역이 발생하기 마련이다. 따라서 사용자는 아래 여역을 보기 위해 스크롤 해야 한다. 하지만 그에 앞서 페이지 하단에 사용자가 원하는 정보가 있고, 아래로 스크롤 했을 때 더 많은 정보가 있다는 약간의 정보를 미리 제공해야 한다.