주요와 보조를 가르라

KRDS CP-267 — 버튼과 관련된 사용자 과업, 플로우의 중요도에 따라 버튼 간 위계를 명확하게 구분하고 있다.

0. 들어가며 — 확인과 취소가 똑같이 생기면

이번 387편은 버튼과 관련된 과업·플로 중요도에 따라 버튼 간 위계를 명확하게 구분하라는 규칙입니다.

‘확인 / 취소’처럼 나란한 버튼들이 — 둘 다 똑같이 강조되면, 사용자는 ’뭐가 핵심 행동이지?’ 헷갈리죠. 핵심 행동 (확인)과 보조 행동(취소)은 시각적 위계로 구분돼야 합니다. CP-267은 버튼의 중요도에 따라 위계를 부여하라고 규정합니다. 링크 위계(CP-255), 구조화 목록 CTA(CP-145) 정신이죠. 이번 편을 풀어냅니다.

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

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

버튼이 연결된 작업·흐름의 중요도에 따라, 버튼의 시각적 위계(강조 정도)를 구분해 주요 버튼과 보조 버튼이 구별 되게 하라는 뜻입니다.

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

2. 왜 버튼 위계를 구분하나

한 화면·한 그룹에 여러 버튼이 있을 때 — 이들의 중요도는 다릅니다. 어떤 건 핵심 행동(제출·확인·다음), 어떤 건 보조(취소·뒤로·초기화)죠. 이 중요도 차이가 시각적으로 구분돼야 사용자가 무엇이 핵심인지 알고 행동합니다. 링크 위계(CP-255)와 같은 원리이며, 버튼은 동작 실행이라 더 중요하죠.

위계가 없을 때:

결정 부담·실수 — ’확인 / 취소’가 똑같이 강조되면 — 사용자는 어느 게 ’진행(확인)’이고 ’중단(취소)’인지 순간 헷갈려, 잘못 누를 수 있죠. 특히 위험한 행동(삭제 확인)에서 실수는 치명적입니다.

흐름 이탈 — 사용자를 다음 단계로 이끌 핵심 버튼(제출·다음)이 강조 안 되면 — 흐름을 놓치고 이탈합니다.

그래서 CP-267은 — 버튼 중요도에 따라 시각적 위계를 부여합니다. 보통 세 단계(링크 위계 CP-255와 동일 체계):

주요(primary) 버튼 — 그 화면·플로의 핵심 행동(제출·확인·다음·신청). 가장 강조 — 채운 강조색(브랜드색) 배경, 눈에 띄게. 사용자 시선을 끌고 행동을 유도하죠.

보조(secondary) 버튼 — 부가 행동(취소·뒤로·미리보기). 약한 강조 — 외곽선 버튼, 연한 배경.

3차(tertiary) 버튼 — 보조적 행동(초기화·기타). 가장 약하게 — 텍스트 버튼.

이 위계로 — 사용자는 ‘강조된 것이 핵심 행동’임을 직관적으로 알고, 시선이 자연히 핵심으로 갑니다. ’확인 / 취소’ 면 — ’확인’은 채운 주요 버튼, ’취소’는 외곽선 보조 버튼으로요.

크기는 동일, 위계는 강조로(CP-266 연계). 앞 편 CP-266에서 봤듯 — 위계는 크기가 아니라 색·형태(채움/ 외곽선)로 표현합니다. 그룹 버튼의 크기는 동일하게(266) 정돈하되, 위계는 강조 방식으로(267) 구분하죠. 크기로 위계를 주면 어수선하고, 색·형태로 주면 정돈되면서 명확합니다.

‘과업·플로 중요도’ 기준. 위계는 — 그 버튼이 사용자 작업·흐름에서 얼마나 중요한가로 정합니다. 신청 화면 에서는 ’신청하기’가 핵심이라 주요, ’취소’는 보조죠. 화면·맥락마다 핵심 과업이 무엇인지 따져 위계를 부여합니다.

색만은 아니다. 위계 강조는 색뿐 아니라 형태(채움/외곽선)도 써야 색맹 사용자도 인지하죠(링크 색 무관 CP-256, 배지 CP-186 정신). 주요 버튼을 색만 다르게 하기보다 채운 형태로도 구분합니다.

과용 주의. 그리고 — 주요 버튼은 보통 하나로 절제해야 도드라집니다(이건 다음 편 CP-268의 ’최상위 강조 버튼 한 번만’으로 강화되죠). 강조된 주요 버튼이 여럿이면 위계가 무너집니다.

이 규칙은 버튼 그룹의 위계를 담당하며 — 동일 크기(266)·위계 구분(267)·주요 버튼 절제(268)·수직 배열 순서 (269)가 함께 버튼 그룹의 시각 체계를 이룹니다.

정리하면 — 버튼의 중요도(과업·플로 기준)에 따라 주요·보조·3차 위계를 색·형태 강조로 구분해, 사용자가 핵심 행동을 인지하고 실수 없이 행동하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

위계 구분 — 주요 버튼과 보조 버튼이 시각적으로 구별되는가(채움/외곽선 등).

핵심 강조 — 그 화면·플로의 핵심 행동 버튼이 도드라지는가.

색 비의존·절제 — 색뿐 아니라 형태로 구분하고, 주요 버튼이 절제되는가.

개선 방향

핵심 행동을 주요(채운 강조색), 보조는 외곽선·텍스트 버튼으로.

위계는 색+형태로(크기 아님, CP-266). 주요 버튼 절제(CP-268).

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

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

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

여러 버튼이 있는 화면을 가진 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 주요 버튼과 보조 버튼이 시각적으로 구별되나요(채움/외곽선)?

□ 핵심 행동 버튼이 도드라지나요?

□ 색뿐 아니라 형태로 구분하고, 주요 버튼이 절제되나요?

❓ FAQ

Q1. ’확인/취소’를 어떻게 구분하나요? ’확인’은 채운 주요 버튼, ’취소’는 외곽선 보조 버튼으로 위계를 줍니다. 크기는 같게(CP-266) 하고요. Q2. 위계를 크기로 주면 안 되나요? 크기는 동일하게(CP-266), 위계는 색·형태로 줍니다. 크기로 주면 어수선 하죠. Q3. 주요 버튼이 여럿이면요? 위계가 무너집니다. 주요는 하나로 절제해야 도드라지죠(CP-268).

6. 마무리

CP-267의 메시지:

주요와 보조를 가르라 — 과업·플로 중요도에 따라 버튼 위계를 구분하라.

한 화면·그룹의 여러 버튼은 중요도가 다릅니다. 핵심 행동을 주요(채운 강조)로, 보조를 외곽선으로 구분해 사용 자가 핵심을 인지하고 실수 없이 행동하게 하죠. 위계는 크기가 아닌 색·형태로, 주요는 절제합니다. 다음 편은 최상위 강조 버튼을 한 번만 쓰는 규칙입니다.

다음 편 예고 ▶ 「388. (CP-268) 한 페이지에 최상위 수준의 강조 버튼은 한 번만 사용하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 버튼(Button) 가이드 — https://www.krds.go.kr/html/site/component/component_25.html

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

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