본문 바로가기
Design System
홈페이지

Components · 액션

Link (링크)

다른 페이지·위치로 이동시키는 인라인 텍스트. 색만이 아니라 밑줄을 함께 써 링크임을 알린다.

정의

다른 페이지·위치로 이동시키는 인라인 텍스트 컴포넌트다.

Anatomy

규격은 제품 카탈로그 에서 확인. ① 링크 텍스트 ② 밑줄
부위토큰
① 링크 텍스트색 --link-color(틸700, 흰 배경 AA) · 굵기 --font-weight-semibold(본문과 구분)
② 밑줄--link-underline · 호버·포커스에서 강조(색만으로 구분하지 않음) · 전환 --link-underline-dur
③ 외부 링크 아이콘(선택)라인 SVG, stroke="currentColor", 새 탭 이동 표시

변형

변형용도
인라인(기본)문장 안 링크 — 밑줄로 구분
독립(standalone)문단 밖 단독 링크("디자인구독 안내 보기 →")
외부 링크새 탭 이동 — 아이콘 + rel 표기

상태

상태값
Default색 --link-color · 밑줄 --link-underline
Hover밑줄 색·강조(--link-color) · 전환 --link-underline-dur
Focusbox-shadow: var(--focus-ring) + 밑줄 유지
Visited색 유지(맥락상 필요할 때만 --color-text-muted로 구분)

Do / Don't

Do
  • 링크는 색과 밑줄을 함께 쓴다 — 색을 못 봐도 링크임을 안다.
  • 링크 텍스트는 목적지를 설명한다("제품 카탈로그") — 맥락 없는 "여기" 금지.
  • 새 탭으로 여는 외부 링크는 아이콘·문구로 미리 알린다.
Don't
  • 이동이 아닌 실행(제출·삭제)에 링크를 쓰지 말 것 — 실행은 Button이다.
  • 본문 링크의 밑줄을 제거해 색만 남기지 말 것 — 색맹 사용자에게 링크가 사라진다.
  • "여기를 클릭"·"more" 같은 맥락 없는 라벨을 쓰지 말 것.

콘텐츠 규칙

  • 링크 텍스트는 목적지를 설명하는 명사구("안전표지 카탈로그", "디자인구독 안내").
  • 문장 안에서는 자연스러운 어절만 감싼다 — 조사("…에서")는 링크 밖에 둔다.
  • 외부·다운로드 링크는 유형을 함께 표기한다("(PDF)", "새 창").
  • URL을 그대로 노출하지 않는다 — 설명 텍스트로 대체한다.

키보드 인터랙션

키동작
Tab / Shift+Tab다음/이전 링크로 포커스 이동(포커스 링 표시)
Enter링크 이동(활성화)

접근성

  • 네이티브 <a href>를 쓴다 — 키보드·스크린리더 기본 지원.
  • 링크를 색만으로 구분하지 않는다 — 밑줄·호버를 동반한다(WCAG 1.4.1 색 비의존).
  • 새 탭 링크는 target="_blank" + rel="noopener" + 새 탭 안내 텍스트를 함께 둔다.
  • 색 대비: --link-color(틸700) on 흰 배경은 AA 이상. 기준: ../guidelines/accessibility.md.

코드

친환경 노면표시재의 자세한 규격은 제품 카탈로그에서 확인할 수 있습니다.

제품은 스토어에서 구매할 수 있습니다.

디자인구독 안내 보기 →

html
<p class="pi-prose">
  친환경 노면표시재의 자세한 규격은
  <a class="pi-link" href="#">제품 카탈로그</a>에서 확인할 수 있습니다.
</p>
<p class="pi-prose">
  제품은
  <a class="pi-link pi-link--external" href="https://store.public-id.co.kr" target="_blank" rel="noopener">스토어에서 구매<span class="pi-link__ext" aria-hidden="true">↗</span></a>할 수 있습니다.
</p>
<p class="pi-prose">
  <a class="pi-link pi-link--standalone" href="#">디자인구독 안내 보기 →</a>
</p>
css
.pi-prose { font: var(--text-body); color: var(--color-text-primary); word-break: keep-all; }
.pi-link {
  color: var(--link-color);
  font-weight: var(--font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: var(--space-1);
  border-radius: var(--radius-sm);
  transition: text-decoration-color var(--link-underline-dur) var(--easing-out);
}
.pi-link:hover { text-decoration-color: var(--link-color); }
.pi-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  text-decoration-color: var(--link-color);
}
.pi-link__ext { margin-left: var(--space-1); font-size: var(--font-size-sm); }
.pi-link--standalone { font-weight: var(--font-weight-bold); text-decoration: none; }
.pi-link--standalone:hover { text-decoration-line: underline; text-decoration-color: var(--link-color); }

@media (prefers-reduced-motion: reduce) {
  .pi-link { transition: none; }
}

Changelog

날짜변경
2026-07-15문서 계약(10섹션) 적용 — Anatomy 도해·변형(인라인/독립/외부)·상태 매트릭스·색 비의존 원칙·코드 신설, 기존 규격 승계