Link

링크는 내비게이션 요소로 사용되는 컴포넌트예요. 사용자를 다른 사이트, 리소스, 또는 같은 페이지 안의 섹션 같은 다른 위치로 이동시킵니다. 단독으로 또는 텍스트와 인라인으로 사용할 수 있습니다.

출처: Link

본문

개요 (Overview)

링크는 내비게이션 요소로 사용되며 단독으로 또는 텍스트와 인라인으로 쓸 수 있어요. 가벼운 내비게이션 옵션을 제공하지만, 다른 인터랙티브 요소처럼 링크가 너무 많으면 페이지가 어수선해지고 사용자가 다음 단계를 식별하기 어려워집니다. 특히 인라인 링크는 아껴서 사용해야 해요.

언제 사용할까요 (When to use)

사용자가 다음을 하길 원할 때 링크를 사용하세요:

  • 애플리케이션 안의 다른 페이지로 이동
  • 완전히 다른 사이트로 이동
  • 같은 페이지의 요소로 점프
  • 이메일이나 전화번호에 연결

언제 사용하지 말아야 할까요 (When not to use)

데이터를 변경하거나 표시 방식을 조작하거나, 상태를 바꾸거나, 액션을 트리거하는 작업에는 링크를 사용하지 마세요. 대신 사용자를 특정 액션으로 안내하려면 버튼(buttons)을 사용하세요.

이미지를 링크로 사용하지 마세요. 대신 이미지와 링크 같은 추가 정보를 포함할 수 있는 타일(tile)을 사용하세요.

변형 (Variants)

변형 (Variant) 용도 (Usage)
Standalone 단독으로 또는 콘텐츠 바로 뒤에 사용하며 밑줄을 사용하지 않음. 아이콘과 짝을 이룰 수 있음.
Inline 문장이나 단락 안에서 사용되며 밑줄로 스타일링됨. 아이콘과 짝을 이루면 안 됨.

포맷 (Formatting)

구조 (Anatomy)

  • 링크 텍스트(Link text): 무엇에 링크되는지 전달해요.
  • 아이콘(Icon, 선택): 참조되는 콘텐츠의 목적지 또는 유형을 나타내요.

크기 (Sizing)

링크 컴포넌트에는 small, medium, large의 세 가지 크기 변형이 있어요. 인라인 링크 크기는 함께 있는 텍스트의 타입 크기와 일치해야 합니다. 단독 링크 크기는 페이지의 기본 body copy 크기와 일치해야 해요.

크기 (Size) 높이 (px / rem)
Small 16 / 1
Medium 18 / 1.125
Large 22 / 1.375

크기는 단독 링크와 인라인 링크 모두에 적용.

배치 (Placement)

인라인 링크는 보통 문장이나 단락 안에 있고, 단독 링크는 다른 텍스트와 분리되어 단독으로 놓일 수 있어요. 메시지를 단순화하기 위해 한 문장 안의 인라인 링크 수를 줄이는 것을 고려하세요.

알림 안의 인라인 링크 예시

카드 안의 단독 링크 예시

콘텐츠 (Content)

링크 텍스트 (Link text)

  • 독특하고 의미 있는 링크 텍스트를 사용하세요.
  • 링크가 사용자가 링크 목적지에서 찾을 콘텐츠를 정확히 반영하도록 하세요.
  • 디자인이 "read more" 같은 일반적인 링크 이름을 사용한다면 고유하게 만드는 것을 고려하세요. 자세한 내용은 접근성 탭을 참고하세요.
  • 같은 페이지의 다른 목적지에 같은 링크 텍스트를 사용하지 말고, 각각에 고유한 텍스트를 사용해 링크를 구분하세요.
  • 특히 줄바꿈되면 링크가 이해 가능하지만 과도하게 길지 않도록 하세요.

아이콘 표시 (Icon indicator)

링크 목적지를 전달하려면 적절한 아이콘을 사용하세요. 외부 링크에는 "launch" 아이콘, 내부 링크에는 "arrow right" 아이콘을 사용하는 것이 일반적이에요. 어떤 아이콘을 선택하든 새 페이지로 이동하거나 여는 데 같은 아이콘이 일관되게 사용되도록 하세요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

공통 동작 (Universal behaviors)

상태 (States)

링크에는 여섯 가지 주요 상태가 있어요 – enabled (unvisited), hover, focus, active, visited, disabled. 상태에 대해 더 알아보려면 스타일(Style) 탭을 참고하세요.

상태 (State) 언제 사용하나요 (When to use)
Enabled (unvisited) 링크의 기본 상태. 사용자가 아직 링크를 클릭하지 않았을 때.
Hover 사용자가 링크 위에 커서를 올렸을 때.
Focus 사용자가 링크에 탭하거나 클릭하면 포커스되어, 사용자가 컴포넌트로 성공적으로 이동했음을 나타냄.
Active 사용자가 링크를 클릭하고 있을 때.
Visited 사용자가 이전에 방문하지 않은 링크를 클릭했을 때. $link-visited 색상 토큰에 변화가 있음.
Disabled 사용자가 링크와 상호작용할 수 없을 때. 링크가 일시적으로 비활성화되거나 사용할 수 없을 수 있음.

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 링크 텍스트의 아무 곳이나 또는 관련된 아이콘을 클릭해 링크를 열 수 있어요.

키보드 (Keyboard)

링크에 포커스가 있는 동안 Enter를 눌러 링크를 열 수 있어요. 추가 키보드 인터랙션은 접근성 탭을 참고하세요.

반응형 동작 (Responsive behavior)

링크를 클릭하거나 활성화하면 다음을 할 수 있어요:

  • 읽기 전용 정보가 있는 모달 열기
  • URL을 바꾸고 브라우저 새로 고침을 일으키며 사용자를 새 페이지로 이동
  • 같은 페이지 안의 다른 섹션으로의 점프 지원
  • 이미지, 비디오, HTML 문서 같은 웹 리소스 열기

클릭 가능 영역 (Clickable areas)

단독 및 인라인 링크 모두 텍스트의 전체 너비에 걸쳐 클릭 가능해요. 아이콘이 있는 단독 링크는 아이콘을 포함하는 확장된 클릭 가능 영역을 가집니다.

클릭 가능 영역이 있는 단독·인라인 링크

단독 링크는 콘텐츠 바로 뒤에 단독으로 사용돼요. 문장이나 단락 안에서 사용하면 안 됩니다. 단독 링크는 Carbon의 기본 링크 스타일이며 호버, 포커스, 활성 상태에서만 밑줄을 가집니다.

단독 링크 컴포넌트는 아이콘과 짝을 이룰 수 있어요. 아이콘은 항상 링크 텍스트와 같은 색이어야 합니다. 필요하면 같은 컨텍스트나 페이지에 나타날 때 고스트 버튼이나 인라인 링크와 구분하기 위해 적절한 아이콘을 활용하세요.

컨텍스트 안의 단독 링크를 보여주는 예시

인라인 링크는 텍스트의 문장이나 단락에서 사용돼요. 인라인 링크는 단독 링크와 동일하게 동작하지만 밑줄로 스타일링됩니다. 이렇게 하면 옆에 배치된 텍스트와 구분되고 사용자가 상호작용할 수 있다는 것이 분명해집니다.

인라인 링크는 단독으로 사용하면 안 되며 아이콘과 짝을 이루면 안 됩니다.

본문 텍스트 안의 인라인 링크를 보여주는 예시

수정자 (Modifiers)

방문 스타일 (Visited style)

기본적으로 링크 컴포넌트는 방문(visited) 스타일을 사용하지 않아요. 방문한 링크는 사용자가 이미 링크를 열었음을 나타내므로 작업 완료 중 유용한 표시가 될 수 있습니다. 방문 스타일은 사용자가 제품을 탐색할 때 페이지를 어수선하게 만들고 시각적 소음을 추가하는 경우가 많으므로 아껴서 사용해야 해요. 사용자가 이미 링크를 클릭했음을 보여주는 것이 중요하다면 사용할 수 있습니다.

방문 전·후 링크를 보여주는 예시

일부 링크는 내비게이션 외에도 작업 완성을 돕는 액션을 트리거해요. 이 링크들은 여전히 내비게이션 목적을 수행해야 합니다. 흔한 예로 전화번호 링크가 있는데, 클릭하면 웹사이트가 자동으로 전화번호를 열고 전화를 겁니다. 링크 텍스트와 함께 제공되는 아이콘은 어떤 액션이 트리거되고 사용자가 어디로 이동될지 명확히 해야 해요.

이메일용 인라인 링크 예시

액션이 사용자를 리소스로 이동시킬 때 링크를 사용하세요.

액션이 내비게이션 목적을 수행할 때 버튼을 사용하지 마세요.

코드 사용 불가: 다음 스펙은 링크 컴포넌트용으로 개발되지 않았지만, 그룹화된 링크 사이의 적절한 거리로 디자인이 권장합니다. 자세한 내용은 스타일(Style) 탭을 참고하세요.

링크는 가로 또는 세로로 그룹화할 수 있어요. 한 변형은 아이콘과 함께 가로 행으로 링크를 표시하며 페이지의 주요 본문 안에서 주로 사용됩니다. 세로 링크는 보통 메인 페이지 콘텐츠 옆의 리소스 링크나 타일 안의 추가 링크에 사용돼요.

링크의 가로·세로 그룹화 예시

버튼 (Button)

버튼은 액션을 시작하는 데 사용돼요. 버튼 라벨은 사용자가 상호작용할 때 어떤 액션이 일어날지 표현합니다. 자세한 지침은 Carbon의 button을 참고하세요.

타일 (Tile)

타일은 정보, 시작하기, 방법, 다음 단계 등을 포함한 다양한 콘텐츠를 표시하는 매우 유연한 컴포넌트예요. 자세한 지침은 Carbon의 tile을 참고하세요.

참고 자료 (Reference)

Jakob Nielsen, Guidelines for Visualizing Links (Nielsen Norman Group, 2004)

더 알아보기 (Learn more)

링크는 사용자를 다른 위치로 이동시키는 내비게이션 요소예요. 독특하고 의미 있는 링크 텍스트를 사용하고, 밑줄이 있는 인라인 링크와 아이콘과 짝을 이룰 수 있는 단독 링크를 상황에 맞게 고르세요. 데이터를 바꾸거나 액션을 트리거하는 경우에는 버튼을 사용하고, 방문·아이콘 스타일은 일관되게 활용하면 됩니다.