크롬 개발자 도구를 이용한 반응형 블로그 테스트 방법

HowTo - 크롬 개발자 도구로 반응형 블로그 테스트하기

 요즘 블로그 접속 통계를 보면 모바일 기기를 이용한 비율이 점점 높아지고 있습니다. 특정 기기, 특정 해상도에만 최적화된 블로그는 상황에 따라 가독성이 매우 떨어지게 됩니다.

 만약 일반 PC에서 보던 화면이 모바일에서도 그대로 보인다면 어떨까요? 글자도 작아서 알아보기 힘들고, 무엇보다 제한된 모바일 기기 해상도에서 보기가 불편하다면 아무리 좋은 컨텐츠를 가지고 있더라도 방문자들이 오래 머물 수 있도록 붙잡아 두기가 힘듭니다.

 이 때문에 대부분 사이트에서는 사용자의 해상도에 따라 화면이 변하는(Responsive) 웹, 즉 반응형 홈페이지를 운영하고 있습니다. 반응형이란 쉽게 말해 컴퓨터로 접속할 때와 모바일로 접속할 때 접속된 기기 해상도에 따라 반응하여 최적화된 화면 구성을 보여주는 홈페이지입니다.

 티스토리 블로그 역시 반응형 스킨이 큰 인기를 얻고 있고, 많은 블로거가 반응형으로 변경하는 추세입니다. 기존에 운영 중이던 블로그를 반응형으로 변경하실 계획이거나, 기존 스킨을 자신만의 스타일로 변경하고 싶은 분들에게, 모든 기기에서 정상적으로 보여질까 하는 걱정은 당연할 테죠.

 오늘은 반응형 웹 사이트 적용 시 각기 다른 모바일 기기에서 얼마나 잘 호환되는지 테스트할 수 있는 간편한 방법을 살펴보겠습니다. 반응형 웹 테스트를 할 수 있는 서비스(크롬 확장 프로그램, 온라인 서비스 등)들은 많지만, 크롬 개발자 도구를 이용해 쉽게 확인할 수 있습니다.

크롬 개발자 도구, 이런 기능이?

반응형 웹 테스트를 위한 사이트 접속 후 마우스 우측 버튼을 눌러 [검사(N)]을 누르거나, [Ctrl+Shift+I] 키를 눌러주세요.

크롬 화면이 반으로 분할되고, 우측에 개발자 도구 관련 화면이 표시됩니다. 상단의 [Togle device toolbar] 버튼을 누르거나, [Ctrl+Shift+M] 키를 눌러주세요.

 좌측 화면 상단의 [Responsive ▼] 선택 시 드롭다운 메뉴에서 Galaxy S5, Pixel2, IPhone 등 기기를 선택하여 반응형 웹 동작을 테스트해 볼 수 있습니다.

선택된 모바일 기기에서 보여지는 화면 해상도 역시 확인할 수 있습니다. 

삼성 갤럭시, 픽셀, 아이폰 등 다양한 기종의 스마트폰 화면을 경험할 수 있지만, 최근 출시된 모바일 디바이스들이 모두 포함되진 않습니다.

 드롭다운 메뉴에 나타난 기기 이외에 다른 모바일 디바이스를 확인하고 싶다면, [Edit] 버튼 선택 시 우측에 추가 기기 목록이 표시됩니다

 또한 목록에 없는 최근 출시된 모바일 디바이스를 확인하고 싶다면 [Add custom device] 버튼을 눌러 원하는 디바이스 및 해상도를 사용자가 직접 추가할 수 있습니다.

제한된 화면에서 사용하는 모바일 기기 특성상 세로 모드가 아닌 가로 모드를 이용하는 사용자도 많습니다. 상단의 [Rotate] 버튼을 누르면 가로 화면 역시 확인할 수 있습니다.

[Edit → Add custom device]를 통해 기기 및 해상도 추가하는 것이 귀찮다면, [Responsive] 선택 후 우측의 해상도 수치를 직접 수정하여 간편하게 확인하는 방법도 있습니다.

 크롬 개발자 도구는 매우 유용합니다. 홈페이지의 리소스 파일을 매핑해 브라우저 상에서 직접 수정을 한다거나, 단순히 모바일 기기의 출력 화면만 확인하는 것이 아닌 디버깅도 할 수 있고 페이지를 분석해 성능 향상 포인트와 최적화 방법을 알려주기도 합니다. 뭔가 전문적이죠?

 그러나 단순히 블로그를 운영하며 직접 나만의 스킨을 만들거나, 반응형 스킨이 정상적으로 출력되는지 확인하는 용도로도 사용할 수 있습니다.