google_resizer

반응형웹 개발 테스트 툴- Resposive web Test Tool

반응형웹 개발시 테스트 도구

 
 
[adsense]  
 
부트스트랩 등 반응형웹 개발 프레임워크를 사용하여 개발할때 테스트하기 좋은 툴 3가지 입니다.

반응형 웹으로 사이트를 제작하거나 웹앱을 제작하려고 할때 각각 디바이스에 맞추어
화면의 디자인을 직접 확인 해 볼수 있는 테스트 툴로

크롬 개발자 도구, 다음 트로이를 많이 사용해 왔는데,
얼마전 구글에서 Google resizer 라는 툴이 새로 나와서 사용해 봤는데 너무 간단하고 사용하기 좋은 거 같습니다.

1. 크롬 개발자 도구.

크롬 개발자 도구를 실행할때는 F12 또는 해당 페이지에서 마우스 오른쪽 버튼으로 요소검사를 클릭해서 실행 할 수 있습니다.

크롬개발자도구

왼쪽 위의 디바이스(device)를 클릭하면 아이폰,갤럭시,아이패드 등등
각각 디바이스별로 선택해서 해당 디바이스의 화면을 테스트 해 볼수 있습니다.
개발자 도구에서 테스트 했을때 가끔 갤럭시폰과 아이폰의 좌,우 padding 이나 margin이 실제 폰과 약간 다를때가 있습니다.
사용해 본 경험으로는….

크롬개발자도구_모바일

2. 다음 트로이

 
다음 트로이바로가기

다음 트로이도 웹앱과 반응형웹을 제작할때 자주 사용하는 편입니다.
크롬 개발자 도구와 비슷 하긴 하지만 사용이 더 편리한 점이 있습니다.
크롬 개발자 도구는 선택한 디바이스의 화면만을 볼 수 있고, 다른 디바이스를 선택하면 다시 바뀝니다.
한가지의 디바이스만을 볼 수 있는거죠
다음 트로이는 선택한 화면이 계속 추가 되면서 여러가지 디바이스에서 적용 되는 반응형 화면을 한번에 확인 할수 있는 점이 편리 합니다.

다음트로이

사용방법이 간단해서 딱 보시면 아실거라 머 별도로 설명할 것이 없습니다.
그냥, 화면위의 주소에 반응형웹을 테스트할 사이트 주소를 입력하고 왼쪽에서 테스트할 디바이스만 선택해 주면 끝!
여러개의 디바이스를 계속해서 추가해서 볼 수 있습니다.
 
 
[adsense]  
 

3. 구글 리사이저 (Google Resizer)

 
구글 리사이저바로가기  
 
요즘 반응형 웹으로 사이트를 제작시에 사용하는 테스트 툴 입니다.
각 디바이스 별로 테스트를 해 볼수 있는 다음 트로이도 좋지만 미디어쿼리를 작성할때는 화면사이즈(px)로 작성을 하기 때문에
미디어쿼리 코딩을 할때는 편한거 같네요

google_resizer

구글리사이저 사이트에 접속해서 반응형웹을 테스트할 주소를 넣어주면 화면 위에 사이별로 픽셀이 나오고
미디어쿼리를 작성할때 픽셀을 참고로 작성하면 편합니다.

리사이저테스트

오른쪽위의 태블릿 아이콘이나 스마트폰 아이콘을 클릭하면 그리드가 나오고 화면에 맞는 픽셀이 보입니다.
이제 이 픽셀에 맞추어 미디어쿼리를 작성하여 반응형을 테스트하고 적용할 수 있습니다.

리사이저테스트2

이 도구들만 있으면 반응형웹으로 제작할때 전 처럼 여러디바이스를 구해서 테스트 한다거나
크롬의 화면을 늘이거나 줄여가면서 하던 작업들을 빠르고 간편하게 할 수 있어서 편리합니다.

구글 리사이저로 미디어쿼리를 작성,테스트 하고 다음 트로이를 이용해서 각각 디바이스 별로 테스트 해보면 되겠죠??

Leave a Reply

Your email address will not be published. Required fields are marked *