세로로 쌓으면 강조를 맨 위에

KRDS CP-269 — 버튼 그룹을 수직으로 배열할 때 최상위 수준의 강조 버튼을 첫 번째로 배치하고 있다.

0. 들어가며 — 세로로 쌓인 버튼들

이번 389편은 버튼 그룹을 수직으로 배열할 때 최상위 강조 버튼을 첫 번째(맨 위)에 배치하라는 규칙입니다.

모바일 등에서 버튼들을 가로가 아니라 세로로 쌓는 경우가 많죠 — ‘신청하기 / 임시저장 / 취소’를 위에서 아래로요. 이때 가장 강조된 주요 버튼(’신청하기’)을 어디에 둘까요? CP-269는 맨 위(첫 번째) 에 두라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 수직 배열 시 강조 버튼 첫 번째

CP-269 (컴포넌트 > 버튼) “버튼 그룹을 수직으로 배열할 때 최상위 수준의 강조 버튼을 첫 번째로 배치하고 있다.”

버튼들을 세로로 쌓아 배열할 때, 가장 강조된 주요(primary) 버튼을 맨 위(첫 번째 위치)에 두라는 뜻입니다.

정리: 수직 배열 시 강조(주요) 버튼을 맨 위에 두라. 이게 CP-269입니다.

2. 왜 수직 배열에서 강조 버튼이 맨 위인가

버튼 그룹은 — 가로(수평) 또는 세로(수직)로 배열할 수 있습니다. 모바일처럼 가로 공간이 좁으면 버튼들을 세로로 쌓죠(‘신청하기 / 임시저장 / 취소’). 이 수직 배열에서 — 가장 중요한 강조 버튼(CP-267·268의 주요 버튼)을 어디에 둘지가 CP-269의 주제입니다. 답은 맨 위(첫 번째).

왜 맨 위인가:

읽기·시선 흐름 사람은 위→아래로 읽고 시선이 위에서 시작합니다. 세로 버튼 그룹에서 사용자 시선이 가장 먼저 닿는 곳은 맨 위죠. 핵심 행동(주요 버튼)을 맨 위에 두면 사용자가 가장 먼저 보고, 그 행동으로 자연스럽게 이끌립니다. ’이 화면에서 할 가장 중요한 일이 이것’임을 첫눈에 전하죠.

우선순위 표현 — 수직 목록에서 ’위’는 ’먼저·중요’를 뜻합니다(콘텐츠 내 탐색 상→하 CP-109, 수직 탭 상→하 CP-228 정신). 강조 버튼을 맨 위에 두면 — 위치로도 우선순위가 표현되어, 강조(색)와 위치가 함께 ’이게 핵심’을 전합니다.

모바일 엄지 도달 — 모바일에서 화면 하단의 버튼 그룹이라면 엄지 도달도 고려되지만, 핵심은 ’시선이 먼저 닿고 우선순위가 위’라는 점이죠. (단 — 누르기 쉬움은 별도로 충분한 크기 CP-276로 보장.)

수평 vs 수직의 차이. 한 가지 흥미로운 점 수평 배열에서는 주요 버튼이 보통 오른쪽에 옵니다(서양 관습 ’OK/Cancel’에서 OK가 오른쪽, 또는 문화에 따라). 하지만 수직 배열에서는 주요 버튼이 맨 위죠. 즉 배열 방향에 따라 강조 버튼 위치가 다릅니다 수직은 위, 수평은 (관습상) 한쪽 끝. CP-269는 수직 배열의 경우를 명시해 ’맨 위’로 정하죠. 핵심은 어느 배열이든 강조 버튼의 위치가 일관되고 우선순위를 반영하는 것입니다.

보조 버튼은 아래로. 강조 버튼이 맨 위면, 보조 버튼(‘임시저장’)·취소 버튼(‘취소’)은 그 아래로 순서대로 옵니다. 보통 — 주요(맨 위) → 보조 → 취소/3차(맨 아래) 순이죠. 위에서 아래로 중요도가 낮아지는 자연스러운 순서입니다. ’취소’를 맨 아래에 두면, 실수로 핵심 행동 대신 취소를 누를 위험도 줄죠(맨 위 강조 버튼이 시선· 손이 먼저 가니까).

일관성. 그리고 — 사이트 전체에서 수직 버튼 그룹의 순서를 일관되게(강조 맨 위) 유지하면, 사용자가 학습한 패턴으로 빠르게 행동하죠(페이지네이션 순서 CP-132, 탭 바 배치 CP-140 정신).

이 규칙은 버튼 그룹 배치 체계의 하나입니다 — 동일 크기(266)·위계 구분(267)·강조 하나(268)·수직 배열 순서 (269)가 함께 정돈되고 명확하며 일관된 버튼 그룹을 만들죠.

정리하면 — 수직 버튼 배열에서 사용자 시선은 맨 위에서 시작하고 ’위’가 우선을 뜻하므로, 최상위 강조 버튼을 첫 번째(맨 위)에 두어 핵심 행동을 가장 먼저 인지하고 우선순위를 표현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

강조 첫 번째 — 수직 배열에서 주요(강조) 버튼이 맨 위에 있는가.

순서 — 주요 → 보조 → 취소 순으로 위에서 아래로 중요도가 낮아지는가.

일관성 — 사이트 전체에서 수직 버튼 순서가 일관된가.

개선 방향

수직 버튼 그룹에서 주요 버튼을 맨 위에, 보조·취소를 아래로.

사이트 전역 수직 버튼 순서 일관 유지.

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

역할	책임
디자이너	수직 버튼 배열 순서 정의
퍼블리셔/개발	강조 버튼 맨 위 배치 구현

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

모바일 등에서 버튼을 세로로 쌓는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 수직 배열에서 주요(강조) 버튼이 맨 위에 있나요?

□ 주요 → 보조 → 취소 순으로 위에서 아래로 중요도가 낮아지나요?

□ 사이트 전체에서 수직 버튼 순서가 일관된가요?

❓ FAQ

Q1. 수평에선 주요 버튼이 오른쪽인데 수직은 위인가요? 네. 배열 방향에 따라 다릅니다. 수직은 시선이 위에서 시작하므로 강조를 맨 위에 둡니다. Q2. 취소를 맨 위에 두면 안 되나요? 안 됩니다. 시선·손이 먼저 가는 맨 위는 핵심 행동(주요)이어야 합니다. 취소는 아래로요. Q3. 왜 위가 중요한가요? 위→아래 읽기 흐름에서 시선이 먼저 닿고, ’위’가 우선순위를 뜻하기 때문입니다.

6. 마무리

CP-269의 메시지:

세로로 쌓으면 강조를 맨 위에 — 수직 버튼 배열의 첫 번째에 최상위 강조 버튼을.

수직 버튼 배열에서 시선은 맨 위에서 시작하고 ’위’가 우선을 뜻합니다. 핵심 행동(주요 버튼)을 맨 위에 두면 사용자가 가장 먼저 인지하고 우선순위가 표현되죠. 주요→보조→취소 순으로 일관되게 배열합니다. 다음 편은 버튼 레이블의 동사형 작성입니다.

다음 편 예고 ▶ 「390. (CP-270) 텍스트 레이블은 버튼을 통해 실행되는 기능을 예측할 수 있는 명확한 내용을 동사형으로 제공하고 있다.」

ViewCheck는 수직 버튼 배열에서 강조 버튼이 첫 번째인지를 진단합니다.

📚 참고 출처

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

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

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