HTML 링크 태그(a 태그) 속성별 차이점과 새 창을 열기 설정

웹사이트를 연결하는 가장 중요한 도구 링크 태그 이해하기

인터넷을 항해하다 보면 수없이 많은 파란색 글씨나 버튼을 만나게 됩니다. 마우스를 올렸을 때 손가락 모양으로 바뀌며 클릭을 유도하는 이 요소들은 웹의 핵심인 연결성을 담당하고 있습니다.

프로그래밍 언어인 HTML에서는 이것을 앵커 태그라고 부르며 줄여서 a 태그라고 널리 통용됩니다. 단순히 글자에 밑줄을 긋는 것을 넘어 사용자를 다른 페이지로 이동시키거나 특정한 파일로 안내하는 중대한 역할을 수행합니다.

웹사이트를 직접 만들거나 블로그를 운영하는 사람이라면 이 태그의 기본 구조를 아는 것이 매우 중요합니다. 하지만 단순히 주소를 연결하는 것에서 멈추지 않고 다양한 속성을 활용하면 사용자의 경험을 완전히 바꿀 수 있습니다.

어떤 속성을 어떤 상황에 배치하느냐에 따라 방문자가 체류하는 시간이 달라지고 웹사이트의 보안성까지 영향을 받기 때문에 실무적인 지식이 반드시 필요합니다.

링크 태그의 기본 생김새와 필수 요소

코딩을 전혀 모르는 초보자라도 아주 간단한 규칙만 익히면 이 태그를 자유자재로 다룰 수 있습니다. 기본적으로 이동할 주소를 지정해 주는 하이퍼텍스트 참조 속성이 가장 핵심입니다.

화면에 실제로 노출되는 텍스트나 이미지는 태그가 열리고 닫히는 그 사이에 위치하게 됩니다. 가장 기본적인 형태는 지정된 주소와 화면에 보여질 문구로 이루어집니다.

인터넷 주소를 적을 때는 항상 전체 주소를 올바르게 입력해야 오류가 발생하지 않습니다. 다른 웹사이트로 연결할 때는 외부 주소 전체를 적어야 하고 같은 웹사이트 내의 다른 페이지로 갈 때는 상대 경로를 활용하여 간결하게 표현할 수도 있습니다. 이처럼 기본 뼈대를 단단하게 세워야 다양한 속성들을 안정적으로 얹을 수 있습니다.

새 창을 열기 위한 필수 설정과 작동 원리

블로그 포스팅이나 쇼핑몰 상품 상세 페이지를 보다가 링크를 눌렀을 때 현재 보고 있던 페이지는 그대로 유지된 채 새로운 탭이 켜지는 경험을 누구나 해보았을 것입니다. 이것을 구현하는 속성이 바로 타겟 속성입니다.

이 속성에 특정 값을 부여하면 브라우저에게 기존 창이 아닌 새로운 창이나 탭에서 문서를 열어달라고 명령할 수 있습니다.

과거에는 새로운 창을 띄울 때마다 브라우저 창 자체가 완전히 분리되어 실행되는 경우가 많았지만 최근의 웹 브라우저는 대부분 새로운 탭으로 열리는 방식을 채택하고 있습니다.

사용자의 편의를 고려하여 외부 링크는 새로운 창으로 띄우고 내부 링크는 현재 창에서 자연스럽게 이동하도록 설정하는 것이 웹 퍼블리싱의 기본 예절이자 사용자 경험을 높이는 지름길입니다.

새 창을 열 때 반드시 함께 써야 하는 보안 속성

새 창으로 문서를 열어주는 속성을 사용할 때 눈에 보이지 않지만 매우 치명적인 보안 취약점이 발생할 수 있다는 사실을 아는 사람은 드뭅니다.

새로운 창에서 열린 사이트가 자바스크립트를 이용해 원래 창의 주소를 조작하거나 악성 사이트로 강제로 이동시키는 공격을 시도할 수 있습니다. 이를 방지하기 위해 최신 웹 표준에서는 특정한 관계 속성을 함께 적어주는 것을 강력하게 권장하고 있습니다.

보안을 강화하고 개인정보 유출을 막기 위해 새 창 속성과 함께 지정해야 하는 속성은 원천적으로 악성 스크립트의 접근을 차단합니다. 또한 검색엔진 최적화 관점에서 추천하지 않는 사이트로 검색 로봇이 이동하는 것을 막아주는 역할도 동시에 수행합니다.

따라서 외부 사이트로 연결하는 링크를 만들 때는 새 창을 띄우는 기능과 보안을 지켜주는 속성을 한 세트로 묶어서 사용하는 습관을 들여야 합니다.

링크 태그에 사용되는 다양한 속성들의 종류와 역할

기본적인 주소 연결 외에도 링크 태그에는 다양한 목적을 가진 속성들이 존재합니다. 이 속성들을 적절히 조합하면 단순히 페이지 이동을 넘어 다채로운 기능을 구현할 수 있습니다.

• 하이퍼텍스트 참조 속성은 사용자가 클릭했을 때 이동할 목적지 웹 주소나 파일 경로를 지정합니다.
• 타겟 속성은 문서가 열릴 위치를 결정하며 새로운 탭이나 현재 창 등의 방식을 지정합니다.
• 관계 속성은 현재 페이지와 연결된 페이지 사이의 관계를 정의하여 보안과 검색엔진 최적화에 기여합니다.
• 다운로드 속성은 클릭 시 페이지 이동 대신 지정된 파일을 곧바로 내려받도록 유도합니다.
• 제목 속성은 마우스를 올렸을 때 말풍선 형태로 추가 정보를 보여주어 접근성을 높입니다.

다양한 상황별 링크 설정 방법과 실생활 활용

실제 웹사이트를 운영하거나 콘텐츠를 작성할 때 상황에 맞는 올바른 링크 설정을 적용하는 것은 매우 중요합니다. 방문자의 목적에 따라 유연하게 코드를 작성해야 이탈률을 줄이고 만족도를 높일 수 있습니다.

블로그 본문에서 외부 참고 자료를 연결할 때

자신의 글을 읽던 사용자가 다른 유익한 사이트로 빠져나가는 것은 블로거 입장에서 아쉬운 일입니다. 이럴 때는 새로운 창으로 사이트가 열리도록 설정하고 보안 속성을 함께 부여하여 독자가 나중에 다시 본래의 블로그로 돌아올 수 있는 환경을 만들어주는 것이 현명합니다.

이메일 주소나 전화번호를 바로 연결할 때

모바일 기기로 웹사이트를 이용하는 사용자가 늘어나면서 전화번호나 이메일 주소를 클릭했을 때 곧바로 통화 화면이 켜지거나 메일 작성 창이 뜨는 기능이 필수가 되었습니다. 주소 칸에 특수한 양식을 입력하면 사용자가 번호를 일일이 복사하지 않고도 손쉽게 연락을 취할 수 있습니다.

대용량 파일이나 서식을 배포할 때

이미지나 PDF 문서 같은 파일을 단순히 웹 브라우저 화면에 띄우는 대신 곧바로 다운로드 폴더에 저장되도록 만들고 싶을 때가 있습니다. 이럴 때는 별도의 속성을 추가하여 사용자가 클릭 한 번에 원하는 자료를 손에 넣을 수 있도록 실용적인 편의를 제공할 수 있습니다.

새 창 열기 기능에 대한 흔한 오해와 진실

새 창으로 링크를 열어주는 기능에 대해서는 웹 전문가들 사이에서도 의견이 엇갈리곤 합니다. 사용자가 원하지 않는데 새로운 창이 무분별하게 뜨면 피로감을 느낄 수 있기 때문입니다. 모든 링크를 무조건 새 창으로 설정하는 것은 오히려 사용자 경험을 해치는 주원인이 됩니다.

사용자가 현재 읽고 있던 맥락을 유지해야 하는 외부 사이트 이동이나 장바구니 결제 같은 특수한 상황을 제외하고는 가급적 현재 창에서 이동하게 두는 것이 자연스럽습니다.

특히 웹사이트 내부의 다른 메뉴로 이동할 때마다 새 창이 계속해서 생겨난다면 브라우저 탭이 수십 개로 늘어나 사용자가 혼란을 겪을 수 있습니다. 따라서 꼭 필요한 곳에만 전략적으로 새 창 설정을 적용하는 지혜가 필요합니다.

검색엔진 최적화와 링크 속성의 긴밀한 관계

검색 포털 사이트의 로봇은 웹사이트를 구석구석 돌아다니며 정보를 수집합니다. 이때 링크 태그에 어떤 속성이 부여되어 있는지를 보고 해당 페이지의 신뢰도를 판단합니다.

광고성 링크나 대가성 링크에는 검색 로봇이 점수를 부여하지 않도록 설정하는 속성을 반드시 넣어주어야 불이익을 피할 수 있습니다.

웹사이트의 건강한 생태계를 유지하기 위해 검색엔진들은 링크의 성격을 명확하게 밝히기를 요구합니다. 편집자의 자발적인 추천인지, 돈을 받고 실어준 광고인지, 혹은 단순한 사용자 참여 콘텐츠인지 구분할 수 있는 속성들을 제대로 활용해야 검색 결과 상위에 노출되는 데 유리한 조건을 갖출 수 있습니다.

웹 접근성을 고려한 올바른 링크 작성 요령

시력이 불편하여 스크린 리더 프로그램을 사용하는 사용자나 마우스를 원활하게 쓰기 어려운 사용자들도 인터넷을 자유롭게 이용할 수 있어야 합니다. 링크 태그를 작성할 때 단순히 여기를 누르세요 같은 모호한 문구를 사용하면 시각장애인들은 어디로 이동하는지 전혀 알 수 없습니다.

링크의 텍스트만 읽어도 어떤 페이지로 이동하는지 명확하게 유추할 수 있도록 구체적인 단어를 선택해야 합니다. 예를 들어 회사 소개 페이지로 이동하는 링크라면 단순히 링크라는 단어 대신 우리 회사 소개 바로가기처럼 직관적으로 작성하는 것이 바람직합니다.

또한 키보드의 탭 키만으로도 모든 링크를 순서대로 이동할 수 있도록 웹 표준을 준수하는 것이 진정한 의미의 유익한 정보 제공이라 할 수 있습니다.

직접 해 보기: 링크 4개 만들어 보기

설명만 읽으면 헷갈릴 수 있어서, 맥에서 연습용 HTML 파일을 만들어 직접 눌러 봤어요. 같은 창에서 열기, 새 탭에서 열기, 메일, 전화 링크를 하나씩 넣었어요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>링크 연습</title>
</head>
<body>
  <h1>a 태그 연습</h1>
  <p><a href="https://www.google.com">같은 창에서 구글 열기</a></p>
  <p><a href="https://www.google.com" target="_blank" rel="noopener noreferrer">새 탭에서 구글 열기</a></p>
  <p><a href="mailto:test@example.com">메일 보내기</a></p>
  <p><a href="tel:+821012345678">전화 걸기</a></p>
</body>
</html>

코드를 하나씩 풀어 보면 이래요.

• href는 클릭했을 때 이동할 주소예요.
• target="_blank"를 붙이면 새 탭에서 열려요.
• rel="noopener noreferrer"는 새 탭으로 열 때 보안을 지켜 주는 속성이라, target="_blank"와 한 세트로 쓰는 게 좋아요.
• mailto:는 메일 작성 창을, tel:은 전화 걸기 화면을 열어 줘요.

직접 눌러 본 결과

두 구글 링크는 주소가 같지만 열리는 방식이 달랐어요. 첫 번째 링크를 눌렀을 때는 지금 보던 탭이 그대로 구글로 바뀌어서 연습 페이지가 사라졌고, 뒤로 가기를 눌러야 돌아올 수 있었어요. 두 번째 링크를 눌렀을 때는 구글이 새 탭으로 열리고 연습 페이지는 그대로 남아 있었어요.

한 가지 더 알게 된 건 링크 색이에요. 눌러 본 링크는 보라색으로, 아직 안 눌러 본 링크는 파란색으로 보였어요. 브라우저가 방문한 링크를 알아서 표시해 주는 거예요.

자주 묻는 질문

링크 태그와 새 창 설정에 대해 많은 사람들이 공통적으로 궁금해하는 부분들을 정리했습니다.

링크를 클릭했을 때 왜 간혹 새 창이 안 열리고 원래 창에서 이동하나요

새 창을 띄우는 속성을 코딩에 빠뜨렸거나 문법에 오타가 있을 경우 발생합니다. 또한 모바일 환경의 일부 브라우저는 사용자의 설정이나 앱 특성에 따라 강제로 현재 탭에서 열리도록 제어하기도 합니다.

새 창 열기 속성을 쓸 때 보안이 왜 문제가 되나요

새로 열린 창이 자바스크립트를 통해 원래 창의 위치를 해로운 주소로 바꿔치기하는 피싱 공격에 악용될 수 있기 때문입니다. 이를 방지하는 관계 속성을 함께 적어주면 이러한 위험을 원천적으로 차단할 수 있습니다.

이미지에도 링크를 걸 수 있나요

텍스트뿐만 아니라 이미지 태그를 링크 태그로 감싸면 사용자가 이미지를 클릭했을 때 지정된 주소로 이동하거나 확대되는 기능을 구현할 수 있어 쇼핑몰이나 배너 광고에서 매우 흔하게 쓰입니다.

모바일에서 전화번호를 누르면 바로 전화가 걸리게 하려면 어떻게 하나요

주소 입력란에 일반 웹 주소 대신 전화번호를 뜻하는 특수한 접두사를 붙이고 번호를 적어주면 스마트폰 사용자가 터치 한 번으로 통화 앱을 실행할 수 있습니다.

마무리

이번 글에서는 a 태그의 속성과 새 창 설정을 정리하고, 직접 만든 연습 페이지로 확인까지 해 봤어요. 설명만 읽을 때는 같은 창과 새 탭의 차이가 잘 와닿지 않았는데, 직접 눌러 보니 바로 알겠더라고요. 같은 창 링크는 보던 페이지가 사라져서 뒤로 가기를 눌러야 했고, 새 탭 링크는 원래 페이지가 그대로 남아 있었어요.

여러분도 위의 코드를 메모장에 붙여넣고 link.html로 저장한 다음, 브라우저로 열어서 직접 눌러 보세요. 외부 사이트로 연결하는 링크에는 target="_blank"와 rel="noopener noreferrer"를 한 세트로 붙이는 습관을 들이면 좋아요.