크롬 개발자 도구를 이용해 반응형 웹 사이트 모바일 테스트하기

부트스트랩 등 반응형 웹사이트를 제작 시 PC 및 태블릿 모바일 기기에 따라 표시되는 게 모두 다를 수 있습니다. 따로 모바일 전용 페이지를 만드는 경우도 있긴 하지만 티스토리 블로그의 경우에도 똑같이 반응형 스킨을 사용하는 경우에도 모두 포함됩니다.

사이트의 HTML 태그 및 CSS 등을 건드리게 되면 얼마나 수정했는에 따라 모든 기기들이 표시되는 게 또 다를 수 있어 저는 그래서 스킨을 수정하게 되면 PC뿐만이 아닌 주로 스마트폰을 위주로 보지만 거의 완성도에 가까우면 태블릿까지 신경 쓰게 됩니다.

크롬 개발자 도구 반응형 웹 테스트하기

반응형 웹 테스트를 하는 웹 서비스들이 많지만 크롬 브라우저를 이용하게 되면 개발자 도구를 이용해 보다 더 전반적인 자유로운 개발 테스트가 가능합니다.

1) 저의 블로그를 통해 설명을 드리지만 해당 반응형 웹사이트를 열고 마우스 오른쪽 버튼을 눌러 검사 버튼을 선택하거나 Ctrl+Shift+i 단축키를 누릅니다.

2) 크롬의 화면이 분할되는 것을 볼 수 있는데 오른쪽 개발자 도구 상단에 Toggle device Toolar를 선택합니다.

3) Responsive ▼를 선택하면 Galaxy, Pixel, iPhone 등 여러 기기를 선택할 수 있습니다. 보다 더 다양한 기기를 추가하고 싶으면 Edit를 선택하면 됩니다.

4) Galaxy S5를 선택해봤습니다. 그럼 해당 사이즈에 맞게 실제 다소 차이가 날 수는 있어도 모바일에선 어떻게 보이는지 확인할 수 있습니다.

5) 기본이 세로 모드이지만 가로모드로 돌려서 볼 수 있습니다. 저는 디자인을 바라본다면 가로모드도 굉장히 신경 쓰고 있는 편입니다.

6) 직접 사이즈를 입력하거나 마우스를 이용해 직접 자유롭게 조절할 수 있습니다. 저는 자세하게 스킨을 수정할 경우 보통 많이 쓰는 기능 중 하나입니다.

7) 배율이 기본적으로 100%이지만 최대 150%까지 확대해서 볼 수 있습니다.

마지막으로 저는 블로그의 기능을 개선한다거나 디자인을 조금이래도 변경하고 싶을 경우 개발자 도구를 먼저 쓰고 있기 때문에 매우 많은 도움을 받고 있어 혹시 공부를 하신다면은 개발자 도구를 활용하시는것도 좋은 경험이고 공부일거라 생각합니다.