좁으면 버튼으로 접어서

KRDS CP-352 — [모바일] 화면 너비가 충분하지 않을 때 따라하기 패널은 패널 열기 버튼으로 축약하여 제공하고 있다.

0. 들어가며 — 좁은 화면에서 따라하기 패널이 본문을 가리면

이번 472편은 [모바일] 화면 너비가 충분하지 않을 때 따라하기 패널을 열기 버튼으로 축약하여 제공하라는 규칙입니다.

따라하기 패널은 — 데스크톱에선 본문 옆에 펼쳐져 단계 안내를 보여주죠. 하지만 — 좁은 모바일 화면에서 그대로 펼치면, 본문(따라 할 작업)이 가려집니다. CP-352는 좁은 화면에선 패널을 열기 버튼으로 축약하라고 규정합니다. 도움 패널 CP-343과 평행한 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 좁은 화면 시 열기 버튼 축약

CP-352 (컴포넌트 > 따라하기 패널) “[모바일] 화면 너비가 충분하지 않을 때 따라하기 패널은 패널 열기 버튼으로 축약하여 제공하고 있다.”

화면 너비가 부족한 모바일 환경에서는, 따라하기 패널을 펼친 상태 대신 열기 버튼으로 축약해 제공하라는 뜻입니다.

정리: 좁은 화면에선 따라하기 패널을 열기 버튼으로 축약하라. 이게 CP-352입니다.

2. 왜 모바일 축약인가

따라하기 패널은 — 데스크톱에선 본문(따라 할 작업 영역) 옆에 펼쳐져, 단계 안내와 작업 화면을 나란히 보여줍니다. 본문과 패널이 함께 들어갈 충분한 화면 폭이 있으니까요. 하지만 — 모바일처럼 화면이 좁으면 사정이 다르죠.

좁은 화면에서 패널을 그대로 펼칠 때의 문제:

본문 가림 좁은 화면에 따라하기 패널을 펼치면, 따라 할 작업 본문이 가려지거나 짓눌립니다. 따라하기는 안내를 보며 본문에서 실제 작업을 하는 건데, 본문이 안 보이면 따라 할 수가 없죠. 도움 패널보다 더 치명적 입니다(따라하기는 본문 작업이 필수라서).

공간 부족 — 모바일은 세로로 긴 좁은 화면이라 — 본문 옆에 패널을 펼칠 가로 공간이 없습니다.

그래서 CP-352는 — 좁은 화면에선 따라하기 패널을 열기 버튼으로 축약하라고 합니다:

열기 버튼 축약 패널을 펼친 상태 대신 작은 ‘따라하기’ 버튼으로 축약합니다. 평소엔 본문이 화면을 쓰고, 사용자가 안내가 필요하면 버튼을 눌러 그때 패널이 펼쳐지죠(하단 시트·오버레이 등).

본문 우선 — 좁은 화면에선 본문(따라 할 작업)이 우선입니다. 패널은 필요할 때 불러오게요.

펼침 방식 — 모바일에서 패널을 펼칠 땐 — 하단 시트(bottom sheet)나 작은 오버레이로, 본문을 완전히 가리지 않게(일부만 덮거나, 단계 안내만 보이게) 처리하면 좋죠. 따라하기는 본문 작업이 핵심이라, 본문을 너무 가리지 않는 펼침 방식을 고민합니다.

반응형 전환. ’화면 너비가 충분하지 않을 때’는 — 특정 브레이크포인트 이하에서 축약으로 전환합니다. 데스크톱은 펼침, 좁아지면 축약으로요. 도움 패널 CP-343과 같은 반응형 패턴이죠.

축약돼도 따라하기 유지. 축약은 — 따라하기를 없애는 게 아닙니다. 열기 버튼으로 필요 시 펼치고, 따라하기 프로세스(CP-349)는 유지되죠. 모바일에서도 사용자가 중단하기 전까지 흐름이 이어집니다. 그리고 — 진행 상태(몇 단계째)도 보존돼, 패널을 닫았다 다시 열어도 이어서 따라 할 수 있게 합니다.

열기 버튼 크기. 모바일 열기 버튼은 — 터치하기 쉽게 충분한 크기(44×44px 이상, 도움 패널 CP-347 정신)여야 하죠.

이 규칙은 따라하기 패널의 ’반응형 적응’을 담당합니다 — 좁은 화면에선 패널을 열기 버튼으로 축약해(352), 본문(따라 할 작업)을 우선 보이고 안내는 필요 시 펼치게 하죠. 도움 패널 CP-343의 따라하기 버전입니다.

정리하면 — 좁은 화면에서 따라하기 패널을 그대로 펼치면 따라 할 본문이 가려지므로, 화면 폭이 부족할 때는 패널을 열기 버튼으로 축약해 본문을 우선하고 안내는 필요 시 펼치게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

좁은 화면 축약 — 모바일 등 좁은 화면에서 패널이 열기 버튼으로 축약되는가.

본문 우선 — 축약 시 따라 할 본문이 가려지지 않는가.

흐름·진행 유지 — 축약돼도 따라하기 프로세스·진행 상태가 유지되는가(CP-349).

개선 방향

브레이크포인트 이하에서 패널을 열기 버튼으로 축약. 펼침은 하단 시트로 본문 최소 가림.

진행 상태 보존(닫았다 열어도 이어서). 열기 버튼 44×44px+.

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

역할	책임
디자이너	반응형 패널 축약·펼침 방식 설계
퍼블리셔/개발	브레이크포인트 축약·진행 보존 구현

기관 유형	CP-352 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 + 따라하기 패널 사용 시)

모바일을 지원하며 따라하기 패널을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일 등 좁은 화면에서 패널이 열기 버튼으로 축약되나요?

□ 축약 시 따라 할 본문이 가려지지 않나요?

□ 축약돼도 따라하기 프로세스·진행 상태가 유지되나요?

❓ FAQ

Q1. 모바일에서도 패널을 펼쳐두면 안 되나요? 좁은 화면에선 따라 할 본문이 가려져 작업을 못 합니다. 열기 버튼으로 축약해 본문을 우선하죠. Q2. 도움 패널 CP-343과 같나요? 같은 반응형 패턴입니다. 따라하기는 본문 작업이 필수라 본문 가림이 더 치명적 이죠. Q3. 축약하면 따라하기가 끊기나요? 아닙니다. 접는 것일 뿐이고 프로세스·진행 상태가 유지됩니다(CP-349). 다시 열면 이어서 따라 하죠.

6. 마무리

CP-352의 메시지:

좁으면 버튼으로 접어서 — 모바일에선 따라하기 패널을 열기 버튼으로 축약하라.

좁은 화면에서 패널을 그대로 펼치면 따라 할 본문이 가려집니다. 화면 폭이 부족할 때는 열기 버튼으로 축약해 본문을 우선하되 따라하기 흐름·진행은 유지하는 게 핵심이죠. 다음 편은 패널 키보드 초점·함정입니다.

다음 편 예고 ▶ 「473. (CP-353) 패널이 실행되면 키보드 초점은 패널 영역 자체로 이동하며, 패널 내부에서 키보드 함정이 발생하지 않게 구현하고 있다.」

ViewCheck는 좁은 화면에서 따라하기 패널이 열기 버튼으로 축약되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 따라하기 패널(Tutorial panel) 가이드 — https://www.krds.go.kr/html/site/component/component_34.html

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

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