모바일 웹과 데스크탑 모드에서 다양한 소셜 네트워크 서비스로 공유하는 기능을 많이 사용하고 있습니다. 자주 사용하는 SNS 버튼을 추가하여 기능을 개발하는 경우도 있지만 그러한 경우 해당 서비스의 API 모두 받아야 하는 경우가 많습니다. 예를 들어 카카오 공유 기능을 사이트에 추가하고 싶다면 Kakao Developers 사이트에 들어가 어플리케이션을 추가하여 앱 아이콘과 앱 이름, 사업자 명 등을 추가하고 플렛폼 환경과 개발 소스를 받아 개발을 해줘야 합니다. 공유 버튼이 몇 개 없을 때에는 어렵지 않지만 여러 개를 넣는 경우 어려움이 있습니다. 

여기서 소개하는 방식은 PC 방식보다는 모바일에서 추천하는 방식입니다. 모바일의 경우에는 모든 공유 방식이 표시 되지만 아래와 같이 설치된 프로그램이 있는 경우에만 지원 가능하기에 그렇습니다. 

장점과 단점 알아보기

장점은 아래와 같이 모든 공유를 지원하는 앱을 통해 손쉽게 공유 기능 구현이 가능합니다.  설치 되어 있는 앱에서 지원이 가능하다고 이해 하면 됩니다. 단점으로는 설치되어 있지 않은 앱을 통하여 공유하는 기능은 지원하지 않습니다.

공유 기능이 큰 비중을 차지하지 않는 경우나 급하게 작업이 필요한 경우에 사용하기 좋습니다. 왜냐하면? 개별적으로 지원하는 앱 공유 기능은 추가적인 기능과 썸네일이 해당 콘텐츠 이미지와 같이 표시되는 장점이 있어서 입니다. 가장 큰 장점은 소스가 간단하다는 부분 입니다. 모든 페이지에 공유 기능을 적용할 때 사용하면 좋습니다.

모든 공유 기능을 구현하기 부담이 되거나 간단하게 처리하는 방법인 navigator.share 기능을 소개하고자 합니다. 해당 기능은 스마트폰에 설치되어 있는 앱에서 공유를 허용하는 모든 앱이 자동으로 표시되어 하나의 버튼으로 간편하게 구현할 수 있고 새로운 프로그램이 추가되더라도 추가 기능을 넣을 필요가 없어집니다.

사용 방법 안내

소스가 간결하고 복잡하지 않아 활용하기 좋습니다. 아래 소스처럼 제목과 설명 문구, 도메인이나 페이지 주소를 넣어서 활용하게 됩니다. 게시물의 경우나 제품의 경우는 제목에는 상품 명을 키워드나 설명은 설명 문구 부분에 추가하여 활용하게 됩니다.

/*상하단 SCRIPT 테그는 수동으로 추가 해 주세요.*/
var str_tit  = "제목";
var str_desc = "설명문구";
var str_url  = "";
$(document).ready(function(){
    $('.btn-web-share').click(function() { 
        if (navigator.share){
              navigator.share({
                    title   : str_tit,
                    text    : str_desc,
                    url     : str_url,
              })
            .then(() => console.log('공유성공'))
            .catch((error) => console.log('공유에러', error));
        }else{
            alert("공유하기 지원하지 않습니다.");
        }
    });
});

단점은 없나요?

컴퓨터 윈도우 데스크탑 모드에서는 지원하는 어플리케이션이 많지 않다는 부분입니다. 앞으로 점점 늘어나고 확장될 수 있는 부분이고 PC 사용자의 경우 공유는 링크 복사를 많이 하기 때문에 크게 불편하지는 않습니다. 아래는 데스크탑 모드에서 공유 버튼을 눌렀을 때 나타나는 화면 입니다.

공유시 내가 원하는 스타일의 결과를 주지 않을 수도 있습니다. 제목, 설명, 주소의 형태에서 크게 벗어나지 않는 형태이면서 공유를 받는 프로그램에서 다르게 표현 되기도 합니다.

간단한 스크립트를 이용하여 공유 기능을 구현하는 방법을 소개 해 드렸습니다.

두토끼 사이트에서는 기존 API 이용한 공유와  navigator.share 2가지를 모두 혼용하여 사용하고 있습니다. 모든 페이지 하단에 공유 기능으로 사용하려고 구현 하였지만 같이 사용도 가능하다는 부분으로 적용 해 놓고 있습니다.