DLWorker UI/UXPattern 08
2026.10.12.3 · proposed
08

PATTERN · CONTENT OVERFLOW

긴 콘텐츠 안정성

긴 식별자·지침·표·카드를 읽을 수 있게 wrap, clamp, horizontal region과 responsive 변환 규칙을 구분합니다.

proposedContract v12026.10.12.3

01 · PURPOSE

무엇을 해결하는가

긴 식별자·지침·표·카드를 읽을 수 있게 wrap, clamp, horizontal region과 responsive 변환 규칙을 구분합니다.

02 · USE WHEN

사용 조건

사용자나 외부 시스템이 길이를 통제할 수 없는 텍스트를 UI에 표시할 때 사용합니다.

  • 식별자는 overflow-wrap:anywhere
  • 제목 clamp는 전체 보기 경로와 함께 사용
  • 표는 card 전환 또는 명시적 horizontal scroll region 제공

03 · STATUS

표준 상태와 버전

표준
proposed
도입 버전
2026.10.12.3
배포
source-only

04 · LIVE EXAMPLE

실행 예제

worker-session-019feed7-b378-78f3-9da7-ea4c045fc24e-remote-request-api
대상상태식별자
Remote Request APIreadyrequest-20261011-019feed7-b378-78f3-9da7-ea4c045fc24e

Illustrative — 실제 Worker runtime 데이터가 아닙니다.

05 · RESPONSIVE

Desktop · Tablet · Mobile

Desktop

정보 밀도와 보조 설명을 유지합니다.

Tablet

열을 축소하고 조작 순서를 보존합니다.

Mobile

320px에서 page overflow 없이 단일 열로 전환합니다.

06 · STATES

상태 변형

shortwrappedclampedexpandedtable-scrollcopied

07 · STRESS

콘텐츠 스트레스

  • UUID 4개가 연결된 ID
  • 공백 없는 URL 300자
  • 한국어 지침 20문단
  • 12열 표

08 · ACCESSIBILITY

키보드와 보조기술

  • title 속성에만 전체 내용을 숨기지 않음
  • scroll region에 label과 keyboard 접근 제공
  • copy action에 결과 status 제공

09 · DO / DON'T

선택 기준

Do
  • 내용 성격에 맞춰 wrap과 clamp를 구분
  • mobile에서 label-value card로 전환
Don't
  • 고정 폭에서 ellipsis만 적용
  • 페이지 전체 horizontal overflow 허용

10 · CODE

구현 예제

<code class="identifier">worker-session-019feed7-b378-78f3-9da7-ea4c045fc24e</code><div class="table-scroll" tabindex="0" aria-label="세션 표">…</div>

11 · VALIDATION

검증 체크리스트

  1. 320px overflow
  2. long URL
  3. large table
  4. copy feedback

12 · ADOPTION

Worker 채택 상태

채택
not-started
소유
Worker 개발세션
실행 증거
없음