jQuery Mobile — listview + 외부 앱 링크 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile — listview +
mailto · tel · sms · maps 외부 앱 링크

스마트폰에서 바로 메일·전화·문자·지도 앱이 열리는 특수 URL 스킴

시작 오늘 분석할 코드

jQM의 listview로 메뉴 리본을 만들고, 각 항목에 외부 앱 호출 링크(mailto:, tel:, sms:, maps:)를 연결한 코드. 스마트폰 모바일 웹의 가장 강력한 패턴 중 하나.

<ul data-role="listview" data-inset="true"> <li><a href="mailto:gdhong@hot.co.kr">이메일 링크</a></li> <li><a href="tel:0311234567">전화번호 링크</a></li> <li><a href="sms:0101234567">SMS 문자 링크</a></li> <li><a href="http://maps.google.com/maps?q=37.511611,127.098293&hl=ko">위성좌표 링크</a></li> <li><a href="http://maps.google.com/maps?q=대한민국+서울특별시+강남구...">주소 링크</a></li> </ul> <div data-role="footer" data-position="fixed"> <a href="index.html" data-icon="grid" rel="external">Index</a> </div>

실제 출력 미리보기

스마트 페이지 링크 처리법

외부 프로그램 링크

• 이메일 링크
• 전화번호 링크
• SMS 문자 링크
• 위성좌표 링크
• 주소 링크

용어 용어 정리

data-role="listview"ul을 모바일 리스트 UI로

data-insettrue면 좌우 여백 + 둥근 모서리 카드 형태

data-positionfixed면 하단 고정 푸터

data-icon버튼/링크에 표준 아이콘 (grid, home 등)

URL Scheme앱이 인식하는 특수 URL 접두사

mailto:메일 앱 열기

tel:전화 다이얼러 열기

sms:문자 앱 열기

---

1 URL Scheme — 앱 호출의 마법

일반 링크는 http://·https:// 같은 웹 프로토콜로 시작한다. 그런데 모바일 OS는 특별한 접두사를 인식해서 해당 앱을 직접 연다. 이걸 URL Scheme이라고 한다.

scheme	형식	여는 앱
mailto:	mailto:user@example.com	기본 메일 앱
tel:	tel:01012345678	전화 다이얼러
sms:	sms:01012345678	문자 앱 (?body=내용)
geo:	geo:37.511,127.098	지도 앱 (안드로이드)
maps://	maps://?q=서울	iOS 지도
kakaomap://	kakaomap://route?ep=...	카카오맵 (앱 설치 시)

---

2 mailto: 의 옵션

/* 기본 */ <a href="mailto:user@example.com">메일</a> /* 제목·본문 미리 채우기 */ <a href="mailto:user@example.com?subject=문의&body=안녕하세요">메일</a> /* CC·BCC */ <a href="mailto:a@x.com?cc=b@x.com&bcc=c@x.com">메일</a>

---

3 tel: / sms:의 형식

tel:01012345678 ← 전화번호 그대로 tel:+82-10-1234-5678 ← 국제 형식 권장 (외국 사용자 대응) tel:031-1234-567 ← 하이픈 허용 sms:01012345678 ← 받는 번호 sms:01012345678?body= ← 미리 적힌 본문 sms:?body=새글 ← 받는 사람 비워둠

---

4 listview의 옵션

data-inset="false" (기본)

화면 끝까지 — 풀폭 리스트, 세로 라인만

data-inset="true"

좌우 여백 + 둥근 모서리 — 카드 형태

---

반응형

5 data-position="fixed" 푸터

스크롤해도 화면 아래 항상 붙어 있는 고정 푸터를 만든다. 모바일 앱의 하단 탭 바 같은 효과.

<div data-role="footer" data-position="fixed"> <a href="index.html" data-icon="grid" rel="external">Index</a> </div>

---

6 자주 하는 실수

실수	증상	해결
tel: 전화번호에 띄어쓰기	일부 앱이 인식 못함	하이픈만 사용, 띄어쓰기 X
mailto의 한글 인코딩 누락	본문 깨짐	encodeURIComponent로 인코딩
iOS·안드로이드 지도 차이 무시	한쪽에서만 동작	geo: + maps:// 분기 또는 universal link
데스크톱에서 tel: 클릭	앱 없어서 에러	모바일 감지 후 표시
data-inset="false"인데 카드 디자인 의도	풀폭으로 나옴	true로 변경

---

핵심 한 줄 요약

listviewul을 모바일 리스트 UI로 자동 변환

data-insettrue → 카드형 / false → 풀폭

URL Schememailto: tel: sms: geo: → 외부 앱 호출

tel: 형식하이픈 OK, 띄어쓰기 NO

data-position="fixed"스크롤해도 붙는 고정 푸터

Tags

#jQueryMobile #listview #data-inset #URL-Scheme #mailto #tel #sms #geo #외부앱호출 #전화걸기 #메일보내기 #fixed-footer #jQM #모바일웹 #jQuery #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

jQueryMobile, listview, data-inset, URL-Scheme, mailto, tel, sms, geo, 외부앱호출, 전화걸기, 메일보내기, fixed-footer, jQM, 모바일웹, jQuery, 웹개발, HTML, 티스토리