플크디자인

인터넷 브라우저 종류에는 여러 가지가 있습니다. 인터넷 익스플로러, 구글 크롬, 마이크로소프트 엣지, 파이어폭스, 오페라, 네이버 웨일 브라우저 등등 많은 종류의 브라우저가 있는데, 여러분이 사용하는 메인 브라우저는 어느 것인가요?

 

 

 

 

저는 주로 구글 크롬을 사용합니다.

 

크롬의 장점은 가볍고 깔끔하며, 인터넷 반응속도가 빨라 다른 브라우저를 사용하면 답답하게 느껴집니다. 또한 크롬 웹 스토어에서 제공하는 많은 확장 프로그램을 사용하여 좀 더 편하게 쓸 수 있는 방법이 있습니다.

 

오늘은 이 확장 프로그램 중 하나인 Window Resizer라는 확장 프로그램에 대해 소개해 드리겠습니다.

 

Window Resizer??

 

 

Window Resizer 확장 프로그램은 크롬 브라우저 창의 크기를 원하는 대로 조정하여 다양한 화면 해상도를 나타냅니다. 이 확장 프로그램은 다양한 해상도를 나타내기 위해 브라우저 창의 크기를 조정합니다.

 

웹 디자이너와 개발자가 다양한 브라우저 해상도에서 레이아웃을 테스트할 때 특히 유용합니다. 해상도는 사용자가 원하는 대로 정할수 있습니다.

 

브라우저 창의 크기를 원하는대로 조절하여 사용할 수 있는 확장 프로그램입니다. 물론 윈도우에서 크롬뿐 아니라 창모드로 열리는 프로그램은 대부분 기본적으로 사이즈 조절이 자유롭게 가능합니다.

 

그럼에도 이 Window Resizer 확장 프로그램을 사용하는 이유는 브라우저 해상도에서 레이아웃을 테스트할 때 특히 유용하기 때문입니다.

 

윈도우 리사이저 설치하기

크롬 브라우저를 실행하면 북마크 바 맨 앞에 나오는 앱을 선택하면 웹 스토어가 있습니다.

웹 스토어를 선택해줍니다.

 

웹 스토어

 

웹 스토어 검색란에 window resizer를 치면 확장 프로그램 3개가 나오는데 그중 맨 위에 있는 제공업체: coolx10.com 확장 프로그램을 선택합니다.

 

 

 

Chrome에 추가를 선택하고 확장 프로그램 추가를 선택하면 설치가 완료됩니다.

 

 

 

창 크기 조절하기

 

반응형

 

Alt+Shift+W 단축키를 누르면 window resizer 팝업창이 뜹니다.

지정된 원하는 크기를 선택하거나 직접 사용자가 사이즈를 지정할 수 있습니다.

 

 

사용자 지정 사이즈 사용 시 Resize window - Resize viewpoint 2가지 모드가 있습니다.

 

  • Resize window는 탭, 북마크,주소창을 포함한 전체 창 사이즈.
  • Resize viewpoint는 탭, 북마크,주소창을 제외한 창 사이즈.

 

지정 사이즈 변경 및 단축키 지정하기

Alt+Shift+W 키를 눌러 팝업창이 뜨면 톱니바퀴 모양을 선택하여 설정으로 갑니다.

presets 메뉴에서 기본으로 설정된 사이즈를 원하는 사이즈로 변경하거나 삭제할 수 있습니다.

 

 

hotkeys 메뉴에서 configure the shortcuts를 선택합니다.

 

 

설정창이 뜨면 연필 모양을 눌러 원하는 키를 설정합니다.

 

단축키를 설정하면 지정한 창 사이즈를 단축키로 바로 변경 가능합니다.

 

 

윈도우 리사이저 활용법

반응형

 

윈도우 리사이저 확장 프로그램을 이용한 제가 사용하는 활용법입니다.

 

창 2개를 띄우고 브라우저를 사용해야 할때 왼쪽에 메인창을 띄우고 왼쪽에 서브창을 모바일 버전으로 띄워놓고 사용하면 편합니다.

 

 

디스플레이 해상도 기준 1920 X 1080일때, 아래와 같이 설정하면 Alt+1 키로 메인창 사이즈와 위치가 고정되고 Alt+2키로 서브창을 고정합니다.

 

  • 메인창: 단축키 Alt+1, 사이즈 1430  X 1040, 위치 0 X 0 
  • 서브창: 단축키 Alt+2, 사이즈 480 X 1040, 위치 1420 X 0

 

 

이렇게 인터넷 브라우저 창 크기와 위치를 고정해 놓고 사용하면 창 1만 쓸때도 좌측 공간을 남겨 메모장 같은걸 띄워 놓고 사용할때도 편합니다.

 

 

마치며..

윈도우에서 프로그램 창은 기본적으로 원하는 대로 자유롭게 조절할 수 있지만, 이렇게 확장 프로그램을 쓰는 이유는 사용자가 지정한 사이즈로 바로바로 변환할 수 있기 때문입니다.

 

또한 모바일 해상도로 설정 시 모바일 화면과 같은 해상도로 나타나서 티스토리 블로그 운영시 스킨 변경이나 수정할 때 모바일 화면에서 나오는 화면을 PC로 확인할 수 있습니다.

 

반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band