한 방향으로만 스크롤

KRDS CP-431 — 화면을 확대했을 때 화면 스크롤은 단일 방향으로 유지/생성되도록 하고 있다.

0. 들어가며 — 확대했더니 좌우로도 위아래로도 밀어야 하면

이번 551편은 화면을 확대했을 때 화면 스크롤은 단일 방향으로 유지/생성되도록 하라는 규칙입니다. 이로써 화면 크기 조정 5개 규칙이 마무리됩니다.

화면을 확대했을 때 — 콘텐츠가 가로·세로 양방향으로 넘쳐, 사용자가 좌우·상하로 다 스크롤해야 하면 읽기가 매우 불편하죠. CP-431은 확대 시 스크롤을 한 방향으로만 유지하라고 규정합니다. WCAG 1.4.10(리플로우) 정신이죠. 이번 편을 풀어냅니다.

1. 원문 — 단일 방향 스크롤 유지/생성

CP-431 (컴포넌트 > 화면 크기 조정) “화면을 확대했을 때 화면 스크롤은 단일 방향으로 유지/생성되도록 하고 있다.”

화면을 확대했을 때 스크롤이 가로·세로 한 방향으로만 생기게 해, 양방향 스크롤을 피하라는 뜻입니다.

정리: 확대 시 스크롤은 한 방향(보통 세로)으로만 유지하라. 이게 CP-431입니다.

2. 왜 단일 방향 스크롤인가

화면(글자)을 확대하면 — 콘텐츠가 커져 화면에 다 안 들어오니 스크롤이 생깁니다. 이 스크롤이 — 한 방향(보통 세로)으로만 생겨야지, 양방향(가로+세로)으로 생기면 읽기가 매우 불편하죠. CP-431은 단일 방향 스크롤을 요구 합니다.

양방향 스크롤의 문제:

읽기 매우 불편 확대했을 때 콘텐츠가 가로로도 화면 폭을 넘으면, 사용자는 한 줄을 읽으려고 좌우로 스크롤하며 읽어야 합니다. 그리고 다음 줄로 가려면 다시 왼쪽 끝으로 가로 스크롤을 되돌리고, 세로로 내려야 하죠. 한 줄 읽을 때마다 좌우로 왕복하는 건 극도로 불편하고 피로합니다. 특히 저시력 사용자(이 기능의 주 대상)에게 치명적이죠.

맥락 상실 — 좌우로 스크롤하다 보면 — 지금 어느 위치인지, 어디까지 읽었는지 맥락을 잃습니다.

그래서 CP-431은 — 확대 시 스크롤을 단일 방향으로 유지하라고 합니다:

세로 스크롤만 보통 세로로 읽는 콘텐츠는, 확대해도 세로 스크롤만 생기게 합니다. 콘텐츠가 화면 폭에 맞춰 reflow(재배치) 되어, 가로로는 넘치지 않고 세로로만 길어지죠. 사용자는 위아래로만 스크롤하며 자연스 럽게 읽습니다(평소 세로 읽기처럼).

가로 스크롤 방지 확대했을 때 콘텐츠가 가로로 화면을 넘지 않게 합니다. 고정 폭 레이아웃(가로로 안 줄어듦) 대신 유연한 레이아웃(CP-429)으로 콘텐츠가 화면 폭에 맞춰 줄바꿈·재배치되게요.

WCAG 1.4.10 리플로우. 이는 WCAG 1.4.10 Reflow 기준입니다 콘텐츠를 확대(400%, 또는 320px 폭 상당) 해도, 양방향 스크롤 없이 한 방향(세로 콘텐츠는 세로) 스크롤로 볼 수 있어야 한다는 거죠. 즉 확대 시 가로 스크롤이 생기면 안 됩니다(세로 텍스트 기준).

예외 본질적으로 2차원인 콘텐츠. WCAG 1.4.10도 본질적으로 2차원 배치가 필요한 콘텐츠(큰 표, 지도, 다이어 그램, 이미지)는 양방향 스크롤을 허용합니다. 즉 일반 텍스트·UI는 단일 방향이되, 큰 표·지도 같은 건 예외죠. 다만 그 외 일반 콘텐츠는 단일 방향이어야 합니다.

reflow의 핵심. 단일 방향 스크롤을 만드는 기술은 reflow(콘텐츠 재배치)입니다. 확대하면 콘텐츠가 좁아진 가용 폭에 맞춰 줄바꿈되고 세로로 길어지죠. 이게 되려면 상대 단위·유연 레이아웃(CP-429), 고정 폭 없음, overflow 관리가 필요합니다. CP-429(반응형 값)→CP-430(손실 없음)→CP-431(단일 방향)이 연결된 흐름이죠.

이 규칙은 화면 크기 조정의 ’읽기 편의 보장’을 담당합니다 — 확대 시 단일 방향 스크롤로(431), 저시력 사용자가 좌우 왕복 없이 자연스럽게 읽게 하죠. 화면 크기 조정 5개 규칙이 이로써 마무리됩니다.

정리하면 — 확대 시 양방향 스크롤이 생기면 좌우 왕복으로 읽기가 극도로 불편하므로, 콘텐츠를 reflow해 단일 방향 (보통 세로) 스크롤만 생기게 하되 큰 표·지도 등 2차원 콘텐츠는 예외로 둬야 합니다.

3. 점검 / 개선

무엇을 점검하나

단일 방향 — 확대(400%/320px 상당) 시 스크롤이 한 방향(세로)으로만 생기는가.

가로 스크롤 없음 — 일반 텍스트·UI가 확대 시 가로로 넘쳐 가로 스크롤이 생기지 않는가.

reflow·예외 — 콘텐츠가 폭에 맞춰 재배치되고, 표·지도 등 2차원만 예외인가.

개선 방향

유연 레이아웃·상대 단위(CP-429)로 reflow. 고정 폭 제거. 확대 시 가로 스크롤 방지.

WCAG 1.4.10 검증(400% 확대). 큰 표·지도는 예외 허용.

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

역할	책임
퍼블리셔/개발	reflow·단일 방향 스크롤 구현
QA/접근성	확대 시 스크롤 방향 검증

기관 유형	CP-431 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (화면 크기 조정 사용 시)

웹접근성 의무 대상이며 크기 조정을 제공하는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 확대(400%/320px 상당) 시 스크롤이 한 방향(세로)으로만 생기나요?

□ 일반 텍스트·UI가 확대 시 가로로 넘쳐 가로 스크롤이 생기지 않나요?

□ 콘텐츠가 폭에 맞춰 재배치되고, 표·지도 등 2차원만 예외인가요?

❓ FAQ

Q1. 왜 양방향 스크롤이 안 좋나요? 한 줄 읽을 때마다 좌우로 왕복하고 다음 줄로 돌아와야 해 극도로 불편합니다. 저시력 사용자에게 치명적이죠. Q2. 어떻게 단일 방향으로 만드나요? reflow(콘텐츠 재배치)입니다. 유연 레이아웃·상대 단위로 콘텐츠가 폭에 맞춰 줄바꿈되어 세로로만 길어지게 하죠. Q3. 큰 표나 지도는요? 본질적으로 2차원이 필요한 콘텐츠(표·지도·이미지)는 양방향 스크롤 예외입니다(WCAG 1.4.10). 일반 텍스트·UI만 단일 방향이죠.

6. 마무리

CP-431의 메시지:

한 방향으로만 스크롤 — 확대 시 스크롤을 단일 방향(세로)으로 유지하라.

확대 시 양방향 스크롤이 생기면 좌우 왕복으로 읽기가 극도로 불편합니다. 콘텐츠를 reflow해 단일 방향 스크롤만 생기게 하되 표·지도는 예외로 두는 게 핵심이죠. 이로써 화면 크기 조정 5개 규칙이 마무리됩니다. 다음 편부터는 접근 가능한 미디어(Accessible media)입니다.

다음 편 예고 ▶ 「552. (CP-432) 접근 가능한 미디어 — 영상·음성 콘텐츠에 자막·대본 등 대체 수단을 제공하고 있다.」

ViewCheck는 확대 시 단일 방향 스크롤이 유지되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 화면 크기 조정(Resize) 가이드 — https://www.krds.go.kr/html/site/component/component_43.html

WCAG 2.1 SC 1.4.10 Reflow — https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

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

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