–
반응형 웹으로 구축될 프로젝트 또는 구축된 서비스를 테스트 할 때, 가장 신경쓰이는 건 특정 해상도에 따른 확인 과정이 아닐까 싶은데요. 브라우저 별 확인도 해야 하는데, 특정 브라우저에서 다시 해상도 별 문제는 없는지 확인해야 하기 때문입니다. 오늘은 듀얼 모니터 등의 환경이 아니더라도 한 화면에서 여러 해상도에 따른 웹 페이지를 쉽게 확인하고 관리 할 수 있는 서비스 ‘Responsively’를 소개하고자 합니다.
–
갤럭시 폴드 해상도까지 클릭 한 번으로 확인 할 수 있는 곳
Responsively를 사용하는 방법은 크게 두 가지입니다. 하나는 맥,윈도우용 프로그램을 설치하는 것이고 또 하나는 크롬 등 브라우저 별 확장 프로그램을 활용하는 것입니다. 저는 맥용 프로그램을 설치해 ‘지금 써보러 갑니다(워드프레스로 구축)’페이지를 확인하기로 했습니다. 프로그램 내 브라우저가 탑재 되어 있어 URL 입력 시 위와 같이 기본 설정된 해상도 별 페이지 확인이 가능합니다.
설치 후 별다른 설정 없이 7개의 해상도를 함께 확인 할 수 있는데요. 스마트폰부터 랩탑까지 쉽게 모아 볼 수 있다는 점이 눈에 띕니다.
각 해상도는 ‘전체보기’를 통해 실제 사이즈로 확인 할 수 있는데요. 상단에 다른 해상도의 전체화면으로 쉽게 이동 할 수 있도록 탭으로 구분이 되어 있고, 개발자 도구도 클릭 한 번으로 볼 수 있게 구성되어 있습니다.
왼쪽 사이드 메뉴를 통해 디바이스 해상도와 레이아웃 설정이 가능하며 (OS별 설정도 가능) 다크/라이트 모드 설정이나 스크린샷 등에 대한 값도 변경할 수 있습니다. 다양한 해상도가 OS나 디바이스 환경에 따라 제공된다는 점이 매력적!
URL이 입력된 창 오른쪽으로는 다양한 행동이 가능한 버튼이 배치되어 있어요. CSS Editor, Inspect Element, Toggle Touch Mode 등을 선택하거나 변경할 수 있습니다. 열려 있는 해상도 별 페이지를 한 번에 세로가 아닌 가로 사이즈로 바꿀 수도 있고요. 스크린샷도 클릭 한 번으로 가능합니다.
위 이미지를 보면 첫 번째 아이폰X를 제외한 두, 세번째 이미지는 모두 가로 해상도로 변경된 모습입니다. 이처럼 한 화면 내 여러 해상도에 해당하는 페이지를 조건에 따라 비교, 확인 할 수 있다는 점이 Responsively의 가장 큰 장점이자 매력이라고 할 수 있습니다.
기본 설정된 해상도 외 제공되는 해상도 역시 다양합니다. 현재 활성화된 디바이스와 비활성화된 디바이스를 볼 수 있고 드래그 앤 드롭 방식으로 쉽게 바꿀 수 있습니다.
만약 원하는 해상도나 디바이스가 없다면, 직접 추가하는 것도 가능해요. 이름, 세로-가로 비율, 타입, OS 등 조건도 하나씩 추가, 선택할 수 있습니다.
–
반응형 웹에 대한 확인, 그리고 기본적인 레이아웃 테스트 등이 필요할 때 ‘Responsively‘는 정말 많은 도움이 될 것 같아요. 무엇보다 화면 하나에 다양한 디바이스에 따른 해상도를 확인 할 수 있으니 말이죠. 게다가 무료로 제공되며 윈도우는 물론 맥용, 브라우저에 따른 확장 프로그램까지 제공되니 당분간은 많이 활용하게 되지 않을까 싶습니다. 프로그램 다운로드 및 자세한 내용은 ‘이 곳’을 확인해보세요!
–
함께 읽어보면 도움이 될 내용!
- 반응형 그리드 레이아웃을 확인할 수 있는 오픈소스 라이브러리 ‘Muuri’
- 사이트 주소(URL)만 입력하면 다양한 사이즈의 스크린샷을 한 번에! ‘Responsive Screenshots’
–
함께 읽어보면 도움이 될 도서!
*위 링크는 쿠팡 파트너스에서 생성된 것으로 구매 시 일정 수수료를 받을 수 있습니다.
–
