버튼은 늘 같은 자리에

KRDS BP-072 — 액션 버튼은 일관된 위치에 배치하고 정렬하고 있다.

0. 들어가며 — 제출 버튼이 화면마다 다른 곳에 있으면

이번 638편은 액션 버튼은 일관된 위치에 배치하고 정렬하라는 규칙입니다.

‘제출’, ‘다음’, ‘취소’ 같은 액션 버튼이 — 화면마다 다른 곳에 있으면, 사용자는 매번 찾아야 하죠. BP-072는 액션 버튼을 일관된 위치·정렬로 두라고 규정합니다. 일관성으로 예측 가능성을 주는 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 액션 버튼 일관 배치·정렬

BP-072 (기본 패턴 > 입력 폼) “액션 버튼은 일관된 위치에 배치하고 정렬하고 있다.”

액션 버튼을 일관된 위치에 배치하고 정렬하라는 뜻입니다.

정리: 액션 버튼을 일관된 위치·정렬로 배치하라. 이게 BP-072입니다.

2. 왜 일관 배치인가

폼에는 액션 버튼이 있습니다: ‘제출’, ‘다음’, ‘이전’, ‘취소’, ‘저장’ 등. 이 버튼의 위치와 정렬이, 화면·폼 마다 다르면 사용자가 헷갈리죠. BP-072는 일관성을 요구합니다.

버튼 위치가 들쭉날쭉할 때의 문제:

매번 찾기 제출 버튼이 어떤 폼은 오른쪽, 어떤 폼은 왼쪽, 어떤 건 가운데에 있으면, 사용자는 매번 버튼을 찾아야 합니다. 예측이 안 되죠.

순서 혼란 ‘이전/다음’, ‘취소/확인’ 버튼의 순서가 화면마다 다르면, 사용자가 잘못 누르기 쉽습니다. 취소 하려다 확인을 누르는 실수가 생기죠.

학습 무력화 사용자는 한 번 익힌 위치를 다음에도 기대합니다. 일관되지 않으면 이 학습이 무력화돼 매번 새로 익혀야 하죠.

그래서 BP-072는 — 일관된 위치·정렬을 요구합니다:

일관된 위치 액션 버튼을 폼 전반에서 같은 위치에요. 보통 폼 하단(콘텐츠 다음)에 둡니다. 사용자가 입력 을 마치고 자연스럽게 버튼을 만나게요. 모든 폼이 같은 자리면, 사용자가 예측하죠.

일관된 정렬·순서 여러 버튼의 정렬과 순서를 일관되게요. 예: 주 액션(제출·다음)은 항상 같은 쪽(보통 오른 쪽), 보조 액션(취소·이전)은 그 옆. ’이전 | 다음’의 순서를 모든 단계에서 동일하게요.

주/보조 위계 주 액션(제출·확인)을 강조(채운 버튼, primary), 보조 액션(취소)을 약하게(외곽선·텍스트 버튼). 사용자가 무엇이 주 행동인지 알게요(버튼 컴포넌트 위계).

일관성 = 예측 가능성. 일관된 버튼 배치는 사용자에게 예측 가능성을 줍니다. 한 번 익히면 어디서든 버튼을 바로 찾고, 실수 없이 누르죠. 일관성은 UX의 핵심 원칙입니다(WCAG 3.2.3 일관된 내비게이션 정신).

비활성 버튼(BP-073)과 연계. 액션 버튼의 — 활성/비활성 상태(BP-073)도 일관되게 다룹니다. 일관된 위치(072) + 적절한 상태(073)가 — 함께 버튼 UX를 완성하죠.

이 규칙은 입력 폼의 ’버튼 일관성’을 담당합니다 — 액션 버튼을 일관된 위치·정렬로 배치해(072), 사용자가 예측하고 실수 없이 누르게 하죠.

정리하면 — 액션 버튼이 화면마다 다른 곳에 있으면 매번 찾아야 하고 실수가 생기므로, 버튼을 일관된 위치(보통 폼 하단) 와 일관된 정렬·순서·위계로 배치해야 합니다.

3. 점검 / 개선

무엇을 점검하나

일관 위치 — 액션 버튼이 폼 전반에서 같은 위치(보통 하단)인가.

일관 정렬·순서 — 주/보조 버튼의 정렬·순서가 일관된가.

주/보조 위계 — 주 액션 강조, 보조 약화로 구분되는가.

개선 방향

액션 버튼을 폼 하단 일관 위치. 주 액션은 같은 쪽(보통 오른쪽).

버튼 순서·정렬 통일, 주(primary)/보조 위계 명확(WCAG 3.2.3).

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

역할	책임
디자이너	버튼 배치·위계 가이드
퍼블리셔	일관 배치 구현

기관 유형	BP-072 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (입력 폼)

입력 폼이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 액션 버튼이 폼 전반에서 같은 위치(보통 하단)인가요?

□ 주/보조 버튼의 정렬·순서가 일관된가요?

□ 주 액션 강조, 보조 약화로 구분되나요?

❓ FAQ

Q1. 버튼을 어디에 두나요? 보통 폼 하단(콘텐츠 다음)에요. 입력을 마치고 자연스럽게 만나게요. 핵심은 모든 폼에서 같은 위치로 일관되게 두는 것입니다. Q2. ‘취소/확인’ 순서가 왜 중요한가요? 화면마다 순서가 다르면 잘못 누릅니다. 취소하려다 확인을 누르는 실수가 생기죠. 모든 화면에서 동일 순서로요. Q3. 주/보조는 어떻게 구분하나요? 주 액션(제출·확인)은 채운 버튼(primary)으로 강조, 보조(취소)는 외곽선·텍스트로 약하게요. 무엇이 주 행동인지 알게 합니다.

6. 마무리

BP-072의 메시지:

버튼은 늘 같은 자리에 — 액션 버튼을 일관된 위치·정렬로 배치하라.

버튼이 화면마다 다르면 매번 찾고 실수가 생깁니다. 일관된 위치·정렬·순서·위계로 예측 가능성을 주는 게 핵심이죠. 다음 편은 비활성 콜투액션 버튼입니다.

다음 편 예고 ▶ 「639. (BP-073) 비활성화 상태의 콜투액션 버튼을 사용하고 있다.」

ViewCheck는 액션 버튼이 일관된 위치·정렬로 배치되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 입력 폼 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_08.html

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

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