무엇을 하는지 동사로

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

0. 들어가며 — 버튼은 행동이다

이번 390편은 버튼 텍스트 레이블을 실행 기능을 예측할 수 있는 명확한 내용으로, 동사형으로 제공하라는 규칙 입니다.

버튼은 ’동작을 실행’하는 요소입니다(링크는 이동). 그래서 버튼 레이블은 — ’무엇을 하는지’를 동사로 명확히 표현 해야 하죠. “확인”보다 “신청하기”, “저장”처럼 행동을 서술하는 게 좋습니다. CP-270은 버튼 레이블의 동사형·명확성을 규정합니다. 모달 버튼 명확성(CP-179) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 기능 예측 가능 동사형 레이블

CP-270 (컴포넌트 > 버튼) “텍스트 레이블은 버튼을 통해 실행되는 기능을 예측할 수 있는 명확한 내용을 동사형으로 제공하고 있다.”

버튼 텍스트를, 그 버튼을 누르면 무슨 기능이 실행되는지 예측할 수 있게 명확하고 동사형(행동을 서술하는 형태)으로 작성하라는 뜻입니다.

정리: 버튼 레이블은 실행 기능을 예측할 수 있게 동사형으로 명확히 작성하라. 이게 CP-270입니다.

2. 왜 동사형·명확해야 하나

버튼의 본질은 ’동작을 실행’하는 것입니다(CP-265에서 본 링크/버튼 구분 링크는 이동, 버튼은 동작). 그래서 버튼 레이블은 ’이 버튼을 누르면 무슨 일이 일어나는지(어떤 동작)’를 알려야 하죠. 이를 위해 동사형과 명확성이 핵심입니다.

① 동사형 — 행동을 서술. 버튼은 행동을 실행하므로, 레이블도 행동을 서술하는 동사형이 자연스럽습니다:

“신청하기”, “저장”, “삭제”, “제출하기”, “다운로드”, “다음 단계로” 등 — 무슨 동작인지 동사로 명확히.

반면 명사만(“신청”) 또는 모호한 표현보다 — 동사형이 ’이걸 누르면 이 행동이 실행된다’를 직관적으로 전하죠.

동사형이 버튼의 ‘행동 실행’ 성격에 맞습니다. (단 — ‘삭제’, ’저장’처럼 명사이면서도 동작이 분명한 짧은 표현도 관습적으로 쓰이죠. 핵심은 ’동작을 명확히 전하는가’입니다.)

② 기능 예측 가능 — 결과를 알게. 레이블만 보고 — ‘이 버튼을 누르면 무슨 결과가 일어날지’ 예측할 수 있어야 합니다. 모호한 레이블의 문제:

“확인” / “예” / “제출” 같은 범용 레이블 — 무엇을 확인·제출하는지 모호하죠. “확인”이 무엇을 확인하는 건지(저장? 삭제? 동의?) 헷갈립니다(모달 CP-179에서 본 문제).

대신 — 구체적 동사형: “신청 제출하기”, “회원 탈퇴하기”, “변경사항 저장”처럼 — 무슨 행동·대상인지 명확히. 레이블만 봐도 결과를 예측하죠.

특히 — 위험한 행동(삭제·탈퇴)의 버튼은 명확해야 실수를 막습니다. “삭제”가 무엇을 삭제하는지 분명히 하고, 범용 “확인” 대신 “삭제하기”로 결과를 예측하게요(긴급 공지 링크 CP-160, 페이지네이션 CP-128 정신).

③ 접근성 — 스크린 리더. 명확한 동사형 레이블은 스크린 리더 사용자에게도 중요합니다. 스크린 리더가 버튼을 “신청하기, 버튼”으로 읽으면 — 사용자가 무슨 동작인지 알죠. “확인, 버튼”만으론 모호합니다. 그리고 버튼만 모아 듣는 탐색에서도 동사형·구체적 레이블이 구별됩니다(링크 레이블 CP-262·263 정신). 이 텍스트 레이블은 버튼의 ‘접근 가능한 이름’(CP-274)이 되죠.

간결성. 명확하되 간결해야 합니다 — 너무 길면 버튼이 비대해지고 읽기 부담이죠. 핵심 동작을 짧은 동사구로요.

이 규칙은 버튼 레이블 명확성의 출발점입니다 — 동사형·명확(270), 모든 버튼에 텍스트 설명(272), 접근 가능한 이름이 기능 설명(274)이 함께 버튼의 ’이름’을 명확하게 하죠. 그리고 CP-260(링크 레이블대로 이동)처럼, 버튼도 레이블이 약속한 동작을 실제로 실행해야 합니다.

정리하면 — 버튼은 동작을 실행하므로, 레이블을 실행 기능이 예측되는 명확한 동사형으로 작성해 사용자가 ’이 버튼을 누르면 무슨 동작이 일어나는지’를 알고 누르게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

동사형 — 버튼 레이블이 행동을 서술하는 동사형인가(“신청하기” 등).

기능 예측 — 레이블만 보고 실행 결과를 예측할 수 있는가(“확인”류 모호함 배제).

위험 행동 명확 — 삭제·탈퇴 등 위험 행동 버튼이 명확한가.

개선 방향

범용 “확인/제출”을 구체적 동사형으로(“신청 제출하기”, “변경사항 저장”).

위험 행동은 결과 명확히(“삭제하기”). 간결 유지.

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

역할	책임
UX 라이팅/기획	동사형 명확 버튼 레이블 작성
퍼블리셔/개발	레이블 적용

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 버튼 레이블이 행동을 서술하는 동사형인가요(“신청하기” 등)?

□ 레이블만 보고 실행 결과를 예측할 수 있나요(“확인”류 모호함 배제)?

□ 삭제·탈퇴 등 위험 행동 버튼이 명확한가요?

❓ FAQ

Q1. “확인”이 왜 문제죠? 무엇을 확인하는지 모호합니다. “신청 제출하기”처럼 구체적 동사형이면 결과를 예측 하죠. Q2. 명사형(“저장”)은 안 되나요? ‘저장’, ’삭제’처럼 동작이 분명한 짧은 표현은 관습적으로 쓰입니다. 핵심은 동작을 명확히 전하는 것이죠. Q3. 길어지면요? 명확하되 간결하게. 핵심 동작을 짧은 동사구로 합니다.

6. 마무리

CP-270의 메시지:

무엇을 하는지 동사로 — 버튼 레이블을 실행 기능 예측 가능한 동사형으로.

버튼은 동작을 실행하므로, 레이블이 ’무슨 동작인지’를 동사로 명확히 전해야 합니다. 범용 “확인”보다 구체적 “신청 제출하기”로 결과를 예측하게 하죠. 위험 행동은 특히 명확히, 간결하게요. 다음 편은 더블클릭 실수 방지 입니다.

다음 편 예고 ▶ 「391. (CP-271) 사용자가 실수로 버튼을 두 번 이상 누르는 상황을 고려하여 구현하고 있다.」

ViewCheck는 버튼 레이블이 동사형으로 기능을 예측 가능하게 하는지를 진단합니다.

📚 참고 출처

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

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

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