🔗 05. a 태그 깊게 파기: href='#' 는 이제 버리자

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 15분 / 핵심 파트만: 8분

🗺️ 이 문서의 흐름

[a 태그의 진짜 역할] → [href 완전 해부] → [target + rel 보안] → [Next.js Link vs a] → [링크 접근성]

🎯 이 문서를 다 읽으면 할 수 있는 것

• href 에 들어갈 수 있는 URL 스킴 종류를 설명할 수 있다.
• target="_blank" 와 rel="noopener noreferrer" 를 왜 함께 써야 하는지 보안 원리로 설명할 수 있다.
• <a href="#"> 대신 <button> 을 쓸 판단 기준을 갖는다.
• Next.js <Link> 와 HTML <a> 의 차이를 안다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "영호 님, 저 버튼처럼 생긴 링크 만들고 싶어서 <a href='#'> 에 onClick 달았어요. 그리고 외부 링크는 새 탭에서 열리게 target='_blank' 넣었는데 이거면 되는 거 아닌가요?"
• 🦁 영호 ( 리드 ): "두 가지 다 고쳐야 해요. href='#' 은 URL을 # 으로 바꾸는 부작용이 있고, 진짜 네비게이션 기능 없는 거면 <button> 이 맞아요. 그리고 target='_blank' 에 rel='noopener' 없으면 보안 구멍이 생길 수 있어요."

🤔 왜 알아야 하는가

영수네 커뮤니티 보안 감사에서 외부 링크 페이지에 경고가 떴다.

🦁 영호 리드: "영철 님, 외부 링크 전부 rel='noopener noreferrer' 빠져있어요. target='_blank' 로 열리는 탭이 window.opener 로 우리 원본 탭에 접근할 수 있어요. 악성 사이트가 링크를 타고 우리 서비스 URL을 피싱 페이지로 바꿀 수 있습니다."

<!-- ❌ 영철이의 위험한 외부 링크 -->
<a href="https://external-site.com" target="_blank">외부 링크</a>
<!-- 이 새 탭에서 window.opener.location = 'https://phishing-site.com' 가능! -->

🔗 1. href — 링크가 갈 수 있는 모든 곳

<a> 는 URL 형식이라면 거의 모든 것을 링크로 만들 수 있어.

<!-- 일반 URL -->
<a href="https://example.com">외부 사이트</a>
<a href="/posts">내부 페이지 (절대 경로)</a>
<a href="./about">현재 디렉토리 기준 (상대 경로)</a>
 
<!-- 페이지 내 특정 섹션으로 이동 (Fragment Identifier) -->
<a href="#section-2">섹션 2로 이동</a>
<!-- 이동 대상 요소: <h2 id="section-2">섹션 2</h2> -->
 
<!-- 이메일 클라이언트 열기 -->
<a href="mailto:support@ysdeveloper.community">이메일 문의</a>
<a href="mailto:help@example.com?subject=제목&body=내용">제목 포함 이메일</a>
 
<!-- 전화 걸기 (모바일에서 자동 다이얼) -->
<a href="tel:+82-10-1234-5678">전화하기</a>
 
<!-- 파일 다운로드 (동일 출처만 작동) -->
<a href="/files/report.pdf" download="2025-연간보고서.pdf">PDF 다운로드</a>

🚫 javascript:void(0) 절대 금지
href="javascript:void(0)" 는 JavaScript가 꺼져 있거나 오류가 나면 아무것도 안 돼요.
북마크, 링크 복사, 새 탭 열기도 전부 망가져요. 버튼이 필요하면 <button> 을 써야 해요.

🛡️ 2. target + rel — 새 탭 보안의 진실

2-1. target="_blank" 와 window.opener 보안 취약점

<!-- ❌ 구버전 브라우저 기준 위험한 패턴 -->
<a href="https://external-bad-site.com" target="_blank">외부 링크</a>

target="_blank" 로 열린 새 탭은 window.opener 로 원본 탭에 접근할 수 있었어 (구버전 브라우저). 악성 사이트가 이걸 이용해서 원본 탭의 URL을 피싱 사이트로 바꿀 수 있었어.

<!-- ✅ 안전한 외부 링크 패턴 -->
<a
  href="https://external-site.com"
  target="_blank"
  rel="noopener noreferrer"
>
  외부 링크 (새 탭, 안전)
</a>

• rel="noopener": window.opener 를 null 로 설정 → 원본 탭 접근 불가
• rel="noreferrer": Referer HTTP 헤더를 보내지 않음 → 어디서 왔는지 외부에 노출 안 됨

🔗 최신 브라우저에서는?
모던 브라우저(Chrome 88+, Firefox 79+)는 target="_blank" 에 암묵적으로 noopener 를 적용해줘요. 하지만 레거시 브라우저 지원이나 명시적 의도 전달을 위해 명시적으로 rel="noopener noreferrer" 를 쓰는 게 5년 차의 습관이에요.

2-2. rel 속성의 다른 값들

<!-- SEO: 이 링크는 검색엔진이 따라가지 말 것 -->
<a href="https://ads.example.com" rel="nofollow">광고 링크</a>
 
<!-- 이전/다음 페이지 (SEO 힌트) -->
<a href="/posts?page=2" rel="next">다음 페이지</a>
<a href="/posts?page=1" rel="prev">이전 페이지</a>

🆚 3. <a> vs <button> — 가장 많이 헷갈리는 선택

🐣 영철: "그럼 href='#' 쓰면 안 되면 언제 <a> 쓰고 언제 <button> 써요?"

Q. 이 요소를 클릭하면...
  ├─ 다른 URL/페이지로 이동하는가?    → <a href="..."> 사용
  └─ 현재 페이지에서 동작(toggle, submit, open modal 등)인가?
                                    → <button> 사용

<!-- ❌ 잘못된 패턴: 링크처럼 생긴 버튼 -->
<a href="#" onclick="openModal()">모달 열기</a>
<!-- 클릭 시 URL이 '#'으로 바뀌고, 페이지 상단으로 점프 -->
 
<!-- ✅ 올바른 패턴 -->
<button type="button" onclick="openModal()">모달 열기</button>
<!-- CSS로 링크처럼 스타일링 가능, 기능은 버튼 -->
 
<!-- ✅ 올바른 링크: 실제 페이지 이동 -->
<a href="/posts/1">게시글 보기</a>

키보드 접근성 차이:

• <a>: Enter 키로 활성화, Tab으로 포커스 이동
• <button>: Enter + Space 바 둘 다 활성화, Tab으로 포커스 이동

⚛️ 4. Next.js <Link> vs HTML <a>

🐣 영철: "Next.js에서는 <Link> 를 써야 한다고 하는데, <a> 랑 뭐가 달라요?"

import Link from "next/link";
 
// ❌ Next.js에서 <a> 사용: 풀 페이지 리로드 발생
<a href="/posts">게시판</a>
 
// ✅ Next.js <Link>: SPA처럼 클라이언트 사이드 네비게이션
// 전체 리로드 없이 필요한 컴포넌트만 교체
<Link href="/posts">게시판</Link>
 
// Link 주요 props
<Link
  href="/posts/1"
  prefetch={true}       // hover 시 미리 데이터 로드 (기본값)
  replace={false}       // 히스토리 push 대신 replace
>
  게시글 보기
</Link>

Next.js <Link> 가 <a> 보다 나은 이유:

1. Prefetching: 뷰포트에 보이는 Link 를 미리 패치 → 클릭 시 즉각 반응
2. SPA 방식 이동: 공통 레이아웃(layout.tsx)은 유지하고 변경된 컴포넌트만 교체
3. 스크롤 복원: 뒤로가기 시 이전 스크롤 위치 자동 복원

단, 외부 링크는 Next.js <Link> 가 아닌 <a target="_blank" rel="noopener noreferrer"> 사용!

♿ 5. 링크 접근성 — 링크 텍스트가 전부다

스크린리더는 페이지의 모든 링크를 목록으로 읽어줘. 링크 텍스트가 맥락 없이 불분명하면 사용자가 어디로 가는지 알 수 없어.

<!-- ❌ 나쁜 링크 텍스트: 맥락 없음 -->
<p>자세한 내용은 <a href="/posts/1">여기를 클릭하세요</a>.</p>
<!-- 스크린리더: "여기를 클릭하세요" → 어디로 가는지 모름 -->
 
<!-- ✅ 좋은 링크 텍스트: 목적지가 명확함 -->
<p>자세한 내용은 <a href="/posts/1">리액트 상태관리 가이드</a>를 참고하세요.</p>
<!-- 스크린리더: "리액트 상태관리 가이드" → 명확한 목적지 -->
 
<!-- 아이콘만 있는 링크: aria-label 필수 -->
<a href="/settings" aria-label="설정 페이지로 이동">
  <svg>...</svg>  {/* 아이콘만 있으면 스크린리더가 읽을 내용이 없음 */}
</a>

🏁 핵심 패턴 총정리

📝 마무리 퀴즈

Q1. 다음 중 보안과 접근성 모두를 올바르게 구현한 외부 링크는?

• A) <a href="https://example.com" target="_blank">외부 링크</a>
• B) <a href="https://example.com" target="_blank" rel="noopener noreferrer">외부 링크 (새 탭에서 열림)</a>
• 가) <a href="https://example.com" rel="noopener">외부 링크</a>
• 라) <a href="javascript:window.open('https://example.com')">외부 링크</a>

✅ 정답: B

💡 상세 해설:

• 원리 설명: target="_blank" 로 새 탭을 열 때 rel="noopener" 가 없으면 구버전 브라우저에서 window.opener 를 통한 원본 탭 접근이 가능해요. rel="noreferrer" 는 Referer 헤더를 차단해 방문 경로 노출을 막습니다. B는 사용자에게 새 탭에서 열린다는 힌트도 텍스트로 제공해 접근성도 우수해요.
• 📌 핵심 기억법: "target='_blank' = 반드시 rel='noopener noreferrer' 세트로"

Q2. 아래 코드의 문제점과 올바른 수정법은?

<a href="#" onclick="toggleMenu()">메뉴 열기</a>

✅ 정답: URL이 # 으로 바뀌는 부작용과 시맨틱 미스매치. <button type="button" onclick="toggleMenu()">메뉴 열기</button> 으로 수정

💡 상세 해설:

• 원리 설명: <a> 는 "네비게이션(이동)을 위한 요소" 입니다. href="#" 을 클릭하면 페이지 URL이 # 으로 바뀌고 상단으로 점프하는 부작용이 생겨요. 메뉴 토글은 이동이 아닌 "동작(Action)" 이므로 <button> 이 시맨틱/접근성 모두 맞습니다.
• 📌 핵심 기억법: "이동하면 <a>, 동작하면 <button>"

Q3. 영철이의 테스트 타임

영철이는 Next.js 프로젝트에서 게시글 목록 페이지를 만들었다.
각 게시글 제목을 클릭하면 상세 페이지로 이동하는 코드를 짰는데,
영호 리드가 "이 링크를 클릭할 때마다 페이지 전체가 새로고침 돼요"라고 코멘트를 남겼다.

영철이가 쓴 코드: <a href="/posts/1">리액트 상태관리 가이드</a>

어떻게 수정해야 하고, 왜 그래야 하는가?

✅ 정답: import Link from 'next/link' 후 <Link href="/posts/1">리액트 상태관리 가이드</Link> 로 수정

💡 상세 해설:

• 원리 설명: HTML <a> 는 클릭 시 브라우저가 새 HTTP 요청을 보내고 전체 HTML을 다시 로드해요. Next.js <Link> 는 클라이언트 사이드 라우팅으로 현재 페이지의 공통 레이아웃은 그대로 두고, 바뀐 페이지 콘텐츠만 교체해요. 불필요한 리소스 재다운로드가 없어서 훨씬 빠르고, Prefetch 덕분에 hover 시 미리 데이터를 로드해 클릭 즉시 반응해요.
• 📌 핵심 기억법: "Next.js 내부 링크 = <Link>, 외부 링크 = <a target='_blank' rel='noopener noreferrer'>"

🐣 영철이의 퇴근 일기

오늘 영호 리드 님이 내 PR에서 href='#' 달린 부분을 전부 <button> 으로 바꾸라고 했을 때 처음엔 좀 억울했다. "어차피 CSS로 똑같이 생기잖아요" 했더니 리드 님이 직접 Tab 키로 시연해주셨다. 아 진짜... 키보드로 탐색하는 사람 입장에서 <a href='#'> 는 '어딘가를 탐색하는 링크'처럼 느껴지는데 버튼 동작을 하니까 완전히 사용자 기대를 배신하는 거였다.

💡 "<a> 는 어디론가 이동할 때, <button> 은 무언가를 할 때. href='#' 에 onClick 다는 건 지도(a)에 망치질(button)하는 것과 같다."

그리고 rel='noopener noreferrer' 이거... 이렇게 중요한 보안 속성이었는지 몰랐다. 앞으로는 외부 링크 쓸 때 reflexively(반사적으로) 붙여야겠다. 오늘 저녁은 밥 먹으면서 Next.js Link 컴포넌트 prefetch 동작 더 파봐야지.

🔗 더 알아보기

• MDN: <a> 요소
• MDN: rel 속성
• Next.js 공식 문서: Link 컴포넌트