홈페이지를 제작하다 보면 PC에서는 잘 보이는데 모바일이나 태블릿에서는 레이아웃이 깨지는 경우를 종종 만나게 됩니다.
버튼이 화면 밖으로 밀려나거나 이미지가 잘리고, 텍스트가 겹쳐 보이는 문제도 생각보다 자주 발생합니다.
예전에는 이런 문제를 확인하기 위해 직접 스마트폰과 태블릿을 번갈아 보거나 브라우저 창을 손으로 줄였다 늘렸다 하며 테스트했었습니다.
하지만 화면 크기를 정확하게 맞추기 어렵고, 여러 해상도를 반복해서 확인하는 데도 많은 시간이 필요했습니다.
그러다 사용하게 된 것이 Window Resizer였습니다.
Window Resizer는 다양한 화면 해상도로 브라우저 크기를 즉시 변경할 수 있는 크롬 확장 프로그램입니다.
클릭 한 번으로 모바일, 태블릿, 노트북, 데스크톱 화면을 확인할 수 있어 홈페이지 제작과 반응형 테스트에서 자주 사용하는 도구입니다.
이번 글에서는 Window Resizer 설치 방법부터 사용법, 실무 활용법까지 자세히 소개해 보겠습니다.
Window Resizer란?
Window Resizer는 브라우저 창의 크기를 다양한 기기 해상도에 맞게 변경할 수 있는 크롬 확장 프로그램입니다.
직접 창 크기를 조절할 필요 없이 미리 등록된 해상도를 선택하기만 하면 해당 크기로 즉시 변경됩니다.
대표적으로 다음과 같은 작업에서 활용됩니다.
- 반응형 홈페이지 테스트
- 모바일 화면 확인
- 태블릿 화면 확인
- 랜딩페이지 검수
- 상세페이지 레이아웃 확인
- UI 테스트
홈페이지 제작을 하는 디자이너와 퍼블리셔라면 한 번쯤은 사용해 볼 만한 도구입니다.
설치 방법
크롬 웹 스토어 접속
크롬 웹 스토어에서 Window Resizer를 검색합니다.
공식 확장 프로그램을 선택한 후 설치를 진행합니다.
chrome 웹 스토어 바로 가기 →Chrome에 추가
Chrome에 추가 버튼을 클릭합니다.
설치 권한을 확인하면 몇 초 안에 설치가 완료됩니다.
확장 프로그램 고정하기
브라우저 오른쪽 상단 퍼즐 아이콘에서 Window Resizer를 고정해 두면 필요할 때 바로 실행할 수 있습니다.
기본 사용 방법
홈페이지 열기
테스트하고 싶은 홈페이지를 실행합니다.
가능하면 모든 콘텐츠가 로딩된 상태에서 테스트를 시작하는 것이 좋습니다.
Window Resizer 실행
브라우저 상단의 Window Resizer 아이콘을 클릭합니다.
등록된 해상도 목록이 표시됩니다.
원하는 해상도 선택하기
확인하고 싶은 해상도를 선택하면 브라우저 창이 자동으로 변경됩니다.
예를 들어
- iPhone
- Galaxy
- iPad
- Full HD
- MacBook
등 다양한 화면 크기를 선택할 수 있습니다.
레이아웃 확인하기
화면이 변경되면
- 버튼 위치
- 이미지 비율
- 텍스트 줄바꿈
- 메뉴 표시 방식
- 콘텐츠 간격
등을 하나씩 확인하면 됩니다.
어떤 상황에서 활용하면 좋을까요?
홈페이지 제작
반응형 홈페이지는 이제 선택이 아니라 기본입니다.
Window Resizer를 사용하면 여러 해상도에서 홈페이지가 정상적으로 표시되는지 빠르게 확인할 수 있습니다.
상세페이지 제작
상세페이지 역시 모바일에서 보는 사용자가 많습니다.
PC에서는 문제가 없어 보여도 모바일에서는 이미지 크기나 글자 간격이 달라질 수 있습니다.
미리 확인하면 수정 시간을 줄일 수 있습니다.
랜딩페이지 검수
광고용 랜딩페이지는 모바일 사용자의 비율이 높은 경우가 많습니다.
버튼이 잘 보이는지,
CTA가 화면 아래로 밀리지 않는지 확인하는 데 도움이 됩니다.
UI 디자인 확인
카드 UI,
메뉴,
팝업,
폼(Form)
등도 해상도에 따라 배치가 달라질 수 있습니다.
다양한 화면에서 테스트하면 사용자 경험을 개선하는 데 도움이 됩니다.
Window Resizer의 장점
직접 사용하면서 가장 만족했던 점은 반응형 테스트를 반복하기 쉬워졌다는 것이었습니다.
브라우저 창을 손으로 줄였다 늘렸다 하는 대신 한 번의 클릭으로 여러 화면을 확인할 수 있어 테스트 시간이 크게 줄었습니다.
특히 클라이언트 검수 전 마지막 확인 과정에서 자주 활용하고 있습니다.
사용할 때 주의할 점
실제 기기와 완전히 같지는 않습니다.
Window Resizer는 브라우저 창의 크기를 변경하는 도구입니다.
실제 스마트폰의 운영체제나 브라우저 환경까지 동일하게 구현하는 것은 아닙니다.
최종 검수는 실제 기기에서도 확인하는 것이 좋습니다.
확대 비율 확인하기
브라우저 확대 비율이 100%가 아니라면 화면이 다르게 보일 수 있습니다.
테스트 전에는 확대 비율을 확인하는 것을 추천합니다.
브라우저 UI는 포함되지 않습니다.
주소창이나 브라우저 인터페이스는 실제 모바일 환경과 차이가 있을 수 있습니다.
레이아웃 확인 용도로 활용하는 것이 좋습니다.
함께 사용하면 좋은 크롬 확장 프로그램
GoFullPage
반응형 화면을 확인한 뒤 전체 페이지를 저장하기 좋습니다.
Page Ruler
버튼과 콘텐츠 크기를 픽셀 단위로 측정할 수 있습니다.
CSS Peeper
반응형 화면에서 변경되는 CSS 스타일을 분석하기 좋습니다.
WhatFont
모바일 화면에서 폰트 크기와 가독성을 확인할 수 있습니다.
ColorZilla
화면 크기가 달라져도 브랜드 컬러가 일관되게 적용되는지 확인할 수 있습니다.
실무 활용 예시
새로운 홈페이지를 검수할 때 저는 먼저 Window Resizer로 PC와 모바일 화면을 모두 확인합니다.
그다음 Page Ruler를 사용해 버튼과 콘텐츠 폭을 측정하고, WhatFont로 모바일에서도 글자가 읽기 편한 크기인지 확인합니다.
이후 CSS Peeper로 버튼 스타일과 여백이 해상도에 따라 어떻게 변경되는지 분석하고, 문제가 없는 것을 확인한 뒤 GoFullPage로 최종 화면을 저장합니다.
이 과정을 거치면 오픈 이후 발생할 수 있는 반응형 오류를 미리 발견하는 데 도움이 되었습니다.
경험 나눔
예전에는 홈페이지를 완성한 뒤 PC 화면만 확인하고 작업을 마무리하는 경우가 많았었습니다.
하지만 프로젝트를 진행할수록 실제 방문자의 대부분이 모바일을 사용한다는 점을 체감하게 되었습니다.
PC에서는 완벽해 보였던 화면도 모바일에서는 버튼이 겹치거나 텍스트가 너무 작게 표시되는 경우가 있었고, 이런 문제는 오픈 후에 발견되는 경우도 있었습니다.
Window Resizer를 사용하기 시작한 이후에는 작업을 마무리하기 전에 여러 해상도를 확인하는 습관이 생겼습니다.
처음에는 작은 과정처럼 느껴졌지만, 반복할수록 수정 요청이 줄어들었고 홈페이지의 완성도도 함께 높아졌습니다.
지금도 홈페이지 제작 프로젝트에서는 디자인보다 먼저 다양한 화면에서 어떻게 보이는지 확인하는 과정을 중요하게 생각하고 있습니다.
마무리
Window Resizer는 단순히 브라우저 창의 크기를 변경하는 도구가 아닙니다.
사용자의 다양한 화면 환경을 미리 확인하고 반응형 홈페이지의 완성도를 높이는 실무 도구입니다.
홈페이지 제작이나 랜딩페이지, 상세페이지를 제작하고 있다면 오픈 전에 꼭 한 번 다양한 해상도로 테스트해 보시길 추천드립니다.
작은 확인 과정이지만 사용자 경험과 프로젝트 완성도에는 큰 차이를 만들어 줄 수 있습니다.
