중요한 링크는 도드라지게

KRDS CP-255 — 링크와 관련된 사용자 과업, 플로(Flow)의 중요도에 따라 위계를 명확하게 구분하고 있다.

0. 들어가며 — 모든 링크가 똑같이 보이면

이번 375편은 링크와 관련된 사용자 과업·플로의 중요도에 따라 위계를 명확하게 구분하라는 규칙입니다.

한 화면에 여러 링크가 있을 때 — 어떤 건 핵심 행동(신청하기), 어떤 건 부가 정보(자세히 보기), 어떤 건 보조 링크(취소)죠. 이들이 다 똑같이 보이면 — 사용자는 ‘뭐가 핵심이지?’ 헷갈립니다. CP-255는 중요도에 따라 링크의 시각적 위계를 구분해 사용자를 핵심 행동으로 이끌라고 규정합니다. 구조화 목록 CTA(CP-145) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 중요도 따라 위계 구분

CP-255 (컴포넌트 > 링크) “링크와 관련된 사용자 과업, 플로(Flow)의 중요도에 따라 위계를 명확하게 구분하고 있다.”

링크가 연결된 작업·흐름의 중요도에 따라, 링크의 시각적 위계(강조 정도)를 구분해 핵심 링크와 보조 링크가 구별되게 하라는 뜻입니다.

정리: 링크 중요도에 따라 시각적 위계를 명확히 구분하라. 이게 CP-255입니다.

2. 왜 링크 위계를 구분하나

한 화면에는 여러 링크·행동이 공존합니다 — 사용자가 할 수 있는 일이 여럿이죠. 그런데 이들의 중요도는 다릅니다. 어떤 링크는 그 화면의 핵심 목적(신청·제출·다음 단계)이고, 어떤 건 부가적(자세히 보기·공유), 어떤 건 보조적 (취소·뒤로)이죠. 이 중요도 차이가 시각적으로 구분돼야 사용자가 무엇이 핵심인지 알고 행동합니다.

위계가 없을 때:

결정 부담 — 모든 링크가 똑같이 보이면, 사용자는 ‘뭐가 가장 중요한 행동이지? 뭘 먼저 해야 하지?’ 하고 망설입니다(선택의 역설). 핵심 행동(신청)이 보조 링크들 사이에 묻혀 안 보이죠.

흐름 이탈 — 사용자를 다음 단계(플로)로 이끌어야 하는데, 그 핵심 링크가 강조되지 않으면 사용자가 흐름을 놓치고 이탈합니다.

그래서 CP-255는 — 링크의 중요도에 따라 시각적 위계를 부여하라고 합니다. 보통 세 단계 정도:

주요(primary) 링크/버튼 — 그 화면의 핵심 행동(신청·제출·다음). 가장 강조 — 채운 버튼(강조색 배경), 큰 크기, 눈에 띄는 위치. 사용자 시선을 끌죠.

보조(secondary) 링크/버튼 — 부가 행동(자세히 보기·미리보기). 약한 강조 — 외곽선 버튼, 약한 색.

3차(tertiary) 링크 — 보조적 행동(취소·뒤로·기타). 가장 약하게 — 텍스트 링크, 작은 크기.

이 위계로 — 사용자는 ’강조된 것이 핵심 행동’임을 직관적으로 알고, 시선이 자연히 핵심으로 가죠. 구조화 목록의 CTA(CP-145, 가장 중요한 행동 강조)와 같은 정신입니다 — 중요한 것 하나를 도드라지게 하는 것이죠.

‘과업·플로의 중요도’. 규칙은 ’사용자 과업, 플로의 중요도’를 기준으로 합니다 — 즉 그 링크가 사용자가 완수하려는 작업·흐름에서 얼마나 중요한가로 위계를 정하죠. 신청 화면에서는 ’신청하기’가 핵심 과업이라 주요 링크, ’취소’는 보조. 화면·맥락마다 무엇이 핵심 과업인지 따져 위계를 부여합니다. 설계자 편의가 아니라 사용자 목적 기준으로요.

위계 = 시각 강조이되 색만은 아니다. 위계 구분의 강조는 — 크기·색·형태(채움/외곽선)·위치 등 여러 단서를 씁니다. 단, 색에만 의존하지 말아야 하죠(CP-256 — 링크를 색만으로 구분 안 함). 주요 버튼을 색만 다르게 하기 보다 채운 형태·크기로도 구분해야 색맹 사용자도 위계를 인지합니다.

과용 주의. 한편 — 위계를 준다고 모든 링크를 강조하면 안 됩니다. 주요 링크는 보통 하나로 절제해야 그것이 도드라지죠(배지 하나 CP-188, CTA 하나 CP-145 정신). 강조된 링크가 여럿이면 위계가 무너집니다. 핵심 하나를 강조하고 나머지는 약하게 두는 절제가 핵심이죠.

이 규칙은 인라인 링크 크기(CP-254)와 함께 링크의 시각 표현을 다룹니다 — 인라인은 본문과 같게(254), 독립 링크는 중요도에 따라 위계(255). 함께 링크가 맥락에 맞게 보이게 하죠.

정리하면 — 링크의 중요도(과업·플로 기준)에 따라 주요·보조·3차 위계를 시각적으로 구분해, 사용자가 핵심 행동을 인지하고 흐름을 따라가게 하되, 색 의존·과용을 피해야 합니다.

3. 점검 / 개선

무엇을 점검하나

위계 구분 — 핵심 링크와 보조 링크가 시각적으로 구별되는가(주요/보조/3차).

핵심 강조 — 그 화면의 핵심 과업 링크가 도드라지는가.

절제·색 비의존 — 강조가 핵심에 절제되고, 색 외 단서(형태·크기)도 쓰는가.

개선 방향

화면별 핵심 과업 링크를 주요(채운 버튼 등)로, 보조는 외곽선·텍스트 링크로.

주요 링크 절제(보통 하나). 색뿐 아니라 형태·크기로 위계.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
기획/UX	과업 중요도 판단·링크 위계 정의
디자이너	위계별 링크 스타일 정의

기관 유형	CP-255 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (여러 링크·행동이 있는 화면)

여러 링크·행동이 있는 화면을 가진 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 핵심 링크와 보조 링크가 시각적으로 구별되나요(주요/보조/3차)?

□ 그 화면의 핵심 과업 링크가 도드라지나요?

□ 강조가 핵심에 절제되고, 색 외 단서도 쓰나요?

❓ FAQ

Q1. 모든 링크를 강조하면 안 되나요? 다 강조하면 위계가 무너집니다. 핵심 하나를 강조하고 나머지는 약하게 둬야 핵심이 도드라지죠. Q2. 위계를 어떻게 정하나요? 그 링크가 사용자 과업·흐름에서 얼마나 중요한가로 정합니다. 핵심 과업은 주요, 보조 행동은 보조죠. Q3. CP-254(인라인 동일 크기)와 충돌하나요? 아닙니다. CP-254는 본문 속 인라인 링크, CP-255는 독립 링크 (버튼·메뉴)의 위계입니다.

6. 마무리

CP-255의 메시지:

중요한 링크는 도드라지게 — 과업·플로 중요도에 따라 링크 위계를 구분하라.

한 화면의 여러 링크는 중요도가 다릅니다. 핵심 과업 링크를 주요로 강조하고 보조는 약하게 둬, 사용자가 핵심 행동을 인지하고 흐름을 따라가게 하죠. 색 의존·과용은 피합니다. 다음 편은 색상만으로 링크를 구분하지 않는 규칙입니다.

다음 편 예고 ▶ 「376. (CP-256) 링크를 색상만으로 구분하지 않고 있다.」

ViewCheck는 링크가 중요도에 따라 위계가 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 링크(Link) 가이드 — https://www.krds.go.kr/html/site/component/component_24.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준