원문 캡처 · maurycyz.com
원문 캡처 · maurycyz.com

링크를 함부로 바꾸지 말자.

2026-05-31

링크는 클릭하면 어딘가로 이동하는 버튼일 뿐일까?

<style>
span {
 text-decoration: underline;
 color: #44EEEE;
}
</style>
<span onclick="window.location='https://xkcd.com/'">100% legit link</span>

100% 진짜 링크

하지만 이는 링크를 겉으로만 흉내 낸 것이다. 진짜 링크는 다음과 같은 기능을 제공한다.

  • 새 탭에서 열 수 있다. (Ctrl)
  • 새 창에서 열 수도 있다. (Shift)
  • 파일로 저장할 수 있다. (Alt)
  • 마우스 오른쪽 버튼을 눌러 URL을 복사할 수 있다.
  • 키보드로 이동해 열 수 있다. (Tab + Enter)
  • 검색 엔진이나 스크린 리더 같은 도구가 링크를 인식할 수 있다.
  • 마우스를 올려 URL을 확인할 수 있다.

버튼으로는 이 기능들을 쓸 수 없다.

또 다른 흔한 문제는 진짜 링크를 사용하면서 클릭 이벤트를 가로채 팝업을 여는 것이다. 하지만 진짜 <a target="_blank"> 링크를 사용하면 다음과 같은 일을 할 수 있다.

  • 페이지가 로딩되는 상태를 확인할 수 있다.
  • 로딩을 취소할 수도 있다.
  • 설명이 있는 오류 페이지를 확인하고 필요하면 다시 시도할 수 있다.
  • 여러 페이지를 한꺼번에 열 수 있다.
  • 페이지가 로딩되는 동안 원래 페이지를 읽을 수 있다.
  • 브라우저 탭이나 창 관리 기능으로 페이지를 정리할 수 있다.
  • 페이지를 북마크에 추가할 수 있다.
  • URL을 복사해 친구에게 보낼 수 있다.

무엇보다 링크는 일관되게 작동한다.

팝업을 닫으려다 팝업이 지나치게 그럴듯하게 보여 사이트 전체를 실수로 닫은 일이 몇 번인지 이제는 셀 수도 없다.

연결이 느릴 때 링크를 눌렀다가 끝없이 돌아가는 로딩 표시만 보게 되는 경우도 흔하다. 실제로 무언가 진행 중인지, 얼마나 걸릴지 알 수 없다. 더 심각한 문제는 로딩 표시가 원래 페이지를 가리는 경우가 많아 그 페이지조차 읽을 수 없다는 점이다.

브라우저는 링크와 페이지 로딩을 잘 처리한다. 브라우저가 애초에 그런 일을 하도록 만들어졌기 때문이다.

  • 자바스크립트 버튼을 링크처럼 사용하지 말자.
  • 직접 로딩 애니메이션을 만들지 말자.
  • 링크 미리보기는 클릭이 아니라 마우스를 올리거나 뗄 때 열고 닫자.
  • 자바스크립트 팝업으로 링크를 열지 말고 target="_blank"를 사용하자.

그 밖에 흔한 문제도 있다.

무한 스크롤은 Ctrl-F 검색, 북마크, Home·End 키를 망가뜨리고 뒤로 가기 버튼도 자주 제대로 작동하지 않게 한다.

페이지에 텍스트가 10만 자 있어도 괜찮다. 브라우저는 HTML을 다운로드하는 동안에도 일부 내용을 렌더링하므로 사용자는 그 사실조차 알아차리지 못한다. 텍스트를 다운로드하는 일을 5MB짜리 자바스크립트 프레임워크로 더 나쁘게 만드는 것은 어리석다.

속도를 높이려면 전체 왕복 횟수를 최소화하는 편이 좋다. TCP의 슬로 스타트 알고리즘 때문에 모든 것을 하나의 TCP 연결에 담는 편이 나눠 보내는 것보다 언제나 낫다.

검색 도구와 스크린 리더를 망가뜨릴 수 있으니 <details>를 직접 다시 구현하지 말자. 다만 보기 좋게 꾸미는 CSS를 사용하는 것은 괜찮다.

날짜 선택기나 그 밖의 기본 제공 입력 요소도 직접 만들지 말자.

기본 날짜 입력 요소는 사용자가 선호하는 날짜 형식을 적용하고, 이를 표준 형식인 yyyy-mm-dd로 변환하며, 키보드로도 사용할 수 있다. 게다가 한 줄의 코드만으로 쓸 수 있고 기본적으로 다크 모드도 지원한다.

관련 자료: