본문 바로가기

Productivity

Responsively App - 다양한 화면에서의 반응형 웹 동시에 확인하기

웹페이지를 만들 경우, 태블렛 노트북, 휴대폰 등 다양한 화면에서 내 페이지가 어떻게 보이는지 확인하고 싶을 때가 많다.

 

크롬 개발자도구에서 각 화면 크기별로 페이지 확인을 할 수는 있지만, 한번에 큰 그림을 그리기는 어려워서 번거롭다.

 

그런데 Responsively App 이라는 매우 유용한 앱을 알게 되었는데, 한 눈에 다양한 화면에서 내 웹페이지가 어떻게 유저한테 보이는지 확인할 수 있다.

 

 

 

https://responsively.app/

 

최근에 리액트 기반으로 만들어본 웹페이지를 이용해서 테스트해 보았다.

(https://hanalia.github.io/react_rec_hosting/)

 

Material UI 및 Grid Container 기반으로 컴포넌트를 구성하였기 때문에 화면 크기에 따라서 그래프와 표가 나란히 보일수도, 위 아래로 보일 수 있다.

 

이 앱을 사용하니 각 화면에서 어떻게 보이는지 한 눈에 확인가능하다.