Rev. 2.73

최근 홈페이지 리뉴얼 프로젝트를 중간에 인수받아 우여곡절 끝에 마무리하고 성공적으로 오픈했습니다. 안정화 기간이라서 여러 개선/교정/변경 사항들이 속출하고 있는 가운데 참 재미있는 항목이 하나 있었습니다. "애플의 홈페이지는 로고와 메뉴가 아무리 확대해도 깨지지 않는다. 우리도 그렇게 하는 것이 좋지 않겠냐?"라는 것이었죠. "어! 진짜?" 하고 즉시 살펴 보았습니다. 정말로 그렇더군요. 헐~

글 제목에서 눈치채셨겠지만 애플은 HTML5에서 공식으로 지원하는 미디어 포맷인 SVG(Scalable Vector Graphics)를 이용하여 로고와, 메뉴 텍스트를 CSS의 background 속성으로 표시하고 있었습니다. 아시다시피, 이 SVG라는 것을 사용하면 아무리 확대해도 깨지지 않는 그래픽 영역을 웹페이지에 삽입할 수 있습니다. 만약 SVG를 지원하지 않는 경우 PNG파일로 대체되며 확대하면 픽셀이 선명하지 않는 현상은 동일했습니다. PNG마저 지원하지 않는 경우(e.g. IE6)에는 GIF로 만들어진 이미지를 로드하도록 되어있습니다. 아무리 확대해도 깨지지 않는 메뉴와 로고라... 기발한 아이디어죠. 역시 애플 답다는 감탄사가 절로 터져나오더군요. 흥미가 생겨 조금더 파해쳐 보기로 했습니다. 이것이 언제 반영되었는지 알아내려고 각 사이트 첫 페이지의 모습을 날짜별로 담고 당시의 모습을 재현해 주는 서비스인 archive.org에서 검색해 보니 가장최근 크롤링된 자료가 2010년 12월 말경이였고 분명히 이미지만으로 메뉴가 구성되어있던 것을 확인하였습니다. 원래부터 SVG는 아니였고 최근 6개월 사이 반영된 내용임을 유추할 수 있습니다. 현재 SVG는 IE9를 비롯한 모든 메이저급 브라우저들이 지원하고 있습니다. 편의를 위해 애플 홈페이지의 메인메뉴 네비게이션 영역을 여기에 가져왔습니다.

SVG로 랜더링 된 애플 홈페이지 네비게이션 메뉴

이미지로 랜더링 된 애플 홈페이지 네비게이션 메뉴

또 한가지 재미있는 사실은 "enhanced.css"라는 스타일시트가 있는데, 이 녀석이 하는 역할은 기존에 이미지로 지정되어있던 background 속성이 전부 base64로 인코딩된 Data URI 스키마로 호출을 대체하거나 CSS3의 gradient 값으로 변경합니다. globalnav.js 자바스크립트 파일에서 사용가능 여부를 판단하여 CSS3와 Data URI를 지원하는 브라우저에서만 호출되도록 처리되어 있습니다. 이것은 CSS에 정적인 이미지들을 문자열 데이터로 정의함으로써 물리적인 파일들의 호출횟수를 줄여 웹사이트의 전반적인 성능을 향상시키는 방법입니다. 이 CSS파일에 정의된 마임-타입(Mime-Type)을 살펴보면 "image/svg+xml"도 찾아볼 수 있습니다. 본 주제와는 상관없는 것이므로 위 예제는 이미지를 사용하는 navigation.css만을 로드한 것입니다.

위 두 예제의 차이점은 첫 번째가 SVG 포맷으로 텍스트를 랜더링한 것이고 두 번째는 이미지 포맷으로 랜더링한 것입니다. nav 요소에 "svg"라는 클래스 이름의 포함여부로 구분하게 되어있습니다. "svg"라는 클래스명을 추가하는 것 역시 globalnav.js에서 구분하여 수행합니다. 그럼 이제부터 본격적으로 두 녀석의 차이점을 살펴보겠습니다.

chrome.png
위 그림은 최신 크롬 브라우저(14.0.825.0 dev-m)에서 300% 확대(최대치)한 후 캡쳐한 것입니다. IE9나 사파리(5.1, 모바일 포함) 역시 이와 유사한 결과를 출력합니다. 그러나 파이어폭스(5.0)는 SVG 미디어를 배경이미지로 사용한 경우에 이미지로 사용했을 때와 별반 다르지 않은 결과를 나타냈습니다. SVG 파일이 로드되었는데도 말예요. 브라우저의 버그로 보입니다만, 동일한 SVG 파일을 일반 이미지 요소에 "src" 속성으로 정의한 경우(<img src="nav.svg">) 별 문제없이(확대해도 깨지지 않는) 잘 나타났습니다. 아래 그림은 파이어폭스에서 300% 확대한 후 캡쳐한 화면입니다.(위 예제를 해당 브라우저에서 직접 확인해 보시길 권장합니다.)

firefox.png

파이어폭스의 버그를 꼬집고자하는 의도는 아닙니다만, 이러한 현상들이 있음을 확인하였습니다. 마지막으로 효율성에 대하여 살짝 집고 넘어가겠습니다. 이미지로 만들어진 텍스트 파일의 용량은 gif 포맷이 2.58 KB이고, png 포맷은 7.28 KB 입니다. 그렇다면, svg 포맷은? 무려 53.59 KB입니다. 이 크기는 왠만한 자바스크립트 라이브러리(jquery.min.js 31 KB)보다도 큰 용량입니다. 실제로 애플의 홈페이지를 로드할 때 메뉴 텍스트가 느리게 그려지는 현상을 실감할 수 있습니다. Firebug의 Network 콘솔을 확인해 보면 SVG파일이 가장 늦게 로드되는 것도 확인할 수 있습니다. 그럼에도 애플은 왜 이러한 선택을 한 것일까요? 그 해답은 애플만이 알겠지요...

자, 이제 본론입니다. 뭐 결론은 "애플이니까 한거다. 나도 저런거 만드는 애플이 부럽다." 정도로 답변했지만, 사실 이러한 요구사항이 들어올 줄은 꿈에도 생각못해 다소 당혹스럽습니다. "애플은 워낙에 확대/축소가 자유로운 장치와 OS를 공급하다 보니 만든거다"며 변명을 하자니, 일하기 싫어하는 놈 같고 무턱대고 적용하자니, 디자이너님 모시고 SVG 설명 드리고 배경과 텍스트 분리해서 좌표에 딱 드러맞게 저장해서 주세요. 라 했을 때 "100% 이상으로 확대해서 보는 일부 사용자를 위해 이렇게까지 해야하나요?"라는 질문이 돌아온다면 딱히 떠오르는 대답도 없는 실정입니다. 여러분이라면 어떻게 하시겠어요?

덧. 참 오랜만에 블로그를 갱신했네요. 요즘 제 상태가 블로깅은 사치입니다. 쩝.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar