링크를 함부로 다루지 마세요

작성자는 링크를 버튼이나 팝업으로 대체하면 새 탭 열기, URL 복사, 키보드 탐색 같은 브라우저 기능이 깨진다고 설명합니다. 무한 스크롤과 자체 제작 날짜 선택기도 기본 브라우저 기능을 해치는 사례로 들며, 표준 HTML 요소를 활용하라고 제안합니다.

주제: 웹 접근성 개발 도구

에디터 노트

링크의 기본 동작을 보존하자는 주장은 브라우저가 이미 제공하는 복사, 새 탭 열기, 키보드 탐색을 웹사이트가 임의로 끊지 말라는 구체적인 원칙으로 이어집니다. 다만 원문은 target="_blank"를 권하면서 동시에 사용자가 같은 탭에서 열 방식을 고르기 어렵게 한다는 반론도 받습니다. 링크를 온전히 둔다는 기준은 새 탭을 강제하는 데까지 확장되지 않습니다. 날짜 선택기 댓글은 표준 요소가 언제나 사용자 환경에 맞는다는 원문의 단정을 제한합니다. 브라우저별 지역 설정과 표시 방식이 다르다는 경험이 제시됐고, 생년월일처럼 오래전 날짜를 입력하는 상황에는 별도 입력란이 더 적합하다는 의견도 나왔습니다. 반면 미러 주소와 원본 주소가 충돌하는 사례는 클릭 동작을 바꾸려는 실제 요구를 보여줍니다. 이 경우에도 댓글에서 나온 두 링크 표시는 주소와 동작을 분리해 제공하는 해법이며, 보편적인 해답이라고 단정할 근거는 없습니다. 표준 요소를 우선하되 작업의 목적과 브라우저 차이를 함께 고려해야 한다는 정도가 자료가 뒷받침하는 판단입니다.

AI 요약

링크는 클릭해 이동하는 기능만 제공하지 않습니다. 사용자는 새 탭이나 창에서 열고, URL을 복사하거나 저장하고, 키보드로 이동하며, 화면 낭독기와 검색 엔진으로 링크를 확인합니다. 작성자는 JavaScript 버튼이나 클릭 이벤트로 링크를 가로채면 이런 동작이 사라진다고 지적합니다. 새 창이 필요하면 JavaScript 팝업 대신 <a target="_blank">를 쓰라고 권합니다. 링크를 눌렀을 때 원래 페이지를 덮는 자체 로딩 화면도 진행 상황을 확인하거나 작업을 취소하기 어렵게 만듭니다.

브라우저 기본 동작을 유지하세요

작성자는 링크 미리보기를 클릭이 아니라 마우스를 올렸을 때 열고 닫도록 권합니다. 무한 스크롤은 페이지 내 검색, 북마크, Home·End 키, 뒤로 가기 동작을 깨뜨릴 수 있습니다. 긴 문서는 브라우저가 HTML을 내려받는 동안 일부를 먼저 표시하므로, 텍스트를 보여주려고 큰 JavaScript 프레임워크를 추가하는 방식도 비판합니다. <details>나 날짜 입력처럼 브라우저가 제공하는 요소를 직접 다시 만들지 말고, 모양은 CSS로 다듬으라고 제안합니다. 여러 파일로 나눠 요청하는 것보다 단일 TCP 연결을 활용하는 편이 빠르다는 주장도 덧붙입니다.

날짜 입력의 표준 기능을 둘러싼 반론

댓글에서는 날짜 선택기가 브라우저와 운영체제에 따라 날짜 형식, 한 주의 시작 요일, 다크 모드 표시가 달라진다는 경험이 나왔습니다. 일부 Firefox 사용자는 OS 지역 설정을 따르게 하려면 설정을 바꿔야 했다고 말합니다. 다른 댓글은 생년월일처럼 과거의 임의 날짜를 고르는 작업에는 달력보다 날짜 구성 요소를 따로 입력하는 방식이 나을 수 있다고 지적합니다. 반면 모바일에서는 기본 날짜 선택기가 편리하다는 의견도 있습니다.

링크의 주소와 동작이 충돌하는 사례

ActivityPub 서비스 Hackers' Pub 운영자는 원격 게시물의 원본 주소를 href에 넣고 클릭하면 서비스 내부 미러로 이동하도록 처리했다고 설명합니다. 링크 복사에는 원본 주소가 필요하지만, 미러에서만 좋아요나 답글을 쓸 수 있기 때문입니다. 이 방식은 새 탭 열기에서 원본으로 이동해 사용자가 미러 기능을 쓰지 못하게 합니다. 댓글에서는 원본과 미러 링크를 각각 표시하자는 대안과 auxclick 이벤트 활용법이 제시됐습니다. 다른 사용자는 target="_blank"도 원치 않는 탭을 강제한다며 브라우저가 이동 방식을 결정하게 두자고 반박했습니다.

원문 보기 ↗토론 보기 ↗