텍스트 간격 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 모바일 접근성 제작 기법
  • 텍스트 간격
요약 설명

관련 지침(명료성) : 줄·단락·자간·단어 간격 조정 시에도 콘텐츠와 기능이 유지되는가?
사용자가 OS나 앱 내 가독성 설정으로 간격을 넓혀도 글자가 겹치거나 잘리면 정보가 사라집니다. 레이아웃이 간격 변화를 흡수할 수 있어야 합니다.

모바일 앱 접근성 체크리스트(MACAG) 전체 보기
WCAG 2.2 — Text Spacing

필요성

난독·저시력 사용자는 행간·자간을 넓혀 읽는 경우가 많습니다. 고정 높이의 라벨이나 한 줄 클립 처리는 간격이 조금만 변해도 내용이 잘립니다.

대상

  • 난독·학습 장애인

    글자 간격을 넓혀야 단어 경계를 안정적으로 읽는 사용자.

  • 저시력 사용자

    행간을 키워 줄 사이를 구분하려는 사용자.

  • 고령 사용자

    작은 라벨이 두 줄로 넘어가도 버튼과 겹치지 않길 원하는 사용자.

  • WebView 콘텐츠 편집자

    사용자 스타일시트·리더 뷰와 충돌하지 않는 마크업이 필요합니다.

체크리스트

  • WCAG 텍스트 간격 세트

    line-height 1.5, paragraph margin 2em 등 권장 값을 적용해 깨짐이 없는가?

  • 한 줄 클립

    타이틀·버튼 라벨이 멀티라인으로 흐를 수 있는가?

  • 아이콘+텍스트

    줄바꿈 시에도 아이콘 의미와 터치 타깃이 유지되는가?

  • 입력 필드

    플로팅 레이블이 확대·간격 조정 시 필드와 겹치지 않는가?

구현 시 참고

  • 멀티라인 텍스트에는 최소 높이 고정 대신 intrinsic 콘텐츠 크기에 맞는 제약을 사용합니다.
  • WebView에서는 CSS line-height, letter-spacing 사용자 스타일이 깨지지 않는지 확인합니다.
  • 아이콘과 텍스트를 한 줄에 억지로 맞추지 말고, 줄바꿈 시에도 아이콘 의미가 유지되게 배치합니다.

점검 방법

  • 접근성 단축키·개발자 도구로 WCAG 텍스트 간격 값을 일괄 적용한 뒤 주요 화면을 스크린샷 비교합니다.
  • iOS 동적 타입·Android 글꼴 크기 최대에서 동일 시나리오를 반복합니다.

개발방법

아래 코드는 텍스트 간격 검사항목을 구현할 때 바로 참고할 수 있는 기본 예시입니다. 줄간격·자간·단락 간격이 커져도 텍스트 겹침이나 정보 손실이 없도록 처리합니다.

네이티브

iOS (Swift)

Android

하이브리드

html

Vue

React

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링