나란한 버튼은 같은 크기로

KRDS CP-266 — 버튼이 그룹으로 제공될 때 모든 버튼의 크기를 동일하게 제공하고 있다.

0. 들어가며 — 버튼 그룹의 첫 규칙

이번 386편부터 버튼(Button) 그룹(CP-266~277, 12개)으로 들어갑니다. 한 가지 짚을 점 — 버튼은 링크(CP-254~ 265, 이동)와 달리 동작을 실행하는 요소입니다(제출·취소·저장 등). CP-265에서 본 ‘링크 vs 버튼’ 구분이죠.

첫 규칙은 버튼이 그룹으로 제공될 때 모든 버튼 크기를 동일하게 하라는 내용입니다. ’확인 / 취소’처럼 나란히 놓인 버튼들이 크기가 다르면 어수선하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 버튼 그룹 동일 크기

CP-266 (컴포넌트 > 버튼) “버튼이 그룹으로 제공될 때 모든 버튼의 크기를 동일하게 제공하고 있다.”

여러 버튼이 한 그룹으로 나란히 놓일 때, 그 버튼들의 크기(높이·너비)를 동일하게 맞춰 정돈되게 하라는 뜻입니다.

정리: 그룹으로 놓인 버튼들은 같은 크기로 맞춰라. 이게 CP-266입니다.

2. 왜 그룹 버튼이 동일 크기여야 하나

버튼은 종종 그룹으로 나타납니다 — ‘확인 / 취소’, ‘저장 / 삭제 / 취소’, ’이전 / 다음’처럼 관련된 행동 버튼들이 나란히 놓이죠. 이 버튼들이 같은 그룹의 동등한 선택지로 보이려면, 크기가 통일돼야 합니다.

크기가 다를 때:

시각적 어수선함 — 같은 그룹의 버튼인데 크기(특히 높이)가 제각각이면 — 줄이 들쭉날쭉해 정돈되지 않고 어수선하죠. ’확인’은 크고 ’취소’는 작으면 균형이 깨집니다.

잘못된 위계 인상 버튼 크기는 보통 ‘중요도·위계’를 암시합니다(CP-267). 그래서 같은 그룹에서 크기가 다르면 큰 버튼이 더 중요한 것처럼 보이죠. 하지만 단순히 텍스트 길이 때문에 크기가 달라진 거라면(예: ’취소’ 보다 ’신청 완료’가 길어서 더 큼) 의도치 않은 위계 인상을 주는 거짓 신호입니다. 위계는 의도적으로(색·강조, CP-267) 표현하고, 단순 그룹 버튼의 크기는 통일해야 하죠.

그래서 CP-266은 — 그룹 버튼의 크기를 동일하게 맞추라고 합니다:

높이 통일 — 가장 중요합니다. 나란한 버튼들의 높이를 같게 해 줄을 가지런히. (보통 디자인 시스템의 버튼 높이 토큰을 따름.)

너비 통일(또는 정렬) — 너비도 같게 하거나(고정 너비), 최소 너비를 둬 텍스트 길이 차이로 너무 들쭉날쭉 하지 않게. 짧은 ’확인’과 긴 ’신청 완료’도 — 최소 너비·패딩으로 균형을 맞추죠. (완전 동일 너비가 어려우면 최소한 높이는 같고 패딩이 일관되게.)

이렇게 하면 — 버튼 그룹이 정돈된 한 묶음으로 보이고, 같은 수준의 선택지임이 시각적으로 전달됩니다. 탭 바 동일 크기(CP-134), 표 행 높이 일정(CP-239)에서 본 ’같은 묶음은 균등하게’의 버튼 버전이죠.

위계는 별도로. 한 가지 — 그룹 버튼 중 하나가 더 중요하면(예: ’확인’이 주요, ’취소’가 보조), 그 위계는 크기가 아니라 다른 강조(색·채움/외곽선, CP-267)로 표현합니다. 즉:

크기는 동일(266) — 정돈·균형.

위계는 강조로(267) — 색·형태로 주요/보조 구분.

예를 들어 ’확인 / 취소’는 — 둘 다 같은 크기(높이·너비)이되, ’확인’은 채운 강조색 버튼(주요), ’취소’는 외곽선 버튼(보조)으로 위계를 줍니다. 크기로 위계를 주면 어수선하고, 강조(색·형태)로 위계를 주면 정돈되면서도 명확 하죠. CP-266(동일 크기)과 CP-267(위계 강조)이 함께 — 정돈되고 위계 있는 버튼 그룹을 만듭니다.

정리하면 — 그룹으로 놓인 버튼들은 동등한 묶음으로 보이게 크기(특히 높이)를 동일하게 맞추되, 중요도 위계는 크기가 아닌 색·형태 강조로 표현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

높이 동일 — 그룹 버튼들의 높이가 같은가.

너비 균형 — 너비가 같거나 최소 너비로 균형 잡혔는가(텍스트 길이로 들쭉날쭉 안 함).

위계는 강조로 — 중요도 차이가 크기가 아닌 색·형태로 표현됐는가(CP-267).

개선 방향

그룹 버튼 높이 통일(버튼 높이 토큰). 너비 통일 또는 최소 너비.

위계는 색·채움/외곽선으로(CP-267). 크기로 위계 표현 지양.

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

역할	책임
디자이너	버튼 그룹 크기·위계 규칙 정의
퍼블리셔/개발	동일 크기·위계 강조 구현

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

버튼을 그룹으로 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 그룹 버튼들의 높이가 같나요?

□ 너비가 같거나 최소 너비로 균형 잡혔나요(텍스트 길이로 들쭉날쭉 안 함)?

□ 중요도 차이가 크기가 아닌 색·형태로 표현됐나요?

❓ FAQ

Q1. 텍스트 길이가 달라 버튼 크기가 달라요. 높이를 통일하고 최소 너비·일관 패딩으로 균형을 맞춥니다. Q2. 중요한 버튼을 크게 하면 안 되나요? 크기로 위계를 주면 어수선합니다. 색·채움/외곽선으로 위계를 표현 하죠(CP-267). Q3. 어떤 크기가 다른 게 문제인가요? 특히 높이가 제각각이면 줄이 들쭉날쭉합니다. 높이 통일이 가장 중요 하죠.

6. 마무리

CP-266의 메시지:

나란한 버튼은 같은 크기로 — 그룹 버튼의 크기를 동일하게 맞춰라.

그룹으로 놓인 버튼은 동등한 묶음으로 보이게 크기(특히 높이)를 통일해야 정돈됩니다. 중요도 위계는 크기가 아닌 색·형태 강조로 표현하죠(CP-267). 크기는 균등하게, 위계는 강조로 — 정돈되고 명확한 버튼 그룹을 만듭니다. 다음 편은 버튼 위계 구분입니다.

다음 편 예고 ▶ 「387. (CP-267) 버튼과 관련된 사용자 과업, 플로우의 중요도에 따라 버튼 간 위계를 명확하게 구분하고 있다.」

ViewCheck는 버튼 그룹의 버튼들이 동일한 크기인지를 진단합니다.

📚 참고 출처

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

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

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