A. 브라우저 창 사이즈 조정

해상도를 변경하는 가장 간단한 방법은 브라우저의 창 사이즈를 직접 마우스로 조작하는 것입니다.

창의 네 모서리에 커서를 올리면, 커서 아이콘이 ↔︎ 양쪽 화살표로 변경되는데요,

이 상태에서 창을 잡고 끌면 (Drag) 브라우저를 원하는 사이즈로 변경할 수 있습니다.

B. 개발자 도구에서 변경하기

구체적으로 특정 디바이스의 해상도를 구현하고 싶은 경우, 개발자 도구에서 정확한 값을 입력해야 합니다.

크롬에서 [F12] 키를 눌러서 개발자 도구를 엽니다. (맥(mac)인 경우, command + option + I(i) 버튼을 눌러주세요.)
개발자 도구 좌측에 위치한 디바이스 모양의 아이콘(기기 툴바 전환(Toggle device tool bar))을 클릭해 주세요. 브라우저의 크기를 변경할 수 있는 UI가 출력됩니다.
크기(Dimensions)를 드롭다운해서 제공되는 디바이스를 클릭하거나, 직접 가로*세로 사이즈를 입력할 수 있습니다. 오른쪽, 아래, 우측 하단 모서리에 제공되는 바(bar)를 이용해서 드래그로 사이즈를 변경할 수도 있습니다.

이번 글에서는 브라우저의 해상도를 변경하는 방법에 대해 소개해드렸습니다!

첫번째 방법(A)에 대해서는 다들 잘 알고 계셨을텐데요, 같이 공유드린 개발자도구(B)를 활용하시면 해상도를 보다 손쉽고 정확하게 셋팅할 수 있으실 거에요! 여러분의 데이터 분석과 테스트 환경 셋팅에 도움이 되었으면 좋겠습니다. :)

그럼, 공유드릴 유용한 정보가 있다면 다시 찾아뵙겠습니다!