웹사이트에서 사용자를 외부 페이지로 안내할 때, 링크를 클릭하면 기본적으로 현재 탭에서 해당 페이지가 열립니다. 이렇게 되면 방문자가 내 사이트에서 이탈해버리는 경우가 많습니다. 외부 링크를 새 탭에서 열도록 설정하면 사용자가 원래 페이지로 쉽게 돌아올 수 있어, 사이트 체류 시간과 사용자 경험을 모두 개선할 수 있습니다.
기본 문법
링크를 새 탭에서 열려면 <a> 태그에 target 속성을 추가하고 값을 _blank로 지정하기만 하면 됩니다.
<a href="https://placekitten.com/1000/1000" target="_blank" rel="noopener noreferrer">고양이 사진 보러 가기!</a>설정 방법은 매우 간단하지만, 함께 사용하는 rel 속성의 역할까지 이해하면 더욱 안전하고 전문적인 웹페이지를 만들 수 있습니다. 브라우저 설정에 따라 새 탭 또는 새 창으로 열리며, noreferrer와 noopener는 각각 출처 정보 차단과 보안 공격 방지라는 중요한 역할을 담당합니다.
rel 속성의 두 가지 핵심 기능
1. noreferrer — 출처 정보 숨기기
noreferrer는 SEO(검색 엔진 최적화) 분석에서 사용자가 어느 페이지에서 유입되었는지에 대한 정보(리퍼러)가 전달되지 않도록 차단합니다. 결과적으로 해당 유입은 '직접 접속(direct)'으로 표시됩니다. 참고로 이 속성은 noopener의 기능을 포함하고 있어, 단독으로 사용해도 보안 효과를 얻을 수 있습니다.
2. noopener — 보안 위협 차단
noopener는 새 탭에서 열린 악성 문서가 window.opener 객체를 통해 원래 페이지에 접근하지 못하게 막아줍니다. 이를 통해 피싱 사이트로 리디렉션되거나 페이지 내용이 변조되는 등의 공격(탭내빙, Tabnabbing)을 예방할 수 있습니다.
전체 코드 예제
실제 웹페이지에 적용할 때 참고할 수 있는 완전한 코드 예제입니다.
<html>
<head>
<link href="./style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<a href="https://placekitten.com/1000/1000" target="_blank" rel="noopener noreferrer">
링크를 클릭해 고양이 사진 보기!
</a>
</body>
</html>마무리
target="_blank"와 rel="noopener noreferrer" 조합은 외부 링크를 처리하는 표준적인 방법입니다. 단 몇 줄의 코드로 사용자 경험을 높이고 보안 위협까지 예방할 수 있으니, 외부 링크를 삽입할 때마다 습관적으로 활용해 보시길 권장합니다.