HTML rel 속성, 어떻게 사용하고 계신가요?
웹 개발을 하다 보면 <a> 태그나 <link> 태그를 자주 사용하게 됩니다. 이때 rel이라는 속성을 보신 적이 있을 텐데요, 이 속성은 현재 HTML 문서와 연결된 리소스가 어떤 관계인지를 브라우저나 검색엔진에게 알려주는 중요한 역할을 합니다. rel 속성을 잘 활용하면 브라우저가 스타일시트를 인식하거나, 검색엔진에게 특정 링크를 따라가지 않도록 안내하고, 보안을 강화하는 데에도 도움을 받을 수 있습니다.
그래서 오늘은 MDN 문서(https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel)를 바탕으로 유용하게 쓰이는 rel 값들을 정리해 보았습니다.
알아두면 유용한 rel 값들
stylesheet
외부 CSS 파일을 불러올 때 사용합니다. <link> 태그와 함께 쓰이며, CSS 파일의 경우 type="text/css"는 기본값이므로 생략 가능합니다.
<link rel="stylesheet" href="styles.css">alternate
현재 문서의 다른 버전을 가리킬 때 사용합니다. 예를 들어 인쇄용 페이지, 다른 언어 버전, 또는 RSS 피드 같은 대체 형식을 알려줄 때 유용합니다. type 속성과 함께 사용하면 그 의미를 더 명확히 할 수 있습니다. stylesheet와 함께 사용하면 대체 스타일 시트를 정의할 수도 있습니다.
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml">
<link rel="alternate" type="text/css" title="다크 모드" href="dark-mode.css">nofollow
검색 엔진에게 이 링크를 따라가지 말라고 알려줍니다. 사용자가 만든 콘텐츠의 링크나 광고 링크 등, 현재 페이지와 직접적인 연관성을 부여하고 싶지 않은 경우에 사용될 수 있습니다.
<a href="https://example.com" rel="nofollow">파트너사 링크</a>noopener
target="_blank"로 링크를 새 탭에서 열 때, 새로 열린 탭이 원래 탭의 window.opener 객체에 접근하지 못하도록 차단합니다. 이는 '탭내빙(Tabnabbing)'이라는 보안 위협을 방지하는 데 중요한 역할을 합니다.
<a href="https://external-site.com" target="_blank" rel="noopener">안전하게 새 탭으로 열기</a>noreferrer
noopener 기능에 더해, 링크를 통해 다른 페이지로 이동할 때 브라우저가 참조 페이지 정보(Referer 헤더)를 보내지 않도록 합니다. 사용자의 프라이버시 보호에 도움이 될 수 있습니다.
<a href="https://privacy-focused-site.com" target="_blank" rel="noreferrer">참조 정보 없이 새 탭으로 열기</a>참고: 보안과 프라이버시를 위해 noopener와 noreferrer를 함께 사용하는 것이 일반적입니다: rel="noopener noreferrer"
icon
웹사이트나 웹 애플리케이션을 나타내는 아이콘(파비콘 등)을 지정합니다. 다양한 크기와 형식의 아이콘을 연결할 수 있습니다.
<link rel="icon" href="/favicon.ico" sizes="any"> <!-- 기본 파비콘 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <!-- 32x32 PNG 파비콘 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> /* iOS 홈 화면 아이콘 */prev / next
문서가 연속된 시리즈의 일부일 때 사용합니다. prev는 이전 문서를, next는 다음 문서를 가리킵니다. 브라우저는 이 정보를 활용해 다음 페이지를 미리 로드하는 등의 최적화를 할 수 있습니다.
<link rel="prev" href="/chapter/1">
<link rel="next" href="/chapter/3">canonical
동일하거나 매우 유사한 콘텐츠를 가진 페이지가 여러 URL로 존재할 경우, 검색엔진에게 어떤 URL이 대표(표준)인지를 알려줍니다. 이는 중복 콘텐츠 문제를 해결하고 SEO(검색엔진 최적화)에 도움을 줍니다.
<link rel="canonical" href="https://my-website.com/preferred-url">dns-prefetch
브라우저에게 특정 도메인의 DNS 조회를 미리 수행하도록 요청합니다. preconnect보다는 가벼운 작업으로, 당장 연결이 필요하지 않더라도 나중에 해당 도메인에서 리소스를 가져올 가능성이 있을 때 DNS 조회 시간을 절약할 수 있습니다.
<link rel="dns-prefetch" href="//fonts.googleapis.com">rel로 웹 성능 개선하기
몇몇 rel 값은 브라우저에게 리소스 로딩에 대한 힌트를 주어 웹 페이지의 성능을 개선하는 데 도움을 줄 수 있습니다. 특히 preconnect와 dns-prefetch는 외부 리소스 로딩 시간을 줄이는 데 효과적입니다.
preconnect: 미리 연결 설정하기
브라우저에게 특정 출처(origin)에 미리 연결을 시도하도록 요청합니다. 브라우저는 DNS 조회, TCP 핸드셰이크, TLS 협상 등을 미리 수행하여, 나중에 해당 출처의 리소스를 요청할 때 발생하는 지연 시간을 줄일 수 있습니다.
언제 사용하면 좋을까요?
- 가져올 출처는 알지만 정확한 리소스 경로를 모를 때: 예를 들어, 버전이 계속 바뀌는 스크립트나 라이브러리를 CDN에서 가져오거나, 사용자의 환경에 따라 다른 이미지를 제공하는 이미지 CDN을 사용할 때 유용합니다. Google Fonts 같은 웹 폰트 서비스도 내부적으로 여러 출처에
preconnect를 사용합니다. - 중요한 외부 리소스 로딩 속도를 개선하고 싶을 때: API 서버, 주요 CDN 등에 미리 연결해 두면 초기 로딩 시간을 100ms에서 500ms까지도 단축하는 효과를 볼 수 있습니다.
<link rel="preconnect" href="https://api.service.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> /* 웹 폰트 제공 출처 */crossorigin속성은 왜 필요할까요?
만약preconnect하려는 서버에서 나중에 가져올 리소스가 CORS(Cross-Origin Resource Sharing)를 필요로 한다면(예: 웹 폰트,fetch나XMLHttpRequest를 사용하는 API 요청 등), 미리 맺는 연결도 CORS를 고려해서 맺어야 합니다.crossorigin속성은 브라우저에게 이 연결을 CORS 모드로 설정하라고 알려줍니다. 특히 인증 정보(쿠키 등) 없이 리소스를 가져오는 경우(가장 흔한 케이스)crossorigin속성을 값 없이 추가해주면 됩니다. 이렇게 해야 미리 맺은 연결을 나중에 해당 리소스를 가져올 때 재사용할 수 있어 성능 이점을 제대로 얻을 수 있습니다.
fetch()함수 사용 시에도 유용: JavaScript의fetch()함수를 사용하여 외부 API에 요청을 보낼 때도preconnect는 유용합니다.fetch()가 실행되기 전에 미리 연결을 준비시켜 전체 API 요청 시간을 단축하는 데 도움을 줄 수 있습니다. 이때도 CORS가 필요하다면crossorigin속성을 잊지 마세요.
dns-prefetch: DNS 조회만 미리 하기
preconnect와 비슷하지만 DNS 조회만 미리 수행하도록 합니다. TCP 연결이나 TLS 협상까지는 진행하지 않기 때문에 preconnect보다 훨씬 가볍습니다. 당장 연결이 필요하지는 않지만 나중에 해당 도메인의 리소스를 사용할 가능성이 있을 때 DNS 조회 시간이라도 절약하기 위해 사용될 수 있습니다.
preconnect대체(Fallback)로 사용:preconnect를 지원하지 않는 브라우저를 위해dns-prefetch를 함께 명시해 줄 수 있습니다. 이때는 web.dev 문서에서 권장하는 대로 별도의<link>태그를 사용하는 것이 안전합니다 (일부 브라우저 버그 회피).
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com"> /* preconnect 미지원 브라우저용 */prefetch: 다음 페이지 리소스 미리 가져오기
사용자가 다음에 방문할 가능성이 높은 페이지나 리소스를 브라우저가 여유 시간에 미리 다운로드하도록 제안합니다. 현재 페이지 로딩에는 영향을 주지 않으면서, 사용자가 다음 페이지로 이동했을 때 로딩 속도를 개선할 수 있습니다.
<link rel="prefetch" href="/next-feature.html" as="document">preload: 현재 페이지 필수 리소스 미리 로드하기
현재 페이지를 렌더링하는 데 필수적인 리소스를 높은 우선순위로 미리 로드하도록 브라우저에게 지시합니다. 예를 들어, 화면 상단에 바로 보이는 이미지, 주요 폰트, 또는 렌더링을 차단하는 스크립트나 스타일시트 등에 사용될 수 있습니다. as 속성으로 리소스의 종류를 명확히 지정해야 하며, 꼭 필요한 리소스에만 신중하게 사용해야 합니다.
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/main-bundle.js" as="script">
<link rel="preload" href="/fonts/brand-font.woff2" as="font" type="font/woff2" crossorigin>주의사항 및 LCP 개선 팁
preconnect는 연결 설정에 필요한 최소한의 정보(TLS 인증서 등)만 교환하지만, 너무 많은 출처에preconnect를 사용하면 초기 대역폭을 불필요하게 소모하고 CPU 자원을 사용할 수 있습니다. 가장 중요하고 즉시 필요한 연결에만 사용하는 것이 좋습니다.preload는 실제 리소스를 다운로드하므로, 현재 페이지에 꼭 필요하고 즉시 사용될 리소스에만 신중하게 사용해야 합니다. 잘못 사용하면 오히려 중요한 다른 리소스의 다운로드를 방해할 수 있습니다.- LCP(최대 콘텐츠 페인트) 개선: 페이지에서 가장 큰 콘텐츠(이미지 또는 텍스트 블록)가 로드되는 시간인 LCP는 사용자 경험에 큰 영향을 줍니다. 만약 LCP 요소가 외부 출처(예: CDN의 이미지)에서 로드된다면, 해당 출처에
preconnect를 설정하는 것이 LCP 개선에 도움이 될 수 있습니다. 가능하다면 해당 LCP 리소스 자체에preload와 함께fetchpriority="high"속성을 사용하는 것이 더 직접적인 효과를 낼 수 있습니다.
이러한 rel 값들을 적절히 활용하면 브라우저가 리소스를 더 효율적으로 로드하도록 도와 결과적으로 사용자가 느끼는 페이지 로딩 속도를 개선할 수 있습니다.
마무리하며
rel 속성은 작아 보일 수 있지만, 웹 페이지의 접근성, SEO, 성능 및 보안에 영향을 미치는 중요한 요소입니다. 링크의 관계를 명확히 함으로써 더 나은 사용자 경험을 제공하고 웹 표준을 준수하는 데 도움이 됩니다. 더 자세한 정보는 아래 참고 자료들을 확인해 보세요.
참고 자료:
