모바일 웹 디버깅
처음 모바일 웹 개발을 시작하는 사람이 느끼는 가장 큰 어려움은 아마도 모바일 웹어서 디버깅하는 것일 것이다. 모바일 기기는 데스크톱에 디해 화면도 작고 입력장치도 불편해 실제로 개발하고 디버딩하는 데 많은 어려움이 있다. 특히, 데스크톱에서 지원하는 디버깅 도구에 익숙한 개발자라면 답답한 정도가 더할 것이다.
모바일 웹 개발자 도구
개발이 완료된 프로그램을 대상으로 디버깅하기도 하지만 개발하고 있을 때도 개발된 부분을 확인하고 테스트하기 위해 디버깅을 실시한다. 실제 기기에 개발한 소스코드를 반영하고, 테스트하고, 디버딩하는 것은 매우 번거로운 일이다. 이러한 번거로움을 해소하려고 에뮬레이터나 시뮬레이터, 브라우저 개발자 도구를 이용해 데스크톱 화녕에서 테스트와 디버깅을 한다.
| 개발자 도구 | 실행환경 | 대상 장비 | 특징 |
|---|---|---|---|
| 안드로이드 에뮬레이터와 DDMS |
모든 OS | 안드로이드 | 안드로이드 SDK에 포함된 에뮬레이터와 DDMS. DDMS로 안드로이드의 상세 로그를 볼 수 있고, 에뮬레이터를 이용해 기능을 확일 할 수 있다. |
| iOS Simulator와 iWebinspecor |
OSX | iOS 4.x 이상 | iWebinspecor를 이용해 브라우저 개발자 도구와 같이 디버깅 할 수 있다. iOS Simulator를 이용해 테스트 할 수 있다. |
| 크롬 브라우저 개발자 도구 |
모든 OS | 안드로이드, iOS |
UserAgent 정보를 변경할 수 있고, 터치 이벤트를 발생시킬 수 있다. 데스크톱과 같은 디버깅 환경을 제공한다. 특히 웹킷 기반의 안드로이드와 iOS 브라우저의 작동 원리는 유사하다. 데스크톱 크롬 31 이상에서는 USB로 원격 디버딩이 가능하다. 단, 안드로이드 4.0 이상의 안드로이드용 크롬에서만 가능하다. |
| 사파리 브라우저 개발자 도구 |
모든 OS | 안드로이드, iOS |
UserAgent 정보를 변경할 수 있다. 데스크톱과 같은 디버깅 환경을 제공한다. 특히 웹킷 기반의 안드로이드와 iOS 브라우저의 작동 원리는 유사하다. 사파리 6 이상, Mac OSX Lion 이상, XCode 4.5와 iOS 6 SDK가 있을 경우, iOS 6.x 부터는 원격 디버깅 환경을 제공한다. |
안드로이드 SDK에 있는 에뮬레이터와 DDMS는 많은 정보를 제공하지만 에뮬레이터 자체의 속도가 느려서 현실적으로 개발 도중에 기능을 확인하면서 개발을 진행하기가 번거롭다. 반면 iOS Simulator 나 iWebinspecor는 맥에서만 사용할 수 있기 때문에 윈도우를 사용하는 개발자는 사용하기 어렵다. 또한 두 가지 도구 모두 각각 모바일 OS에만 사용할 수 있기 때문에 범용적으로 사용하기 힘들다.
모바일 웹 사이트를 개발할 때 기기나 운영체제에 제한을 받지 않고 범용적으로 사용할 수 있는 방법으로 브라우저의 개발자 도구를 이용하는 방법이 있다.
원격 디버깅 도구
모바일 웹 페이지를 개발할 때는 가상 모바일 웹 개발 환경을 이용해 기능을 구현하지만 서비스를 시작하려면 실제 모바일 기기에서 동작 여부를 확인해야 한다. 하지만 모바일 환경은 작은 화면과 불편한 입력 장치로 인해 작성한 코드에 문제가 있어도 그 문제의 원인을 파악하기가 어렵다.
이러한 문제를 해결하려고 다양한 원격 디버딩 도구가 개발됐고 지금도 계속 개발되고 있다. 다음은 현재 많이 사용되고 있는 원격 디버깅 도구다.
| 도구 | 사용 환경 | 특징 |
|---|---|---|
| 크롬 DevTools |
설치환경: Chrome Android SDK 대상장비: Chrome for Android 연결방식: USB 연결 관련 URL 참조 |
안드로이드 4.0 부터 지원하는 안드로이드용 크롬에서만 가능하다. 안드로이드 SDK의 ADB를 이용해 USB로 연결한다. |
| 사파리 Web Inspector |
설치환경: -사파리 6 이상 -OSX Lion 이상 -XCode 4.5 대상장비: iOS 6.x 이상 연결방식: USB 연결 관련 URL 참조 |
iOS 6.0 SDK가 설치돼 있어야 사용할 수 있다. USB로 연결해 실제 장비와 가상장비(iOS Simulator) 에서 디버깅 할수 있다. |
| weinre | 설치환경: Node.js 대상장비: 모든 기기 연결방식: 네트워크 연결 관련 URL 참조 |
Node.js가 설치된 모든 장비에서 테스트 할 수 있다. 중단점(break point)과 같은 고급 디버깅 기술은 사용할 수 없다. |
크롬 Dev Tool 이나 사파리 Web Inspector 모두 USB 연결만으로 데스크톱의 브라우저 개발자 도구에서 기기를 원격으로 디버깅 할수 있다. USB로 연결된 구조이기 때문에 원격이지만 데스크톱에서 디버깅하는 것과 같은 속도로 디버깅 할 수 있고, 브라우저의 개발자 도구에 있는 기능을 모두 사용할 수 있다. 하지만 초기 설치가 복잡하고 일부 모바일 장비에서만 사용할 수 있기 때문에 범용적으로는 사용할 수는 없다.
기기와 운영체제에 제한을 받지 않고 번용적으로 사용할 수 있는 디버깅 도구로는 네트워크 연결 방식을 이용하는 weinre가 있다.
weinre
weinre는 “Web Inspector Remote”의 약자로써, 웹 페이지를 디버깅하기 위한 용도로 만들어진 도구다. 원격에 있는 모바일 장비를 디버딩할 수 있는 구조라는 점을 제외하면 파이어폭스의 파이어버그와 웹킷 기반의 개발자 도구와 같은 웹 디버깅 도구다.
기본개념
weinre는 네트워크 연결 방식으로 모바일 기기와 데스크톱을 연결한다. 여기서 모바일 기기는 디버깅 대상(target)이 되고, 디버깅하는 데스크톱은 클라이언트가 된다. 디버깅 대상 기기와 클라이언트 사이에서 정보를 전달하고 처리하는 역활은 weinre 서버가 담당한다.
여기에서는 다양한 모바일 환경에서 범용적으로 디버깅하고 테스트할 수 있는 방법을 설명했다.
그러나 실제로 모바일 웹 사이트를 개발할 때는 기준이 되는 기기에 최적화된 디버깅 도구를 이용하는 편이 가장 효과적이다.
예를 들어 iOS 6 이상일 때는 safari Remote Debugging을 사용하고, 안드로이드 4.0 이상일 때는 Chrome Remote Debugging을 사용한다. 그래야 중단점 설정과 같은 고급 디버깅 기술을 사용할 수 있다. 또한 네크워크 연결 방식이 아닌 USB 연결 방식이라서 훨씬 안정적으로 디버딩할 수 있다. 여기서는 자세하게 설명하지 않았지만 프락시 도구를 이용해 실제 운영 중인 서비스를 디버딩 할 수도 있다.
도구 사용법과 디버깅 방법을 주로 설명하였으나 궁극적으로는 현재 모바일 디버깅 환경을 이해해야 하고 새로운 디버깅 도구가 나왔을 때 적극적으로 활용할 수 있는 능력을 키우는 것이 더 중요하다.