해상도에 얽힌 웹 이야기
이강룡 / 웹칼럼니스트 http://readme.or.kr
영화의 원리는 수많은 정지 화면을 우리의 시각으로는 눈치챌 수 없을 정도의 속도로 적당히 빠르게, 연속해서 보여주는 것입니다. 인간의 시각 능력에는 한계가 있기 때문에 우리는 그게 정지화면의 연속이라는 걸 느끼지 못합니다. 인터넷에서 보는 각종 웹사이트와 그림들에도 이와 비슷한 원리가 적용되고 있습니다.
홈페이지를 직접 꾸미기 위해 포토샵 같은 프로그램으로 그림 파일을 만들거나 편집해 본 사람들은 픽셀이나 화소, 해상도란 말을 자주 접하게 됩니다. 픽셀(pixel)이란 다른 말로 ‘화소(그림의 입자)’라고도 하는데 그림이나 화면을 구성하고 있는 가장 작은 단위의 점을 말합니다. 오늘 배달된 신문을 돋보기로 한 번 보세요. 그냥 눈으로 봤을 때는 잘 안보이지만 이를 돋보기로 확대해서 보면 무수히 많은 작은 점들로 구성돼 있음을 알 수 있습니다. 인터넷의 각종 그림들도 이와 비슷합니다. 동그란 원처럼 보여도 확대해서 보면 사각의 화소 조각들이 모인 것임을 구별할 수 있습니다. 그럼 화소 한 개의 크기는 과연 얼마나 되는 것일까요? 그건 그때그때 다릅니다. 이건 딱 정해진 것이 아니라 상대적인 것이기 때문입니다. 모니터의 설정에 따라 그 크기는 매번 달라집니다. 화소의 개념을 잘 알고 나면 해상도를 이해하기 쉽습니다. 해상도(resolution)란 화면이나 그림을 잘게 쪼갤 수 있는 정도를 말합니다.
해상도가 높다는 건 촘촘하고 잘게 쪼갤 수 있다는 뜻
같은 넓이의 화면을 놓고 더 잘게 쪼갤수록 해상도가 높다는 뜻이죠. 방금 말한 화소가 바로 해상도의 기준으로 사용됩니다. 보통 1인치(약 2.5cm)를 몇 개로 쪼갤 수 있느냐에 따라 해상도를 구분합니다.휴대전화 화면을 한 번 떠올려 보세요. 제 휴대전화는 2년 전에 산 것인데 액정 해상도가 5만 화소 정도로 자세히 들여다보면 사각의 촘촘한 입자들이 보입니다. 친구들이 아무리 선명한 고해상도의 사진을 보내줘도 모니터가 해상도가 낮은 구식이라면 선명하게 보이진 않겠죠. 모니터의 크기가 일정하다면 화소가 더 많아질수록, 작아질수록 화면이나 그림이 더 선명하게 보입니다. 좀 전에 화소 한 개의 크기는 딱 정해진 게 아니라고 했었죠?
웹에서 어떤 웹사이트를 보기 위해서는 익스플로러나 넷스케이프, 파이어폭스 같은 웹브라우저가 필요하고, 웹브라우저를 이용하려면 모니터가 필요합니다. 모니터 해상도는 보통 1280*1024, 1024*768, 800*600 등으로 나뉩니다. 1024*768을 예로 들어 보면 그건 그 모니터로 가로 1024개, 세로 768개의 화소를 담을 수 있다는 뜻입니다. 지금 보고 계신 웹사이트의 화면을 한 번 가로 1024개 세로 768개로 쪼갠다고 생각해 보세요. 정확히는 알 수 없지만 아무튼 하나의 화소 크기가 엄청 작겠지요. 그렇다면 모니터의 해상도를 800*600 으로 바꾸고 똑같은 화면을 다시 본다면 어떻게 될까요? 모니터의 크기는 변함이 없으니까 화면을 약간은 듬성듬성 자르면 화소 한 개의 크기는 아까에 비해 상대적으로 좀 커지겠죠. 화소의 크기가 커지니까 당연히 홈페이지의 메뉴들도 모두 조금씩 더 커져 보이게 됩니다. 그러면 1024에서 800을 빼고 남은 나머지는 어디로 가죠? 오른쪽으로 삐져 나가죠.
모든 해상도에서 두루두루 잘 보이는 웹사이트가 이상적인 사이트
요즘에 홈페이지를 만드는 추세는 대부분 1024*768 기준입니다. 그렇게 보는 사람이 가장 많으니까요. 여기에 딱 맞춰서 홈페이지를 만들다 보니 만일 집에 있는 모니터가 구식이어서 최고 해상도가 800*600이라면 홈페이지가 한 화면에 다 보이지 않습니다. 정해진 화소 800개 안에 1024개에 이미 각각 들어가 있는 내용물을 억지로 우겨넣을 순 없는 거니까요. 저희 어머니는 글자 크기가 너무 작아서 잘 안 보인다고 웹브라우저 밑에 스크롤바가 길게 생기는 걸 감수하고 일부러 800*600 해상도로 보시기도 하거든요. 그래서 저도 어머니께 불편을 드리지 않으려고 800*600을 기준으로 홈페이지 디자인을 다시 고쳤습니다. 그림이나 웹사이트 자체는 변하는 게 아니고 모니터가 해상도에 맞게 알아서 화면에 보여주는 것이기 때문에, 만일 제 홈페이지를 최신형 모니터에서 아주 높은 해상도로 본다면 여백이 굉장히 많아질 겁니다.
다양한 해상도의 모니터를 사용하는 사람들을 폭넓게 고려해야 하는 웹사이트의 경우에는 이 둘의 장점을 적절히 배합해 800*600 해상도 기준으로, 여백을 양쪽으로 준 다음 중앙에 정렬하는 경우가 많습니다. 인터넷을 돌아다니면서 한 번 유심히 살펴보세요. 사이트 별로 약간씩 차이가 있긴 하지만 야후, 다음, 네이버 같이 많은 사람들이 이용하는 대형 웹사이트는 아직도 800*600 해상도에서도 큰 불편 없이 무난하게 볼 수 있도록 제작되고 있습니다. 정보통신부 같은 정부 기관 홈페이지 중에도 이 원칙을 지키려는 곳이 많이 있습니다. 내가 만일 홈페이지를 새로 만든다면 어떤 해상도를 기준으로 할지도 생각해 보면 좋겠지요. 해상도가 높다고 해서 무조건 좋은 건 아니니까요. 어느 해상도이건, 어느 브라우저에서건 모두 무난하게 잘 볼 수 있는 홈페이지가 가장 이상적인 홈페이지입니다. 참, 그러면 우리가 흔히 쓰는 ‘해상도가 좋다.’는 말도 잘못된 표현이란 것을 아시겠지요?
72DPI 에는 어떤 사연이 있는 걸까?
인터넷에 올라온 사진이 마음에 들어 인쇄를 했는데 모니터에서 보는 것과 다르게 흐리게 나오거나 엉망인 경우가 많습니다. 어떤 사연이 있는 걸까요? 그건 웹에서 보는 그림 파일이 인쇄용으로 만들어지지 않았기 때문입니다. 당연한 얘기죠. 인쇄를 했을 때 선명한 그림을 보려면 여기에 필요한 정보를 그림 파일에 더 담아야 하고 그러면 파일 용량이 엄청나게 늘어납니다. 보통 웹사이트에 올라오는 그림들의 해상도는 보통 72dpi(dot per inch, 인쇄물에서 1인치 안에 들어가는 점의 수, 웹에서는 ppi(pixel per inch)를 씁니다.) 입니다. 왜 그럴까요? 미묘한 차이겠지만 이보다 해상도가 낮으면 화면이 다소 거칠게 보일 것입니다. 그렇다고 해서 이보다 해상도가 높아지는 것에 비례하여 점점 더 선명해진다고는 할 수 없을 것입니다. 가령 72dpi이건 300dpi의 그림이건 우리가 모니터로 보기엔 별 차이가 없습니다. 여기서 ‘72’란 ‘꼭 이렇게 해야 한다’는 절대적인 수치가 아니고 일반적으로 널리 통용되고 있는 상식적 기준이라고 보면 됩니다. 인간 시력의 한계를 벗어나는 걸 보여줄 필요는 없고, 그러니까 굳이 72dpi 이상으로 해상도를 많이 높여 용량을 늘릴 이유가 없습니다.
웹이라는 도구는 그 안에 담긴 내용이 사용자들에게 무난하게 잘 보이도록 하는 것이 가장 큰 목적입니다. 우리들이 전혀 눈치 챌 수 없을 정도까지만 선명하게 보여주면 되고, 인쇄 목적이 아니라면 최소한의 용량으로 신속하게 보여주는 게 가장 효율적입니다.
- <사이언스타임즈> 청소년판, "이강룡의 인터넷 속에 숨은 과학"
* 일부 용어나 문구가 원문과 다를 수 있습니다.
|