안녕하세요. 제임스 입니다.
크롬 브라우저를 사용 하여 모바일 웹 개발을 할 경우 아쉬운 점이 몇 가지 있습니다.
그중 한가지가 실제 단말이 아니기 때문에 센서 및 위치정보를 사용 할 수 없다는 것 입니다. 특히 웹에서도 위치정보를 이용한 서비스를 많이 하고 있는 상황에서 정말 아쉬운 부분이 아닐수 없습니다.
크롬 개발자도구에서는 이런 개발자들의 고충을 조금이라도 덜어주기 위해??? 위치정보 및 가속도계 센서 에뮬레이트를 할 수 있도록 지원 하고 있습니다.
지금 부터 어떻게 사용 하는지 알아 보도록 하겠습니다.
위치정보 및 센서 에뮬레이트 설정화면 이동은 크롬 개발자도구 설정 > More tools > Sensors 를 순차 적으로 클릭하여 Sensors 탭을 오픈합니다.
목록에서 Sensors 를 선택 합니다.
붉은 색 박스가 위치정보 데이터를 지정하는 화면입니다.
아래 푸른색 박스는 가속도계 에뮬레이트 (기기방향)을 지정하는 화면입니다.
위치정보 데이터를 설정하는 방법에 대해 알아 보겠습니다.
No override: 위치정보 데이터를 사용하지 않음 상태 입니다.
Drop Down List 를 클릭하여 프리셋 되어 있는 위치 정보 중 하나인 런던을 선택해 봅니다.
정확하게 런던의 어디인지는 모르지만 대략적인 런던 어딘가의 위치정보가 설정됩니다.
아쉽게도 한국의 위치정보는 프리셋 데이터에 없습니다.
그래서 Custom Location 을 선택하여 임의로 위치정보를 지정해 주는 방법으로 사용 할 수 있습니다.
위 입력 정보는 명동역 (4호선)의 대략적인 위치정보 입니다.
이 위치정보는 많이 사용하게 되실 겁니다. 고객 위치정보 기반 서비스를 제공하는 경우라면 거의 필수적으로 알고 계셔야 할 기능입니다.
물론 몰라도 개발 할 수 있습니다.
단말기 들고 밖으로 돌아 다니면서요... ㅎㅎ;;
가속도계 에뮬레이트 (기기방향) 설정하는 방법에 대해 알아 보겠습니다.
Orientation 항목이 Off 로 되어 있습니다. 방향 설정을 사용하지 않는다는 의미 입니다.
기기방향을 나타내는 값은 아래와 같이 세가지가 있습니다.
α (알파) - z 축 기준 회전
β (브라보) - 좌우 기준 기울기
γ (감마) - 앞뒤 기준 기울기
Drop Down List 를 클릭하여 프리셋 되어 있는 정보 중 Portrait 를 선택 해보겠습니다.
β 값이 90(도) 가 되어 이미지 처럼 서 있는 모습이 됩니다.
프리셋 정보 외 임의의 값을 입력 해볼 수 있습니다.
Reset 키를 눌러 이전 설정으로 돌아 갈 수 있습니다.
특별한 경우가 아니라면 가속도계 에뮬레이트를 사용 하실 일은 거의 없습니다. 하지만 아예 없는 건 아니니 알고 있다가 필요 할 경우 사용 하면 좋겠죠? ^^
다른건 몰라도 위치정보 데이터 설정 하는 방법은 꼭 기억해서 요긴하게 사용하시길 바랍니다 :)
▼ 도움이 되셨다면 로그인이 필요 없는 ▼
▼ 하트 클릭 한번 부탁 드립니다 ▼
감사합니다 :D
'크롬 개발자도구' 카테고리의 다른 글
[ 크롬 개발자도구 ] 스타일 편집 Tip (Color Picker) (505) | 2018.02.20 |
---|---|
[ 크롬 개발자도구 ] 페이지 소스 및 스타일 편집하기 (496) | 2018.02.07 |
[ 크롬 개발자도구 ] 기기모드(Device Mode) 기기 선택 및 추가 (480) | 2018.01.31 |
[ 크롬 개발자도구 ] 설정 (Settings) 사용하기 (489) | 2018.01.24 |
[ 크롬 개발자도구 ] Dock 위치 지정하기 (493) | 2018.01.23 |