화소수를 4배로 늘린 새 아이패드 단말기가 국내 웹 사용자들에게 무조건 더 선명한 화질을 보장하진 않는다. 애플의 자랑인 '레티나 디스플레이'가 제 힘을 발휘하려면 기존 웹사이트의 비트맵 이미지들이 그에 걸맞는 해상도를 지원해야 하기때문이다. 아예 해상도를 가리지 않는 웹기술로 이미지를 표시하는 게 쉽지만 해외환경에 비해 더딘 움직임이 숙제로 꼽혔다.
애플이 이달초 선보인 새 아이패드는 2048x1536 화소를 표시하는 '레티나디스플레이'를 탑재했다. 기존 아이패드 단말기들이 1024x768 화소를 표시하는 화면보다 4배 늘어난 점을 그려낼 수 있다는 얘기다.
즉 새 아이패드 화면에 표시되는 화소수는 27인치(약68cm) PC용 모니터 해상도인 1920x1080(또는 1200) 화소보다 많다. 다만 새 아이패드가 PC용 모니터보다 실제로 '더 큰 화면'을 보여주는 것은 아니다. 같은 크기의 면적을 더 높은 화질로 표시해주는 것이다. 웹사이트를 보여주는 사파리 앱에서도 마찬가지다.
▲ 아이패드2와 새 아이패드, 약간 달라진 두께 외에 외관상 큰 차이는 없다. 그러나 4배
늘어난 단말기 해상도는 웹사이트 관리자들의 업무나 기업들의 지출을 늘릴 수도 있다.
13일 업계에 따르면 새 아이패드를 통해 표시되는 웹사이트들이 기존 아이패드 화면보다 4배 더 선명해질 것이라는 '단순 계산'은 통하지 않을 전망이다. 국내 웹개발 수요가 해외보다 이미지 사용을 선호하는 특성을 보이기 때문이다.
NHN XE개발팀 사용자인터페이스(UI) 개발자 정찬명 차장에 따르면 기존 모니터 화면에 쓰인 이미지를 새 아이패드로 볼 경우 선명해지는 게 아니라 오히려 윤곽이 흐릿해질 수 있다.
정 차장은 "새 아이패드가 웹사이트를 표시할 때 점 1개를 보여주던 면적에 4개를 보여주게 된다"며 "기존 1개짜리 해상도에 알맞았던 비트맵 이미지를 4배로 잡아늘리기 때문에 윤곽이 뿌옇게 흐려질 수 있다"고 지적했다.
이미 전례가 있는 문제다. 지난 2010년 레티나디스플레이를 처음 선보인 아이폰4가 등장하면서다. 당시 아이폰3GS에 최적화된 모바일웹사이트를 만든 기업과 개발자들은 아이폰4 화면에서 이미지 화질이 오히려 흐려지는 현상을 겪었다.
이후 업계는 모바일웹에 가급적 이미지 사용을 줄이고 꼭 필요한 이미지는 단말기마다 갖춰 대응케 된다. 여러 이미지를 관리해야 하고, 늘어난 해상도만큼 전체 데이터 용량도 커지는 부담을 감수하면서다.
새 아이패드에서도 그대로 하면 될까? '곤란하다'는 게 업계 중론이다. 아이폰보다 화면이 큰 아이패드는 전용 모바일웹을 만들지 않고 플래시 기능을 뺀 PC용 사이트 정도로 대응하는 경우가 일반적이었다.
즉 아이패드에서 보이는 웹사이트에 쓰는 이미지들 역시 PC용이다. 모바일웹 버전보다 용량이 큰 이미지가 많을 수 밖에 없다는 얘기다. 그 이미지를 4배 늘어난 해상도에 맞추려면 웹사이트 관리 영역뿐 아니라 방문하는 일반 사용자 쪽에도 과도한 데이터 전송을 유발할 수 있다.
SK커뮤니케이션즈 사용자인터페이스(UI) 개발팀 소속 프론트엔드 개발자 윤원진 대리는 "아이패드 단말기용 웹사이트는 따로 만들기보다 PC사이트를 그대로 보여주는 게 일반적"이라며 "그 이미지를 아이패드용 레티나디스플레이 해상도에 맞추면 용량이 과도하게 늘어날 수 있다"고 예상했다.
국내 기업들에게 해법이 전혀 없는 것은 아니다. 스마트폰 환경에 대응한 방식대로 새 단말기에 맞춘 모바일웹을 만들면 된다. 물론 이는 새로운 디자인과 데이터를 별도로 관리할 비용을 꾸준히 치러야 하는 방식이다. 장기적으로 추가 부담을 원치 않으려면 비트맵 이미지 사용 자체를 줄이는 방향으로 가야 할 것으로 보인다.
웹표준화기구 월드와이드웹컨소시엄(W3C)의 이원석 HTML5 대한민국관심그룹(KIG) 의장은 "웹을 다양한 단말기 해상도에 경제적으로 대응하려면 가급적 이미지 사용을 줄여야 한다"며 "비트맵이미지 대신 벡터 방식인 스케일러블벡터그래픽(SVG) 표준 이미지, 일반 텍스트, 캐스케이딩스타일시트(CSS) 표준을 쓰든지 제이쿼리 등 프레임워크를 활용해야 한다"고 덧붙였다.
CSS는 웹문서에서 내용을 담당하는 HTML과 별개로 디자인을 표현하기 위해 쓰는 언어다. 브라우저가 텍스트로 된 CSS를 읽어들여 경계선, 바탕색, 글꼴 두께와 단락 간격을 나타낸다. SVG도 그림의 형태가 아니라 점의 위치와 선의 윤곽과 굵기, 색상 등을 수식으로 표현하는 이미지 형식이다. 일반 텍스트처럼 결과물이 고정된 이미지에 비해 처리 용량이 작다. 해외선 이런 기술을 활용해 여러 사이트에 대응하는 추세지만 국내 웹 환경은 개선 여지가 많다는 게 현업 개발자들의 공통된 의견이다.
다만 NHN 정 차장은 "국내 공공기관들이 장애인차별금지법에 대응하면서 기존 플래시 기반의 UI를 걷어내고 텍스트기반으로 만들어 웹접근성을 높이고 있다"면서 "텍스트와 CSS 중심의 디자인은 새 아이패드 화면에 더 선명하게 표시될 수 있다"고 말했다.
임민철 기자 imc@zdnet.co.kr