링크 공유하기 : SMS 보내기, 클립보드에 복사하기

손 안의 작은 세상을 이제 떠나보내기가 힘들다.
매일 컴퓨터 붙잡고 사느라 집에 가면 컴퓨터를 안켜지만 어째 스마트폰은 맨날 붙잡고 살고 있다. 웹 사이트에서 가끔 친구들에게 공유하고 싶은 물건이나 내용이 있으면 링크를 공유하기도 하는데 각 사이트별로 공유하기를 다르게 구성한 것을 볼 수 있다.

공유하기 버튼을 눌렀을 때 예쁘게 잘 구성한 UI 안에 다양한 방식을 제공하거나,
버튼을 누르면 링크가 클립보드에 복사되거나 이도 지원하지 않는 경우 URL창을 꾸욱 눌러서 직접 복사하는 방법이 있다.

어느 방법이든 상관없지만 제일 간단해보이는 SMS 공유와 클립보드에 URL 복사하기 기능을 구현해보자.
(대부분 제일 자주 사용할 듯 한 카카오톡으로 링크 공유하기의 경우는 카카오 개발자센터에서 아주 잘 알려주고 있다)

 

 

링크 공유하기 : SMS 보내기, 클립보드에 복사하기

 

사실 요즘 SMS는 잘 안쓰게 된다.

카드 사용안내나 청구금액 확인 문자, 사이트별로 보내는 본인인증 번호. 그리고 회사 전체를 울리는 안전 안내 문자 올 때나 SMS를 쓰지 잘 안쓰게 된다. 그리고 심지어 언급했던 모든 내용은 일방적으로 내가 수신하는 내용이지 발신 자체는 극히 드물다.

이 마저도 요즘은 카카오 알림톡 등으로 대체되는 경우가 많다. 그럼 왜 SMS 보내기를 선택했을까?

물론 간단해서다. 해당 기능은 구현이라고 말하기에 민망할 정도로 간단한 형태로 만들 수 있다. 그야말로 뚝딱이다.

 

'SMS로 공유' 라는 버튼을 만들고 해당 버튼을 클릭했을 때, 지정된 문구가 SMS 입력창에 자동으로 입력되어진 상태로 뜨는 것 까지가 내가 원하는 구축방향이다. 수신자는 링크를 공유하고자 하는 당사자가 직접 고르면 되므로 나의 역할은 거기까지다.

방식은 아래와 같다.

<a href="sms: /**수신자 번호 (없으면 생략 가능) **/ ? body=/**SMS창에 미리 세팅되었으면 하는 내용**/">링크 공유</a>

단, iOS의 경우는 큰 차이는 없으나 물음표를 쓰면 안된다고 한다.
위의 빨간색으로 표시한 물음표를 아래와 같이 & 로 바꿔서 써주면 보내는게 가능하다고 하니 참고하자.

 ** iOS의 경우 이렇게 사용
 
<a href="sms: /**수신자 번호 (없으면 생략 가능) **/ & body=/**SMS창에 미리 세팅되었으면 하는 내용**/">링크 공유</a>

 

클립보드로 복사의 경우도 간단하게 구현된다.
기존에 구현된 js 모듈이 있으니, 이 내용을 가져다 쓰도록 하자.

https://clipboardjs.com/

 

 

그럼 내 블로그 주소를 기준으로 링크 공유 또는 URL을 복사해보자.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

<p>이 블로그 참고해보세요. <span id="targetText">https://ojava.tistory.com</span></p>

<button id="btnSendSms">SMS로 공유하기</button>

<button id="btnCopy" data-clipboard-target="#targetText">URL 복사하기</button>

 

<script type="text/javascript">

$(document).ready(function() {

  var linkString = "sms";

  linkString += "?body=이 블로그 참고해보세요. https://ojava.tistory.com";

  $("#btnSendSms").on("click", function () {

location.href=linkString;

   });

  // 클릭 시 복사가 되도록 이벤트를 지정하는 부분

  var copyLink = new ClipboardJS("#btnCopy");

  copyLink.on("success", function() {

    alert("클립보드에 복사되었습니다.");

    

    // 복사되면 블록지정이 되어있는데 이를 초기화시키는 부분

    window.getSelection().removeAllRanges();

  });

});

</script>

 

개발 블로그답게 뭔가 하나 만들어야 할 거 같아서 jsfiddle로도 만들어봤다.

sms발송의 경우는 모바일 기기로 돌려야 확인할 수 있다. (아 물론 jsfiddle 내부에서 run 해도 안된다는게 함정)

jsfiddle에는 js 파일을 cdnjs로 추가해주었고 jQuery 경우도 선택해서 추가한 상태이니 블로그 원문에 써둔것처럼 따로 다 추가해서 써주셔야함다.

https://jsfiddle.net/ojava/L0gd679j/2/ 

 

2월, 3월은 몰아치듯 바쁜 달이다.

정신없는 와중에 그래도 내 것을 정리할 수 있는 공간이 있음에 감사한다.

더 자주 쓰지 못해서 아쉬울 뿐.. 한 달에 하나 이상은 쓰고자 함이 2019년 목표다.

 

바쁘고 정신없는 3월이겠지만 다들 화이팅! (내가 제일 화이팅~~~~)