브라우저 해상도 변경하기

안녕하세요, 뷰저블입니다. 해상도에 따라 UI가 변경되는 반응형 페이지를 운영 중이신가요? 이번 글에서는 반응형 페이지를 분석하실 때, 도움이 될 "브라우저의 해상도를 변경하는 방법"을 소개합니다. :) *이번 글은 1개의 URL이 사용자 Agent를 식별하여 다른 페이지 UI를 제공하거나, Agent에 따라 다른 URL로 리다이렉트될 경우 해당되지 않습니다. 디바이스를 변경하는 방법은 아래 링크를 참고해 주세요. ► PC에서 모바일 환경 재현하기: https://forum.beusable.net/ko/post/876 A. 브라우저 창 사이즈 조정 해상도를 변경하는 가장 간단한 방법은 브라우저의 창 사이즈를 직접 마우스로 조작하는 것입니다. 창의 네 모서리에 커서를 올리면, 커서 아이콘이 ↔︎ 양쪽 화살표로 변경되는데요,이 상태에서 창을 잡고 끌면 (Drag) 브라우저를 원하는 사이즈로 변경할 수 있습니다. B. 개발자 도구에서 변경하기 구체적으로 특정 디바이스의 해상도를 구현하고 싶은 경우, 개발자 도구에서 정확한 값을 입력해야 합니다. 크롬에서 [F12] 키를 눌러서 개발자 도구를 엽니다. (맥(mac)인 경우, command + option + I(i) 버튼을 눌러주세요.)개발자 도구 좌측에 위치한 디바이스 모양의 아이콘(기기 툴바 전환(Toggle device tool bar))을 클릭해 주세요. 브라우저의 크기를 변경할 수 있는 UI가 출력됩니다. 크기(Dimensions)를 드롭다운해서 제공되는 디바이스를 클릭하거나, 직접 가로*세로 사이즈를 입력할 수 있습니다. 오른쪽, 아래, 우측 하단 모서리에 제공되는 바(bar)를 이용해서 드래그로 사이즈를 변경할 수도 있습니다. 이번 글에서는 브라우저의 해상도를 변경하는 방법에 대해 소개해드렸습니다! 첫번째 방법(A)에 대해서는 다들 잘 알고 계셨을텐데요, 같이 공유드린 개발자도구(B)를 활용하시면 해상도를 보다 손쉽고 정확하게 셋팅할 수 있으실 거에요! 여러분의 데이터 분석과 테스트 환경 셋팅에 도움이 되었으면 좋겠습니다. :) 그럼, 공유드릴 유용한 정보가 있다면 다시 찾아뵙겠습니다!