웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
특정 웹페이지를 다른 어플리케이션 및 Social, 카카오톡 등으로 공유하는 방법에 대하여 알아보려고 합니다. 어떻게 하면 쉽게 공유하도록 만들 수 있는지 알아보세요.
예전에는 현재 웹사이트를 공유하기 위해서 각각의 공유 플랫폼의 기능을 가져다가 사용해야만 했습니다. 예를들어 페이스북이라면 페이스북 개발자 계정을 만들고 SDK를 추가하고 원하는 기능을 붙여 사용하는 ... 복잡한 방법이 사용되었습니다. 페이스북 뿐만 아니라 트위터, 네이버, 카카오 등등 많은 플랫폼에 각각 비슷한 작업을 여러 번 수행해야 했기 때문에 이를 도와주는 솔루션을 적용하거나 많은 시간과 비용이 필요하기도 했죠. 물론 현재도 이 방식은 많이 쓰이며 때로는 더 많은 기능이 제공될 수도 있습니다. 다만 간단한 웹페이지 공유를 위해서는 더 간단한 방법을 사용할 수 있으며 여기서는 navigator API의 share() 메소드를 사용을 알아보려고 합니다.
스크린샷) 현재 웹이즈프리에 적용된 공유하기 기능
위 스크린샷의 페이지 공유하기 버튼이 오늘 알아볼 기능입니다. 페이지 공유 기능이 있다면 재방문을 높이고 더 많은 유저 유입을 가져올 수 있으므로 매우 유용하겠죠.
이제 방법을 알아보기에 앞서서 우선 이 방법을 사용하려면 반드시 HTTPS인 보안 프로토콜을 사용해야만 합니다. 즉 안전한 웹사이트에서만 공유하기 기능을 사용할 수 있습니다. 또한 상황에 따라서 기타 브라우저나 환경에서는 지원되지 않을 수도 있죠. 그럼에도 불구하고 이 방법을 선호하는 이유는 모바일 환경에서의 편의성이 매우 높다는 점과 기능을 추가하기가 쉽고 간단하다는 점입니다. 또한 모바일 환경이 아닌 윈도우즈 등의 운영체제에서도 페이지 공유하기 기능을 수행할 수 있습니다. 그럼 아래에서 어떻게 하는지 자세한 방법을 알아봅니다.
!! navigator.share() 장점
공유하기 기능을 위해서 아래와 같이 문법이 사용됩니다.
navigator.share(dataObject)
여기서 dataObject는 공유에 필요한 값들을 전달할 수 있으며 실행 후 Promise를 return 받게됩니다.
url // 공유할 페이지의 url
text // 공유할 경우 사용될 메시지. 웹사이트 이름 등이 사용
title // 공유할 웹페이지의 제목. 메타 제목
files // 파일인 경우 공유할 파일 객체가 담긴 배열
그럼 아래에서 간단한 예제를 만들어 보겠습니다.
아래는 현재 페이지를 공유하기 위한 예제입니다. 버튼을 하나 만들고 클릭할 경우 현재 페이지를 다른 앱 등에 공유할 수 있게됩니다. 우선 버튼을 하나 만듭니다.
이제 위 버튼을 클릭하면 아래와 같이 아래의 sharePage 함수를 실행하게 됩니다.
이제 버튼을 클릭할 경우 웹페이지를 공유할 수 있게되었습니다. 참고로 현재 url을 shareObject에 직접 입력할 수도 있지만 간략하게 현재 주소를 전달하도록 window.location.href를 사용할 수도 있겠습니다.
아래는 실제 예제 코드를 구현한 부분입니다.
@ 예제 코드 동작해보기
이제 잘 동작하는 지 확인해보면 될 것입니다. 아래 버튼을 클릭할 경우 위 코드가 실행되게 되며 현재 페이지 상단의 공유하기 역시 비슷한 예제가 사용되었습니다.
여기까지 웹사이트 공유 방법에 대하여 간략하게 알아보았습니다.
위에서 알아본 navigator.share() 웹사이트 공유 기능은 사용자에게 쉽게 페이지를 공유하여 사이트 유입율을 높일 수 있는 매우 효과적인 도구입니다. 비교적 간단한 코드로 많은 이용자를 유입시킬 수 있기 때문에 그 활용 빈도가 매우 높아 자주 사용됩니다. 특히 웹사이트 유입이 중요한 목적의 사이트는 SEO와 함께 필수적으로 적용될 필요가 있을 것입니다.
# 웹사이트 다른 앱 등으로 공유하기
예전에는 현재 웹사이트를 공유하기 위해서 각각의 공유 플랫폼의 기능을 가져다가 사용해야만 했습니다. 예를들어 페이스북이라면 페이스북 개발자 계정을 만들고 SDK를 추가하고 원하는 기능을 붙여 사용하는 ... 복잡한 방법이 사용되었습니다. 페이스북 뿐만 아니라 트위터, 네이버, 카카오 등등 많은 플랫폼에 각각 비슷한 작업을 여러 번 수행해야 했기 때문에 이를 도와주는 솔루션을 적용하거나 많은 시간과 비용이 필요하기도 했죠. 물론 현재도 이 방식은 많이 쓰이며 때로는 더 많은 기능이 제공될 수도 있습니다. 다만 간단한 웹페이지 공유를 위해서는 더 간단한 방법을 사용할 수 있으며 여기서는 navigator API의 share() 메소드를 사용을 알아보려고 합니다.
스크린샷) 현재 웹이즈프리에 적용된 공유하기 기능위 스크린샷의 페이지 공유하기 버튼이 오늘 알아볼 기능입니다. 페이지 공유 기능이 있다면 재방문을 높이고 더 많은 유저 유입을 가져올 수 있으므로 매우 유용하겠죠.
이제 방법을 알아보기에 앞서서 우선 이 방법을 사용하려면 반드시 HTTPS인 보안 프로토콜을 사용해야만 합니다. 즉 안전한 웹사이트에서만 공유하기 기능을 사용할 수 있습니다. 또한 상황에 따라서 기타 브라우저나 환경에서는 지원되지 않을 수도 있죠. 그럼에도 불구하고 이 방법을 선호하는 이유는 모바일 환경에서의 편의성이 매우 높다는 점과 기능을 추가하기가 쉽고 간단하다는 점입니다. 또한 모바일 환경이 아닌 윈도우즈 등의 운영체제에서도 페이지 공유하기 기능을 수행할 수 있습니다. 그럼 아래에서 어떻게 하는지 자세한 방법을 알아봅니다.
!! navigator.share() 장점
- 쉽고 빠르게 적용 가능
- 모바일 및 다양한 플랫폼, OS에서 사용 가능
- 이미지 등 파일 공유도 가능
! navigator.share() 사용하기
공유하기 기능을 위해서 아래와 같이 문법이 사용됩니다.
navigator.share(dataObject)
여기서 dataObject는 공유에 필요한 값들을 전달할 수 있으며 실행 후 Promise를 return 받게됩니다.
url // 공유할 페이지의 url
text // 공유할 경우 사용될 메시지. 웹사이트 이름 등이 사용
title // 공유할 웹페이지의 제목. 메타 제목
files // 파일인 경우 공유할 파일 객체가 담긴 배열
그럼 아래에서 간단한 예제를 만들어 보겠습니다.
! navigator.share() 예제보기
아래는 현재 페이지를 공유하기 위한 예제입니다. 버튼을 하나 만들고 클릭할 경우 현재 페이지를 다른 앱 등에 공유할 수 있게됩니다. 우선 버튼을 하나 만듭니다.
<button onclick="sharePage()">현재 페이지 공유하기</button>
이제 위 버튼을 클릭하면 아래와 같이 아래의 sharePage 함수를 실행하게 됩니다.
sharePage = () => {
const shareObject = {
title: '공유할 콘텐츠의 제목',
text: 'WEBISFREE.com',
url: window.location.href,
};
if (navigator.share) { // Navigator를 지원하는 경우만 실행
navigator
.share(shareObject)
.then(() => {
// 정상 동작할 경우 실행
alert('공유하기 성공')
})
.catch((error) => {
alert('에러가 발생했습니다.')
})
} else { // navigator를 지원하지 않는 경우
alert('페이지 공유를 지원하지 않습니다.')
}
}
const shareObject = {
title: '공유할 콘텐츠의 제목',
text: 'WEBISFREE.com',
url: window.location.href,
};
if (navigator.share) { // Navigator를 지원하는 경우만 실행
navigator
.share(shareObject)
.then(() => {
// 정상 동작할 경우 실행
alert('공유하기 성공')
})
.catch((error) => {
alert('에러가 발생했습니다.')
})
} else { // navigator를 지원하지 않는 경우
alert('페이지 공유를 지원하지 않습니다.')
}
}
이제 버튼을 클릭할 경우 웹페이지를 공유할 수 있게되었습니다. 참고로 현재 url을 shareObject에 직접 입력할 수도 있지만 간략하게 현재 주소를 전달하도록 window.location.href를 사용할 수도 있겠습니다.
const shareObject = {
...
url: window.location.href
}
...
url: window.location.href
}
아래는 실제 예제 코드를 구현한 부분입니다.
@ 예제 코드 동작해보기
이제 잘 동작하는 지 확인해보면 될 것입니다. 아래 버튼을 클릭할 경우 위 코드가 실행되게 되며 현재 페이지 상단의 공유하기 역시 비슷한 예제가 사용되었습니다.
<button onclick="sharePage()">현재 페이지 공유하기</button>
<script>
window.sharePage = () => {
const shareObject = {
title: '공유할 콘텐츠의 제목',
text: 'WEBISFREE.com',
url: window.location.href,
};
if (navigator.share) {
navigator
.share(shareObject)
.then(() => {
alert('공유하기 성공')
})
.catch((error) => {
alert('에러가 발생했습니다.')
})
} else {
alert('페이지 공유를 지원하지 않습니다.')
}
}
</script>
<script>
window.sharePage = () => {
const shareObject = {
title: '공유할 콘텐츠의 제목',
text: 'WEBISFREE.com',
url: window.location.href,
};
if (navigator.share) {
navigator
.share(shareObject)
.then(() => {
alert('공유하기 성공')
})
.catch((error) => {
alert('에러가 발생했습니다.')
})
} else {
alert('페이지 공유를 지원하지 않습니다.')
}
}
</script>
여기까지 웹사이트 공유 방법에 대하여 간략하게 알아보았습니다.
! 마치면서
위에서 알아본 navigator.share() 웹사이트 공유 기능은 사용자에게 쉽게 페이지를 공유하여 사이트 유입율을 높일 수 있는 매우 효과적인 도구입니다. 비교적 간단한 코드로 많은 이용자를 유입시킬 수 있기 때문에 그 활용 빈도가 매우 높아 자주 사용됩니다. 특히 웹사이트 유입이 중요한 목적의 사이트는 SEO와 함께 필수적으로 적용될 필요가 있을 것입니다.
아래의 글도 찾고 계시지 않나요?
