구형 웹 브라우저에서의 블로그 확인하기 (2) MS SuperPreview

 

 

블로그의 접근성을 높이기 위해 구형 브라우저에서 출력되는 모습을 확인하는 방법(구형 웹 브라우저에서의 블로그 확인하기 (1) IETester)을 지난번 글에서 다룬바 있습니다. IETester은 직관적인 인터페이스로 사용법을 전혀 몰라도 사용하는데에 큰 지장이 없고 설치 방법도 간편해 쉽게 이용할 수 있다는 장점이 있었으나 인터넷 익스플로러의 경우에만 확인해볼 수 있다는 점이 단점이라고 할 수 있습니다.

 

이 경우에는 MS에서 제공하는 SuperPreview를 이용해볼 수 있습니다. SuperPreview에서는 원격브라우저라는 기능을 이용하여 인터넷 익스플로러 외의 다양한 브라우저와, 맥에서만 이용 가능한 브라우저인 사파리에서 출력되는 화면도 같이 볼 수 있다는 장점이 있습니다. 이번 글에서는 보다 다양한 브라우저와, 다른 OS에서는 어떻게 보이는지도 확인할 수 있는 MS의 SuperPreview에 대해서 설명드리겠습니다. (이전에 올린 IETester관련 글에서 'IETester란?'부분과 대동소이하기 때문에 SuperPreview가 어떤것인지는 따로 언급하지 않겠습니다. )

 

MS SuperPreview 설치 / 사용준비하기

 

 

1. 사용을 위해 먼저 NET Framework 4를 설치해주셔야 합니다. [링크]

 

 

2. 다운로드를 누르시면 '이것도 한번 받아봐~'라는 창이 뜹니다. 바로 진행하시면 됩니다.

 

 

3. 프레임워크를 반드시 먼저 설치하신 후 SuperPreview를 다운받아 설치합니다. [링크]

 * IE만을 비교하려고 하신다면 이후의 과정은 진행하지 않으셔도 됩니다 *

 

 

4. 설치 후 실행합니다. 다른 브라우저도 함께 비교하기 위해서는 원격 브라우저를 활성화해야 합니다.  실행 후 화면 중앙에 있는 원격 브라우저 (베타) 부분에서 활성화 / 등록 버튼을 클릭합니다.

 

 

5. 활성화 절차는 대부분의 메일인증 방식과 비슷합니다. 계속 진행해주시면 됩니다.

 * 메일이 오지 않을경우 여러번 재발송을 요청하셔도 됩니다. 메일이 없다면 스팸메일함도 확인해주세요.

  

 

6. 활성화 과정이 완료되면 다음과 같이 아이콘이 생기거나 / 색이 입혀집니다. 이제 MS SuperPreview를 사용할 준비가 완료되었습니다.

 

MS SuperPreview 사용방법

 

 

자주 사용하시거나 유용하게 사용할 수 있는 도구들에 대해서만 먼저 설명드리겠습니다.

 

1. 모드 선택

 - 선택 모드(V) : 뒤에서 설명드리겠지만 MS SuperPreview에서는 특정 단위들을 선택하여 크기등을 비교할 수가 있습니다. 가령 이미지나, 표등을 선택하여 각각의 브라우저에서 크기가 어떻게 다르게 나타나는지, 브라우저 내에서 어디에 해당되는 섹션이 위치하고 있는지등을 표시하여 보여줍니다. 이런 단위를 선택할 수 있는 모드입니다.

 - 이동 모드(H) : 포토샵에서 핸드 툴을 떠올리시면 됩니다. 마우스로 화면을 이동시킬 수 있습니다.

 

2. 레이아웃 선택

 - 세로 분할 레이아웃 : 좌/우로 나눠 두개의 화면을 비교할 수 있습니다.

 - 가로 분할 레이아웃 : 위/아래로 나눠 두개의 화면을 비교할 수 있습니다.

 - 오버레이 레이아웃 : 두개의 화면을 겹쳐서 어디가 어느정도로 차이나는지 바로 확인할 수 있게 합니다.

 - 단일 레이아웃 : 하나의 화면만 출력됩니다.

 

3. 주소 입력창 : 비교하고자 하는 주소를 입력해주시면 됩니다.

 

4. 비교 브라우저 선택창

 - 좌측 : 기준이 되는 브라우저입니다.

 - 우측 : 비교가 될 브라우저입니다. +버튼을 통해 비교하고자 하는 브라우저를 계속 추가할 수 있습니다.

 

5. 브라우저 크기 : 확인하고자 하는 해상도의 크기를 입력해주시면 됩니다.

 

 

사용방법은 간단합니다. 먼저 중앙상단에 확인하고자 하는 홈페이지나 블로그의 URL을 입력합니다. 그 후 좌측의 화면에서 기준이 되고자 하는 브라우저를 선택합니다. 우측에서는 이제 비교하고 싶은 브라우저를 선택합니다. 잠시 기다리시면 해당 브라우저에서 보이는 화면이 출력되게 됩니다.

 

 

위 처럼 비교하여 확인하실 수 있습니다. 앞서 언급드렸던 선택 도구를 이용하시면 해당되는 부분의 크기와 위치가 각각의 브라우저에서 어떻게 나오는지, 그리고 어떻게 차이가 나는지 수치를 통하여 명확하게 보여줍니다. 티에디션 화면에서 가장 상단에 위치해있는 섹션에서 제목과 이미지가 나오는 부분이 익스플로러에서는 좌231/위490인데 사파리에서는 좌230/위489로 차이난다고 알려주고 있네요.

 

궁금하신 점은 댓글로 남겨주세요 :D

 

추가 ) MS SuperPreview는 따로 제공되는 단품이 아니라 현재 판매하고 있는 'Microsoft Expression web'이라는 마이크로소프트사의 웹 개발툴 내부에 있는 프로그램입니다. 때문에 포스트에서 다루고 있는 방법대로 다운받아 이용하신다면 아마 60일 기간동안 사용할 수 있는 평가판 형태로 사용하시게 됩니다. 그 이상 사용하고자 하신다면 구매를 하시는등의 방법을 찾으셔야 할 것 같습니다 :)