아직 누를 수 없음을 보이게

KRDS BP-073 — 비활성화 상태의 콜투액션 버튼을 사용하고 있다.

0. 들어가며 — 눌러도 안 되는데 활성처럼 보이면

이번 639편은 비활성화 상태의 콜투액션(CTA) 버튼을 사용하라는 규칙입니다.

필수 입력이 안 끝났는데 — ‘제출’ 버튼이 활성처럼 보이면, 사용자는 누르고 오류를 만나 좌절하죠. BP-073은 조건이 안 됐을 때 CTA 버튼을 비활성 상태로 표현하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 비활성 CTA 버튼

BP-073 (기본 패턴 > 입력 폼) “비활성화 상태의 콜투액션 버튼을 사용하고 있다.”

조건이 충족되지 않은 경우 콜투액션 버튼을 비활성화 상태로 사용하라는 뜻입니다.

정리: 조건 미충족 시 CTA 버튼을 비활성 상태로 표현하라. 이게 BP-073입니다.

2. 왜 비활성 CTA인가

콜투액션(CTA, Call To Action) 버튼은 폼의 핵심 행동 버튼(‘제출’, ‘신청’, ‘다음’)입니다. 이 버튼은 필수 조건 (필수 입력 완료, 약관 동의 등)이 충족돼야 작동하죠. 조건이 안 됐을 때 어떻게 표현하느냐가 BP-073입니다.

조건 미충족인데 활성처럼 보일 때의 문제:

헛클릭·오류 필수 입력이 안 끝났는데, 제출 버튼이 활성처럼 보이면, 사용자는 누릅니다. 그러면 오류가 나죠. ‘왜 안 되지?’ 하며 좌절합니다.

상태 불명확 버튼이 지금 작동하는지 아닌지가 안 보이면, 사용자는 현재 상태(무엇이 더 필요한지)를 모릅니다.

그래서 BP-073은 — 비활성 상태를 표현하라고 합니다:

비활성 시각 표현 조건이 안 됐을 때, CTA 버튼을 비활성(disabled) 상태로 표현합니다. 보통 흐리게(낮은 채도·투명도)요. 사용자가 ’아직 누를 수 없음’을 시각적으로 알게요.

조건 충족 시 활성화 필수 입력·동의 등이 다 채워지면, 버튼을 활성 상태로 바꿉니다. 사용자가 ’이제 제출할 수 있구나’를 알죠. 상태 변화가 진행을 안내합니다.

왜 비활성인지 안내(중요) 비활성만 표시하면, 사용자는 ‘왜 안 눌리지?’ 모를 수 있습니다. 무엇이 더 필요한지 (미입력 항목 안내 등)를 함께 알리면 좋죠.

접근성 주의 — 비활성의 함정. 비활성(disabled) 버튼은 — 주의가 필요합니다:

명도 대비 비활성 버튼이 너무 흐리면, 저시력 사용자가 버튼이 있는지조차 못 봅니다. 적절한 대비를 유지 하죠.

스크린 리더 인지 disabled 버튼은 보통 포커스를 못 받아, 스크린 리더 사용자가 그 존재·이유를 모를 수 있습니다. 그래서 비활성 대신, 활성이되 누르면 오류 안내하는 방식을 권하기도 합니다(접근성 관점). 또는 aria-disabled로 존재는 알리되 비활성임을 전하죠. 무엇이 미충족인지 명확히 안내하는 게 핵심입니다.

디자인 vs 접근성 균형. 비활성 버튼은 직관적이지만 접근성 함정이 있어, ‘aria-disabled + 오류 안내’ 또는 ‘활성 유지 + 클릭 시 미입력 안내’ 등으로 균형을 잡습니다. 핵심은 사용자가 상태와 이유를 알게 하는 것이죠.

이 규칙은 입력 폼의 ’CTA 상태 표현’을 담당합니다 — 조건 미충족 시 비활성 상태를 표현해(073), 헛클릭·오류를 막고 무엇이 더 필요한지 알리죠. 일관 배치(BP-072)와 함께 버튼 UX를 완성합니다.

정리하면 — 조건 미충족인데 CTA가 활성처럼 보이면 헛클릭·오류가 생기므로, 비활성 상태로 표현하되 접근성(대비·스크린 리더 인지·미충족 이유 안내)을 함께 고려해야 합니다.

3. 점검 / 개선

무엇을 점검하나

비활성 표현 — 조건 미충족 시 CTA가 비활성으로 표현되는가.

활성 전환 — 조건 충족 시 활성으로 바뀌는가.

접근성·이유 안내 — 비활성 대비·스크린 리더 인지, 미충족 이유 안내가 있는가.

개선 방향

조건 미충족 시 CTA 비활성(흐리게), 충족 시 활성.

비활성 대비 확보 + aria-disabled/미입력 안내. 왜 못 누르는지 알리기.

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

역할	책임
디자이너	비활성/활성 상태 디자인
개발/접근성	상태·aria·이유 안내 구현

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

조건부 CTA가 있는 폼이 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 조건 미충족 시 CTA가 비활성으로 표현되나요?

□ 조건 충족 시 활성으로 바뀌나요?

□ 비활성 대비·스크린 리더 인지, 미충족 이유 안내가 있나요?

❓ FAQ

Q1. 비활성 버튼이 왜 필요한가요? 조건 미충족인데 활성처럼 보이면 누르고 오류를 만나 좌절하죠. 비활성으로 ’아직 누를 수 없음’을 시각적으로 알립니다. Q2. 비활성 버튼의 접근성 함정은요? 너무 흐리면 저시력자가 못 보고, disabled는 포커스를 못 받아 스크린 리더가 모를 수 있습니다. 대비 확보 + aria-disabled/미입력 안내로 보완하죠. Q3. 차라리 활성으로 두면요? 활성 유지 + 클릭 시 미입력 안내 방식도 접근성상 권장됩니다. 핵심은 사용자가 상태와 ’무엇이 더 필요한지’를 알게 하는 것이죠.

6. 마무리

BP-073의 메시지:

아직 누를 수 없음을 보이게 — 조건 미충족 시 CTA 버튼을 비활성 상태로 표현하라.

조건 미충족인데 활성처럼 보이면 헛클릭·오류가 생깁니다. 비활성 상태로 표현하되 접근성(대비·인지·이유 안내)을 함께 잡는 게 핵심이죠. 다음 편은 레이블·설명·단위 정보입니다.

다음 편 예고 ▶ 「640. (BP-074) 입력 필드 주변에 레이블과 설명, 입력 값의 단위 정보를 제공하고 있다.」

ViewCheck는 조건 미충족 시 CTA 버튼이 비활성 상태로 표현되는지를 진단합니다.

📚 참고 출처

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

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

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