기기는 많고, 크기는 제각각이다. 스마트폰을 보자. 작게는 3.5인치부터 5인치가 훌쩍 넘는 ‘패블릿’까지 다양하다. 태블릿PC까지 가세하면 종류는 더욱 늘어난다.

그러니 숙제다. 이 많은 ‘윈도우’에 맞게 웹페이지를 뿌려주면 어떻게 해야 할까. 서비스 기획자나 개발자는 머리가 아프다.

그 해법 가운데 하나로 나온 게 ‘반응형 웹’이다. 한마디로, 웹에 접속하는 기기 화면에 맞게 웹사이트를 뿌려주는 기법을 일컫는다.

일단 반응형 웹사이트를 디자인했다 치자. 실제 기기 화면에서 어떻게 보이는지 확인하려면 어떻게 해야 할까. 일일이 기기를 구할 순 없으니, 대개 가상 화면(에뮬레이터)을 이용하곤 한다.

다음은 이처럼 다양한 기기에서 웹사이트가 어떻게 보이는지 미리 체험해 볼 수 있는 웹서비스를 제공한다. ‘트로이’다.

이용 방법은 간단하다. 트로이 웹사이트에 접속해 테스트할 기기를 선택하고 웹사이트 주소를 입력하면 된다. 그러면 해당 기기 화면에 웹사이트가 어떤 식으로 뜨는지 미리보기 형태로 보여준다.

트로이는 지난 2013년 7월말 첫선을 보였다. 다음랩이 내놓았다. 처음 공개할 때만 해도 12종의 스마트폰·태블릿에 대한 반응형 웹 테스트 환경을 제공했는데, 9월25일 개편과 더불어 한층 기능이 판올림됐다.

먼저, ‘멀티스크린 모드’가 적용됐다. 지금까지는 한 번에 기기 한 종류만 선택해 화면을 테스트했는데, 이제 여러 기기 화면을 한꺼번에 불러올 수 있게 됐다. 한 화면에 불러올 수 있는 기기 수에도 제한 없다. 화면을 확대·축소해가며 여러 기기를 한눈에 볼 수 있는 기능도 덧붙었다. 주소창 옆 돋보기 아이콘을 눌러 확대·축소 배율을 조정하면 된다.

daum_troy_01

여러 기기를 불러와 테스트할 수 있는 ‘멀티스크린 모드’를 지원한다.

주요 메뉴는 한국어 뿐 아니라 영어로도 제공된다. 다음 쪽은 이용자 요구에 따라 다른 언어도 추가할 예정이라고 밝혔다. 서비스 화면 디자인도 대시보드 스타일로 좀 더 쓰기 편리하게 바뀌었다. ‘환경설정’ 메뉴에서 ‘시작 디바이스’를 설정해두면 자주 쓰는 특정 기기를 접속할 때마다 기본값으로 띄울 수 있다.

daum_troy_02

‘설정’ 메뉴에서 ‘시작 디바이스’나 언어를 지정하면 된다.

스크롤바 영역이 없는 맥과 달리, 윈도우 OS에선 스크롤바가 웹브라우저 오른쪽에 자리잡고 있다. 지금까진 정확한 테스트를 위해 윈도우 환경에서 웹브라우저 스크롤바 너비를 일일이 지정해줘야 했다. 개편된 트로이 서비스에선 이용자 웹브라우저 스크롤바 너비를 자동 감지해 적용해 주는 기능이 덧붙었다. 굳이 이 기능이 필요하지 않거나 스크롤이 필요 없는 웹사이트라면 오른쪽 위 톱니바퀴 모양의 환경설정 메뉴에서 스크롤바 자동 감지 기능을 끄면 된다.

테스트할 수 있는 기기 종류도 늘어났다. 국내 삼성·LG·팬택을 포함해 애플·구글·HTC·소니·샤오미·화웨이·레노버·ZTE 등 11개 브랜드에서 나온 38종의 스마트폰·패블릿·태블릿을 지원한다. 최근 출시된 ‘아이폰6’과 ‘아이폰6플러스’도 포함돼 있다. 현재 테스트 중인 기기 종류나 화면은 ‘공유’ 버튼을 이용해 다른 사람과 공유할 수 있다.

daum_troy_03

테스트 중인 화면은 다른 사람과 공유할 수 있다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.