button 태그는 마우스 휠로 눌러도 새 탭이 나오지 않는 이유?
서론
진행하던 프로젝트에서 “분석 시작” 기능을 버튼으로 만들었는데, 예상치 못한 문제가 생겼습니다.
<button> 태그로 구성한 이 버튼을 마우스 휠 클릭(가운데 클릭)으로 눌렀을 때, 새 탭에서 실행되지 않는 현상이 있었던 겁니다.
사용자 입장에서는 “링크처럼 생긴 요소”를 가운데 클릭하면 새 탭에서 열리길 기대하는 경우가 많습니다. 하지만 버튼을 휠 클릭해도 아무런 반응이 없었습니다. 이 문제를 계기로 왜 버튼은 새 탭에서 열리지 않는가?, 링크는 되고 버튼은 안 되는 이유는 무엇인가?에 대해 더 깊이 알아보게 되었습니다.
이 차이는 단순히 브라우저의 습관적인 동작 때문이 아니라, HTML 요소의 기본 역할과 의도된 사용 목적, 그리고 브라우저가 이들을 어떻게 해석하고 처리하는지에 관한 명확한 기술적 기준이 존재하기 때문입니다.
이는 단순한 UI 차이가 아닌, HTML 사양(HTML specification)과 브라우저의 기본 동작(Browser default behavior)에 깊이 연관되어 있는 주제입니다.
링크(<a>)와 버튼(<button>)의 차이
1. 태그의 본질적인 목적
<a>태그는 하이퍼링크(anchor)로서, 웹의 기본 기능인 문서 간 연결(Navigation)을 위한 요소입니다.<button>태그는 사용자 인터랙션을 통한 액션 수행을 목적으로 하며, 주로 JavaScript와 함께 동작합니다.
2. 브라우저의 기본 동작
대부분의 브라우저는 다음과 같은 동작을 기본 제공하고 있습니다:
| 동작 | <a> 태그 | <button> 태그 |
|---|---|---|
| Ctrl + 클릭 | 새 탭 열기 | 기본 동작 없음 |
| 마우스 가운데 버튼 클릭 | 새 탭 열기 | 기본 동작 없음 |
| 우클릭 → 새 탭에서 열기 | 가능 | 불가능 |
이는 브라우저가 <a> 태그를 “탐색 가능한 객체(navigable target)”로 인식하기 때문입니다. 반면 <button>은 이 범주에 속하지 않기 때문에 새 탭 관련 인터랙션을 제공하지 않습니다.
3. HTML5 명세에 따른 분류
HTML Living Standard에서는 다음과 같이 정의하고 있습니다:
<a>: “Interactive content and phrasing content. Represents a hyperlink.”<button>: “Interactive content and flow content. Represents a button that can be activated.”
즉, <a>는 탐색을 위한 요소로 문서의 위치를 정의하고 있으며, <button>은 동작을 트리거하기 위한 UI 요소일 뿐입니다.
실제 예시로 비교해보자
다음 HTML 코드를 통해 두 태그의 동작 차이를 테스트할 수 있습니다:
1
2
3
4
5
<!-- 링크 -->
<a href="https://example.com">링크</a>
<!-- 버튼 -->
<button onclick="location.href='https://example.com'">버튼</button>
예상 결과
- 링크에 대해 마우스 가운데 버튼을 누르면 브라우저는
href속성 값을 추출해 새 탭에서 자동으로 탐색합니다. - 버튼에 대해 가운데 버튼을 누르면, 브라우저는 해당 요소를 “기본 클릭 이벤트”로만 처리하고
onclick이벤트를 호출하지 않습니다.
이유는 간단합니다. 마우스 가운데 버튼은 브라우저가 <a> 요소에만 **탐색 시멘틱(navigation semantics)**을 부여했기 때문입니다. onclick 이벤트는 보통 왼쪽 버튼 클릭에서만 발생하며, 가운데 버튼에서는 mouseup/mousedown은 발생해도 click 이벤트가 트리거되지 않는 경우가 많습니다.
그럼 버튼도 새 탭으로 열 수는 없을까?
가능합니다. 단, 직접 JavaScript를 통해 새 창을 여는 방식을 써야 합니다:
1
<button onclick="window.open('https://example.com', '_blank')">새 탭으로 열기</button>
이렇게 하면 브라우저는 window.open()을 통해 새 탭 또는 새 창을 열어줍니다. 하지만 중요한 제약이 존재합니다:
- 브라우저 팝업 차단 정책: 일부 브라우저는 사용자의 명시적인 인터랙션이 아닌
window.open호출을 차단할 수 있습니다. - 가운데 클릭 무반응: 이 방식도 마우스 가운데 버튼 클릭에는 전혀 반응하지 않습니다. 오직 “좌클릭”을 통해서만 작동합니다.
접근성과 사용자 경험 측면에서 바라보기
사용자의 입장에서 링크처럼 생긴 버튼은 혼란을 줄 수 있습니다. 다음과 같은 사례가 문제를 일으킵니다:
- 외관상 링크처럼 보이는 텍스트에
<button>이 사용되어 새 탭 열기를 기대했지만, 동작하지 않는 경우 - 스크립트를 통한 이동이기 때문에 **페이지 히스토리(history stack)**가 어색하게 구성되거나, 브라우저 뒤로 가기 버튼이 오작동할 수 있는 경우
웹 접근성(WCAG) 기준
접근성 측면에서는 다음과 같은 권고 사항이 존재합니다:
- 링크는 실제로
<a>태그를 사용할 것 - 버튼은 폼 제출이나 JavaScript 기반 액션에만 사용할 것
- 요소의 시멘틱이 시각적 스타일과 일치해야 하며, 스크린 리더 사용자도 정확한 맥락을 파악할 수 있어야 함
요약
| 요소 | 새 탭에서 열기 (휠 클릭) | 브라우저 인식 방식 | 적절한 사용처 |
|---|---|---|---|
<a> | O | 탐색 대상 (navigable) | 페이지 간 이동 |
<button> | X | 인터랙션 대상 (actionable) | 기능 실행, 폼 제출 등 |
결론
마우스 휠 클릭으로 새 탭에서 열리는 기능은 <a> 태그가 HTML 명세와 브라우저에서 탐색 가능한 링크로 인식되기 때문입니다. 반면 <button>은 액션을 수행하는 UI 컨트롤로, 브라우저는 해당 요소를 “탐색 대상”으로 간주하지 않습니다.
사용자 경험을 고려할 때, 새 탭 열기와 같은 내비게이션 기능이 필요하다면 반드시 <a> 요소를 사용해야 하며, CSS를 통해 버튼처럼 스타일링하는 것이 좋은 방법입니다.
1
<a href="https://example.com" class="button-like">새 탭으로 이동</a>
✅ 버튼처럼 보이게 하고 싶다면 CSS로 스타일만 조절하세요. 기능은 링크에 맡기는 것이 가장 명확하고 안전한 방법입니다.
버튼은 액션, 링크는 이동이라는 HTML의 기본 원칙을 지키는 것이 곧 유지보수성, 접근성, 그리고 UX의 품질을 결정짓습니다.