MS IE는 px로 크기를 지정한 글자를 zooming해 주지 않습니다. Gecko 계열 브라우저는 px로 크기를 지정한 글자는 zooming해 주지만, px로 크기를 지정한 그림은 zooming해 주지 않습니다. 오페라는 그런 그림도 zooming해 줍니다. 모든 GUI 브라우저가 Opera와 같다면(firefox와 같은 gecko 계열 브라우저는 Opera의 기능을 수용할 계획입니다만, 언제 고쳐질지는 모르겠습니다) 이 글은 아마 쓰지 않아도 되었을지 모릅니다. 이런 상황에서 그림이 들어간 레이아웃이 어느 브라우저에서 zooming을 해도 깨지지 않게 할 방법은 무엇일까요?
오픈웹 사이트 베타를 보니까 상단 헤더 부분 내용이 배경 화면에 다 들어가지 않아서 - 제가 기본 글자 크기를 파이어폭스에서 좀 크게 해 놓았습니다. 제 노트북 해상도가 지나치게 높아서요- 왜 그런가 보았더니, 상단 부분 크기가 배경 그림 크기에 맞추어서 px로 지정되어 있지만, 글자 크기는 em으로 지정되어 있더군요. em과 px의 비율은 제가 지정한 기본 글자 크기에 의해 상대적으로 결정되므로 (사용 글꼴에 따라서도 달라집니다), 제가 기본 글자 크기를 크게 지정해 놓으면, 위처럼 px로 크기를 지정한 박스 안에 내용물이 다 안 들어가는 일이 발생합니다.
그 박스(베경 그림 때문에 px로 크기를 지정한) 크기를 em으로 지정하면 되지 않을까? 그럼, 배경 그림 크기는? 이것도 역시 em으로 지정하면 되지 않을까? 이런 생각이 들었습니다. 그렇다면, 많은 웹 사이트에서 보이는 너무나 작은 아이콘 ( 노트북의 고해상도 화면을 한번 써 보십시오. 상당수 웹 사이트의 아이콘은 정말 너무 작습니다. 일반 데스크탑 모니터에서도 작은 경우가 많고요) 문제도 이로서 해결할 수 있지 않을까? 이런 생각이 들었습니다. 그래서, 구글 검색을 해 보니 다음과 같은 사이트가 있더군요.
http://www.bigbaer.com/css_tutorials/cs ... torial.htm
http://www.bigbaer.com/css_tutorials/css_font_size.htm
그림마다 적절한 크기를 계산해야 하고 이를 "대강의 em"으로 바꿔야 하니까 상당한 품이 들어갈 수도 있다는 게 단점이기는 하군요. 이런 기능을 웹 저작 도구가 잘 지원해 주면 좋은데.... 또하나의 단점은 브라우저가 좋은 그림 스케일링 알고리즘을 쓰지 않을 경우 그림이 좀 안 이뻐질 수 있습니다. 좋은 알고리즘을 써도 스케일링을 하는데 시간이 걸릴 테니까 화면 표시가 좀 느려질 수도 있고요. 스케일링 결과와 수행 속도 양면에서 모두 좋은 알고리즘을 쓰면 되겠네요
(현재 모질라 계열 브라우저의 스케일링 알고리즘은 두 가지 면 모두에서 좀 문제가 있는 듯....) 또다른 문제는 'pixel-perfect' 디자인을 원하는 디자이너들이 이 방법을 꺼릴지도 모른다는 점이겠군요. 그래도 zooming의 결과 완전히 엉망진창으로 깨지는 것보다는 이게 훨씬 낫지 않냐고 하면....
