오늘은 SuperPreview의 사용기를 간단히 정리해 보고자 합니다.
UI
SuperPreview UI
UI는 다른 Expression Stuio 제품들과 동일합니다. 상단에 웹페이지 위치를 입력하는 로케이션 바를 포함한 메뉴바가 위치해 있고, 중앙에 기준 화면(Base Line)과 비교 화면(Comparison)이 있습니다. 바로 아래에는 기준 화면이 되는 브라우저 아이콘과 비교 화면의 브라우저들 아이콘이 표시되어 있습니다. 하단에는 각각의 브라우저 DOM Tree 정보와 해상도를 설정할 수 있는 드롭다운 메뉴가 제공됩니다. DOM Tree를 통해서 상세한 스타일시트 정보를 확인해 볼 수는 없었습니다.
브라우저 선택
SuperPreview 브라우저 선택
SuperPreview 브라우저 선택 후 새로고침을 한다
Box Highlighting Mode
Box Highlighting Mode
Lights-Out Highlighting Mode
Lights-Out Highlighting Mode
Layout
수평 레이아웃
오버레이 레이아웃
이미지 비교
이미지 비교
정리
SuperPreview를 IETester나 MultiIEs와 같은 어플리케이션에 비해 가볍고, 편리합니다. 가장 많이 사용하고 있는 IETester는 지속적인 패치를 통해 렌더링 정확도가 높아지고 있지만 모든 경우를 보장해 주지 못합니다. 그리고 일부 OS에서 심심치 않게 다운되는 현상도 비일비재합니다. 반면에 SuperPreview는 이같은 문제를 해소시켜줄 대안으로 발표가 되었습니다. 환영할만한 일입니다. 반갑기도 하구요. 하지만 정말 쓸 만한 제품인가? 하는데에는 아직 아쉬움이 많이 남는 제품입니다.
일단 SuperPreview는 비주얼 진단 도구로 실제 웹브라우저처럼 웹페이지를 보여주지 않습니다. 다시 말해 링크나 자바스크립트를 통한 인터랙션을 확인해볼 수 없습니다. 단일 페이지에 대한 렌더링 결과만을 확인해 볼 수 있다고 생각하시면 됩니다. 또한, 자바스크립트로 웹페이지 레이아웃을 구성하는 경우 제대로 렌더링 되지 않는 경우도 발생합니다. Expression Web 3 릴리즈 노트(공식 문서)를 살펴보시면 SuperPreview가 지원하지 못하는 경우를 확인해 보실 수 있습니다. 또 하나 IE 시리즈를 제외하면 현재 지원되는 브라우저는 Firefox 뿐입니다. Safari, Opera와 같은 다른 브라우저들은 다음 버전에서나 지원될 것으로 보입니다.
그리고 SuperPreview를 처음 보고 어도비의 BrowserLab 서비스와 상당히 유사하다는 것을 느꼈는데요. BrowserLab은 웹서비스로 구현되어 있습니다. 드림위버에 플러그인을 설치하면 연동해서 사용하실 수도 있구요. SuperPreview와 BrowserLab이 서로 경쟁해서 둘 다 좋은 제품으로 발전했으면 좋겠네요.
어쨌든 결론적으로 제 생각을 정리해보면 SuperPreview는 괜찮은 컨셉으로 쓸만한 제품이지만 아직은 다른 디버깅 툴을 대체할 만큼 사용성이 높지는 않다는 것입니다. IE8에는 개발자 도구라는 강력한 디버깅 툴이 지원되고 있는데 그것과 연동되어진다면 꽤나 쓸만하지 않을까 기대해 봅니다.
어도비의 BrowserLab
그래도 웹디자이너나 웹기획을 하시는 분들께는 꽤나 유용한 도구가 될 것으로 생각됩니다. 개발자나 웹퍼블리셔에게는 아쉽지만 아직은 IETester를 이용한 확인 작업이 가장 나은 대안인 것 같습니다.
가장 좋은건 IE6이나 IE7이 어서 점유율이 떨어져서 모든 사람들이 표준을 제대로 준수하는 브라우저를 사용하는 세상이 되는 것이겠죠.
참고
댓글 없음:
댓글 쓰기