링크란 무엇일까요?
디자인 시스템에서 링크(Link)는 단순한 하이퍼링크를 넘어, 다양한 목적과 용도에 따라 정의되고 사용됩니다. 링크를 개념적으로 정의할지, 독립적인 UI 컴포넌트로 정의할지에 따라 적용 방식이 달라지는데요. 이번 글에서는 링크의 개념과 UI 요소로서의 구분 기준을 정리하고, 네비게이션, 텍스트 링크, 액션 링크, 텍스트 버튼을 어떻게 구별해야 하는지 자세히 살펴보겠습니다.
링크의 종류와 특징
웹사이트에서 사용자가 링크를 눌렀을 때 반응하는 방법 또는 상호작용에 따라 링크를 다음과 같이 구분할 수 있습니다.
내부 링크 (Internal Link): 같은 웹사이트 내의 다른 페이지로 이동하는 링크입니다.
예: 메인 메뉴 네비게이션, 푸터 링크, 사이드바 링크, 본문 내 관련 콘텐츠 링크
외부 링크 (External Link): 다른 웹사이트나 외부 리소스로 이동하는 링크입니다.
예: “자세한 정보는 공식 사이트를 참조하세요.”
앵커 링크 (Anchor Link): 같은 페이지 내의 특정 섹션으로 이동하는 링크입니다.
예: KRDS의 인페이지네비게이션 컴포넌트
다운로드 링크 (Download Link): 파일을 다운로드할 수 있도록 하는 링크입니다.
예: “PDF 다운로드”, “이미지 다운로드”
액션 링크 (Action Link): 페이지 이동이 아닌 특정 동작을 수행하는 링크입니다.
예: “자세히 보기”, “더보기”, “새 창 열기”
이처럼 다양한 링크를 사용자가 구분할 수 있도록 디자인적 표현을 사용하여 링크의 스타일을 결정합니다. 일반적인 하이퍼링크처럼 텍스트와 밑줄을 사용하는 방법, 네비게이션에서 텍스트만 사용하는 방법, 특정 서비스나 소셜 미디어 링크를 아이콘으로 표현하는 방법 등이 있습니다.
꼭 그렇지는 않습니다. 네비게이션이나 앵커 링크 등은 사용 용도와 목적이 다르기 때문에 오히려 링크의 속성을 그대로 적용할 경우 문제가 될 수 있습니다.
링크의 스타일: 밑줄과 Visited 컬러는 필수일까요?
꼭 그렇지는 않습니다. 네비게이션이나 앵커 링크 등은 사용 용도와 목적이 다르기 때문에 일반적인 링크 스타일을 적용할 경우 문제가 발생할 수 있습니다
- 예를 들어, 메뉴 등에서 링크마다 밑줄을 추가하면 가독성이 떨어질 수 있습니다.
- 메뉴 등에서 방문한 페이지에 따라 색상이 바뀌는 방식(Visited State)은 현재 위치나 클릭 상태 스타일과 충돌할 가능성이 있습니다.
- UI 내 버튼처럼 동작하는 링크는 일반적인 링크 스타일(밑줄 등)이 전체적인 디자인 스타일에서 어울리지 않을 수 있습니다.
- 또한 아이콘으로 표현되는 링크등은 밑줄이나 Visited상태를 표현하기 모호합니다.
따라서 링크 컴포넌트를 만든다면 링크 종류를 파악하고 용도를 확인하여 어느 범위까지 사용할지 정의하는 것이 좋습니다.
문장 내 텍스트 링크, 반드시 컴포넌트로 만들어야 할까요?
문장 내에 연결되는 텍스트 링크는 다음 요소를 고려해야 합니다:
유연성: 다양한 스타일을 적용하여 쉽게 변형할 수 있는가?
재사용성: 반복적으로 사용될 가능성이 있는가?
일관성: 디자인 시스템 내에서 통일된 스타일이 필요한가?
이러한 요소를 검토하여 필요하다면 컴포넌트로 정의하여 사용하지만, 반드시 모든 텍스트 링크를 컴포넌트로 만들어야 하는 것은 아닙니다. 디자인 시스템은 반복되는 요소를 컴포넌트화하는 개념이므로, 유지보수나 관리의 효율성을 고려하여 적용하는 것이 좋습니다
링크와 비슷한 텍스트 버튼은 어떻게 다른가요?
텍스트 버튼은 일반적인 링크와 달리 특정 동작(액션)을 수행하는 버튼입니다. <button> 태그로 구현하며, 페이지 이동이 아닌 UI 변경을 유도합니다. 스타일은 일반 버튼과 유사하지만, 배경 없이 텍스트만 표시합니다.
| 구분 | 텍스트링크 ( Link) | 텍스트 버튼 (Text Button) |
| 목적 | 페이지 이동 (하이퍼링크) | 특정 액션(인터랙션) 수행 |
| 예시 | “자세히보기 “, “문서 바로가기” | “삭제”, “편집”, “취소” |
| 스타일 | 링크 스타일 (밑줄 포함 가능) | 버튼 스타일 (hover, active 효과) |
| 인터랙션 | 기본 링크 스타일 (밑줄, 색상 변화) | 클릭 시 UI 변경 또는 기능 실행 |
시작하기는 왜 링크스타일을 사용하지 않고 버튼스타일을 사용했나요?
웹사이트나 서비스의 홈 화면에서 “시작하기” 버튼을 흔히 볼 수 있습니다. 이 버튼은 사용자를 특정 페이지로 이동시키는 역할을 하지만, 일반적인 링크 스타일(밑줄이 있는 텍스트) 대신 버튼 스타일이 적용됩니다. 그렇다면 왜 이런 선택을 하는 것일까요?
“시작하기” 버튼은 단순한 네비게이션 링크가 아니라, 사용자가 서비스를 이용하는 첫 번째 동작을 의미합니다. 따라서 눈에 띄고 직관적으로 클릭할 수 있도록 버튼 스타일을 적용하는 것이 중요합니다. 즉 “시작하기”는 페이지 이동을 동반하지만, 사용자의 핵심적인 행동을 유도하는 CTA이므로 버튼 스타일을 적용하는 것이 일반적입니다.
design.va.gov의 가이드중에서..
가이드을 만들때 가이드 기준을 엄격하게 적용하도록 할지 아니면 유연성을 줄지는 항상 늘 고민입니다. 가이드의 사용 방법 적용범위에 따라 일반적인 규칙과 사용성을 정의하고 사용하는 목적과 필요성에 따라 변경하여 사용할 수 있도록 유연성을 제공하게 필요하다고 생각합니다.
텍스트 링크의 구분이 필요할 경우
카드 UI와 같이 특정 영역에 들어가는 “자세히 보기”나 “더보기”를 눌러 목록 페이지로 이동하는 경우 전체 텍스트 링크 컴포넌트로 정의하기엔 디자인 표현이 단조롭거나 사용성을 정의 하기 모호할 수 있습니다.
이걸 경우 사용 목적과 상호작용스타일을 구분하여 다른 컴포넌트로 구분해서 사용할 수도 있습니다.
| 구분 | 텍스트 링크 (Text Link) | 액션 링크 (Action Link) |
| 목적 | 페이지 이동 (하이퍼링크) | 특정 동작 유도 (UI 액션) |
| 예시 | “홈페이지 바로가기”, “문서 다운로드” | “자세히 보기”, “더보기” |
| 상호작용 스타일 | 클릭 했을대 visited 색상 변경 가능 | 클릭 했을때 visited 스타일 적용 없음 |
| 사용 위치 | 본문 내 하이퍼링크, 외부 사이트 이동 | 카드 내 “자세히 보기”, 목록의 “더보기” |
| 인터랙션 | 기본 링크 스타일 (밑줄, 색상 변화) | 버튼처럼 동작 (호버 강조, 아이콘 포함 가능) |
마치며
디자인 시스템에서 링크는 단순한 하이퍼링크 이상의 의미를 가지며, 다양한 종류와 용도에 맞게 스타일과 동작 방식을 정의해야 합니다.
링크를 사용할 때는
디자인 시스템의 일관성을 유지하면서도 상황에 따라 유연하게 적용
종류를 구분하여 적절한 스타일을 적용
목적과 사용성에 맞게 액션 링크, 텍스트 링크, 텍스트 버튼을 구분
KRDS에서는 링크 컴포넌트를 범용적이고 포괄적인 개념으로 정의하고 있어, 모든 기능과 형태를 세부적으로 분류하지 않았습니다. 그러나 개별 디자인 시스템을 구축할 때는 링크의 종류와 용도를 명확히 구분하고, 각 상황에 적합한 스타일과 컴포넌트를 정의하는 것이 중요합니다..
