Link

Link는 사람들이 경험 내부나 다른 앱·사이트로 이동할 수 있게 해 주는 상호작용 텍스트예요. 클릭해서 다른 곳으로 이동시켜 주는 텍스트라고 보면 돼요.

탐색이 아닌 다른 액션을 트리거하기 위해 링크를 사용하지 마세요. 시각적 비중이 낮은 보조 액션을 만들려면 대신 투명하거나 미묘한(subtle) button을 시도해 보세요.

출처: Link 문서

본문

Types (유형)

Default (기본) — 기본 링크는 테마 색상으로 스타일링돼요. 가장 접근성이 좋은 링크 스타일이며 대부분의 경우 사용해야 해요.

Subtle (미묘한) — 미묘한 링크는 본문 텍스트와 같은 색상이며 기본 링크보다 접근성이 낮아요. 시각적 비중을 줄일 때 미묘한 링크를 사용하되, 아이콘처럼 선택 가능함을 알려주는 다른 단서를 추가하는 것을 고려하세요.

Inverted (반전) — 반전 링크는 더 어두운 배경 색상에 유용해요.

On-brand (브랜드 위) — 브랜드 색상 위에 링크가 표시될 때는 온브랜드 스타일링을 사용해야 해요.

Behavior (동작)

Inline links (인라인 링크)

기본적으로 모든 링크는 호버, 포커스, 눌림(pressed) 상태에서 밑줄을 보여줘요. 선택적인 인라인 링크 동작은 rest(기본) 및 visited(방문) 상태에도 밑줄을 포함해요. 인라인 동작을 사용해 링크가 존재하고 상호작용 가능함을 나타내는 시각적 단서를 최대화하세요. 특히 다른 본문 텍스트 옆에 나타날 때 유용해요.

인라인 링크는 rest 및 visited 상태에 밑줄을 추가해 추가 시각적 단서를 제공해요.

Layout (레이아웃)

Default vs. subtle links (기본 vs 미묘한 링크)

대부분의 경우 기본 링크 유형이 사람들이 인터페이스 내 링크를 쉽게 훑어보고 인식하도록 보장하는 최선의 선택이에요.

미묘한 링크는 주의해서 사용하세요. 기본 제공 상태에서는 상호작용 가능함을 나타내는 시각적 표시가 없어요. 호버하거나 포커스하지 않으면 링크를 놓칠 수 있어요.

미묘한 링크는 호버나 포커스 전까지 상호작용을 나타내지 않으며 접근성이 낮아요.

푸터나 탐색 패널처럼 링크 목록이 명백한 곳에서는 미묘한 링크의 인라인 동작을 없애도 안전해요. 사람들은 보통 이런 패턴이 탐색 옵션을 제공한다는 것을 이해하므로 추가 시각적 단서가 필요 없어요.

미묘한 링크는 푸터처럼 탐색에 전념하는 UI 부분에서는 괜찮아요.

Icons in links (링크 안의 아이콘)

링크 텍스트와 함께 아이콘을 사용하면 링크를 선택하면 무슨 일이 일어날지 힌트를 줄 수 있어요. 예를 들어 열기(open) 아이콘은 외부 링크 대상을 의미해요. chevron right(>) 같은 아이콘도 인라인 처리를 사용하지 않을 때 링크가 선택 가능함을 알려주는 추가 시각적 단서를 제공할 수 있어요.

열기 아이콘은 링크가 새 컨텍스트를 연다는 것을 의미해요. Chevron은 텍스트가 상호작용 가능함을 나타내요.

코딩된 Link 컴포넌트는 기본적으로 아이콘 슬롯을 포함하지 않아요. 링크에 아이콘을 포함하려면 <Link> 컴포넌트의 자식으로 <i> 또는 <span>을 배치하세요.

Link spacing (링크 간격)

개별 링크 사이를 충분히 떼어서 서로 다른 곳으로 이끈다는 것을 알 수 있게 하세요. 링크 사이를 띄우면 운동 능력이 저하된 사람들이 자신이 원하는 것을 쉽게 선택하는 데도 도움이 돼요.

너무 가까이 있는 링크는 구별하고 선택하기 어려울 수 있어요.

Accessibility (접근성)

Visual cues (시각적 단서)

링크는 상호작용 가능하다는 시각적 표시가 최소 두 가지 필요해요. 색상, 밑줄, 아이콘, 포커스, 커서 변화 같은 단서의 조합을 사용해 링크를 선택할 수 있다는 것을 알려주세요.

Link text (링크 텍스트)

보조 기술을 사용하는 사람들은 페이지의 모든 링크 목록에 접근해 탐색할 수 있으므로, 링크 텍스트는 맥락이 없어도 의미가 통해야 해요. 문장에 링크를 포함할 때는 주의하세요. 고립되어 읽히는 문장 부분은 혼란스러울 수 있기 때문이에요. 또한 언어마다 문장 구조가 달라 문장 내 링크는 지역화(localization)가 어려울 수 있어요.

링크가 어디로 이끄는지는 명확해야 해요. 모호한 링크 텍스트는 접근할 수 없어요.

UI에서 모호한 링크 텍스트를 피할 수 없다면, 링크 대상을 식별하는 더 설명적인 aria-label을 꼭 포함하세요.

페이지에 여러 개의 동일한 링크를 두지 마세요. 모두에게 모호함을 만들고, 음성 제어를 사용하는 사람처럼 일부 사용자의 탐색을 복잡하게 만들 수 있어요.

Opening new contexts (새 컨텍스트 열기)

새 컨텍스트로 이동하는 링크는 방향 감각을 잃게 할 수 있으니 주의하세요. 링크가 새 탭이나 창에서 열린다면 미리 알려주세요. 열기 아이콘 같은 시각적 단서와 링크가 새 탭이나 창으로 이동함을 나타내는 aria-label을 추가하세요.

Content (콘텐츠)

Make it short, descriptive, and actionable (짧고 설명적이며 실행 가능하게)

사람들은 링크 텍스트만으로 링크의 목적을 정확히 예측할 수 있어야 해요. URL이나 "Click here" 같은 일반 텍스트로 링크에 라벨을 붙이지 마세요.

링크 텍스트는 짧고 구체적이어야 해요. 모호한 링크 텍스트를 피하세요.

무엇을 더 배우게 될지 명시하지 않은 "Learn more" 링크는 피하세요. 공간을 절약해야 할 때 "more"를 생략하는 것을 고려하세요.

사람들이 무엇을 배우게 될지 분명히 하세요. "Learn more" 링크 단독으로는 혼란을 일으킬 수 있어요.

Capitalize the first word (첫 단어 대문자)

문장형 대문자 표기(sentence style capitalization)를 사용하세요 — 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization를 참고하세요.

Skip the period (마침표 생략)

본문 텍스트 안에서 링크를 걸면 링크에 문장 부호를 포함하지 마세요. 독립형 링크는 완전한 문장이더라도 끝 문장 부호가 전혀 필요 없어요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.

더 알아보기 (Learn more)

  • Link 스토리북 및 React/Web Components 가이드 확인
  • Microsoft Writing Style Guide: Capitalization, Periods