본문 바로가기

Developer

아이폰/아이패드 그리고 안드로이드까지 모바일 기기의 웹페이지 테스트 혹은 디버깅을 위한 Adobe Shadow

 

얼마 전 아이패드에서만 Html UI가 깨지는 현상이 있어서 확인을 하려고 신나게 찾아 해맨적이 있습니다.

 

결론은 외부에서 접근이 가능한 URL을 가지고 있거나 HTML 파일로 있는 경우에만 가능하다라고 생각하고 있었는데요..

오늘도 그와 비슷한 툴이 있어 소개 해 드립니다.

 

Adobe에서 Shadow라는 놈을 발표했습니다.

 

 

PC에 화면(크롬)을 모바일 기기에 뿌려 주는 형태인 것 같습니다.

 

사용 방법은 아래와 같습니다.

  1. PC에 shadow 를 설치한다.
  2. 크롬에 Shadow Extension을 설치한다.
  3. 각각의 모바일 디바이스에 앱을 설치한다. (2012.08.24 현재 iOS, Android, Amazon Android만 지원)
  4. 설치한 후 PC의 IP나 Host 명으로 접근한다.
  5. 크롬의 Shadow Extension에서 접근하려고 하는 디바이스의 코드를 입력한다.
  6. 크롬에 현재 열린 페이지를 각 디바이스에서 뿌려준다.

 

중요한 것이 같은 네트웤에 있어야 하며 크롬에서만 가능하다는 것입니다.

 

그럼 어떻게 설치 되고 확인이 가능한지 진행해 보도록 하겠습니다.

자세한 내용은 http://forums.adobe.com/docs/DOC-1673 에서 화긴 가능합니다.

 

먼저 Shadow를 설치합니다.

 

파일은 아래의 링크에서 다운로드 가능합니다.

http://labs.adobe.com/downloads/shadow.html

 

Windows : http://labsdownload.adobe.com/pub/labs/shadow/shadow_r4_win_082112.msi (MSI, 29.5 MB)

Mac : http://labsdownload.adobe.com/pub/labs/shadow/shadow_r4_mac_082112.dmg (DMG, 25.9 MB)

 

2012.08.24 현재 Ver. Release 4입니다.

 

 

 

그리고 아래 링크에서 크롬 익스텐션을 설치합니다.

https://chrome.google.com/webstore/detail/ijoeapleklopieoejahbpdnhkjjgddem

 

 

 

추가 하시면 아래와 같이 Sd가 추가 되어 있는 것을 볼 수 있습니다.

 

 

위와 같은 모습입니다.

 

제 컴퓨터 명이 나오네요…

 

그 다음 각각의 모바일 기기에 앱을 설치 해 보도록 하겠습니다.

먼저 iOS : http://www.adobe.com/go/sd_ios_app

 

Android : http://www.adobe.com/go/sd_android_app

 

설치 후 PC와 연결을 진행합니다.

아래 화면은 iPad에서 캡쳐 하였습니다.

 

컴퓨터 명을 입력하면 되어야 하는데.. 잘 안되어서 IP를 직접 입력하였습니다.

 

Passcode를 PC에 입력하면 됩니다.

 

크롬의 익스텐션에 보면 + 표시가 됩니다.

 

이놈을 입력하면 아래와 같이 Passcode를 입력 할 수 있습니다.

 

 

그러면 아래와 같이 보입니다.

먼저 PC의 크롬입니다.

 

그리고 iPad

 

익스텐션에서 캡쳐도 가능합니다.

 

카메라 버튼을 누르면

 

사진이 해당 폴더로 들어옵니다.

 

아래와 같은 정보도 같이 들어옵니다.

url = http://forums.adobe.com/docs/DOC-1673
page_size = 124378 bytes

os_name = iOS
os_version = 5.1.1
device_model = iPad2 WiFi
pixel_density = 132 ppi

 

그리고 익스텐션에서 <>를 선택하면 Html을 직접 수정하며 확인 할 수 있습니다.

 

 

이거가 최대 강점입니다.

직접 편집하고 style도 넣어보고…

 

저는 솔직히 제 로컬의 Page를 그대로 보여 주는 툴인 줄 알고 기대하고 설치했습니다.

 

헌데..

제 로컬의 머신에 있는 페이지는 불러지지가 않네요..

 

제 서버에 페이지입니다만 iPad에서는 아래와 같이 보입니다.

 

그리고 모바일 기기에서 링크를 클릭하면 그 곳으로 이동합니다.

하지만 돌아갈 수 있는 방법이 없어요~~~

페이지를 아래로 내리면 새로 로딩하네요 ㅡ.ㅡ;;;

 

흠… 결론은 별로에요.. ㅡ.ㅡ;;

괜히 힘들게 설치했어!!

 

빨리 업그래이드가 되어서… 인증페이지도 인증되고.. 잘 보였으면 좋겠네요 *_*;;

Html 편집이랑 script 디버깅 되는 건 좋긴 한데.. 흠..

 

아무튼 여기까지 입니다.

 

 

 

감사합니다.