Day 12) 접근성을 위해 가독성 높이기

🎄  A11y Advent Calendar (번역) 12일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)

 

웹과 같은 텍스트 중심 매체에서 가독성은 반드시 고려해야 할 사항입니다. 컨텐츠를 가독성 있게 만드는 데 특별한 주의를 기울이면 모든 사람이 더 편안하게 사용할 수 있을 뿐만 아니라 색맹이나 난독증과 같은 다양한 장애를 가진 사람들에게도 도움이 됩니다.

이 글을 위해 조사하는 동안 legibility와 readability의 차이에 대해 알게 되었습니다. legibility는 폰트의 높이, 너비, 두께와 같은 특성을 기반으로 한 폰트 디자인의 산물입니다. 반면 readability은 글꼴 크기, 글자 간격, 줄 높이 및 색상과 같은 폰트 사용 방식과 관련이 있습니다.

legability
글자가 얼마나 쉽게 구분되고 읽히는지를 나타냅니다.(글자 자체의 디자인에 관한 것)고딕체와 같이 각 글자의 형태가 명확한 폰트는 legibility가 높습니다.손글씨 스타일의 폰트나 장식이 많은 글씨체는 legibility가 낮을 수 있습니다.

redability
문장이 얼마나 쉽게 읽히고 이해되는지를 나타냅니다. (글자와 문장의 배치와 스타일에 관한 것)글자 크기가 너무 작거나 줄 간격이 좁으면 readability가 낮아집니다.적절한 여백과 대비를 통해 문장을 구성하면 readability가 높아집니다.

 

가독성과 관련하여 가장 먼저 기억해야 할 점은, 만능 해결책은 없다는 것입니다. 작은 글꼴 크기를 피하고 적절한 색상 대비를 사용하는 등의 일반적인 권장 사항은 유용할 수 있지만, 그 효과는 사람마다 다를 수 있습니다.

 

예를 들어, 몇 년 전 강연 후에 한 난독증 환자가 본문 텍스트의 대비를 선명하게 하라는 조언이 자신에게는 오히려 도움이 되지 않았다고 말한 적이 있습니다. 또한, 어떤 사람은 세리프 글꼴이 더 읽기 쉽다고 느끼는 반면, 그렇지 않다고 느끼는 사람도 있습니다.

 

가독성을 높이기 위해 할 수 있는 일반적인 작업들

 

1. 적절한 글꼴 크기 선택

본문 텍스트의 글꼴 크기는 디자인에 따라 다르지만, 16px에서 30px 사이를 권장합니다. 일반적으로 예상보다 큰 글꼴 크기가 더 효과적일 수 있습니다.

 

2. 줄 길이 제한

한 줄의 길이가 너무 길면 읽기 어렵습니다. 70~90자가 적당하며, 이는 CSS ch 단위를 사용해 쉽게 구현할 수 있습니다.

.text-box {
    width: 60ch; /* 글자 60개 정도의 너비 */
}

 

3. 적절한 줄 간격

줄 간격이 좁으면 읽기 어렵습니다. WCAG(1.4.12 텍스트 간격) 가이드라인에 따르면, 줄 높이는 글꼴 크기의 1.5배 이상이 권장됩니다.

단, 큰 제목처럼 글꼴 크기가 클 경우, 줄 높이 1.5가 다소 어색할 수 있으므로 1.1~1.2를 고려하세요.

 

4. 텍스트 정렬 방식

- 텍스트를 justify(양쪽 정렬)하지 마세요. 단어 사이 간격이 달라져 텍스트를 읽기 어렵게 만들 수 있습니다.

- 텍스트를 중앙 정렬하지 마세요. 눈은 줄 사이를 빠르게 이동하기 위해 시작 정렬(왼쪽 정렬)에 의존하므로 중앙 정렬은 가독성을 떨어뜨립니다.

 

5. 적절한 색상 대비

WCAG contrast 가이드라인을 참고해 텍스트와 배경 간의 충분한 대비를 확보하세요. 이는 색맹 사용자나 저시력 사용자에게 특히 중요합니다.

 

6. 글꼴 선택

특정 글꼴을 추천하기는 어렵습니다. 필기체나 이국적인 글꼴이 아니라면, 잘 디자인된 전문 글꼴이 대부분 적합합니다.

한 가지 유의할 점은, 많은 사용자가 브라우저에서 자신에게 편한 글꼴로 텍스트를 재정의한다는 점입니다. 예를 들어, Comic Sans는 일부 난독증 환자에게 훌륭한 글꼴로 알려져 있습니다.

 

가독성은 단순히 디자인 요소를 넘어, 더 많은 사용자가 콘텐츠를 효과적으로 소비할 수 있도록 돕는 핵심적인 접근성 요소입니다. 위의 가이드라인을 따르면 다양한 사용자에게 더 읽기 쉽고 편안한 콘텐츠를 제공할 수 있습니다.

 

출처 Day 12) Readability