주인공은 하나

KRDS CP-268 — 한 페이지에 최상위 수준의 강조 버튼은 한 번만 사용하고 있다.

0. 들어가며 — 강조 버튼이 여러 개면

이번 388편은 한 페이지에 최상위 수준의 강조 버튼을 한 번만 사용하라는 규칙입니다.

앞 편(CP-267)에서 버튼 위계를 구분했습니다. 그런데 — 가장 강조된 ’주요(primary) 버튼’이 한 페이지에 여러 개 있으면, 위계가 무너지죠. 강조 버튼이 둘, 셋이면 — 어느 게 진짜 핵심 행동인지 흐려집니다. CP-268은 최상위 강조 버튼을 페이지당 하나로 제한해 핵심을 도드라지게 합니다. 배지 하나(CP-188), CTA 하나(CP-145) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 최상위 강조 버튼 한 번만

CP-268 (컴포넌트 > 버튼) “한 페이지에 최상위 수준의 강조 버튼은 한 번만 사용하고 있다.”

한 페이지(화면)에서 가장 강조된 주요(primary) 버튼을 하나만 두어, 핵심 행동이 명확히 도드라지게 하라는 뜻 입니다.

정리: 최상위 강조(주요) 버튼은 페이지당 하나만. 이게 CP-268입니다.

2. 왜 강조 버튼이 하나여야 하나

버튼 위계(CP-267)에서 — 가장 강조된 ’주요 버튼’은 그 화면의 핵심 행동을 나타냅니다. 채운 강조색으로 시선을 끌어 사용자를 그 행동으로 이끌죠. 이 주요 버튼의 힘은 희소성에서 나옵니다 — 페이지에 강조 버튼이 하나면 그것이 도드라지지만, 여러 개면 힘이 분산되죠.

강조 버튼이 여럿일 때:

핵심 흐려짐 — 한 페이지에 채운 강조색 버튼이 두 개, 세 개면 — 사용자는 ‘뭐가 진짜 핵심 행동이지?’ 헷갈 립니다. 강조 버튼들이 서로 시선을 다투며, 정작 가장 중요한 하나(예: ‘신청하기’)가 다른 강조 버튼들에 묻히죠.

위계 붕괴 — 위계의 핵심은 ‘하나가 가장 강하고 나머지는 약함’입니다. 강조 버튼이 여럿이면 ’가장 강한 하나’ 라는 위계가 사라져, CP-267의 위계 구분이 무의미해지죠.

시각적 과부하 — 강한 색 버튼이 여러 개면 화면이 시각적으로 부담스럽고, 어느 것도 제대로 주목받지 못 합니다.

그래서 CP-268은 최상위 강조 버튼을 페이지당 하나로 제한합니다. 그 하나가 ’이 페이지에서 사용자가 할 가장 중요한 행동’이죠. 나머지 행동들은 보조(외곽선)·3차(텍스트) 버튼으로 약하게 둡니다. 그러면 강조 버튼 하나가 도드라져 사용자 시선과 행동을 이끌고, 핵심이 명확해집니다.

**‘한 페이지’의 범위.** 이는 ’한 페이지(화면)’당 하나입니다. 페이지에 여러 섹션·영역이 있어도, 가장 강조된 주요 버튼은 그 페이지 전체에서 하나가 원칙이죠 — 그 페이지의 가장 중요한 행동 하나요. (단 — 페이지가 매우 길거나 여러 독립적 작업 영역으로 나뉘면, 각 영역의 핵심 행동을 강조할 수도 있으나, 그래도 ’진짜 최상위 하나’ 라는 정신은 지킵니다. 강조 버튼 남발은 피하죠.)

핵심 결정 강제. 이 제한은 — 설계자에게 ’이 페이지에서 사용자가 할 가장 중요한 행동 하나가 무엇인가’를 결정하도록 강제합니다. 모든 행동을 강조할 수 없으니, 핵심 하나를 골라 강조하고 나머지는 약하게 두죠. 이 우선 순위 결정이 사용자에게 명료한 방향을 줍니다. 탭 바 5개(CP-137), 배지 하나(CP-188), 캐러셀 5개(CP-210)에서 본 ’핵심 집중을 위한 제한’의 버튼 버전이죠.

이 규칙은 CP-267(위계 구분)을 강화합니다 — 위계를 구분하되(267), 그 최상위(주요)는 하나로 절제(268). 함께 ’명확한 위계 + 하나의 도드라진 핵심’을 만들죠.

정리하면 — 최상위 강조 버튼의 힘은 희소성에서 나오므로, 페이지당 하나로 제한해 핵심 행동을 도드라지게 하고, 나머지는 약하게 둬 위계를 지켜야 합니다.

3. 점검 / 개선

무엇을 점검하나

강조 버튼 하나 — 한 페이지에 최상위 강조(주요) 버튼이 하나인가.

핵심 선정 — 그 강조 버튼이 페이지의 가장 중요한 행동인가.

나머지 약화 — 다른 행동들이 보조·3차 버튼으로 약하게 처리됐는가.

개선 방향

페이지의 핵심 행동 하나만 주요(강조) 버튼으로. 나머지는 보조·3차로.

강조 버튼이 여럿이면 핵심 하나만 남기고 나머지 약화.

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

역할	책임
기획/UX	페이지 핵심 행동 하나 선정
디자이너	주요 버튼 하나·나머지 약화

기관 유형	CP-268 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (버튼 사용 시)

버튼이 있는 모든 페이지가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 페이지에 최상위 강조(주요) 버튼이 하나인가요?

□ 그 강조 버튼이 페이지의 가장 중요한 행동인가요?

□ 다른 행동들이 보조·3차 버튼으로 약하게 처리됐나요?

❓ FAQ

Q1. 중요한 행동이 여러 개면요? 그중 가장 중요한 하나만 주요 버튼으로 강조하고, 나머지는 보조로 둡니다. 다 강조하면 핵심이 묻히죠. Q2. 페이지가 길어 영역이 여럿이면요? 가급적 ’진짜 최상위 하나’를 지키되, 독립 영역의 핵심을 강조할 수 있으나 남발은 피합니다. Q3. CP-267과 뭐가 다른가요? CP-267은 위계 구분, CP-268은 그 최상위(주요)를 하나로 절제입니다. 함께 명확한 위계를 만들죠.

6. 마무리

CP-268의 메시지:

주인공은 하나 — 최상위 강조 버튼은 페이지당 한 번만.

주요 버튼의 힘은 희소성에서 나옵니다. 강조 버튼이 여럿이면 핵심이 흐려지고 위계가 무너지죠. 페이지의 가장 중요한 행동 하나만 강조하고 나머지는 약하게 둬, 핵심을 도드라지게 합니다. 다음 편은 수직 배열 시 강조 버튼 위치입니다.

다음 편 예고 ▶ 「389. (CP-269) 버튼 그룹을 수직으로 배열할 때 최상위 수준의 강조 버튼을 첫 번째로 배치하고 있다.」

ViewCheck는 한 페이지에 최상위 강조 버튼이 하나만 사용되는지를 진단합니다.

📚 참고 출처

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

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

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