자바스크립트 외부 링크 클릭 시 경고 메시지 보여주기

오늘은 웹 페이지에서 외부 링크를 클릭할 때 경고 메시지를 보여주는 기능을 구현해보았다. 요즘 블로그를 운영하면서, 사용자들이 실수로 외부 사이트로 넘어가는 걸 막고 싶다는 생각이 들었다. 그래서 간단한 자바스크립트를 이용해서 확인 메시지를 띄우기로 했다.

먼저, confirm() 함수에 대해 알아보았다. 이 함수는 사용자가 확인 버튼을 누르면 true를 반환하고, 취소 버튼을 누르면 false를 반환하는 기능이 있다. 이걸 활용하면 사용자가 링크를 클릭할 때 "정말로 이 링크로 이동할까요?"라는 경고 메시지를 띄울 수 있겠더라.

아래와 같은 코드를 작성해봤다:

<a
  href="http://external-link.com"
  onClick="return confirm('외부 링크입니다. 정말로 이동하시겠습니까?');"
  class="external"
  target="_blank">
  외부 링크로 이동
</a>

코드를 설명하자면, 먼저 href 속성에는 사용자가 클릭했을 때 이동할 URL을 적었다. http://external-link.com으로 설정했다. 그리고 onClick 속성에서 confirm() 함수를 호출했다. 이 부분이 핵심이다. 사용자가 링크를 클릭하면 "외부 링크입니다. 정말로 이동하시겠습니까?"라는 메시지가 뜨고, 사용자가 확인 버튼을 누르면 링크가 열리도록 했다.

target="_blank" 속성 덕분에 링크가 새 탭에서 열리도록 설정할 수 있어서 원래 페이지는 그대로 남아있게 된다. 이렇게 하니까 정말 편리하더라.

코드를 다 작성하고 나서 실제로 확인해보니, 경고 메시지가 잘 뜨고 사용자가 확인 버튼을 누르면 외부 사이트로 잘 이동하는 게 보였다. 뿌듯한 마음이 드는 동시에, 사용자의 경험을 조금이나마 개선할 수 있어서 기분이 좋았다.

오늘 하루는 이렇게 작은 기능 하나로 의미 있는 시간을 보낸 것 같다. 앞으로도 이런 유용한 팁들을 블로그에 정리해두고, 사용자들이 더 편리하게 이용할 수 있도록 계속해서 고민해봐야겠다. 작은 변화가 큰 차이를 만들 수 있다는 걸 다시 한 번 느끼게 해준 하루였다.