버튼은 늘 보여야

KRDS CP-178 — 모달 내 액션 버튼이 제공되는 푸터가 항상 표시되도록 하고 있다.

0. 들어가며 — 확인 버튼을 찾아 스크롤하지 않게

이번 298편은 모달의 액션 버튼이 있는 푸터를 항상 표시하라는 규칙입니다.

모달에는 보통 ‘확인/취소’ 같은 액션 버튼이 푸터에 있죠. 그런데 이 푸터가 콘텐츠와 함께 스크롤되어 아래로 사라지면 — 사용자는 버튼을 누르려고 모달 끝까지 스크롤해야 합니다. CP-178은 액션 푸터를 고정해 사용자가 언제든 버튼을 누르게 하라고 규정합니다. CP-177(콘텐츠만 스크롤)의 짝이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 액션 푸터 항상 표시

CP-178 (컴포넌트 > 모달) “모달 내 액션 버튼이 제공되는 푸터가 항상 표시되도록 하고 있다.”

모달의 액션 버튼(확인·취소·저장 등)이 담긴 푸터를 콘텐츠 스크롤과 무관하게 항상 보이게 고정하라는 뜻입니다.

정리: 액션 버튼 푸터는 항상 보이게 고정하라. 이게 CP-178입니다.

2. 왜 푸터가 항상 표시돼야 하나

모달의 핵심 구조는 헤더(제목) + 콘텐츠(스크롤 영역) + 푸터(액션 버튼) 입니다. 이 중 액션 버튼은 모달의 ’목적지’죠 — 사용자가 모달에서 결국 하려는 것은 확인·저장·취소 같은 행동을 완료하는 것입니다. 이 버튼이 언제든 닿을 수 있어야 모달이 효율적으로 작동합니다.

푸터가 스크롤되면. 만약 푸터(액션 버튼)가 콘텐츠의 일부로 함께 스크롤되면 — 긴 콘텐츠를 가진 모달에서 버튼이 아래로 밀려 화면에서 사라집니다. 그러면:

버튼 찾기 부담 — 사용자가 ’확인’을 누르려는데 버튼이 안 보여, 모달 콘텐츠를 맨 아래까지 스크롤해야 버튼이 나타나죠. 짧은 확인이라도 매번 끝까지 스크롤하는 건 번거롭습니다.

행동 단절 — 사용자가 위쪽 내용을 보다가 ‘취소하자’ 결정해도, 취소 버튼을 찾아 스크롤해야 합니다. 결정과 행동 사이에 불필요한 단계가 끼죠.

모바일 악화 — 화면이 좁은 모바일에서는 이 문제가 더 심합니다.

그래서 CP-178은 액션 푸터를 고정합니다 — 콘텐츠는 그 안에서 스크롤되지만(CP-177), 푸터는 모달 하단에 항상 붙어 있어 버튼이 늘 보이죠. 사용자는 콘텐츠 어디를 보든 화면 하단의 버튼을 즉시 누를 수 있습니다.

고정 구조의 이점:

헤더 고정 + 콘텐츠 스크롤 + 푸터 고정 — 이 3분할 구조에서 제목(맥락)과 버튼(행동)이 항상 보이고, 가운데 콘텐츠만 스크롤되죠. 사용자는 스크롤 중에도 ’이 모달이 무엇이고(헤더), 무엇을 할 수 있는지(푸터)’를 늘 봅니다.

명확한 경계 — 고정 푸터는 콘텐츠 영역과 시각적 경계를 만들어, ’여기까지가 내용, 여기가 행동’을 구분 하죠. 이는 CP-177의 스크롤 영역 인지에도 도움이 됩니다(콘텐츠가 고정 푸터 뒤로 스크롤되며 사라지는 게 보임).

예외·주의. 짧은 콘텐츠로 스크롤이 없는 모달이면 푸터 고정이 따로 의미 없지만(어차피 다 보임), 구조적으로 푸터를 분리·고정해두면 콘텐츠가 길어져도 일관되죠. 모바일에서 키보드가 올라올 때(입력 모달) 푸터가 키보드에 가려지지 않게 처리하는 것도 고려합니다.

이 규칙은 모달의 사용성 골격을 완성합니다 — 적절한 크기(176), 스크롤 인지(177), 푸터 고정(178)이 함께 ‘내용은 편하게 보고, 행동은 언제든 하는’ 모달을 만들죠. 그리고 닫기 버튼은 별도로 마크업 순서를 고려하고(CP-183), 초점 순서도 논리적이어야(CP-182) 합니다.

정리하면 — 액션 버튼은 모달의 목적지이므로, 콘텐츠 스크롤과 무관하게 푸터를 고정해 사용자가 언제든 행동을 완료하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

푸터 고정 — 액션 버튼 푸터가 콘텐츠 스크롤과 무관하게 항상 보이는가.

3분할 구조 — 헤더 고정 + 콘텐츠 스크롤 + 푸터 고정 구조인가.

모바일 처리 — 키보드 등에 푸터가 가려지지 않는가.

개선 방향

모달을 헤더/콘텐츠/푸터 3분할, 콘텐츠만 스크롤되게 구현.

푸터를 모달 하단에 고정(sticky). 모바일 키보드 가림 처리.

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

역할	책임
디자이너	모달 3분할·푸터 고정 레이아웃 정의
퍼블리셔/개발	푸터 고정·콘텐츠 스크롤 구현

기관 유형	CP-178 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (액션 버튼 있는 모달 사용 시)

확인·저장 버튼이 있는 모달을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 액션 버튼 푸터가 콘텐츠 스크롤과 무관하게 항상 보이나요?

□ 헤더 고정 + 콘텐츠 스크롤 + 푸터 고정 구조인가요?

□ 모바일 키보드 등에 푸터가 가려지지 않나요?

❓ FAQ

Q1. 푸터가 스크롤되면 뭐가 문제죠? 버튼을 누르려고 매번 끝까지 스크롤해야 합니다. 결정과 행동 사이에 불필요한 단계가 끼죠. Q2. 스크롤이 없는 짧은 모달도 고정하나요? 짧으면 차이가 없지만, 구조적으로 푸터를 분리·고정해두면 일관 됩니다. Q3. CP-177과 무슨 관계인가요? CP-177(콘텐츠만 스크롤)과 CP-178(푸터 고정)이 짝입니다. 콘텐츠는 스크롤, 헤더·푸터는 고정이죠.

6. 마무리

CP-178의 메시지:

버튼은 늘 보여야 — 액션 푸터를 콘텐츠 스크롤과 무관하게 고정하라.

액션 버튼은 모달의 목적지입니다. 푸터가 콘텐츠와 함께 스크롤되어 사라지면 버튼을 찾아 끝까지 스크롤해야 하죠. 헤더 고정 + 콘텐츠 스크롤 + 푸터 고정의 3분할로, 행동을 언제든 완료하게 합니다. 다음 편은 헤더·콘텐츠·버튼 레이블의 명확성입니다.

다음 편 예고 ▶ 「299. (CP-179) 헤더, 콘텐츠, 버튼 레이블은 명확한 내용으로 제공하고 있다.」

ViewCheck는 모달의 액션 버튼 푸터가 항상 표시되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 모달(Modal) 가이드 — https://www.krds.go.kr/html/site/component/component_16.html

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

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