문자보내기 기능 구현하기. 여기에 URI Scheme과 URI 이스케이프를 곁들인...
오늘의 주제?
문자로 공유하기 기능 개발하려고 한다.
- 링크를 누르면 원하는 사람을 선택하여
- 정해둔 메시지를 보낼 수 있게 하는 기능이다.
결론부터 말하자면 a 태그에 href 속성에 일반적인 링크 주소인 http://가 아니라 문자 메시지를 의미하는 sms:를 이용하여 간단하게 구현할 수 있다.
<a href="sms:?body=보내고 싶은 메시지">안드로이드 문자보내기</a>
<a href="sms:&body=보내고 싶은 메시지">iOS8 이상 문자보내기</a>
<a href="sms:body=보내고 싶은 메시지">iOS8 미만 문자보내기</a>
여기서 : 앞에 오는 문자, sms 는 URI 스킴이라고 부른다.
이게 과연 무엇을 뜻하는 걸까? 한번 정리해보려고 한다.
URI 스킴(URI Scheme)이란?
Uniform Resource Identifier (URI) Schemes
URI : 통합 자원(리소스) 식별자
자원(리소스): HTTP 요청 대상. 인터넷 상에 올라간 문서, 이미지, 파일 등을 총칭
티스토리 홈페이지로 이동하고 싶다면 웹브라우저 주소표시줄에 https://tistory.com을 쳐야 하고, 티스토리에 올린 css 파일에 접근하고 싶다면 https://t1.daumcdn.net/tistory_admin/assets/blog/tistory/blogs/style/content/content.css 와 같은 파일의 주소를 갖고 있어야 한다.(css 주소는 그냥 예시😋)
이와 같이 문서든, 사진이든, 음악 파일이든 인터넷에 존재하는 모든 자원들을 각각 접근하려고 한다면 각각의 리소스가 갖고 있는 식별자(일반적으로 URL 주소)가 필요하다.
인터넷 상의 파일 주소는 다양한 규칙들로 이루어져 있는데, 그 중에서 오늘 알아볼 스킴(scheme)은 바로:콜론 앞의 문자이다.
URL 앞에 붙는 https 는 브라우저가 사용해야 하는 프로토콜(통신 규약)을 의미한다. 이 프로토콜은 http나 https만 있는 것이 아니라 다양한 것들이 있고, 이것들을 통칭해 URI스킴이라 부른다.
<a href="mailto:test@test.com">메일보내기</a>
<a href="tel:01012341234">전화걸기(모바일에서 작동)</a>
<a href="sms:01012341234">문자보내기(모바일에서 작동)</a>
위의 코드에서 http, https처럼 익숙한 것도 있고, mailto, tel, sms 처럼 일반적으로 볼 수 없는 것들도 있다.
그래서 얘네가 어떤 역할을 하죠?
스킴은 식별자에 접근 가능한 통신방법에 대해 알려준다.
01012341234를 두고 사람이 본다면 직관적으로 010-1234-1234 전화번호란 걸 알 수도 있겠지만 컴퓨터는 하나하나 명시적으로 알려줘야하므로, 01012341234 앞에 tel:을 붙여 이것이 전화에 관련된 것이라고 URI 스킴을 통해 알린다.
따라서 http, https는 http연결과 관련된 프로토콜이고, tel은 전화와 관련된 것, 오늘 사용해볼 sms는 문자메시지와 관련된 것이라고 URI스킴을 보고 알 수 있다.
위에 예시로 든 것 외에도 다양한 스킴이 존재하는데, 인터넷 상의 자원 관리 등을 하는 비영리 법인 ICANN 산하조직인 IANA에서 관리하고 있어 해당 페이지에서 어떤 종류들이 있는지 확인해볼 수 있다.
https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
SMS 스킴을 활용한 메시지 보내기
제약 사항
모든 웹 브라우저에서 모든 스킴을 자유롭게 다 사용할 수 있는 것은 아니다. 예를 들어 tel과 sms는 PC브라우저에서는 제대로 동작하지 않고 아래와 같은 오류 메시지가 뜬다.
모바일 환경에서만 작동하도록 설정해주자
While web browsers may not support other URL schemes, web sites can with registerProtocolHandler()
메시지 구성
<a href="sms:01012341234?body=보내고 싶은 메시지">안드로이드 문자보내기</a>
<a href="sms:01012341234;body=보내고 싶은 메시지">iOS8 이상 문자보내기</a>
<a href="sms:01012341234&body=보내고 싶은 메시지">iOS8 미만 문자보내기</a>
받는 사람 및 메시지
받는 사람은 옵션으로 생략 가능하다. 내용을 넣지 않으면 주소록에서 보내고 싶은 사람을 선택할 수 있다.
쿼리문자 + body=메시지로 같이 메시지를 보낼 수 있는데, 기기에 따라, 버전에 따라 구문이 조금씩 다르다. 위의 예제 참고로 하여 사용하자.
메시지 구성 유의 사항 : URI 허용문자
URI 허용 문자를 이용해서 보내야한다.
URI은 기본적으로 영문 알파벳과 일부 특수문자만 사용할 수 있다. 따라서 특수문자나 줄바꿈을 사용하고 싶다면 이스케이프 문자(%, 이스케이프로 시작하는 문자로 치환)를 사용해야한다. (예를 들어 줄바꿈은 \n이 아니라 %0a를 사용한다.)
이렇게 지원하지 않는 문자를 %로 시작하는 다른 문자로 변환하는 걸 URL 인코딩, 퍼센트 인코딩이라고 한다.
sms스킴을 통해 URI의 쿼리문으로 메시지 내용을 같이 보내는 것이므로 공유하고자 하는 메시지도 URI 허용문자에 들어가야 한다. (사실 위의 코드처럼 한글을 사용했을 때 큰 문제는 없긴 했다.) 이스케이핑 문자를 직접 타이핑 하는 것은 현실적으로 어렵고, 자바스크립트 함수를 사용해 간단하게 이스케이핑 처리를 해보자.
URI 인코딩 JS 함수
자바스크립트의 함수를 이용하면 쉽게 변환할 수 있다.
var text = '보내고 싶은 \\n 메시지'
encodeURIComponent(text)
// 변환결과
// %EB%B3%B4%EB%82%B4%EA%B3%A0%20%EC%8B%B6%EC%9D%80%20%0A%20%EB%A9%94%EC%8B%9C%EC%A7%80
자바스크립트를 이용하면 a 태그의 href어트리뷰트를 건드리지 않고 다음과 같이 작성하는 것도 가능하다.
function sendSMS() {
var text = '보내고 싶은 \\n 메시지'
location.href='sms:?body=' + emcodeURIComponent('text');
}
// 정의한 함수를 클릭 이벤트에 잘 물리면 된다.
문제점
이렇게 구현한 게 모든 환경에서 완벽하게 동작하지는 않았다. 일부 웹브라우저에서 앵커 태그를 눌러 메시지를 보낼 때 사용할 어플리케이션을 선택하라고 한다.
사용자가 문자앱을 사용한다고 하면 문제 없지만 만약 위 화면에서 엉뚱하게 카카오톡을 선택할 경우 작성한 메시지는 유실된다.
참고 :
SMS Link 관련
URI
https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
url 허용 문자 관련
https://victorydntmd.tistory.com/287
https://developers.google.com/maps/url-encoding?hl=ko
encodeURIComponent()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
