신규 모바일 쇼핑몰을 구축하면서 개발했던 내용을 정리해보려고합니다.
그 중 첫번째 소개할 기능은 상품 페이지 링크등을 공유하는 '공유하기' 기능입니다.
우리 사이트의 경우는 '상품', '라이브 커머스 매장', '기획전' 링크를 공유하도록 구현되어 있습니다.
'공유하기' 기능에는 카카오톡, 페이스북, 트위터, SMS 등이 있는데,
그 중에서 SMS 공유하기 기능을 소개해보려고 합니다.
SMS 문자 보내기 기능 구현하기
우리 사이트에서는 위 버튼을 클릭하면 지정된 링크를 SMS로 공유할 수 있는 기능이 구현되어 있습니다.
안드로이드나 iOS 앱에서는 네이티브 기능인 SMS 문자 보내는 함수가 제공이될테지만, 웹에서는 어떻게 구현해야할까요?
바로 'SMS URL 스킴'을 사용하면됩니다.
URL 스킴이란?
URL 스킴이란 IP 주소, 최상위 도메인 등을 관리하는 IANA 단체에서 정의해놓은 URL 체계입니다.
웹브라우저에서 URL을 호출할 때, http나 https로 시작하는 것을 많이 보셨을 겁니다.
http나 https도 IANA에 등록된 공식 URL 스킴 중 하나입니다.
SMS URL 스킴 사용하기
SMS URL 스킴 사용법은 간단합니다.
아래와 같이 sms:로 시작하며, 그 뒤에는 전화번호와 원하는 액션을 넣어줄 수 있습니다.
sms:<phone number>?<action>
실제 사용예시는 아래와 같습니다.
// 메시지 앱 호출
sms:?
// 메시지 앱 호출 + 메시지 전달
sms:?body=hello // Android
sms:&body=hello // iOS
// 메시지 앱 호출 + 전화번호 추가 + 메시지 전달
sms:01012345678?body=hello // Android
sms:01012345678&body=hello // iOS위와 같이 액션부분에 body를 넣어주면 원하는 메시지 내용을 함께 전달이 가능합니다.
버튼 눌렀을 때, 메시지 앱 호출하기
그럼 실제로 기능을 구현한다고할 때, 버튼을 누르면 메시지 앱을 호출하도록 구현하려면 어떻게 해야할까요?
바로 HTML의 href를 사용해주면 됩니다.
href의 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.
<a :href="smsUrl">
SMS문자 보내기
</a>
그리고 userAgent에 따라 분기처리를 해서 smsUrl 값을 세팅해줍닌다.
const userAgent = navigator.userAgent.toLocaleLowerCase()
if (userAgent.search('android') > -1) {
this.smsUrl = `sms:?body=원하는메시지를입력해주세요`
} else if (userAgent.search('iphone') > -1 || uagent.search('ipad') > -1) {
this.smsUrl = `sms:&body=원하는메시지를입력해주세요`
}
그리고나서 'SMS문자 보내기' 링크를 클릭해보면,
스마트폰에서 SMS 메시지 앱을 호출하여 메시지까지 자동으로 입력되는 것을 확인할 수 있습니다.
+ 개발하며 겪은 이슈
1. iOS/Android 파편화에 따른 분기 처리
참고문서
'JavaScript' 카테고리의 다른 글
| [Vue.js] <input type="file"> 요소에 동일 파일 연속 선택 시, change 이벤트가 발생되지 않는 문제 해결 방법 (0) | 2021.09.07 |
|---|---|
| [javascript] 함수 표현식과 함수 선언식 (0) | 2021.03.30 |
| [공유하기] 모바일 웹 URL 복사 기능 구현하기 (0) | 2021.03.03 |
| [공유하기] 모바일 웹에서 카카오톡 공유하기 기능 구현하기 (0) | 2021.03.03 |
| [공유하기] 페이스북에 링크 공유하기 (0) | 2021.03.02 |
