크롬웹브라우저에서 모바일웹을 위한 모바일 화면 에뮬레이터

출처: http://ktj-soft.tistory.com/560

 

요즘에 모바일웹을 공부하고 있는데요 실행결과를 매번 스마트폰에서 보려니 번거롭네요.
하지만...!!!!
데스크탑용 웹브자라우저(BROWSER) 크롬(CHROME)에서 지원하는 확장 프로그램을 

설치하면 아주 편리하게 테스트 할 수 있답니다.
모바일웹의 에뮬레이터(emulator)기능을 제공합니다.
   
크롬에서 아래 화면(1)과 같이 Chrome 맞춤 설정 및 제어를 누르고 
  
  

( 화면 1 )

아래 화면(2)와 같이 확장프로그램 > 더 많은 확장 프로그램 다운로드 > Ripple Emulator 를 설치하세요
 
           Ripple Emulator (Beta)
           A browser based html5 mobile application development and testing tool 
           => HTML5 모바일 어플리케이션 개발과 테스트를 위한 브라우저랍니다.
 

( 화면 2 )
 

설치가 되었으면 아래 화면(3)처럼 주소입력창 옆에 Ripple 아이콘이 보입니다
 

( 화면 3 )
 
 
아래 화면(4)와 같이 Ripple 에물레이터를 동작시키거나 중지시킬 수 있습니다.
 

( 화면 4 )
 

에뮬레이터를 동작(Enable)시키고 HTML5 레이아웃에서 코딩했던 페이지를 띄어보겠습니다
처음 방문하는 사이트의 경우에는 플랫폼을 선택하라고 합니다.
나중에 변경할 수 있도록 되어있으니 디폴트로 "Mobile Web"을 선택합니다.
 

( 화면 5 )

아래 화면(6)처럼 HTML5 로 코딩했던 페이지가 잘 뜨네요.
이는 스마트폰에서도 제대로 보인다는 얘기죠.
해상도와 플렛폼을 바꿔가면서 테스트해보면 작업중인 모바일웹 페이지가 어떻게 
보일련지 미리 알 수 있습니다.
 

( 화면 6 )
 
저는 현재 모바일용웹 프레임워크를 사용하여 웹페이지를 모바일에서도 잘 보이게
하는걸 공부중이랍니다. 모마일웹 프레임워크중에서도 JQuery 모바일 프레임워크를 보고있답니다.
이는 웹페이지를 마치 앱처럼 보이게 하는 웹앱을 구현하는 방법중에 하나이고요.
방법은 의외로 간단하네요.
 
HTML -> CSS -> JAVA SCRIPT  -> HTML5 -> JQuery 순서대로 공부하시고 나면
모바일웹쪽 공부하시기가 정말 수월하실거여요.
 
정리를 해서 제 블로그에 올리도록 하겠습니다. ^^